0.2.4

Merge pull request #201 from CartoDB/wrong-margin-in-paddings
Add Clearfix class
2018-06-18 13:23:55 +02:00 · 2018-06-18 13:23:35 +02:00 · 2018-06-18 13:19:56 +02:00 · 2018-06-14 12:59:13 +02:00 · 2018-06-14 12:21:53 +02:00 · 2018-06-14 12:21:39 +02:00
61 changed files with 1051 additions and 1475 deletions
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,7 @@
 cache: false
 language: node_js
 node_js:
-  - "4.1"
+  - "6.14.2"

 install:
  - npm install
--- a/Gulpfile.js
+++ b/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'));
 });
--- a/README.md
+++ b/README.md
@@ -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+ ✔ |
--- a/icon-font/template.jst.ejs
+++ b/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>
 <% }); %>
 ```
--- a/package.json
+++ b/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.4",
  "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"
+  }
 }
--- a/src/fonts/cartoIcon.eot
+++ b/src/fonts/cartoIcon.eot
--- a/src/fonts/cartoIcon.ttf
+++ b/src/fonts/cartoIcon.ttf
--- a/src/fonts/cartoIcon.woff
+++ b/src/fonts/cartoIcon.woff
--- a/src/scss/_cdb-icon-font.scss
+++ b/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>

 ```
--- a/src/scss/cdb-components/_avatars.scss
+++ b/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;
 }
--- a/src/scss/cdb-components/_boxes.scss
+++ b/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;
+}
--- a/src/scss/cdb-components/_buttons.scss
+++ b/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;
+    }
+  }
 }
--- a/src/scss/cdb-components/_colors.scss
+++ b/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;
 }
-
-
--- a/src/scss/cdb-components/_headers.scss
+++ b/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);
--- a/src/scss/cdb-components/_layer-selector.scss
+++ b/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;
+}
--- a/src/scss/cdb-components/_lists.scss
+++ b/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;
 }
-
--- a/src/scss/cdb-components/_loader.scss
+++ b/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);
  }
--- a/src/scss/cdb-components/_menu.scss
+++ b/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,16 +241,27 @@

  .CDB-NavMenu-link,
  .CDB-NavSubmenu-link {
+    margin-bottom: -1px;
    color: $cAltText;
+
+    &: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;
+    border-bottom: 2px solid $cMainLine;
    color: $cWhite;
  }

  .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
-    border-bottom: 1px solid $cMainLine;
+    border-bottom: 2px solid $cMainLine;
    color: $cWhite;
  }

@@ -227,6 +269,3 @@
    color: $cSecondaryText;
  }
 }
-
-
-
--- a/src/scss/cdb-components/_tags.scss
+++ b/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;
 }
-
--- a/src/scss/cdb-components/_tooltips.scss
+++ b/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;
--- a/src/scss/cdb-components/_typography.scss
+++ b/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;
 }
-
--- a/src/scss/cdb-components/forms/_checkbox.scss
+++ b/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;
+  }
 }
--- a/src/scss/cdb-components/forms/_dropdowns.scss
+++ b/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;
+    }
  }
 }
--- a/src/scss/cdb-components/forms/_inputs.scss
+++ b/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;
--- a/src/scss/cdb-components/forms/_legends.scss
+++ b/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%;
 }
-
--- a/src/scss/cdb-components/forms/_option-input.scss
+++ b/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;
-}
--- a/src/scss/cdb-components/forms/_radio.scss
+++ b/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;
+  }
+}
--- a/src/scss/cdb-components/forms/_selects.scss
+++ b/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,
--- a/src/scss/cdb-components/forms/_tabsForms.scss
+++ b/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;
 }
-
-
-
-
-
-
--- a/src/scss/cdb-components/forms/_textarea.scss
+++ b/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;
  }
--- a/src/scss/cdb-components/forms/_toggle.scss
+++ b/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;
 }
--- a/src/scss/cdb-components/forms/sliders.scss
+++ b/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;
-}
--- a/src/scss/cdb-components/shapes/_add.scss
+++ b/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;
  }
 }
-
-
-
--- a/src/scss/cdb-components/shapes/_arrow.scss
+++ b/src/scss/cdb-components/shapes/_arrow.scss
@@ -16,8 +16,6 @@ Description
 ```
 */

-@import '../../cdb-variables/colors';
-
 .CDB-Shape-Arrow {
  position: relative;
  width: 1px;
--- a/src/scss/cdb-components/shapes/_check-circle.scss
+++ b/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;
  }
 }
-
-
-
--- a/src/scss/cdb-components/shapes/_close.scss
+++ b/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;
  }
 }
-
--- a/src/scss/cdb-components/shapes/_dash.scss
+++ b/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;
  }
 }
-
-
-
--- a/src/scss/cdb-components/shapes/_dataset.scss
+++ b/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 {
--- a/src/scss/cdb-components/shapes/_dots.scss
+++ b/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;
--- a/src/scss/cdb-components/shapes/_error-circle.scss
+++ b/src/scss/cdb-components/shapes/_error-circle.scss
@@ -55,8 +55,6 @@ Description
 ```
 */

-@import '../../cdb-variables/colors';
-
 .CDB-Shape-CircleItem {
  width: 13px;
  height: 13px;
--- a/src/scss/cdb-components/shapes/_hamburguer.scss
+++ b/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 {
--- a/src/scss/cdb-components/shapes/_magnify.scss
+++ b/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);
--- a/src/scss/cdb-components/shapes/_move.scss
+++ b/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;
--- a/src/scss/cdb-components/shapes/_paragraph.scss
+++ b/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;
--- a/src/scss/cdb-components/shapes/_threePoints.scss
+++ b/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;
--- a/src/scss/cdb-components/shapes/_toogle-arrow.scss
+++ b/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;
--- a/src/scss/cdb-components/shapes/_type.scss
+++ b/src/scss/cdb-components/shapes/_type.scss
@@ -37,8 +37,6 @@ Description
 ```
 */

-@import '../../cdb-variables/colors';
-
 .CDB-Shape {
  width: 16px;
  height: 16px;
--- a/src/scss/cdb-utilities/defaults.css.scss
+++ b/src/scss/cdb-utilities/defaults.css.scss
@@ -1,8 +1,6 @@
 // Default classes
 // ----------------------------------------------

-@import '../cdb-variables/colors';
-
 body {
  color: $cMainText;
 }
@@ -15,4 +13,3 @@ a {
 a:hover {
  text-decoration: underline;
 }
-
--- a/src/scss/cdb-utilities/_fonts.scss
+++ b/src/scss/cdb-utilities/_fonts.scss
--- a/src/scss/cdb-utilities/_helpers.scss
+++ b/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() {
--- a/src/scss/cdb-utilities/vendor/_normalize.scss
+++ b/src/scss/cdb-utilities/vendor/_normalize.scss
--- a/src/scss/cdb-utilities/vendor/_reset.scss
+++ b/src/scss/cdb-utilities/vendor/_reset.scss
--- a/src/scss/cdb-variables/_colors.scss
+++ b/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;
--- a/src/scss/entry.scss
+++ b/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';
--- a/src/scss/vendor/perfect-scrollbar/_main.scss
+++ b/src/scss/vendor/perfect-scrollbar/_main.scss
@@ -0,0 +1,3 @@
+@import 'variables';
+@import 'mixins';
+@import 'themes';
--- a/src/scss/vendor/perfect-scrollbar/_mixins.scss
+++ b/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);
+      }
+    }
+  }
+}
--- a/src/scss/vendor/perfect-scrollbar/_themes.scss
+++ b/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);
+}
--- a/src/scss/vendor/perfect-scrollbar/_variables.scss
+++ b/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;
--- a/styleguide/_template.html
+++ b/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}}
--- a/styleguide/theme.css
+++ b/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);
--- a/tasks/sass.js
+++ b/tasks/sass.js
@@ -7,7 +7,7 @@ module.exports = {
    files: [{
      expand: true,
      src: [
-        'src/scss/**/*.scss'
+        'src/scss/entry.scss'
      ],
      dest: '.tmp',
      ext: '.css'
Author	SHA1	Message	Date
jesusbotella	b205ec0cc6	0.2.4	2018-06-18 13:23:55 +02:00
Jesús Botella	de813d3070	Merge pull request #201 from CartoDB/wrong-margin-in-paddings Add Clearfix class	2018-06-18 13:23:35 +02:00
jesusbotella	f567653da3	Fix Hound	2018-06-18 13:19:56 +02:00
jesusbotella	0fbd357b10	Add Clearfix class	2018-06-14 12:59:13 +02:00
jesusbotella	aef4e7f9f5	0.2.3	2018-06-14 12:21:53 +02:00
Jesús Botella	34c8e8c816	Merge pull request #200 from CartoDB/disable-pointerevents-in-disabled-buttons Disable pointer events in disabled buttons	2018-06-14 12:21:39 +02:00
jesusbotella	54ce151f5f	Disable pointer events when disabled button is active	2018-06-14 11:28:37 +02:00
jesusbotella	b225ce7f0c	Disable pointer events in disabled buttons	2018-06-14 10:52:47 +02:00
Rubén Moya	3913e9f932	Merge pull request #199 from CartoDB/add-no-padding-button Add noPadding helper to CDB-Button	2018-05-25 09:33:57 +02:00
rubenmoya	25b418781f	Add noPadding helper to CDB-Button	2018-05-25 09:20:46 +02:00
Jesús Botella	4cbe7053b7	Merge pull request #198 from CartoDB/add-left-xxl-margin Add XXL left space	2018-05-23 12:15:12 +02:00
jesusbotella	75e6927015	Merge branch 'master' into add-left-xxl-margin	2018-05-23 11:57:57 +02:00
Jesús Botella	261ac8a261	Merge pull request #197 from CartoDB/update-select-styles Update hover and focus styles to match input text	2018-05-21 16:19:55 +02:00
jesusbotella	78f686abd7	Update NodeJS version for Travis checks	2018-05-21 16:07:34 +02:00
jesusbotella	d338a1050c	Add XXL left space	2018-05-16 11:51:08 +02:00
IagoLast	72023bfb75	0.2.2	2018-05-10 16:09:32 +02:00
IagoLast	57424ee145	Fix version	2018-05-10 16:09:26 +02:00
IagoLast	87f3524b8a	Add release scripts	2018-05-10 16:08:51 +02:00
jesusbotella	aa5486a1a3	Update hover and focus styles to match input text	2018-05-07 09:53:13 +02:00
Elena Torró	c909567dc5	Merge pull request #196 from CartoDB/500onpremises-loading-circle Fix loading circle in IE11	2018-03-23 10:38:49 +01:00
elenatorro	5ee0e4fed2	Set default stroke to make it work in IE11	2018-03-22 19:05:32 +01:00
elenatorro	98f9a197e2	Fix spinner for IE11	2018-03-20 18:31:31 +01:00
Rubén Moya	7280b80c3d	Merge pull request #195 from CartoDB/fix-option-input-top Fix border position	2018-03-16 14:34:30 +01:00
rubenmoya	8d8a9ea2c1	Add top since position is absolute	2018-03-16 13:06:58 +01:00
Rubén Moya	580ba86680	Merge pull request #194 from CartoDB/fix-option-input-border Use fixed height in option-input border	2018-03-16 09:41:22 +01:00
rubenmoya	007bea85ad	Use baseSize instead of hardcoded value	2018-03-16 09:35:22 +01:00
rubenmoya	e7f9d245c6	Use fixed height in option-input border	2018-03-14 16:44:03 +01:00
Rubén Moya	30d7cf0f99	Merge pull request #193 from CartoDB/add-medium-left-space Add medium left space to utilities	2018-03-07 13:38:51 +01:00
rubenmoya	4c4676798c	Add medium left space to utilities	2018-03-06 17:07:08 +01:00
Rubén Moya	9bd80bea8b	Merge pull request #192 from CartoDB/fix-disabled-checked-checkbox Better color for disabled & checked checkbox	2018-02-08 13:01:04 +01:00
rubenmoya	85928ff84f	🐶	2018-02-08 10:54:02 +01:00
rubenmoya	95ea1a1a1f	Better color for disabled & checked checkbox	2018-02-08 10:48:44 +01:00
Carlos Matallín	d8c5b2fe6d	Merge pull request #191 from CartoDB/arrow-mini add arrow mini	2018-02-06 19:00:14 +01:00
Carlos Matallín	d6c9fb4e8a	arrow mini	2018-02-05 16:33:24 +01:00
Rubén Moya	93bce676d4	Merge pull request #190 from CartoDB/add-gray-color-tags Add is-gray to CDB-Tag	2018-02-05 12:54:31 +01:00
rubenmoya	59df5d293e	Add is-gray to CDB-Tag	2018-02-05 12:36:03 +01:00
Carlos Matallín	9ae61528c8	Merge pull request #189 from CartoDB/apply-touch-manipulation Apply touch-action: manipulation to menu links	2018-01-30 10:48:06 +01:00
jesusbotella	027de5e404	Apply touch-action: manipulation to menu links	2018-01-29 10:00:59 +01:00
Rubén Moya	3d032dcd78	Merge pull request #188 from CartoDB/fix-subnav-styles Fix CDB-NavSubmenu-item border bottom and selected color	2018-01-10 09:37:48 +01:00
rubenmoya	80f573ec30	Fix CDB-NavSubmenu-item border bottom and selected color	2018-01-10 09:04:35 +01:00
Rubén Moya	7fe3e06f3d	Merge pull request #187 from CartoDB/nav-submenu-disabled Add disabled state to NavSubmenu-item	2018-01-09 09:32:25 +01:00
rubenmoya	4b63aebd19	Add disabled state to NavSubmenu-item	2018-01-09 09:19:08 +01:00
Carlos Matallín	bb7a72e40b	Merge pull request #186 from CartoDB/13132-disable-interaction-when-dropdown-is-open Nothing else should be interactive when a dropdown is open	2017-12-26 10:50:53 +01:00
jesusbotella	95f9ea1d75	Add dropdown overlay style	2017-12-22 17:35:46 +01:00
Carlos Matallín	a79c4a921b	Merge pull request #183 from CartoDB/dashed-button-disabled Add disabled state to dashed button	2017-12-21 15:40:36 +01:00
rubenmoya	03eb466b5f	add disabled state to dashed button	2017-12-21 14:52:55 +01:00
Rubén Moya	28949016bf	Merge pull request #182 from CartoDB/reorder-scss-imports Load carto icon font after fonts	2017-12-19 12:50:52 +01:00
rubenmoya	41e4921565	Load carto icon font after fonts	2017-12-19 10:47:19 +01:00
Rubén Moya	cf62c686fb	Merge pull request #181 from CartoDB/13122-redesign-add-buttons Add dashed button	2017-12-13 18:50:31 +01:00
rubenmoya	5fa95c8c87	🐶	2017-12-13 16:36:04 +01:00
rubenmoya	884f64476e	Add u-lSpace--s helper	2017-12-13 15:59:41 +01:00
rubenmoya	1583d95207	Add dashed style to CDB-Button	2017-12-13 12:04:47 +01:00
Román Jiménez	20cfe25090	Merge pull request #179 from CartoDB/disabled-tab-dark-theme Improve disabled state on dark theme	2017-12-05 18:13:48 +01:00
Román Jiménez	2b46176477	Improve disabled state on dark theme	2017-12-05 18:07:45 +01:00
Carlos Matallín	32824850a2	Merge pull request #178 from CartoDB/13095-tooltips Add tooltip on Builder actions	2017-12-04 12:24:38 +01:00
Carlos Matallín	04c676dc1f	hover paddings	2017-12-01 18:03:15 +01:00
Carlos Matallín	d2d64a87cf	Merge pull request #177 from CartoDB/13074-hover-elements Add hover to UI Elements	2017-11-29 10:43:33 +01:00
Carlos Matallín	77bb532459	active > hover	2017-11-28 13:34:19 +01:00
rubenmoya	8a101f0ea6	Fix problems with option-input component	2017-11-27 15:12:30 +01:00
rubenmoya	1df6cb9182	Fix hover/focus color difference in CDB-TextInput	2017-11-27 11:00:40 +01:00
rubenmoya	38ed394be3	Fix border-radius in CDB-OptionInput-item	2017-11-27 10:38:36 +01:00
rubenmoya	7e040de9a8	Add :hover to .u-actionTextColor	2017-11-22 12:32:38 +01:00
rubenmoya	8d29f7af3e	Add cBlackHover color	2017-11-22 12:22:36 +01:00
rubenmoya	b8393c93db	🐶	2017-11-22 11:47:04 +01:00
rubenmoya	7b082df82f	Add hover effects to _toggle.scss	2017-11-21 10:34:45 +01:00
rubenmoya	ed3e5c0e3c	Remove flex mixins in _drodowns.scss	2017-11-21 10:15:07 +01:00
rubenmoya	2d560e8dec	Boyscouy _dropdowns.scss	2017-11-21 10:07:54 +01:00
rubenmoya	36f9e90883	Use $cBlue in _dropdown instead of green	2017-11-21 10:06:47 +01:00
rubenmoya	12eb1a3258	Use --border modifier instead of :not	2017-11-21 10:00:49 +01:00
rubenmoya	d81979530d	Refactor _option-input to allow independent borders	2017-11-21 09:42:54 +01:00
rubenmoya	6862ba81b3	Boyscout _radio.scss	2017-11-20 16:35:43 +01:00
rubenmoya	5dd6097514	Change hover color in _radio.scss	2017-11-20 16:35:19 +01:00
rubenmoya	3b0fb9f444	Boyscout _checkbox.scss	2017-11-20 16:35:01 +01:00
rubenmoya	6169a7deb9	Change hover color for checkbox	2017-11-20 16:28:06 +01:00
rubenmoya	aed2e0b394	Boyscout _inputs.scss	2017-11-20 16:19:24 +01:00
rubenmoya	e0e0e7cf1c	Change hover color for CDB-InputText	2017-11-20 16:18:52 +01:00
rubenmoya	7a00c4513d	Use cblueHover	2017-11-20 16:18:32 +01:00
rubenmoya	6192c8e27c	Add $cBlueHover color	2017-11-20 16:18:08 +01:00
rubenmoya	433c238a93	Boyscout _menu.scss	2017-11-20 15:00:07 +01:00
rubenmoya	8cfc04c859	Add hover effects to _menu.scss	2017-11-20 14:53:38 +01:00
rubenmoya	c30f62fe51	Use 8% darken instead of 16%	2017-11-20 14:43:54 +01:00
rubenmoya	0208b2485b	Remove unnecessary mixins in _buttons.scss	2017-11-20 13:08:27 +01:00
rubenmoya	f649676743	Fix border-radius issue in NavSubmenu	2017-11-20 12:08:08 +01:00
rubenmoya	3d4c8a77ff	Cleanup _buttons.scss	2017-11-20 11:30:30 +01:00
rubenmoya	e126810b21	Add hover effects to button using box-shadow	2017-11-20 11:28:13 +01:00
Román Jiménez	af9d25b729	Merge pull request #175 from CartoDB/is-disabled-navmenu Add is-disabled state to CDB-NavMenu-item	2017-11-17 13:10:59 +01:00
rubenmoya	fa42ee7c36	Fix incorrect cursor property	2017-11-17 12:52:56 +01:00
rubenmoya	0edbe85916	Add is-disabled state to CDB-NavMenu-item	2017-11-17 12:19:31 +01:00
Javier Torres	79b679ebdd	Merge pull request #174 from CartoDB/whiteBgHelper Add White BG button	2017-11-14 11:45:37 +01:00
Javier Torres	57290ac4a9	Add White BG button	2017-11-14 11:38:19 +01:00
Rubén Moya	ca650ea17b	Merge pull request #173 from CartoDB/fix-border-radius-navlink Override default border-radius button	2017-10-23 09:40:44 +02:00
rubenmoya	7555eaf0f1	Override default border-radius button	2017-10-23 09:36:33 +02:00
Buti	6bad8afd8a	Merge pull request #171 from CartoDB/12184-unify-scrollbars Unify scrollbars	2017-10-02 09:31:53 +02:00
Jesús Arroyo Torrens	3a7cc73b4d	Merge branch 'master' into 12184-unify-scrollbars	2017-09-29 10:28:11 +02:00
Jesús Arroyo Torrens	ed70ee8e10	Fix hound	2017-09-27 18:16:55 +02:00
Jesús Arroyo Torrens	f39e4da135	Add 8px active zone in scrollbar	2017-09-27 17:34:01 +02:00
Jesús Arroyo Torrens	fb62dfda07	Add rail-size hover in scrollbar	2017-09-27 16:09:08 +02:00
Jesús Arroyo Torrens	4339cd0a69	Show default cursor in scrollbars	2017-09-27 15:32:58 +02:00
Jesús Arroyo Torrens	113141d86d	Update perfect scrollbar-y size	2017-09-22 14:17:43 +02:00
Jesús Arroyo Torrens	13966110bf	Update perfect scrollbar colors	2017-09-22 13:59:07 +02:00
Jesús Arroyo Torrens	ddd59386c3	Update perfect scrollbar size	2017-09-22 13:15:58 +02:00
Jesús Arroyo Torrens	d260141073	Update perfect scrollbar style	2017-09-22 12:37:02 +02:00
Javier Álvarez Medina	386d102872	Merge pull request #169 from CartoDB/fix-blue-color Fix global blue	2017-08-23 15:57:09 +02:00
Jesús Arroyo Torrens	e9c0e08a14	Fix global blue	2017-08-22 10:31:23 +02:00
Carlos Matallín	47d363a296	Merge pull request #166 from CartoDB/9956-widgets-color move layerselector from builder to cartoassets	2017-07-04 15:48:17 +02:00
Carlos Matallín	15ce80e448	move layerselector from builder to cartoassets	2017-06-21 14:20:36 +02:00
Javier Álvarez Medina	dcff2a2215	Merge pull request #165 from CartoDB/fix-big-spinner-size Apply width/height to .CDB-LoaderIcon--big	2017-06-01 08:54:31 +02:00
rubenmoya	b3a6e861d6	apply width/height to .CDB-LoaderIcon--big	2017-05-30 12:11:35 +02:00
Javier Álvarez Medina	f8529d15a5	Merge pull request #162 from CartoDB/entry-point Chaning way to load CartoAssets stylesheets	2017-05-25 16:47:23 +02:00
Javier Álvarez Medina	f3c9f3c676	Copy all perfect-scroll stylesheets to a vendor library and then use it as convinience	2017-05-24 18:40:19 +02:00
Javier Álvarez Medina	f4e26d6aaa	Requiring perfect-scrollbar styles	2017-05-24 14:20:45 +02:00
Javier Álvarez Medina	d1963772b3	Removing perfect-scrollbar	2017-05-24 13:46:24 +02:00
Javier Álvarez Medina	72456d8a0c	not adding finally pefect-scroll styles	2017-05-24 13:29:41 +02:00
Javier Álvarez Medina	14d23e9b35	Adding perfect-scroll styles to cartoassets	2017-05-24 13:17:36 +02:00
Javier Álvarez Medina	3012203185	Small touches	2017-05-24 13:07:21 +02:00
Javier Álvarez Medina	a41763c4f2	Renaming all files to _whatever in order to avoid be compiled in other projects, only the entry one, thanks to @nobuti	2017-05-24 12:50:42 +02:00
Javier Álvarez Medina	007b851962	Chaning way to load cartoassets stylesheets	2017-05-23 17:54:22 +02:00
piensaenpixel	bbf8a2ba82	add width and height	2017-05-18 18:46:29 +02:00
piensaenpixel	6da2097d5d	Merge pull request #161 from CartoDB/update-cartoAssets Update carto assets	2017-05-10 18:14:52 +02:00
piensaenpixel	b5be9eb869	remove console.log	2017-05-10 11:55:51 +02:00
piensaenpixel	5ec8402e70	add states	2017-05-10 11:43:15 +02:00
piensaenpixel	fb7c98c04b	fix loading state	2017-05-10 11:28:38 +02:00
piensaenpixel	8060bfe0b2	update cartoassets with buttons and colors	2017-05-09 18:17:30 +02:00
xavijam	0044cebbd9	Touched theme	2017-05-05 12:31:16 +02:00
xavijam	154d451f51	README updated	2017-05-05 11:20:42 +02:00
piensaenpixel	c00ebeea7c	Merge pull request #160 from CartoDB/change-loader change loader	2017-03-08 10:56:45 +01:00
piensaenpixel	9de6ac6f4b	change loader	2017-03-07 12:14:22 +01:00
Buti	c989154ff5	Merge pull request #159 from CartoDB/disabled-textarea Added is-disabled class to textarea.	2017-02-17 18:22:55 +01:00
nobuti	eed33d84f2	Added is-disabled class to textarea for compatibility with enabler component.	2017-02-17 18:13:44 +01:00
xavijam	86fa520b7f	Silly mistake	2017-01-18 11:04:47 +01:00
Javier Álvarez Medina	d206e22b7f	Merge pull request #158 from CartoDB/input-has-icon Adding has-icon class for text input	2017-01-18 10:57:29 +01:00
xavijam	6a941f43f7	Using mainSize variable	2017-01-18 10:54:13 +01:00
xavijam	9a5a0912ef	Adding has-icon class for text input	2017-01-18 10:52:44 +01:00
piensaenpixel	0155c67d3a	Merge pull request #157 from CartoDB/116-style-checks fix 156	2017-01-11 08:03:53 +01:00
piensaenpixel	911a20354a	fix inputs	2017-01-10 18:06:25 +01:00
piensaenpixel	b95da864bc	fix 156	2017-01-10 17:23:36 +01:00
piensaenpixel	b631fd6509	Merge pull request #155 from CartoDB/add-min-height add min-height	2016-11-30 18:20:49 +01:00
piensaenpixel	1b4db1225f	add min-height	2016-11-30 13:49:54 +01:00
Carlos Matallín	40b08fbef5	Merge pull request #153 from CartoDB/10137-form-input-styles forms: input styles	2016-10-31 17:01:44 +01:00
Carlos Matallín	39ccae7217	forms: input styles	2016-10-31 16:51:49 +01:00
Carlos Matallín	e75ab01844	forms: input styles	2016-10-31 15:09:22 +01:00
piensaenpixel	2fdf2c7096	Merge pull request #152 from CartoDB/fix-small-magnify minor fix magnify-small	2016-10-25 17:43:50 +02:00
piensaenpixel	807ae7570e	minor fix magnify-small	2016-10-24 17:25:50 +02:00
piensaenpixel	ebc1e5b423	Merge pull request #151 from CartoDB/add-blue-loader add blue loader	2016-10-14 12:09:27 +02:00
piensaenpixel	05dca4da71	add blue loader	2016-10-14 12:06:20 +02:00
piensaenpixel	4e9c6706d1	Merge pull request #150 from CartoDB/fix-forms-option Remove point in input and add line	2016-09-27 16:27:38 +02:00
piensaenpixel	4cc93a2c9a	bump package json	2016-09-27 16:21:07 +02:00
piensaenpixel	742af51642	fix options	2016-09-27 16:20:08 +02:00
piensaenpixel	7751766940	Merge branch 'master' of github.com:CartoDB/CartoAssets	2016-09-27 13:24:57 +02:00
piensaenpixel	510900f130	upadte package json	2016-09-27 13:24:45 +02:00
María Checa	f40e72e5ee	Merge pull request #149 from CartoDB/148-remove_after_content_character Replaced `CDB-OptionInput-item:after` content character	2016-09-27 12:39:23 +02:00
piensaenpixel	0bcaa5564d	add bar	2016-09-27 12:35:33 +02:00
María Checa	9c5a86ca5f	Style fixes	2016-09-22 16:26:23 +02:00
María Checa	d0374d10d8	Replaced `CDB-OptionInput-item:after` content character Used dimensions and background color to take the same result without character in the content, avoiding characters problems.	2016-09-22 16:24:04 +02:00
María Checa	39f1f625c2	Merge pull request #147 from CartoDB/82-remove_form_slider_component Removed slider component	2016-09-22 15:38:16 +02:00
María Checa	3f73a923a0	Removed slider component This component is no longer used in the builder as it has been replaced by a new JS component.	2016-09-20 15:31:21 +02:00