Yay CartoAssets
This commit is contained in:
xavijam
@@ -0,0 +1,91 @@
|
||||
<head>
|
||||
<link href='../dist/cartostyles.css' type='text/css' rel='stylesheet'>
|
||||
</head>
|
||||
|
||||
{{> theme}}
|
||||
{{> highlight}}
|
||||
{{> jquery}}
|
||||
|
||||
<script>
|
||||
var j = jQuery.noConflict(true);
|
||||
j(function() {
|
||||
|
||||
// Show section in Styleguide
|
||||
j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
|
||||
|
||||
// Click on link with subheadings
|
||||
j('#styleguide-menu .submenulink').click(function(event) {
|
||||
event.preventDefault();
|
||||
var jqCurSubmenu = j('[data-submenu="' + j(this).data('section') + '"]');
|
||||
var isCurSubmenuOn = jqCurSubmenu.hasClass('on');
|
||||
j('#styleguide-menu .on').removeClass('on');
|
||||
if (!isCurSubmenuOn) {
|
||||
jqCurSubmenu.addClass('on');
|
||||
j(this).addClass('on');
|
||||
}
|
||||
showSection(j(this).data('section'));
|
||||
});
|
||||
|
||||
// Click on link without subheadings
|
||||
j('#styleguide-menu .sectionlink').click(function(event) {
|
||||
event.preventDefault();
|
||||
j('#styleguide-menu .on').removeClass('on');
|
||||
j(this).addClass('on');
|
||||
showSection(j(this).data('section'));
|
||||
});
|
||||
|
||||
// Show/Hide sections
|
||||
function showSection(section) {
|
||||
j('#styleguide .section').hide();
|
||||
var jqCurSections = j('#styleguide .section[data-section="' + section + '"]');
|
||||
jqCurSections.show();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="styleguide-menu">
|
||||
<ul>
|
||||
{{#each menu}}
|
||||
<li>
|
||||
{{#if headings.0.name}}
|
||||
<a class="submenulink" href="#" data-section="{{name}}">{{name}}</a>
|
||||
<ul class="submenu" data-submenu="{{../name}}">
|
||||
{{#each headings}}
|
||||
<li><a href="#{{id}}">{{name}}</a></li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
{{#unless headings.0.name}}
|
||||
<a class="sectionlink" href="#" data-section="{{name}}">{{name}}</a>
|
||||
{{/unless}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="styleguide">
|
||||
{{#each sections}}
|
||||
<div class="section" id="{{id}}" data-section="{{section}}" data-heading="{{heading}}">
|
||||
|
||||
<div class="comment">
|
||||
<h1>{{section}}{{#if heading}}/{{heading}}{{/if}}</h1>
|
||||
{{{comment}}}
|
||||
</div>
|
||||
|
||||
{{#if code}}
|
||||
<div class="result">
|
||||
{{{code}}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if markup}}
|
||||
<div class="markup hljs">
|
||||
<pre>
|
||||
{{{markup}}}
|
||||
</pre>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
+10133
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,122 @@
|
||||
#styleguide {
|
||||
float: left;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#styleguide .section {
|
||||
display: none;
|
||||
margin-bottom: 2em;
|
||||
-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
|
||||
-moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
|
||||
box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
|
||||
}
|
||||
|
||||
#styleguide .result,
|
||||
#styleguide .comment {
|
||||
padding: 1em;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
#styleguide .result {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
#styleguide .comment {
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
|
||||
#styleguide .section .comment code {
|
||||
color: #3fbead;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#styleguide .markup {
|
||||
border: 1px solid #ddd;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
#styleguide code,
|
||||
#styleguide pre {
|
||||
border: none;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
word-spacing: normal;
|
||||
margin: 0;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
|
||||
/* menu */
|
||||
#styleguide-menu {
|
||||
width: calc(20% - 1em - 2px);
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
padding: 1em 0;
|
||||
|
||||
border: 1px solid #ddd;
|
||||
-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
|
||||
-moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
|
||||
box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.43);
|
||||
}
|
||||
|
||||
#styleguide-menu .submenu {
|
||||
display: none;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
#styleguide-menu .submenu.on{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#styleguide-menu ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#styleguide-menu li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#styleguide-menu a {
|
||||
display: block;
|
||||
width: calc(100% - 2em + 2px);
|
||||
padding: 0.3em 1em;
|
||||
text-decoration: none;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
|
||||
}
|
||||
|
||||
#styleguide-menu ul ul a {
|
||||
padding: 0.3em 1em 0.3em 2em;
|
||||
width: calc(100% - 3em + 2px);
|
||||
}
|
||||
|
||||
#styleguide-menu a:visited,
|
||||
#styleguide-menu a:hover,
|
||||
#styleguide-menu a:active {
|
||||
display: block;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
#styleguide-menu a:hover {
|
||||
background-color: rgba(250, 255, 70, 0.3);
|
||||
}
|
||||
|
||||
#styleguide-menu a.on {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
Reference in New Issue
Block a user