0.2.5

Add Montserrat font family

.travis.yml

@@ -1,7 +1,7 @@
 cache: false
 language: node_js
 node_js:
-  - "4.1"
+  - "6.14.2"
 
 install:
   - npm install

Gulpfile.js

@@ -1,21 +1,22 @@
 var gulp = require('gulp');
+var rename = require("gulp-rename");
 var iconfont = require('gulp-iconfont');
 var iconfontCss = require('gulp-iconfont-css');
 
-String.prototype.toCamelCase = function() {
-  return this.replace(/^([A-Z])|\s(\w)/g, function(match, p1, p2, offset) {
+String.prototype.toCamelCase = function () {
+  return this.replace(/^([A-Z])|\s(\w)/g, function (match, p1, p2, offset) {
     if (p2) return p2.toUpperCase();
     return p1.toLowerCase();
   });
 };
 
-gulp.task('default', function(){
+gulp.task('default', function () {
   gulp.src(['./icon-font/svgs/*.svg'])
 
   .pipe(iconfontCss({
     fontName: 'cartoIcon',
     path: './icon-font/template.jst.ejs',
-    targetPath: '../scss/cdb-icon-font.scss',
+    targetPath: '../scss/_cdb-icon-font.scss',
     fontPath: '../../fonts/'
   }))
 
@@ -25,4 +26,11 @@ gulp.task('default', function(){
   }))
 
   .pipe(gulp.dest('src/fonts/'));
+
+  gulp
+    .src('./node_modules/perfect-scrollbar/src/css/*')
+    .pipe(rename(function (path) {
+      path.basename = '_' + path.basename;
+    }))
+    .pipe(gulp.dest('./src/scss/vendor/perfect-scrollbar'));
 });

README.md

@@ -17,7 +17,7 @@ If you want to use any of the CartoAssets components, after the installation jus
 It will generate a UI documentation about the components in this repository:
 - ```grunt dev```
 
-If you want to check the documenation, it is generated in the ```dist``` folder.
+If you want to check the documentation, it is generated in the ```dist``` folder.
 
 ### How to add/update the icon font
 
@@ -41,6 +41,6 @@ Just run this command:
 
 ### Browser support
 
-![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)
+![Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/archive/chrome_12-48/chrome_12-48_48x48.png) | ![Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/archive/firefox_1.5-3/firefox_1.5-3_48x48.png) | ![IE](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/edge-tile/edge-tile_48x48.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/opera/opera_48x48.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/safari/safari_48x48.png)
 --- | --- | --- | --- | --- |
-31+ ✔ | 38+ ✔ | 10+ ✔ | 31+ ✔ | 8+ ✔ |
+31+ ✔ | 38+ ✔ | 11+ ✔ | 31+ ✔ | 8+ ✔ |

icon-font/template.jst.ejs

@@ -43,7 +43,7 @@ All available icons in CartoDB.
 <% var name = glyph.fileName.split("_")[2].toCamelCase(); %>
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-<%= name %> Size-large"></i>
-    <h4 class="Text Size-small"><%= name %></h4>
+    <h4 class="Text Size-small u-tSpace--m"><%= name %></h4>
   </div>
 <% }); %>
 ```

package.json

@@ -1,17 +1,12 @@
 {
   "name": "cartoassets",
-  "description": "Share frontend assets between different CartoDB repositories",
-  "version": "0.1.32",
+  "description": "Share frontend assets between different CARTO repositories",
+  "version": "0.2.5",
   "homepage": "https://github.com/cartodb/CartoAssets",
   "author": {
-    "name": "CartoDB",
-    "email": "contact@cartodb.com"
+    "name": "CARTO",
+    "email": "frontend@carto.com"
   },
-  "contributors": [
-    "Javier Álvarez <jmedina@cartodb.com>",
-    "Emilio García <emilio@cartodb.com>",
-    "Javier Arce <javierarce@cartodb.com>"
-  ],
   "repository": {
     "type": "git",
     "url": "git://github.com/cartodb/CartoAssets.git"
@@ -33,7 +28,7 @@
     "jquery": "~2.2.0",
     "highlight.js": "~9.1.0",
     "markdown-styleguide-generator": "~2.0.4",
-    "grunt-sass": "1.1.0",
+    "grunt-sass": "2.0.0",
     "grunt-contrib-clean": "0.7.0",
     "grunt-contrib-concat": "0.5.1",
     "grunt-contrib-cssmin": "0.14.0",
@@ -45,18 +40,26 @@
     "gulp-iconfont": "1.0.0",
     "gulp-iconfont-css": "0.0.9",
     "gulp-install": "0.2.0",
+    "gulp-rename": "1.2.2",
     "gulp-sketch": "0.0.7",
     "grunt-shell": "1.1.2",
-    "load-grunt-tasks": "*"
+    "load-grunt-tasks": "*",
+    "perfect-scrollbar": "git://github.com/CartoDB/perfect-scrollbar.git#master"
   },
   "keywords": [
     "library",
-    "CartoDB",
+    "CARTO",
     "share",
     "assets",
     "styleguide",
     "shared components",
     "editor",
     "deep-insights"
-  ]
+  ],
+  "scripts": {
+    "bump": "npm version patch",
+    "bump:major": "npm version major",
+    "bump:minor": "npm version minor",
+    "postversion": "git push origin master --follow-tags"
+  }
 }

src/scss/_cdb-icon-font.scss

@@ -43,673 +43,673 @@ All available icons in CartoDB.
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-clock Size-large"></i>
-    <h4 class="Text Size-small">clock</h4>
+    <h4 class="Text Size-small u-tSpace--m">clock</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-stats Size-large"></i>
-    <h4 class="Text Size-small">stats</h4>
+    <h4 class="Text Size-small u-tSpace--m">stats</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-heartEmpty Size-large"></i>
-    <h4 class="Text Size-small">heartEmpty</h4>
+    <h4 class="Text Size-small u-tSpace--m">heartEmpty</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-heartFill Size-large"></i>
-    <h4 class="Text Size-small">heartFill</h4>
+    <h4 class="Text Size-small u-tSpace--m">heartFill</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-alert Size-large"></i>
-    <h4 class="Text Size-small">alert</h4>
+    <h4 class="Text Size-small u-tSpace--m">alert</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-rows Size-large"></i>
-    <h4 class="Text Size-small">rows</h4>
+    <h4 class="Text Size-small u-tSpace--m">rows</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-check Size-large"></i>
-    <h4 class="Text Size-small">check</h4>
+    <h4 class="Text Size-small u-tSpace--m">check</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-dribbble Size-large"></i>
-    <h4 class="Text Size-small">dribbble</h4>
+    <h4 class="Text Size-small u-tSpace--m">dribbble</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-twitter Size-large"></i>
-    <h4 class="Text Size-small">twitter</h4>
+    <h4 class="Text Size-small u-tSpace--m">twitter</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-caretDown Size-large"></i>
-    <h4 class="Text Size-small">caretDown</h4>
+    <h4 class="Text Size-small u-tSpace--m">caretDown</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-lightbulb Size-large"></i>
-    <h4 class="Text Size-small">lightbulb</h4>
+    <h4 class="Text Size-small u-tSpace--m">lightbulb</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-explore Size-large"></i>
-    <h4 class="Text Size-small">explore</h4>
+    <h4 class="Text Size-small u-tSpace--m">explore</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-drop Size-large"></i>
-    <h4 class="Text Size-small">drop</h4>
+    <h4 class="Text Size-small u-tSpace--m">drop</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-edition Size-large"></i>
-    <h4 class="Text Size-small">edition</h4>
+    <h4 class="Text Size-small u-tSpace--m">edition</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-view Size-large"></i>
-    <h4 class="Text Size-small">view</h4>
+    <h4 class="Text Size-small u-tSpace--m">view</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-odyssey Size-large"></i>
-    <h4 class="Text Size-small">odyssey</h4>
+    <h4 class="Text Size-small u-tSpace--m">odyssey</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-settings Size-large"></i>
-    <h4 class="Text Size-small">settings</h4>
+    <h4 class="Text Size-small u-tSpace--m">settings</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-downloadCircle Size-large"></i>
-    <h4 class="Text Size-small">downloadCircle</h4>
+    <h4 class="Text Size-small u-tSpace--m">downloadCircle</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-pencilMenu Size-large"></i>
-    <h4 class="Text Size-small">pencilMenu</h4>
+    <h4 class="Text Size-small u-tSpace--m">pencilMenu</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-mobile Size-large"></i>
-    <h4 class="Text Size-small">mobile</h4>
+    <h4 class="Text Size-small u-tSpace--m">mobile</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-wizard Size-large"></i>
-    <h4 class="Text Size-small">wizard</h4>
+    <h4 class="Text Size-small u-tSpace--m">wizard</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-undo Size-large"></i>
-    <h4 class="Text Size-small">undo</h4>
+    <h4 class="Text Size-small u-tSpace--m">undo</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-redo Size-large"></i>
-    <h4 class="Text Size-small">redo</h4>
+    <h4 class="Text Size-small u-tSpace--m">redo</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-lArrowLight Size-large"></i>
-    <h4 class="Text Size-small">lArrowLight</h4>
+    <h4 class="Text Size-small u-tSpace--m">lArrowLight</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-hide Size-large"></i>
-    <h4 class="Text Size-small">hide</h4>
+    <h4 class="Text Size-small u-tSpace--m">hide</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-info Size-large"></i>
-    <h4 class="Text Size-small">info</h4>
+    <h4 class="Text Size-small u-tSpace--m">info</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-fork Size-large"></i>
-    <h4 class="Text Size-small">fork</h4>
+    <h4 class="Text Size-small u-tSpace--m">fork</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-facebook Size-large"></i>
-    <h4 class="Text Size-small">facebook</h4>
+    <h4 class="Text Size-small u-tSpace--m">facebook</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-folder Size-large"></i>
-    <h4 class="Text Size-small">folder</h4>
+    <h4 class="Text Size-small u-tSpace--m">folder</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-dropbox Size-large"></i>
-    <h4 class="Text Size-small">dropbox</h4>
+    <h4 class="Text Size-small u-tSpace--m">dropbox</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-cloud Size-large"></i>
-    <h4 class="Text Size-small">cloud</h4>
+    <h4 class="Text Size-small u-tSpace--m">cloud</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-step Size-large"></i>
-    <h4 class="Text Size-small">step</h4>
+    <h4 class="Text Size-small u-tSpace--m">step</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-addDocument Size-large"></i>
-    <h4 class="Text Size-small">addDocument</h4>
+    <h4 class="Text Size-small u-tSpace--m">addDocument</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-arrowNext Size-large"></i>
-    <h4 class="Text Size-small">arrowNext</h4>
+    <h4 class="Text Size-small u-tSpace--m">arrowNext</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
-    <h4 class="Text Size-small">arrowPrev</h4>
+    <h4 class="Text Size-small u-tSpace--m">arrowPrev</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-close Size-large"></i>
-    <h4 class="Text Size-small">close</h4>
+    <h4 class="Text Size-small u-tSpace--m">close</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-cartoFante Size-large"></i>
-    <h4 class="Text Size-small">cartoFante</h4>
+    <h4 class="Text Size-small u-tSpace--m">cartoFante</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-lock Size-large"></i>
-    <h4 class="Text Size-small">lock</h4>
+    <h4 class="Text Size-small u-tSpace--m">lock</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-cartoDB Size-large"></i>
-    <h4 class="Text Size-small">cartoDB</h4>
+    <h4 class="Text Size-small u-tSpace--m">cartoDB</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-lens Size-large"></i>
-    <h4 class="Text Size-small">lens</h4>
+    <h4 class="Text Size-small u-tSpace--m">lens</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-closeLimits Size-large"></i>
-    <h4 class="Text Size-small">closeLimits</h4>
+    <h4 class="Text Size-small u-tSpace--m">closeLimits</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-defaultUser Size-large"></i>
-    <h4 class="Text Size-small">defaultUser</h4>
+    <h4 class="Text Size-small u-tSpace--m">defaultUser</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-cockroach Size-large"></i>
-    <h4 class="Text Size-small">cockroach</h4>
+    <h4 class="Text Size-small u-tSpace--m">cockroach</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-floppy Size-large"></i>
-    <h4 class="Text Size-small">floppy</h4>
+    <h4 class="Text Size-small u-tSpace--m">floppy</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-trash Size-large"></i>
-    <h4 class="Text Size-small">trash</h4>
+    <h4 class="Text Size-small u-tSpace--m">trash</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-wifi Size-large"></i>
-    <h4 class="Text Size-small">wifi</h4>
+    <h4 class="Text Size-small u-tSpace--m">wifi</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-unlock Size-large"></i>
-    <h4 class="Text Size-small">unlock</h4>
+    <h4 class="Text Size-small u-tSpace--m">unlock</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-unlockWithEllipsis Size-large"></i>
-    <h4 class="Text Size-small">unlockWithEllipsis</h4>
+    <h4 class="Text Size-small u-tSpace--m">unlockWithEllipsis</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-gift Size-large"></i>
-    <h4 class="Text Size-small">gift</h4>
+    <h4 class="Text Size-small u-tSpace--m">gift</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-people Size-large"></i>
-    <h4 class="Text Size-small">people</h4>
+    <h4 class="Text Size-small u-tSpace--m">people</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-play Size-large"></i>
-    <h4 class="Text Size-small">play</h4>
+    <h4 class="Text Size-small u-tSpace--m">play</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-add Size-large"></i>
-    <h4 class="Text Size-small">add</h4>
+    <h4 class="Text Size-small u-tSpace--m">add</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-map Size-large"></i>
-    <h4 class="Text Size-small">map</h4>
+    <h4 class="Text Size-small u-tSpace--m">map</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-anchor Size-large"></i>
-    <h4 class="Text Size-small">anchor</h4>
+    <h4 class="Text Size-small u-tSpace--m">anchor</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-key Size-large"></i>
-    <h4 class="Text Size-small">key</h4>
+    <h4 class="Text Size-small u-tSpace--m">key</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-calendar Size-large"></i>
-    <h4 class="Text Size-small">calendar</h4>
+    <h4 class="Text Size-small u-tSpace--m">calendar</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-document Size-large"></i>
-    <h4 class="Text Size-small">document</h4>
+    <h4 class="Text Size-small u-tSpace--m">document</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-eye Size-large"></i>
-    <h4 class="Text Size-small">eye</h4>
+    <h4 class="Text Size-small u-tSpace--m">eye</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-marker Size-large"></i>
-    <h4 class="Text Size-small">marker</h4>
+    <h4 class="Text Size-small u-tSpace--m">marker</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-progressBar Size-large"></i>
-    <h4 class="Text Size-small">progressBar</h4>
+    <h4 class="Text Size-small u-tSpace--m">progressBar</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-book Size-large"></i>
-    <h4 class="Text Size-small">book</h4>
+    <h4 class="Text Size-small u-tSpace--m">book</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-notes Size-large"></i>
-    <h4 class="Text Size-small">notes</h4>
+    <h4 class="Text Size-small u-tSpace--m">notes</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-rectangles Size-large"></i>
-    <h4 class="Text Size-small">rectangles</h4>
+    <h4 class="Text Size-small u-tSpace--m">rectangles</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-mountain Size-large"></i>
-    <h4 class="Text Size-small">mountain</h4>
+    <h4 class="Text Size-small u-tSpace--m">mountain</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-points Size-large"></i>
-    <h4 class="Text Size-small">points</h4>
+    <h4 class="Text Size-small u-tSpace--m">points</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-snake Size-large"></i>
-    <h4 class="Text Size-small">snake</h4>
+    <h4 class="Text Size-small u-tSpace--m">snake</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-boss Size-large"></i>
-    <h4 class="Text Size-small">boss</h4>
+    <h4 class="Text Size-small u-tSpace--m">boss</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-rocket Size-large"></i>
-    <h4 class="Text Size-small">rocket</h4>
+    <h4 class="Text Size-small u-tSpace--m">rocket</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-barometer Size-large"></i>
-    <h4 class="Text Size-small">barometer</h4>
+    <h4 class="Text Size-small u-tSpace--m">barometer</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-dollar Size-large"></i>
-    <h4 class="Text Size-small">dollar</h4>
+    <h4 class="Text Size-small u-tSpace--m">dollar</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-email Size-large"></i>
-    <h4 class="Text Size-small">email</h4>
+    <h4 class="Text Size-small u-tSpace--m">email</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-label Size-large"></i>
-    <h4 class="Text Size-small">label</h4>
+    <h4 class="Text Size-small u-tSpace--m">label</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-outside Size-large"></i>
-    <h4 class="Text Size-small">outside</h4>
+    <h4 class="Text Size-small u-tSpace--m">outside</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-jigsaw Size-large"></i>
-    <h4 class="Text Size-small">jigsaw</h4>
+    <h4 class="Text Size-small u-tSpace--m">jigsaw</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-tools Size-large"></i>
-    <h4 class="Text Size-small">tools</h4>
+    <h4 class="Text Size-small u-tSpace--m">tools</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-question Size-large"></i>
-    <h4 class="Text Size-small">question</h4>
+    <h4 class="Text Size-small u-tSpace--m">question</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-layerStack Size-large"></i>
-    <h4 class="Text Size-small">layerStack</h4>
+    <h4 class="Text Size-small u-tSpace--m">layerStack</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-alarm Size-large"></i>
-    <h4 class="Text Size-small">alarm</h4>
+    <h4 class="Text Size-small u-tSpace--m">alarm</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-cloudDownArrow Size-large"></i>
-    <h4 class="Text Size-small">cloudDownArrow</h4>
+    <h4 class="Text Size-small u-tSpace--m">cloudDownArrow</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-pencil Size-large"></i>
-    <h4 class="Text Size-small">pencil</h4>
+    <h4 class="Text Size-small u-tSpace--m">pencil</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-fountainPen Size-large"></i>
-    <h4 class="Text Size-small">fountainPen</h4>
+    <h4 class="Text Size-small u-tSpace--m">fountainPen</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-emptyDoc Size-large"></i>
-    <h4 class="Text Size-small">emptyDoc</h4>
+    <h4 class="Text Size-small u-tSpace--m">emptyDoc</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-mergeArrow Size-large"></i>
-    <h4 class="Text Size-small">mergeArrow</h4>
+    <h4 class="Text Size-small u-tSpace--m">mergeArrow</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-mergeColumns Size-large"></i>
-    <h4 class="Text Size-small">mergeColumns</h4>
+    <h4 class="Text Size-small u-tSpace--m">mergeColumns</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-mergeSpatial Size-large"></i>
-    <h4 class="Text Size-small">mergeSpatial</h4>
+    <h4 class="Text Size-small u-tSpace--m">mergeSpatial</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-globe Size-large"></i>
-    <h4 class="Text Size-small">globe</h4>
+    <h4 class="Text Size-small u-tSpace--m">globe</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-chevronDown Size-large"></i>
-    <h4 class="Text Size-small">chevronDown</h4>
+    <h4 class="Text Size-small u-tSpace--m">chevronDown</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-streets Size-large"></i>
-    <h4 class="Text Size-small">streets</h4>
+    <h4 class="Text Size-small u-tSpace--m">streets</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-keys Size-large"></i>
-    <h4 class="Text Size-small">keys</h4>
+    <h4 class="Text Size-small u-tSpace--m">keys</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-facebookSquare Size-large"></i>
-    <h4 class="Text Size-small">facebookSquare</h4>
+    <h4 class="Text Size-small u-tSpace--m">facebookSquare</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-fullscreen Size-large"></i>
-    <h4 class="Text Size-small">fullscreen</h4>
+    <h4 class="Text Size-small u-tSpace--m">fullscreen</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-rArrowLight Size-large"></i>
-    <h4 class="Text Size-small">rArrowLight</h4>
+    <h4 class="Text Size-small u-tSpace--m">rArrowLight</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-share Size-large"></i>
-    <h4 class="Text Size-small">share</h4>
+    <h4 class="Text Size-small u-tSpace--m">share</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-linkedin Size-large"></i>
-    <h4 class="Text Size-small">linkedin</h4>
+    <h4 class="Text Size-small u-tSpace--m">linkedin</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-calendarBlank Size-large"></i>
-    <h4 class="Text Size-small">calendarBlank</h4>
+    <h4 class="Text Size-small u-tSpace--m">calendarBlank</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-creativeCommons Size-large"></i>
-    <h4 class="Text Size-small">creativeCommons</h4>
+    <h4 class="Text Size-small u-tSpace--m">creativeCommons</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-bubble Size-large"></i>
-    <h4 class="Text Size-small">bubble</h4>
+    <h4 class="Text Size-small u-tSpace--m">bubble</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-bars Size-large"></i>
-    <h4 class="Text Size-small">bars</h4>
+    <h4 class="Text Size-small u-tSpace--m">bars</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-arrowMenuLight Size-large"></i>
-    <h4 class="Text Size-small">arrowMenuLight</h4>
+    <h4 class="Text Size-small u-tSpace--m">arrowMenuLight</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-tieFighter Size-large"></i>
-    <h4 class="Text Size-small">tieFighter</h4>
+    <h4 class="Text Size-small u-tSpace--m">tieFighter</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-ray Size-large"></i>
-    <h4 class="Text Size-small">ray</h4>
+    <h4 class="Text Size-small u-tSpace--m">ray</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-markup Size-large"></i>
-    <h4 class="Text Size-small">markup</h4>
+    <h4 class="Text Size-small u-tSpace--m">markup</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-table Size-large"></i>
-    <h4 class="Text Size-small">table</h4>
+    <h4 class="Text Size-small u-tSpace--m">table</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-airlock Size-large"></i>
-    <h4 class="Text Size-small">airlock</h4>
+    <h4 class="Text Size-small u-tSpace--m">airlock</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-pin Size-large"></i>
-    <h4 class="Text Size-small">pin</h4>
+    <h4 class="Text Size-small u-tSpace--m">pin</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-attache Size-large"></i>
-    <h4 class="Text Size-small">attache</h4>
+    <h4 class="Text Size-small u-tSpace--m">attache</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-download Size-large"></i>
-    <h4 class="Text Size-small">download</h4>
+    <h4 class="Text Size-small u-tSpace--m">download</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-group Size-large"></i>
-    <h4 class="Text Size-small">group</h4>
+    <h4 class="Text Size-small u-tSpace--m">group</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-dashboard Size-large"></i>
-    <h4 class="Text Size-small">dashboard</h4>
+    <h4 class="Text Size-small u-tSpace--m">dashboard</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-spinner Size-large"></i>
-    <h4 class="Text Size-small">spinner</h4>
+    <h4 class="Text Size-small u-tSpace--m">spinner</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-mapsearch Size-large"></i>
-    <h4 class="Text Size-small">mapsearch</h4>
+    <h4 class="Text Size-small u-tSpace--m">mapsearch</h4>
   </div>
 
 
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-rArrow Size-large"></i>
-    <h4 class="Text Size-small">rArrow</h4>
+    <h4 class="Text Size-small u-tSpace--m">rArrow</h4>
   </div>
 
 ```

src/scss/cdb-components/_avatars.scss

@@ -7,13 +7,13 @@
 ```
 <ul class="CDB-AvatarList">
   <li class="CDB-AvatarList-item">
-    <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
+    <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
   </li>
   <li class="CDB-AvatarList-item">
-    <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
+    <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
   </li>
   <li class="CDB-AvatarList-item">
-    <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
+    <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
   </li>
   <li class="CDB-AvatarList-itemMore">
     <button class="CDB-Text is-semibold CDB-Size-small u-secondaryTextColor">+ 16</button>
@@ -22,9 +22,6 @@
 ```
 */
 
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
 .CDB-AvatarList {
   padding-left: 12px;
 }

src/scss/cdb-components/_boxes.scss

@@ -10,10 +10,6 @@
 ```
 */
 
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
 .CDB-Box-modal {
   min-width: 160px;
   border: 1px solid $cMainLine;
@@ -40,3 +36,11 @@
 .CDB-Box-modalHeaderItem--paddingVertical {
   padding: $baseSize + 4 0;
 }
+.CDB-Box-modalOverlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+}

src/scss/cdb-components/_buttons.scss

@@ -9,8 +9,13 @@ Layout Component:
 
 ```
 
-<button class="CDB-Button CDB-Button--primary CDB-Button--big">
+<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--big">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
 <button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
@@ -18,16 +23,26 @@ Layout Component:
 </button>
 
 
-<button class="CDB-Button CDB-Button--primary">
+<button class="CDB-Button CDB-Button--loading CDB-Button--primary">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
 <button class="CDB-Button CDB-Button--primary is-disabled">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
-<button class="CDB-Button CDB-Button--primary CDB-Button--small">
+<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--small">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-white">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
 <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
@@ -144,34 +159,86 @@ Layout Component:
 ```
 */
 
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
-
 .CDB-Button {
-  @include transition(background, 300ms);
-  padding: $baseSize + 1 $baseSize + 12;
-  border: 1px solid transparent;
+  position: relative;
+  padding: $baseSize $baseSize + 12;
+  transition: background, 300ms;
   border-radius: $baseSize / 2;
   cursor: pointer;
   box-sizing: border-box;
 
+
   .CDB-Button-Text {
     display: block;
   }
+
   &.is-disabled {
-    cursor: default;
     opacity: 0.24;
+    cursor: default;
+
+    &:active {
+      pointer-events: none;
+    }
   }
 }
 
+.CDB-Button--noPadding {
+  padding: 0;
+}
+
+.CDB-Button--loading {
+  .CDB-Button-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transform-origin: 50%;
+    opacity: 0;
+    z-index: 10;
+  }
+
+  .CDB-Button-Text {
+    transition: all 600ms;
+  }
+
+  &.is-loading {
+    cursor: default;
+
+    .CDB-Button-loader {
+      animation-name: showIn;
+      animation-duration: 600ms;
+      animation-fill-mode: forwards;
+    }
+
+    .CDB-Button-Text {
+      opacity: 0;
+    }
+  }
+}
+
+@keyframes showIn {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+
 .CDB-Button--small {
   padding: $baseSize / 2 $baseSize + 4;
+  border-radius: 3px;
 }
 
 .CDB-Button--big {
-  padding: $baseSize + 4 $baseSize + 12;
+  padding: $baseSize + 3 $baseSize + 12;
+}
+
+.CDB-Button--wide {
+  width: 100%;
 }
 
 .CDB-Button--icon {
@@ -182,17 +249,20 @@ Layout Component:
   background: $cBlue;
   color: $cWhite;
 
-  &:hover {
-    background: darken($cBlue, 8%);
-  }
+  &:hover,
   &:active {
-    background: darken($cBlue, 16%);
+    background: $cBlueHover;
+  }
+
+  &.is-loading {
+    &:hover,
+    &:active {
+      background: $cBlue;
+    }
   }
 
   &.is-disabled {
-    &:hover {
-      background: $cBlue;
-    }
+    &:hover,
     &:active {
       background: $cBlue;
     }
@@ -203,17 +273,13 @@ Layout Component:
   background: $cAlert;
   color: $cWhite;
 
-  &:hover {
-    background: darken($cAlert, 8%);
-  }
+  &:hover,
   &:active {
-    background: darken($cAlert, 16%);
+    background: darken($cAlert, 8%);
   }
 
   &.is-disabled {
-    &:hover {
-      background: $cAlert;
-    }
+    &:hover,
     &:active {
       background: $cAlert;
     }
@@ -226,19 +292,31 @@ Layout Component:
   background: $cError;
   color: $cWhite;
 
-  &:hover {
+  &:hover,
+  &:active {
     background: darken($cError, 8%);
   }
-  &:active {
-    background: darken($cError, 16%);
+
+  &.is-disabled {
+    &:hover,
+    &:active {
+      background: $cError;
+    }
+  }
+}
+
+.CDB-Button--dashed {
+  padding: 13px 0;
+  border: 1px dashed $cHintText;
+  color: $cBlue;
+
+  &:hover {
+    border-color: $cBlue;
   }
 
   &.is-disabled {
     &:hover {
-      background: $cError;
-    }
-    &:active {
-      background: $cError;
+      border-color: $cHintText;
     }
   }
 }
@@ -252,24 +330,44 @@ Layout Component:
 # Buttons/Secondary
 
 ```
-<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
+
 <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
-<button class="CDB-Button CDB-Button--secondary">
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--secondary">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
+
 <button class="CDB-Button CDB-Button--secondary is-disabled">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
-<button class="CDB-Button CDB-Button--secondary CDB-Button--small">
-  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
 <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
@@ -281,8 +379,13 @@ Layout Component:
 <br/>
 
 <div style="background: #2E3C43; padding: 20px;">
-  <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+    <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
+      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+      </svg>
+    </div>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
@@ -293,8 +396,13 @@ Layout Component:
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
-  <button class="CDB-Button CDB-Button--secondary CDB-Button--white">
+  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--white">
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+    <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+      </svg>
+    </div>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled">
@@ -319,12 +427,14 @@ Layout Component:
 
 
 .CDB-Button--secondary {
-  border: 1px solid $cBlue;
   color: $cBlue;
+  box-shadow: inset 0 0 0 1px $cBlue;
 
   &:hover {
     background: rgba($cBlue, 0.08);
+    box-shadow: inset 0 0 0 2px $cBlueHover;
   }
+
   &:active {
     background: $cBlue;
     color: $cWhite;
@@ -333,34 +443,64 @@ Layout Component:
   &.is-disabled {
     &:hover {
       background: transparent;
+      box-shadow: inset 0 0 0 1px $cBlue;
     }
+
     &:active {
       background: transparent;
     }
   }
+
+  &.is-loading {
+    cursor: default;
+
+    &:hover,
+    &:active {
+      background: none;
+      color: $cBlue;
+    }
+  }
+
+  &--background {
+    background-color: $cWhite;
+  }
 }
 
-
 .CDB-Button--white {
-  border: 1px solid $cWhite;
   color: $cWhite;
+  box-shadow: inset 0 0 0 1px $cWhite;
 
   &:hover {
     background: rgba($cWhite, 0.08);
+    box-shadow: inset 0 0 0 2px darken($cWhite, 8%);
   }
+
   &:active {
     background: rgba($cMainBg, 0.08);
     color: $cWhite;
   }
 
   &.is-disabled {
-    @include opacity(0.24);
+    opacity: 0.24;
+
     &:hover {
       background: transparent;
+      box-shadow: inset 0 0 0 1px $cWhite;
     }
+
     &:active {
       background: transparent;
       color: $cWhite;
     }
   }
+
+  &.is-loading {
+    cursor: default;
+
+    &:hover,
+    &:active {
+      background: none;
+      color: $cWhite;
+    }
+  }
 }

src/scss/cdb-components/_colors.scss

@@ -12,12 +12,9 @@
 <div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-White"></div>
 <div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryBackground"></div>
 <div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-ThirdBackground"></div>
-``` 
+```
 */
 
-@import '../cdb-variables/colors';
-
-
 .Color-Blue {
   background: $cBlue;
 }
@@ -125,5 +122,3 @@
 .Color-Error {
   background: $cError;
 }
-
-

src/scss/cdb-components/_headers.scss

@@ -145,7 +145,7 @@
   <div class="CDB-HeaderInfo-inner CDB-Text">
     <div class="CDB-HeaderInfo-title u-bSpace--m">
       <h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large">Type</h2>
-      
+
       <div class="CDB-HeaderInfo-actions">
         <a href="#">
           <div class="CDB-Shape">
@@ -166,10 +166,6 @@
 ```
 */
 
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
 .CDB-HeaderInfo {
   @include display-flex();
   @include align-items(flex-start);

src/scss/cdb-components/_layer-selector.scss

@@ -0,0 +1,23 @@
+// Layer selector and letters
+// ----------------------------------------------
+
+/* SG
+# Layer selector and letters
+
+
+```
+  <span class="CDB-SelectorLayer-letter CDB-Text CDB-Size-small u-whiteTextColor u-rSpace u-upperCase" style="background-color: #E65176">b0</span>
+```
+*/
+
+.CDB-SelectorLayer {
+  position: relative;
+}
+.CDB-SelectorLayer.is-disabled {
+  background-color: $cThirdBackground;
+}
+.CDB-SelectorLayer-letter {
+  height: 14px;
+  padding: 1px 5px;
+  border-radius: 2px;
+}

src/scss/cdb-components/_lists.scss

@@ -10,9 +10,6 @@
 ```
 */
 
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
 .CDB-ListDecoration-item {
   border-bottom: 1px solid $cSecondaryLine;
 
@@ -36,4 +33,3 @@
   padding: 12px 16px;
   text-align: left;
 }
-

src/scss/cdb-components/_loader.scss

@@ -12,33 +12,27 @@ This is the generic loader for widgets, maps, components, ...
 ```
 */
 
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/colors';
-@import '../cdb-variables/sizes';
-
 .CDB-Loader {
-  @include css3-prefix(animation, loader-progress 1000ms linear 1);
-  @include opacity(0);
-  @include transition(opacity, 1000ms);
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 2px;
-  background: rgba($cBlue, 1);
+  width: 50%;
+  height: 3px;
+  transform: translateX(-200%);
+  background-image: linear-gradient(90deg, rgba($cBlue, 1) 0%, #32BBFE 90%, #FAFEFF 95%);
   z-index: 2;
 }
+
 .CDB-Loader.is-visible {
-  @include css3-prefix(animation, loader-progress 2000ms linear infinite);
-  @include opacity(1);
+  @include css3-prefix(animation, loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite);
 }
 
 @include keyframes(loader-progress) {
-  0% {
-    width: 0;
+  from {
+    transform: translateX(-200%);
   }
-  100% {
-    width: 100%;
+  to {
+    transform: translateX(200%);
   }
 }
 
@@ -47,6 +41,12 @@ This is the generic loader for widgets, maps, components, ...
 
 ```
 <div style="padding: 20px;">
+  <div class="CDB-LoaderIcon is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+
   <div class="CDB-LoaderIcon is-dark">
     <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
       <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
@@ -100,6 +100,10 @@ This is the generic loader for widgets, maps, components, ...
 
 ```
 */
+.CDB-LoaderIcon {
+  width: 16px;
+  height: 16px;
+}
 
 .CDB-LoaderIcon-spinner {
   animation: rotate 2s linear infinite;
@@ -107,11 +111,13 @@ This is the generic loader for widgets, maps, components, ...
   height: 16px;
 }
 
+.CDB-LoaderIcon--small,
 .CDB-LoaderIcon--small .CDB-LoaderIcon-spinner {
   width: 14px;
   height: 14px;
 }
 
+.CDB-LoaderIcon--big,
 .CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
   width: 40px;
   height: 40px;
@@ -120,6 +126,8 @@ This is the generic loader for widgets, maps, components, ...
 .CDB-LoaderIcon-path {
   stroke: rgba(255, 255, 255, 0.88);
   stroke-linecap: round;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
   animation: dash 1.5s ease-in-out infinite;
   stroke-width: 4px;
 }
@@ -132,7 +140,15 @@ This is the generic loader for widgets, maps, components, ...
   stroke: rgba(0, 0, 0, 0.24);
 }
 
+.CDB-LoaderIcon.is-blue .CDB-LoaderIcon-path {
+  stroke: $cBlue;
+}
+
 @keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
   100% {
     transform: rotate(360deg);
   }

src/scss/cdb-components/_menu.scss

@@ -128,9 +128,6 @@
 ```
 */
 
-@import '../cdb-variables/colors';
-@import '../cdb-variables/sizes';
-
 .CDB-NavMenu {
   position: relative;
   z-index: 2;
@@ -140,20 +137,33 @@
   position: relative;
   margin-bottom: 18px;
   border-bottom: 1px solid $cMainLine;
+
+  &--no-margin {
+    margin-bottom: 0;
+  }
+
+  &--is-dropdown {
+    padding-top: $baseSize;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: $baseSize * 2;
+  }
 }
-.CDB-NavMenu-inner--no-margin {
-  margin-bottom: 0;
-}
-.CDB-NavMenu-inner--is-dropdown {
-  padding: $baseSize 0 0 $baseSize * 2;
-}
+
 
 .CDB-NavMenu-link {
   display: block;
   margin-bottom: -1px;
   padding: 4px 0 11px;
-  border-bottom: 1px solid transparent;
+  transition: border-color 0.2s ease-in;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
   color: $cBlue;
+  touch-action: manipulation;
+
+  &:hover {
+    border-bottom: 2px solid $cBlueHover;
+  }
 }
 
 .CDB-NavMenu-item,
@@ -164,37 +174,59 @@
 }
 
 .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
-  border-bottom: 1px solid $cBlack;
+  border-bottom: 2px solid $cMainText;
   color: $cMainText;
 }
 
+.CDB-NavMenu-item.is-disabled .CDB-NavMenu-link {
+  pointer-events: none;
+  color: $cHintText;
+  cursor: default;
+}
+
 .CDB-NavSubmenu {
   border-bottom: 1px solid $cSecondaryLine;
-}
 
-.CDB-NavSubmenu--inside {
-  position: absolute;
-  right: 0;
-  left: 0;
-  padding-top: 14px;
-}
+  &--inside {
+    position: absolute;
+    right: 0;
+    left: 0;
+    padding-top: 14px;
+  }
 
-.CDB-NavSubmenu--outside {
-  margin-top: -5px;
-  margin-bottom: 18px;
+  &--outside {
+    margin-top: -5px;
+    margin-bottom: 18px;
+  }
 }
 
 .CDB-NavSubmenu-link {
   display: block;
   margin-bottom: -1px;
   padding-bottom: 12px;
-  border-bottom: 1px solid transparent;
+  transition: border-color 0.2s ease-in;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
   color: $cBlue;
+  touch-action: manipulation;
+
+  &:hover {
+    border-bottom: 2px solid $cBlueHover;
+  }
 }
 
-.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
-  border-bottom: 1px solid $cMainLine;
-  color: $cMainText;
+
+.CDB-NavSubmenu-item {
+  &.is-selected .CDB-NavSubmenu-link {
+    border-bottom: 2px solid $cMainText;
+    color: $cMainText;
+  }
+
+  &.is-disabled .CDB-NavSubmenu-link {
+    pointer-events: none;
+    color: $cHintText;
+    cursor: default;
+  }
 }
 
 .CDB-NavSubmenu-status {
@@ -202,7 +234,6 @@
 }
 
 .CDB-NavMenu.is-dark {
-
   .CDB-NavMenu-inner,
   .CDB-NavSubmenu {
     border-bottom: 1px solid $cSecondaryText;
@@ -210,23 +241,32 @@
 
   .CDB-NavMenu-link,
   .CDB-NavSubmenu-link {
-    color: $cAltText;
+    margin-bottom: -1px;
+    transition: none;
+    color: $cWhite;
+
+    &:hover {
+      border-bottom: 2px solid darken($cMainLine, 8%);
+    }
+  }
+
+  .CDB-NavSubmenu-item.is-disabled .CDB-NavMenu-link {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.24;
   }
 
   .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
-    border-bottom: 1px solid $cMainLine;
-    color: $cWhite;
+    border-bottom: 2px solid $cAltText;
+    color: $cAltText;
   }
 
   .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
-    border-bottom: 1px solid $cMainLine;
-    color: $cWhite;
+    border-bottom: 2px solid $cAltText;
+    color: $cAltText;
   }
 
   .CDB-NavSubmenu-status {
     color: $cSecondaryText;
   }
 }
-
-
-

src/scss/cdb-components/_tags.scss

@@ -23,11 +23,6 @@
 ```
 */
 
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
-
 .CDB-Tag {
   padding: 0 3px;
   border: 1px solid $cBlue;
@@ -50,6 +45,10 @@
     border: 1px solid $cError;
     color: $cError;
   }
+  &.is-gray {
+    border: 1px solid $cGray;
+    color: $cGray;
+  }
 }
 
 /* SG
@@ -133,4 +132,3 @@
   background: rgba(0, 0, 0, 0.04);
   text-transform: uppercase;
 }
-

src/scss/cdb-components/_tooltips.scss

@@ -60,11 +60,6 @@
 ```
 */
 
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/colors';
-@import '../cdb-variables/sizes';
-
-
 .CDB-InfoTooltip {
   display: inline-block;
   position: absolute;

src/scss/cdb-components/_typography.scss

@@ -19,9 +19,6 @@
 ```
 */
 
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
 .CDB-Text {
   font-family: 'Open Sans';
   $sFontWeight-normal: 400;
@@ -74,4 +71,3 @@
 .CDB-IconFont.is-disabled {
   opacity: 0.24;
 }
-

src/scss/cdb-components/forms/_checkbox.scss

@@ -14,17 +14,12 @@
   <span class="u-iBlock CDB-Checkbox-face"></span>
 </div>
 <div class="u-iBlock">
-  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
+  <input class="CDB-Checkbox" type="checkbox" name="vehicle2" value="Car" disabled>
   <span class="u-iBlock CDB-Checkbox-face"></span>
 </div>
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/mixins';
-
-
 .CDB-Checkbox {
   position: absolute;
   width: $baseSize * 2;
@@ -43,6 +38,8 @@
   background: $cWhite;
   cursor: pointer;
   box-sizing: border-box;
+  z-index: 2;
+  pointer-events: none;
 
   &::before,
   &::after {
@@ -51,7 +48,7 @@
     bottom: 3px;
     width: 2px;
     border-radius: 1px;
-    background: $cSecondaryLine;
+    background: $cWhite;
     content: '';
   }
 
@@ -69,7 +66,7 @@
 }
 
 .CDB-Checkbox:checked + .CDB-Checkbox-face {
-  @include transition(background, 300ms);
+  transition: background 300ms;
   border: 1px solid $cBlue;
   background: $cBlue;
 
@@ -79,9 +76,8 @@
   }
 }
 
-.CDB-Checkbox:disabled + .CDB-Checkbox-face {
-  border: 1px solid $cSecondaryLine;
-  background: $cThirdBackground;
+.CDB-Checkbox:checked:hover + .CDB-Checkbox-face {
+  border: 1px solid $cBlue;
 
   &::before,
   &::after {
@@ -89,15 +85,40 @@
   }
 }
 
-.CDB-Checkbox:disabled:hover + .CDB-Checkbox-face {
-  border: 1px solid $cSecondaryLine;
-}
-
-.CDB-Checkbox:checked:hover + .CDB-Checkbox-face,
-.CDB-Checkbox:focus + .CDB-Checkbox-face {
-  border: 1px solid $cBlue;
-}
-
 .CDB-Checkbox:hover + .CDB-Checkbox-face {
-  border: 1px solid $cHoverLine;
+  border: 1px solid $cBlueHover;
+
+  &::before,
+  &::after {
+    background: $cHoverLine;
+  }
+}
+.CDB-Checkbox:active + .CDB-Checkbox-face {
+  border: 1px solid $cBlue;
+
+  &::before,
+  &::after {
+    background: $cBlue;
+  }
+}
+
+.CDB-Checkbox:disabled + .CDB-Checkbox-face {
+  border: 1px solid $cSecondaryLine;
+  background: $cThirdBackground;
+
+  &::before,
+  &::after {
+    opacity: 0;
+  }
+}
+
+.CDB-Checkbox:checked:disabled + .CDB-Checkbox-face {
+  border: 1px solid $cSecondaryLine;
+  background: $cThirdBackground;
+
+  &::before,
+  &::after {
+    background: $cAltText;
+    opacity: 1;
+  }
 }

src/scss/cdb-components/forms/_dropdowns.scss

@@ -109,28 +109,27 @@
 ```
 */
 
-@import '../../cdb-utilities/mixins';
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-
 .CDB-DropdownContainer {
   position: relative;
   height: 250px;
 }
+
 .CDB-Dropdown {
-  @include display-flex();
-  @include flex-direction(row);
+  display: flex;
   position: absolute;
   top: 40px;
+  flex-direction: row;
   max-height: 200px;
 }
+
 .CDB-Dropdown-calculations {
+  box-sizing: border-box;
   padding: $sMargin-element;
   border-right: 1px solid $cMainLine;
   border-radius: 4px 0 0 4px;
   background-color: $cSecondaryBackground;
-  box-sizing: border-box;
 }
+
 .CDB-Dropdown-calculationsElement {
   margin-bottom: $sLineHeight-medium;
   color: $cMainBg;
@@ -140,12 +139,14 @@
     margin-bottom: 0;
   }
 }
+
 .CDB-Dropdown-options {
   width: $baseSize * 20;
   border-radius: 0 4px 4px 0;
   background-color: $cWhite;
   vertical-align: top;
 }
+
 .CDB-Dropdown-optionsElement {
   @include text-overflow();
   padding: 12px 10px;
@@ -155,20 +156,23 @@
   &:last-child {
     border-bottom: 0;
   }
+
   &:hover {
-    background-color: rgba(157, 224, 173, 0.2);
+    background-color: rgba($cBlue, 0.08);
     color: $cMainBg;
     cursor: pointer;
   }
-}
-.CDB-Dropdown-optionsElement.is-selected {
-  color: $cMainBg;
-}
-.CDB-Dropdown-optionsElement.is-disabled {
-  color: $cHintText;
 
-  &:hover {
-    background-color: transparent;
-    cursor: default;
+  &.is-selected {
+    color: $cMainBg;
+  }
+
+  &.is-disabled {
+    color: $cHintText;
+
+    &:hover {
+      background-color: transparent;
+      cursor: default;
+    }
   }
 }

src/scss/cdb-components/forms/_inputs.scss

@@ -11,12 +11,9 @@
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/helpers';
-
 .CDB-InputText {
   width: 100%;
+  min-height: 32px;
   padding: 7px 8px;
   border: 1px solid $cMainLine;
   border-radius: $baseSize / 2;
@@ -27,26 +24,45 @@
   &.is-cursor {
     cursor: pointer;
   }
+
   &.is-empty {
     color: $cHintText;
   }
-  &:hover {
-    border: 1px solid $cHoverLine;
+
+  &.is-number {
+    color: darken($cHighlight, 16%);
   }
+
+  &.is-null {
+    color: $cHintText;
+    font-style: italic;
+  }
+
+  &:hover {
+    border: 1px solid $cBlueHover;
+  }
+
   &:focus {
-    border: 1px solid $cBlue;
+    border: 1px solid $cBlackHover;
     outline: none;
   }
+
   &:disabled,
   &.is-disabled {
     border-color: $cSecondaryLine;
     background: $cThirdBackground;
     cursor: default;
   }
+
+  &.has-icon {
+    padding-right: $baseSize * 4;
+  }
+
   &.has-error {
     @include default-form-error-style();
   }
 }
+
 .CDB-InputTextPlain {
   width: 100%;
   border: 0;

src/scss/cdb-components/forms/_legends.scss

@@ -83,9 +83,6 @@
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-utilities/mixins';
-
 .CDB-Legend {
   width: $baseSize * 12;
 }
@@ -101,4 +98,3 @@
 .CDB-Fieldset-block {
   width: 100%;
 }
-

src/scss/cdb-components/forms/_option-input.scss

@@ -41,6 +41,25 @@
 
 <br/>
 
+<div class="CDB-OptionInput is-active CDB-Text">
+  <ul class="CDB-OptionInput-container">
+    <li class="CDB-OptionInput-item">
+      <button type="button" class="CDB-OptionInput-content">8...12</button>
+    </li>
+    <li class="CDB-OptionInput-item">
+      <button type="button" class="CDB-OptionInput-content">solid</button>
+    </li>
+
+    <li class="CDB-OptionInput-item is-active">
+      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
+        <span class="CDB-ColorBar" style="background-color: #FFFFC0;"></span>
+      </button>
+    </li>
+  </ul>
+</div>
+
+<br/>
+
 <button type="button" class="CDB-OptionInput">
   <div class="CDB-OptionInput-container">
     <span class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></span>
@@ -79,74 +98,116 @@
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/mixins';
-
 .CDB-OptionInput {
-  width: 100%;
-  height: $baseSize * 4;
-  border: 1px solid $cMainLine;
-  border-radius: $baseSize / 2;
   box-sizing: border-box;
+  width: 100%;
+  height: $baseSize * 4 - 2px;
+  border-radius: $baseSize / 2;
   vertical-align: middle;
+}
 
-  &:hover {
-    border: 1px solid $cHoverLine;
-  }
-  &:focus {
-    border: 1px solid $cBlue;
-  }
-}
-.CDB-OptionInput.is-active {
-  border: 1px solid $cBlue;
-}
 .CDB-OptionInput-container {
-  @include display-flex();
-  @include align-content(center);
-  @include align-items(center);
-  margin: 0 $baseSize;
-}
-.CDB-OptionInput-container--noMargin {
-  margin: 0;
+  display: flex;
+  align-content: center;
+  align-items: center;
+
+  &--noMargin {
+    margin: 0;
+  }
 }
+
 .CDB-OptionInput-item {
-  @include display-flex();
-  @include align-items(center);
-  @include align-content(center);
-  width: auto;
+  display: flex;
+  position: relative;
+  box-sizing: content-box;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
   height: 100%;
   font-size: $sFontSize-medium;
-  box-sizing: content-box;
 
-  &::after {
-    padding: 0 $baseSize - 2;
-    color: $cHintText;
-    content: '·';
+  &.is-active,
+  &:hover,
+  &:focus {
+    cursor: pointer;
   }
+
+  &:first-child {
+    width: auto;
+    margin-right: $baseSize;
+  }
+
   &:last-child {
     width: 100%;
+  }
+}
 
-    &::after {
-      display: none;
+.CDB-OptionInput-container--border .CDB-OptionInput-item {
+  border: 1px solid $cMainLine;
+
+  &:hover {
+    border: 1px solid $cBlueHover;
+  }
+
+  &.is-active,
+  &:focus {
+    border: 1px solid $cBlackHover;
+  }
+
+  &:first-child {
+    margin-right: 0;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+
+    &:hover {
+      + .CDB-OptionInput-item::after {
+        content: none;
+      }
+    }
+  }
+
+  &:last-child {
+    border-radius: 4px;
+  }
+
+  + .CDB-OptionInput-item {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    &.is-active::after,
+    &:focus::after,
+    &:hover::after {
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      width: 1px;
+      height: $baseSize * 4;
+      content: '';
+    }
+
+    &:hover::after {
+      background-color: $cBlueHover;
+    }
+
+    &.is-active::after,
+    &:focus::after {
+      background-color: $cBlackHover;
     }
   }
 }
-.CDB-OptionInput-item--noSeparator::after {
-  content: '';
-}
+
 .CDB-OptionInput-content {
-  @include display-flex();
-  @include align-items(center);
-  height: 100%;
-  color: $cMainBg;
+  display: flex;
   box-sizing: content-box;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 $baseSize;
+  color: $cMainBg;
   white-space: nowrap;
 
   &:hover {
     text-decoration: none;
   }
 }
-.CDB-OptionInput-item.is-active > .CDB-OptionInput-content {
-  border-bottom: 1px solid $cMainBg;
-}

src/scss/cdb-components/forms/_radio.scss

@@ -21,11 +21,6 @@
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/mixins';
-
-
 .CDB-Radio {
   position: absolute;
   width: $baseSize * 2;
@@ -55,13 +50,13 @@
     margin-top: -3px;
     margin-left: -3px;
     border-radius: 50%;
-    background: $cSecondaryLine;
+    background: $cWhite;
     content: '';
   }
 }
 
 .CDB-Radio:checked + .CDB-Radio-face {
-  @include transition(background, 300ms);
+  transition: background 300ms;
   border: 1px solid $cBlue;
   background: $cBlue;
 
@@ -75,7 +70,7 @@
   background: $cThirdBackground;
 
   &::before {
-    background: $cWhite;
+    opacity: 0;
   }
 }
 
@@ -84,10 +79,26 @@
 }
 
 .CDB-Radio:hover + .CDB-Radio-face {
-  border: 1px solid $cHoverLine;
+  border: 1px solid $cBlueHover;
+
+  &::before {
+    background: $cHoverLine;
+  }
 }
 
 .CDB-Radio:focus + .CDB-Radio-face,
 .CDB-Radio:checked:hover + .CDB-Radio-face {
   border: 1px solid $cBlue;
 }
+
+.CDB-Radio:checked:hover + .CDB-Radio-face {
+  &::before {
+    background: $cWhite;
+  }
+}
+
+.CDB-Radio:active + .CDB-Radio-face {
+  &::before {
+    background: $cBlue;
+  }
+}

src/scss/cdb-components/forms/_selects.scss

@@ -39,6 +39,10 @@
 <br/>
 <div class="CDB-InputText CDB-Text is-cursor is-empty">DejaVu Sans</div>
 <br/>
+<div class="CDB-InputText CDB-Text is-cursor is-null">null</div>
+<br/>
+<div class="CDB-InputText CDB-Text is-cursor is-number">46,594</div>
+<br/>
 <select name="select" class="CDB-SelectFake CDB-Text">
   <option value="value1" selected>Choose an option</option>
   <option value="value2">Hide</option>
@@ -51,10 +55,6 @@
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/helpers';
-
 .CDB-Select {
   position: relative;
 }
@@ -77,10 +77,10 @@
   box-sizing: border-box;
 
   &:hover {
-    border: 1px solid $cHoverLine;
+    border: 1px solid $cBlueHover;
   }
   &:focus {
-    border: 1px solid $cBlue;
+    border: 1px solid $cBlackHover;
     outline: none;
   }
   &:disabled {
@@ -90,6 +90,10 @@
   &.has-error {
     @include default-form-error-style();
   }
+
+  &.is-cursor {
+    cursor: pointer;
+  }
 }
 
 .CDB-FieldError .CDB-Select,

src/scss/cdb-components/forms/_tabsForms.scss

@@ -72,11 +72,6 @@
 ```
 */
 
-@import '../../cdb-utilities/mixins';
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-
-
 .CDB-TabsForms {
   border: 1px solid $cMainLine;
   border-radius: 4px;
@@ -93,9 +88,3 @@
 .CDB-TabsForms-button {
   padding: 7px 8px;
 }
-
-
-
-
-
-

src/scss/cdb-components/forms/_textarea.scss

@@ -11,10 +11,6 @@
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/helpers';
-
 .CDB-Textarea {
   width: 100%;
   padding: 7px 8px 6px;
@@ -32,7 +28,8 @@
     outline-color: transparent;
     outline-style: none;
   }
-  &:disabled {
+  &:disabled,
+  &.is-disabled {
     border-color: $cSecondaryLine;
     background: $cThirdBackground;
   }

src/scss/cdb-components/forms/_toggle.scss

@@ -28,10 +28,6 @@
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/mixins';
-
 .CDB-Toggle {
   position: absolute;
   width: $baseSize * 4;
@@ -39,12 +35,22 @@
   opacity: 0;
   z-index: 1;
 
+  &:hover {
+    + .CDB-ToggleFace {
+      background: $cHintTextHover;
+    }
+
+    &:checked + .CDB-ToggleFace {
+      background: $cHighlightHover;
+    }
+  }
+
   + .CDB-ToggleFace {
-    @include transition(background, 300ms);
     position: relative;
     width: $baseSize * 4;
     height: $baseSize * 2;
     margin: 0 2px;
+    transition: background 300ms;
     border-radius: 50px;
     background: $cHintText;
 
@@ -73,4 +79,5 @@
 
 .Toggle .is-disabled {
   opacity: 0.24;
+  pointer-events: none;
 }

src/scss/cdb-components/forms/sliders.scss

@@ -1,143 +0,0 @@
-// Sliders styles
-// ----------------------------------------------
-
-/* SG
-# Forms/Sliders
-
-```
-<input type="range" min="100" max="500" step="50" value="300" class="CDB-Range"/>
-```
-*/
-
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-
-.CDB-Range {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  position: relative;
-  width: 100%;
-  margin: -4px 0 0;
-  padding: 0 6px;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  overflow: hidden;
-  vertical-align: middle;
-
-  &:focus {
-    outline: 0;
-  }
-}
-
-.CDB-Range::-webkit-slider-runnable-track {
-  height: $baseSize / 4;
-  margin: $baseSize 0;
-  border-radius: $baseSize / 2;
-  background: $cMainLine;
-}
-
-.CDB-Range::-webkit-slider-thumb {
-  position: relative;
-  width: $baseSize / 2;
-  height: 100%;
-  border-radius: $baseSize / 2;
-
-  &::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: -3000px;
-    height: $baseSize / 4;
-    border-radius: $baseSize / 2;
-    background: $cBlue;
-    content: '';
-  }
-
-  &::after {
-    position: absolute;
-    top: -6px;
-    right: -6px;
-    left: -6px;
-    width: $baseSize + 4;
-    height: $baseSize + 4;
-    border: 1px solid $cBlue;
-    border-radius: 50%;
-    background: $cWhite;
-    content: '';
-    z-index: 1;
-  }
-
-  &:focus,
-  &:hover {
-    &::after {
-      cursor: pointer;
-    }
-  }
-
-  &:disabled {
-    &::before,
-    &::after {
-      opacity: 0.2;
-    }
-  }
-}
-
-.CDB-Range::-moz-range-track {
-  height: $baseSize / 4;
-  margin: $baseSize 0;
-  border: 0;
-  border-radius: $baseSize / 2;
-  outline: none;
-  background: $cMainLine;
-}
-
-.CDB-Range::-moz-range-thumb {
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  left: -6px;
-  width: $baseSize + 4;
-  height: $baseSize + 4;
-  border: 1px solid $cBlue;
-  border-radius: 50%;
-  background: $cWhite;
-  content: '';
-  z-index: 1;
-}
-
-.CDB-Range::-moz-range-progress {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: -3000px;
-  height: $baseSize / 4;
-  border-radius: $baseSize / 2;
-  background: $cBlue;
-  content: '';
-}
-
-.CDB-Range::-ms-track {
-  height: $baseSize / 4;
-  margin: $baseSize 0;
-  border: transparent;
-  border-radius: $baseSize / 2;
-  background: $cMainLine;
-  color: transparent;
-}
-
-.CDB-Range::-ms-thumb {
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  left: -6px;
-  width: $baseSize + 4;
-  height: $baseSize + 4;
-  border: 1px solid $cBlue;
-  border-radius: 50%;
-  background: $cWhite;
-  content: '';
-  z-index: 1;
-}

src/scss/cdb-components/shapes/_add.scss

@@ -43,8 +43,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-Shape {
   width: 16px;
   height: 16px;
@@ -126,6 +124,3 @@ Description
     background: $cWhite;
   }
 }
-
-
-

src/scss/cdb-components/shapes/_arrow.scss

@@ -16,8 +16,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-Shape-Arrow {
   position: relative;
   width: 1px;

src/scss/cdb-components/shapes/_check-circle.scss

@@ -55,8 +55,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-Shape-CircleItem {
   width: 14px;
   height: 14px;
@@ -151,6 +149,3 @@ Description
     background: $cHighlight;
   }
 }
-
-
-

src/scss/cdb-components/shapes/_close.scss

@@ -43,8 +43,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-Shape-close {
   display: block;
   position: relative;
@@ -146,4 +144,3 @@ Description
     background: $cError;
   }
 }
-

src/scss/cdb-components/shapes/_dash.scss

@@ -43,8 +43,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-Shape-dash {
   position: relative;
   height: 100%;
@@ -80,6 +78,3 @@ Description
     background: $cWhite;
   }
 }
-
-
-

src/scss/cdb-components/shapes/_dataset.scss

@@ -78,9 +78,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-@import '../../cdb-variables/sizes';
-
 .CDB-Shape-Dataset {
   padding-top: 1px;
   &.is-small {

src/scss/cdb-components/shapes/_dots.scss

@@ -12,9 +12,6 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
 ```
 */
 
-@import '../../cdb-variables/colors';
-@import '../../cdb-variables/sizes';
-
 .CDB-Shape-dot {
   display: inline-block;
   width: $baseSize;

src/scss/cdb-components/shapes/_error-circle.scss

@@ -55,8 +55,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-Shape-CircleItem {
   width: 13px;
   height: 13px;

src/scss/cdb-components/shapes/_hamburguer.scss

@@ -30,9 +30,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-@import '../../cdb-variables/sizes';
-
 .CDB-Shape-hamburguer {
   width: $baseSize * 2;
   &:hover {

src/scss/cdb-components/shapes/_magnify.scss

@@ -44,8 +44,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-Shape-magnify {
   display: block;
   position: relative;
@@ -97,16 +95,16 @@ Description
 .CDB-Shape-magnify.is-small {
   &::before {
     top: 3px;
-    left: 3px;
-    width: 6px;
-    height: 6px;
+    left: 4px;
+    width: 5px;
+    height: 5px;
   }
 
   &::after {
     display: block;
     position: absolute;
     right: 4px;
-    bottom: 2px;
+    bottom: 3px;
     width: 1px;
     height: 5px;
     transform: rotate(314deg);

src/scss/cdb-components/shapes/_move.scss

@@ -85,8 +85,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-Shape-rectsHandle {
   position: relative;
   padding: 1px 0 0;

src/scss/cdb-components/shapes/_paragraph.scss

@@ -66,8 +66,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-Shape-paragraph {
   padding-top: 3px;
   text-align: left;

src/scss/cdb-components/shapes/_threePoints.scss

@@ -102,8 +102,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-Shape-threePoints {
   display: inline-block;
   padding: 0 4px;

src/scss/cdb-components/shapes/_toogle-arrow.scss

@@ -83,8 +83,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-ArrowToogle {
   position: relative;
   height: 100%;
@@ -128,6 +126,17 @@ Description
   }
 }
 
+.CDB-ArrowToogle.is-mini {
+  &::before {
+    left: 3px;
+    width: 6px;
+  }
+  &::after {
+    right: 3px;
+    width: 6px;
+  }
+}
+
 .CDB-ArrowToogle.is-blue {
   &::before {
     background: $cBlue;

src/scss/cdb-components/shapes/_type.scss

@@ -37,8 +37,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-Shape {
   width: 16px;
   height: 16px;

src/scss/cdb-utilities/_defaults.scss

@@ -1,8 +1,6 @@
 // Default classes
 // ----------------------------------------------
 
-@import '../cdb-variables/colors';
-
 body {
   color: $cMainText;
 }
@@ -15,4 +13,3 @@ a {
 a:hover {
   text-decoration: underline;
 }
-

src/scss/cdb-utilities/_fonts.scss

@@ -1,6 +1,7 @@
 // Fonts
 // --------------------------------------------------
 
+// Open Sans
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
@@ -28,3 +29,32 @@
   url('../fonts/OpenSans-Semibold.woff') format('woff'),
   url('../fonts/OpenSans-Semibold.ttf') format('truetype');
 }
+
+// Montserrat
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/Montserrat-Regular.eot');
+  src: url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/Montserrat-Regular.woff') format('woff'),
+  url('../fonts/Montserrat-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/Montserrat-Semibold.eot');
+  src: url('../fonts/Montserrat-Semibold.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/Montserrat-Semibold.woff') format('woff'),
+  url('../fonts/Montserrat-Semibold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/Montserrat-Bold.eot');
+  src: url('../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/Montserrat-Bold.woff') format('woff'),
+  url('../fonts/Montserrat-Bold.ttf') format('truetype');
+}

src/scss/cdb-utilities/_helpers.scss

@@ -1,9 +1,6 @@
 // Helper classes
 // ----------------------------------------------
 
-@import './mixins';
-@import '../cdb-variables/colors';
-
 /* Margins */
 .u-tSpace {
   margin-top: 4px;
@@ -38,9 +35,18 @@
 .u-lSpace {
   margin-left: 4px;
 }
+.u-lSpace--s {
+  margin-left: 2px;
+}
+.u-lSpace--m {
+  margin-left: 8px;
+}
 .u-lSpace--xl {
   margin-left: 12px;
 }
+.u-lSpace--xxl {
+  margin-left: 16px;
+}
 
 .u-ellipsis {
   text-overflow: ellipsis;
@@ -54,6 +60,10 @@
 
 .u-actionTextColor {
   color: $cBlue;
+
+  &:hover {
+    color: $cBlueHover;
+  }
 }
 .u-mainTextColor {
   color: $cMainText;
@@ -119,6 +129,13 @@
   @include align-items(flex-end);
 }
 
+/* Clearfix */
+.u-clearfix::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
 
 /* Media queries*/
 @include media-query-mobile() {

src/scss/cdb-variables/_colors.scss

@@ -1,30 +1,34 @@
-// Colors variables
-// ----------------------------------------------
-
-// General
-$cBlue: #1181FB;
+// -- General
+$cBlue: #1785FB;
 $cBlack: #000;
 $cWhite: #FFF;
+$cGray: #999;
 $cMainBg: #2E3C43;
 
-//Structure
+// -- Structure
 $cSecondaryDark: #282C2F;
 $cSecondaryBackground: #F2F6F9;
 $cThirdBackground: #F9F9F9;
 
-//Lines
+// -- Lines
 $cHoverLine: #AAA;
 $cMainLine: #DDD;
-$cSecondaryLine: #EEE;
+$cSecondaryLine: rgba($cMainBg, 0.08);
 
-//Typography
+// -- Borders
+$cBlackHover: #2E3C43;
+$cBlueHover: #0F6CD2;
+
+// -- Typography
 $cMainText: #2E3C43;
 $cSecondaryText: #636D72;
 $cAltText: #979EA1;
 $cHintText: #CBCED0;
+$cHintTextHover: #9C9FA1;
 
-//Others
+// -- Others
 $cHighlight: #9DE0AD;
+$cHighlightHover: #82BB90;
 $cAlert: #F19243;
 $cPublic: #9BC63B;
 $cLink: #FEB100;

src/scss/entry.scss

@@ -0,0 +1,56 @@
+// Entry point for all CartoAssets
+// ----------------------------------------------
+
+// Variables and functions
+@import 'cdb-variables/sizes';
+@import 'cdb-variables/colors';
+@import 'cdb-utilities/mixins';
+
+@import 'cdb-utilities/vendor/reset';
+@import 'cdb-utilities/vendor/normalize';
+@import 'cdb-utilities/defaults';
+@import 'cdb-utilities/fonts';
+@import 'cdb-icon-font';
+@import 'cdb-utilities/helpers';
+
+@import 'vendor/perfect-scrollbar/main'; // Perfect scrollbar styles
+
+@import 'cdb-components/forms/checkbox';
+@import 'cdb-components/forms/dropdowns';
+@import 'cdb-components/forms/inputs';
+@import 'cdb-components/forms/legends';
+@import 'cdb-components/forms/option-input';
+@import 'cdb-components/forms/radio';
+@import 'cdb-components/forms/selects';
+@import 'cdb-components/forms/tabsForms';
+@import 'cdb-components/forms/textarea';
+@import 'cdb-components/forms/toggle';
+
+@import 'cdb-components/shapes/add';
+@import 'cdb-components/shapes/arrow';
+@import 'cdb-components/shapes/check-circle';
+@import 'cdb-components/shapes/close';
+@import 'cdb-components/shapes/dash';
+@import 'cdb-components/shapes/dataset';
+@import 'cdb-components/shapes/dots';
+@import 'cdb-components/shapes/error-circle';
+@import 'cdb-components/shapes/hamburguer';
+@import 'cdb-components/shapes/magnify';
+@import 'cdb-components/shapes/move';
+@import 'cdb-components/shapes/paragraph';
+@import 'cdb-components/shapes/threePoints';
+@import 'cdb-components/shapes/toogle-arrow';
+@import 'cdb-components/shapes/type';
+
+@import 'cdb-components/avatars';
+@import 'cdb-components/boxes';
+@import 'cdb-components/buttons';
+@import 'cdb-components/colors';
+@import 'cdb-components/headers';
+@import 'cdb-components/lists';
+@import 'cdb-components/loader';
+@import 'cdb-components/menu';
+@import 'cdb-components/tags';
+@import 'cdb-components/tooltips';
+@import 'cdb-components/typography';
+@import 'cdb-components/layer-selector';

src/scss/vendor/perfect-scrollbar/_main.scss

@@ -0,0 +1,3 @@
+@import 'variables';
+@import 'mixins';
+@import 'themes';

src/scss/vendor/perfect-scrollbar/_mixins.scss

@@ -0,0 +1,144 @@
+@mixin scrollbar-rail-default($theme) {
+  display: none;
+  position: absolute; /* please don't change 'position' */
+  opacity: map_get($theme, rail-default-opacity);
+  transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
+}
+
+@mixin scrollbar-rail-hover($theme) {
+  opacity: map_get($theme, rail-hover-opacity);
+}
+
+@mixin scrollbar-default($theme) {
+  position: absolute; /* please don't change 'position' */
+  background: map_get($theme, bar-bg);
+  border-radius: map_get($theme, border-radius);
+  transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
+}
+
+@mixin scrollbar-hover($theme) {
+  background: map_get($theme, bar-hover-bg);
+}
+
+@mixin in-scrolling($theme) {
+  &.ps-in-scrolling {
+    &.ps-x > .ps-scrollbar-x-rail {
+      @include scrollbar-rail-hover($theme);
+      height: map_get($theme, scrollbar-x-rail-hover-height);
+      background: map_get($theme, bar-x-rail-hover-bg);
+
+      > .ps-scrollbar-x {
+        @include scrollbar-hover($theme);
+        height: map_get($theme, scrollbar-x-hover-height);
+      }
+    }
+    &.ps-y > .ps-scrollbar-y-rail {
+      @include scrollbar-rail-hover($theme);
+      width: map_get($theme, scrollbar-y-rail-hover-width);
+      background: map_get($theme, bar-y-rail-hover-bg);
+
+      > .ps-scrollbar-y {
+        @include scrollbar-hover($theme);
+        width: map_get($theme, scrollbar-y-hover-width);
+      }
+    }
+  }
+}
+
+// Layout and theme mixin
+@mixin ps-container($theme) {
+  -ms-touch-action: auto;
+  touch-action: auto;
+  overflow: hidden !important;
+  -ms-overflow-style: none;
+
+  // Edge
+  @supports (-ms-overflow-style: none) {
+    overflow: auto !important;
+  }
+  // IE10+
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    overflow: auto !important;
+  }
+
+  &.ps-active-x > .ps-scrollbar-x-rail {
+    display: block;
+    background: map_get($theme, bar-x-rail-bg);
+    cursor: default !important;
+  }
+
+  &.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+    background: map_get($theme, bar-y-rail-bg);
+    cursor: default !important;
+  }
+
+  @include in-scrolling($theme);
+
+  > .ps-scrollbar-x-rail {
+    @include scrollbar-rail-default($theme);
+    bottom: map_get($theme, scrollbar-x-rail-bottom); /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: map_get($theme, scrollbar-x-rail-height);
+
+    > .ps-scrollbar-x {
+      @include scrollbar-default($theme);
+      bottom: map_get($theme, scrollbar-x-bottom); /* there must be 'bottom' for ps-scrollbar-x */
+      height: map_get($theme, scrollbar-x-height);
+    }
+    &:hover,
+    &:active {
+      height: map_get($theme, scrollbar-x-rail-hover-height);
+
+      > .ps-scrollbar-x {
+        height: map_get($theme, scrollbar-x-hover-height);
+      }
+    }
+  }
+
+  > .ps-scrollbar-y-rail {
+    @include scrollbar-rail-default($theme);
+    right: map_get($theme, scrollbar-y-rail-right); /* there must be 'right' for ps-scrollbar-y-rail */
+    width: map_get($theme, scrollbar-y-rail-width);
+
+    > .ps-scrollbar-y {
+      @include scrollbar-default($theme);
+      right: map_get($theme, scrollbar-y-right); /* there must be 'right' for ps-scrollbar-y */
+      width: map_get($theme, scrollbar-y-width);
+    }
+    &:hover,
+    &:active {
+      width: map_get($theme, scrollbar-y-rail-hover-width);
+
+      > .ps-scrollbar-y {
+        width: map_get($theme, scrollbar-y-hover-width);
+      }
+    }
+  }
+
+  &:hover {
+    @include in-scrolling($theme);
+
+    > .ps-scrollbar-x-rail,
+    > .ps-scrollbar-y-rail {
+      opacity: map_get($theme, rail-container-hover-opacity);
+    }
+
+    > .ps-scrollbar-x-rail:hover {
+      @include scrollbar-rail-hover($theme);
+      background: map_get($theme, bar-x-rail-hover-bg);
+
+      > .ps-scrollbar-x {
+        @include scrollbar-hover($theme);
+      }
+    }
+
+    > .ps-scrollbar-y-rail:hover {
+      @include scrollbar-rail-hover($theme);
+      background: map_get($theme, bar-y-rail-hover-bg);
+
+      > .ps-scrollbar-y {
+        @include scrollbar-hover($theme);
+      }
+    }
+  }
+}

src/scss/vendor/perfect-scrollbar/_themes.scss

@@ -0,0 +1,29 @@
+$ps-theme-default: (
+  border-radius: $ps-border-radius,
+  rail-default-opacity: $ps-rail-default-opacity,
+  rail-container-hover-opacity: $ps-rail-container-hover-opacity,
+  rail-hover-opacity: $ps-rail-hover-opacity,
+  bar-bg: $ps-bar-bg,
+  bar-hover-bg: $ps-bar-hover-bg,
+  bar-x-rail-bg: $ps-bar-x-rail-bg,
+  bar-x-rail-hover-bg: $ps-bar-x-rail-hover-bg,
+  bar-y-rail-bg: $ps-bar-y-rail-bg,
+  bar-y-rail-hover-bg: $ps-bar-y-rail-hover-bg,
+  scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom,
+  scrollbar-x-rail-height: $ps-scrollbar-x-rail-height,
+  scrollbar-x-rail-hover-height: $ps-scrollbar-x-rail-hover-height,
+  scrollbar-x-bottom: $ps-scrollbar-x-bottom,
+  scrollbar-x-height: $ps-scrollbar-x-height,
+  scrollbar-x-hover-height: $ps-scrollbar-x-hover-height,
+  scrollbar-y-rail-right: $ps-scrollbar-y-rail-right,
+  scrollbar-y-rail-width: $ps-scrollbar-y-rail-width,
+  scrollbar-y-rail-hover-width: $ps-scrollbar-y-rail-hover-width,
+  scrollbar-y-right: $ps-scrollbar-y-right,
+  scrollbar-y-width: $ps-scrollbar-y-width,
+  scrollbar-y-hover-width: $ps-scrollbar-y-hover-width,
+);
+
+// Default theme
+.ps-container {
+  @include ps-container($ps-theme-default);
+}

src/scss/vendor/perfect-scrollbar/_variables.scss

@@ -0,0 +1,30 @@
+// Colors
+$ps-border-radius: 0 !default;
+
+$ps-rail-default-opacity: 1 !default;
+$ps-rail-container-hover-opacity: 1 !default;
+$ps-rail-hover-opacity: 1 !default;
+
+$ps-bar-bg: #AAA !default;
+$ps-bar-hover-bg: #AAA !default;
+
+$ps-bar-x-rail-bg: linear-gradient(180deg, transparent 50%, #EEE 50%) !default;
+$ps-bar-x-rail-hover-bg: linear-gradient(180deg, transparent 50%, #EEE 50%) !default;
+
+$ps-bar-y-rail-bg: linear-gradient(90deg, transparent 50%, #EEE 50%) !default;
+$ps-bar-y-rail-hover-bg: linear-gradient(90deg, transparent 50%, #EEE 50%) !default;
+
+// Sizes
+$ps-scrollbar-x-rail-bottom: 0 !default;
+$ps-scrollbar-x-rail-height: 8px !default;
+$ps-scrollbar-x-rail-hover-height: 16px !default;
+$ps-scrollbar-x-bottom: 0 !default;
+$ps-scrollbar-x-height: 4px !default;
+$ps-scrollbar-x-hover-height: 8px !default;
+
+$ps-scrollbar-y-rail-right: 0 !default;
+$ps-scrollbar-y-rail-width: 8px !default;
+$ps-scrollbar-y-rail-hover-width: 16px !default;
+$ps-scrollbar-y-right: 0 !default;
+$ps-scrollbar-y-width: 4px !default;
+$ps-scrollbar-y-hover-width: 8px !default;

styleguide/_template.html

@@ -1,5 +1,14 @@
 <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}}
@@ -44,10 +53,15 @@
         // 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 id="styleguide-menu">
+<div class="CDB-Text" id="styleguide-menu">
 	<ul>
     <li>
       <a class="submenulink" href="#Basics" data-section="Basics">Basics</a>
@@ -73,881 +87,21 @@
 <div id="styleguide">
   <div class="section" id="Basics" data-section="Basics" data-heading="Basics">
     <div class="comment">
-      <h1>Basics</h1>
-      <p>Important notes about this styleguide</p>
+      <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>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">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><strong>General rules</strong></p>
+      <p class="CDB-Text is-semibold u-tSpace-xl">General rules</p>
 
-      <ul>
-        <li>All new elements added in this repository should have included a 'CDB-' namespace.</li>
-        <li>
-          <strong>Don't create default styles for common elements</strong> (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>
-          <strong>Avoid creating new classes with only one attribute</strong> (e.g. <code>.marginRight { margin-right: 10px }</code> ). It is impossible to manage the amount of cases we would like to cover.</li>
+      <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>
-
-      <hr>
-
-      <p><strong>Table of contents</strong></p>
-
-      <ul>
-        <li>
-          <a href="#components">Components</a>
-
-          <ul>
-            <li><a href="#componentname">ComponentName</a></li>
-            <li><a href="#componentname--modifiername">ComponentName--modifierName</a></li>
-            <li><a href="#componentname-descendentname">ComponentName-descendentName</a></li>
-            <li><a href="#componentnameis-stateofcomponent">ComponentName.is-stateOfComponent</a></li>
-          </ul>
-        </li>
-        <li><a href="#javascript">JavaScript</a></li>
-        <li><a href="#structure-sample">Structure sample</a></li>
-        <li><a href="#a-word-on-precompilers">Precompilers</a></li>
-        <li><a href="#colors">Colors</a></li>
-        <li><a href="#z-index">Z-Index</a></li>
-        <li>
-          <a href="#formatting">Formatting</a>
-
-          <ul>
-            <li><a href="#spacing">Spacing</a></li>
-            <li><a href="#quotes">Quotes</a></li>
-            <li><a href="#colors-1">Colors</a></li>
-          </ul>
-        </li>
-        <li><a href="#things-to-add-to-the-guide">Things to add to the guide</a></li>
-      </ul>
-
-      <hr>
-
-      <h2>
-        <a id="components" class="anchor" href="#components" aria-hidden="true"><span class="octicon octicon-link"></span></a>Components</h2>
-
-      <p>Syntax: <code>&lt;ComponentName&gt;[--modifierName|-descendentName]</code></p>
-
-      <h4>
-        <a id="componentname" class="anchor" href="#componentname" aria-hidden="true"><span class="octicon octicon-link"></span></a>ComponentName</h4>
-
-      <p>The component's name <strong>must be written in camel case</strong>.</p>
-
-<div class="highlight highlight-source-css"><pre><span class="pl-e">.MyComponent</span> { <span class="pl-c">/* … */</span> }</pre></div>
-
-      <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">article</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>MyComponent<span class="pl-pds">"</span></span>&gt;
-  …
-&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
-
-<h4>
-  <a id="componentname--modifiername" class="anchor" href="#componentname--modifiername" aria-hidden="true"><span class="octicon octicon-link"></span></a>ComponentName--modifierName</h4>
-
-<p>A component modifier is a class that modifies the presentation of the base component in some form. </p>
-
-<ol>
-  <li>Modifier names <strong>must be written in camel case</strong> and be <strong>separated from the component name by two hyphens</strong>. </li>
-  <li>
-    <strong>The class should be included in the HTML in addition to the base component class</strong>.</li>
-</ol>
-
-<div class="highlight highlight-source-css"><pre><span class="pl-c">/* Core button */</span>
-<span class="pl-e">.Btn</span> { <span class="pl-c">/* … */</span> }
-
-<span class="pl-c">/* Default button style */</span>
-<span class="pl-e">.Btn--default</span> { <span class="pl-c">/* … */</span> }</pre></div>
-
-<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">article</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Btn Btn--default<span class="pl-pds">"</span></span>&gt;
-  …
-&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
-
-<h4>
-  <a id="componentname-descendentname" class="anchor" href="#componentname-descendentname" aria-hidden="true"><span class="octicon octicon-link"></span></a>ComponentName-descendentName</h4>
-
-<ol>
-  <li>A component descendent is a class that is attached to a descendent node of a component. </li>
-  <li>It's responsible for applying presentation directly to the descendent on behalf of a particular component. </li>
-  <li>
-    <strong>Descendent names must be written in camel case</strong>.</li>
-</ol>
-
-<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">article</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet<span class="pl-pds">"</span></span>&gt;
-  &lt;<span class="pl-ent">header</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet-header<span class="pl-pds">"</span></span>&gt;
-    &lt;<span class="pl-ent">img</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet-avatar<span class="pl-pds">"</span></span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>{{src}}<span class="pl-pds">"</span></span> <span class="pl-e">alt</span>=<span class="pl-s"><span class="pl-pds">"</span>{{alt}}<span class="pl-pds">"</span></span>&gt;
-    …
-  &lt;/<span class="pl-ent">header</span>&gt;
-  &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet-bodyText<span class="pl-pds">"</span></span>&gt;
-    …
-  &lt;/<span class="pl-ent">div</span>&gt;
-&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
-
-<h4>
-  <a id="componentnameis-stateofcomponent" class="anchor" href="#componentnameis-stateofcomponent" aria-hidden="true"><span class="octicon octicon-link"></span></a>ComponentName.is-stateOfComponent</h4>
-
-<p>Use <code>is-stateName</code> to reflect changes to a component's state. </p>
-
-<ol>
-  <li>The state name <strong>must be camel case</strong>. </li>
-  <li>
-    <strong>Never style these classes directly</strong>: they should always be used as an adjoining class.</li>
-</ol>
-
-<p>This means that the same state names can be used in multiple contexts, but every component must define its own styles for the state (as they are scoped to the component).</p>
-
-<p><strong>Right:</strong></p>
-
-<div class="highlight highlight-source-css"><pre><span class="pl-e">.Tweet</span> { <span class="pl-c">/* … */</span> }
-<span class="pl-e">.Tweet.is-expanded</span> { <span class="pl-c">/* … */</span> }
-
-&lt;<span class="pl-ent">article</span> class="Tweet is-expanded"&gt;
-  …
-&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
-
-<p><strong>Wrong:</strong></p>
-
-<div class="highlight highlight-source-css"><pre><span class="pl-e">.Tweet</span> { <span class="pl-c">/* … */</span> }
-<span class="pl-e">.Tweet.expanded</span> { <span class="pl-c">/* … */</span> }</pre></div>
-
-<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">article</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Tweet expanded<span class="pl-pds">"</span></span>&gt;
-  …
-&lt;/<span class="pl-ent">article</span>&gt;</pre></div>
-
-<p>We should always rely on the same terminology to express state of a component: i.e.: a common term for <code>is-active</code>, <code>is-expanded</code>, <code>is-selected</code>, <code>is-highlighted</code>, ... </p>
-
-<h2>
-  <a id="javascript" class="anchor" href="#javascript" aria-hidden="true"><span class="octicon octicon-link"></span></a>JavaScript</h2>
-
-<p>Syntax: <code>js-&lt;targetName&gt;</code></p>
-
-<p>JavaScript-specific classes reduce the risk that changing the structure or theme of components will inadvertently affect any required JavaScript behaviour and complex functionality. It is not neccesarry to use them in every case, just think of them as a tool in your utility belt. If you are creating a class, which you dont intend to use for styling, but instead only as a selector in JavaScript, you should probably be adding the js- prefix. In practice this looks like this:</p>
-
-<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">a</span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>/login<span class="pl-pds">"</span></span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>Btn Btn-primary js-login<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">a</span>&gt;</pre></div>
-
-<p><strong>JavaScript-specific classes should not, under any circumstances, be styled.</strong></p>
-
-<hr>
-
-<h2>
-  <a id="a-word-on-precompilers" class="anchor" href="#a-word-on-precompilers" aria-hidden="true"><span class="octicon octicon-link"></span></a>A word on (Pre)compilers</h2>
-
-<p>Since we use Rails as a backend, we make use of Sprockets to make all the dirty work with stylesheets (and javascripts). Many of the stylesheets are constructed by simply writing <code>require_directory</code> —<a href="http://markdotto.com/2014/07/23/githubs-css/">this is awesome, but it also kind of sucks</a>.</p>
-
-<p>Preferably we should use <code>@import</code> instead of <code>require</code> when possible.
-  <a href="http://pivotallabs.com/structure-your-sass-files-with-import/">http://pivotallabs.com/structure-your-sass-files-with-import/</a></p>
-
-<p>When using require we should list the required files in the order they must be applied, as an added control to avoid undesired behaviours.</p>
-
-<p><strong>Bad:</strong></p>
-
-<pre><code>/*
-*= require dashboard/header
-*= require dashboard/table
-*/
-</code></pre>
-
-<p><strong>Worse:</strong></p>
-
-<pre><code>/*
-*= require_tree dashboard
-*/
-</code></pre>
-
-<p><strong>Good:</strong></p>
-
-<pre><code>@import "dashboard/header";
-@import "dashboard/tables";
-</code></pre>
-
-<p><strong>Better:</strong></p>
-
-<pre><code>@import
-"dashboard/header",
-"dashboard/tables";
-</code></pre>
-
-<hr>
-
-<h2>
-  <a id="structure-sample" class="anchor" href="#structure-sample" aria-hidden="true"><span class="octicon octicon-link"></span></a>Structure sample</h2>
-
-<pre><code>
-.Btn {}
-
-  .Btn--m {}
-
-  .Btn--highlight {}
-
-  .Btn--green {}
-
-  .Btn.is-active {}
-
-.Menu {}
-
-  .Menu-item {}
-
-  .Menu-link {}
-
-.Header {}
-
-  .Navbar {}
-
-    .Navbar-header {}
-
-      .Navbar-brand {}
-
-      .Navbar-searchField {}
-
-      .Navbar-searchButton {}
-
-    .Navbar-menu {}
-
-      .Navbar-menuItem {}
-
-      .Navbar-menuLink {}
-
-.Dashboard {}
-
-  .Dashboard-header {}
-
-    .Dashboard-avatar {}
-
-    .Dashboard-title {}
-
-    .Dashboard-menu {}
-
-  .Dashboard-subHeader {}
-
-    .Dashboard-subMenu {}
-
-      .Dashboard-subMenuItem {}
-
-      .Dashboard-subMenuLink {}
-
-
-.Block {}
-
-  .Block-thumbnail {}
-
-  .Block-title {}
-
-  .Block-description {}
-
-  .Block-tags {}
-
-  .Block-status {}
-
-  .Block-footer {}
-</code></pre>
-
-  <hr>
-
-  <h2>
-    <a id="colors" class="anchor" href="#colors" aria-hidden="true"><span class="octicon octicon-link"></span></a>Colors</h2>
-
-  <h4>
-    <a id="colorsscss" class="anchor" href="#colorsscss" aria-hidden="true"><span class="octicon octicon-link"></span></a>colors.scss</h4>
-
-  <p>Syntax: <code>$c&lt;colorName&gt;</code></p>
-
-  <h4>
-    <a id="sample" class="anchor" href="#sample" aria-hidden="true"><span class="octicon octicon-link"></span></a>Sample</h4>
-
-  <div class="highlight highlight-source-css"><pre>// Colors
-// --------------------------------------------------
-// Paragraphs
-$cTypography-headers:           rgba(#333, 1);
-$cTypography-paragraphs:        rgba(#666, 1);
-$cTypography-secondary:         rgba(#999, 1);
-$cTypography-help:              rgba(<span class="pl-e">#CCC</span>, 1);
-$cTypography-headersOverBlack:  rgba(<span class="pl-e">#FFF</span>, 1);
-$cTypography-<span class="pl-ent">link</span>:              rgba(#0090D7, 1);
-$cTypography-linkHover:         rgba(#62B4E3, 1);
-$cTypography-linkSelected:      rgba(#333, 1);
-
-// Structure
-$cStructure-mainBkg:  rgba(<span class="pl-e">#FFF</span>, 1);
-$cStructure-mainLine: rgba(<span class="pl-e">#DDD</span>, 1);
-$cStructure-grayBkg:  rgba(<span class="pl-e">#F9F9F9</span>, 1);
-$cStructure-softLine: rgba(<span class="pl-e">#EEE</span>, 1);
-
-// Highlight
-$cHighlight-main:     rgba(#0090D7, 1);
-$cHighlight-positive: rgba(#8FB83F, 1);
-$cHighlight-negative: rgba(<span class="pl-e">#C74B43</span>, 1);
-$cHighlight-alert:    rgba(<span class="pl-e">#C67B44</span>, 1);</pre></div>
-
-    <p>Don't use named colors, try to use meaningful names.</p>
-
-    <hr>
-
-    <h2>
-      <a id="z-index" class="anchor" href="#z-index" aria-hidden="true"><span class="octicon octicon-link"></span></a>Z-Index</h2>
-
-    <h4>
-      <a id="z-indexscss" class="anchor" href="#z-indexscss" aria-hidden="true"><span class="octicon octicon-link"></span></a>z-index.scss</h4>
-
-    <div class="highlight highlight-source-css"><pre>// Z-Index Scale (private vars)
-// --------------------------------------------------
-@zIndex-1:   100;
-@zIndex-2:   200;
-@zIndex-3:   300;
-@zIndex-4:   400;
-@zIndex-5:   500;
-@zIndex-6:   600;
-@zIndex-7:   700;
-@zIndex-8:   800;
-@zIndex-9:   900;
-@zIndex-10: 1000;</pre></div>
-
-      <h4>
-        <a id="z-index-file-use" class="anchor" href="#z-index-file-use" aria-hidden="true"><span class="octicon octicon-link"></span></a>z-index file use</h4>
-
-<pre><code>// Z-Index Applications
-// --------------------------------------------------
-@zIndex-1--screenForeground:        @zIndex-1;
-@zIndex-1--followUpVisibility:      @zIndex-1;
-@zIndex-1--prlWelcome:              @zIndex-1;
-@zIndex-1--appImageDropdown:        @zIndex-1;
-@zIndex-1--surfaceUnder:            @zIndex-1;
-@zIndex-1--blockGroup:              @zIndex-1;
-
-(…)
-
-@zIndex-9--zoomOverlayTarget:       @zIndex-9;
-@zIndex-9--navOverlayTouch:         @zIndex-9;
-@zIndex-9--overlay:                 @zIndex-9;
-@zIndex-9--dialog:                  @zIndex-9;
-@zIndex-9--tooltip:                 @zIndex-9;
-</code></pre>
-
-        <hr>
-
-        <h2>
-          <a id="formatting" class="anchor" href="#formatting" aria-hidden="true"><span class="octicon octicon-link"></span></a>Formatting</h2>
-
-        <p>From: <a href="https://gist.github.com/fat/a47b882eb5f84293c4ed">https://gist.github.com/fat/a47b882eb5f84293c4ed</a></p>
-
-        <p>The following are some high level page formatting style rules.</p>
-
-        <p><a name="user-content-property-value"></a></p>
-
-        <h3>
-          <a id="property-value" class="anchor" href="#property-value" aria-hidden="true"><span class="octicon octicon-link"></span></a>Property: value</h3>
-
-        <p>There should be a blank space between a property and a value:</p>
-
-        <p><strong>Right:</strong></p>
-
-<div class="highlight highlight-source-css"><pre><span class="pl-e">.content-edit</span> { <span class="pl-c1"><span class="pl-c1">background</span></span>: <span class="pl-c1">red</span> }</pre></div>
-
-        <p><strong>Wrong:</strong></p>
-
-<div class="highlight highlight-source-css"><pre><span class="pl-e">.content-edit</span> {<span class="pl-c1"><span class="pl-c1">background</span></span>:<span class="pl-c1">red</span>}</pre></div>
-
-        <p>If you have to define an only one property, leave blank spaces between brackets.</p>
-
-        <p><a name="user-content-spacing"></a></p>
-
-        <h3>
-          <a id="spacing" class="anchor" href="#spacing" aria-hidden="true"><span class="octicon octicon-link"></span></a>Spacing</h3>
-
-        <p>CSS rules should be comma seperated but live on new lines:</p>
-
-        <p><strong>Right:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre><span class="pl-e">.content</span>,
-<span class="pl-e">.content-edit</span> {
-  …
-}</pre></div>
-
-        <p><strong>Wrong:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre><span class="pl-e">.content</span>, <span class="pl-e">.content-edit</span> {
-  …
-}</pre></div>
-
-        <p>CSS blocks should be seperated by a single new line. not two. not 0.</p>
-
-        <p><strong>Right:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre><span class="pl-e">.content</span> {
-  …
-}
-<span class="pl-e">.content-edit</span> {
-  …
-}</pre></div>
-
-        <p><strong>Wrong:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre><span class="pl-e">.content</span> {
-  …
-}
-
-<span class="pl-e">.content-edit</span> {
-  …
-}</pre></div>
-
-        <hr>
-
-        <h3>
-          <a id="quotes" class="anchor" href="#quotes" aria-hidden="true"><span class="octicon octicon-link"></span></a>Quotes</h3>
-
-        <p>Quotes are optional in CSS and LESS. We use double quotes as it is visually clearer that the string is not a selector or a style property.</p>
-
-        <p><strong>Right:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre>background-image: url("/<span class="pl-ent">img</span>/you<span class="pl-e">.jpg</span>");
-font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial;</pre></div>
-
-        <p><strong>Wrong:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre>background-image: url(/<span class="pl-ent">img</span>/you<span class="pl-e">.jpg</span>);
-font-family: Helvetica Neue Light, Helvetica Neue, Helvetica, Arial;</pre></div>
-
-        <hr>
-
-        <h3>
-          <a id="colors-1" class="anchor" href="#colors-1" aria-hidden="true"><span class="octicon octicon-link"></span></a>Colors</h3>
-
-        <p>When implementing feature styles, you should only be using color variables provided by colors.css.scss.</p>
-
-        <p>When adding a color variable to colors.css.scss, using RGB and RGBA color units are preferred over hex, named, HSL, or HSLA values.</p>
-
-        <p><strong>Right:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre>rgb(50, 50, 50);
-rgba(50, 50, 50, 0<span class="pl-e">.2</span>);</pre></div>
-
-        <p><strong>Wrong:</strong></p>
-
-        <div class="highlight highlight-source-css"><pre><span class="pl-e">#FFF</span>;
-<span class="pl-e">#FFFFFF</span>;
-white;
-hsl(120, 100%, 50%);
-hsla(120, 100%, 50%, 1);</pre></div>
-
-        <hr>
-
-        <h3>
-          <a id="things-to-add-to-the-guide" class="anchor" href="#things-to-add-to-the-guide" aria-hidden="true"><span class="octicon octicon-link"></span></a>Things to add to the guide</h3>
-
-        <ol>
-          <li>Define a type scale (variables for font-sizes, weights, letter-spacing, line-heights, etc.).</li>
-          <li>
-            <code>.u-</code> prefixed class name for single purpose utility classes like .u-underline, .u-capitalize, etc. (not sure about this one)</li>
-          <li>Don't use compass predefined functions, create a mixin in new <code>mixins.css.scss</code>file.</li>
-          <li>No more clearfix or layout hacks, use flexbox:
-
-            <ul>
-              <li><a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/">http://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></li>
-              <li><a href="http://chriswrightdesign.com/experiments/flexbox-adventures/">http://chriswrightdesign.com/experiments/flexbox-adventures/</a></li>
-            </ul>
-          </li>
-        </ol>
-
-        <hr>
-
-        <h3>
-          <a id="csscomb-config" class="anchor" href="#csscomb-config" aria-hidden="true"><span class="octicon octicon-link"></span></a>CSSComb config</h3>
-
-<pre><code>   "config": {
-
-        // Whether to add a semicolon after the last value/mixin.
-        "always-semicolon": true,
-
-        // Set indent for code inside blocks, including media queries and nested rules.
-        "block-indent": "  ",
-
-        // Unify case of hexadecimal colors.
-        "color-case": "lower",
-
-        // Whether to expand hexadecimal colors or use shorthands.
-        "color-shorthand": true,
-
-        // Unify case of element selectors.
-        "element-case": "lower",
-
-        // Add/remove line break at EOF.
-        "eof-newline": true,
-
-        // Add/remove leading zero in dimensions.
-        "leading-zero": false,
-
-        // Unify quotes style.
-        "quotes": "single",
-
-        // Remove all rulesets that contain nothing but spaces.
-        "remove-empty-rulesets": true,
-
-        // Set space after `:` in declarations.
-        "space-after-colon": " ",
-
-        // Set space after combinator (for example, in selectors like `p &gt; a`).
-        "space-after-combinator": " ",
-
-        // Set space after `{`.
-        "space-after-opening-brace": "\n",
-
-        // Set space after selector delimiter.
-        "space-after-selector-delimiter": "\n",
-
-        // Set space before `}`.
-        "space-before-closing-brace": "\n",
-
-        // Set space before `:` in declarations.
-        "space-before-colon": "",
-
-        // Set space before combinator (for example, in selectors like `p &gt; a`).
-        "space-before-combinator": " ",
-
-        // Set space before `{`.
-        "space-before-opening-brace": " ",
-
-        // Set space before selector delimiter.
-        "space-before-selector-delimiter": "",
-
-        // Set space between declarations (i.e. `color: tomato`).
-        "space-between-declarations": "\n",
-
-        // Whether to trim trailing spaces.
-        "strip-spaces": true,
-
-        // Whether to remove units in zero-valued dimensions.
-        "unitless-zero": true,
-
-        // Whether to align prefixes in properties and values.
-        "vendor-prefix-align": true,
-
-        // Sort properties in particular order.
-        "sort-order": [
-            "position",
-            "top",
-            "right",
-            "bottom",
-            "left",
-            "z-index",
-            "display",
-            "float",
-            "width",
-            "min-width",
-            "max-width",
-            "height",
-            "min-height",
-            "max-height",
-            "-webkit-box-sizing",
-            "-moz-box-sizing",
-            "box-sizing",
-            "-webkit-appearance",
-            "-moz-appearance",
-            "appearance",
-            "padding",
-            "padding-top",
-            "padding-right",
-            "padding-bottom",
-            "padding-left",
-            "margin",
-            "margin-top",
-            "margin-right",
-            "margin-bottom",
-            "margin-left",
-            "overflow",
-            "overflow-x",
-            "overflow-y",
-            "-webkit-overflow-scrolling",
-            "-ms-overflow-x",
-            "-ms-overflow-y",
-            "-ms-overflow-style",
-            "clip",
-            "clear",
-            "src",
-            "font",
-            "font-family",
-            "font-size",
-            "font-weight",
-            "font-style",
-            "font-variant",
-            "font-size-adjust",
-            "font-stretch",
-            "font-effect",
-            "font-emphasize",
-            "font-emphasize-position",
-            "font-emphasize-style",
-            "font-smooth",
-            "-webkit-hyphens",
-            "-moz-hyphens",
-            "hyphens",
-            "line-height",
-            "color",
-            "text-align",
-            "-webkit-text-align-last",
-            "-moz-text-align-last",
-            "-ms-text-align-last",
-            "text-align-last",
-            "text-emphasis",
-            "text-emphasis-color",
-            "text-emphasis-style",
-            "text-emphasis-position",
-            "text-decoration",
-            "text-underline-position",
-            "-webkit-text-decoration-style",
-            "-moz-text-decoration-style",
-            "text-decoration-style",
-            "-moz-text-decoration-color",
-            "text-decoration-color",
-            "-moz-text-decoration-line",
-            "text-decoration-line",
-            "text-indent",
-            "-ms-text-justify",
-            "text-justify",
-            "text-outline",
-            "-ms-text-overflow",
-            "text-overflow",
-            "text-overflow-ellipsis",
-            "text-overflow-mode",
-            "text-shadow",
-            "text-transform",
-            "text-wrap",
-            "-webkit-text-size-adjust",
-            "-moz-text-size-adjust",
-            "-ms-text-size-adjust",
-            "text-size-adjust",
-            "letter-spacing",
-            "-ms-word-break",
-            "word-break",
-            "word-spacing",
-            "-ms-word-wrap",
-            "word-wrap",
-            "-moz-tab-size",
-            "-o-tab-size",
-            "tab-size",
-            "white-space",
-            "vertical-align",
-            "list-style",
-            "list-style-position",
-            "list-style-type",
-            "list-style-image",
-            "pointer-events",
-            "-webkit-touch-action",
-            "-ms-touch-action",
-            "touch-action",
-            "cursor",
-            "visibility",
-            "zoom",
-            "flex-direction",
-            "flex-order",
-            "flex-pack",
-            "flex-align",
-            "table-layout",
-            "empty-cells",
-            "caption-side",
-            "border-spacing",
-            "border-collapse",
-            "content",
-            "quotes",
-            "counter-reset",
-            "counter-increment",
-            "resize",
-            "-webkit-user-select",
-            "-moz-user-select",
-            "-ms-user-select",
-            "user-select",
-            "nav-index",
-            "nav-up",
-            "nav-right",
-            "nav-down",
-            "nav-left",
-            "background",
-            "background-color",
-            "background-image",
-            "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
-            "filter:progid:DXImageTransform.Microsoft.gradient",
-            "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
-            "filter",
-            "background-repeat",
-            "background-attachment",
-            "background-position",
-            "background-position-x",
-            "-ms-background-position-x",
-            "background-position-y",
-            "-ms-background-position-y",
-            "-webkit-background-clip",
-            "-moz-background-clip",
-            "background-clip",
-            "background-origin",
-            "-webkit-background-size",
-            "-moz-background-size",
-            "-o-background-size",
-            "background-size",
-            "border",
-            "border-width",
-            "border-style",
-            "border-color",
-            "border-top",
-            "border-top-width",
-            "border-top-style",
-            "border-top-color",
-            "border-right",
-            "border-right-width",
-            "border-right-style",
-            "border-right-color",
-            "border-bottom",
-            "border-bottom-width",
-            "border-bottom-style",
-            "border-bottom-color",
-            "border-left",
-            "border-left-width",
-            "border-left-style",
-            "border-left-color",
-            "-webkit-box-decoration-break",
-            "box-decoration-break",
-            "-webkit-border-radius",
-            "-moz-border-radius",
-            "border-radius",
-            "-webkit-border-top-left-radius",
-            "-moz-border-radius-topleft",
-            "border-top-left-radius",
-            "-webkit-border-top-right-radius",
-            "-moz-border-radius-topright",
-            "border-top-right-radius",
-            "-webkit-border-bottom-right-radius",
-            "-moz-border-radius-bottomright",
-            "border-bottom-right-radius",
-            "-webkit-border-bottom-left-radius",
-            "-moz-border-radius-bottomleft",
-            "border-bottom-left-radius",
-            "-webkit-border-image",
-            "-moz-border-image",
-            "-o-border-image",
-            "border-image",
-            "-webkit-border-image-source",
-            "-moz-border-image-source",
-            "-o-border-image-source",
-            "border-image-source",
-            "-webkit-border-image-slice",
-            "-moz-border-image-slice",
-            "-o-border-image-slice",
-            "border-image-slice",
-            "-webkit-border-image-width",
-            "-moz-border-image-width",
-            "-o-border-image-width",
-            "border-image-width",
-            "-webkit-border-image-outset",
-            "-moz-border-image-outset",
-            "-o-border-image-outset",
-            "border-image-outset",
-            "-webkit-border-image-repeat",
-            "-moz-border-image-repeat",
-            "-o-border-image-repeat",
-            "border-image-repeat",
-            "outline",
-            "outline-width",
-            "outline-style",
-            "outline-color",
-            "outline-offset",
-            "-webkit-box-shadow",
-            "-moz-box-shadow",
-            "box-shadow",
-            "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
-            "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
-            "opacity",
-            "-ms-interpolation-mode",
-            "-webkit-transition",
-            "-moz-transition",
-            "-ms-transition",
-            "-o-transition",
-            "transition",
-            "-webkit-transition-delay",
-            "-moz-transition-delay",
-            "-ms-transition-delay",
-            "-o-transition-delay",
-            "transition-delay",
-            "-webkit-transition-timing-function",
-            "-moz-transition-timing-function",
-            "-ms-transition-timing-function",
-            "-o-transition-timing-function",
-            "transition-timing-function",
-            "-webkit-transition-duration",
-            "-moz-transition-duration",
-            "-ms-transition-duration",
-            "-o-transition-duration",
-            "transition-duration",
-            "-webkit-transition-property",
-            "-moz-transition-property",
-            "-ms-transition-property",
-            "-o-transition-property",
-            "transition-property",
-            "-webkit-transform",
-            "-moz-transform",
-            "-ms-transform",
-            "-o-transform",
-            "transform",
-            "-webkit-transform-origin",
-            "-moz-transform-origin",
-            "-ms-transform-origin",
-            "-o-transform-origin",
-            "transform-origin",
-            "-webkit-animation",
-            "-moz-animation",
-            "-ms-animation",
-            "-o-animation",
-            "animation",
-            "-webkit-animation-name",
-            "-moz-animation-name",
-            "-ms-animation-name",
-            "-o-animation-name",
-            "animation-name",
-            "-webkit-animation-duration",
-            "-moz-animation-duration",
-            "-ms-animation-duration",
-            "-o-animation-duration",
-            "animation-duration",
-            "-webkit-animation-play-state",
-            "-moz-animation-play-state",
-            "-ms-animation-play-state",
-            "-o-animation-play-state",
-            "animation-play-state",
-            "-webkit-animation-timing-function",
-            "-moz-animation-timing-function",
-            "-ms-animation-timing-function",
-            "-o-animation-timing-function",
-            "animation-timing-function",
-            "-webkit-animation-delay",
-            "-moz-animation-delay",
-            "-ms-animation-delay",
-            "-o-animation-delay",
-            "animation-delay",
-            "-webkit-animation-iteration-count",
-            "-moz-animation-iteration-count",
-            "-ms-animation-iteration-count",
-            "-o-animation-iteration-count",
-            "animation-iteration-count",
-            "-webkit-animation-direction",
-            "-moz-animation-direction",
-            "-ms-animation-direction",
-            "-o-animation-direction",
-            "animation-direction",
-            "-webkit-text-orientation",
-            "-moz-text-orientation",
-            "-o-text-orientation",
-            "text-orientation",
-            "-ms-writing-mode",
-            "text-rendering",
-            "-webkit-font-smoothing",
-            "-moz-osx-font-smoothing",
-            "font-smoothing",
-            "direction",
-            "unicode-bidi"
-        ]
-    }
-</code></pre>
-
-
-
-
-
-
-
-
-
     </div>
   </div>
 
@@ -955,8 +109,8 @@ hsla(120, 100%, 50%, 1);</pre></div>
 		<div class="section" id="{{id}}" data-section="{{section}}" data-heading="{{heading}}">
 
             <div class="comment">
-                <h1>{{section}}{{#if heading}}/{{heading}}{{/if}}</h1>
-                {{{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}}

styleguide/theme.css

@@ -71,6 +71,11 @@
     box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.43);
 }
 
+.styleguide-list {
+    list-style: disc;
+    list-style-position: inside;
+}
+
 #styleguide-menu .submenu {
     display: none;
     background: rgba(0, 0, 0, 0.05);

tasks/sass.js

@@ -7,7 +7,7 @@ module.exports = {
     files: [{
       expand: true,
       src: [
-        'src/scss/**/*.scss'
+        'src/scss/entry.scss'
       ],
       dest: '.tmp',
       ext: '.css'