Merge pull request #162 from CartoDB/entry-point

Chaning way to load CartoAssets stylesheets

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() {
+String.prototype.toCamelCase = function () {
-  return this.replace(/^([A-Z])|\s(\w)/g, function(match, p1, p2, offset) {
+  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'));
 });

icon-font/template.jst.ejs

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

package.json

@@ -1,17 +1,12 @@
 {
   "name": "cartoassets",
-  "description": "Share frontend assets between different CartoDB repositories",
+  "description": "Share frontend assets between different CARTO repositories",
-  "version": "0.1.34",
+  "version": "0.2.00",
   "homepage": "https://github.com/cartodb/CartoAssets",
   "author": {
-    "name": "CartoDB",
+    "name": "CARTO",
-    "email": "contact@cartodb.com"
+    "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",

src/scss/_cdb-icon-font.scss

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

src/scss/cdb-components/_avatars.scss

@@ -22,9 +22,6 @@
 ```
 */
 
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
 .CDB-AvatarList {
   padding-left: 12px;
 }

src/scss/cdb-components/_boxes.scss

@@ -10,10 +10,6 @@
 ```
 */
 
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
 .CDB-Box-modal {
   min-width: 160px;
   border: 1px solid $cMainLine;

src/scss/cdb-components/_buttons.scss

@@ -159,11 +159,6 @@ Layout Component:
 ```
 */
 
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
-
 .CDB-Button {
   @include transition(background, 300ms);
   position: relative;

src/scss/cdb-components/_colors.scss

@@ -15,9 +15,6 @@
 ```
 */
 
-@import '../cdb-variables/colors';
-
-
 .Color-Blue {
   background: $cBlue;
 }
@@ -125,5 +122,3 @@
 .Color-Error {
   background: $cError;
 }
-
-

src/scss/cdb-components/_headers.scss

@@ -166,10 +166,6 @@
 ```
 */
 
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
 .CDB-HeaderInfo {
   @include display-flex();
   @include align-items(flex-start);

src/scss/cdb-components/_lists.scss

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

src/scss/cdb-components/_loader.scss

@@ -12,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;

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;
@@ -227,6 +224,3 @@
     color: $cSecondaryText;
   }
 }
-
-
-

src/scss/cdb-components/_tags.scss

@@ -23,11 +23,6 @@
 ```
 */
 
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
-
 .CDB-Tag {
   padding: 0 3px;
   border: 1px solid $cBlue;
@@ -133,4 +128,3 @@
   background: rgba(0, 0, 0, 0.04);
   text-transform: uppercase;
 }
-

src/scss/cdb-components/_tooltips.scss

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

src/scss/cdb-components/_typography.scss

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

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

@@ -20,11 +20,6 @@
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/mixins';
-
-
 .CDB-Checkbox {
   position: absolute;
   width: $baseSize * 2;
@@ -112,4 +107,3 @@
     opacity: 0;
   }
 }
-

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

@@ -109,10 +109,6 @@
 ```
 */
 
-@import '../../cdb-utilities/mixins';
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-
 .CDB-DropdownContainer {
   position: relative;
   height: 250px;

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;

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

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

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

@@ -98,10 +98,6 @@
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/mixins';
-
 .CDB-OptionInput {
   width: 100%;
   height: $baseSize * 4;

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;
@@ -106,7 +101,3 @@
     background: $cBlue;
   }
 }
-
-
-
-

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

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

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

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

@@ -11,10 +11,6 @@
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/helpers';
-
 .CDB-Textarea {
   width: 100%;
   padding: 7px 8px 6px;

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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -44,8 +44,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-Shape-magnify {
   display: block;
   position: relative;

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

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

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

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

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

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

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

@@ -83,8 +83,6 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-ArrowToogle {
   position: relative;
   height: 100%;

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

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

src/scss/cdb-utilities/_defaults.scss

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

src/scss/cdb-utilities/_helpers.scss

@@ -1,9 +1,6 @@
 // Helper classes
 // ----------------------------------------------
 
-@import './mixins';
-@import '../cdb-variables/colors';
-
 /* Margins */
 .u-tSpace {
   margin-top: 4px;

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-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-icon-font';

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

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

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

@@ -0,0 +1,128 @@
+@mixin scrollbar-rail-default($theme) {
+  display: none;
+  position: absolute; /* please don't change 'position' */
+  opacity: map_get($theme, rail-default-opacity);
+  transition: background-color .2s linear, opacity .2s linear;
+}
+
+@mixin scrollbar-rail-hover($theme) {
+  background-color: map_get($theme, rail-hover-bg);
+  opacity: map_get($theme, rail-hover-opacity);
+}
+
+@mixin scrollbar-default($theme) {
+  position: absolute; /* please don't change 'position' */
+  background-color: map_get($theme, bar-container-hover-bg);
+  border-radius: map_get($theme, border-radius);
+  transition: background-color .2s linear, height .2s linear, width .2s ease-in-out,
+              border-radius .2s ease-in-out;
+}
+
+@mixin scrollbar-hover($theme) {
+  background-color: map_get($theme, bar-hover-bg);
+}
+
+@mixin in-scrolling($theme) {
+  &.ps-in-scrolling {
+    &.ps-x > .ps-scrollbar-x-rail {
+      @include scrollbar-rail-hover($theme);
+      > .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);
+      > .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,
+  &.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+    background-color: map_get($theme, bar-bg);
+  }
+
+  @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 {
+      > .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 {
+      > .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);
+
+      > .ps-scrollbar-x {
+        @include scrollbar-hover($theme);
+      }
+    }
+
+    > .ps-scrollbar-y-rail:hover {
+      @include scrollbar-rail-hover($theme);
+
+      > .ps-scrollbar-y {
+        @include scrollbar-hover($theme);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+$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-container-hover-bg: $ps-bar-container-hover-bg,
+  bar-hover-bg: $ps-bar-hover-bg,
+  rail-hover-bg: $ps-rail-hover-bg,
+  scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom,
+  scrollbar-x-rail-height: $ps-scrollbar-x-rail-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-right: $ps-scrollbar-y-right,
+  scrollbar-y-width: $ps-scrollbar-y-width,
+  scrollbar-y-hover-width: $ps-scrollbar-y-hover-width,
+);
+
+// Default theme
+.ps-container {
+  @include ps-container($ps-theme-default);
+}

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

@@ -0,0 +1,24 @@
+// Colors
+$ps-border-radius: 6px !default;
+
+$ps-rail-default-opacity: 0 !default;
+$ps-rail-container-hover-opacity: 0.6 !default;
+$ps-rail-hover-opacity: 0.9 !default;
+
+$ps-bar-bg: transparent !default;
+$ps-bar-container-hover-bg: #aaa !default;
+$ps-bar-hover-bg: #999 !default;
+$ps-rail-hover-bg: #eee !default;
+
+// Sizes
+$ps-scrollbar-x-rail-bottom: 0px !default;
+$ps-scrollbar-x-rail-height: 15px !default;
+$ps-scrollbar-x-bottom: 2px !default;
+$ps-scrollbar-x-height: 6px !default;
+$ps-scrollbar-x-hover-height: 11px !default;
+
+$ps-scrollbar-y-rail-right: 0 !default;
+$ps-scrollbar-y-rail-width: 15px !default;
+$ps-scrollbar-y-right: 2px !default;
+$ps-scrollbar-y-width: 6px !default;
+$ps-scrollbar-y-hover-width: 11px !default;

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>
-
-
-

tasks/sass.js

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