From e8ec2793df7714bda7eca8b8c099cc6001a7766c Mon Sep 17 00:00:00 2001 From: xavijam Date: Thu, 14 Jan 2016 12:14:43 +0100 Subject: [PATCH] Yay CartoAssets --- .gitignore | 3 + .jshintrc | 13 + .styleguide | 26 + .tmp/src/scss/components/shapes.css | 1 + .tmp/src/scss/core/mixins.css | 0 .tmp/src/scss/core/normalize.css | 1 + .tmp/src/scss/core/reset.css | 1 + .tmp/src/scss/helpers/normalize.css | 1 + .tmp/src/scss/helpers/reset.css | 1 + .tmp/src/scss/variables/colors.css | 0 .tmp/src/scss/variables/sizes.css | 0 Gruntfile.js | 80 + LICENSE-MIT | 22 + README.md | 9 + dist/cartostyles.css | 1 + package.json | 46 + src/scss/.DS_Store | Bin 0 -> 6148 bytes src/scss/components/shapes.scss | 20 + src/scss/utilities/_mixins.scss | 236 + src/scss/utilities/helpers.scss | 29 + src/scss/utilities/normalize.scss | 578 ++ src/scss/utilities/reset.scss | 40 + src/scss/variables/_colors.scss | 0 src/scss/variables/_sizes.scss | 0 styleguide/_template.html | 91 + styleguide/index.html | 10133 ++++++++++++++++++++++++++ styleguide/theme.css | 122 + 27 files changed, 11454 insertions(+) create mode 100644 .gitignore create mode 100644 .jshintrc create mode 100644 .styleguide create mode 100644 .tmp/src/scss/components/shapes.css create mode 100644 .tmp/src/scss/core/mixins.css create mode 100644 .tmp/src/scss/core/normalize.css create mode 100644 .tmp/src/scss/core/reset.css create mode 100644 .tmp/src/scss/helpers/normalize.css create mode 100644 .tmp/src/scss/helpers/reset.css create mode 100644 .tmp/src/scss/variables/colors.css create mode 100644 .tmp/src/scss/variables/sizes.css create mode 100644 Gruntfile.js create mode 100644 LICENSE-MIT create mode 100644 README.md create mode 100644 dist/cartostyles.css create mode 100644 package.json create mode 100644 src/scss/.DS_Store create mode 100644 src/scss/components/shapes.scss create mode 100644 src/scss/utilities/_mixins.scss create mode 100644 src/scss/utilities/helpers.scss create mode 100644 src/scss/utilities/normalize.scss create mode 100644 src/scss/utilities/reset.scss create mode 100644 src/scss/variables/_colors.scss create mode 100644 src/scss/variables/_sizes.scss create mode 100644 styleguide/_template.html create mode 100644 styleguide/index.html create mode 100644 styleguide/theme.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b785247 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +npm-debug.log +tmp diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..f57a8ff --- /dev/null +++ b/.jshintrc @@ -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 +} diff --git a/.styleguide b/.styleguide new file mode 100644 index 0000000..0f9e8e1 --- /dev/null +++ b/.styleguide @@ -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" +} diff --git a/.tmp/src/scss/components/shapes.css b/.tmp/src/scss/components/shapes.css new file mode 100644 index 0000000..e7eea9f --- /dev/null +++ b/.tmp/src/scss/components/shapes.css @@ -0,0 +1 @@ +.CDB-Shape-dot{display:inline-block;width:8px;min-width:8px;height:8px;border-radius:8px} diff --git a/.tmp/src/scss/core/mixins.css b/.tmp/src/scss/core/mixins.css new file mode 100644 index 0000000..e69de29 diff --git a/.tmp/src/scss/core/normalize.css b/.tmp/src/scss/core/normalize.css new file mode 100644 index 0000000..5556da1 --- /dev/null +++ b/.tmp/src/scss/core/normalize.css @@ -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} diff --git a/.tmp/src/scss/core/reset.css b/.tmp/src/scss/core/reset.css new file mode 100644 index 0000000..c77cca4 --- /dev/null +++ b/.tmp/src/scss/core/reset.css @@ -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} diff --git a/.tmp/src/scss/helpers/normalize.css b/.tmp/src/scss/helpers/normalize.css new file mode 100644 index 0000000..5556da1 --- /dev/null +++ b/.tmp/src/scss/helpers/normalize.css @@ -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} diff --git a/.tmp/src/scss/helpers/reset.css b/.tmp/src/scss/helpers/reset.css new file mode 100644 index 0000000..c77cca4 --- /dev/null +++ b/.tmp/src/scss/helpers/reset.css @@ -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} diff --git a/.tmp/src/scss/variables/colors.css b/.tmp/src/scss/variables/colors.css new file mode 100644 index 0000000..e69de29 diff --git a/.tmp/src/scss/variables/sizes.css b/.tmp/src/scss/variables/sizes.css new file mode 100644 index 0000000..e69de29 diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..cae5ad6 --- /dev/null +++ b/Gruntfile.js @@ -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']); diff --git a/LICENSE-MIT b/LICENSE-MIT new file mode 100644 index 0000000..2653d49 --- /dev/null +++ b/LICENSE-MIT @@ -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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..1e6923c --- /dev/null +++ b/README.md @@ -0,0 +1,9 @@ +# CartoAssets + +> Share frontend assets between different CartoDB repositories + + +- CSS styleguide. +- JS styleguide. +- CSS components. +- Font icon? diff --git a/dist/cartostyles.css b/dist/cartostyles.css new file mode 100644 index 0000000..9efb436 --- /dev/null +++ b/dist/cartostyles.css @@ -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} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..27b3216 --- /dev/null +++ b/package.json @@ -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" + ] +} diff --git a/src/scss/.DS_Store b/src/scss/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 + +``` +*/ +// Shapes styles +// ---------------------------------------------- + +.CDB-Shape-dot { + display: inline-block; + width: 8px; + min-width: 8px; + height: 8px; + border-radius: 8px; +} diff --git a/src/scss/utilities/_mixins.scss b/src/scss/utilities/_mixins.scss new file mode 100644 index 0000000..d393024 --- /dev/null +++ b/src/scss/utilities/_mixins.scss @@ -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,#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; + } +} diff --git a/src/scss/utilities/helpers.scss b/src/scss/utilities/helpers.scss new file mode 100644 index 0000000..ac55f15 --- /dev/null +++ b/src/scss/utilities/helpers.scss @@ -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(); +} diff --git a/src/scss/utilities/normalize.scss b/src/scss/utilities/normalize.scss new file mode 100644 index 0000000..9375ee9 --- /dev/null +++ b/src/scss/utilities/normalize.scss @@ -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; +} diff --git a/src/scss/utilities/reset.scss b/src/scss/utilities/reset.scss new file mode 100644 index 0000000..2982152 --- /dev/null +++ b/src/scss/utilities/reset.scss @@ -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; } diff --git a/src/scss/variables/_colors.scss b/src/scss/variables/_colors.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/scss/variables/_sizes.scss b/src/scss/variables/_sizes.scss new file mode 100644 index 0000000..e69de29 diff --git a/styleguide/_template.html b/styleguide/_template.html new file mode 100644 index 0000000..216806e --- /dev/null +++ b/styleguide/_template.html @@ -0,0 +1,91 @@ + + + + +{{> theme}} +{{> highlight}} +{{> jquery}} + + + +
+
    + {{#each menu}} +
  • + {{#if headings.0.name}} + {{name}} +
      + {{#each headings}} +
    • {{name}}
      • + {{/each}} +
    + {{/if}} + {{#unless headings.0.name}} + {{name}} + {{/unless}} +
    • + {{/each}} +
+
+ +
+ {{#each sections}} +
+ +
+

{{section}}{{#if heading}}/{{heading}}{{/if}}

+ {{{comment}}} +
+ + {{#if code}} +
+ {{{code}}} +
+ {{/if}} + + {{#if markup}} +
+
+{{{markup}}}
+
+
+ {{/if}} + +
+ {{/each}} +
diff --git a/styleguide/index.html b/styleguide/index.html new file mode 100644 index 0000000..038192e --- /dev/null +++ b/styleguide/index.html @@ -0,0 +1,10133 @@ + + + + + + + +
+ +
+ +
+
+ +
+

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>
+
+
+ +
+
diff --git a/styleguide/theme.css b/styleguide/theme.css new file mode 100644 index 0000000..df403f9 --- /dev/null +++ b/styleguide/theme.css @@ -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); +}