133 lines
4.7 KiB
HTML
133 lines
4.7 KiB
HTML
<head>
|
||
<link href='../css/cartostyles.css' type='text/css' rel='stylesheet'>
|
||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||
<style>
|
||
.box {
|
||
display: inline-block;
|
||
width: 100px;
|
||
height: 100px;
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
{{> theme}}
|
||
{{> highlight}}
|
||
{{> jquery}}
|
||
|
||
<script>
|
||
var j = jQuery.noConflict(true);
|
||
j(function() {
|
||
// Click on link with subheadings
|
||
j('#styleguide-menu .submenulink').click(function(event) {
|
||
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) {
|
||
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();
|
||
}
|
||
|
||
// Show current section
|
||
var currentElement = window.location.hash.replace(/#/g, '');
|
||
if (currentElement) {
|
||
var section = currentElement.split('-')[0];
|
||
j('.submenulink[data-section="' + section + '"]').click();
|
||
} else {
|
||
// Show section in Styleguide
|
||
j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
|
||
}
|
||
|
||
$('.CDB-Button--loading').click(function(){
|
||
$(this).toggleClass("is-loading");
|
||
})
|
||
|
||
});
|
||
</script>
|
||
|
||
<div class="CDB-Text" id="styleguide-menu">
|
||
<ul>
|
||
<li>
|
||
<a class="submenulink" href="#Basics" data-section="Basics">Basics</a>
|
||
</li>
|
||
{{#each menu}}
|
||
<li>
|
||
{{#if headings.0.name}}
|
||
<a class="submenulink" href="#{{name}}" 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="#{{name}}" data-section="{{name}}">{{name}}</a>
|
||
{{/unless}}
|
||
</li>
|
||
{{/each}}
|
||
</ul>
|
||
</div>
|
||
|
||
<div id="styleguide">
|
||
<div class="section" id="Basics" data-section="Basics" data-heading="Basics">
|
||
<div class="comment">
|
||
<h1 class="CDB-Text CDB-Size-huge is-semibold">Basics</h1>
|
||
<p class="CDB-Text u-tSpace-xl">Important notes about this styleguide</p>
|
||
</div>
|
||
<div class="result">
|
||
<p class="CDB-Text">This is a preliminar WIP of the new dashboard stylesheet, based on the naming conventions of <a href="https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md">suitcss</a> and <a href="https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06">Medium’s CSS is actually pretty good.</a></p>
|
||
|
||
<p class="CDB-Text is-semibold u-tSpace-xl">General rules</p>
|
||
|
||
<ul class="styleguide-list CDB-Text u-tSpace-xl">
|
||
<li class="u-tSpace">All new elements added in this repository should have included a 'CDB-' namespace.</li>
|
||
<li class="u-tSpace">
|
||
<span class="CDB-Text is-semibold">Don't create default styles for common elements</span> (e.g. <code>input { padding: 10px 0 }</code>). It will make more difficult edit styles for the future custom elements and the <code>!important</code> use will grow.</li>
|
||
<li class="u-tSpace">
|
||
<span class="CDB-Text is-semibold">Avoid creating new classes with only one attribute</span> (e.g. <code>.marginRight { margin-right: 10px }</code> ). It is impossible to manage the amount of cases we would like to cover.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
{{#each sections}}
|
||
<div class="section" id="{{id}}" data-section="{{section}}" data-heading="{{heading}}">
|
||
|
||
<div class="comment">
|
||
<h1 class="CDB-Text CDB-Size-huge is-semibold">{{section}}{{#if heading}}/{{heading}}{{/if}}</h1>
|
||
<div class="CDB-Text u-tSpace-xl">{{{comment}}}</div>
|
||
</div>
|
||
|
||
{{#if code}}
|
||
<div class="result">
|
||
{{{code}}}
|
||
</div>
|
||
{{/if}}
|
||
|
||
{{#if markup}}
|
||
<div class="markup hljs">
|
||
<pre>
|
||
{{{markup}}}
|
||
</pre>
|
||
</div>
|
||
{{/if}}
|
||
|
||
</div>
|
||
{{/each}}
|
||
</div>
|