add possibility links to buttons

fix loader

.scss-lint.yml

@@ -3,6 +3,7 @@ exclude:
   - 'src/scss/cdb-utilities/normalize.scss'
   - 'src/scss/cdb-utilities/reset.scss'
   - 'src/scss/cdb-utilities/helpers.scss'
+  - 'src/scss/utilities/reset.scss'
   - 'src/scss/variables/_sizes.scss'
 linters:
   BangFormat:

.travis.yml

@@ -0,0 +1,18 @@
+cache: false
+language: node_js
+node_js:
+  - "4.1"
+
+install:
+  - npm install
+
+before_script:
+  - npm install -g grunt-cli
+
+script:
+  - grunt build
+
+notifications:
+  email:
+    on_success: never
+    on_failure: change

README.md

@@ -4,8 +4,9 @@
 
 ### Installation
 As easy as:
-- ```npm install```
+- ```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```
 
 ### Build
 If you want to use any of the CartoAssets components, after the installation just run:

icon-font/svgs/icon-font_104_Edition.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="333px" viewBox="0 0 500 333" 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 -->
+    <title>icon-font_104_Edition</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(-8000.000000, -10082.000000)" fill="#000000">
+            <g id="icon-font_104_Edition" sketch:type="MSLayerGroup" transform="translate(8000.000000, 10082.000000)">
+                <path d="M458.333333,62.4332457 L458.333333,41.4985518 C458.333333,18.615799 439.761032,0 416.850938,0 L41.4823958,0 C18.5348739,0 0,18.5795345 0,41.4985518 L0,291.478759 C0,314.361512 18.5723012,332.977311 41.4823958,332.977311 L323.008802,332.977311 L229.166667,332.977311 L229.166667,312.166229 L41.4823958,312.166229 C30.1003709,312.166229 20.8333333,302.889986 20.8333333,291.478759 L20.8333333,41.4985518 C20.8333333,30.0505525 30.0634509,20.8110819 41.4823958,20.8110819 L416.850938,20.8110819 C428.232962,20.8110819 437.5,30.0873246 437.5,41.4985518 L437.5,62.4332457 L458.333333,62.4332457 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+                <path d="M497.385308,183.623975 L454.059573,138.92734 C450.680166,135.441002 445.186463,135.441002 441.807056,138.92734 L329.160145,255.138592 C328.172318,256.157676 327.565758,257.373424 327.149831,258.660687 C327.11517,258.785838 326.993858,258.875231 326.959198,259.01826 L309.628904,321.59355 C308.762389,324.704436 309.611573,328.065623 311.829851,330.37197 C313.476229,332.070442 315.677176,332.982253 317.947445,332.982253 C318.744638,332.982253 319.541832,332.874981 320.321695,332.642559 L380.977724,314.763904 C381.099036,314.728147 381.185687,314.602997 381.32433,314.567239 C382.572111,314.138152 383.750571,313.512399 384.738398,312.493315 L497.385308,196.282063 C500.764716,192.777846 500.764716,187.128192 497.385308,183.623975 L497.385308,183.623975 Z M378.603474,293.524063 L347.530257,261.467636 L413.264062,193.6539 L444.337279,225.710328 L378.603474,293.524063 L378.603474,293.524063 Z M339.558321,278.523872 L362.070373,301.748244 L330.563899,311.027266 L339.558321,278.523872 L339.558321,278.523872 Z M456.589796,213.070119 L425.516579,181.013692 L447.924649,157.896592 L478.997866,189.953019 L456.589796,213.070119 L456.589796,213.070119 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_105_View.svg

@@ -0,0 +1,15 @@
+<?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 -->
+    <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>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_106_Odyssey.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="498px" height="498px" viewBox="0 0 498 498" 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 -->
+    <title>icon-font_106_Odyssey</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(-1.000000, -11001.000000)" fill="#191919">
+            <g id="icon-font_106_Odyssey" sketch:type="MSLayerGroup" transform="translate(0.000000, 11000.000000)">
+                <path d="M250,498.955327 C387.494231,498.955327 498.955327,387.494231 498.955327,250 C498.955327,112.505769 387.494231,1.04467292 250,1.04467292 C112.505769,1.04467292 1.04467292,112.505769 1.04467292,250 C1.04467292,387.494231 112.505769,498.955327 250,498.955327 L250,498.955327 Z M250,476.40843 C124.958077,476.40843 23.5915705,375.041923 23.5915705,250 C23.5915705,124.958077 124.958077,23.5915705 250,23.5915705 C375.041923,23.5915705 476.40843,124.958077 476.40843,250 C476.40843,375.041923 375.041923,476.40843 250,476.40843 L250,476.40843 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+                <path d="M250,146.660053 C250,141.474266 245.791246,137.265512 240.605459,137.265512 C235.419673,137.265512 231.210919,141.474266 231.210919,146.660053 L231.210919,250 C231.210919,252.630471 232.319475,255.148208 234.25475,256.933171 L346.989238,360.273118 C348.792989,361.926557 351.066468,362.734488 353.339947,362.734488 C355.876473,362.734488 358.412999,361.701088 360.273118,359.690657 C363.786676,355.857684 363.523629,349.920334 359.690657,346.406776 L250,245.866402 L250,146.660053 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_107_Settings.svg

@@ -0,0 +1,19 @@
+<?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 -->
+    <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>
+        </g>
+    </g>
+</svg>

icon-font/template.jst.ejs

@@ -1,7 +1,7 @@
 // Icon font elements
 // ----------------------------------------------
 
-@import "cdb-variables/sizes";
+// Do not import any file (variables, mixins,...) in this stylesheet.
 
 @font-face {
   font-family: 'CartoIcon';
@@ -31,7 +31,7 @@
   vertical-align: top;
 }
 .CDB-IconFont--small {
-  font-size: $sFontSize-small + 1;
+  font-size: 11px;
 }
 
 /* SG

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cartoassets",
   "description": "Share frontend assets between different CartoDB repositories",
-  "version": "0.1.21",
+  "version": "0.1.30",
   "homepage": "https://github.com/cartodb/CartoAssets",
   "author": {
     "name": "CartoDB",

src/scss/cdb-components/avatars.scss

@@ -0,0 +1,53 @@
+// Typography styles
+// ----------------------------------------------
+
+/* SG
+# Avatars/List
+
+```
+<ul class="CDB-AvatarList">
+  <li class="CDB-AvatarList-item">
+    <img src="/src/img/avatar-40x40.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" />
+  </li>
+  <li class="CDB-AvatarList-item">
+    <img src="/src/img/avatar-40x40.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>
+  </li>
+</ul>
+```
+*/
+
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+.CDB-AvatarList {
+  padding-left: 12px;
+}
+
+.CDB-AvatarList-item {
+  display: inline-block;
+  margin-left: -12px;
+  border: 2px solid $cWhite;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+.CDB-AvatarList-itemMore {
+  display: inline-block;
+  margin-left: -12px;
+  padding: 2px 6px;
+  border-left: 2px solid $cWhite;
+  border-radius: 50px;
+  background: $cSecondaryLine;
+}
+
+.CDB-AvatarList-itemMedia {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}

src/scss/cdb-components/boxes.scss

@@ -0,0 +1,213 @@
+// 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);
+}
+
+.CDB-Box-modalHeader {
+  background: $cSecondaryBackground;
+}
+.CDB-Box-modalHeaderItem {
+  @include display-flex();
+  @include align-items(center);
+  padding: $baseSize + 4 $baseSize * 2;
+  border-bottom: 1px solid $cMainLine;
+}
+
+/* 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

@@ -8,20 +8,61 @@ Layout Component:
 [CDB-Button][CDB-Button--primary | CDB-Button--secondary]
 
 ```
-<button class="CDB-Button CDB-Button--primary">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+<a href="#" class="CDB-Button CDB-Button--primary CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</a>
+
+<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>
 
+<a href="#" 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>
+</a>
+
+<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>
+
+
+<a href="#" class="CDB-Button CDB-Button--primary">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</a>
+
+<button class="CDB-Button CDB-Button--primary">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<a href="#" class="CDB-Button CDB-Button--primary is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</a>
+
 <button class="CDB-Button CDB-Button--primary is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
+<a href="#" class="CDB-Button CDB-Button--primary CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</a>
+
 <button class="CDB-Button CDB-Button--primary CDB-Button--small">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
+<a href="#" 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>
+</a>
+
 <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<a href="#" class="CDB-Button CDB-Button--primary CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+</a>
+
+<button class="CDB-Button CDB-Button--primary CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
 </button>
 
 <br/>
@@ -29,21 +70,35 @@ Layout Component:
 <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 Text is-semibold Size-medium">SAVE</span>
+    <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 Text is-semibold Size-medium">SAVE</span>
+    <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 Text is-semibold Size-small">SAVE</span>
+    <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 Text is-semibold Size-small">SAVE</span>
+    <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>
 
 ```
@@ -55,9 +110,12 @@ Layout Component:
 
 
 .CDB-Button {
-  padding: $baseSize $baseSize + 12;
+  display: inline-block;
+  padding: $baseSize + 1 $baseSize + 12;
+  border: 1px solid transparent;
   border-radius: $baseSize / 2;
   cursor: pointer;
+  box-sizing: border-box;
 
   .CDB-Button-Text {
     display: block;
@@ -69,7 +127,15 @@ Layout Component:
 }
 
 .CDB-Button--small {
-  padding: $baseSize - 3 $baseSize + 4;
+  padding: $baseSize / 2 $baseSize + 4;
+}
+
+.CDB-Button--big {
+  padding: $baseSize + 4 $baseSize + 12;
+}
+
+.CDB-Button--icon {
+  padding: 7px 9px;
 }
 
 .CDB-Button--primary {
@@ -93,6 +159,14 @@ Layout Component:
   }
 }
 
+.CDB-Button--primary:link {
+  color: $cWhite;
+}
+
+.CDB-Button--primary:hover {
+  text-decoration: none;
+}
+
 
 
 // Buttons styles
@@ -102,20 +176,28 @@ Layout Component:
 # Buttons/Secondary
 
 ```
+<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</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 Text is-semibold Size-medium">SAVE</span>
+  <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 Text is-semibold Size-medium">SAVE</span>
+  <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 Text is-semibold Size-small">SAVE</span>
+  <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 Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
 <br/>
@@ -123,20 +205,28 @@ Layout Component:
 <br/>
 
 <div style="background: #2E3C43; padding: 20px;">
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </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 Text is-semibold Size-medium">SAVE</span>
+    <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 Text is-semibold Size-medium">SAVE</span>
+    <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 Text is-semibold Size-small">SAVE</span>
+    <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 Text is-semibold Size-small">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
 </div>
 
@@ -146,7 +236,6 @@ Layout Component:
 
 .CDB-Button--secondary {
   border: 1px solid $cBlue;
-  background: $cWhite;
   color: $cBlue;
 
   &:hover {

src/scss/cdb-components/colors.scss

@@ -18,9 +18,9 @@
 @import '../cdb-variables/colors';
 
 .box {
+  display: inline-block;
   width: 120px;
   height: 64px;
-  display: inline-block;
   margin: 0 24px 24px 0;
 }
 
@@ -28,15 +28,15 @@
   background: $cBlue;
 }
 .Color-White {
+  border: 1px solid #E5E5E5;
   background: $cWhite;
-  border: 1px solid #e5e5e5;
 }
 .Color-Dark {
   background: $cBlack;
 }
 
 .Color-MainDark {
-  background: $cMainDark;
+  background: $cMainBg;
 }
 .Color-SecondaryDark {
   background: $cSecondaryDark;
@@ -89,13 +89,13 @@
 
 
 .Color-Type02 {
-  background: $cTypo2;
+  background: $cSecondaryText;
 }
 .Color-Type03 {
-  background: $cTypo3;
+  background: $cAltText;
 }
 .Color-Type04 {
-  background: $cTypo4;
+  background: $cHintText;
 }
 
 

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

@@ -0,0 +1,100 @@
+// CheckBoxes styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Checkbox
+
+```
+<div class="u-iBlock">
+  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+</div>
+<div class="u-iBlock">
+  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus">
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+</div>
+<div class="u-iBlock">
+  <input class="CDB-Checkbox" type="checkbox" name="vehicle" 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;
+  height: $baseSize * 2;
+  opacity: 0;
+  vertical-align: middle;
+  z-index: 1;
+}
+
+.CDB-Checkbox-face {
+  position: relative;
+  width: $baseSize * 2;
+  height: $baseSize * 2;
+  border: 1px solid $cMainLine;
+  border-radius: 3px;
+  background: $cWhite;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  &::before,
+  &::after {
+    display: block;
+    position: absolute;
+    bottom: 3px;
+    width: 2px;
+    border-radius: 1px;
+    background: $cSecondaryLine;
+    content: '';
+  }
+
+  &::before {
+    right: $baseSize / 2;
+    height: $baseSize;
+    transform: rotate(45deg);
+  }
+
+  &::after {
+    left: $baseSize / 2;
+    height: $baseSize - 2;
+    transform: rotate(-45deg);
+  }
+}
+
+.CDB-Checkbox:checked + .CDB-Checkbox-face {
+  border: 1px solid $cBlue;
+  background: $cBlue;
+
+  &::before,
+  &::after {
+    background: $cWhite;
+  }
+}
+
+.CDB-Checkbox:disabled + .CDB-Checkbox-face {
+  border: 1px solid $cSecondaryLine;
+  background: $cThirdBackground;
+
+  &::before,
+  &::after {
+    background: $cWhite;
+  }
+}
+
+.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;
+}

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

@@ -0,0 +1,116 @@
+// 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/dropdowns.scss

@@ -0,0 +1,174 @@
+// Dropdown styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Dropdowns
+
+```
+<div class="CDB-DropdownContainer">
+  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
+  <div class="CDB-Dropdown CDB-Box-Modal">
+    <ul class="CDB-Dropdown-calculations CDB-Text is-semibold">
+      <li class="CDB-Dropdown-calculationsElement">
+        <input class="CDB-Radio" type="radio" name="calculation" value="01" checked>
+        <span class="u-iBlock CDB-Radio-face"></span>
+        <label class="u-iBlock u-lSpace">COUNT</label>
+      </li>
+      <li class="CDB-Dropdown-calculationsElement">
+        <input class="CDB-Radio" type="radio" name="calculation" value="02">
+        <span class="u-iBlock CDB-Radio-face"></span>
+        <label class="u-iBlock u-lSpace">SUM</label>
+      </li>
+      <li class="CDB-Dropdown-calculationsElement">
+        <input class="CDB-Radio" type="radio" name="calculation" value="03">
+        <span class="u-iBlock CDB-Radio-face"></span>
+        <label class="u-iBlock u-lSpace">AVG</label>
+      </li>
+      <li class="CDB-Dropdown-calculationsElement">
+        <input class="CDB-Radio" type="radio" name="calculation" value="04">
+        <span class="u-iBlock CDB-Radio-face"></span>
+        <label class="u-iBlock u-lSpace">MAX</label>
+      </li>
+      <li class="CDB-Dropdown-calculationsElement">
+        <input class="CDB-Radio" type="radio" name="calculation" value="05">
+        <span class="u-iBlock CDB-Radio-face"></span>
+        <label class="u-iBlock u-lSpace">MIN</label>
+      </li>
+    </ul>
+
+    <ul class="CDB-Dropdown-options CDB-Text CDB-Size-medium">
+      <li class="CDB-Dropdown-optionsElement is-selected" title="selected">selected</li>
+      <li class="CDB-Dropdown-optionsElement" title="active">active</li>
+      <li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
+      <li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
+    </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);
+  position: absolute;
+  top: 40px;
+  max-height: 200px;
+}
+.CDB-Dropdown-calculations {
+  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;
+  font-size: $sFontSize-small;
+
+  &:last-child {
+    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;
+  border-bottom: 1px solid $cMainLine;
+  color: $cBlue;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+  &:hover {
+    background-color: rgba(157, 224, 173, 0.2);
+    color: $cMainBg;
+    cursor: pointer;
+  }
+}
+.CDB-Dropdown-optionsElement.is-selected {
+  color: $cMainBg;
+}
+.CDB-Dropdown-optionsElement.is-disabled {
+  color: $cHintText;
+
+  &:hover {
+    background-color: transparent;
+    cursor: default;
+  }
+}

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

@@ -0,0 +1,52 @@
+// 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';
+@import '../../cdb-utilities/helpers';
+
+.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 {
+    @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

@@ -0,0 +1,104 @@
+// Legends styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Labels
+
+```
+<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Radio" type="radio" name="veritas" value="01">
+  <span class="u-iBlock CDB-Radio-face"></span>
+  <label class="u-iBlock u-lSpace">True</label>
+</div>
+<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Radio" type="radio" name="veritas" value="02" checked>
+  <span class="u-iBlock CDB-Radio-face"></span>
+  <label class="u-iBlock u-lSpace">False</label>
+</div>
+
+<br/>
+<br/>
+<br/>
+
+<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+  <label class="u-iBlock u-lSpace">Sport</label>
+</div>
+<label class="u-iblock CDB-Text CDB-Size-medium">
+  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+  <label class="u-iBlock u-lSpace">Travel</label>
+</label>
+
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-Fieldset">
+  <p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
+  <ul class="CDB-Size-medium CDB-Text CDB-Fieldset-block">
+    <li class="u-rSpace--xl u-iblock">
+      <div class="u-iblock CDB-Size-medium">
+        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
+        <span class="u-iBlock CDB-Checkbox-face"></span>
+        <label class="u-iBlock u-lSpace">Sport</label>
+      </div>
+    </li>
+    <li class="u-iblock">
+      <label class="u-iblock CDB-Size-medium">
+        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
+        <span class="u-iBlock CDB-Checkbox-face"></span>
+        <label class="u-iBlock u-lSpace">Travel</label>
+      </label>
+    </li>
+  </ul>
+</div>
+<div class="u-tSpace-xl CDB-Text CDB-Fieldset">
+  <p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
+  <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);
+}
+.CDB-Fieldset-block {
+  width: 100%;
+}
+

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

@@ -0,0 +1,152 @@
+// Color input styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Option input
+
+```
+<div class="CDB-OptionInput is-active CDB-Text">
+  <ul class="CDB-OptionInput-container">
+    <li class="CDB-OptionInput-item is-active">
+      <button type="button" class="CDB-OptionInput-content">8px</button>
+    </li>
+
+    <li class="CDB-OptionInput-item">
+      <button type="button" class="CDB-OptionInput-content">solid</button>
+    </li>
+
+    <li class="CDB-OptionInput-item">
+      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
+        <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
+      </button>
+    </li>
+  </ul>
+</div>
+
+<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 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>
+  </div>
+</button>
+
+<br/>
+<br/>
+
+<button type="button" class="CDB-OptionInput">
+  <div class="CDB-OptionInput-container">
+    <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>
+  </div>
+</button>
+
+<br/>
+<br/>
+
+<button type="button" class="CDB-OptionInput">
+  <div class="CDB-OptionInput-container">
+    <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>
+    </ul>
+  </div>
+</button>
+```
+*/
+
+@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;
+  vertical-align: middle;
+
+  &:hover {
+    border: 1px solid $cHoverLine;
+  }
+  &:focus {
+    border: 1px solid $cBlue;
+  }
+}
+.CDB-OptionInput.is-active {
+  border: 1px solid $cBlue;
+}
+.CDB-OptionInput-container {
+  @include display-flex();
+  @include align-content(center);
+  @include align-items(center);
+  margin: 0 $baseSize;
+}
+.CDB-OptionInput-container--noMargin {
+  margin: 0;
+}
+.CDB-OptionInput-item {
+  @include display-flex();
+  @include align-items(center);
+  @include align-content(center);
+  width: auto;
+  height: 100%;
+  font-size: $sFontSize-medium;
+  box-sizing: content-box;
+
+  &::after {
+    padding: 0 $baseSize - 2;
+    color: $cHintText;
+    content: '·';
+  }
+  &:last-child {
+    width: 100%;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+.CDB-OptionInput-item--noSeparator::after {
+  content: '';
+}
+.CDB-OptionInput-content {
+  @include display-flex();
+  @include align-items(center);
+  height: 100%;
+  color: $cMainBg;
+  box-sizing: content-box;
+  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

@@ -0,0 +1,90 @@
+
+// Radios styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Radio
+
+```
+<div class="u-iBlock">
+  <input class="CDB-Radio" type="radio" name="gender" value="01" checked>
+  <span class="u-iBlock CDB-Radio-face"></span>
+</div>
+<div class="u-iBlock">
+  <input class="CDB-Radio" type="radio" name="gender" value="02">
+  <span class="u-iBlock CDB-Radio-face"></span>
+</div>
+<div class="u-iBlock">
+  <input class="CDB-Radio" type="radio" name="gender" value="03" disabled>
+  <span class="u-iBlock CDB-Radio-face"></span>
+</div>
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+
+.CDB-Radio {
+  position: absolute;
+  width: $baseSize * 2;
+  height: $baseSize * 2;
+  opacity: 0;
+  vertical-align: middle;
+  z-index: 1;
+}
+
+.CDB-Radio-face {
+  position: relative;
+  width: $baseSize * 2;
+  height: $baseSize * 2;
+  border: 1px solid $cMainLine;
+  border-radius: 50%;
+  background: $cWhite;
+  text-indent: 20px;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $baseSize - 2;
+    height: $baseSize - 2;
+    margin-top: -3px;
+    margin-left: -3px;
+    border-radius: 50%;
+    background: $cSecondaryLine;
+    content: '';
+  }
+}
+
+.CDB-Radio:checked + .CDB-Radio-face {
+  border: 1px solid $cBlue;
+  background: $cBlue;
+
+  &::before {
+    background: $cWhite;
+  }
+}
+
+.CDB-Radio:disabled + .CDB-Radio-face {
+  border: 1px solid $cSecondaryLine;
+  background: $cThirdBackground;
+
+  &::before {
+    background: $cWhite;
+  }
+}
+
+.CDB-Radio:disabled:hover + .CDB-Radio-face {
+  border: 1px solid $cSecondaryLine;
+}
+
+.CDB-Radio:hover + .CDB-Radio-face {
+  border: 1px solid $cHoverLine;
+}
+
+.CDB-Radio:focus + .CDB-Radio-face,
+.CDB-Radio:checked:hover + .CDB-Radio-face {
+  border: 1px solid $cBlue;
+}

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

@@ -0,0 +1,76 @@
+// Select styles
+// ----------------------------------------------
+
+
+/* SG
+# Forms/Selects
+
+```
+<div class="CDB-Select" style="height: 250px;">
+  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
+  <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>
+<select name="select" class="CDB-SelectFake CDB-Text">
+  <option value="value1" selected>Choose an option</option>
+  <option value="value2">Hide</option>
+  <option value="value3">Rename</option>
+  <option value="value4">Change source dataset…</option>
+  <option value="value5">Delete this layer…</option>
+</select>
+
+
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/helpers';
+
+.CDB-Select {
+  position: relative;
+}
+
+.CDB-SelectItem {
+  position: absolute;
+  top: 40px;
+}
+
+.CDB-SelectFake {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  padding: 7px 8px 6px;
+  border: 1px solid $cMainLine;
+  border-radius: $baseSize / 2;
+  background: $cWhite;
+  font-size: $sFontSize-medium;
+  line-height: $sLineHeight-medium;
+  box-sizing: border-box;
+
+  &:hover {
+    border: 1px solid $cHoverLine;
+  }
+  &:focus {
+    border: 1px solid $cBlue;
+    outline: none;
+  }
+  &:disabled {
+    border-color: $cSecondaryLine;
+    background: $cThirdBackground;
+  }
+  &.has-error {
+    @include default-form-error-style();
+  }
+}
+
+.CDB-FieldError .CDB-Select,
+.CDB-FieldError .CDB-SelectFake {
+  @include default-form-error-style();
+}

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

@@ -0,0 +1,143 @@
+// 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/tabsForms.scss

@@ -0,0 +1,101 @@
+// 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>
+```
+*/
+
+@import '../../cdb-utilities/mixins';
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+
+
+.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

@@ -0,0 +1,45 @@
+// Textarea styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Textareas
+
+```
+<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea CDB-Text"></textarea>
+<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea has-error CDB-Text"></textarea>
+<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea is-disabled CDB-Text" disabled></textarea>
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/helpers';
+
+.CDB-Textarea {
+  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;
+    outline-color: transparent;
+    outline-style: none;
+  }
+  &:disabled {
+    border-color: $cSecondaryLine;
+    background: $cThirdBackground;
+  }
+  &:has-error {
+    @include default-form-error-style();
+  }
+}
+.CDB-FieldError .CDB-Textarea {
+  @include default-form-error-style();
+}

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

@@ -0,0 +1,59 @@
+// 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: $cHighlight;
+
+    &::before {
+      right: 2px;
+      left: auto;
+    }
+  }
+}

src/scss/cdb-components/headers.scss

@@ -0,0 +1,226 @@
+// Typography styles
+// ----------------------------------------------
+
+/* SG
+# Headers
+
+```
+<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-Actions">
+      <a href="#">
+          <div class="CDB-Shape">
+            <div class="CDB-Shape-threePoints is-blue is-small">
+              <div class="CDB-Shape-threePointsItem"></div>
+              <div class="CDB-Shape-threePointsItem"></div>
+              <div class="CDB-Shape-threePointsItem"></div>
+            </div>
+          </div>
+      </a>
+    </div>
+  </div>
+  <ul class="CDB-HeaderInfo-List">
+    <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">
+      <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" />
+        </li>
+        <li class="CDB-AvatarList-item">
+          <img src="/src/img/avatar-40x40.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" />
+        </li>
+        <li class="CDB-AvatarList-itemMore">
+          <button class="CDB-Text is-semibold CDB-Size-small">+ 16</button>
+        </li>
+      </ul>
+    </li>
+    <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>
+</div>
+
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-HeaderInfo">
+  <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>
+      <ul class="CDB-HeaderInfo-Actions">
+        <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">
+          <a href="#">
+              <div class="CDB-Shape">
+                <div class="CDB-Shape-threePoints is-blue is-small">
+                  <div class="CDB-Shape-threePointsItem"></div>
+                  <div class="CDB-Shape-threePointsItem"></div>
+                  <div class="CDB-Shape-threePointsItem"></div>
+                </div>
+              </div>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="CDB-Shape u-iBlock">
+      <ul class="CDB-Shape-Dataset is-small is-grey">
+        <li class="CDB-Shape-DatasetItem"></li>
+        <li class="CDB-Shape-DatasetItem"></li>
+      </ul>
+    </div>
+    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
+  </div>
+</div>
+
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-HeaderInfo">
+  <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">
+        <a href="#">
+            <div class="CDB-Shape">
+              <div class="CDB-Shape-threePoints is-blue is-small">
+                <div class="CDB-Shape-threePointsItem"></div>
+                <div class="CDB-Shape-threePointsItem"></div>
+                <div class="CDB-Shape-threePointsItem"></div>
+              </div>
+            </div>
+        </a>
+      </div>
+    </div>
+    <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-altTextColor">Positron by CartoDB</p>
+  </div>
+</div>
+
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-HeaderInfo">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
+    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
+  </button>
+  <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">
+        <li class="CDB-Shape-DatasetItem"></li>
+        <li class="CDB-Shape-DatasetItem"></li>
+      </ul>
+    </div>
+    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
+  </div>
+</div>
+
+<br/>
+<br/>
+<br/>
+
+<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">
+        <a href="#">
+          <div class="CDB-Shape">
+            <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
+          </div>
+        </a>
+      </div>
+    </div>
+
+    <p class="CDB-Text u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m">Histogram</p>
+    <p class="CDB-Text CDB-Size-medium u-altTextColor">Distribution of a numeric variable in a range</p>
+  </div>
+</div>
+
+<br/>
+<br/>
+<br/>
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+.CDB-HeaderInfo {
+  @include display-flex();
+  @include align-items(flex-start);
+
+  &.is-block {
+    display: block;
+  }
+}
+.CDB-HeaderInfo-listItem {
+  display: inline-block;
+  margin-right: 8px;
+  vertical-align: middle;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.CDB-HeaderInfo-inner {
+  @include flex(1);
+}
+.CDB-HeaderInfo-back {
+  margin-top: 7px;
+}
+.CDB-HeaderInfo-title {
+  @include display-flex();
+  @include align-items(center);
+}
+.CDB-HeaderInfo-titleText {
+  @include flex(1);
+  width: 0;
+  padding-right: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.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;
+  background-color: $cWhite;
+  color: $cAltText;
+  font-size: $sFontSize-small;
+  line-height: 23px;
+  text-align: center;
+  box-sizing: border-box;
+}

src/scss/cdb-components/lists.scss

@@ -0,0 +1,28 @@
+// 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

@@ -2,10 +2,9 @@
 // ----------------------------------------------
 
 /* SG
-# Loader
+# Loader/principal
 
 This is the generic loader for widgets, maps, components, ...
-There is only one state 'is-visible', in order to make it visible.
 
 ```
 <div class="CDB-Loader is-visible"></div>
@@ -13,6 +12,8 @@ There is only one state 'is-visible', in order to make it visible.
 */
 
 @import '../cdb-utilities/mixins';
+@import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
 
 .CDB-Loader {
   @include css3-prefix(animation, loader-progress 1000ms linear 1);
@@ -39,3 +40,111 @@ There is only one state 'is-visible', in order to make it visible.
     width: 100%;
   }
 }
+
+/* SG
+# Loader/circle
+
+```
+<div style="padding: 20px;">
+  <div class="CDB-LoaderIcon">
+    <div class="CDB-LoaderIcon-item">
+      <span class="CDB-LoaderIcon-itemClose"></span>
+      <span class="CDB-LoaderIcon-itemCircle"></span>
+    </div>
+  </div>
+</div>
+
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-LoaderIcon is-grey">
+    <div class="CDB-LoaderIcon-item">
+      <span class="CDB-LoaderIcon-itemClose"></span>
+      <span class="CDB-LoaderIcon-itemCircle"></span>
+    </div>
+  </div>
+</div>
+
+<div style="padding: 20px; background: #E27D61;">
+  <div class="CDB-LoaderIcon is-bg">
+    <div class="CDB-LoaderIcon-item">
+      <span class="CDB-LoaderIcon-itemClose" style="background: #E27D61"></span>
+      <span class="CDB-LoaderIcon-itemCircle" style="background: #E27D61"></span>
+    </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-bg {
+    border: 2px solid rgba($cWhite, 0.9);
+  }
+  &.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, rgba($cWhite, 0.1) 10%, rgba($cWhite, 0) 42%);
+
+  &.is-grey {
+    background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%);
+  }
+}
+
+.CDB-LoaderIcon-itemCircle {
+  display: inline-block;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 75%;
+  height: 75%;
+  margin: auto;
+  border-radius: 50%;
+}
+
+.CDB-LoaderIcon-itemClose {
+  position: absolute;
+  top: -2px;
+  left: 0;
+  width: 50%;
+  height: 50%;
+  border-radius: 100% 0 0;
+}
+
+.CDB-LoaderIcon-itemCircle,
+.CDB-LoaderIcon-itemClose {
+  background: $cWhite;
+}
+
+.CDB-LoaderIcon.is-grey .CDB-LoaderIcon-itemCircle,
+.CDB-LoaderIcon.is-grey .CDB-LoaderIcon-itemClose {
+  background: $cMainBg;
+}
+
+
+
+@include keyframes(loader-icon) {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+

src/scss/cdb-components/menu.scss

@@ -0,0 +1,196 @@
+// 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>
+```
+*/
+
+@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-inner--no-margin {
+  margin-bottom: 0;
+}
+.CDB-NavMenu-inner--is-dropdown {
+  padding: $baseSize 0 0 $baseSize * 2;
+}
+
+.CDB-NavMenu-link {
+  display: block;
+  margin-bottom: -1px;
+  padding: 4px 0 11px;
+  border-bottom: 1px solid transparent;
+  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 {
+  border-bottom: 1px solid $cSecondaryLine;
+}
+
+.CDB-NavSubmenu--inside {
+  position: absolute;
+  right: 0;
+  left: 0;
+  padding-top: 14px;
+}
+
+.CDB-NavSubmenu--outside {
+  margin-top: -5px;
+  margin-bottom: 18px;
+}
+
+.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.scss

@@ -1,251 +0,0 @@
-// Shapes styles
-// ----------------------------------------------
-
-/* SG
-# Shapes/dot
-
-You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:
-
-```
-<button class="CDB-Shape-dot CDB-Widget-dot--navigation is-selected" data-page="3"></button>
-<button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>
-```
-*/
-
-@import '../cdb-utilities/mixins';
-
-.CDB-Shape-dot {
-  display: inline-block;
-  width: 8px;
-  min-width: 8px;
-  height: 8px;
-  border-radius: 8px;
-}
-
-/* SG
-# Shapes/threePoints
-
-Description
-
-```
-<div></div>
-```
-*/
-
-.CDB-Shape-threePoints {
-  display: inline-block;
-  position: relative;
-  width: 3px;
-  height: 16px;
-  margin-right: -7px;
-  margin-left: 6px;
-  padding: 0 7px 0 10px;
-  text-align: center;
-  vertical-align: middle;
-
-  &:after,
-  &:before {
-    display: inline-block;
-    position: absolute;
-    width: 3px;
-    height: 3px;
-    border-radius: 50%;
-    content: '';
-    z-index: 1;
-  }
-
-  &:before {
-    top: 0;
-    right: 7px;
-  }
-
-  &:after {
-    right: 7px;
-    bottom: 1px;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.CDB-Shape-threePointsItem {
-  display: block;
-  position: absolute;
-  top: 6px;
-  left: 7px;
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-}
-
-/* SG
-# Shapes/lens
-
-Description
-
-```
-<div></div>
-```
-*/
-
-.CDB-Shape-lens {
-  display: inline-block;
-  position: relative;
-  width: 16px;
-  height: 16px;
-
-  &:after,
-  &:before {
-    position: absolute;
-    content: '';
-  }
-  &:after {
-    top: 0;
-    left: 0;
-    width: 8px;
-    height: 8px;
-    border: 1px solid transparent;
-    border-radius: 10px;
-  }
-  &:before {
-    @include css3-prefix(transform, rotate(45deg));
-    right: 3px;
-    bottom: 5px;
-    width: 6px;
-    height: 1px;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-/* SG
-# Shapes/hamburguer
-
-Description
-
-```
-<div></div>
-```
-*/
-
-.CDB-Shape-hamburguer {
-  display: inline-block;
-  position: relative;
-  width: 16px;
-  height: 2px;
-  border: 0;
-  background: #FFF;
-  vertical-align: middle;
-
-  &:before,
-  &:after {
-    display: block;
-    position: absolute;
-    width: 16px;
-    height: 2px;
-    background: #FFF;
-    content: '';
-  }
-  &:before {
-    top: -6px;
-  }
-  &:after {
-    bottom: -6px;
-  }
-}
-
-/* SG
-# Shapes/magnify
-
-Description
-
-```
-<div></div>
-```
-*/
-
-.CDB-Shape-magnify {
-  display: block;
-  position: relative;
-  width: 32px;
-  height: 32px;
-  &:before {
-    display: block;
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    width: 7px;
-    height: 7px;
-    border: 1px solid #636D72;
-    border-radius: 50%;
-    content: '';
-  }
-  &:after {
-    display: block;
-    position: absolute;
-    top: 17px;
-    left: 19px;
-    width: 1px;
-    height: 6px;
-    transform: rotate(314deg);
-    background: #636D72;
-    content: '';
-  }
-}
-
-/* SG
-# Shapes/arrow
-
-Description
-
-```
-<div></div>
-```
-*/
-
-.CDB-Shape-Arrow {
-  display: block;
-  position: absolute;
-  width: 1px;
-  height: 8px;
-  background: #32A8E6;
-
-  &:before {
-    display: block;
-    position: absolute;
-    top: 2px;
-    left: 0;
-    width: 5px;
-    height: 1px;
-    transform: rotate(45deg);
-    background: #32A8E6;
-    content: '';
-  }
-
-  &:after {
-    display: block;
-    position: absolute;
-    top: 2px;
-    left: -4px;
-    width: 5px;
-    height: 1px;
-    transform: rotate(-45deg);
-    background: #32A8E6;
-    content: '';
-  }
-}
-
-.CDB-Shape-Arrow--top {
-  top: 6px;
-  right: 9px;
-  transform: rotate(45deg);
-}
-
-.CDB-Shape-Arrow--bottom {
-  top: 13px;
-  left: 46px;
-  transform: rotate(-135deg);
-}

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

@@ -0,0 +1,131 @@
+/* SG
+# Shapes/Add
+
+Description
+
+```
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-add"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-add is-blue"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-add is-white"></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-add is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-add is-blue is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-add is-white is-small"></div>
+  </div>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape {
+  width: 16px;
+  height: 16px;
+  text-align: center;
+}
+.CDB-Shape--medium {
+  width: 24px;
+  height: 24px;
+}
+.CDB-Shape:hover {
+  cursor: pointer;
+}
+
+
+.CDB-Shape-add {
+  position: relative;
+  height: 100%;
+
+  &::before {
+    display: block;
+    position: absolute;
+    right: 1px;
+    bottom: 7px;
+    left: 0;
+    height: 1px;
+    background: $cMainBg;
+    content: '';
+  }
+
+  &::after {
+    display: block;
+    position: absolute;
+    top: 1;
+    bottom: 0;
+    left: 7px;
+    width: 1px;
+    background: $cMainBg;
+    content: '';
+  }
+}
+
+.CDB-Shape-add.is-small {
+
+  &::before {
+    display: block;
+    position: absolute;
+    right: 3px;
+    bottom: 7px;
+    left: 4px;
+    height: 1px;
+    background: $cMainBg;
+    content: '';
+  }
+
+  &::after {
+    display: block;
+    position: absolute;
+    top: 4px;
+    bottom: 3px;
+    left: 8px;
+    width: 1px;
+    background: $cMainBg;
+    content: '';
+  }
+}
+
+
+
+.CDB-Shape-add.is-blue {
+  &::before,
+  &::after {
+    background: $cBlue;
+  }
+}
+
+.CDB-Shape-add.is-white {
+  &::before,
+  &::after {
+    background: $cWhite;
+  }
+}
+
+
+

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

@@ -0,0 +1,85 @@
+/* SG
+# Shapes/Arrow
+
+Description
+
+```
+<div style="padding: 20px;">
+  <div class="CDB-Shape-Arrow"></div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape-Arrow is-blue"></div>
+</div>
+<div style="padding: 20px; background: #2E3C43">
+  <div class="CDB-Shape-Arrow is-white"></div>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-Arrow {
+  position: relative;
+  width: 1px;
+  height: 8px;
+  background: $cMainBg;
+
+  &::before {
+    display: block;
+    position: absolute;
+    top: 2px;
+    left: 0;
+    width: 5px;
+    height: 1px;
+    transform: rotate(45deg);
+    background: $cMainBg;
+    content: '';
+  }
+
+  &::after {
+    display: block;
+    position: absolute;
+    top: 2px;
+    left: -4px;
+    width: 5px;
+    height: 1px;
+    transform: rotate(-45deg);
+    background: $cMainBg;
+    content: '';
+  }
+  &.is-up {
+    top: 6px;
+    right: 9px;
+    transform: rotate(45deg);
+  }
+
+  &.is-down {
+    top: 13px;
+    left: 46px;
+    transform: rotate(-135deg);
+  }
+}
+
+.CDB-Shape-Arrow.is-blue {
+  background: $cBlue;
+
+  &::before {
+    background: $cBlue;
+  }
+
+  &::after {
+    background: $cBlue;
+  }
+}
+
+.CDB-Shape-Arrow.is-white {
+  background: $cWhite;
+
+  &::before {
+    background: $cWhite;
+  }
+
+  &::after {
+    background: $cWhite;
+  }
+}

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

@@ -0,0 +1,156 @@
+/* SG
+# Shapes/Check circle
+
+Description
+
+```
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem">
+      <div class="CDB-Shape-tick is-medium"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem is-blue">
+      <div class="CDB-Shape-tick is-medium is-blue"></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-CircleItem is-white">
+      <div class="CDB-Shape-tick is-medium is-white"></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-CircleItem is-small">
+      <div class="CDB-Shape-tick is-small"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem is-blue is-small">
+      <div class="CDB-Shape-tick is-small is-blue"></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-CircleItem is-white is-small">
+      <div class="CDB-Shape-tick is-small is-white"></div>
+    </div>
+  </div>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-CircleItem {
+  width: 14px;
+  height: 14px;
+  border: 1px solid $cMainBg;
+  border-radius: 50%;
+
+  &.is-small {
+    width: 12px;
+    height: 12px;
+    transform: translateY(2px);
+  }
+  &.is-blue {
+    border: 1px solid $cBlue;
+  }
+  &.is-white {
+    border: 1px solid $cWhite;
+  }
+}
+
+.CDB-Shape-tick {
+  display: block;
+  position: relative;
+  height: 100%;
+
+  &::before {
+    display: block;
+    position: absolute;
+    width: 1px;
+    transform: rotate(-45deg);
+    background: $cMainBg;
+    content: '';
+  }
+  &::after {
+    display: block;
+    position: absolute;
+    width: 1px;
+    transform: rotate(45deg);
+    background: $cMainBg;
+    content: '';
+  }
+
+  &.is-medium {
+    &::before {
+      top: 5px;
+      left: 4px;
+      height: 4px;
+    }
+    &::after {
+      top: 3px;
+      right: 5px;
+      height: 6px;
+    }
+  }
+
+  &.is-small {
+    &::before {
+      top: 4px;
+      left: 2px;
+      height: 3px;
+    }
+    &::after {
+      top: 2px;
+      right: 3px;
+      height: 5px;
+    }
+  }
+}
+
+.CDB-Shape-tick.is-blue {
+  &::before {
+    background: $cBlue;
+  }
+  &::after {
+    background: $cBlue;
+  }
+}
+
+.CDB-Shape-tick.is-white {
+  &::before {
+    background: $cWhite;
+  }
+  &::after {
+    background: $cWhite;
+  }
+}
+
+.CDB-Shape-tick.is-green {
+  &::before {
+    background: $cHighlight;
+  }
+  &::after {
+    background: $cHighlight;
+  }
+}
+
+
+

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

@@ -0,0 +1,149 @@
+/* SG
+# Shapes/Close
+
+Description
+
+```
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-close is-huge"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-close is-blue is-huge"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-close is-white is-huge"></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-close is-large"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-close is-blue is-large"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-close is-white is-large"></div>
+  </div>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-close {
+  display: block;
+  position: relative;
+  height: 100%;
+
+  &::before {
+    display: block;
+    position: absolute;
+    width: 1px;
+    transform: rotate(-45deg);
+    background: $cMainBg;
+    content: '';
+  }
+  &::after {
+    display: block;
+    position: absolute;
+    width: 1px;
+    transform: rotate(45deg);
+    background: $cMainBg;
+    content: '';
+  }
+
+  &.is-huge {
+    &::before {
+      top: -2px;
+      left: 7px;
+      height: 20px;
+    }
+    &::after {
+      top: -2px;
+      right: 8px;
+      height: 20px;
+    }
+  }
+
+  &.is-large {
+    &::before {
+      top: 2px;
+      left: 7px;
+      height: 12px;
+    }
+    &::after {
+      top: 2px;
+      right: 8px;
+      height: 12px;
+    }
+  }
+
+  &.is-medium {
+    &::before {
+      top: 3px;
+      left: 6px;
+      height: 7px;
+    }
+    &::after {
+      top: 3px;
+      right: 6px;
+      height: 7px;
+    }
+  }
+
+  &.is-small {
+    &::before {
+      top: 2px;
+      left: 4px;
+      height: 5px;
+    }
+    &::after {
+      top: 2px;
+      right: 4px;
+      height: 5px;
+    }
+  }
+}
+
+.CDB-Shape-close.is-blue {
+  &::before {
+    background: $cBlue;
+  }
+  &::after {
+    background: $cBlue;
+  }
+}
+
+.CDB-Shape-close.is-white {
+  &::before {
+    background: $cWhite;
+  }
+  &::after {
+    background: $cWhite;
+  }
+}
+
+.CDB-Shape-close.is-red {
+  &::before {
+    background: $cError;
+  }
+  &::after {
+    background: $cError;
+  }
+}
+

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

@@ -0,0 +1,85 @@
+/* SG
+# Shapes/Dash
+
+Description
+
+```
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-dash"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-dash is-blue"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-dash is-white"></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-dash is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-dash is-blue is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-dash is-white is-small"></div>
+  </div>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-dash {
+  position: relative;
+  height: 100%;
+
+  &::before {
+    display: block;
+    position: absolute;
+    right: 2px;
+    bottom: 7px;
+    left: 2px;
+    height: 1px;
+    background: $cMainBg;
+    content: '';
+  }
+}
+
+.CDB-Shape-dash.is-small {
+
+  &::before {
+    right: 3px;
+    left: 3px;
+  }
+}
+
+.CDB-Shape-dash.is-blue {
+  &::before {
+    background: $cBlue;
+  }
+}
+
+.CDB-Shape-dash.is-white {
+  &::before {
+    background: $cWhite;
+  }
+}
+
+
+

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

@@ -0,0 +1,146 @@
+/* SG
+# Shapes/Dataset
+
+Description
+
+```
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-blue">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-grey">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-white">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-small">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-small is-blue">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-small is-grey">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <ul class="CDB-Shape-Dataset is-small is-white">
+      <li class="CDB-Shape-DatasetItem"></li>
+      <li class="CDB-Shape-DatasetItem"></li>
+    </ul>
+  </div>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+@import '../../cdb-variables/sizes';
+
+.CDB-Shape-Dataset {
+  padding-top: 1px;
+  &.is-small {
+    padding-top: 0;
+  }
+}
+
+.CDB-Shape-DatasetItem {
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  margin-left: -10px;
+  border: 1px solid $cMainBg;
+  border-radius: 50%;
+  background: $cWhite;
+
+  &:first-child {
+    position: relative;
+    margin-left: 0;
+    box-shadow: 3px 0 0 $cWhite;
+    z-index: 1;
+  }
+}
+
+.CDB-Shape-Dataset.is-small {
+  .CDB-Shape-DatasetItem {
+    width: 6px;
+    height: 6px;
+    margin-left: -7px;
+    &:first-child {
+      margin-left: 0;
+      box-shadow: 2px 0 0 $cWhite;
+    }
+  }
+}
+
+.CDB-Shape-Dataset.is-blue {
+  .CDB-Shape-DatasetItem {
+    border: 1px solid $cBlue;
+  }
+}
+
+.CDB-Shape-Dataset.is-grey {
+  .CDB-Shape-DatasetItem {
+    border: 1px solid $cHoverLine;
+  }
+}
+
+.CDB-Shape-Dataset.is-white {
+  .CDB-Shape-DatasetItem {
+    border: 1px solid $cHoverLine;
+    background: $cMainBg;
+    &:first-child {
+      box-shadow: 3px 0 $cMainBg;
+    }
+  }
+}
+
+.CDB-Shape-Dataset.is-white.is-small {
+  .CDB-Shape-DatasetItem:first-child {
+    box-shadow: 2px 0 $cMainBg;
+  }
+}

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

@@ -0,0 +1,28 @@
+// Shape styles
+// ----------------------------------------------
+
+/* SG
+# Shapes/Dots
+
+You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:
+
+```
+<button class="CDB-Shape-dot CDB-Widget-dot--navigation is-selected" data-page="3"></button>
+<button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>
+```
+*/
+
+@import '../../cdb-variables/colors';
+@import '../../cdb-variables/sizes';
+
+.CDB-Shape-dot {
+  display: inline-block;
+  width: $baseSize;
+  height: $baseSize;
+  border-radius: 50%;
+  background: $cSecondaryLine;
+
+  &.is-selected {
+    background: $cSecondaryText;
+  }
+}

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

@@ -0,0 +1,83 @@
+/* SG
+# Shapes/Error circle
+
+Description
+
+```
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem">
+      <div class="CDB-Shape-close is-medium"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem is-blue">
+      <div class="CDB-Shape-close is-medium is-blue"></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-CircleItem is-white">
+      <div class="CDB-Shape-close is-medium is-white"></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-CircleItem is-small">
+      <div class="CDB-Shape-close is-small"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-CircleItem is-blue is-small">
+      <div class="CDB-Shape-close is-small is-blue"></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-CircleItem is-white is-small">
+      <div class="CDB-Shape-close is-small is-white"></div>
+    </div>
+  </div>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-CircleItem {
+  width: 13px;
+  height: 13px;
+  border: 1px solid $cMainBg;
+  border-radius: 50%;
+
+  &.is-small {
+    width: 9px;
+    height: 9px;
+    margin: 0 auto;
+  }
+  &.is-blue {
+    border: 1px solid $cBlue;
+  }
+  &.is-white {
+    border: 1px solid $cWhite;
+  }
+  &.is-green {
+    border: 1px solid $cHighlight;
+  }
+  &.is-red {
+    border: 1px solid $cError;
+  }
+}

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

@@ -0,0 +1,63 @@
+/* SG
+# Shapes/Hamburguer
+
+Description
+
+```
+<div style="padding: 20px">
+  <div class="CDB-Shape-hamburguer">
+    <div class="CDB-Shape-hamburguerItem"></div>
+    <div class="CDB-Shape-hamburguerItem"></div>
+    <div class="CDB-Shape-hamburguerItem"></div>
+  </div>
+</div>
+
+<div style="padding: 20px;">
+  <div class="CDB-Shape-hamburguer is-blue">
+    <div class="CDB-Shape-hamburguerItem"></div>
+    <div class="CDB-Shape-hamburguerItem"></div>
+    <div class="CDB-Shape-hamburguerItem"></div>
+  </div>
+</div>
+
+<div style="background: #2E3C43; padding: 20px;">
+  <div class="CDB-Shape-hamburguer is-white">
+    <div class="CDB-Shape-hamburguerItem"></div>
+    <div class="CDB-Shape-hamburguerItem"></div>
+    <div class="CDB-Shape-hamburguerItem"></div>
+  </div>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+@import '../../cdb-variables/sizes';
+
+.CDB-Shape-hamburguer {
+  width: $baseSize * 2;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.CDB-Shape-hamburguerItem {
+  height: $baseSize / 4;
+  margin-bottom: $baseSize / 4;
+  background: $cMainBg;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.CDB-Shape-hamburguer.is-blue {
+  .CDB-Shape-hamburguerItem {
+    background: $cBlue;
+  }
+}
+
+.CDB-Shape-hamburguer.is-white {
+  .CDB-Shape-hamburguerItem {
+    background: $cWhite;
+  }
+}

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

@@ -0,0 +1,115 @@
+/* SG
+# Shapes/Magnify
+
+Description
+
+```
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-magnify"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-magnify is-blue"></div>
+  </div>
+</div>
+<div style="background: #2E3C43; padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-magnify is-white"></div>
+  </div>
+</div>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-magnify is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-magnify is-blue is-small"></div>
+  </div>
+</div>
+<div style="background: #2E3C43; padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-magnify is-white is-small"></div>
+  </div>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-magnify {
+  display: block;
+  position: relative;
+  height: 100%;
+
+  &::before {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 11px;
+    height: 11px;
+    border: 1px solid $cMainBg;
+    border-radius: 50%;
+    content: '';
+  }
+
+  &::after {
+    display: block;
+    position: absolute;
+    right: 2px;
+    bottom: -1px;
+    width: 1px;
+    height: 7px;
+    transform: rotate(314deg);
+    background: $cMainBg;
+    content: '';
+  }
+}
+
+.CDB-Shape-magnify.is-blue {
+  &::before {
+    border: 1px solid $cBlue;
+  }
+  &::after {
+    background: $cBlue;
+  }
+}
+
+.CDB-Shape-magnify.is-white {
+  &::before {
+    border: 1px solid $cWhite;
+  }
+  &::after {
+    background: $cWhite;
+  }
+}
+
+.CDB-Shape-magnify.is-small {
+  &::before {
+    top: 3px;
+    left: 3px;
+    width: 6px;
+    height: 6px;
+  }
+
+  &::after {
+    display: block;
+    position: absolute;
+    right: 4px;
+    bottom: 2px;
+    width: 1px;
+    height: 5px;
+    transform: rotate(314deg);
+    content: '';
+  }
+}

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

@@ -0,0 +1,161 @@
+/* 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>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.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,112 @@
+/* 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>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.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

@@ -0,0 +1,151 @@
+/* SG
+# Shapes/Three Points
+
+Description
+
+```
+<h2>24px</h2>
+<div style="padding: 20px;">
+  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints is-horizontal is-medium">
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px;">
+  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints is-horizontal is-blue is-medium">
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-threePoints is-horizontal is-white is-medium">
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+      <div class="CDB-Shape-threePointsItem is-round"></div>
+    </div>
+  </button>
+</div>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px;">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints is-blue">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-threePoints is-white">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px;">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-threePoints is-blue is-small">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-threePoints is-white is-small">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-threePoints {
+  display: inline-block;
+}
+.CDB-Shape-threePoints.is-horizontal {
+  transform: rotate(90deg);
+}
+
+.CDB-Shape-threePointsItem {
+  width: 2px;
+  height: 2px;
+  margin-bottom: 5px;
+  background: $cMainBg;
+}
+.CDB-Shape-threePointsItem.is-round {
+  border-radius: 50%;
+}
+.CDB-Shape-threePointsItem:last-child {
+  margin-bottom: 0;
+}
+
+.CDB-Shape-threePoints.is-small {
+  padding-top: 2px;
+}
+.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
+  width: 2px;
+  height: 2px;
+  margin-bottom: 3px;
+}
+
+.CDB-Shape-threePoints.is-medium {
+  padding-top: 2px;
+}
+.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem {
+  width: 4px;
+  height: 4px;
+  margin-bottom: 3px;
+}
+
+.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
+  background: $cBlue;
+}
+
+.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
+  background: $cWhite;
+}

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

@@ -0,0 +1,147 @@
+/* SG
+# Shapes/Toogle Arrows
+
+Description
+
+```
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle is-blue"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-ArrowToogle is-white"></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-ArrowToogle is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle is-blue is-small"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-ArrowToogle is-white is-small"></div>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle is-down"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle is-blue is-down"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-ArrowToogle is-white is-down"></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-ArrowToogle is-small is-down"></div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-ArrowToogle is-white is-small is-down"></div>
+  </div>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-ArrowToogle {
+  position: relative;
+  height: 100%;
+
+  &::before {
+    display: block;
+    position: absolute;
+    top: 8px;
+    left: 0;
+    width: 10px;
+    height: 1px;
+    transform: rotate(-45deg);
+    background: $cMainBg;
+    content: '';
+  }
+  &::after {
+    display: block;
+    position: absolute;
+    top: 8px;
+    right: -1px;
+    width: 10px;
+    height: 1px;
+    transform: rotate(45deg);
+    background: $cMainBg;
+    content: '';
+  }
+}
+
+.CDB-ArrowToogle.is-down {
+  transform: rotate(180deg);
+}
+
+.CDB-ArrowToogle.is-small {
+  &::before {
+    left: 2px;
+    width: 8px;
+  }
+  &::after {
+    right: 1px;
+    width: 8px;
+  }
+}
+
+.CDB-ArrowToogle.is-blue {
+  &::before {
+    background: $cBlue;
+  }
+  &::after {
+    background: $cBlue;
+  }
+}
+
+.CDB-ArrowToogle.is-white {
+  &::before {
+    background: $cWhite;
+  }
+  &::after {
+    background: $cWhite;
+  }
+}

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

@@ -0,0 +1,111 @@
+/* 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>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.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/tags.scss

@@ -0,0 +1,135 @@
+// Typography styles
+// ----------------------------------------------
+
+/* SG
+# Tags / Privacy
+
+```
+<button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
+  PUBLIC
+</button>
+<button class="CDB-Tag is-link CDB-Text is-semibold CDB-Size-small u-iBlock">
+  LINK
+</button>
+<button class="CDB-Tag is-password CDB-Text is-semibold CDB-Size-small u-iBlock">
+  PASSWORD
+</button>
+<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;
+    color: $cPublic;
+  }
+  &.is-link {
+    border: 1px solid $cLink;
+    color: $cLink;
+  }
+  &.is-password {
+    border: 1px solid $cPassword;
+    color: $cPassword;
+  }
+  &.is-private {
+    border: 1px solid $cError;
+    color: $cError;
+  }
+}
+
+/* SG
+# Tags / Metadata
+
+```
+<ul class="CDB-ListTag CDB-Text CDB-Size-medium u-secondaryTextColor">
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--withLink">
+      trees
+      <div class="CDB-Shape u-lSpace">
+        <div class="CDB-Shape-close is-blue is-large"></div>
+      </div>
+    </button>
+  </li>
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--withLink">
+      table_merge
+      <div class="CDB-Shape u-lSpace">
+        <div class="CDB-Shape-close is-blue is-large"></div>
+      </div>
+    </button>
+  </li>
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--withLink">
+      word
+      <div class="CDB-Shape u-lSpace">
+        <div class="CDB-Shape-close is-blue is-large"></div>
+      </div>
+    </button>
+  </li>
+</ul>
+
+```
+*/
+
+.CDB-ListTag {
+  @include display-flex();
+}
+
+.CDB-ListTag-item {
+  margin-right: $baseSize;
+}
+
+.CDB-Tag.CDB-Tag--withLink {
+  @include display-flex();
+  padding: $halfBaseSize $halfBaseSize $halfBaseSize $baseSize;
+  border-radius: $halfBaseSize;
+  background: rgba($cBlue, 0.16);
+}
+
+/* SG
+# Tags / Data Type
+
+```
+<ul class="CDB-ListTag">
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
+      Number
+    </button>
+  </li>
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
+      Text
+    </button>
+  </li>
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
+      String
+    </button>
+  </li>
+</ul>
+
+```
+*/
+
+.CDB-Tag.CDB-Tag--opaque {
+  padding: $baseSize / 4 $halfBaseSize;
+  border-radius: $baseSize / 4;
+  background: $cThirdBackground;
+  text-transform: uppercase;
+}
+

src/scss/cdb-components/tooltips.scss

@@ -0,0 +1,148 @@
+// Info Tooltip
+// ----------------------------------------------
+
+/* SG
+# Info Tooltip
+
+
+```
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--up is-black">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--up is-error">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--down is-black">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--down is-error">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--left is-black">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--left is-error">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--right is-black">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+<div style="position: relative; height: 100px;">
+  <div class="CDB-InfoTooltip CDB-InfoTooltip--right is-error">
+    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
+  </div>
+</div>
+
+
+
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
+
+
+.CDB-InfoTooltip {
+  display: inline-block;
+  position: absolute;
+  padding: $baseSize;
+  border-radius: $halfBaseSize;
+  background: rgba($cMainBg, 0.8);
+}
+.CDB-InfoTooltip::after {
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+  content: '';
+}
+
+.is-black {
+  &.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
+    border-bottom-color: rgba($cMainBg, 0.8);
+  }
+  &.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
+    border-top-color: rgba($cMainBg, 0.8);
+  }
+  &.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
+    border-right-color: rgba($cMainBg, 0.8);
+  }
+  &.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
+    border-left-color: rgba($cMainBg, 0.8);
+  }
+}
+
+.is-error {
+  &.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
+    border-bottom-color: $cError;
+  }
+  &.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
+    border-top-color: $cError;
+  }
+  &.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
+    border-right-color: $cError;
+  }
+  &.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
+    border-left-color: $cError;
+  }
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
+  top: -$baseSize;
+  left: calc(50% - #{$halfBaseSize});
+  border-top-width: $halfBaseSize;
+  border-top-style: solid;
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
+  bottom: -$baseSize;
+  left: calc(50% - #{$halfBaseSize});
+  border-top-width: $halfBaseSize;
+  border-top-style: solid;
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
+  top: calc(50% - #{$halfBaseSize});
+  left: -$baseSize;
+  border-right-width: $halfBaseSize;
+  border-right-style: solid;
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
+  top: calc(50% - #{$halfBaseSize});
+  right: -$baseSize;
+  border-right-width: $halfBaseSize;
+  border-right-style: solid;
+}
+
+.CDB-InfoTooltip.is-error {
+  background: $cError;
+}
+
+.CDB-InfoTooltip-text {
+  color: $cWhite;
+}

src/scss/cdb-components/typography.scss

@@ -5,18 +5,22 @@
 # Typography
 
 ```
-<p class="Text Size-huge">Open Sans 26/34 Regular</p>
-<p class="Text Size-large">Open Sans 16/22 Regular</p>
-<p class="Text is-semibold Size-medium">Open Sans 12/16 Semibold</p>
-<p class="Text Size-medium">Open Sans 12/16 Semibold</p>
-<p class="Text is-semibold Size-small">Open Sans 10/14 Semibold</p>
-<p class="Text Size-small">Open Sans 10/14 Regular</p>
+<p class="CDB-Text CDB-Size-huge">Open Sans 26/34 Regular</p>
+<p class="CDB-Text CDB-Size-huge is-light">Open Sans 26/34 Light</p>
+<p class="CDB-Text CDB-Size-large">Open Sans 16/22 Regular</p>
+<p class="CDB-Text is-semibold CDB-Size-medium">Open Sans 12/16 Semibold</p>
+<p class="CDB-Text is-semibold u-upperCase CDB-Size-medium">Open Sans 12/16 Semibold Uppercase</p>
+<p class="CDB-Text CDB-Size-medium u-secondaryTextColor">Open Sans 12/16 Regular</p>
+<p class="CDB-Text CDB-Size-medium u-altTextColor">Open Sans 12/16 Regular</p>
+<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>
 ```
 */
 
 @import '../cdb-variables/sizes';
 
-.Text {
+.CDB-Text {
   font-family: 'Open Sans';
   $sFontWeight-normal: 400;
 
@@ -28,22 +32,30 @@
   }
 }
 
-.Size-huge {
+.CDB-Size-huge {
   font-size: $sFontSize-huge;
   line-height: $sLineHeight-huge;
 }
 
-.Size-large {
+.CDB-Size-large {
   font-size: $sFontSize-large;
   line-height: $sLineHeight-large;
 }
 
-.Size-medium {
+.CDB-Size-medium {
   font-size: $sFontSize-medium;
   line-height: $sLineHeight-medium;
 }
 
-.Size-small {
+.CDB-Size-small {
   font-size: $sFontSize-small;
   line-height: $sLineHeight-small;
 }
+
+.CDB-FontSize-small {
+  font-size: $sFontSize-small;
+}
+
+.CDB-FontSize-medium {
+  font-size: $sFontSize-medium;
+}

src/scss/cdb-icon-font.scss

@@ -1,7 +1,7 @@
 // Icon font elements
 // ----------------------------------------------
 
-@import "cdb-variables/sizes";
+// Do not import any file (variables, mixins,...) in this stylesheet.
 
 @font-face {
   font-family: 'CartoIcon';
@@ -31,7 +31,7 @@
   vertical-align: top;
 }
 .CDB-IconFont--small {
-  font-size: $sFontSize-small + 1;
+  font-size: 11px;
 }
 
 /* SG
@@ -119,6 +119,30 @@ All available icons in CartoDB.
   </div>
 
 
+  <div class="box">
+    <i class="CDB-IconFont CDB-IconFont-edition Size-large"></i>
+    <h4 class="Text Size-small">edition</h4>
+  </div>
+
+
+  <div class="box">
+    <i class="CDB-IconFont CDB-IconFont-view Size-large"></i>
+    <h4 class="Text Size-small">view</h4>
+  </div>
+
+
+  <div class="box">
+    <i class="CDB-IconFont CDB-IconFont-odyssey Size-large"></i>
+    <h4 class="Text Size-small">odyssey</h4>
+  </div>
+
+
+  <div class="box">
+    <i class="CDB-IconFont CDB-IconFont-settings Size-large"></i>
+    <h4 class="Text Size-small">settings</h4>
+  </div>
+
+
   <div class="box">
     <i class="CDB-IconFont CDB-IconFont-wizard Size-large"></i>
     <h4 class="Text Size-small">wizard</h4>
@@ -716,441 +740,461 @@ All available icons in CartoDB.
 }
 
 
-.CDB-IconFont-wizard::before {
+.CDB-IconFont-edition::before {
   content: '\E00E';
 }
 
 
-.CDB-IconFont-info::before {
+.CDB-IconFont-view::before {
   content: '\E00F';
 }
 
 
-.CDB-IconFont-fork::before {
+.CDB-IconFont-odyssey::before {
   content: '\E010';
 }
 
 
-.CDB-IconFont-facebook::before {
+.CDB-IconFont-settings::before {
   content: '\E011';
 }
 
 
-.CDB-IconFont-folder::before {
+.CDB-IconFont-wizard::before {
   content: '\E012';
 }
 
 
-.CDB-IconFont-dropbox::before {
+.CDB-IconFont-info::before {
   content: '\E013';
 }
 
 
-.CDB-IconFont-cloud::before {
+.CDB-IconFont-fork::before {
   content: '\E014';
 }
 
 
-.CDB-IconFont-step::before {
+.CDB-IconFont-facebook::before {
   content: '\E015';
 }
 
 
-.CDB-IconFont-addDocument::before {
+.CDB-IconFont-folder::before {
   content: '\E016';
 }
 
 
-.CDB-IconFont-arrowNext::before {
+.CDB-IconFont-dropbox::before {
   content: '\E017';
 }
 
 
-.CDB-IconFont-arrowPrev::before {
+.CDB-IconFont-cloud::before {
   content: '\E018';
 }
 
 
-.CDB-IconFont-close::before {
+.CDB-IconFont-step::before {
   content: '\E019';
 }
 
 
-.CDB-IconFont-cartoFante::before {
+.CDB-IconFont-addDocument::before {
   content: '\E01A';
 }
 
 
-.CDB-IconFont-lock::before {
+.CDB-IconFont-arrowNext::before {
   content: '\E01B';
 }
 
 
-.CDB-IconFont-cartoDB::before {
+.CDB-IconFont-arrowPrev::before {
   content: '\E01C';
 }
 
 
-.CDB-IconFont-lens::before {
+.CDB-IconFont-close::before {
   content: '\E01D';
 }
 
 
-.CDB-IconFont-closeLimits::before {
+.CDB-IconFont-cartoFante::before {
   content: '\E01E';
 }
 
 
-.CDB-IconFont-defaultUser::before {
+.CDB-IconFont-lock::before {
   content: '\E01F';
 }
 
 
-.CDB-IconFont-cockroach::before {
+.CDB-IconFont-cartoDB::before {
   content: '\E020';
 }
 
 
-.CDB-IconFont-floppy::before {
+.CDB-IconFont-lens::before {
   content: '\E021';
 }
 
 
-.CDB-IconFont-trash::before {
+.CDB-IconFont-closeLimits::before {
   content: '\E022';
 }
 
 
-.CDB-IconFont-wifi::before {
+.CDB-IconFont-defaultUser::before {
   content: '\E023';
 }
 
 
-.CDB-IconFont-unlock::before {
+.CDB-IconFont-cockroach::before {
   content: '\E024';
 }
 
 
-.CDB-IconFont-unlockWithEllipsis::before {
+.CDB-IconFont-floppy::before {
   content: '\E025';
 }
 
 
-.CDB-IconFont-gift::before {
+.CDB-IconFont-trash::before {
   content: '\E026';
 }
 
 
-.CDB-IconFont-people::before {
+.CDB-IconFont-wifi::before {
   content: '\E027';
 }
 
 
-.CDB-IconFont-play::before {
+.CDB-IconFont-unlock::before {
   content: '\E028';
 }
 
 
-.CDB-IconFont-add::before {
+.CDB-IconFont-unlockWithEllipsis::before {
   content: '\E029';
 }
 
 
-.CDB-IconFont-map::before {
+.CDB-IconFont-gift::before {
   content: '\E02A';
 }
 
 
-.CDB-IconFont-anchor::before {
+.CDB-IconFont-people::before {
   content: '\E02B';
 }
 
 
-.CDB-IconFont-key::before {
+.CDB-IconFont-play::before {
   content: '\E02C';
 }
 
 
-.CDB-IconFont-calendar::before {
+.CDB-IconFont-add::before {
   content: '\E02D';
 }
 
 
-.CDB-IconFont-document::before {
+.CDB-IconFont-map::before {
   content: '\E02E';
 }
 
 
-.CDB-IconFont-eye::before {
+.CDB-IconFont-anchor::before {
   content: '\E02F';
 }
 
 
-.CDB-IconFont-marker::before {
+.CDB-IconFont-key::before {
   content: '\E030';
 }
 
 
-.CDB-IconFont-progressBar::before {
+.CDB-IconFont-calendar::before {
   content: '\E031';
 }
 
 
-.CDB-IconFont-book::before {
+.CDB-IconFont-document::before {
   content: '\E032';
 }
 
 
-.CDB-IconFont-notes::before {
+.CDB-IconFont-eye::before {
   content: '\E033';
 }
 
 
-.CDB-IconFont-rectangles::before {
+.CDB-IconFont-marker::before {
   content: '\E034';
 }
 
 
-.CDB-IconFont-mountain::before {
+.CDB-IconFont-progressBar::before {
   content: '\E035';
 }
 
 
-.CDB-IconFont-points::before {
+.CDB-IconFont-book::before {
   content: '\E036';
 }
 
 
-.CDB-IconFont-snake::before {
+.CDB-IconFont-notes::before {
   content: '\E037';
 }
 
 
-.CDB-IconFont-boss::before {
+.CDB-IconFont-rectangles::before {
   content: '\E038';
 }
 
 
-.CDB-IconFont-rocket::before {
+.CDB-IconFont-mountain::before {
   content: '\E039';
 }
 
 
-.CDB-IconFont-barometer::before {
+.CDB-IconFont-points::before {
   content: '\E03A';
 }
 
 
-.CDB-IconFont-dollar::before {
+.CDB-IconFont-snake::before {
   content: '\E03B';
 }
 
 
-.CDB-IconFont-email::before {
+.CDB-IconFont-boss::before {
   content: '\E03C';
 }
 
 
-.CDB-IconFont-label::before {
+.CDB-IconFont-rocket::before {
   content: '\E03D';
 }
 
 
-.CDB-IconFont-outside::before {
+.CDB-IconFont-barometer::before {
   content: '\E03E';
 }
 
 
-.CDB-IconFont-jigsaw::before {
+.CDB-IconFont-dollar::before {
   content: '\E03F';
 }
 
 
-.CDB-IconFont-tools::before {
+.CDB-IconFont-email::before {
   content: '\E040';
 }
 
 
-.CDB-IconFont-question::before {
+.CDB-IconFont-label::before {
   content: '\E041';
 }
 
 
-.CDB-IconFont-layerStack::before {
+.CDB-IconFont-outside::before {
   content: '\E042';
 }
 
 
-.CDB-IconFont-alarm::before {
+.CDB-IconFont-jigsaw::before {
   content: '\E043';
 }
 
 
-.CDB-IconFont-cloudDownArrow::before {
+.CDB-IconFont-tools::before {
   content: '\E044';
 }
 
 
-.CDB-IconFont-pencil::before {
+.CDB-IconFont-question::before {
   content: '\E045';
 }
 
 
-.CDB-IconFont-fountainPen::before {
+.CDB-IconFont-layerStack::before {
   content: '\E046';
 }
 
 
-.CDB-IconFont-emptyDoc::before {
+.CDB-IconFont-alarm::before {
   content: '\E047';
 }
 
 
-.CDB-IconFont-mergeArrow::before {
+.CDB-IconFont-cloudDownArrow::before {
   content: '\E048';
 }
 
 
-.CDB-IconFont-mergeColumns::before {
+.CDB-IconFont-pencil::before {
   content: '\E049';
 }
 
 
-.CDB-IconFont-mergeSpatial::before {
+.CDB-IconFont-fountainPen::before {
   content: '\E04A';
 }
 
 
-.CDB-IconFont-globe::before {
+.CDB-IconFont-emptyDoc::before {
   content: '\E04B';
 }
 
 
-.CDB-IconFont-chevronDown::before {
+.CDB-IconFont-mergeArrow::before {
   content: '\E04C';
 }
 
 
-.CDB-IconFont-streets::before {
+.CDB-IconFont-mergeColumns::before {
   content: '\E04D';
 }
 
 
-.CDB-IconFont-keys::before {
+.CDB-IconFont-mergeSpatial::before {
   content: '\E04E';
 }
 
 
-.CDB-IconFont-facebookSquare::before {
+.CDB-IconFont-globe::before {
   content: '\E04F';
 }
 
 
-.CDB-IconFont-fullscreen::before {
+.CDB-IconFont-chevronDown::before {
   content: '\E050';
 }
 
 
-.CDB-IconFont-rArrowLight::before {
+.CDB-IconFont-streets::before {
   content: '\E051';
 }
 
 
-.CDB-IconFont-share::before {
+.CDB-IconFont-keys::before {
   content: '\E052';
 }
 
 
-.CDB-IconFont-linkedin::before {
+.CDB-IconFont-facebookSquare::before {
   content: '\E053';
 }
 
 
-.CDB-IconFont-calendarBlank::before {
+.CDB-IconFont-fullscreen::before {
   content: '\E054';
 }
 
 
-.CDB-IconFont-creativeCommons::before {
+.CDB-IconFont-rArrowLight::before {
   content: '\E055';
 }
 
 
-.CDB-IconFont-bubble::before {
+.CDB-IconFont-share::before {
   content: '\E056';
 }
 
 
-.CDB-IconFont-bars::before {
+.CDB-IconFont-linkedin::before {
   content: '\E057';
 }
 
 
-.CDB-IconFont-arrowMenuLight::before {
+.CDB-IconFont-calendarBlank::before {
   content: '\E058';
 }
 
 
-.CDB-IconFont-tieFighter::before {
+.CDB-IconFont-creativeCommons::before {
   content: '\E059';
 }
 
 
-.CDB-IconFont-ray::before {
+.CDB-IconFont-bubble::before {
   content: '\E05A';
 }
 
 
-.CDB-IconFont-markup::before {
+.CDB-IconFont-bars::before {
   content: '\E05B';
 }
 
 
-.CDB-IconFont-table::before {
+.CDB-IconFont-arrowMenuLight::before {
   content: '\E05C';
 }
 
 
-.CDB-IconFont-airlock::before {
+.CDB-IconFont-tieFighter::before {
   content: '\E05D';
 }
 
 
-.CDB-IconFont-pin::before {
+.CDB-IconFont-ray::before {
   content: '\E05E';
 }
 
 
-.CDB-IconFont-attache::before {
+.CDB-IconFont-markup::before {
   content: '\E05F';
 }
 
 
-.CDB-IconFont-download::before {
+.CDB-IconFont-table::before {
   content: '\E060';
 }
 
 
-.CDB-IconFont-group::before {
+.CDB-IconFont-airlock::before {
   content: '\E061';
 }
 
 
-.CDB-IconFont-dashboard::before {
+.CDB-IconFont-pin::before {
   content: '\E062';
 }
 
 
-.CDB-IconFont-spinner::before {
+.CDB-IconFont-attache::before {
   content: '\E063';
 }
 
 
-.CDB-IconFont-mapsearch::before {
+.CDB-IconFont-download::before {
   content: '\E064';
 }
 
 
-.CDB-IconFont-rArrow::before {
+.CDB-IconFont-group::before {
   content: '\E065';
 }
+
+
+.CDB-IconFont-dashboard::before {
+  content: '\E066';
+}
+
+
+.CDB-IconFont-spinner::before {
+  content: '\E067';
+}
+
+
+.CDB-IconFont-mapsearch::before {
+  content: '\E068';
+}
+
+
+.CDB-IconFont-rArrow::before {
+  content: '\E069';
+}

src/scss/cdb-utilities/defaults.css.scss

@@ -0,0 +1,18 @@
+// Default classes
+// ----------------------------------------------
+
+@import '../cdb-variables/colors';
+
+body {
+  color: $cMainText;
+}
+
+a {
+  color: $cBlue;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+

src/scss/cdb-utilities/fonts.scss

@@ -6,17 +6,20 @@
   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');
+  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');
+  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');
+  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-utilities/helpers.scss

@@ -2,13 +2,21 @@
 // ----------------------------------------------
 
 @import './mixins';
+@import '../cdb-variables/colors';
 
+/* Margins */
 .u-tSpace {
   margin-top: 4px;
 }
+.u-tSpace--m {
+  margin-top: 8px;
+}
 .u-tSpace-xl {
   margin-top: 12px;
 }
+.u-rSpace--s {
+  margin-right: 2px;
+}
 .u-rSpace {
   margin-right: 4px;
 }
@@ -18,12 +26,49 @@
 .u-rSpace--xl {
   margin-right: 12px;
 }
+.u-bSpace {
+  margin-bottom: 4px;
+}
+.u-bSpace--m {
+  margin-bottom: 8px;
+}
+.u-bSpace--xl {
+  margin-bottom: 12px;
+}
 .u-lSpace {
   margin-left: 4px;
 }
 .u-lSpace--xl {
   margin-left: 12px;
 }
+
+.u-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+// Colors
+// Main Text Color is default color
+// ----------------------------------------------
+
+.u-actionTextColor {
+  color: $cBlue;
+}
+.u-mainTextColor {
+  color: $cMainText;
+}
+.u-secondaryTextColor {
+  color: $cSecondaryText;
+}
+.u-altTextColor {
+  color: $cAltText;
+}
+.u-hintTextColor {
+  color: $cHintText;
+}
+
+/* Displays */
 .u-iBlock {
   @include inline-block();
 }
@@ -34,6 +79,12 @@
   display: none !important;
 }
 
+/* Decoration */
+.u-upperCase {
+  text-transform: uppercase;
+}
+
+/* Media queries*/
 @include media-query-mobile() {
   .u-showDesktop {
     display: none !important;
@@ -42,3 +93,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/vendor/normalize.scss

@@ -477,13 +477,24 @@ input {
 
 input[type="checkbox"],
 input[type="radio"] {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
+  outline: none;
+  cursor: pointer;
   @if $legacy_browser_support {
     *height: 13px; /* 3 */
     *width: 13px; /* 3 */
   }
 }
+input[type=range]::-webkit-slider-thumb {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 
 /**
  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
@@ -576,3 +587,22 @@ td,
 th {
   padding: 0;
 }
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Remove default styles for forms
+ */
+
+input {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  outline: none;
+  
+  &[type="checkbox"],
+  &[type="radio"] {
+    cursor: pointer;
+  }
+}

src/scss/cdb-utilities/vendor/reset.scss

@@ -16,35 +16,34 @@ article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
-	display: block;
+  display: block;
 }
 body {
-	line-height: 1;
+  line-height: 1;
 }
 ol, ul {
-	list-style: none;
+  list-style: none;
 }
 blockquote, q {
-	quotes: none;
+  quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
-	content: '';
-	content: none;
+  content: '';
 }
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 // Resetting buttons too
 button {
@@ -52,9 +51,9 @@ button {
   padding: 0;
   border: none;
   background: transparent;
-	box-sizing: border-box;
-	outline: none;
+  box-sizing: border-box;
+  outline: none;
 }
 dd, dt {
-	display: inline-block;
+  display: inline-block;
 }

src/scss/cdb-variables/_colors.scss

@@ -5,7 +5,7 @@
 $cBlue: #3AA9E3;
 $cBlack: #000;
 $cWhite: #FFF;
-$cMainDark: #2E3C43;
+$cMainBg: #2E3C43;
 
 //Structure
 $cSecondaryDark: #282C2F;
@@ -18,9 +18,10 @@ $cMainLine: #DDD;
 $cSecondaryLine: #EEE;
 
 //Typography
-$cTypo2: #636D72;
-$cTypo3: #979EA1;
-$cTypo4: #CBCED0;
+$cMainText: #2E3C43;
+$cSecondaryText: #636D72;
+$cAltText: #979EA1;
+$cHintText: #CBCED0;
 
 //Others
 $cHighlight: #9DE0AD;
@@ -29,3 +30,4 @@ $cPublic: #9BC63B;
 $cLink: #FEB100;
 $cPassword: #FB7B23;
 $cError: #F15743;
+$cHighlightYellow: #FFFFC0;

src/scss/cdb-variables/_sizes.scss

@@ -7,6 +7,7 @@ $mobileLayout: 280px;
 
 //Base
 $baseSize: 8px;
+$halfBaseSize: $baseSize / 2;
 
 // Margins
 $sMargin-section: 24px; // To separate main section
@@ -14,7 +15,7 @@ $sMargin-element: 14px; // To separate elements inside a group
 
 // Font sizes
 $sFontSize-small: 10px;
-$sFontSize-medium: 14px;
+$sFontSize-medium: 12px;
 $sFontSize-large: 16px;
 $sFontSize-huge: 26px;