Merge pull request #192 from CartoDB/fix-disabled-checked-checkbox

Better color for disabled & checked checkbox
🐶
2018-02-08 13:01:04 +01:00 · 2018-02-08 10:54:02 +01:00 · 2018-02-08 10:48:44 +01:00 · 2018-02-06 19:00:14 +01:00 · 2018-02-05 16:33:24 +01:00 · 2018-02-05 12:54:31 +01:00
57 changed files with 753 additions and 434 deletions
--- 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/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.34",
+  "description": "Share frontend assets between different CARTO repositories",
+  "version": "0.2.00",
  "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,13 +40,15 @@
    "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",
--- 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
@@ -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
@@ -159,16 +159,10 @@ Layout Component:
 ```
 */

-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
-
 .CDB-Button {
-  @include transition(background, 300ms);
  position: relative;
  padding: $baseSize $baseSize + 12;
-  border: 1px solid transparent;
+  transition: background, 300ms;
  border-radius: $baseSize / 2;
  cursor: pointer;
  box-sizing: border-box;
@@ -177,14 +171,14 @@ Layout Component:
  .CDB-Button-Text {
    display: block;
  }
+
  &.is-disabled {
-    cursor: default;
    opacity: 0.24;
+    cursor: default;
  }
 }

 .CDB-Button--loading {
-
  .CDB-Button-loader {
    position: absolute;
    top: 50%;
@@ -194,9 +188,11 @@ Layout Component:
    opacity: 0;
    z-index: 10;
  }
+
  .CDB-Button-Text {
-    @include transition(all 600ms);
+    transition: all 600ms;
  }
+
  &.is-loading {
    cursor: default;

@@ -205,6 +201,7 @@ Layout Component:
      animation-duration: 600ms;
      animation-fill-mode: forwards;
    }
+
    .CDB-Button-Text {
      opacity: 0;
    }
@@ -232,6 +229,10 @@ Layout Component:
  padding: $baseSize + 3 $baseSize + 12;
 }

+.CDB-Button--wide {
+  width: 100%;
+}
+
 .CDB-Button--icon {
  padding: 7px 9px;
 }
@@ -240,26 +241,20 @@ Layout Component:
  background: $cBlue;
  color: $cWhite;

-  &:hover {
-    background: darken($cBlue, 8%);
-  }
+  &:hover,
  &:active {
-    background: darken($cBlue, 16%);
+    background: $cBlueHover;
  }

  &.is-loading {
-    &:hover {
-      background: $cBlue;
-    }
+    &:hover,
    &:active {
      background: $cBlue;
    }
  }

  &.is-disabled {
-    &:hover {
-      background: $cBlue;
-    }
+    &:hover,
    &:active {
      background: $cBlue;
    }
@@ -270,17 +265,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;
    }
@@ -293,19 +284,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;
    }
  }
 }
@@ -416,12 +419,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;
@@ -430,7 +435,9 @@ Layout Component:
  &.is-disabled {
    &:hover {
      background: transparent;
+      box-shadow: inset 0 0 0 1px $cBlue;
    }
+
    &:active {
      background: transparent;
    }
@@ -439,36 +446,40 @@ Layout Component:
  &.is-loading {
    cursor: default;

-    &:hover {
-      background: none;
-      color: $cBlue;
-    }
+    &: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;
@@ -478,14 +489,10 @@ Layout Component:
  &.is-loading {
    cursor: default;

-    &:hover {
-      background: none;
-      color: $cWhite;
-    }
+    &: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,10 +12,6 @@ This is the generic loader for widgets, maps, components, ...
 ```
 */

-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/colors';
-@import '../cdb-variables/sizes';
-
 .CDB-Loader {
  position: absolute;
  top: 0;
@@ -104,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;
@@ -111,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;
--- 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
@@ -20,11 +20,6 @@
 ```
 */

-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/mixins';
-
-
 .CDB-Checkbox {
  position: absolute;
  width: $baseSize * 2;
@@ -71,7 +66,7 @@
 }

 .CDB-Checkbox:checked + .CDB-Checkbox-face {
-  @include transition(background, 300ms);
+  transition: background 300ms;
  border: 1px solid $cBlue;
  background: $cBlue;

@@ -83,6 +78,7 @@

 .CDB-Checkbox:checked:hover + .CDB-Checkbox-face {
  border: 1px solid $cBlue;
+
  &::before,
  &::after {
    background: $cWhite;
@@ -90,7 +86,8 @@
 }

 .CDB-Checkbox:hover + .CDB-Checkbox-face {
-  border: 1px solid $cHoverLine;
+  border: 1px solid $cBlueHover;
+
  &::before,
  &::after {
    background: $cHoverLine;
@@ -98,6 +95,7 @@
 }
 .CDB-Checkbox:active + .CDB-Checkbox-face {
  border: 1px solid $cBlue;
+
  &::before,
  &::after {
    background: $cBlue;
@@ -107,9 +105,20 @@
 .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,10 +11,6 @@
 ```
 */

-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/helpers';
-
 .CDB-InputText {
  width: 100%;
  min-height: 32px;
@@ -28,36 +24,45 @@
  &.is-cursor {
    cursor: pointer;
  }
+
  &.is-empty {
    color: $cHintText;
  }
+
  &.is-number {
    color: darken($cHighlight, 16%);
  }
+
  &.is-null {
    color: $cHintText;
    font-style: italic;
  }
+
  &:hover {
-    border: 1px solid $cHoverLine;
+    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
@@ -98,81 +98,115 @@
 ```
 */

-@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 {
-    width: 1px;
-    height: 100%;
-    margin-right: $baseSize;
-    background-color: $cSecondaryLine;
-    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;
+      left: -1px;
+      width: 1px;
+      height: calc(100% + 2px);
+      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%;
-  margin-left: -$baseSize;
-  padding: 0 $baseSize + 2;
-  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:first-child .CDB-OptionInput-content {
-  border-bottom-left-radius: 4px;
-}
-.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;
@@ -61,7 +56,7 @@
 }

 .CDB-Radio:checked + .CDB-Radio-face {
-  @include transition(background, 300ms);
+  transition: background 300ms;
  border: 1px solid $cBlue;
  background: $cBlue;

@@ -84,7 +79,8 @@
 }

 .CDB-Radio:hover + .CDB-Radio-face {
-  border: 1px solid $cHoverLine;
+  border: 1px solid $cBlueHover;
+
  &::before {
    background: $cHoverLine;
  }
@@ -106,7 +102,3 @@
    background: $cBlue;
  }
 }
-
-
-
-
--- a/src/scss/cdb-components/forms/_selects.scss
+++ b/src/scss/cdb-components/forms/_selects.scss
@@ -55,10 +55,6 @@
 ```
 */

-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/helpers';
-
 .CDB-Select {
  position: relative;
 }
--- 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;
--- 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/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;
--- 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,6 +35,9 @@
 .u-lSpace {
  margin-left: 4px;
 }
+.u-lSpace--s {
+  margin-left: 2px;
+}
 .u-lSpace--xl {
  margin-left: 12px;
 }
@@ -54,6 +54,10 @@

 .u-actionTextColor {
  color: $cBlue;
+
+  &:hover {
+    color: $cBlueHover;
+  }
 }
 .u-mainTextColor {
  color: $cMainText;
--- 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: 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,8 +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}}
@@ -124,6 +130,3 @@
 		</div>
 	{{/each}}
 </div>
-
-
-
--- 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
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