add possibility links to buttons

Merge pull request #106 from CartoDB/fix-loader
fix loader
2016-05-04 17:14:27 +02:00 · 2016-05-04 15:22:42 +02:00 · 2016-05-04 15:13:13 +02:00 · 2016-05-04 15:08:46 +02:00 · 2016-05-04 09:53:53 +02:00 · 2016-05-03 20:10:28 +02:00
53 changed files with 2298 additions and 461 deletions
--- a/.travis.yml
+++ b/.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
--- a/README.md
+++ b/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:
--- a/icon-font/font.sketch
+++ b/icon-font/font.sketch
--- a/icon-font/svgs/icon-font_104_Edition.svg
+++ b/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>
--- a/icon-font/svgs/icon-font_105_View.svg
+++ b/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>
--- a/icon-font/svgs/icon-font_106_Odyssey.svg
+++ b/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>
--- a/icon-font/svgs/icon-font_107_Settings.svg
+++ b/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>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "cartoassets",
  "description": "Share frontend assets between different CartoDB repositories",
-  "version": "0.1.24",
+  "version": "0.1.30",
  "homepage": "https://github.com/cartodb/CartoAssets",
  "author": {
    "name": "CartoDB",
--- a/src/fonts/cartoIcon.eot
+++ b/src/fonts/cartoIcon.eot
--- a/src/fonts/cartoIcon.svg
+++ b/src/fonts/cartoIcon.svg
--- a/src/fonts/cartoIcon.ttf
+++ b/src/fonts/cartoIcon.ttf
--- a/src/fonts/cartoIcon.woff
+++ b/src/fonts/cartoIcon.woff
--- a/src/scss/cdb-components/avatars.scss
+++ b/src/scss/cdb-components/avatars.scss
@@ -16,7 +16,7 @@
    <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>
+    <button class="CDB-Text is-semibold CDB-Size-small u-secondaryTextColor">+ 16</button>
  </li>
 </ul>
 ```
@@ -44,7 +44,6 @@
  border-left: 2px solid $cWhite;
  border-radius: 50px;
  background: $cSecondaryLine;
-  color: $cTypo2;
 }

 .CDB-AvatarList-itemMedia {
--- a/src/scss/cdb-components/boxes.scss
+++ b/src/scss/cdb-components/boxes.scss
@@ -2,11 +2,11 @@
 // ----------------------------------------------

 /* SG
-# Boxes/Box Dropdown
+# Boxes/Dropdown


 ```
-  <div class="CDB-Box-Modal">&nbsp;</div>
+  <div class="CDB-Box-modal">&nbsp;</div>
 ```
 */

@@ -14,13 +14,152 @@
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';

-.CDB-Box-Modal {
+.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

--- a/src/scss/cdb-components/buttons.scss
+++ b/src/scss/cdb-components/buttons.scss
@@ -8,22 +8,59 @@ Layout Component:
 [CDB-Button][CDB-Button--primary | CDB-Button--secondary]

 ```
-<button class="CDB-Button CDB-Button--primary">
+<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>

-<button class="CDB-Button CDB-Button--primary is-disabled">
+<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 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 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 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>
@@ -33,14 +70,23 @@ Layout Component:
 <br/>

 <div style="background: #2E3C43; padding: 20px;">
-  <button class="CDB-Button CDB-Button--primary">
+
+  <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 is-disabled">
+  <button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

+  <button class="CDB-Button CDB-Button--primary">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--primary is-disabled">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  </button>
+
  <button class="CDB-Button CDB-Button--primary CDB-Button--small">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  </button>
@@ -64,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;
@@ -78,8 +127,13 @@ 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;
 }
@@ -105,6 +159,14 @@ Layout Component:
  }
 }

+.CDB-Button--primary:link {
+  color: $cWhite;
+}
+
+.CDB-Button--primary:hover {
+  text-decoration: none;
+}
+


 // Buttons styles
@@ -114,6 +176,14 @@ 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 CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
@@ -135,6 +205,14 @@ 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 CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>
--- a/src/scss/cdb-components/colors.scss
+++ b/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;
 }


--- a/src/scss/cdb-components/forms/color_bar.scss
+++ b/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;
+}
--- a/src/scss/cdb-components/forms/dropdowns.scss
+++ b/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;
+  }
+}
--- a/src/scss/cdb-components/forms/inputs.scss
+++ b/src/scss/cdb-components/forms/inputs.scss
@@ -13,6 +13,7 @@

@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/helpers';

 .CDB-InputText {
  width: 100%;
@@ -21,6 +22,7 @@
  border-radius: $baseSize / 2;
  font-size: $sFontSize-medium;
  line-height: $sLineHeight-medium;
+  box-sizing: border-box;

  &:hover {
    border: 1px solid $cHoverLine;
@@ -33,8 +35,18 @@
    background: $cThirdBackground;
  }
  &.has-error {
-    border: 1px solid rgba($cError, 0.48);
-    background: rgba($cError, 0.04);
-    color: $cError;
+    @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();
+}
--- a/src/scss/cdb-components/forms/legends.scss
+++ b/src/scss/cdb-components/forms/legends.scss
@@ -35,37 +35,70 @@
 <br/>
 <br/>

-<fieldset>
-  <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
-  <ul class="CDB-Text CDB-Size-medium u-iBlock">
-    <li class="u-iBlock u-rSpace--xl">
-      <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
+<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-Text CDB-Size-medium">
+      <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>
-</fieldset>
-<fieldset class="u-tSpace-xl CDB-Text">
-  <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
-  <div class="u-iBlock">
-    <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
-  </div>
-</fieldset>
+</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%;
+}
+
--- a/src/scss/cdb-components/forms/option-input.scss
+++ b/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;
+}
--- a/src/scss/cdb-components/forms/selects.scss
+++ b/src/scss/cdb-components/forms/selects.scss
@@ -17,9 +17,22 @@
    </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;
 }
@@ -28,3 +41,36 @@
  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();
+}
--- a/src/scss/cdb-components/forms/tabsForms.scss
+++ b/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;
+}
+
+
+
+
+
+
--- a/src/scss/cdb-components/forms/textarea.scss
+++ b/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();
+}
--- a/src/scss/cdb-components/forms/toggle.scss
+++ b/src/scss/cdb-components/forms/toggle.scss
@@ -33,7 +33,7 @@
    height: $baseSize * 2;
    margin: 0 2px;
    border-radius: 50px;
-    background: $cTypo4;
+    background: $cHintText;

    &::before {
      position: absolute;
@@ -49,7 +49,7 @@
  }

  &:checked + .CDB-ToggleFace {
-    background: $cMainDark;
+    background: $cHighlight;

    &::before {
      right: 2px;
--- a/src/scss/cdb-components/headers.scss
+++ b/src/scss/cdb-components/headers.scss
@@ -6,8 +6,8 @@

 ```
 <div class="CDB-HeaderInfo is-block">
-  <div class="CDB-HeaderInfo-Title u-bSpace">
-    <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
+  <div class="CDB-HeaderInfo-title u-bSpace">
+    <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
    <div class="CDB-HeaderInfo-Actions">
      <a href="#">
          <div class="CDB-Shape">
@@ -21,12 +21,12 @@
    </div>
  </div>
  <ul class="CDB-HeaderInfo-List">
-    <li class="CDB-HeaderInfo-ListItem">
+    <li class="CDB-HeaderInfo-listItem">
      <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
        PUBLIC
      </button>
    </li>
-    <li class="CDB-HeaderInfo-ListItem">
+    <li class="CDB-HeaderInfo-listItem">
      <ul class="CDB-AvatarList u-iBlock">
        <li class="CDB-AvatarList-item">
          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
@@ -42,28 +42,30 @@
        </li>
      </ul>
    </li>
-    <li class="CDB-HeaderInfo-ListItem">
-      <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock">Published 8 days ago</p>
+    <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">
-  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
-  </a>
-  <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>
+  </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">
+        <li class="CDB-HeaderInfo-actionsItem">
          <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
            <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
          </button>
        </li>
-        <li class="CDB-HeaderInfo-ActionsItem">
+        <li class="CDB-HeaderInfo-actionsItem">
          <a href="#">
              <div class="CDB-Shape">
                <div class="CDB-Shape-threePoints is-blue is-small">
@@ -85,18 +87,19 @@
    <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">
-  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
-  </a>
-  <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">
+  </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">
@@ -108,18 +111,19 @@
        </a>
      </div>
    </div>
-    <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium">Positron by CartoDB</p>
+    <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">
-  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
-  </a>
-  <div class="CDB-HeaderInfo-Inner">
+  </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">
@@ -130,10 +134,35 @@
    <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/>
 ```
 */

@@ -143,13 +172,13 @@

 .CDB-HeaderInfo {
  @include display-flex();
+  @include align-items(flex-start);

  &.is-block {
    display: block;
  }
 }
-
-.CDB-HeaderInfo-ListItem {
+.CDB-HeaderInfo-listItem {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
@@ -159,24 +188,17 @@
  }
 }

-.CDB-HeaderInfo-Text {
-  color: $cTypo3;
-}
-
-.CDB-HeaderInfo-Inner {
+.CDB-HeaderInfo-inner {
  @include flex(1);
 }
-
-.CDB-HeaderInfo-Back {
+.CDB-HeaderInfo-back {
  margin-top: 7px;
 }
-
-.CDB-HeaderInfo-Title {
+.CDB-HeaderInfo-title {
  @include display-flex();
  @include align-items(center);
 }
-
-.CDB-HeaderInfo-TitleText {
+.CDB-HeaderInfo-titleText {
  @include flex(1);
  width: 0;
  padding-right: 16px;
@@ -184,12 +206,21 @@
  white-space: nowrap;
  overflow: hidden;
 }
-
-.CDB-HeaderInfo-ActionsItem {
+.CDB-HeaderInfo-actionsItem {
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
 }
-
-
-
+.CDB-HeaderNumeration {
+  width: $baseSize * 3;
+  min-width: $baseSize * 3;
+  height: $baseSize * 3;
+  border: 1px solid $cMainLine;
+  border-radius: 4px;
+  background-color: $cWhite;
+  color: $cAltText;
+  font-size: $sFontSize-small;
+  line-height: 23px;
+  text-align: center;
+  box-sizing: border-box;
+}
--- a/src/scss/cdb-components/lists.scss
+++ b/src/scss/cdb-components/lists.scss
@@ -6,14 +6,14 @@


 ```
-  <div class="CDB-Box-Modal">&nbsp;</div>
+  <div class="CDB-Box-modal">&nbsp;</div>
 ```
 */

@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';

-.CDB-ListDecoration-Item {
+.CDB-ListDecoration-item {
  border-bottom: 1px solid $cSecondaryLine;

  &:last-child {
@@ -21,7 +21,8 @@
  }
 }

-.CDB-ListDecoration-ItemLink {
+.CDB-ListDecoration-itemLink {
  display: block;
  padding: 12px 16px;
 }
+
--- a/src/scss/cdb-components/loader.scss
+++ b/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);
+  }
+}
+
+
--- a/src/scss/cdb-components/menu.scss
+++ b/src/scss/cdb-components/menu.scss
@@ -2,31 +2,31 @@
 // ----------------------------------------------

 /* SG
-# Menu/
+# Menu/Navigation


 ```
 <nav class="CDB-NavMenu">
-  <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
-    <li class="CDB-NavMenu-Item">
-      <a class="CDB-NavMenu-Link" href="#">DATA</a>
+  <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">
-      <a class="CDB-NavMenu-Link" href="#">STYLE</a>
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">STYLE</button>
    </li>
-    <li class="CDB-NavMenu-Item">
-      <a class="CDB-NavMenu-Link" href="#">POP-UP</a>
-      <ul class="CDB-NavSubmenu CDB-Size-small">
-        <li class="CDB-NavSubmenu-Item is-active">
-          <a href="#" class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></a>
+    <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">
-          <a href="#" class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></a>
+        <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">
-      <a class="CDB-NavMenu-Link" href="#">LEGEND</a>
+    <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;">
@@ -39,26 +39,26 @@

 <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">
-        <a class="CDB-NavMenu-Link" href="#">DATA</a>
+    <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">
-        <a class="CDB-NavMenu-Link" href="#">STYLE</a>
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">STYLE</button>
      </li>
-      <li class="CDB-NavMenu-item is-active">
-        <a class="CDB-NavMenu-Link" href="#">POP-UP</a>
-        <ul class="CDB-NavSubmenu CDB-Size-small">
-          <li class="CDB-NavSubmenu-Item is-active">
-            <a href="#" class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></a>
+      <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">
-            <a href="#" class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></a>
+          <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">
-        <a class="CDB-NavMenu-Link" href="#">LEGEND</a>
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">LEGEND</button>
      </li>
    </ul>
  </nav>
@@ -67,96 +67,130 @@
 <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 {
+.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 {
+.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 {
+.CDB-NavMenu-item,
+.CDB-NavSubmenu-item {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
 }

-.CDB-NavMenu-Item.is-active .CDB-NavMenu-Link {
-  border-bottom: 1px solid $cMainDark;
-  color: $cMainDark;
+.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;
-  border-bottom: 1px solid $cSecondaryLine;
 }

-.CDB-NavSubmenu-Link {
+.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-active {
-  .CDB-NavSubmenu-Link {
-    border-bottom: 1px solid $cTypo3;
-    color: $cMainDark;
-  }
+.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
+  border-bottom: 1px solid $cMainLine;
+  color: $cMainText;
 }

-.CDB-NavSubmenu-Status {
+.CDB-NavSubmenu-status {
  margin-left: 2px;
-  color: $cTypo4;
 }

 .CDB-Navmenu.is-dark {

-  .CDB-NavMenu-Inner,
+  .CDB-NavMenu-inner,
  .CDB-NavSubmenu {
-    border-bottom: 1px solid $cTypo2;
+    border-bottom: 1px solid $cSecondaryText;
  }

-  .CDB-NavMenu-Link,
-  .CDB-NavSubmenu-Link {
-    color: $cTypo3;
+  .CDB-NavMenu-link,
+  .CDB-NavSubmenu-link {
+    color: $cAltText;
  }

-  .CDB-NavMenu-Item.is-active {
-    .CDB-NavMenu-Link {
-      border-bottom: 1px solid $cMainLine;
-      color: $cWhite;
-    }
+  .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
+    border-bottom: 1px solid $cMainLine;
+    color: $cWhite;
  }

-  .CDB-NavSubmenu-item.is-active {
-    .CDB-NavSubmenu-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: $cTypo2;
+  .CDB-NavSubmenu-status {
+    color: $cSecondaryText;
  }
 }

-
--- a/src/scss/cdb-components/shapes/add.scss
+++ b/src/scss/cdb-components/shapes/add.scss
@@ -49,10 +49,15 @@ Description
  width: 16px;
  height: 16px;
  text-align: center;
-  &:hover {
-    cursor: pointer;
-  }
 }
+.CDB-Shape--medium {
+  width: 24px;
+  height: 24px;
+}
+.CDB-Shape:hover {
+  cursor: pointer;
+}
+

 .CDB-Shape-add {
  position: relative;
@@ -65,7 +70,7 @@ Description
    bottom: 7px;
    left: 0;
    height: 1px;
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }

@@ -76,7 +81,7 @@ Description
    bottom: 0;
    left: 7px;
    width: 1px;
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }
 }
@@ -90,7 +95,7 @@ Description
    bottom: 7px;
    left: 4px;
    height: 1px;
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }

@@ -101,7 +106,7 @@ Description
    bottom: 3px;
    left: 8px;
    width: 1px;
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }
 }
--- a/src/scss/cdb-components/shapes/arrow.scss
+++ b/src/scss/cdb-components/shapes/arrow.scss
@@ -22,7 +22,7 @@ Description
  position: relative;
  width: 1px;
  height: 8px;
-  background: $cMainDark;
+  background: $cMainBg;

  &::before {
    display: block;
@@ -32,7 +32,7 @@ Description
    width: 5px;
    height: 1px;
    transform: rotate(45deg);
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }

@@ -44,7 +44,7 @@ Description
    width: 5px;
    height: 1px;
    transform: rotate(-45deg);
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }
  &.is-up {
--- a/src/scss/cdb-components/shapes/check-circle.scss
+++ b/src/scss/cdb-components/shapes/check-circle.scss
@@ -60,7 +60,7 @@ Description
 .CDB-Shape-CircleItem {
  width: 14px;
  height: 14px;
-  border: 1px solid $cMainDark;
+  border: 1px solid $cMainBg;
  border-radius: 50%;

  &.is-small {
@@ -86,7 +86,7 @@ Description
    position: absolute;
    width: 1px;
    transform: rotate(-45deg);
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }
  &::after {
@@ -94,31 +94,31 @@ Description
    position: absolute;
    width: 1px;
    transform: rotate(45deg);
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }

  &.is-medium {
    &::before {
-      top: 6px;
+      top: 5px;
      left: 4px;
      height: 4px;
    }
    &::after {
-      top: 4px;
+      top: 3px;
      right: 5px;
-      height: 7px;
+      height: 6px;
    }
  }

  &.is-small {
    &::before {
-      top: 5px;
-      left: 3px;
+      top: 4px;
+      left: 2px;
      height: 3px;
    }
    &::after {
-      top: 3px;
+      top: 2px;
      right: 3px;
      height: 5px;
    }
@@ -143,4 +143,14 @@ Description
  }
 }

+.CDB-Shape-tick.is-green {
+  &::before {
+    background: $cHighlight;
+  }
+  &::after {
+    background: $cHighlight;
+  }
+}
+
+

--- a/src/scss/cdb-components/shapes/close.scss
+++ b/src/scss/cdb-components/shapes/close.scss
@@ -55,7 +55,7 @@ Description
    position: absolute;
    width: 1px;
    transform: rotate(-45deg);
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }
  &::after {
@@ -63,7 +63,7 @@ Description
    position: absolute;
    width: 1px;
    transform: rotate(45deg);
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }

@@ -137,3 +137,13 @@ Description
    background: $cWhite;
  }
 }
+
+.CDB-Shape-close.is-red {
+  &::before {
+    background: $cError;
+  }
+  &::after {
+    background: $cError;
+  }
+}
+
--- a/src/scss/cdb-components/shapes/dash.scss
+++ b/src/scss/cdb-components/shapes/dash.scss
@@ -56,7 +56,7 @@ Description
    bottom: 7px;
    left: 2px;
    height: 1px;
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }
 }
--- a/src/scss/cdb-components/shapes/dataset.scss
+++ b/src/scss/cdb-components/shapes/dataset.scss
@@ -83,10 +83,8 @@ Description

 .CDB-Shape-Dataset {
  padding-top: 1px;
-  padding-left: 10px;
  &.is-small {
    padding-top: 0;
-    padding-left: 7px;
  }
 }

@@ -95,12 +93,13 @@ Description
  width: 9px;
  height: 9px;
  margin-left: -10px;
-  border: 1px solid $cMainDark;
+  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;
  }
@@ -112,6 +111,7 @@ Description
    height: 6px;
    margin-left: -7px;
    &:first-child {
+      margin-left: 0;
      box-shadow: 2px 0 0 $cWhite;
    }
  }
@@ -132,15 +132,15 @@ Description
 .CDB-Shape-Dataset.is-white {
  .CDB-Shape-DatasetItem {
    border: 1px solid $cHoverLine;
-    background: $cMainDark;
+    background: $cMainBg;
    &:first-child {
-      box-shadow: 3px 0 $cMainDark;
+      box-shadow: 3px 0 $cMainBg;
    }
  }
 }

 .CDB-Shape-Dataset.is-white.is-small {
  .CDB-Shape-DatasetItem:first-child {
-    box-shadow: 2px 0 $cMainDark;
+    box-shadow: 2px 0 $cMainBg;
  }
 }
--- a/src/scss/cdb-components/shapes/dots.scss
+++ b/src/scss/cdb-components/shapes/dots.scss
@@ -23,6 +23,6 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
  background: $cSecondaryLine;

  &.is-selected {
-    background: $cTypo2;
+    background: $cSecondaryText;
  }
 }
--- a/src/scss/cdb-components/shapes/error-circle.scss
+++ b/src/scss/cdb-components/shapes/error-circle.scss
@@ -60,13 +60,13 @@ Description
 .CDB-Shape-CircleItem {
  width: 13px;
  height: 13px;
-  border: 1px solid $cMainDark;
+  border: 1px solid $cMainBg;
  border-radius: 50%;

  &.is-small {
    width: 9px;
    height: 9px;
-    margin: 2px auto;
+    margin: 0 auto;
  }
  &.is-blue {
    border: 1px solid $cBlue;
@@ -74,4 +74,10 @@ Description
  &.is-white {
    border: 1px solid $cWhite;
  }
+  &.is-green {
+    border: 1px solid $cHighlight;
+  }
+  &.is-red {
+    border: 1px solid $cError;
+  }
 }
--- a/src/scss/cdb-components/shapes/hamburguer.scss
+++ b/src/scss/cdb-components/shapes/hamburguer.scss
@@ -43,7 +43,7 @@ Description
 .CDB-Shape-hamburguerItem {
  height: $baseSize / 4;
  margin-bottom: $baseSize / 4;
-  background: $cMainDark;
+  background: $cMainBg;

  &:last-child {
    margin-bottom: 0;
--- a/src/scss/cdb-components/shapes/magnify.scss
+++ b/src/scss/cdb-components/shapes/magnify.scss
@@ -58,7 +58,7 @@ Description
    left: 0;
    width: 11px;
    height: 11px;
-    border: 1px solid $cMainDark;
+    border: 1px solid $cMainBg;
    border-radius: 50%;
    content: '';
  }
@@ -71,7 +71,7 @@ Description
    width: 1px;
    height: 7px;
    transform: rotate(314deg);
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }
 }
--- a/src/scss/cdb-components/shapes/move.scss
+++ b/src/scss/cdb-components/shapes/move.scss
@@ -7,28 +7,37 @@ Description
 <h2>16px</h2>
 <div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move">
-      <div class="CDB-Shape-MoveItem is-first"></div>
-      <div class="CDB-Shape-MoveItem is-second"></div>
-      <div class="CDB-Shape-MoveItem is-third"></div>
+    <div 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-Move">
-      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
+    <div 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-Move">
-      <div class="CDB-Shape-MoveItem is-white is-first"></div>
-      <div class="CDB-Shape-MoveItem is-white is-second"></div>
-      <div class="CDB-Shape-MoveItem is-white is-third"></div>
+    <div 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>
@@ -39,28 +48,37 @@ Description
 <h2>12px</h2>
 <div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move is-small">
-      <div class="CDB-Shape-MoveItem is-first"></div>
-      <div class="CDB-Shape-MoveItem is-second"></div>
-      <div class="CDB-Shape-MoveItem is-third"></div>
+    <div 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-Move is-small">
-      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
+    <div 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-Move is-small">
-      <div class="CDB-Shape-MoveItem is-white is-first"></div>
-      <div class="CDB-Shape-MoveItem is-white is-second"></div>
-      <div class="CDB-Shape-MoveItem is-white is-third"></div>
+    <div 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>
@@ -69,62 +87,75 @@ Description

@import '../../cdb-variables/colors';

-.CDB-Shape-Move {
+.CDB-Shape-rectsHandle {
+  position: relative;
  padding: 1px 0 0;
 }

-.CDB-Shape-Move.is-small {
+.CDB-Shape-rectsHandle.is-small {
  padding: 3px 0 0 1px;

-  .CDB-Shape-MoveItem {
+  .CDB-Shape-rectsHandleItem {
+    height: 2px;
    margin-bottom: 2px;

    &::before {
+      left: 5px;
      width: 2px;
      height: 2px;
    }
    &::after {
      width: 2px;
      height: 2px;
-      margin-left: 1px;
    }
  }
 }

-.CDB-Shape-MoveItem {
+.CDB-Shape-rectsHandleItem {
+  height: 3px;
  margin-bottom: 3px;

  &:last-child {
    margin-bottom: 0;
  }
  &::before {
-    display: inline-block;
+    display: block;
+    position: absolute;
+    left: 4px;
    width: 3px;
    height: 3px;
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }

  &::after {
-    display: inline-block;
+    display: block;
+    position: absolute;
+    left: 9px;
    width: 3px;
    height: 3px;
-    margin-left: 2px;
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }
 }

-.CDB-Shape-MoveItem.is-blue {
+.CDB-Shape-rectsHandleItem--blue {
  &::before,
  &::after {
    background: $cBlue;
  }
 }

-.CDB-Shape-MoveItem.is-white {
+.CDB-Shape-rectsHandleItem--white {
  &::before,
  &::after {
    background: $cWhite;
  }
 }
+
+.CDB-Shape-rectsHandleItem--grey {
+  &::before,
+  &::after {
+    background: $cHoverLine;
+  }
+}
--- a/src/scss/cdb-components/shapes/paragraph.scss
+++ b/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;
+}
--- a/src/scss/cdb-components/shapes/threePoints.scss
+++ b/src/scss/cdb-components/shapes/threePoints.scss
@@ -4,33 +4,68 @@
 Description

 ```
-<h2>16px</h2>
+<h2>24px</h2>
 <div style="padding: 20px;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <button class="CDB-Shape-threePoints js-actions">
-      <div class="CDB-Shape-threePointsItem"></div>
-      <div class="CDB-Shape-threePointsItem"></div>
-      <div class="CDB-Shape-threePointsItem"></div>
-    </button>
-  </div>
+  <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;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <button class="CDB-Shape-threePoints is-blue js-actions">
-      <div class="CDB-Shape-threePointsItem"></div>
-      <div class="CDB-Shape-threePointsItem"></div>
-      <div class="CDB-Shape-threePointsItem"></div>
-    </button>
-  </div>
+  <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;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
-    <button class="CDB-Shape-threePoints is-white js-actions">
+  <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>
-    </button>
-  </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>
@@ -38,31 +73,31 @@ Description
 <br>
 <h2>12px</h2>
 <div style="padding: 20px;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <button class="CDB-Shape-threePoints is-small js-actions">
+  <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>
-    </button>
-  </div>
+    </div>
+  </button>
 </div>
 <div style="padding: 20px;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <button class="CDB-Shape-threePoints is-blue is-small js-actions">
+  <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>
-    </button>
-  </div>
+    </div>
+  </button>
 </div>
 <div style="padding: 20px; background: #2E3C43;">
-  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
-    <button class="CDB-Shape-threePoints is-white is-small js-actions">
+  <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>
-    </button>
-  </div>
+    </div>
+  </button>
 </div>
 ```
 */
@@ -72,35 +107,45 @@ Description
 .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: $cMainDark;
-  &:last-child {
-    margin-bottom: 0;
-  }
+  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-threePointsItem {
-    width: 2px;
-    height: 2px;
-    margin-bottom: 3px;
-  }
+}
+.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
+  width: 2px;
+  height: 2px;
+  margin-bottom: 3px;
 }

-.CDB-Shape-threePoints.is-blue {
-  .CDB-Shape-threePointsItem {
-    background: $cBlue;
-  }
+.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-white {
-  .CDB-Shape-threePointsItem {
-    background: $cWhite;
-  }
+.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
+  background: $cBlue;
+}
+
+.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
+  background: $cWhite;
 }
--- a/src/scss/cdb-components/shapes/toogle-arrow.scss
+++ b/src/scss/cdb-components/shapes/toogle-arrow.scss
@@ -97,7 +97,7 @@ Description
    width: 10px;
    height: 1px;
    transform: rotate(-45deg);
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }
  &::after {
@@ -108,7 +108,7 @@ Description
    width: 10px;
    height: 1px;
    transform: rotate(45deg);
-    background: $cMainDark;
+    background: $cMainBg;
    content: '';
  }
 }
--- a/src/scss/cdb-components/shapes/type.scss
+++ b/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: '';
+}
--- a/src/scss/cdb-components/tags.scss
+++ b/src/scss/cdb-components/tags.scss
@@ -2,7 +2,7 @@
 // ----------------------------------------------

 /* SG
-# Tags
+# Tags / Privacy

 ```
 <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
@@ -17,16 +17,22 @@
 <button class="CDB-Tag is-private CDB-Text is-semibold CDB-Size-small u-iBlock">
  PRIVATE
 </button>
+<button class="CDB-Tag CDB-Text is-semibold CDB-Size-small u-iBlock">
+  TAG
+</button>
 ```
 */

+@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';


 .CDB-Tag {
  padding: 0 3px;
+  border: 1px solid $cBlue;
  border-radius: 2px;
+  color: $cBlue;

  &.is-public {
    border: 1px solid $cPublic;
@@ -45,3 +51,85 @@
    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;
+}
+
--- a/src/scss/cdb-components/tooltips.scss
+++ b/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;
+}
--- a/src/scss/cdb-components/typography.scss
+++ b/src/scss/cdb-components/typography.scss
@@ -9,7 +9,10 @@
 <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 CDB-Size-medium">Open Sans 12/16 Regular</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>
 ```
@@ -48,3 +51,11 @@
  font-size: $sFontSize-small;
  line-height: $sLineHeight-small;
 }
+
+.CDB-FontSize-small {
+  font-size: $sFontSize-small;
+}
+
+.CDB-FontSize-medium {
+  font-size: $sFontSize-medium;
+}
--- a/src/scss/cdb-icon-font.scss
+++ b/src/scss/cdb-icon-font.scss
@@ -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';
+}
--- a/src/scss/cdb-utilities/defaults.css.scss
+++ b/src/scss/cdb-utilities/defaults.css.scss
@@ -3,6 +3,10 @@

@import '../cdb-variables/colors';

+body {
+  color: $cMainText;
+}
+
 a {
  color: $cBlue;
  text-decoration: none;
--- a/src/scss/cdb-utilities/fonts.scss
+++ b/src/scss/cdb-utilities/fonts.scss
@@ -6,20 +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'),
-       url('themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
+       url('//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
 }
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
-       url('themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
+  src: local('Open Sans'), local('OpenSans'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
+       url('//themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
 }
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
-       url('themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
+  src: 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');
 }
--- a/src/scss/cdb-utilities/helpers.scss
+++ b/src/scss/cdb-utilities/helpers.scss
@@ -2,7 +2,9 @@
 // ----------------------------------------------

@import './mixins';
+@import '../cdb-variables/colors';

+/* Margins */
 .u-tSpace {
  margin-top: 4px;
 }
@@ -24,19 +26,49 @@
 .u-rSpace--xl {
  margin-right: 12px;
 }
-.u-lSpace {
-  margin-left: 4px;
-}
-.u-lSpace--xl {
-  margin-left: 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();
 }
@@ -47,6 +79,12 @@
  display: none !important;
 }

+/* Decoration */
+.u-upperCase {
+  text-transform: uppercase;
+}
+
+/* Media queries*/
@include media-query-mobile() {
  .u-showDesktop {
    display: none !important;
@@ -55,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;
+}
--- a/src/scss/cdb-variables/_colors.scss
+++ b/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;
--- a/src/scss/cdb-variables/_sizes.scss
+++ b/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
Author	SHA1	Message	Date
piensaenpixel	319acb105d	add possibility links to buttons	2016-05-04 17:14:27 +02:00
piensaenpixel	b0ac3dfc85	Merge pull request #106 from CartoDB/fix-loader fix loader	2016-05-04 15:22:42 +02:00
piensaenpixel	47a8775b1d	fix hound	2016-05-04 15:13:13 +02:00
piensaenpixel	20e3afd34a	fix loader	2016-05-04 15:08:46 +02:00
Javier Álvarez Medina	f1c9e1bbd0	Merge pull request #105 from CartoDB/remove-carousel Remove carousel used for editor	2016-05-04 09:53:53 +02:00
xavijam	4c1a5191da	Remove carousel used for editor	2016-05-03 20:10:28 +02:00
piensaenpixel	83d5f7e689	add tag	2016-04-29 13:52:09 +02:00
piensaenpixel	f6e13bdf2e	add border-box	2016-04-26 18:53:06 +02:00
piensaenpixel	9e0f9ca372	Merge pull request #103 from CartoDB/fix-classnames fix class names	2016-04-26 15:10:08 +02:00
piensaenpixel	366e57ec25	fix modal	2016-04-26 14:54:33 +02:00
piensaenpixel	26f0a71a21	fix class names	2016-04-26 13:53:21 +02:00
piensaenpixel	5b45aeda54	Merge pull request #102 from CartoDB/header-dropdown add new component	2016-04-26 13:29:01 +02:00
piensaenpixel	a7b2fbc637	fix pr	2016-04-26 10:34:21 +02:00
piensaenpixel	42790930d6	add new component	2016-04-25 18:31:52 +02:00
Javier Álvarez Medina	882463f25a	Merge pull request #101 from CartoDB/option-input-options Added options for content input, removing separator and margins	2016-04-22 14:03:30 +02:00
xavijam	19e596b714	Renamed file with hyphens instead of underscores	2016-04-22 13:59:58 +02:00
xavijam	b8387c90c0	Fixed noSeparator alternative	2016-04-22 13:58:41 +02:00
xavijam	73af1244e7	Added options for content input, removing separator and margins	2016-04-22 13:42:01 +02:00
Carlos Matallín	e9f60113d3	Merge pull request #100 from CartoDB/legend-with-check legend with check	2016-04-21 16:29:52 +02:00
Carlos Matallín	f6d5aa0d77	CDB-Legend--big	2016-04-21 16:26:01 +02:00
Carlos Matallín	306a67e274	legend with check	2016-04-20 18:54:00 +02:00
piensaenpixel	7a68c685a0	Merge pull request #99 from CartoDB/fix-icon-move Fix icon move	2016-04-20 18:51:10 +02:00
piensaenpixel	d76caab37e	fix hound	2016-04-20 18:40:40 +02:00
piensaenpixel	a98dfb5115	fix icon move	2016-04-20 18:40:12 +02:00
piensaenpixel	a05a8a56e5	Merge pull request #91 from CartoDB/add-tabForm-element add tab form	2016-04-20 12:38:22 +02:00
piensaenpixel	cafce86574	fix CR	2016-04-20 12:33:37 +02:00
Carlos Matallín	6770af7b4e	Merge pull request #98 from CartoDB/submenu-item-typo fix typo: item => Item	2016-04-19 17:31:03 +02:00
Carlos Matallín	dc142c313b	fix typo: item => Item	2016-04-19 17:04:05 +02:00
Carlos Matallín	b22ed193de	Merge pull request #97 from CartoDB/subnavbar-separate subnavbar: separate	2016-04-19 16:35:35 +02:00
Carlos Matallín	6ed2062657	submenu: inside/outside	2016-04-19 16:25:45 +02:00
Carlos Matallín	613e9ec17d	subnavbar: separate	2016-04-19 16:09:11 +02:00
Javier Álvarez Medina	de8e49afd0	Merge pull request #95 from CartoDB/form-fields-error-state Adding fields error state	2016-04-18 16:43:23 +02:00
xavijam	8ea6ac154f	Adding fields error state	2016-04-18 16:04:38 +02:00
piensaenpixel	6edbc23017	Merge pull request #94 from CartoDB/change-icons-navigation change font-icon	2016-04-18 14:10:58 +02:00
piensaenpixel	f5e41a5cc8	change font-icon	2016-04-18 13:51:07 +02:00
piensaenpixel	f23c215f4d	Merge pull request #93 from CartoDB/fix-toggle change toggle color	2016-04-12 11:37:28 +02:00
piensaenpixel	34b33cfd43	change toggle color	2016-04-12 11:30:09 +02:00
piensaenpixel	9d4930474f	Merge pull request #92 from CartoDB/add-types add type layer	2016-04-06 16:21:37 +02:00
piensaenpixel	e9728de420	remove blank lines	2016-04-06 16:21:58 +02:00
piensaenpixel	e010394bb1	fix point type	2016-04-06 16:09:46 +02:00
piensaenpixel	389a834d27	add type layer	2016-04-06 16:07:34 +02:00
piensaenpixel	fd975d00e0	add changes	2016-04-01 12:40:23 +02:00
piensaenpixel	2e8ace150b	Merge pull request #90 from CartoDB/fix-textarea use box-sizing	2016-03-31 17:28:36 +02:00
piensaenpixel	36cac6ccc0	use box-sizing	2016-03-31 17:19:16 +02:00
piensaenpixel	2f1301092f	Merge pull request #89 from CartoDB/fix-move-shape fix move shape and add grey version	2016-03-29 11:11:22 +02:00
piensaenpixel	4d7455e4ce	change class name	2016-03-29 11:13:09 +02:00
piensaenpixel	469850129f	fix CR	2016-03-29 10:47:20 +02:00
piensaenpixel	d247d29120	fix CR	2016-03-29 10:34:32 +02:00
piensaenpixel	f79c750d40	fix move shape and add grey version	2016-03-29 10:23:54 +02:00
piensaenpixel	8dacc12dfd	Merge pull request #87 from CartoDB/86-fix_header_width fix min width	2016-03-28 15:42:43 +02:00
piensaenpixel	00e41cd051	fix min width	2016-03-28 15:41:36 +02:00
piensaenpixel	672e25d0c8	Merge pull request #85 from CartoDB/fix-button-height fix button height	2016-03-28 10:43:27 +02:00
piensaenpixel	012ea610b0	fix button height	2016-03-28 10:38:09 +02:00
piensaenpixel	600345d686	Merge pull request #84 from CartoDB/new-buttons-size add new button size and fix size typography	2016-03-23 11:37:00 +01:00
piensaenpixel	2f0b6c7854	add new button size and fix size typography	2016-03-23 11:33:18 +01:00
xavijam	6b684d46e2	Changed class name of the tooltips	2016-03-17 16:54:58 +01:00
piensaenpixel	fd009fd68b	Merge pull request #81 from CartoDB/add-tooltips Add tooltips	2016-03-10 17:17:32 +01:00
María Checa	6712c0ae92	Merge pull request #62 from CartoDB/46-input_dropdown Dropdown component	2016-03-08 13:47:46 +01:00
María Checa	75365d1925	Input dropdown: style minor fix	2016-03-04 18:19:48 +01:00
Javier Arce	efb423940d	Merge pull request #80 from CartoDB/79-header-button-style Fix style for buttons in the CDB-HeaderInfo	2016-03-04 14:25:35 +01:00
piensaenpixel	d55ff58236	fix hound	2016-02-29 21:00:03 +01:00
piensaenpixel	aa922b2886	add tooltips	2016-02-29 18:31:11 +01:00
Javier Arce	2e276841bf	bump version	2016-02-26 16:53:00 +01:00
Javier Arce	76e7d4baf2	Closes #79	2016-02-26 16:52:03 +01:00
piensaenpixel	cc6005407d	Merge branch 'master' of github.com:CartoDB/CartoAssets into add-tooltips	2016-02-26 13:02:02 +01:00
piensaenpixel	6040d5e26f	add first tooltips	2016-02-26 12:58:18 +01:00
piensaenpixel	d8f269117a	Merge pull request #77 from CartoDB/add-tags Add tags	2016-02-26 11:29:37 +01:00
Javier Arce	1bc85827ec	Fixed typo	2016-02-26 11:17:54 +01:00
piensaenpixel	98ee2aa195	fix hound	2016-02-26 11:03:28 +01:00
piensaenpixel	1487846b73	change markup	2016-02-26 11:00:29 +01:00
piensaenpixel	babf763690	change var name	2016-02-26 10:42:01 +01:00
piensaenpixel	61c25d893e	fix hound	2016-02-26 10:29:40 +01:00
piensaenpixel	9a4f2bc265	fix PR	2016-02-26 10:23:53 +01:00
piensaenpixel	7755c46c5e	merge master	2016-02-24 19:10:07 +01:00
piensaenpixel	0120c5921b	add data type	2016-02-24 19:08:31 +01:00
piensaenpixel	f34ceb1575	add metadata	2016-02-24 18:47:18 +01:00
piensaenpixel	5d432cf6ec	Merge pull request #76 from CartoDB/clean-cartoAssets Clean carto assets	2016-02-24 16:38:54 +01:00
piensaenpixel	b33a64adca	bump version	2016-02-24 16:31:57 +01:00
piensaenpixel	04bd83c37c	clean cartoassets	2016-02-24 16:20:43 +01:00
piensaenpixel	75d24f72e8	Merge pull request #75 from CartoDB/list-widgets List widgets	2016-02-24 14:39:51 +01:00
piensaenpixel	7a8ff5a5b0	add vars	2016-02-24 14:23:17 +01:00
piensaenpixel	0591e25d0e	add list widgets	2016-02-24 14:21:53 +01:00
piensaenpixel	ee39eb3491	add first commit	2016-02-24 12:01:34 +01:00
Javier Arce	6d273be27a	Merge pull request #73 from CartoDB/fix-forms use flexbox for forms	2016-02-24 11:05:57 +01:00
Javier Arce	f2d4bfd1da	Fixes conflicts	2016-02-23 17:21:12 +01:00
piensaenpixel	2dc5456735	merge master	2016-02-23 17:16:25 +01:00
Javier Arce	3d9c012eef	Merge with master	2016-02-23 17:12:58 +01:00
Javier Arce	cb9c60ea8c	Merge branch 'master' of github.com:CartoDB/CartoAssets	2016-02-23 17:07:21 +01:00
Javier Arce	4567fe4141	Bump version	2016-02-23 17:04:36 +01:00
Javier Arce	a22154e4b3	Merge branch 'master' into fix-forms	2016-02-23 17:04:15 +01:00
piensaenpixel	a5e41c6762	Merge pull request #74 from CartoDB/fake-select add fake styles	2016-02-23 16:45:35 +01:00
piensaenpixel	33c4e81847	fix hound	2016-02-23 16:35:39 +01:00
piensaenpixel	528684e56a	add fake styles	2016-02-23 16:32:51 +01:00
Javier Arce	df5f4b7018	Merge branch 'master' of github.com:CartoDB/CartoAssets	2016-02-23 15:40:22 +01:00
piensaenpixel	78829e693c	use flexbox for forms	2016-02-23 13:48:27 +01:00
María Checa	008f6aaf8e	Merge pull request #49 from CartoDB/47-color_input Color bar & option input components	2016-02-23 11:47:06 +01:00
María Checa	d91131ae16	Input option component: minor improvements	2016-02-23 11:39:19 +01:00
María Checa	b7847b25ab	Color bar & option input component: minor improvements	2016-02-23 11:23:49 +01:00
María Checa	231e72cfd9	Option input component: minor fix	2016-02-23 11:10:43 +01:00
María Checa	bbc4f383c8	Color bar component: minor fix	2016-02-23 11:03:30 +01:00
María Checa	33608a1197	Color bar component: minor fixes	2016-02-23 10:51:27 +01:00
Javier Arce	fdc9b62cb5	Bump version	2016-02-23 10:15:22 +01:00
María Checa	a2b2fd5581	Color bar & option input components: fixes	2016-02-22 19:35:42 +01:00
María Checa	126b5353ef	Option input component: minor fix	2016-02-22 18:12:14 +01:00
María Checa	475376be43	Option input component: ninja fixes	2016-02-22 18:09:52 +01:00
María Checa	e9bdd7017c	Option input content: fixes	2016-02-22 17:13:50 +01:00
piensaenpixel	0c025acd65	Merge pull request #72 from CartoDB/menu-bar Menu bar	2016-02-22 17:12:50 +01:00
piensaenpixel	73a3675b5f	fix CR	2016-02-22 17:12:18 +01:00
piensaenpixel	5cdfb1e328	change icon and fix hound	2016-02-22 16:54:08 +01:00
piensaenpixel	137e5d28d0	change markup	2016-02-22 16:44:00 +01:00
piensaenpixel	6ab6774119	add menu editor	2016-02-22 16:39:56 +01:00
María Checa	533dd3b167	Input option component: minor changes	2016-02-22 15:43:26 +01:00
María Checa	9e0a1d463e	Input option component: flexbox fixed	2016-02-22 12:46:12 +01:00
Maria Checa	ff89163f58	Input option markup improvements	2016-02-19 16:35:49 +01:00
María Checa	3a2513e2a2	Color bar & option input components: syntax fixes	2016-02-18 20:06:30 +01:00
María Checa	89f0e13fae	Color bar component: style fixes	2016-02-18 20:05:07 +01:00
María Checa	bde6ec4559	Option input component: improvements	2016-02-18 20:02:29 +01:00
María Checa	444cb84331	Color bar component: improvements and gradient border fix	2016-02-18 14:34:02 +01:00
María Checa	55fae253d2	Color bar component: several improvements	2016-02-18 12:14:54 +01:00
Javier Arce	1d207bdf5c	Bump version	2016-02-17 10:10:56 +01:00
Javier Arce	e3b40a2a41	Merge pull request #71 from CartoDB/70-menu-changes Menu fixes	2016-02-17 10:10:33 +01:00
piensaenpixel	4248fa1738	fix color menu	2016-02-17 10:05:50 +01:00
María Checa	351b645ac8	Improvements: Option input & color bar components	2016-02-16 19:10:37 +01:00
María Checa	fee10f9e2e	Merge branch 'master' of https://github.com/CartoDB/CartoAssets into 47-color_input	2016-02-16 17:50:38 +01:00
María Checa	dd463d605b	Merge pull request #48 from CartoDB/45-textarea_input Textarea component	2016-02-16 17:49:30 +01:00
Javier Arce	3d14a09b12	Closes #70	2016-02-16 16:47:33 +01:00
María Checa	161af4654f	Dropdown component: minor fix	2016-02-16 15:03:00 +01:00
María Checa	0aeaa4e904	Dropdown component: solved errors after merging master changes	2016-02-16 15:02:22 +01:00
María Checa	419050431e	Merge branch 'master' into 46-input_dropdown	2016-02-16 14:58:23 +01:00
María Checa	0ba08fd8de	Dropdown component: minor fixes	2016-02-16 14:58:00 +01:00
María Checa	7cb07e435d	Textarea component: minor fix	2016-02-16 14:40:22 +01:00
María Checa	0da897e3b7	Dropdown component: improvements	2016-02-16 14:16:51 +01:00
María Checa	ff637c7b36	Dropdown component: improvements	2016-02-16 14:10:59 +01:00
piensaenpixel	48033c7627	Merge pull request #69 from CartoDB/68-move_uppercase move helper	2016-02-15 16:52:28 +01:00
piensaenpixel	f1c6baefec	move helper	2016-02-15 16:33:43 +01:00
piensaenpixel	3fbad828a7	Merge pull request #67 from CartoDB/66-add_ellipsis add helper	2016-02-15 11:27:03 +01:00
piensaenpixel	ba5f5c43e0	add helper	2016-02-15 11:26:09 +01:00
piensaenpixel	1a7fc12a51	Merge pull request #65 from CartoDB/add-blue-helper add blue helper	2016-02-11 19:27:06 +01:00
piensaenpixel	a62b1123aa	add blue helper	2016-02-11 19:24:19 +01:00
Nicklas Gummesson	0567b96d83	Merge pull request #64 from CartoDB/add-travis Add travis to chck grunt build passing	2016-02-09 19:09:31 +01:00
Nicklas Gummesson	e68ee294a7	Fix broken var	2016-02-09 19:06:07 +01:00
Nicklas Gummesson	9b322b6bf2	Force CI failure	2016-02-09 19:02:14 +01:00
Nicklas Gummesson	63b49f2506	Add travis for grunt build	2016-02-09 18:58:14 +01:00
piensaenpixel	11d74c67b1	Merge pull request #63 from CartoDB/Add-shapes fix weird var	2016-02-09 18:52:28 +01:00
piensaenpixel	feb153bd39	fix weird var	2016-02-09 18:51:06 +01:00
Maria Checa	b1158241b2	Dropdown component: minor fix	2016-02-09 18:45:08 +01:00
Maria Checa	a4878321ad	Dropdown component	2016-02-09 18:42:52 +01:00
piensaenpixel	744daa0684	update branch with master	2016-02-09 18:32:24 +01:00
piensaenpixel	aa6a3d5a02	Merge pull request #60 from CartoDB/Add-shapes add new threePoints	2016-02-09 18:30:42 +01:00
piensaenpixel	2c15096d69	fix cr	2016-02-09 18:22:23 +01:00
piensaenpixel	25ea770c26	fix nesting	2016-02-09 18:19:06 +01:00
María Checa	bd7b7db587	Merge pull request #43 from CartoDB/38-carousel_components Carousel component	2016-02-09 18:15:23 +01:00
Maria Checa	43efadb59c	Carousel component: solved conflicts merging master	2016-02-09 18:14:53 +01:00
piensaenpixel	50d67db30b	Merge pull request #61 from CartoDB/colors-assets Colors assets	2016-02-09 18:05:13 +01:00
piensaenpixel	3c96d80ae6	fix cr	2016-02-09 18:04:21 +01:00
Maria Checa	bddf751f04	Carousel component: minor fix	2016-02-09 18:01:02 +01:00
piensaenpixel	7eec296963	fix cr	2016-02-09 17:48:57 +01:00
piensaenpixel	1da800ecef	fix vars	2016-02-09 17:25:28 +01:00
piensaenpixel	45c90f9cd9	change vars	2016-02-09 17:17:14 +01:00
Maria Checa	f2652106b3	Carousel component: inside elements horizontal and vertically centered	2016-02-09 16:55:40 +01:00
piensaenpixel	cf97094b8c	fix pr	2016-02-09 16:54:05 +01:00
piensaenpixel	7aec38fb55	fix CR	2016-02-09 16:43:54 +01:00
Maria Checa	030d08d1e3	Merge branch 'master' of https://github.com/CartoDB/CartoAssets into 38-carousel_components	2016-02-09 16:02:57 +01:00
piensaenpixel	ab562c2f74	add colors	2016-02-09 15:23:20 +01:00
piensaenpixel	961dc2ef1b	add new threePoints	2016-02-09 14:47:28 +01:00
piensaenpixel	32bc500ff0	Merge pull request #54 from CartoDB/53-step_component Step component	2016-02-09 12:05:27 +01:00
María Checa	d81f930543	Step component: minor fix	2016-02-08 17:54:20 +01:00
piensaenpixel	f38377fa9e	use helpers	2016-02-08 17:48:03 +01:00
María Checa	820a4dad42	Dropdown component	2016-02-08 17:46:57 +01:00
piensaenpixel	124aaff389	add first commit	2016-02-08 17:01:29 +01:00
María Checa	2024f616ec	Step component: improvements	2016-02-08 16:57:27 +01:00
María Checa	8bdc4c712b	Step component: added to headers stylesheet	2016-02-08 15:23:14 +01:00
María Checa	c54528bf6a	Step component: flex elements fix	2016-02-08 15:07:25 +01:00
María Checa	e8e7ebe04a	Carousel component: css fixes	2016-02-08 14:36:03 +01:00
María Checa	6ef85bd46f	Step component: syntax minor fix	2016-02-08 12:03:45 +01:00
María Checa	d6de5e8a35	Carousel component: syntax fix	2016-02-08 11:41:46 +01:00
María Checa	6e4ba3fe31	Carousel component: CartoIcon fix	2016-02-08 11:27:14 +01:00
María Checa	8ee48342f2	Carousel component: minor fix	2016-02-08 11:15:56 +01:00
María Checa	924fc52318	Textarea component: syntax minor fix	2016-02-08 11:03:14 +01:00
María Checa	f12ee38ca0	Carousel component: syntax minor fixes	2016-02-08 10:52:18 +01:00
piensaenpixel	18712a3472	Merge pull request #59 from CartoDB/is-upper Is upper	2016-02-05 16:49:31 +01:00
saleiva	95278659e9	Revert "Adding is-upper class to typography" This reverts commit `5151d8c604`.	2016-02-05 16:46:24 +01:00
saleiva	928663d7e4	Adding is-upper class to typography	2016-02-05 16:46:24 +01:00
Javier Arce	2f3e9a5f5b	Merge pull request #58 from CartoDB/57-font-protocol Adds agnostic protocol to fontws	2016-02-05 16:46:19 +01:00
saleiva	ecefc7517c	is-upper	2016-02-05 16:45:33 +01:00
Javier Arce	9f67118079	Adds //	2016-02-05 16:44:06 +01:00
saleiva	5182f60f65	Revert "Adding is-upper class to typography" This reverts commit `5151d8c604`.	2016-02-05 16:44:06 +01:00
saleiva	5151d8c604	Adding is-upper class to typography	2016-02-05 16:43:50 +01:00
Javier Arce	071c568bae	Closes #57	2016-02-05 16:43:17 +01:00
Javier Álvarez Medina	515112a35a	Added gulp instructions for installation	2016-02-05 16:24:31 +01:00
piensaenpixel	a1735c249e	Merge pull request #56 from CartoDB/fix-points fix assets	2016-02-05 16:12:58 +01:00
piensaenpixel	610ef9b3fe	fix assets	2016-02-05 16:10:41 +01:00
María Checa	927584918e	Minor fix	2016-02-05 11:12:55 +01:00
María Checa	93dde16d98	Minor fix	2016-02-05 10:57:50 +01:00
María Checa	547f68db96	Step component	2016-02-05 10:57:11 +01:00
María Checa	853ee6913a	Solved conflicts with master	2016-02-05 10:47:45 +01:00
María Checa	b0166e9cad	Several improvements, reduced PR to just carousel component	2016-02-05 10:42:47 +01:00
piensaenpixel	e709907d9d	Merge pull request #51 from CartoDB/add-loaders fix hound	2016-02-04 19:58:16 +01:00
piensaenpixel	597da73511	Merge pull request #50 from CartoDB/three-points-changes Changing Threepoints usage markup to Button instead of div.	2016-02-04 19:57:56 +01:00
piensaenpixel	b82bd5dbad	fix hound	2016-02-04 19:57:38 +01:00
piensaenpixel	d7d98f18e4	merge branch	2016-02-04 19:54:02 +01:00
piensaenpixel	e520071afe	Merge pull request #41 from CartoDB/add-loaders Add loaders	2016-02-04 19:52:38 +01:00
piensaenpixel	70844c4012	fix merge	2016-02-04 19:52:36 +01:00
María Checa	4979ba0e8f	Color input component	2016-02-04 16:26:54 +01:00
María Checa	6a7171a3e5	Textarea naming fix	2016-02-04 15:26:19 +01:00
María Checa	47bddc8f82	Textarea component	2016-02-04 15:24:16 +01:00
María Checa	0d571acf3f	Fixed toggle arrows shape relative size and naming	2016-02-04 12:44:58 +01:00
María Checa	564e8d46a4	Added shapes to step	2016-02-04 12:21:33 +01:00
María Checa	2440af5bbd	Solved conflicts merging with master	2016-02-04 11:53:09 +01:00
María Checa	7ecb73c3fa	Steps list markup minor fix	2016-02-04 11:14:42 +01:00
María Checa	cf70003e56	Carousel & step components improvements	2016-02-04 11:12:40 +01:00
piensaenpixel	caaa6bf345	fix hound	2016-02-03 17:07:20 +01:00
piensaenpixel	cd027cebd2	fix vars	2016-02-03 16:59:08 +01:00
piensaenpixel	e4f5c098e0	add loader and loader box	2016-02-03 16:52:31 +01:00
María Checa	3363b72bad	Syntax and structure improvements	2016-02-02 19:13:31 +01:00
María Checa	beaee4824b	Carousel and Step header improvements	2016-02-02 17:19:24 +01:00
María Checa	9504ac53f3	Steps and carousel improvements	2016-02-02 11:47:15 +01:00
María Checa	1866c573af	Carousel css	2016-02-01 18:21:22 +01:00