|
|
<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>
|
