Yay CartoAssets

This commit is contained in:
xavijam 2016-01-14 12:14:43 +01:00
commit e8ec2793df
27 changed files with 11454 additions and 0 deletions

3
.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
node_modules
npm-debug.log
tmp

13
.jshintrc Normal file
View File

@ -0,0 +1,13 @@
{
"curly": true,
"eqeqeq": true,
"immed": true,
"latedef": true,
"newcap": true,
"noarg": true,
"sub": true,
"undef": true,
"boss": true,
"eqnull": true,
"node": true
}

26
.styleguide Normal file
View File

@ -0,0 +1,26 @@
{
"sgComment": "SG",
"srcFolder": ".",
"outputFile": "./styleguide/index.html",
"templateFile": "./styleguide/_template.html",
"themeFile": "./styleguide/theme.css",
"highlightFolder": "./node_modules/highlight.js/styles",
"highlightStyle": "github",
"excludeDirs": [
"target",
"node_modules"
],
"fileExtensions": {
"scss": true,
"sass": true,
"css": true,
"less": true
},
"walkerOptions": {
"followLinks": false
},
"customVars": {
"sampleVar": "Hello from customVars!"
},
"jqFile": "./node_modules/jquery/dist/jquery.js"
}

View File

@ -0,0 +1 @@
.CDB-Shape-dot{display:inline-block;width:8px;min-width:8px;height:8px;border-radius:8px}

View File

1
.tmp/src/scss/core/normalize.css vendored Normal file
View File

@ -0,0 +1 @@
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

View File

@ -0,0 +1 @@
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after{content:'';content:none}q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

1
.tmp/src/scss/helpers/normalize.css vendored Normal file
View File

@ -0,0 +1 @@
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

View File

@ -0,0 +1 @@
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after{content:'';content:none}q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

View File

View File

80
Gruntfile.js Normal file
View File

@ -0,0 +1,80 @@
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
concat: {
dist: {
options: {},
files: {
'dist/cartostyles.css': [
'.tmp/src/scss/**/*.css'
]
}
}
},
sass: {
dist: {
options: {
sourceMap: false,
outputStyle: 'compressed'
},
files: [{
expand: true,
src: [
'src/scss/**/*.scss'
],
dest: '.tmp',
ext: '.css'
}]
}
},
cssmin: {
dist: {
options: {
check: 'gzip'
},
files: {
'dist/cartostyles.css': [
'dist/cartostyles.css'
]
}
}
},
watch: {
scss: {
files: [
'src/scss/**/*.scss'
],
tasks: [
'sass',
'concat',
'cssmin'
],
options: {
spawn: false,
livereload: 35732
}
}
}
});
grunt.registerTask('default', ['sass', 'concat', 'cssmin', 'watch:scss']);
};
//
// var gulp = require('gulp');
// var shell = require('gulp-shell');
// var watch = require('gulp-watch');
//
// gulp.task('watch', function() {
// gulp.watch('path/to/watch/for/changes/**/*.scss', ['makeStyleguide']);
// });
//
// gulp.task('makeStyleguide',
// shell.task(
// ['styleguide']
// )
// );
//
// gulp.task('default', ['watch']);

22
LICENSE-MIT Normal file
View File

@ -0,0 +1,22 @@
Copyright (c) 2016 xavijam
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

9
README.md Normal file
View File

@ -0,0 +1,9 @@
# CartoAssets
> Share frontend assets between different CartoDB repositories
- CSS styleguide.
- JS styleguide.
- CSS components.
- Font icon?

1
dist/cartostyles.css vendored Normal file
View File

@ -0,0 +1 @@
.CDB-Shape-dot{display:inline-block;width:8px;min-width:8px;height:8px;border-radius:8px}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}mark{background:#ff0;color:#000}sub,sup{line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}optgroup{font-weight:700}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0;line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

46
package.json Normal file
View File

@ -0,0 +1,46 @@
{
"name": "cartoassets",
"description": "Share frontend assets between different CartoDB repositories",
"version": "0.1.4",
"homepage": "https://github.com/cartodb/CartoAssets",
"author": {
"name": "xavijam",
"email": "xavijam@gmail.com"
},
"repository": {
"type": "git",
"url": "git://github.com/cartodb/CartoAssets.git"
},
"bugs": {
"url": "https://github.com/cartodb/CartoAssets/issues"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/cartodb/CartoAssets/blob/master/LICENSE-MIT"
}
],
"engines": {
"node": ">= 0.8.0"
},
"devDependencies": {
"jquery": "~2.2.0",
"highlight.js": "~9.1.0",
"markdown-styleguide-generator": "~2.0.4",
"grunt-sass": "1.1.0",
"grunt-contrib-concat": "0.5.1",
"grunt-contrib-cssmin": "0.14.0",
"grunt-contrib-watch": "0.6.1",
"grunt-shell": "1.1.2",
"load-grunt-tasks": "*"
},
"peerDependencies": {
"grunt": "~0.4.5"
},
"keywords": [
"library",
"CartoDB",
"share",
"assets"
]
}

BIN
src/scss/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -0,0 +1,20 @@
/* SG
# Shapes/dot
You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:
```
<button class="CDB-Shape-dot CDB-Widget-dot--navigation is-selected" data-page="3"></button>
<button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>
```
*/
// Shapes styles
// ----------------------------------------------
.CDB-Shape-dot {
display: inline-block;
width: 8px;
min-width: 8px;
height: 8px;
border-radius: 8px;
}

View File

@ -0,0 +1,236 @@
// Mixins
// - Necessary SCSS functions
// - Browser support:
// · IE => 10
// · Chrome => 21
// · Sarafi => 6
// · Firefox => 24
// · Opera => 12
// --------------------------------------------------
/* ADDS A BROWSER PREFIX TO THE PROPERTY */
@mixin css3-prefix($property, $value) {
-webkit-#{$property}: #{$value};
-khtml-#{$property}: #{$value};
-moz-#{$property}: #{$value};
-ms-#{$property}: #{$value};
-o-#{$property}: #{$value};
#{$property}: #{$value};
}
// Display inline
@mixin inline-block() {
display: inline-block;
vertical-align: middle;
}
// Display flex functions
@mixin display-flex() {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
@mixin flex($v) {
-webkit-box-flex: $v;
-moz-box-flex: $v;
-webkit-flex: $v;
-ms-flex: $v;
flex: $v;
}
@mixin flex-direction($v) {
-webkit-flex-direction: $v;
-moz-flex-direction: $v;
-ms-flex-direction: $v;
flex-direction: $v;
// IE10 doesn't support this property
}
@mixin flex-grow($v) {
-webkit-flex-grow: $v;
-moz-flex-grow: $v;
-ms-flex-grow: $v;
flex-grow: $v;
// IE10 fallback
-ms-flex: $v 0 auto;
}
@mixin flex-wrap($v) {
-webkit-flex-wrap: $v;
-moz-flex-wrap: $v;
-ms-flex-wrap: $v;
flex-wrap: $v;
// IE10 doesn't support this property
}
@mixin flex-order($v) {
-webkit-flex-order: $v;
-webkit-box-ordinal-group: $v;
-moz-box-ordinal-group: $v;
-moz-flex-order: $v;
-ms-flex-order: $v;
-ms-order: $v;
box-ordinal-group: $v;
flex-order: $v;
order: $v;
}
@mixin justify-content($v, $ie-v: "") {
-webkit-justify-content: $v;
-moz-justify-content: $v;
-ms-justify-content: $v;
justify-content: $v;
// Hello IE10
-ms-flex-pack: if($ie-v != "", $ie-v, $v);
}
@mixin align-items($v, $ie-v: "") {
-webkit-align-items: $v;
-moz-align-items: $v;
-ms-align-items: $v;
align-items: $v;
// Hello IE10
-ms-flex-align: if($ie-v != "", $ie-v, $v);
}
@mixin align-content($v, $ie-v: "") {
-webkit-align-content: $v;
-moz-align-content: $v;
-ms-align-content: $v;
align-content: $v;
// Hello IE10
-ms-flex-align: if($ie-v != "", $ie-v, $v);
}
// CSS3 typical functions
@mixin opacity($v) {
opacity:$v;
filter:alpha(opacity=($v*100)); // IE10
}
@mixin grayscale() {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}
@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999) {
background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
background-image: -webkit-linear-gradient(top, $startColor, $endColor);
background-image: -moz-linear-gradient(top, $startColor, $endColor);
background-image: -ms-linear-gradient(top, $startColor, $endColor);
background-image: -o-linear-gradient(top, $startColor, $endColor);
background-image: linear-gradient(top, $startColor, $endColor);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
}
@mixin background-horizontal($startColor: #3C3C3C, $endColor: #999999) {
background-color: $startColor;
background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
background-image: -webkit-linear-gradient(left, $startColor, $endColor);
background-image: -moz-linear-gradient(left, $startColor, $endColor);
background-image: -ms-linear-gradient(left, $startColor, $endColor);
background-image: -o-linear-gradient(left, $startColor, $endColor);
background-image: linear-gradient(left, $startColor, $endColor);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}', gradientType='1');
}
@mixin image-2x($image, $width, $height, $x: 0, $y: 0) {
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
/* on retina, use image that's scaled by 2 */
background: url($image);
background-size: $width $height;
background-position: $x $y;
}
}
@mixin transform($params) {
@include css3-prefix('transform', $params);
}
@mixin transform-style($style: preserve-3d) {
@include css3-prefix('transform-style', $style);
}
@mixin transition($properties...) {
@if length($properties) >= 1 {
@include css3-prefix('transition', $properties);
}
@else {
@include css3-prefix('transition', $what: all, $length: 1s, $easing: ease-in-out);
}
}
/* FONT FACE */
@mixin font-face($fontFamily: myFont, $eotFileSrc: 'myFont.eot', $woffFileSrc: 'myFont.woff', $ttfFileSrc: 'myFont.ttf', $svgFileSrc: 'myFont.svg', $svgFontID: '#myFont') {
@font-face {
font-family: $fontFamily;
src: url($eotFileSrc) format('eot'),
url($woffFileSrc) format('woff'),
url($ttfFileSrc) format('truetype'),
url($svgFileSrc + $svgFontID) format('svg');
}
}
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@-moz-keyframes #{$animation-name} {
@content;
}
@-ms-keyframes #{$animation-name} {
@content;
}
@-o-keyframes #{$animation-name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
@mixin text-overflow() {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@mixin animation($str) {
@include css3-prefix('animation', $str);
}
@mixin line-clamp($lines) {
height: $lines * $sLineHeight-normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
overflow: hidden;
text-overflow: ellipsis;
&:after {
content: ' ';
display: block;
position: absolute;
bottom: 0;
right: 0;
height: $sLineHeight-normal;
width: 2 * $sLineHeight-normal;
@include background-horizontal(rgba(255,255,255,0), rgba(255,255,255,1));
}
}
@mixin media-query() {
@media only screen and (min-width: 320px) and (max-width: 960px) {
@content;
}
}
@mixin media-query-mobile() {
@media only screen and (max-width: 600px) {
@content;
}
}

View File

@ -0,0 +1,29 @@
// Helper classes
// ----------------------------------------------
@import 'mixins';
.u-tSpace {
margin-top: 4px;
}
.u-tSpace-xl {
margin-top: 12px;
}
.u-rSpace {
margin-right: 4px;
}
.u-rSpace--m {
margin-right: 8px;
}
.u-rSpace--xl {
margin-right: 12px;
}
.u-lSpace {
margin-left: 4px;
}
.u-lSpace--xl {
margin-left: 12px;
}
.u-iBlock {
@include inline-block();
}

578
src/scss/utilities/normalize.scss vendored Normal file
View File

@ -0,0 +1,578 @@
/* ==========================================================================
Normalize.scss settings
========================================================================== */
/**
* Includes legacy browser support IE6/7
*
* Set to false if you want to drop support for IE6 and IE7
*/
$legacy_browser_support: false !default;
/* Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
* without disabling user zoom.
* 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
@if $legacy_browser_support {
*font-size: 100%; /* 3 */
}
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
@if $legacy_browser_support {
*display: inline;
*zoom: 1;
}
}
/**
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
a {
&:active, &:hover {
outline: 0;
};
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
@if $legacy_browser_support {
blockquote {
margin: 1em 40px;
}
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
@if $legacy_browser_support {
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.67em;
margin: 2.33em 0;
}
}
/**
* Addresses styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
@if $legacy_browser_support {
/**
* Addresses margins set differently in IE 6/7.
*/
p,
pre {
*margin: 1em 0;
}
/*
* Addresses CSS quotes not supported in IE 6/7.
*/
q {
*quotes: none;
}
/*
* Addresses `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none;
}
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
@if $legacy_browser_support {
/* ==========================================================================
Lists
========================================================================== */
/*
* Addresses margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
*margin: 1em 0;
}
dd {
*margin: 0 0 0 40px;
}
/*
* Addresses paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
*padding: 0 0 0 40px;
}
/*
* Corrects list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
*list-style: none;
*list-style-image: none;
}
}
/* Embedded content
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 8/9/10.
* 2. Improves image quality when scaled in IE 7.
*/
img {
border: 0;
@if $legacy_browser_support {
*-ms-interpolation-mode: bicubic; /* 2 */
}
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
@if $legacy_browser_support {
_font-family: 'courier new', monospace;
}
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
* 4. Improves appearance and consistency in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
@if $legacy_browser_support {
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
@if $legacy_browser_support {
*overflow: visible; /* 4 */
}
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
@if $legacy_browser_support {
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
box-sizing: content-box; /* 2 */
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
* 3. Corrects text not wrapping in Firefox 3.
* 4. Corrects alignment displayed oddly in IE 6/7.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
@if $legacy_browser_support {
white-space: normal; /* 3 */
*margin-left: -7px; /* 4 */
}
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}

View File

@ -0,0 +1,40 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote {
&:before, &:after {
content: '';
content: none; } }
q {
&:before, &:after {
content: '';
content: none; } }
table {
border-collapse: collapse;
border-spacing: 0; }

View File

View File

91
styleguide/_template.html Normal file
View File

@ -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
styleguide/index.html Normal file

File diff suppressed because it is too large Load Diff

122
styleguide/theme.css Normal file
View File

@ -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);
}