Merge branch 'master' into add-left-xxl-margin

Update hover and focus styles to match input text

.travis.yml

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

Gulpfile.js

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

README.md

@@ -4,6 +4,7 @@
 
 ### Installation
 As easy as:
+- ```npm install --global grunt-cli``` [Grunt installation](http://gruntjs.com/getting-started)
 - ```npm install --global gulp-cli``` [Gulp installation](https://github.com/gulpjs/gulp)
 - ```npm install -g markdown-styleguide-generator``` [StyleGenerator installation](https://www.npmjs.com/package/markdown-styleguide-generator#install)
 - ```npm install```
@@ -40,6 +41,6 @@ Just run this command:
 
 ### Browser support
 
-![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)
+![Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/archive/chrome_12-48/chrome_12-48_48x48.png) | ![Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/archive/firefox_1.5-3/firefox_1.5-3_48x48.png) | ![IE](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/edge-tile/edge-tile_48x48.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/opera/opera_48x48.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/safari/safari_48x48.png)
 --- | --- | --- | --- | --- |
-31+ ✔ | 38+ ✔ | 10+ ✔ | 31+ ✔ | 8+ ✔ |
+31+ ✔ | 38+ ✔ | 11+ ✔ | 31+ ✔ | 8+ ✔ |

icon-font/svgs/icon-font_105_View.svg

@@ -1,14 +1,14 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="500px" height="309px" viewBox="0 0 500 309" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.1 (29687) - http://www.bohemiancoding.com/sketch -->
     <title>icon-font_105_View</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-9000.000000, -10104.000000)" fill="#000000">
-            <g id="icon-font_105_View" sketch:type="MSLayerGroup" transform="translate(9000.000000, 10104.000000)">
-                <path d="M253.581879,308.61402 C312.962752,308.61402 370.768722,280.970482 427.225327,234.264991 C447.101103,217.822134 464.002246,201.524318 483.377535,181.181477 C485.568088,178.881533 492.073436,172.004723 492.078081,171.999827 C494.933975,168.989784 496.758569,167.101346 498.204136,165.671731 C499.511808,164.37849 500.384881,163.601664 500.441945,163.564064 C495.349704,166.919331 484.716873,165.896878 484.716873,154.524024 C484.716873,143.151171 495.349704,142.128718 500.441945,145.483984 C500.384881,145.446384 499.511808,144.669559 498.204136,143.376317 C496.758569,141.946702 494.933975,140.058264 492.078081,137.048221 C492.073436,137.043326 485.568088,130.166515 483.377535,127.866571 C464.002246,107.523731 447.101103,91.2259143 427.225327,74.7830573 C370.768722,28.0775667 312.962752,0.434027778 253.581879,0.434027778 C191.731723,0.434027778 130.807245,26.8363188 75.5661959,70.1970001 C35.8951124,101.336257 0.434027778,141.650659 0.434027778,154.524024 C0.434027778,167.397389 35.8951124,207.711792 75.5661959,238.851048 C130.807245,282.211729 191.731723,308.61402 253.581879,308.61402 L253.581879,308.61402 Z M89.1578777,221.535389 C55.2818134,194.944851 22.4468844,157.616028 22.4468844,154.524024 C22.4468844,151.43202 55.2818134,114.103197 89.1578777,87.5126589 C140.855436,46.9333905 197.359154,22.4468844 253.581879,22.4468844 C306.883849,22.4468844 360.314194,47.9979447 413.19371,91.7441773 C432.282846,107.536261 448.611152,123.281689 467.437643,143.048326 C469.597313,145.315844 476.081558,152.170347 476.109114,152.199391 C479.117168,155.369807 481.067363,157.38824 482.725294,159.027876 C485.030509,161.307652 486.691463,162.785505 488.330451,163.86543 C490.742582,165.454779 490.31849,170.118336 493.786291,169.784872 C497.263225,169.45053 499.302153,162.372959 499.607582,155.278924 C499.914506,148.150166 498.470919,141.004783 494.976966,140.668805 C491.509166,140.335341 490.742582,143.59327 488.330451,145.182618 C486.691463,146.262543 485.030509,147.740396 482.725294,150.020172 C481.067363,151.659808 479.117168,153.678241 476.109114,156.848657 C476.081558,156.877701 469.597313,163.732204 467.437643,165.999722 C448.611152,185.766359 432.282846,201.511787 413.19371,217.303871 C360.314194,261.050104 306.883849,286.601164 253.581879,286.601164 C197.359154,286.601164 140.855436,262.114658 89.1578777,221.535389 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-                <path d="M250,60.7910156 C200.300481,60.7910156 159.855769,101.867676 159.855769,152.34375 C159.855769,202.840169 200.300481,243.896484 250,243.896484 C299.699519,243.896484 340.144231,202.840169 340.144231,152.34375 C340.144231,101.867676 299.699519,60.7910156 250,60.7910156 L250,60.7910156 Z M250,223.551432 C211.338141,223.551432 179.887821,191.609701 179.887821,152.34375 C179.887821,113.077799 211.338141,81.1360677 250,81.1360677 C288.661859,81.1360677 320.112179,113.077799 320.112179,152.34375 C320.112179,191.609701 288.661859,223.551432 250,223.551432 L250,223.551432 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-9000.000000, -10001.000000)" fill="#000000">
+            <g id="icon-font_105_View" transform="translate(9000.000000, 10001.000000)">
+                <path d="M471.196067,279.388706 C468.659287,277.229701 466.450984,274.924387 463.701023,271.840781 C461.732497,269.633419 459.572474,267.098603 456.291285,263.177454 C456.234848,263.11001 449.592637,255.148769 447.409623,252.549977 C428.736548,230.320422 412.662967,212.746142 394.043132,195.280662 C344.775461,149.067386 296.239067,122.750167 250.99304,122.750167 C202.046004,122.750167 150.507322,148.074304 102.417295,190.874005 C83.9404874,207.318201 67.2191013,225.348227 54.2710956,242.038469 C49.1796636,248.601428 45.0628096,254.478581 42.4195884,258.812878 C41.546218,260.245013 41.0017054,261.236856 40.8804115,261.498373 C42.4533613,258.106995 43.4872396,254.89797 43.4872396,247.833667 C43.4872396,240.769365 42.4533613,237.560339 40.8804115,234.168962 C41.0017054,234.430479 41.546218,235.422322 42.4195884,236.854456 C45.0628096,241.188754 49.1796636,247.065906 54.2710956,253.628865 C67.2191013,270.319107 83.9404874,288.349133 102.417295,304.79333 C150.507322,347.593031 202.046004,372.917168 250.99304,372.917168 C296.239067,372.917168 344.775461,346.599949 394.043132,300.386673 C412.662967,282.921192 428.736548,265.346913 447.409623,243.117358 C449.592637,240.518566 456.234848,232.557325 456.291285,232.48988 C459.572474,228.568732 461.732497,226.033916 463.701023,223.826554 C466.450984,220.742947 468.659287,218.437634 471.196067,216.278628 C489.585469,237.69567 500,251.756082 500,247.833667 C500,243.911252 489.585468,257.971665 471.196067,279.388706 L471.196067,279.388706 Z M471.11251,278.324435 L471.11251,278.324435 C429.638743,326.768781 346.187297,414.667335 249.997012,414.667335 C112.474265,414.667335 0.990051674,260.667026 0.990051674,247.833667 C0.990051674,235.000308 112.474265,81 249.997012,81 C346.187297,81 429.638743,168.898554 471.11251,217.3429 C467.601977,220.514627 464.627661,224.296843 462.356919,228.549318 C458.659304,235.473933 457.502812,241.748232 457.502812,247.833667 C457.502812,253.919103 458.659304,260.193402 462.356919,267.118017 C464.627661,271.370492 467.601977,275.152708 471.11251,278.324435 L471.11251,278.324435 Z" id="Oval-225"></path>
+                <path d="M210.754843,247.833667 C210.754843,224.834455 229.482775,206.125251 252.50501,206.125251 C275.527245,206.125251 294.255177,224.834455 294.255177,247.833667 C294.255177,270.83288 275.527245,289.542084 252.50501,289.542084 C229.482775,289.542084 210.754843,270.83288 210.754843,247.833667 Z" id="Path"></path>
             </g>
         </g>
     </g>

icon-font/svgs/icon-font_107_Settings.svg

@@ -1,18 +1,16 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="500px" height="417px" viewBox="0 0 500 417" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+<svg width="500px" height="417px" viewBox="0 0 500 417" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
     <title>icon-font_107_Settings</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-1000.000000, -11043.000000)" fill="#191919">
-            <g id="icon-font_107_Settings" sketch:type="MSLayerGroup" transform="translate(1000.000000, 11043.000000)">
-                <path d="M20.8333333,41.4748987 L20.8333333,41.4748987 L20.8333333,375.191768 C20.8333333,386.475711 30.2349552,395.833333 41.7697206,395.833333 L458.230279,395.833333 C469.833485,395.833333 479.166667,386.564052 479.166667,375.191768 L479.166667,41.4748987 C479.166667,30.1909553 469.765045,20.8333333 458.230279,20.8333333 L41.7697206,20.8333333 C30.1665145,20.8333333 20.8333333,30.102615 20.8333333,41.4748987 L20.8333333,41.4748987 Z M0,41.4748987 C0,18.5689446 18.6880464,0 41.7697206,0 L458.230279,0 C481.299059,0 500,18.7127579 500,41.4748987 L500,375.191768 C500,398.097722 481.311954,416.666667 458.230279,416.666667 L41.7697206,416.666667 C18.7009409,416.666667 0,397.953909 0,375.191768 L0,41.4748987 L0,41.4748987 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-                <path d="M174.166667,125.494436 C174.166667,125.221366 174.392779,125 174.672232,125 L395.327768,125 C395.606984,125 395.833333,125.219872 395.833333,125.494436 L395.833333,145.338898 C395.833333,145.611967 395.608284,145.833333 395.342879,145.833333 C395.342879,145.833333 268.649937,145.833333 177.304687,145.833333 L173.696606,145.833333 C173.956213,145.833333 174.166667,145.613461 174.166667,145.338898 L174.166667,125.494436 Z" id="Rectangle-7228" sketch:type="MSShapeGroup"></path>
-                <rect id="Rectangle-7228-Copy" sketch:type="MSShapeGroup" x="104.166667" y="270.833333" width="141.666667" height="20.8333333" rx="2"></rect>
-                <rect id="Rectangle-7228-Copy-2" sketch:type="MSShapeGroup" x="314.166667" y="270.833333" width="81.6666667" height="20.8333333" rx="2"></rect>
-                <path d="M135.416667,166.666667 C152.675565,166.666667 166.666667,152.675565 166.666667,135.416667 C166.666667,118.157768 152.675565,104.166667 135.416667,104.166667 C118.157768,104.166667 104.166667,118.157768 104.166667,135.416667 C104.166667,152.675565 118.157768,166.666667 135.416667,166.666667 L135.416667,166.666667 Z M135.416667,187.5 L135.416667,187.5 C106.651836,187.5 83.3333333,164.181497 83.3333333,135.416667 C83.3333333,106.651836 106.651836,83.3333333 135.416667,83.3333333 C164.181497,83.3333333 187.5,106.651836 187.5,135.416667 C187.5,164.181497 164.181497,187.5 135.416667,187.5 L135.416667,187.5 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-                <path d="M281.25,312.5 C298.508898,312.5 312.5,298.508898 312.5,281.25 C312.5,263.991102 298.508898,250 281.25,250 C263.991102,250 250,263.991102 250,281.25 C250,298.508898 263.991102,312.5 281.25,312.5 L281.25,312.5 Z M281.25,333.333333 L281.25,333.333333 C252.485169,333.333333 229.166667,310.014831 229.166667,281.25 C229.166667,252.485169 252.485169,229.166667 281.25,229.166667 C310.014831,229.166667 333.333333,252.485169 333.333333,281.25 C333.333333,310.014831 310.014831,333.333333 281.25,333.333333 L281.25,333.333333 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-1000.000000, -11042.000000)" fill="#191919">
+            <g id="icon-font_107_Settings" transform="translate(1000.000000, 11042.000000)">
+                <path d="M44.1211802,292 L0,292 L0,334 L44.1211802,334 C42.7304327,327.217347 42,320.193974 42,313 C42,305.806026 42.7304327,298.782653 44.1211802,292 Z M247.87882,292 L500,292 L500,334 L247.87882,334 C249.269567,327.217347 250,320.193974 250,313 C250,305.806026 249.269567,298.782653 247.87882,292 Z" id="Combined-Shape"></path>
+                <path d="M251.921266,84 L0,84 L0,126 L252.331378,126 C250.804124,118.908475 250,111.548144 250,104 C250,97.1589618 250.660521,90.4721964 251.921266,84 Z M456.078734,84 L500,84 L500,126 L455.668622,126 C457.195876,118.908475 458,111.548144 458,104 C458,97.1589618 457.339479,90.4721964 456.078734,84 Z" id="Combined-Shape"></path>
+                <path d="M146,375 L146,375 C180.241654,375 208,347.241654 208,313 C208,278.758346 180.241654,251 146,251 C111.758346,251 84,278.758346 84,313 C84,347.241654 111.758346,375 146,375 L146,375 Z M42,313 C42,255.562386 88.562386,209 146,209 C203.437614,209 250,255.562386 250,313 C250,370.437614 203.437614,417 146,417 C88.562386,417 42,370.437614 42,313 Z" id="Oval-18-Copy"></path>
+                <path d="M354,166 L354,166 C388.241654,166 416,138.241654 416,104 C416,69.7583455 388.241654,42 354,42 C319.758346,42 292,69.7583455 292,104 C292,138.241654 319.758346,166 354,166 L354,166 Z M354,208 L354,208 C296.562386,208 250,161.437614 250,104 C250,46.562386 296.562386,0 354,0 C411.437614,0 458,46.562386 458,104 C458,161.437614 411.437614,208 354,208 L354,208 Z" id="Oval-18"></path>
             </g>
         </g>
     </g>

icon-font/svgs/icon-font_108_downloadCircle.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_108_downloadCircle</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-3000.000000, -11000.000000)" fill="#000000">
+            <path d="M3250,11500 C3388.07119,11500 3500,11388.0712 3500,11250 C3500,11111.9288 3388.07119,11000 3250,11000 C3111.92881,11000 3000,11111.9288 3000,11250 C3000,11388.0712 3111.92881,11500 3250,11500 Z M3281.25,11281.25 L3281.25,11125 L3218.75,11125 L3218.75,11281.25 L3281.25,11281.25 Z M3359.375,11218.75 L3281.25,11281.25 L3218.75,11281.25 L3140.625,11218.75 L3093.75,11265.625 L3248.95833,11390.625 L3406.25,11265.625 L3359.375,11218.75 Z" id="icon-font_108_downloadCircle"></path>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_108_pencilMenu.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="494px" height="494px" viewBox="0 0 494 494" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_108_pencilMenu</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-2003.000000, -11006.000000)" fill="#191919">
+            <g id="icon-font_108_pencilMenu" transform="translate(2003.000000, 11006.000000)">
+                <path d="M323.090682,108.939942 C257.222132,174.806304 158.72578,273.299383 93.4363246,338.586669 L155.458773,401.061862 C190.204984,366.568734 308.712947,247.832316 385.656409,170.703144 L323.090682,108.939942 Z M348.301168,83.730294 C375.156655,56.8756991 392.289661,39.7432621 392.289661,39.7432621 C401.584882,30.44835 416.739508,30.4483503 426.015484,39.7359097 L454.364101,68.0835877 C463.643904,77.3749836 463.643904,92.5108081 454.349418,101.828817 C454.349418,101.828817 432.037175,124.20696 399.408182,156.917572 L409.974134,146.225397 L348.301168,83.730294 Z M120.376399,419.162863 C89.6196336,429.414771 53.3411467,441.507191 53.3411467,441.507191 C53.3411467,441.507191 67.9518573,395.215969 76.7414611,368.05883 L124.185037,417.893361 Z M0.341146679,493.658335 L31.1315631,483.395211 L158.667272,440.884748 L162.301535,439.673367 L165.010391,436.964601 L476.764346,125.221007 C498.712109,103.217717 498.712109,67.5653877 476.771694,45.5975746 L448.423077,17.2498966 C426.478835,-4.72175335 390.763554,-4.72175405 368.791174,17.2498963 L57.0372198,328.993492 L54.3282847,331.702337 L53.1167958,335.336683 L10.604893,462.868126 L0.341146679,493.658335 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_109_Mobile.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="292px" height="500px" viewBox="0 0 292 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_109_Mobile</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-4113.000000, -11000.000000)" fill="#000000">
+            <g id="icon-font_109_Mobile" transform="translate(4113.000000, 11000.000000)">
+                <g id="Outline_Icons">
+                    <g id="Group">
+                        <path d="M239.583333,0 L52.0833333,0 C23.375,0 0,23.3541667 0,52.0833333 L0,447.916667 C0,476.645833 23.375,500 52.0833333,500 L239.583333,500 C268.291667,500 291.666667,476.645833 291.666667,447.916667 L291.666667,52.0833333 C291.666667,23.3541667 268.3125,0 239.583333,0 L239.583333,0 Z M20.8333333,104.166667 L270.833333,104.166667 L270.833333,395.833333 L20.8333333,395.833333 L20.8333333,104.166667 L20.8333333,104.166667 Z M52.0833333,20.8333333 L239.583333,20.8333333 C256.833333,20.8333333 270.833333,34.8541667 270.833333,52.0833333 L270.833333,83.3333333 L20.8333333,83.3333333 L20.8333333,52.0833333 C20.8333333,34.8541667 34.8541667,20.8333333 52.0833333,20.8333333 L52.0833333,20.8333333 Z M239.583333,479.166667 L52.0833333,479.166667 C34.8541667,479.166667 20.8333333,465.145833 20.8333333,447.916667 L20.8333333,416.666667 L270.833333,416.666667 L270.833333,447.916667 C270.833333,465.145833 256.833333,479.166667 239.583333,479.166667 L239.583333,479.166667 Z" id="Shape"></path>
+                        <path d="M197.916667,437.5 L93.75,437.5 C88,437.5 83.3333333,442.166667 83.3333333,447.916667 C83.3333333,453.666667 88,458.333333 93.75,458.333333 L197.916667,458.333333 C203.666667,458.333333 208.333333,453.666667 208.333333,447.916667 C208.333333,442.166667 203.6875,437.5 197.916667,437.5 L197.916667,437.5 Z" id="Shape"></path>
+                        <ellipse id="Oval" cx="145.833333" cy="52.0833333" rx="20.8333333" ry="20.8333333"></ellipse>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_110_Undo.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="375px" viewBox="0 0 500 375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.1 (29687) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_110_Undo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-5002.000000, -11066.000000)" fill="#000000">
+            <g id="icon-font_110_Undo" transform="translate(5002.000000, 11066.000000)">
+                <path d="M70.3382608,125.000009 L375,125.000009 C446.35637,125.000009 500,178.048274 500,249.999999 C500,321.951726 446.356369,375 375,375 L291.666667,375 C280.160734,375 270.833333,365.672599 270.833333,354.166667 C270.833333,342.660734 280.160734,333.333333 291.666667,333.333333 L375,333.333333 C423.447955,333.333333 458.333333,298.835126 458.333333,249.999999 C458.333333,201.164876 423.447958,166.666676 375,166.666676 L71.9074397,166.666676 L160.628913,256.166411 C168.72923,264.337784 168.671628,277.528596 160.500255,285.628913 C152.328882,293.72923 139.138071,293.671628 131.037754,285.500255 L6.03775366,159.403759 C-2.06278402,151.232164 -2.00492633,138.040917 6.16698066,129.940693 L131.166981,6.03718917 C139.338665,-2.06281376 152.529474,-2.00470423 160.629477,6.16698044 C168.72948,14.3386651 168.671371,27.5294742 160.499686,35.6294771 L70.3382608,125.000009 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_111_Redo.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="375px" viewBox="0 0 500 375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.1 (29687) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_111_Redo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-5999.000000, -11062.000000)" fill="#000000">
+            <g id="icon-font_111_Redo" transform="translate(5999.000000, 11062.000000)">
+                <path d="M428.09256,166.666678 L125,166.666678 C76.5520421,166.666678 41.6666667,201.164877 41.6666667,250.000001 C41.6666667,298.835128 76.552045,333.333335 125,333.333335 L208.333333,333.333335 C219.839266,333.333335 229.166667,342.660736 229.166667,354.166668 C229.166667,365.672601 219.839266,375.000002 208.333333,375.000002 L125,375.000002 C53.6436311,375.000002 0,321.951728 0,250.000001 C0,178.048276 53.6436295,125.000011 125,125.000011 L429.661739,125.000011 L339.500314,35.6294786 C331.328629,27.5294756 331.27052,14.3386666 339.370523,6.16698191 C347.470526,-2.00470276 360.661335,-2.0628123 368.833019,6.03719063 L493.833019,129.940695 C502.004926,138.040918 502.062784,151.232165 493.962246,159.403761 L368.962246,285.500257 C360.861929,293.67163 347.671118,293.729232 339.499745,285.628914 C331.328372,277.528597 331.27077,264.337786 339.371087,256.166413 L428.09256,166.666678 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_112_lArrowLight.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="228px" height="506px" viewBox="0 0 228 506" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.1 (29687) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_112_lArrowLight</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-7135.000000, -10993.000000)" fill="#000000">
+            <g id="icon-font_112_lArrowLight" transform="translate(7135.000000, 10993.000000)">
+                <path d="M0.702946318,252.999054 C0.14636948,254.866962 0.510082487,256.968815 1.8564703,258.573378 L207.175738,503.263353 C209.301796,505.79709 213.090441,506.132254 215.629398,504.001816 L225.476162,495.7394 C228.017524,493.606944 228.346751,489.824218 226.216881,487.285938 L29.7056223,253.092939 L226.256808,18.8523582 C228.386677,16.3140783 228.057451,12.5313519 225.516088,10.398896 L215.669325,2.13648009 C213.130367,0.00604172265 209.341722,0.341206329 207.215665,2.87494253 L1.89639687,247.564918 C0.58358948,249.129461 0.205050151,251.166798 0.702946318,252.999054 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_113_Hide.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.1 (29687) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_113_Hide</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-8000.000000, -11000.000000)" fill="#000000">
+            <g id="icon-font_113_Hide" transform="translate(8000.000000, 11000.000000)">
+                <path d="M168.516382,396.527444 C194.193363,407.220614 221.780987,413.902897 250.502897,413.902897 C346.850106,413.902897 430.433697,326.17791 471.948787,277.869025 C493.317357,255.896446 498.973146,249.028031 498.973146,249.028031 C499.701368,248.186721 499.712307,246.818732 499.009367,245.974772 C499.009367,245.974772 492.362279,237.637656 471.948787,217.136769 C462.294003,205.902014 450.363963,192.535458 436.527263,178.636273 C436.424017,178.532561 436.320665,178.428819 436.217207,178.325049 L403.726892,204.807837 C421.268756,222.667154 441.521907,245.994982 441.521907,245.994982 C442.245864,246.823254 442.253276,248.172862 441.531978,248.999306 C441.531978,248.999306 412.348272,282.613362 393.702121,300.035106 C344.373268,346.124757 295.780717,372.369351 250.502897,372.369351 C235.900423,372.369351 221.065928,370.125273 206.159883,365.844312 L168.516372,396.52744 Z M62.9467973,325.173542 C24.4830048,288.609797 1.16779055,253.352643 1.16779055,247.502897 C1.16779055,234.702897 112.79892,81.1028969 250.502897,81.1028969 C280.140414,81.1028969 308.570175,89.4038635 334.939182,102.305011 C334.952385,102.31147 334.965587,102.317931 334.978788,102.324393 L298.872131,131.903038 C282.420027,125.815229 266.260719,122.636443 250.502897,122.636443 C201.51747,122.636443 149.921025,147.889782 101.771487,190.574805 C83.2680311,206.978295 66.5218737,224.964392 53.5539044,241.614973 C48.4535212,248.16375 48.4535212,246.842043 53.5539044,253.390821 C65.0065328,268.095739 79.4059564,283.842291 95.3601663,298.620445 L62.9467973,325.173542 Z" id="Combined-Shape"></path>
+                <path d="M237.22238,286.587358 C241.248856,287.895585 245.54343,288.602807 249.999996,288.602807 C272.869077,288.602807 291.472421,269.979698 291.472421,247.086322 C291.472421,245.524539 291.385842,243.98263 291.217237,242.465151 L484.071441,84.8732304 L500,71.8571172 L473.967774,40 L458.039215,53.0161132 L266.925615,209.185689 C261.754686,206.862624 256.025402,205.569836 249.999996,205.569836 C227.130916,205.569836 208.527571,224.192945 208.527571,247.086322 C208.527571,250.181229 208.867562,253.198095 209.512119,256.101457 L15.9285586,414.289375 L5.68434189e-14,427.305488 L26.0322263,459.162606 L41.9607849,446.146492 L237.22238,286.587358 L237.22238,286.587358 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/template.jst.ejs

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

package.json

@@ -1,17 +1,12 @@
 {
   "name": "cartoassets",
-  "description": "Share frontend assets between different CartoDB repositories",
-  "version": "0.1.30",
+  "description": "Share frontend assets between different CARTO repositories",
+  "version": "0.2.2",
   "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"
@@ -29,10 +24,11 @@
     "node": ">= 0.8.0"
   },
   "devDependencies": {
+    "grunt": "~0.4.5",
     "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",
@@ -44,21 +40,26 @@
     "gulp-iconfont": "1.0.0",
     "gulp-iconfont-css": "0.0.9",
     "gulp-install": "0.2.0",
+    "gulp-rename": "1.2.2",
     "gulp-sketch": "0.0.7",
     "grunt-shell": "1.1.2",
-    "load-grunt-tasks": "*"
-  },
-  "peerDependencies": {
-    "grunt": "~0.4.5"
+    "load-grunt-tasks": "*",
+    "perfect-scrollbar": "git://github.com/CartoDB/perfect-scrollbar.git#master"
   },
   "keywords": [
     "library",
-    "CartoDB",
+    "CARTO",
     "share",
     "assets",
     "styleguide",
     "shared components",
     "editor",
     "deep-insights"
-  ]
+  ],
+  "scripts": {
+    "bump": "npm version patch",
+    "bump:major": "npm version major",
+    "bump:minor": "npm version minor",
+    "postversion": "git push origin master --follow-tags"
+  }
 }

src/scss/cdb-components/_avatars.scss

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

src/scss/cdb-components/_boxes.scss

@@ -0,0 +1,46 @@
+// Menu styles
+// ----------------------------------------------
+
+/* SG
+# Boxes/Dropdown
+
+
+```
+  <div class="CDB-Box-modal">&nbsp;</div>
+```
+*/
+
+.CDB-Box-modal {
+  min-width: 160px;
+  border: 1px solid $cMainLine;
+  border-radius: 4px;
+  background: $cWhite;
+  box-shadow: 0  $baseSize  $baseSize * 2 0 rgba(0, 0, 0, 0.16);
+  box-sizing: border-box;
+}
+
+.CDB-Box-modalHeader {
+  background: $cSecondaryBackground;
+}
+.CDB-Box-modalHeaderItem {
+  @include display-flex();
+  padding: $baseSize + 4 $baseSize * 2;
+  border-bottom: 1px solid $cMainLine;
+}
+.CDB-Box-modalHeaderItem--block {
+  display: block;
+}
+.CDB-Box-modalHeaderItem--paddingHorizontal {
+  padding: 0 $baseSize * 2;
+}
+.CDB-Box-modalHeaderItem--paddingVertical {
+  padding: $baseSize + 4 0;
+}
+.CDB-Box-modalOverlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+}

src/scss/cdb-components/_buttons.scss

@@ -0,0 +1,498 @@
+// Buttons styles
+// ----------------------------------------------
+
+/* SG
+# Buttons/Primary
+
+Layout Component:
+[CDB-Button][CDB-Button--primary | CDB-Button--secondary]
+
+```
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
+</button>
+
+<button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--primary">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
+</button>
+
+<button class="CDB-Button CDB-Button--primary is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-white">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
+</button>
+
+<button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--primary CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+</button>
+
+<br/>
+<br/>
+<br/>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--big is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+
+<button class="CDB-Button CDB-Button--alert">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--small is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+</button>
+
+
+<br/>
+<br/>
+<br/>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--big is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+
+<button class="CDB-Button CDB-Button--error">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--small is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+</button>
+
+<br/>
+<br/>
+<br/>
+
+<div style="background: #2E3C43; padding: 20px;">
+
+  <button class="CDB-Button CDB-Button--primary CDB-Button--big">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--primary">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--primary is-disabled">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--primary CDB-Button--small">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
+    <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+  </button>
+
+</div>
+
+```
+*/
+
+.CDB-Button {
+  position: relative;
+  padding: $baseSize $baseSize + 12;
+  transition: background, 300ms;
+  border-radius: $baseSize / 2;
+  cursor: pointer;
+  box-sizing: border-box;
+
+
+  .CDB-Button-Text {
+    display: block;
+  }
+
+  &.is-disabled {
+    opacity: 0.24;
+    cursor: default;
+  }
+}
+
+.CDB-Button--loading {
+  .CDB-Button-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transform-origin: 50%;
+    opacity: 0;
+    z-index: 10;
+  }
+
+  .CDB-Button-Text {
+    transition: all 600ms;
+  }
+
+  &.is-loading {
+    cursor: default;
+
+    .CDB-Button-loader {
+      animation-name: showIn;
+      animation-duration: 600ms;
+      animation-fill-mode: forwards;
+    }
+
+    .CDB-Button-Text {
+      opacity: 0;
+    }
+  }
+}
+
+@keyframes showIn {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+
+.CDB-Button--small {
+  padding: $baseSize / 2 $baseSize + 4;
+  border-radius: 3px;
+}
+
+.CDB-Button--big {
+  padding: $baseSize + 3 $baseSize + 12;
+}
+
+.CDB-Button--wide {
+  width: 100%;
+}
+
+.CDB-Button--icon {
+  padding: 7px 9px;
+}
+
+.CDB-Button--primary {
+  background: $cBlue;
+  color: $cWhite;
+
+  &:hover,
+  &:active {
+    background: $cBlueHover;
+  }
+
+  &.is-loading {
+    &:hover,
+    &:active {
+      background: $cBlue;
+    }
+  }
+
+  &.is-disabled {
+    &:hover,
+    &:active {
+      background: $cBlue;
+    }
+  }
+}
+
+.CDB-Button--alert {
+  background: $cAlert;
+  color: $cWhite;
+
+  &:hover,
+  &:active {
+    background: darken($cAlert, 8%);
+  }
+
+  &.is-disabled {
+    &:hover,
+    &:active {
+      background: $cAlert;
+    }
+  }
+}
+
+
+.CDB-Button--error,
+.CDB-Button--negative {
+  background: $cError;
+  color: $cWhite;
+
+  &:hover,
+  &:active {
+    background: darken($cError, 8%);
+  }
+
+  &.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 {
+      border-color: $cHintText;
+    }
+  }
+}
+
+
+
+// Buttons styles
+// ----------------------------------------------
+
+/* SG
+# Buttons/Secondary
+
+```
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
+</button>
+
+
+<button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--secondary">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
+</button>
+
+
+<button class="CDB-Button CDB-Button--secondary is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
+</button>
+
+<button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<br/>
+<br/>
+<br/>
+
+<div style="background: #2E3C43; padding: 20px;">
+  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+    <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
+      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+      </svg>
+    </div>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--white">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+    <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+      </svg>
+    </div>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary is-disabled">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  </button>
+</div>
+
+```
+*/
+
+
+.CDB-Button--secondary {
+  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;
+  }
+
+  &.is-disabled {
+    &:hover {
+      background: transparent;
+      box-shadow: inset 0 0 0 1px $cBlue;
+    }
+
+    &:active {
+      background: transparent;
+    }
+  }
+
+  &.is-loading {
+    cursor: default;
+
+    &:hover,
+    &:active {
+      background: none;
+      color: $cBlue;
+    }
+  }
+
+  &--background {
+    background-color: $cWhite;
+  }
+}
+
+.CDB-Button--white {
+  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 {
+    opacity: 0.24;
+
+    &:hover {
+      background: transparent;
+      box-shadow: inset 0 0 0 1px $cWhite;
+    }
+
+    &:active {
+      background: transparent;
+      color: $cWhite;
+    }
+  }
+
+  &.is-loading {
+    cursor: default;
+
+    &:hover,
+    &:active {
+      background: none;
+      color: $cWhite;
+    }
+  }
+}

src/scss/cdb-components/_colors.scss

@@ -6,24 +6,15 @@
 
 
 ```
-<div class="box Color-MainDark"></div>
-<div class="box Color-SecondaryDark"></div>
-<div class="box Color-Blue"></div>
-<div class="box Color-White"></div>
-<div class="box Color-SecondaryBackground"></div>
-<div class="box Color-ThirdBackground"></div>
-``` 
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-MainDark"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryDark"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-Blue"></div>
+<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';
-
-.box {
-  display: inline-block;
-  width: 120px;
-  height: 64px;
-  margin: 0 24px 24px 0;
-}
-
 .Color-Blue {
   background: $cBlue;
 }
@@ -131,5 +122,3 @@
 .Color-Error {
   background: $cError;
 }
-
-

src/scss/cdb-components/_headers.scss

@@ -6,8 +6,8 @@
 
 ```
 <div class="CDB-HeaderInfo is-block">
-  <div class="CDB-HeaderInfo-Title u-bSpace">
-    <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
+  <div class="CDB-HeaderInfo-title u-bSpace">
+    <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
     <div class="CDB-HeaderInfo-Actions">
       <a href="#">
           <div class="CDB-Shape">
@@ -21,12 +21,12 @@
     </div>
   </div>
   <ul class="CDB-HeaderInfo-List">
-    <li class="CDB-HeaderInfo-ListItem">
+    <li class="CDB-HeaderInfo-listItem">
       <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
         PUBLIC
       </button>
     </li>
-    <li class="CDB-HeaderInfo-ListItem">
+    <li class="CDB-HeaderInfo-listItem">
       <ul class="CDB-AvatarList u-iBlock">
         <li class="CDB-AvatarList-item">
           <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
@@ -42,7 +42,7 @@
         </li>
       </ul>
     </li>
-    <li class="CDB-HeaderInfo-ListItem">
+    <li class="CDB-HeaderInfo-listItem">
       <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock u-altTextColor">Published 8 days ago</p>
     </li>
   </ul>
@@ -53,19 +53,19 @@
 <br/>
 
 <div class="CDB-HeaderInfo">
-  <button class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
     <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
   </button>
-  <div class="CDB-HeaderInfo-Inner">
-    <div class="CDB-HeaderInfo-Title u-bSpace">
-      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected </h2>
+  <div class="CDB-HeaderInfo-inner">
+    <div class="CDB-HeaderInfo-title u-bSpace">
+      <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected </h2>
       <ul class="CDB-HeaderInfo-Actions">
-        <li class="CDB-HeaderInfo-ActionsItem">
+        <li class="CDB-HeaderInfo-actionsItem">
           <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
             <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
           </button>
         </li>
-        <li class="CDB-HeaderInfo-ActionsItem">
+        <li class="CDB-HeaderInfo-actionsItem">
           <a href="#">
               <div class="CDB-Shape">
                 <div class="CDB-Shape-threePoints is-blue is-small">
@@ -93,13 +93,13 @@
 <br/>
 
 <div class="CDB-HeaderInfo">
-  <button class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
     <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
   </button>
-  <div class="CDB-HeaderInfo-Inner">
-    <div class="CDB-HeaderInfo-Title u-bSpace">
-      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
-      <div class="CDB-HeaderInfo-Actions">
+  <div class="CDB-HeaderInfo-inner">
+    <div class="CDB-HeaderInfo-title u-bSpace">
+      <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
+      <div class="CDB-HeaderInfo-actions">
         <a href="#">
             <div class="CDB-Shape">
               <div class="CDB-Shape-threePoints is-blue is-small">
@@ -120,10 +120,10 @@
 <br/>
 
 <div class="CDB-HeaderInfo">
-  <button class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
     <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
   </button>
-  <div class="CDB-HeaderInfo-Inner">
+  <div class="CDB-HeaderInfo-inner">
     <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text u-bSpace--m">
     <div class="CDB-Shape u-iBlock">
       <ul class="CDB-Shape-Dataset is-small is-grey">
@@ -142,11 +142,11 @@
 <div class="CDB-HeaderInfo">
   <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
 
-  <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">
+  <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">
             <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
@@ -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);
@@ -178,7 +174,7 @@
     display: block;
   }
 }
-.CDB-HeaderInfo-ListItem {
+.CDB-HeaderInfo-listItem {
   display: inline-block;
   margin-right: 8px;
   vertical-align: middle;
@@ -188,17 +184,17 @@
   }
 }
 
-.CDB-HeaderInfo-Inner {
+.CDB-HeaderInfo-inner {
   @include flex(1);
 }
-.CDB-HeaderInfo-Back {
+.CDB-HeaderInfo-back {
   margin-top: 7px;
 }
-.CDB-HeaderInfo-Title {
+.CDB-HeaderInfo-title {
   @include display-flex();
   @include align-items(center);
 }
-.CDB-HeaderInfo-TitleText {
+.CDB-HeaderInfo-titleText {
   @include flex(1);
   width: 0;
   padding-right: 16px;
@@ -206,13 +202,14 @@
   white-space: nowrap;
   overflow: hidden;
 }
-.CDB-HeaderInfo-ActionsItem {
+.CDB-HeaderInfo-actionsItem {
   display: inline-block;
   margin-left: 4px;
   vertical-align: middle;
 }
 .CDB-HeaderNumeration {
   width: $baseSize * 3;
+  min-width: $baseSize * 3;
   height: $baseSize * 3;
   border: 1px solid $cMainLine;
   border-radius: 4px;

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

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

src/scss/cdb-components/_lists.scss

@@ -0,0 +1,35 @@
+// List styles
+// ----------------------------------------------
+
+/* SG
+# Lists/Lists Decorations
+
+
+```
+  <div class="CDB-Box-modal">&nbsp;</div>
+```
+*/
+
+.CDB-ListDecoration-item {
+  border-bottom: 1px solid $cSecondaryLine;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+.CDB-ListDecoration-itemPadding {
+  padding: 12px 16px;
+}
+.CDB-ListDecoration-itemPadding--horizontal {
+  padding: 0 16px;
+}
+.CDB-ListDecoration-itemPadding--vertical {
+  padding: 12px 0;
+}
+
+.CDB-ListDecoration-itemLink {
+  display: block;
+  max-width: 100%;
+  padding: 12px 16px;
+  text-align: left;
+}

src/scss/cdb-components/_loader.scss

@@ -0,0 +1,170 @@
+// Loader styles
+// ----------------------------------------------
+
+/* SG
+# Loader/principal
+
+This is the generic loader for widgets, maps, components, ...
+
+```
+<div class="CDB-Loader is-visible"></div>
+
+```
+*/
+
+.CDB-Loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  height: 3px;
+  transform: translateX(-200%);
+  background-image: linear-gradient(90deg, rgba($cBlue, 1) 0%, #32BBFE 90%, #FAFEFF 95%);
+  z-index: 2;
+}
+
+.CDB-Loader.is-visible {
+  @include css3-prefix(animation, loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite);
+}
+
+@include keyframes(loader-progress) {
+  from {
+    transform: translateX(-200%);
+  }
+  to {
+    transform: translateX(200%);
+  }
+}
+
+/* SG
+# Loader/circle
+
+```
+<div style="padding: 20px;">
+  <div class="CDB-LoaderIcon is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+
+  <div class="CDB-LoaderIcon is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+</div>
+
+<div style="padding: 20px; background: #F9F9F9;">
+  <div class="CDB-LoaderIcon is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+</div>
+
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-LoaderIcon">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+</div>
+
+<div style="padding: 20px; background: #E27D61;">
+  <div class="CDB-LoaderIcon">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+</div>
+
+```
+*/
+.CDB-LoaderIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.CDB-LoaderIcon-spinner {
+  animation: rotate 2s linear infinite;
+  width: 16px;
+  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;
+}
+
+.CDB-LoaderIcon-path {
+  stroke: rgba(255, 255, 255, 0.88);
+  stroke-linecap: round;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  animation: dash 1.5s ease-in-out infinite;
+  stroke-width: 4px;
+}
+
+.CDB-LoaderIcon--big .CDB-LoaderIcon-path {
+  stroke-width: 2px;
+}
+
+.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-path {
+  stroke: rgba(0, 0, 0, 0.24);
+}
+
+.CDB-LoaderIcon.is-blue .CDB-LoaderIcon-path {
+  stroke: $cBlue;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}

src/scss/cdb-components/_menu.scss

@@ -0,0 +1,271 @@
+// Menu styles
+// ----------------------------------------------
+
+/* SG
+# Menu/Navigation
+
+
+```
+<nav class="CDB-NavMenu">
+  <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">DATA</button>
+    </li>
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">STYLE</button>
+    </li>
+    <li class="CDB-NavMenu-item is-selected">
+      <button class="CDB-NavMenu-link">POP-UP</button>
+      <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
+        <li class="CDB-NavSubmenu-item is-selected">
+          <button class="CDB-NavSubmenu-link">CLICK <span class="CDB-NavSubmenu-status u-hintTextColor">NONE</span></button>
+        </li>
+        <li class="CDB-NavSubmenu-item">
+          <button class="CDB-NavSubmenu-link">HOVER <span class="CDB-NavSubmenu-status u-hintTextColor">NONE</span></button>
+        </li>
+      </ul>
+    </li>
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">LEGEND</button>
+    </li>
+  </ul>
+  <div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;">
+    <!-- ready for a button -->
+  </div>
+</nav>
+
+<br/><br/>
+<br/><br/>
+
+<div style="background: #2E3C43; height: 100px; padding: 20px;">
+  <nav class="CDB-NavMenu is-dark">
+    <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
+      <li class="CDB-NavMenu-item CDB-Text">
+        <button class="CDB-NavMenu-link">DATA</button>
+      </li>
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">STYLE</button>
+      </li>
+      <li class="CDB-NavMenu-item is-selected">
+        <button class="CDB-NavMenu-link">POP-UP</button>
+        <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
+          <li class="CDB-NavSubmenu-item is-selected">
+            <button class="CDB-NavSubmenu-link">CLICK <span class="CDB-NavSubmenu-status">NONE</span></button>
+          </li>
+          <li class="CDB-NavSubmenu-item">
+            <button class="CDB-NavSubmenu-link">HOVER <span class="CDB-NavSubmenu-status">NONE</span></button>
+          </li>
+        </ul>
+      </li>
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">LEGEND</button>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+<br/><br/>
+<br/><br/>
+
+<nav class="CDB-NavMenu">
+  <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">DATA</button>
+    </li>
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">STYLE</button>
+    </li>
+    <li class="CDB-NavMenu-item is-selected">
+      <button class="CDB-NavMenu-link">POP-UP</button>
+    </li>
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">LEGEND</button>
+    </li>
+  </ul>
+
+  <ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu">
+    <li class="CDB-NavSubmenu-item is-selected">
+      <button class="CDB-NavSubmenu-link u-upperCase">Click</button>
+    </li>
+    <li class="CDB-NavSubmenu-item">
+      <button class="CDB-NavSubmenu-link u-upperCase">Hover</button>
+    </li>
+  </ul>
+</nav>
+
+
+<br/><br/>
+<br/><br/>
+
+<div style="background: #2E3C43; height: 100px; padding: 20px;">
+  <nav class="CDB-NavMenu is-dark">
+    <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">DATA</button>
+      </li>
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">STYLE</button>
+      </li>
+      <li class="CDB-NavMenu-item is-selected">
+        <button class="CDB-NavMenu-link">POP-UP</button>
+      </li>
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">LEGEND</button>
+      </li>
+    </ul>
+
+    <ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu">
+      <li class="CDB-NavSubmenu-item is-selected">
+        <button class="CDB-NavSubmenu-link u-upperCase">Click</button>
+      </li>
+      <li class="CDB-NavSubmenu-item">
+        <button class="CDB-NavSubmenu-link u-upperCase">Hover</button>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+```
+*/
+
+.CDB-NavMenu {
+  position: relative;
+  z-index: 2;
+}
+
+.CDB-NavMenu-inner {
+  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-link {
+  display: block;
+  margin-bottom: -1px;
+  padding: 4px 0 11px;
+  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,
+.CDB-NavSubmenu-item {
+  display: inline-block;
+  margin-right: 12px;
+  vertical-align: middle;
+}
+
+.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
+  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;
+
+  &--inside {
+    position: absolute;
+    right: 0;
+    left: 0;
+    padding-top: 14px;
+  }
+
+  &--outside {
+    margin-top: -5px;
+    margin-bottom: 18px;
+  }
+}
+
+.CDB-NavSubmenu-link {
+  display: block;
+  margin-bottom: -1px;
+  padding-bottom: 12px;
+  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: 2px solid $cMainText;
+    color: $cMainText;
+  }
+
+  &.is-disabled .CDB-NavSubmenu-link {
+    pointer-events: none;
+    color: $cHintText;
+    cursor: default;
+  }
+}
+
+.CDB-NavSubmenu-status {
+  margin-left: 2px;
+}
+
+.CDB-NavMenu.is-dark {
+  .CDB-NavMenu-inner,
+  .CDB-NavSubmenu {
+    border-bottom: 1px solid $cSecondaryText;
+  }
+
+  .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: 2px solid $cMainLine;
+    color: $cWhite;
+  }
+
+  .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
+    border-bottom: 2px solid $cMainLine;
+    color: $cWhite;
+  }
+
+  .CDB-NavSubmenu-status {
+    color: $cSecondaryText;
+  }
+}

src/scss/cdb-components/_tags.scss

@@ -17,17 +17,17 @@
 <button class="CDB-Tag is-private CDB-Text is-semibold CDB-Size-small u-iBlock">
   PRIVATE
 </button>
+<button class="CDB-Tag CDB-Text is-semibold CDB-Size-small u-iBlock">
+  TAG
+</button>
 ```
 */
 
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
-
 .CDB-Tag {
   padding: 0 3px;
+  border: 1px solid $cBlue;
   border-radius: 2px;
+  color: $cBlue;
 
   &.is-public {
     border: 1px solid $cPublic;
@@ -45,6 +45,10 @@
     border: 1px solid $cError;
     color: $cError;
   }
+  &.is-gray {
+    border: 1px solid $cGray;
+    color: $cGray;
+  }
 }
 
 /* SG
@@ -123,8 +127,8 @@
 
 .CDB-Tag.CDB-Tag--opaque {
   padding: $baseSize / 4 $halfBaseSize;
+  border: 0;
   border-radius: $baseSize / 4;
-  background: $cThirdBackground;
+  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

@@ -15,11 +15,10 @@
 <p class="CDB-Text CDB-Size-medium u-hintTextColor">Open Sans 12/16 Regular</p>
 <p class="CDB-Text is-semibold CDB-Size-small">Open Sans 10/14 Semibold</p>
 <p class="CDB-Text CDB-Size-small">Open Sans 10/14 Regular</p>
+<span class="CDB-Text CDB-Size-small is-underlined">?</span>
 ```
 */
 
-@import '../cdb-variables/sizes';
-
 .CDB-Text {
   font-family: 'Open Sans';
   $sFontWeight-normal: 400;
@@ -32,6 +31,10 @@
   }
 }
 
+.is-underlined {
+  border-bottom: 1px dotted $cMainLine;
+}
+
 .CDB-Size-huge {
   font-size: $sFontSize-huge;
   line-height: $sLineHeight-huge;
@@ -50,6 +53,11 @@
 .CDB-Size-small {
   font-size: $sFontSize-small;
   line-height: $sLineHeight-small;
+
+}
+
+.CDB-Size-small.u-whiteTextColor {
+  -webkit-font-smoothing: initial;
 }
 
 .CDB-FontSize-small {
@@ -59,3 +67,7 @@
 .CDB-FontSize-medium {
   font-size: $sFontSize-medium;
 }
+
+.CDB-IconFont.is-disabled {
+  opacity: 0.24;
+}

src/scss/cdb-components/boxes.scss

@@ -1,204 +0,0 @@
-// Menu styles
-// ----------------------------------------------
-
-/* SG
-# Boxes/Dropdown
-
-
-```
-  <div class="CDB-Box-Modal">&nbsp;</div>
-```
-*/
-
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
-.CDB-Box-Modal {
-  border: 1px solid $cMainLine;
-  border-radius: 4px;
-  background: $cWhite;
-  box-shadow: 0  $baseSize  $baseSize * 2 0 rgba(0, 0, 0, 0.16);
-}
-
-
-/* SG
-# Boxes/Loader
-```
-<div class="CDB-BoxLoader">
-  <ul class="CDB-BoxLoader-inner">
-    <li class="CDB-BoxLoader-item">
-      <div class="CDB-Shape u-rSpace--m">
-        <div class="CDB-Shape-CircleItem is-green is-medium">
-          <div class="CDB-Shape-tick is-medium is-green"></div>
-        </div>
-      </div>
-      <div class="CDB-BoxLoader-info">
-        <p class="CDB-Text CDB-Size-medium">Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows Query applied. Showing 2,561 rowsQuery applied. Showing 2,561 rows Query applied. Showing 2,561 rows</p>
-      </div>
-      <div class="CDB-BoxLoader-actions">
-        <div class="CDB-Shape">
-          <div class="CDB-Shape-threePoints is-small is-blue">
-            <div class="CDB-Shape-threePointsItem"></div>
-            <div class="CDB-Shape-threePointsItem"></div>
-            <div class="CDB-Shape-threePointsItem"></div>
-          </div>
-        </div>
-      </div>
-    </li>
-  </ul>
-</div>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<div class="CDB-BoxLoader">
-  <ul class="CDB-BoxLoader-inner">
-    <li class="CDB-BoxLoader-item">
-      <div class="CDB-Shape u-rSpace--m">
-        <div class="CDB-Shape-CircleItem is-green is-medium">
-          <div class="CDB-Shape-tick is-medium is-green"></div>
-        </div>
-      </div>
-      <div class="CDB-BoxLoader-info">
-        <p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
-      </div>
-    </li>
-    <li class="CDB-BoxLoader-item is-working">
-      <div class="CDB-LoaderIcon u-rSpace--m">
-        <div class="CDB-LoaderIcon-item"></div>
-      </div>
-      <div class="CDB-BoxLoader-info">
-        <p class="CDB-Text CDB-Size-medium">Geocoding populated_places_2 (28%)</p>
-      </div>
-      <div class="CDB-BoxLoader-actions">
-        <div class="CDB-Shape">
-          <div class="CDB-Shape-close is-blue is-large"></div>
-        </div>
-      </div>
-    </li>
-  </ul>
-  <ul class="CDB-BoxLoader-inner">
-    <li class="CDB-BoxLoader-item">
-      <div class="CDB-Shape u-rSpace--m">
-        <div class="CDB-Shape-CircleItem is-green is-medium">
-          <div class="CDB-Shape-tick is-medium is-green"></div>
-        </div>
-      </div>
-      <div class="CDB-BoxLoader-info">
-        <p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
-      </div>
-    </li>
-  </ul>
-</div>
-<br/>
-<br/>
-<br/>
-<br/>
-<br/>
-<div class="CDB-BoxLoader">
-  <ul class="CDB-BoxLoader-inner">
-    <li class="CDB-BoxLoader-item">
-      <div class="CDB-Shape u-rSpace--m">
-        <div class="CDB-Shape-CircleItem is-red">
-          <div class="CDB-Shape-close is-medium is-red"></div>
-        </div>
-      </div>
-      <div class="CDB-BoxLoader-info">
-        <p class="CDB-Text CDB-Size-medium">Error in query. Data might be outdated</p>
-      </div>
-      <div class="CDB-BoxLoader-actions">
-        <div class="CDB-Shape">
-          <div class="CDB-Shape-threePoints is-small is-blue">
-            <div class="CDB-Shape-threePointsItem"></div>
-            <div class="CDB-Shape-threePointsItem"></div>
-            <div class="CDB-Shape-threePointsItem"></div>
-          </div>
-        </div>
-      </div>
-    </li>
-  </ul>
-</div>
-```
-*/
-
-.CDB-BoxLoader {
-  padding: 0 $baseSize * 3;
-  border-top: 1px solid $cMainLine;
-}
-
-
-.CDB-BoxLoader-inner {
-  padding: $baseSize + 4 0;
-  border-top: 1px solid $cMainLine;
-  &:first-child {
-    border-top: 0;
-  }
-}
-
-.CDB-BoxLoader-item {
-  @include display-flex();
-  padding: $baseSize 0;
-  color: $cSecondaryText;
-  &.is-working {
-    color: $cAltText;
-  }
-}
-
-.CDB-BoxLoader-info {
-  @include flex(1);
-  padding-right: $baseSize * 2;
-}
-
-/* SG
-# Boxes/Info Boxes
-
-
-```
-<div class="CDB-InfoBox">
-  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
-  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
-  <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
-</div>
-<br/>
-<br/>
-<br/>
-<div class="CDB-InfoBox is-alert">
-  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
-  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
-  <ul class="CDB-InfoBox-footer">
-    <li class="CDB-InfoBox-footerItem">
-      <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
-    </li>
-    <li class="CDB-InfoBox-footerItem CDB-InfoBox-footerItem--right">
-      <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
-        <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
-      </button>
-    </li>
-  </ul>
-</div>
-```
-*/
-
-.CDB-InfoBox {
-  padding: 12px 16px;
-  border-radius: 4px;
-  background: $cThirdBackground;
-  &.is-alert {
-    background: rgba($cHighlightYellow, 0.6);
-  }
-}
-
-.CDB-InfoBox-footer {
-  @include display-flex();
-  @include align-items(center);
-}
-
-.CDB-InfoBox-footerItem {
-  @include flex(1);
-}
-
-.CDB-InfoBox-footerItem--right {
-  text-align: right;
-}

src/scss/cdb-components/buttons.scss

@@ -1,179 +0,0 @@
-// Buttons styles
-// ----------------------------------------------
-
-/* SG
-# Buttons/Primary
-
-Layout Component:
-[CDB-Button][CDB-Button--primary | CDB-Button--secondary]
-
-```
-<button class="CDB-Button CDB-Button--primary">
-  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-</button>
-
-<button class="CDB-Button CDB-Button--primary is-disabled">
-  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-</button>
-
-<button class="CDB-Button CDB-Button--primary CDB-Button--small">
-  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
-</button>
-
-<button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
-  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
-</button>
-
-<button class="CDB-Button CDB-Button--primary CDB-Button--icon">
-  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
-</button>
-
-<br/>
-<br/>
-<br/>
-
-<div style="background: #2E3C43; padding: 20px;">
-  <button class="CDB-Button CDB-Button--primary">
-    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-  </button>
-
-  <button class="CDB-Button CDB-Button--primary is-disabled">
-    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-  </button>
-
-  <button class="CDB-Button CDB-Button--primary CDB-Button--small">
-    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
-  </button>
-
-  <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
-    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
-  </button>
-
-  <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
-    <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
-  </button>
-
-</div>
-
-```
-*/
-
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
-
-.CDB-Button {
-  padding: $baseSize $baseSize + 12;
-  border-radius: $baseSize / 2;
-  cursor: pointer;
-
-  .CDB-Button-Text {
-    display: block;
-  }
-  &.is-disabled {
-    cursor: default;
-    opacity: 0.24;
-  }
-}
-
-.CDB-Button--small {
-  padding: $baseSize - 3 $baseSize + 4;
-}
-.CDB-Button--icon {
-  padding: 7px 9px;
-}
-
-.CDB-Button--primary {
-  background: $cBlue;
-  color: $cWhite;
-
-  &:hover {
-    background: darken($cBlue, 8%);
-  }
-  &:active {
-    background: darken($cBlue, 16%);
-  }
-
-  &.is-disabled {
-    &:hover {
-      background: $cBlue;
-    }
-    &:active {
-      background: $cBlue;
-    }
-  }
-}
-
-
-
-// Buttons styles
-// ----------------------------------------------
-
-/* SG
-# Buttons/Secondary
-
-```
-<button class="CDB-Button CDB-Button--secondary">
-  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-</button>
-
-<button class="CDB-Button CDB-Button--secondary is-disabled">
-  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-</button>
-
-<button class="CDB-Button CDB-Button--secondary CDB-Button--small">
-  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
-</button>
-
-<button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
-  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
-</button>
-
-<br/>
-<br/>
-<br/>
-
-<div style="background: #2E3C43; padding: 20px;">
-  <button class="CDB-Button CDB-Button--secondary">
-    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-  </button>
-
-  <button class="CDB-Button CDB-Button--secondary is-disabled">
-    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
-  </button>
-
-  <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
-    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
-  </button>
-
-  <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
-    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
-  </button>
-</div>
-
-```
-*/
-
-
-.CDB-Button--secondary {
-  border: 1px solid $cBlue;
-  color: $cBlue;
-
-  &:hover {
-    background: rgba($cBlue, 0.08);
-  }
-  &:active {
-    background: $cBlue;
-    color: $cWhite;
-  }
-
-  &.is-disabled {
-    &:hover {
-      background: $cWhite;
-    }
-    &:active {
-      background: $cWhite;
-    }
-  }
-}

src/scss/cdb-components/carousel.scss

@@ -1,51 +0,0 @@
-// Carousel styles
-// ----------------------------------------------
-
-/* SG
-# Carousel
-
-```
-<div>
-  <ul class="CDB-Carousel">
-    <li class="CDB-CarouselItem is-selected"></li>
-    <li class="CDB-CarouselItem"></li>
-    <li class="CDB-CarouselItem"></li>
-    <li class="CDB-CarouselItem"></li>
-    <li class="CDB-CarouselItem"></li>
-  </ul>
-</div>
-```
-*/
-
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
-.CDB-Carousel {
-  @include display-flex();
-  @include justify-content(flex-start);
-  width: 100%;
-}
-.CDB-CarouselItem {
-  @include display-flex();
-  @include align-items(center);
-  @include justify-content(center);
-  width: $baseSize * 11;
-  height: $baseSize * 7;
-  margin-right: 8px;
-  border: 1px solid $cSecondaryLine;
-  border-radius: 4px;
-  background: $cThirdBackground;
-  box-sizing: border-box;
-
-  &:last-child {
-    margin-right: 0;
-  }
-  &:hover {
-    border: 1px solid $cMainLine;
-    cursor: pointer;
-  }
-}
-.CDB-CarouselItem.is-selected {
-  border: 2px solid $cBlue;
-}

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

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

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

@@ -44,31 +44,92 @@
     </ul>
   </div>
 </div>
+
+
+  <div class="CDB-Box-Modal">
+    <div class="CDB-Box-ModalHeader">
+      <nav class="CDB-NavMenu">
+        <ul class="CDB-NavMenu-Inner CDB-NavMenu-Inner--no-margin CDB-NavMenu-Inner--is-dropdown CDB-Text is-semibold CDB-Size-medium">
+          <li class="CDB-NavMenu-Item">
+            <button class="CDB-NavMenu-Link">SOLID</button>
+          </li>
+          <li class="CDB-NavMenu-Item is-selected">
+            <button class="CDB-NavMenu-Link">BY VALUE</button>
+          </li>
+        </ul>
+      </nav>
+      <div class="CDB-Box-ModalHeaderItem">
+        <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputTextPlain CDB-Text">
+        <button class="u-lSpace--xl">
+          <div class="CDB-Shape">
+            <div class="CDB-Shape-magnify is-blue is-small"></div>
+          </div>
+        </button>
+      </div>
+    </div>
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+  </div>
+
+  <br/>
+  <br/>
+  <br/>
+  <br/>
+
+  <div class="CDB-Box-Modal">
+    <div class="CDB-Box-modalHeader">
+      <nav class="CDB-NavMenu">
+        <ul class="CDB-NavMenu-Inner CDB-NavMenu-inner--no-margin CDB-NavMenu-inner--is-dropdown CDB-Text is-semibold CDB-Size-medium">
+          <li class="CDB-NavMenu-Item">
+            <button class="CDB-NavMenu-Link">SOLID</button>
+          </li>
+          <li class="CDB-NavMenu-Item is-selected">
+            <button class="CDB-NavMenu-Link">BY VALUE</button>
+          </li>
+        </ul>
+      </nav>
+      <div class="CDB-Box-modalHeaderItem">
+        <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputTextPlain CDB-Text">
+        <button class="u-lSpace--xl">
+          <div class="CDB-Shape">
+            <div class="CDB-Shape-close is-blue is-large"></div>
+          </div>
+        </button>
+      </div>
+    </div>
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+  </div>
+
+
 ```
 */
 
-@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;
@@ -78,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;
@@ -93,20 +156,23 @@
   &:last-child {
     border-bottom: 0;
   }
+
   &:hover {
-    background-color: rgba(157, 224, 173, 0.2);
+    background-color: rgba($cBlue, 0.08);
     color: $cMainBg;
     cursor: pointer;
   }
-}
-.CDB-Dropdown-optionsElement.is-selected {
-  color: $cMainBg;
-}
-.CDB-Dropdown-optionsElement.is-disabled {
-  color: $cHintText;
 
-  &:hover {
-    background-color: transparent;
-    cursor: default;
+  &.is-selected {
+    color: $cMainBg;
+  }
+
+  &.is-disabled {
+    color: $cHintText;
+
+    &:hover {
+      background-color: transparent;
+      cursor: default;
+    }
   }
 }

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

@@ -0,0 +1,77 @@
+// Input styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Inputs
+
+```
+<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
+<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText has-error CDB-Text">
+<input type="text" name="text" placeholder="DejaVu Sans" disabled class="CDB-InputText is-disabled CDB-Text">
+```
+*/
+
+.CDB-InputText {
+  width: 100%;
+  min-height: 32px;
+  padding: 7px 8px;
+  border: 1px solid $cMainLine;
+  border-radius: $baseSize / 2;
+  font-size: $sFontSize-medium;
+  line-height: $sLineHeight-medium;
+  box-sizing: border-box;
+
+  &.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 $cBlueHover;
+  }
+
+  &:focus {
+    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;
+  background: transparent;
+  font-size: $sFontSize-medium;
+  line-height: $sLineHeight-medium;
+  box-sizing: border-box;
+}
+
+.CDB-FieldError .CDB-InputText {
+  @include default-form-error-style();
+}

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

@@ -59,16 +59,38 @@
   <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
 </div>
 
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-Text CDB-Fieldset">
+  <p class="CDB-Legend CDB-Legend--big u-ellipsis CDB-Text is-semibold CDB-Size-small u-rSpace--m">
+    <input class="CDB-Checkbox" type="checkbox" name="field" value="Sport">
+    <span class="u-iBlock CDB-Checkbox-face u-rSpace--m"></span>
+    <label class="CDB-Text is-semibold CDB-Size-small u-rSpace--m">SPORT</label>
+  </p>
+  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
+</div>
+
+<div class="u-tSpace-xl CDB-Text CDB-Fieldset">
+  <p class="CDB-Legend CDB-Legend--big u-ellipsis CDB-Text is-semibold CDB-Size-small u-rSpace--m">
+    <input class="CDB-Checkbox" type="checkbox" name="field" value="Travel">
+    <span class="u-iBlock CDB-Checkbox-face u-rSpace--m"></span>
+    <label class="CDB-Text is-semibold CDB-Size-small u-rSpace--m">TRAVEL</label>
+  </p>
+  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
+</div>
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-utilities/mixins';
-
 .CDB-Legend {
   width: $baseSize * 12;
 }
 
+.CDB-Legend--big {
+  width: ($baseSize * 24);
+}
+
 .CDB-Fieldset {
   @include display-flex();
   @include align-items(center);
@@ -76,4 +98,3 @@
 .CDB-Fieldset-block {
   width: 100%;
 }
-

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

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

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

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

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

@@ -17,6 +17,32 @@
     </ul>
   </div>
 </div>
+
+<br/>
+<br/>
+<br/>
+
+
+<div class="CDB-Select" style="height: 250px;">
+  <div class="CDB-InputText CDB-Text">DejaVu Sans</div>
+  <div class="CDB-Box-Modal CDB-SelectItem">
+    <ul class="CDB-Text CDB-Size-medium">
+      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Hide</a></li>
+      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Rename</a></li>
+      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Change source dataset…</a></li>
+      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Delete this layer…</a></li>
+    </ul>
+  </div>
+</div>
+
+<div class="CDB-InputText CDB-Text is-cursor is-disabled">DejaVu Sans</div>
+<br/>
+<div class="CDB-InputText CDB-Text is-cursor is-empty">DejaVu Sans</div>
+<br/>
+<div class="CDB-InputText CDB-Text is-cursor is-null">null</div>
+<br/>
+<div class="CDB-InputText CDB-Text is-cursor is-number">46,594</div>
+<br/>
 <select name="select" class="CDB-SelectFake CDB-Text">
   <option value="value1" selected>Choose an option</option>
   <option value="value2">Hide</option>
@@ -29,9 +55,6 @@
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-
 .CDB-Select {
   position: relative;
 }
@@ -51,12 +74,13 @@
   background: $cWhite;
   font-size: $sFontSize-medium;
   line-height: $sLineHeight-medium;
+  box-sizing: border-box;
 
   &:hover {
-    border: 1px solid $cHoverLine;
+    border: 1px solid $cBlueHover;
   }
   &:focus {
-    border: 1px solid $cBlue;
+    border: 1px solid $cBlackHover;
     outline: none;
   }
   &:disabled {
@@ -64,8 +88,15 @@
     background: $cThirdBackground;
   }
   &.has-error {
-    border: 1px solid rgba($cError, 0.48);
-    background: rgba($cError, 0.04);
-    color: $cError;
+    @include default-form-error-style();
+  }
+
+  &.is-cursor {
+    cursor: pointer;
   }
 }
+
+.CDB-FieldError .CDB-Select,
+.CDB-FieldError .CDB-SelectFake {
+  @include default-form-error-style();
+}

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

@@ -0,0 +1,90 @@
+// Tabs Forms styles
+// ----------------------------------------------
+
+/* SG
+# Forms/TabsForms
+
+```
+<div class="CDB-TabsForms u-iBlock">
+  <ul class="CDB-TabsForms-inner">
+    <li class="CDB-TabsForms-item">
+      <button class="CDB-TabsForms-button">
+        <div class="CDB-Shape">
+          <ul class="CDB-Shape-paragraph is-left">
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+            </li>
+          </ul>
+        </div>
+      </button>
+    </li>
+    <li class="CDB-TabsForms-item">
+      <button class="CDB-TabsForms-button">
+        <div class="CDB-Shape">
+          <ul class="CDB-Shape-paragraph is-center">
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+            </li>
+          </ul>
+        </div>
+      </button>
+    </li>
+    <li class="CDB-TabsForms-item">
+      <button class="CDB-TabsForms-button">
+        <div class="CDB-Shape">
+          <ul class="CDB-Shape-paragraph is-right is-active">
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+            </li>
+          </ul>
+        </div>
+      </button>
+    </li>
+  </ul>
+</div>
+```
+*/
+
+.CDB-TabsForms {
+  border: 1px solid $cMainLine;
+  border-radius: 4px;
+}
+.CDB-TabsForms-inner {
+  @include display-flex();
+}
+.CDB-TabsForms-item {
+  border-left: 1px solid $cSecondaryLine;
+}
+.CDB-TabsForms-item:first-child {
+  border-left: 0;
+}
+.CDB-TabsForms-button {
+  padding: 7px 8px;
+}

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

@@ -11,9 +11,6 @@
 ```
 */
 
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-
 .CDB-Textarea {
   width: 100%;
   padding: 7px 8px 6px;
@@ -21,6 +18,7 @@
   border-radius: $baseSize / 2;
   font-size: $sFontSize-medium;
   line-height: $sLineHeight-medium;
+  box-sizing: border-box;
 
   &:hover {
     border: 1px solid $cHoverLine;
@@ -30,13 +28,16 @@
     outline-color: transparent;
     outline-style: none;
   }
-  &:disabled {
+  &:disabled,
+  &.is-disabled {
     border-color: $cSecondaryLine;
     background: $cThirdBackground;
   }
-}
-.CDB-Textarea.has-error {
-  border: 1px solid rgba($cError, 0.48);
-  background: rgba($cError, 0.04);
-  color: $cError;
+  &:has-error {
+    @include default-form-error-style();
   }
+}
+.CDB-FieldError .CDB-Textarea,
+.CDB-Textarea.has-error {
+  @include default-form-error-style();
+}

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

@@ -0,0 +1,83 @@
+// Radio Button styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Toggle
+
+
+```
+<div class="Toggle">
+  <div class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
+    <label class="u-iBlock">TOOLS</label>
+    <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis">
+    <span class="u-iBlock CDB-ToggleFace"></span>
+    <label class="u-iBlock">SQL</label>
+  </div>
+</div>
+
+<br/>
+
+<div class="Toggle">
+  <div class="CDB-Text CDB-Size-small is-semibold is-disabled u-rSpace--xl">
+    <label class="u-iBlock">TOOLS</label>
+    <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis" disabled >
+    <span class="u-iBlock CDB-ToggleFace"></span>
+    <label class="u-iBlock">SQL</label>
+  </div>
+</div>
+```
+*/
+
+.CDB-Toggle {
+  position: absolute;
+  width: $baseSize * 4;
+  height: $baseSize * 2;
+  opacity: 0;
+  z-index: 1;
+
+  &:hover {
+    + .CDB-ToggleFace {
+      background: $cHintTextHover;
+    }
+
+    &:checked + .CDB-ToggleFace {
+      background: $cHighlightHover;
+    }
+  }
+
+  + .CDB-ToggleFace {
+    position: relative;
+    width: $baseSize * 4;
+    height: $baseSize * 2;
+    margin: 0 2px;
+    transition: background 300ms;
+    border-radius: 50px;
+    background: $cHintText;
+
+    &::before {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: $baseSize + 4;
+      height: $baseSize + 4;
+      border-radius: 50%;
+      background: $cWhite;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
+      content: '';
+    }
+  }
+
+  &:checked + .CDB-ToggleFace {
+    background: $cHighlight;
+
+    &::before {
+      right: 2px;
+      left: auto;
+    }
+  }
+}
+
+.Toggle .is-disabled {
+  opacity: 0.24;
+  pointer-events: none;
+}

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

@@ -1,116 +0,0 @@
-// Color input styles
-// ----------------------------------------------
-
-/* SG
-# Forms/Color bar
-
-```
-<ul class="CDB-ColorBarContainer">
-  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #9DE0AD;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #50E3C2;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #FFFFC0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #7ED321;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #BD10E0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #F15743;"></li>
-</ul>
-
-<br/>
-
-<ul class="CDB-ColorBarContainer">
-  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #9DE0AD;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #50E3C2;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #FFFFC0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #7ED321;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #BD10E0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #F15743;"></li>
-</ul>
-
-<br/>
-
-<ul class="CDB-ColorBarContainer">
-  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #9DE0AD;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #50E3C2;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #FFFFC0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #7ED321;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #BD10E0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #F15743;"></li>
-</ul>
-
-<br/>
-
-<ul class="CDB-ColorBarContainer">
-  <li class="CDB-ColorBar" style="background-color: #9DE0AD;"></li>
-</ul>
-
-<br/>
-
-<ul class="CDB-ColorBarContainer">
-  <li class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
-</ul>
- ```
-*/
-
-@import '../../cdb-variables/sizes';
-@import '../../cdb-utilities/mixins';
-
-.CDB-ColorBarContainer {
-  @include display-flex();
-  @include flex-direction(row);
-  width: 100%;
-}
-.CDB-ColorBar {
-  position: relative;
-  width: 100%;
-  height: $baseSize - 2;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: $baseSize - 2;
-  box-sizing: border-box;
-
-  &:last-child {
-    margin-right: 0;
-  }
-}
-.CDB-ColorBar-gradient {
-  border: 0;
-
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: $baseSize - 2;
-    content: '';
-  }
-}
-.CDB-ColorBar.CDB-ColorBar--spaceMedium {
-  margin-right: $baseSize / 2;
-
-  &:last-child {
-    margin-right: 0;
-  }
-}
-.CDB-ColorBar.CDB-ColorBar--spaceless {
-  border-width: 1px 0;
-  border-radius: 0;
-}
-.CDB-ColorBar.CDB-ColorBar--spaceless:first-child {
-  border-width: 1px 0 1px 1px;
-  border-radius: $baseSize - 2 0 0 $baseSize - 2;
-}
-.CDB-ColorBar.CDB-ColorBar--spaceless:last-child {
-  border-width: 1px 1px 1px 0;
-  border-radius: 0 $baseSize - 2 $baseSize - 2 0;
-}
-.CDB-ColorBar.CDB-ColorBar--spaceSmall {
-  margin-right: 2px;
-  border-radius: 2px;
-}
-.CDB-ColorBar.CDB-ColorBar--spaceSmall:first-child {
-  border-radius: $baseSize - 2 3px 3px $baseSize - 2;
-}
-.CDB-ColorBar.CDB-ColorBar--spaceSmall:last-child {
-  margin-right: 0;
-  border-radius: 3px $baseSize - 2 $baseSize - 2 3px;
-}

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

@@ -1,41 +0,0 @@
-// Input styles
-// ----------------------------------------------
-
-/* SG
-# Forms/Inputs
-
-```
-<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
-<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText has-error CDB-Text">
-<input type="text" name="text" placeholder="DejaVu Sans" disabled class="CDB-InputText is-disabled CDB-Text">
-```
-*/
-
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-
-.CDB-InputText {
-  width: 100%;
-  padding: 7px 8px 6px;
-  border: 1px solid $cMainLine;
-  border-radius: $baseSize / 2;
-  font-size: $sFontSize-medium;
-  line-height: $sLineHeight-medium;
-  box-sizing: border-box;
-
-  &:hover {
-    border: 1px solid $cHoverLine;
-  }
-  &:focus {
-    border: 1px solid $cBlue;
-  }
-  &:disabled {
-    border-color: $cSecondaryLine;
-    background: $cThirdBackground;
-  }
-  &.has-error {
-    border: 1px solid rgba($cError, 0.48);
-    background: rgba($cError, 0.04);
-    color: $cError;
-  }
-}

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

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

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

@@ -1,59 +0,0 @@
-// Radio Button styles
-// ----------------------------------------------
-
-/* SG
-# Forms/Toggle
-
-
-```
-<div class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
-  <label class="u-iBlock">TOOLS</label>
-  <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis">
-  <span class="u-iBlock CDB-ToggleFace"></span>
-  <label class="u-iBlock">SQL</label>
-</div>
-```
-*/
-
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-@import '../../cdb-utilities/mixins';
-
-.CDB-Toggle {
-  position: absolute;
-  width: $baseSize * 4;
-  height: $baseSize * 2;
-  opacity: 0;
-  z-index: 1;
-
-  + .CDB-ToggleFace {
-    @include transition(background, 300ms);
-    position: relative;
-    width: $baseSize * 4;
-    height: $baseSize * 2;
-    margin: 0 2px;
-    border-radius: 50px;
-    background: $cHintText;
-
-    &::before {
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      width: $baseSize + 4;
-      height: $baseSize + 4;
-      border-radius: 50%;
-      background: $cWhite;
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
-      content: '';
-    }
-  }
-
-  &:checked + .CDB-ToggleFace {
-    background: $cMainBg;
-
-    &::before {
-      right: 2px;
-      left: auto;
-    }
-  }
-}

src/scss/cdb-components/lists.scss

@@ -1,28 +0,0 @@
-// List styles
-// ----------------------------------------------
-
-/* SG
-# Lists/Lists Decorations
-
-
-```
-  <div class="CDB-Box-Modal">&nbsp;</div>
-```
-*/
-
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
-.CDB-ListDecoration-Item {
-  border-bottom: 1px solid $cSecondaryLine;
-
-  &:last-child {
-    border-bottom: 0;
-  }
-}
-
-.CDB-ListDecoration-ItemLink {
-  display: block;
-  padding: 12px 16px;
-}
-

src/scss/cdb-components/loader.scss

@@ -1,128 +0,0 @@
-// Loader styles
-// ----------------------------------------------
-
-/* SG
-# Loader/principal
-
-This is the generic loader for widgets, maps, components, ...
-
-```
-<div class="CDB-Loader is-visible"></div>
-```
-*/
-
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/colors';
-@import '../cdb-variables/sizes';
-
-.CDB-Loader {
-  @include css3-prefix(animation, loader-progress 1000ms linear 1);
-  @include opacity(0);
-  @include transition(opacity, 1000ms);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: rgba(#3AA9E3, 1);
-  z-index: 10;
-}
-.CDB-Loader.is-visible {
-  @include css3-prefix(animation, loader-progress 2000ms linear infinite);
-  @include opacity(1);
-}
-
-@include keyframes(loader-progress) {
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
-}
-
-/* SG
-# Loader/circle
-
-```
-<div style="padding: 20px;">
-  <div class="CDB-LoaderIcon">
-    <div class="CDB-LoaderIcon-item"></div>
-  </div>
-</div>
-
-<div style="padding: 20px; background: #2E3C43;">
-  <div class="CDB-LoaderIcon is-grey">
-    <div class="CDB-LoaderIcon-item is-grey"></div>
-  </div>
-</div>
-```
-*/
-
-.CDB-LoaderIcon {
-  box-sizing: border-box;
-  position: relative;
-  width: $baseSize * 2;
-  height: $baseSize * 2;
-  border: 2px solid $cMainLine;
-  border-radius: 50%;
-  &.is-grey {
-    border: 2px solid $cSecondaryText;
-  }
-}
-
-.CDB-LoaderIcon-item {
-  @include css3-prefix(animation, loader-icon 1.4s linear infinite);
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  width: $baseSize * 2;
-  height: $baseSize * 2;
-  border-radius: 50%;
-  background: linear-gradient(to right, $cWhite 10%, rgba($cWhite, 0) 42%);
-
-  &::before,
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    content: '';
-  }
-
-  &::before {
-    width: 50%;
-    height: 50%;
-    border-radius: 100% 0 0;
-    background: $cMainLine;
-  }
-  &::after {
-    right: 0;
-    bottom: 0;
-    width: 75%;
-    height: 75%;
-    margin: auto;
-    border-radius: 50%;
-    background: $cWhite;
-  }
-  &.is-grey {
-    background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%);
-    &::before {
-      background: $cSecondaryText;
-    }
-    &::after {
-      background: $cMainBg;
-    }
-  }
-}
-
-
-@include keyframes(loader-icon) {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-

src/scss/cdb-components/menu.scss

@@ -1,153 +0,0 @@
-// Menu styles
-// ----------------------------------------------
-
-/* SG
-# Menu/Navigation
-
-
-```
-<nav class="CDB-NavMenu">
-  <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
-    <li class="CDB-NavMenu-Item">
-      <button class="CDB-NavMenu-Link">DATA</button>
-    </li>
-    <li class="CDB-NavMenu-Item">
-      <button class="CDB-NavMenu-Link">STYLE</button>
-    </li>
-    <li class="CDB-NavMenu-Item is-selected">
-      <button class="CDB-NavMenu-Link">POP-UP</button>
-      <ul class="CDB-NavSubmenu CDB-Size-small">
-        <li class="CDB-NavSubmenu-Item is-selected">
-          <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button>
-        </li>
-        <li class="CDB-NavSubmenu-Item">
-          <button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button>
-        </li>
-      </ul>
-    </li>
-    <li class="CDB-NavMenu-Item">
-      <button class="CDB-NavMenu-Link">LEGEND</button>
-    </li>
-  </ul>
-  <div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;">
-    <!-- ready for a button -->
-  </div>
-</nav>
-
-<br/><br/>
-<br/><br/>
-
-<div style="background: #2E3C43; height: 100px; padding: 20px;">
-  <nav class="CDB-NavMenu is-dark">
-    <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
-      <li class="CDB-NavMenu-Item CDB-Text">
-        <button class="CDB-NavMenu-Link">DATA</button>
-      </li>
-      <li class="CDB-NavMenu-Item">
-        <button class="CDB-NavMenu-Link">STYLE</button>
-      </li>
-      <li class="CDB-NavMenu-item is-selected">
-        <button class="CDB-NavMenu-Link">POP-UP</button>
-        <ul class="CDB-NavSubmenu CDB-Size-small">
-          <li class="CDB-NavSubmenu-Item is-selected">
-            <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></button>
-          </li>
-          <li class="CDB-NavSubmenu-Item">
-            <button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></button>
-          </li>
-        </ul>
-      </li>
-      <li class="CDB-NavMenu-Item">
-        <button class="CDB-NavMenu-Link">LEGEND</button>
-      </li>
-    </ul>
-  </nav>
-</div>
-```
-*/
-
-@import '../cdb-variables/colors';
-@import '../cdb-variables/sizes';
-
-.CDB-NavMenu {
-  position: relative;
-}
-
-.CDB-NavMenu-Inner {
-  position: relative;
-  margin-bottom: 18px;
-  border-bottom: 1px solid $cMainLine;
-}
-
-.CDB-NavMenu-Link {
-  display: block;
-  margin-bottom: -1px;
-  padding: 4px 0 11px;
-  border-bottom: 1px solid transparent;
-  color: $cBlue;
-}
-
-.CDB-NavMenu-Item,
-.CDB-NavSubmenu-Item {
-  display: inline-block;
-  margin-right: 8px;
-  vertical-align: middle;
-}
-
-.CDB-NavMenu-Item.is-selected .CDB-NavMenu-Link {
-  border-bottom: 1px solid $cBlack;
-  color: $cMainText;
-}
-
-.CDB-NavSubmenu {
-  position: absolute;
-  right: 0;
-  left: 0;
-  padding-top: 14px;
-  border-bottom: 1px solid $cSecondaryLine;
-}
-
-.CDB-NavSubmenu-Link {
-  display: block;
-  margin-bottom: -1px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid transparent;
-  color: $cBlue;
-}
-
-.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-Link {
-  border-bottom: 1px solid $cMainLine;
-  color: $cMainText;
-}
-
-.CDB-NavSubmenu-Status {
-  margin-left: 2px;
-}
-
-.CDB-Navmenu.is-dark {
-
-  .CDB-NavMenu-Inner,
-  .CDB-NavSubmenu {
-    border-bottom: 1px solid $cSecondaryText;
-  }
-
-  .CDB-NavMenu-Link,
-  .CDB-NavSubmenu-Link {
-    color: $cAltText;
-  }
-
-  .CDB-NavMenu-Item.is-selected .CDB-NavMenu-Link {
-    border-bottom: 1px solid $cMainLine;
-    color: $cWhite;
-  }
-
-  .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-Link {
-    border-bottom: 1px solid $cMainLine;
-    color: $cWhite;
-  }
-
-  .CDB-NavSubmenu-Status {
-    color: $cSecondaryText;
-  }
-}
-

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,15 +78,10 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-@import '../../cdb-variables/sizes';
-
 .CDB-Shape-Dataset {
   padding-top: 1px;
-  padding-left: 10px;
   &.is-small {
     padding-top: 0;
-    padding-left: 7px;
   }
 }
 
@@ -101,6 +96,7 @@ Description
 
   &:first-child {
     position: relative;
+    margin-left: 0;
     box-shadow: 3px 0 0 $cWhite;
     z-index: 1;
   }
@@ -112,6 +108,7 @@ Description
     height: 6px;
     margin-left: -7px;
     &:first-child {
+      margin-left: 0;
       box-shadow: 2px 0 0 $cWhite;
     }
   }

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;
@@ -81,3 +79,23 @@ Description
     border: 1px solid $cError;
   }
 }
+
+
+.CDB-Shape-CircleItem--fill {
+  &.is-blue {
+    border: 1px solid $cBlue;
+    background: $cBlue;
+  }
+  &.is-white {
+    border: 1px solid $cWhite;
+    background: $cWhite;
+  }
+  &.is-green {
+    border: 1px solid $cHighlight;
+    background: $cHighlight;
+  }
+  &.is-red {
+    border: 1px solid $cError;
+    background: $cError;
+  }
+}

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

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

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

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

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

@@ -0,0 +1,159 @@
+/* SG
+# Shapes/Move
+
+Description
+
+```
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-rectsHandle">
+      <div class="CDB-Shape-rectsHandleItem is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-rectsHandle">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-rectsHandle">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-rectsHandle">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
+    </div>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-rectsHandle is-small">
+      <div class="CDB-Shape-rectsHandleItem is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-rectsHandle is-small">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape">
+    <div class="CDB-Shape-rectsHandle is-small">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-rectsHandle is-small">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
+    </div>
+  </div>
+</div>
+```
+*/
+
+.CDB-Shape-rectsHandle {
+  position: relative;
+  padding: 1px 0 0;
+}
+
+.CDB-Shape-rectsHandle.is-small {
+  padding: 3px 0 0 1px;
+
+  .CDB-Shape-rectsHandleItem {
+    height: 2px;
+    margin-bottom: 2px;
+
+    &::before {
+      left: 5px;
+      width: 2px;
+      height: 2px;
+    }
+    &::after {
+      width: 2px;
+      height: 2px;
+    }
+  }
+}
+
+.CDB-Shape-rectsHandleItem {
+  height: 3px;
+  margin-bottom: 3px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+  &::before {
+    display: block;
+    position: absolute;
+    left: 4px;
+    width: 3px;
+    height: 3px;
+    background: $cMainBg;
+    content: '';
+  }
+
+  &::after {
+    display: block;
+    position: absolute;
+    left: 9px;
+    width: 3px;
+    height: 3px;
+    background: $cMainBg;
+    content: '';
+  }
+}
+
+.CDB-Shape-rectsHandleItem--blue {
+  &::before,
+  &::after {
+    background: $cBlue;
+  }
+}
+
+.CDB-Shape-rectsHandleItem--white {
+  &::before,
+  &::after {
+    background: $cWhite;
+  }
+}
+
+.CDB-Shape-rectsHandleItem--grey {
+  &::before,
+  &::after {
+    background: $cHoverLine;
+  }
+}

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

@@ -0,0 +1,110 @@
+/* SG
+# Shapes/Paragrapgh
+
+Description
+
+```
+<h2>16px</h2>
+<br/>
+<br/>
+<div class="CDB-Shape">
+  <ul class="CDB-Shape-paragraph is-right">
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+    </li>
+  </ul>
+</div>
+<br/>
+<br/>
+<br/>
+<br/>
+<div class="CDB-Shape">
+  <ul class="CDB-Shape-paragraph is-center">
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+    </li>
+  </ul>
+</div>
+<br/>
+<br/>
+<br/>
+<br/>
+<div class="CDB-Shape">
+  <ul class="CDB-Shape-paragraph is-active">
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+    </li>
+    <li class="CDB-Shape-paragraphItem">
+      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+    </li>
+  </ul>
+</div>
+```
+*/
+
+.CDB-Shape-paragraph {
+  padding-top: 3px;
+  text-align: left;
+}
+.CDB-Shape-paragraph.is-center {
+  text-align: center;
+}
+.CDB-Shape-paragraph.is-right {
+  text-align: right;
+}
+.CDB-Shape-paragraphItem {
+  height: 1px;
+  margin-bottom: 2px;
+}
+.CDB-Shape-paragraphItem:last-child {
+  margin-bottom: 0;
+}
+
+.CDB-Shape-paragraphBar {
+  display: inline-block;
+  height: 1px;
+  margin-bottom: 2px;
+  background: $cSecondaryLine;
+  vertical-align: top;
+}
+
+.CDB-Shape-paragraph.is-active .CDB-Shape-paragraphBar {
+  background: $cBlue;
+}
+
+.CDB-Shape-paragraphBar--01 {
+  width: 12px;
+}
+.CDB-Shape-paragraphBar--02 {
+  width: 6px;
+}
+.CDB-Shape-paragraphBar--03 {
+  width: 8px;
+}
+.CDB-Shape-paragraphBar--04 {
+  width: 4px;
+}

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

@@ -102,13 +102,13 @@ Description
 ```
 */
 
-@import '../../cdb-variables/colors';
-
 .CDB-Shape-threePoints {
   display: inline-block;
+  padding: 0 4px;
 }
 .CDB-Shape-threePoints.is-horizontal {
   transform: rotate(90deg);
+  padding: 4px 0;
 }
 
 .CDB-Shape-threePointsItem {

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

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

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

@@ -0,0 +1,109 @@
+/* SG
+# Shapes/Type
+
+Description
+
+```
+<h2>8px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape CDB-Shape--small">
+    <div class="CDB-Type CDB-Type--point">
+      <div class="CDB-Type-circle CDB-Type-circle--02"></div>
+      <div class="CDB-Type-circle CDB-Type-circle--03"></div>
+      <div class="CDB-Type-circle CDB-Type-circle--04"></div>
+    </div>
+  </div>
+</div>
+<br/>
+<div style="padding: 20px;">
+  <div class="CDB-Shape CDB-Shape--small">
+    <div class="CDB-Type CDB-Type--line">
+      <div class="CDB-Type-circle CDB-Type-circle--02"></div>
+      <div class="CDB-Type-circle CDB-Type-circle--03"></div>
+    </div>
+  </div>
+</div>
+<br/>
+<div style="padding: 20px;">
+  <div class="CDB-Shape CDB-Shape--small">
+    <div class="CDB-Type CDB-Type--polygon">
+      <div class="CDB-Type-circle CDB-Type-circle--01"></div>
+      <div class="CDB-Type-circle CDB-Type-circle--02"></div>
+      <div class="CDB-Type-circle CDB-Type-circle--03"></div>
+      <div class="CDB-Type-circle CDB-Type-circle--04"></div>
+    </div>
+  </div>
+</div>
+```
+*/
+
+.CDB-Shape {
+  width: 16px;
+  height: 16px;
+  text-align: center;
+}
+.CDB-Shape--small {
+  width: 8px;
+  height: 8px;
+}
+.CDB-Shape--medium {
+  width: 24px;
+  height: 24px;
+}
+.CDB-Shape:hover {
+  cursor: pointer;
+}
+
+.CDB-Type {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.CDB-Type-circle {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: $cHoverLine;
+}
+.CDB-Type-circle--01 {
+  top: 0;
+  left: 0;
+}
+.CDB-Type-circle--02 {
+  top: 0;
+  right: 0;
+}
+.CDB-Type-circle--03 {
+  bottom: 0;
+  left: 0;
+}
+.CDB-Type-circle--04 {
+  right: 0;
+  bottom: 0;
+}
+
+.CDB-Type--polygon::before {
+  display: block;
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  left: 1px;
+  border: 1px solid $cHoverLine;
+  content: '';
+}
+
+.CDB-Type--line::before {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 3px;
+  width: 1px;
+  transform: rotate(45deg);
+  background: $cHoverLine;
+  content: '';
+}

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

@@ -1,130 +0,0 @@
-/* SG
-# Shapes/Move
-
-Description
-
-```
-<h2>16px</h2>
-<div style="padding: 20px;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move">
-      <div class="CDB-Shape-MoveItem is-first"></div>
-      <div class="CDB-Shape-MoveItem is-second"></div>
-      <div class="CDB-Shape-MoveItem is-third"></div>
-    </div>
-  </div>
-</div>
-<div style="padding: 20px;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move">
-      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
-    </div>
-  </div>
-</div>
-<div style="padding: 20px; background: #2E3C43;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
-    <div class="CDB-Shape-Move">
-      <div class="CDB-Shape-MoveItem is-white is-first"></div>
-      <div class="CDB-Shape-MoveItem is-white is-second"></div>
-      <div class="CDB-Shape-MoveItem is-white is-third"></div>
-    </div>
-  </div>
-</div>
-<br>
-<br>
-<br>
-<br>
-<h2>12px</h2>
-<div style="padding: 20px;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move is-small">
-      <div class="CDB-Shape-MoveItem is-first"></div>
-      <div class="CDB-Shape-MoveItem is-second"></div>
-      <div class="CDB-Shape-MoveItem is-third"></div>
-    </div>
-  </div>
-</div>
-<div style="padding: 20px;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move is-small">
-      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
-    </div>
-  </div>
-</div>
-<div style="padding: 20px; background: #2E3C43;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
-    <div class="CDB-Shape-Move is-small">
-      <div class="CDB-Shape-MoveItem is-white is-first"></div>
-      <div class="CDB-Shape-MoveItem is-white is-second"></div>
-      <div class="CDB-Shape-MoveItem is-white is-third"></div>
-    </div>
-  </div>
-</div>
-```
-*/
-
-@import '../../cdb-variables/colors';
-
-.CDB-Shape-Move {
-  padding: 1px 0 0;
-}
-
-.CDB-Shape-Move.is-small {
-  padding: 3px 0 0 1px;
-
-  .CDB-Shape-MoveItem {
-    margin-bottom: 2px;
-
-    &::before {
-      width: 2px;
-      height: 2px;
-    }
-    &::after {
-      width: 2px;
-      height: 2px;
-      margin-left: 1px;
-    }
-  }
-}
-
-.CDB-Shape-MoveItem {
-  margin-bottom: 3px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-  &::before {
-    display: inline-block;
-    width: 3px;
-    height: 3px;
-    background: $cMainBg;
-    content: '';
-  }
-
-  &::after {
-    display: inline-block;
-    width: 3px;
-    height: 3px;
-    margin-left: 2px;
-    background: $cMainBg;
-    content: '';
-  }
-}
-
-.CDB-Shape-MoveItem.is-blue {
-  &::before,
-  &::after {
-    background: $cBlue;
-  }
-}
-
-.CDB-Shape-MoveItem.is-white {
-  &::before,
-  &::after {
-    background: $cWhite;
-  }
-}

src/scss/cdb-utilities/_defaults.scss

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

src/scss/cdb-utilities/_fonts.scss

@@ -0,0 +1,30 @@
+// Fonts
+// --------------------------------------------------
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/OpenSans-Light.eot');
+  src: url('../fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/OpenSans-Light.woff') format('woff'),
+  url('../fonts/OpenSans-Light.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/OpenSans-Regular.eot');
+  src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/OpenSans-Regular.woff') format('woff'),
+  url('../fonts/OpenSans-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/OpenSans-Semibold.eot');
+  src: url('../fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/OpenSans-Semibold.woff') format('woff'),
+  url('../fonts/OpenSans-Semibold.ttf') format('truetype');
+}

src/scss/cdb-utilities/_helpers.scss

@@ -1,9 +1,6 @@
 // Helper classes
 // ----------------------------------------------
 
-@import './mixins';
-@import '../cdb-variables/colors';
-
 /* Margins */
 .u-tSpace {
   margin-top: 4px;
@@ -38,9 +35,18 @@
 .u-lSpace {
   margin-left: 4px;
 }
+.u-lSpace--s {
+  margin-left: 2px;
+}
+.u-lSpace--m {
+  margin-left: 8px;
+}
 .u-lSpace--xl {
   margin-left: 12px;
 }
+.u-lSpace--xxl {
+  margin-left: 16px;
+}
 
 .u-ellipsis {
   text-overflow: ellipsis;
@@ -49,11 +55,15 @@
 }
 
 // Colors
-// Main Text Color is default color 
+// Main Text Color is default color
 // ----------------------------------------------
 
 .u-actionTextColor {
   color: $cBlue;
+
+  &:hover {
+    color: $cBlueHover;
+  }
 }
 .u-mainTextColor {
   color: $cMainText;
@@ -67,6 +77,15 @@
 .u-hintTextColor {
   color: $cHintText;
 }
+.u-alertTextColor {
+  color: $cAlert;
+}
+.u-whiteTextColor {
+  color: $cWhite;
+}
+.u-errorTextColor {
+  color: $cError;
+}
 
 /* Displays */
 .u-iBlock {
@@ -84,6 +103,33 @@
   text-transform: uppercase;
 }
 
+/* Flex */
+.u-flex {
+  @include display-flex();
+}
+.u-justifySpace {
+  @include justify-content(space-between);
+}
+.u-justifyCenter {
+  @include justify-content(center);
+}
+.u-justifyStart {
+  @include justify-content(flex-start);
+}
+.u-justifyEnd {
+  @include justify-content(flex-end);
+}
+.u-alignStart {
+  @include align-items(flex-start);
+}
+.u-alignCenter {
+  @include align-items(center);
+}
+.u-alignEnd {
+  @include align-items(flex-end);
+}
+
+
 /* Media queries*/
 @include media-query-mobile() {
   .u-showDesktop {
@@ -93,3 +139,10 @@
     display: block !important;
   }
 }
+
+/* helper mixins */
+@mixin default-form-error-style() {
+  border: 1px solid rgba($cError, 0.48);
+  background: rgba($cError, 0.04);
+  color: $cError;
+}

src/scss/cdb-utilities/fonts.scss

@@ -1,25 +0,0 @@
-// Fonts
-// - They are being loaded from Google fonts
-// --------------------------------------------------
-
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
-       url('//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
-       url('//themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
-}
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
-       url('//themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
-}

src/scss/cdb-variables/_colors.scss

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

src/scss/entry.scss

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

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

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

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

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

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

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

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

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

styleguide/_template.html

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

styleguide/theme.css

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

tasks/sass.js

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