add layout

add disabled style for toggle

.scss-lint.yml

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

.travis.yml

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

README.md

@@ -4,8 +4,10 @@
 
 ### Installation
 As easy as:
-- ```npm install```
+- ```npm install --global grunt-cli``` [Grunt installation](http://gruntjs.com/getting-started)
+- ```npm install --global gulp-cli``` [Gulp installation](https://github.com/gulpjs/gulp)
 - ```npm install -g markdown-styleguide-generator``` [StyleGenerator installation](https://www.npmjs.com/package/markdown-styleguide-generator#install)
+- ```npm install```
 
 ### Build
 If you want to use any of the CartoAssets components, after the installation just run:

icon-font/svgs/icon-font_104_Edition.svg

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

icon-font/svgs/icon-font_105_View.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.1 (29687) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_105_View</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-9000.000000, -10001.000000)" fill="#000000">
+            <g id="icon-font_105_View" transform="translate(9000.000000, 10001.000000)">
+                <path d="M471.196067,279.388706 C468.659287,277.229701 466.450984,274.924387 463.701023,271.840781 C461.732497,269.633419 459.572474,267.098603 456.291285,263.177454 C456.234848,263.11001 449.592637,255.148769 447.409623,252.549977 C428.736548,230.320422 412.662967,212.746142 394.043132,195.280662 C344.775461,149.067386 296.239067,122.750167 250.99304,122.750167 C202.046004,122.750167 150.507322,148.074304 102.417295,190.874005 C83.9404874,207.318201 67.2191013,225.348227 54.2710956,242.038469 C49.1796636,248.601428 45.0628096,254.478581 42.4195884,258.812878 C41.546218,260.245013 41.0017054,261.236856 40.8804115,261.498373 C42.4533613,258.106995 43.4872396,254.89797 43.4872396,247.833667 C43.4872396,240.769365 42.4533613,237.560339 40.8804115,234.168962 C41.0017054,234.430479 41.546218,235.422322 42.4195884,236.854456 C45.0628096,241.188754 49.1796636,247.065906 54.2710956,253.628865 C67.2191013,270.319107 83.9404874,288.349133 102.417295,304.79333 C150.507322,347.593031 202.046004,372.917168 250.99304,372.917168 C296.239067,372.917168 344.775461,346.599949 394.043132,300.386673 C412.662967,282.921192 428.736548,265.346913 447.409623,243.117358 C449.592637,240.518566 456.234848,232.557325 456.291285,232.48988 C459.572474,228.568732 461.732497,226.033916 463.701023,223.826554 C466.450984,220.742947 468.659287,218.437634 471.196067,216.278628 C489.585469,237.69567 500,251.756082 500,247.833667 C500,243.911252 489.585468,257.971665 471.196067,279.388706 L471.196067,279.388706 Z M471.11251,278.324435 L471.11251,278.324435 C429.638743,326.768781 346.187297,414.667335 249.997012,414.667335 C112.474265,414.667335 0.990051674,260.667026 0.990051674,247.833667 C0.990051674,235.000308 112.474265,81 249.997012,81 C346.187297,81 429.638743,168.898554 471.11251,217.3429 C467.601977,220.514627 464.627661,224.296843 462.356919,228.549318 C458.659304,235.473933 457.502812,241.748232 457.502812,247.833667 C457.502812,253.919103 458.659304,260.193402 462.356919,267.118017 C464.627661,271.370492 467.601977,275.152708 471.11251,278.324435 L471.11251,278.324435 Z" id="Oval-225"></path>
+                <path d="M210.754843,247.833667 C210.754843,224.834455 229.482775,206.125251 252.50501,206.125251 C275.527245,206.125251 294.255177,224.834455 294.255177,247.833667 C294.255177,270.83288 275.527245,289.542084 252.50501,289.542084 C229.482775,289.542084 210.754843,270.83288 210.754843,247.833667 Z" id="Path"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_106_Odyssey.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="498px" height="498px" viewBox="0 0 498 498" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_106_Odyssey</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-1.000000, -11001.000000)" fill="#191919">
+            <g id="icon-font_106_Odyssey" sketch:type="MSLayerGroup" transform="translate(0.000000, 11000.000000)">
+                <path d="M250,498.955327 C387.494231,498.955327 498.955327,387.494231 498.955327,250 C498.955327,112.505769 387.494231,1.04467292 250,1.04467292 C112.505769,1.04467292 1.04467292,112.505769 1.04467292,250 C1.04467292,387.494231 112.505769,498.955327 250,498.955327 L250,498.955327 Z M250,476.40843 C124.958077,476.40843 23.5915705,375.041923 23.5915705,250 C23.5915705,124.958077 124.958077,23.5915705 250,23.5915705 C375.041923,23.5915705 476.40843,124.958077 476.40843,250 C476.40843,375.041923 375.041923,476.40843 250,476.40843 L250,476.40843 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+                <path d="M250,146.660053 C250,141.474266 245.791246,137.265512 240.605459,137.265512 C235.419673,137.265512 231.210919,141.474266 231.210919,146.660053 L231.210919,250 C231.210919,252.630471 232.319475,255.148208 234.25475,256.933171 L346.989238,360.273118 C348.792989,361.926557 351.066468,362.734488 353.339947,362.734488 C355.876473,362.734488 358.412999,361.701088 360.273118,359.690657 C363.786676,355.857684 363.523629,349.920334 359.690657,346.406776 L250,245.866402 L250,146.660053 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_107_Settings.svg

@@ -0,0 +1,17 @@
+<?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">
+    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-font_107_Settings</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-1000.000000, -11042.000000)" fill="#191919">
+            <g id="icon-font_107_Settings" transform="translate(1000.000000, 11042.000000)">
+                <path d="M44.1211802,292 L0,292 L0,334 L44.1211802,334 C42.7304327,327.217347 42,320.193974 42,313 C42,305.806026 42.7304327,298.782653 44.1211802,292 Z M247.87882,292 L500,292 L500,334 L247.87882,334 C249.269567,327.217347 250,320.193974 250,313 C250,305.806026 249.269567,298.782653 247.87882,292 Z" id="Combined-Shape"></path>
+                <path d="M251.921266,84 L0,84 L0,126 L252.331378,126 C250.804124,118.908475 250,111.548144 250,104 C250,97.1589618 250.660521,90.4721964 251.921266,84 Z M456.078734,84 L500,84 L500,126 L455.668622,126 C457.195876,118.908475 458,111.548144 458,104 C458,97.1589618 457.339479,90.4721964 456.078734,84 Z" id="Combined-Shape"></path>
+                <path d="M146,375 L146,375 C180.241654,375 208,347.241654 208,313 C208,278.758346 180.241654,251 146,251 C111.758346,251 84,278.758346 84,313 C84,347.241654 111.758346,375 146,375 L146,375 Z M42,313 C42,255.562386 88.562386,209 146,209 C203.437614,209 250,255.562386 250,313 C250,370.437614 203.437614,417 146,417 C88.562386,417 42,370.437614 42,313 Z" id="Oval-18-Copy"></path>
+                <path d="M354,166 L354,166 C388.241654,166 416,138.241654 416,104 C416,69.7583455 388.241654,42 354,42 C319.758346,42 292,69.7583455 292,104 C292,138.241654 319.758346,166 354,166 L354,166 Z M354,208 L354,208 C296.562386,208 250,161.437614 250,104 C250,46.562386 296.562386,0 354,0 C411.437614,0 458,46.562386 458,104 C458,161.437614 411.437614,208 354,208 L354,208 Z" id="Oval-18"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icon-font/svgs/icon-font_108_downloadCircle.svg

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

icon-font/svgs/icon-font_108_pencilMenu.svg

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

icon-font/svgs/icon-font_109_Mobile.svg

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

icon-font/svgs/icon-font_110_Undo.svg

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

icon-font/svgs/icon-font_111_Redo.svg

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

icon-font/svgs/icon-font_112_lArrowLight.svg

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

icon-font/svgs/icon-font_113_Hide.svg

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

icon-font/template.jst.ejs

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cartoassets",
   "description": "Share frontend assets between different CartoDB repositories",
-  "version": "0.1.21",
+  "version": "0.1.32",
   "homepage": "https://github.com/cartodb/CartoAssets",
   "author": {
     "name": "CartoDB",
@@ -29,6 +29,7 @@
     "node": ">= 0.8.0"
   },
   "devDependencies": {
+    "grunt": "~0.4.5",
     "jquery": "~2.2.0",
     "highlight.js": "~9.1.0",
     "markdown-styleguide-generator": "~2.0.4",
@@ -48,9 +49,6 @@
     "grunt-shell": "1.1.2",
     "load-grunt-tasks": "*"
   },
-  "peerDependencies": {
-    "grunt": "~0.4.5"
-  },
   "keywords": [
     "library",
     "CartoDB",

src/scss/cdb-components/avatars.scss

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

src/scss/cdb-components/boxes.scss

@@ -0,0 +1,42 @@
+// Menu styles
+// ----------------------------------------------
+
+/* SG
+# Boxes/Dropdown
+
+
+```
+  <div class="CDB-Box-modal">&nbsp;</div>
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+.CDB-Box-modal {
+  min-width: 160px;
+  border: 1px solid $cMainLine;
+  border-radius: 4px;
+  background: $cWhite;
+  box-shadow: 0  $baseSize  $baseSize * 2 0 rgba(0, 0, 0, 0.16);
+  box-sizing: border-box;
+}
+
+.CDB-Box-modalHeader {
+  background: $cSecondaryBackground;
+}
+.CDB-Box-modalHeaderItem {
+  @include display-flex();
+  padding: $baseSize + 4 $baseSize * 2;
+  border-bottom: 1px solid $cMainLine;
+}
+.CDB-Box-modalHeaderItem--block {
+  display: block;
+}
+.CDB-Box-modalHeaderItem--paddingHorizontal {
+  padding: 0 $baseSize * 2;
+}
+.CDB-Box-modalHeaderItem--paddingVertical {
+  padding: $baseSize + 4 0;
+}

src/scss/cdb-components/buttons.scss

@@ -8,20 +8,101 @@ Layout Component:
 [CDB-Button][CDB-Button--primary | CDB-Button--secondary]
 
 ```
+
+<button class="CDB-Button CDB-Button--primary CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+
 <button class="CDB-Button CDB-Button--primary">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--primary is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--primary CDB-Button--small">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--primary CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+</button>
+
+<br/>
+<br/>
+<br/>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--big is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+
+<button class="CDB-Button CDB-Button--alert">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--small is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+</button>
+
+
+<br/>
+<br/>
+<br/>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--big is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+
+<button class="CDB-Button CDB-Button--error">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--small is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
 </button>
 
 <br/>
@@ -29,21 +110,35 @@ Layout Component:
 <br/>
 
 <div style="background: #2E3C43; padding: 20px;">
+
+  <button class="CDB-Button CDB-Button--primary CDB-Button--big">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </button>
+
   <button class="CDB-Button CDB-Button--primary">
-    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--primary is-disabled">
-    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--primary CDB-Button--small">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
+
+  <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
+    <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+  </button>
+
 </div>
 
 ```
@@ -55,9 +150,12 @@ Layout Component:
 
 
 .CDB-Button {
-  padding: $baseSize $baseSize + 12;
+  @include transition(background, 300ms);
+  padding: $baseSize + 1 $baseSize + 12;
+  border: 1px solid transparent;
   border-radius: $baseSize / 2;
   cursor: pointer;
+  box-sizing: border-box;
 
   .CDB-Button-Text {
     display: block;
@@ -69,7 +167,15 @@ Layout Component:
 }
 
 .CDB-Button--small {
-  padding: $baseSize - 3 $baseSize + 4;
+  padding: $baseSize / 2 $baseSize + 4;
+}
+
+.CDB-Button--big {
+  padding: $baseSize + 4 $baseSize + 12;
+}
+
+.CDB-Button--icon {
+  padding: 7px 9px;
 }
 
 .CDB-Button--primary {
@@ -93,6 +199,50 @@ Layout Component:
   }
 }
 
+.CDB-Button--alert {
+  background: $cAlert;
+  color: $cWhite;
+
+  &:hover {
+    background: darken($cAlert, 8%);
+  }
+  &:active {
+    background: darken($cAlert, 16%);
+  }
+
+  &.is-disabled {
+    &:hover {
+      background: $cAlert;
+    }
+    &:active {
+      background: $cAlert;
+    }
+  }
+}
+
+
+.CDB-Button--error,
+.CDB-Button--negative {
+  background: $cError;
+  color: $cWhite;
+
+  &:hover {
+    background: darken($cError, 8%);
+  }
+  &:active {
+    background: darken($cError, 16%);
+  }
+
+  &.is-disabled {
+    &:hover {
+      background: $cError;
+    }
+    &:active {
+      background: $cError;
+    }
+  }
+}
+
 
 
 // Buttons styles
@@ -102,20 +252,28 @@ Layout Component:
 # Buttons/Secondary
 
 ```
+<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
 <button class="CDB-Button CDB-Button--secondary">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--secondary is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
 <br/>
@@ -123,20 +281,36 @@ Layout Component:
 <br/>
 
 <div style="background: #2E3C43; padding: 20px;">
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </button>
+
   <button class="CDB-Button CDB-Button--secondary">
-    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--white">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary is-disabled">
-    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
 </div>
 
@@ -146,7 +320,6 @@ Layout Component:
 
 .CDB-Button--secondary {
   border: 1px solid $cBlue;
-  background: $cWhite;
   color: $cBlue;
 
   &:hover {
@@ -159,10 +332,35 @@ Layout Component:
 
   &.is-disabled {
     &:hover {
-      background: $cWhite;
+      background: transparent;
     }
     &:active {
-      background: $cWhite;
+      background: transparent;
+    }
+  }
+}
+
+
+.CDB-Button--white {
+  border: 1px solid $cWhite;
+  color: $cWhite;
+
+  &:hover {
+    background: rgba($cWhite, 0.08);
+  }
+  &:active {
+    background: rgba($cMainBg, 0.08);
+    color: $cWhite;
+  }
+
+  &.is-disabled {
+    @include opacity(0.24);
+    &:hover {
+      background: transparent;
+    }
+    &:active {
+      background: transparent;
+      color: $cWhite;
     }
   }
 }

src/scss/cdb-components/colors.scss

@@ -6,37 +6,31 @@
 
 
 ```
-<div class="box Color-MainDark"></div>
-<div class="box Color-SecondaryDark"></div>
-<div class="box Color-Blue"></div>
-<div class="box Color-White"></div>
-<div class="box Color-SecondaryBackground"></div>
-<div class="box Color-ThirdBackground"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-MainDark"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryDark"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-Blue"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-White"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryBackground"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-ThirdBackground"></div>
 ``` 
 */
 
 @import '../cdb-variables/colors';
 
-.box {
-  width: 120px;
-  height: 64px;
-  display: inline-block;
-  margin: 0 24px 24px 0;
-}
 
 .Color-Blue {
   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 +83,13 @@
 
 
 .Color-Type02 {
-  background: $cTypo2;
+  background: $cSecondaryText;
 }
 .Color-Type03 {
-  background: $cTypo3;
+  background: $cAltText;
 }
 .Color-Type04 {
-  background: $cTypo4;
+  background: $cHintText;
 }
 
 

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

@@ -0,0 +1,103 @@
+// CheckBoxes styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Checkbox
+
+```
+<div class="u-iBlock">
+  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+</div>
+<div class="u-iBlock">
+  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus">
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+</div>
+<div class="u-iBlock">
+  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+</div>
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
+
+.CDB-Checkbox {
+  position: absolute;
+  width: $baseSize * 2;
+  height: $baseSize * 2;
+  opacity: 0;
+  vertical-align: middle;
+  z-index: 1;
+}
+
+.CDB-Checkbox-face {
+  position: relative;
+  width: $baseSize * 2;
+  height: $baseSize * 2;
+  border: 1px solid $cMainLine;
+  border-radius: 3px;
+  background: $cWhite;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  &::before,
+  &::after {
+    display: block;
+    position: absolute;
+    bottom: 3px;
+    width: 2px;
+    border-radius: 1px;
+    background: $cSecondaryLine;
+    content: '';
+  }
+
+  &::before {
+    right: $baseSize / 2;
+    height: $baseSize;
+    transform: rotate(45deg);
+  }
+
+  &::after {
+    left: $baseSize / 2;
+    height: $baseSize - 2;
+    transform: rotate(-45deg);
+  }
+}
+
+.CDB-Checkbox:checked + .CDB-Checkbox-face {
+  @include transition(background, 300ms);
+  border: 1px solid $cBlue;
+  background: $cBlue;
+
+  &::before,
+  &::after {
+    background: $cWhite;
+  }
+}
+
+.CDB-Checkbox:disabled + .CDB-Checkbox-face {
+  border: 1px solid $cSecondaryLine;
+  background: $cThirdBackground;
+
+  &::before,
+  &::after {
+    background: $cWhite;
+  }
+}
+
+.CDB-Checkbox:disabled:hover + .CDB-Checkbox-face {
+  border: 1px solid $cSecondaryLine;
+}
+
+.CDB-Checkbox:checked:hover + .CDB-Checkbox-face,
+.CDB-Checkbox:focus + .CDB-Checkbox-face {
+  border: 1px solid $cBlue;
+}
+
+.CDB-Checkbox:hover + .CDB-Checkbox-face {
+  border: 1px solid $cHoverLine;
+}

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

@@ -0,0 +1,174 @@
+// Dropdown styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Dropdowns
+
+```
+<div class="CDB-DropdownContainer">
+  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
+  <div class="CDB-Dropdown CDB-Box-Modal">
+    <ul class="CDB-Dropdown-calculations CDB-Text is-semibold">
+      <li class="CDB-Dropdown-calculationsElement">
+        <input class="CDB-Radio" type="radio" name="calculation" value="01" checked>
+        <span class="u-iBlock CDB-Radio-face"></span>
+        <label class="u-iBlock u-lSpace">COUNT</label>
+      </li>
+      <li class="CDB-Dropdown-calculationsElement">
+        <input class="CDB-Radio" type="radio" name="calculation" value="02">
+        <span class="u-iBlock CDB-Radio-face"></span>
+        <label class="u-iBlock u-lSpace">SUM</label>
+      </li>
+      <li class="CDB-Dropdown-calculationsElement">
+        <input class="CDB-Radio" type="radio" name="calculation" value="03">
+        <span class="u-iBlock CDB-Radio-face"></span>
+        <label class="u-iBlock u-lSpace">AVG</label>
+      </li>
+      <li class="CDB-Dropdown-calculationsElement">
+        <input class="CDB-Radio" type="radio" name="calculation" value="04">
+        <span class="u-iBlock CDB-Radio-face"></span>
+        <label class="u-iBlock u-lSpace">MAX</label>
+      </li>
+      <li class="CDB-Dropdown-calculationsElement">
+        <input class="CDB-Radio" type="radio" name="calculation" value="05">
+        <span class="u-iBlock CDB-Radio-face"></span>
+        <label class="u-iBlock u-lSpace">MIN</label>
+      </li>
+    </ul>
+
+    <ul class="CDB-Dropdown-options CDB-Text CDB-Size-medium">
+      <li class="CDB-Dropdown-optionsElement is-selected" title="selected">selected</li>
+      <li class="CDB-Dropdown-optionsElement" title="active">active</li>
+      <li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
+      <li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
+    </ul>
+  </div>
+</div>
+
+
+  <div class="CDB-Box-Modal">
+    <div class="CDB-Box-ModalHeader">
+      <nav class="CDB-NavMenu">
+        <ul class="CDB-NavMenu-Inner CDB-NavMenu-Inner--no-margin CDB-NavMenu-Inner--is-dropdown CDB-Text is-semibold CDB-Size-medium">
+          <li class="CDB-NavMenu-Item">
+            <button class="CDB-NavMenu-Link">SOLID</button>
+          </li>
+          <li class="CDB-NavMenu-Item is-selected">
+            <button class="CDB-NavMenu-Link">BY VALUE</button>
+          </li>
+        </ul>
+      </nav>
+      <div class="CDB-Box-ModalHeaderItem">
+        <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputTextPlain CDB-Text">
+        <button class="u-lSpace--xl">
+          <div class="CDB-Shape">
+            <div class="CDB-Shape-magnify is-blue is-small"></div>
+          </div>
+        </button>
+      </div>
+    </div>
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+  </div>
+
+  <br/>
+  <br/>
+  <br/>
+  <br/>
+
+  <div class="CDB-Box-Modal">
+    <div class="CDB-Box-modalHeader">
+      <nav class="CDB-NavMenu">
+        <ul class="CDB-NavMenu-Inner CDB-NavMenu-inner--no-margin CDB-NavMenu-inner--is-dropdown CDB-Text is-semibold CDB-Size-medium">
+          <li class="CDB-NavMenu-Item">
+            <button class="CDB-NavMenu-Link">SOLID</button>
+          </li>
+          <li class="CDB-NavMenu-Item is-selected">
+            <button class="CDB-NavMenu-Link">BY VALUE</button>
+          </li>
+        </ul>
+      </nav>
+      <div class="CDB-Box-modalHeaderItem">
+        <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputTextPlain CDB-Text">
+        <button class="u-lSpace--xl">
+          <div class="CDB-Shape">
+            <div class="CDB-Shape-close is-blue is-large"></div>
+          </div>
+        </button>
+      </div>
+    </div>
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+  </div>
+
+
+```
+*/
+
+@import '../../cdb-utilities/mixins';
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+
+.CDB-DropdownContainer {
+  position: relative;
+  height: 250px;
+}
+.CDB-Dropdown {
+  @include display-flex();
+  @include flex-direction(row);
+  position: absolute;
+  top: 40px;
+  max-height: 200px;
+}
+.CDB-Dropdown-calculations {
+  padding: $sMargin-element;
+  border-right: 1px solid $cMainLine;
+  border-radius: 4px 0 0 4px;
+  background-color: $cSecondaryBackground;
+  box-sizing: border-box;
+}
+.CDB-Dropdown-calculationsElement {
+  margin-bottom: $sLineHeight-medium;
+  color: $cMainBg;
+  font-size: $sFontSize-small;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.CDB-Dropdown-options {
+  width: $baseSize * 20;
+  border-radius: 0 4px 4px 0;
+  background-color: $cWhite;
+  vertical-align: top;
+}
+.CDB-Dropdown-optionsElement {
+  @include text-overflow();
+  padding: 12px 10px;
+  border-bottom: 1px solid $cMainLine;
+  color: $cBlue;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+  &:hover {
+    background-color: rgba(157, 224, 173, 0.2);
+    color: $cMainBg;
+    cursor: pointer;
+  }
+}
+.CDB-Dropdown-optionsElement.is-selected {
+  color: $cMainBg;
+}
+.CDB-Dropdown-optionsElement.is-disabled {
+  color: $cHintText;
+
+  &:hover {
+    background-color: transparent;
+    cursor: default;
+  }
+}

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

@@ -0,0 +1,61 @@
+// Input styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Inputs
+
+```
+<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
+<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText has-error CDB-Text">
+<input type="text" name="text" placeholder="DejaVu Sans" disabled class="CDB-InputText is-disabled CDB-Text">
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/helpers';
+
+.CDB-InputText {
+  width: 100%;
+  padding: 7px 8px;
+  border: 1px solid $cMainLine;
+  border-radius: $baseSize / 2;
+  font-size: $sFontSize-medium;
+  line-height: $sLineHeight-medium;
+  box-sizing: border-box;
+
+  &.is-cursor {
+    cursor: pointer;
+  }
+  &.is-empty {
+    color: $cHintText;
+  }
+  &:hover {
+    border: 1px solid $cHoverLine;
+  }
+  &:focus {
+    border: 1px solid $cBlue;
+    outline: none;
+  }
+  &:disabled,
+  &.is-disabled {
+    border-color: $cSecondaryLine;
+    background: $cThirdBackground;
+    cursor: default;
+  }
+  &.has-error {
+    @include default-form-error-style();
+  }
+}
+.CDB-InputTextPlain {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  font-size: $sFontSize-medium;
+  line-height: $sLineHeight-medium;
+  box-sizing: border-box;
+}
+
+.CDB-FieldError .CDB-InputText {
+  @include default-form-error-style();
+}

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

@@ -0,0 +1,104 @@
+// Legends styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Labels
+
+```
+<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Radio" type="radio" name="veritas" value="01">
+  <span class="u-iBlock CDB-Radio-face"></span>
+  <label class="u-iBlock u-lSpace">True</label>
+</div>
+<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Radio" type="radio" name="veritas" value="02" checked>
+  <span class="u-iBlock CDB-Radio-face"></span>
+  <label class="u-iBlock u-lSpace">False</label>
+</div>
+
+<br/>
+<br/>
+<br/>
+
+<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+  <label class="u-iBlock u-lSpace">Sport</label>
+</div>
+<label class="u-iblock CDB-Text CDB-Size-medium">
+  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+  <label class="u-iBlock u-lSpace">Travel</label>
+</label>
+
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-Fieldset">
+  <p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
+  <ul class="CDB-Size-medium CDB-Text CDB-Fieldset-block">
+    <li class="u-rSpace--xl u-iblock">
+      <div class="u-iblock CDB-Size-medium">
+        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
+        <span class="u-iBlock CDB-Checkbox-face"></span>
+        <label class="u-iBlock u-lSpace">Sport</label>
+      </div>
+    </li>
+    <li class="u-iblock">
+      <label class="u-iblock CDB-Size-medium">
+        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
+        <span class="u-iBlock CDB-Checkbox-face"></span>
+        <label class="u-iBlock u-lSpace">Travel</label>
+      </label>
+    </li>
+  </ul>
+</div>
+<div class="u-tSpace-xl CDB-Text CDB-Fieldset">
+  <p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
+  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
+</div>
+
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-Text CDB-Fieldset">
+  <p class="CDB-Legend CDB-Legend--big u-ellipsis CDB-Text is-semibold CDB-Size-small u-rSpace--m">
+    <input class="CDB-Checkbox" type="checkbox" name="field" value="Sport">
+    <span class="u-iBlock CDB-Checkbox-face u-rSpace--m"></span>
+    <label class="CDB-Text is-semibold CDB-Size-small u-rSpace--m">SPORT</label>
+  </p>
+  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
+</div>
+
+<div class="u-tSpace-xl CDB-Text CDB-Fieldset">
+  <p class="CDB-Legend CDB-Legend--big u-ellipsis CDB-Text is-semibold CDB-Size-small u-rSpace--m">
+    <input class="CDB-Checkbox" type="checkbox" name="field" value="Travel">
+    <span class="u-iBlock CDB-Checkbox-face u-rSpace--m"></span>
+    <label class="CDB-Text is-semibold CDB-Size-small u-rSpace--m">TRAVEL</label>
+  </p>
+  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
+</div>
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-utilities/mixins';
+
+.CDB-Legend {
+  width: $baseSize * 12;
+}
+
+.CDB-Legend--big {
+  width: ($baseSize * 24);
+}
+
+.CDB-Fieldset {
+  @include display-flex();
+  @include align-items(center);
+}
+.CDB-Fieldset-block {
+  width: 100%;
+}
+

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

@@ -0,0 +1,152 @@
+// Color input styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Option input
+
+```
+<div class="CDB-OptionInput is-active CDB-Text">
+  <ul class="CDB-OptionInput-container">
+    <li class="CDB-OptionInput-item is-active">
+      <button type="button" class="CDB-OptionInput-content">8px</button>
+    </li>
+
+    <li class="CDB-OptionInput-item">
+      <button type="button" class="CDB-OptionInput-content">solid</button>
+    </li>
+
+    <li class="CDB-OptionInput-item">
+      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
+        <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
+      </button>
+    </li>
+  </ul>
+</div>
+
+<br/>
+
+<div class="CDB-OptionInput is-active CDB-Text">
+  <ul class="CDB-OptionInput-container">
+    <li class="CDB-OptionInput-item">
+      <button type="button" class="CDB-OptionInput-content">8...12</button>
+    </li>
+
+    <li class="CDB-OptionInput-item is-active">
+      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
+        <span class="CDB-ColorBar" style="background-color: #FFFFC0;"></span>
+      </button>
+    </li>
+  </ul>
+</div>
+
+<br/>
+
+<button type="button" class="CDB-OptionInput">
+  <div class="CDB-OptionInput-container">
+    <span class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></span>
+  </div>
+</button>
+
+<br/>
+<br/>
+
+<button type="button" class="CDB-OptionInput">
+  <div class="CDB-OptionInput-container">
+    <ul class="CDB-ColorBarContainer">
+      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #9DE0AD;"></li>
+      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #50E3C2;"></li>
+      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #FFFFC0;"></li>
+      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #7ED321;"></li>
+      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #BD10E0;"></li>
+      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #F15743;"></li>
+    </ul>
+  </div>
+</button>
+
+<br/>
+<br/>
+
+<button type="button" class="CDB-OptionInput">
+  <div class="CDB-OptionInput-container">
+    <ul class="CDB-ColorBarContainer">
+      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #9DE0AD;"></li>
+      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #50E3C2;"></li>
+      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #FFFFC0;"></li>
+      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #7ED321;"></li>
+    </ul>
+  </div>
+</button>
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
+.CDB-OptionInput {
+  width: 100%;
+  height: $baseSize * 4;
+  border: 1px solid $cMainLine;
+  border-radius: $baseSize / 2;
+  box-sizing: border-box;
+  vertical-align: middle;
+
+  &:hover {
+    border: 1px solid $cHoverLine;
+  }
+  &:focus {
+    border: 1px solid $cBlue;
+  }
+}
+.CDB-OptionInput.is-active {
+  border: 1px solid $cBlue;
+}
+.CDB-OptionInput-container {
+  @include display-flex();
+  @include align-content(center);
+  @include align-items(center);
+  margin: 0 $baseSize;
+}
+.CDB-OptionInput-container--noMargin {
+  margin: 0;
+}
+.CDB-OptionInput-item {
+  @include display-flex();
+  @include align-items(center);
+  @include align-content(center);
+  width: auto;
+  height: 100%;
+  font-size: $sFontSize-medium;
+  box-sizing: content-box;
+
+  &::after {
+    padding: 0 $baseSize - 2;
+    color: $cHintText;
+    content: '·';
+  }
+  &:last-child {
+    width: 100%;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+.CDB-OptionInput-item--noSeparator::after {
+  content: '';
+}
+.CDB-OptionInput-content {
+  @include display-flex();
+  @include align-items(center);
+  height: 100%;
+  color: $cMainBg;
+  box-sizing: content-box;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+.CDB-OptionInput-item.is-active > .CDB-OptionInput-content {
+  border-bottom: 1px solid $cMainBg;
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,46 @@
+// 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,
+.CDB-Textarea.has-error {
+  @include default-form-error-style();
+}

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

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

src/scss/cdb-components/headers.scss

@@ -0,0 +1,226 @@
+// Typography styles
+// ----------------------------------------------
+
+/* SG
+# Headers
+
+```
+<div class="CDB-HeaderInfo is-block">
+  <div class="CDB-HeaderInfo-title u-bSpace">
+    <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
+    <div class="CDB-HeaderInfo-Actions">
+      <a href="#">
+          <div class="CDB-Shape">
+            <div class="CDB-Shape-threePoints is-blue is-small">
+              <div class="CDB-Shape-threePointsItem"></div>
+              <div class="CDB-Shape-threePointsItem"></div>
+              <div class="CDB-Shape-threePointsItem"></div>
+            </div>
+          </div>
+      </a>
+    </div>
+  </div>
+  <ul class="CDB-HeaderInfo-List">
+    <li class="CDB-HeaderInfo-listItem">
+      <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
+        PUBLIC
+      </button>
+    </li>
+    <li class="CDB-HeaderInfo-listItem">
+      <ul class="CDB-AvatarList u-iBlock">
+        <li class="CDB-AvatarList-item">
+          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
+        </li>
+        <li class="CDB-AvatarList-item">
+          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
+        </li>
+        <li class="CDB-AvatarList-item">
+          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
+        </li>
+        <li class="CDB-AvatarList-itemMore">
+          <button class="CDB-Text is-semibold CDB-Size-small">+ 16</button>
+        </li>
+      </ul>
+    </li>
+    <li class="CDB-HeaderInfo-listItem">
+      <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock u-altTextColor">Published 8 days ago</p>
+    </li>
+  </ul>
+</div>
+
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-HeaderInfo">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
+    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
+  </button>
+  <div class="CDB-HeaderInfo-inner">
+    <div class="CDB-HeaderInfo-title u-bSpace">
+      <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected </h2>
+      <ul class="CDB-HeaderInfo-Actions">
+        <li class="CDB-HeaderInfo-actionsItem">
+          <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
+            <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+          </button>
+        </li>
+        <li class="CDB-HeaderInfo-actionsItem">
+          <a href="#">
+              <div class="CDB-Shape">
+                <div class="CDB-Shape-threePoints is-blue is-small">
+                  <div class="CDB-Shape-threePointsItem"></div>
+                  <div class="CDB-Shape-threePointsItem"></div>
+                  <div class="CDB-Shape-threePointsItem"></div>
+                </div>
+              </div>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="CDB-Shape u-iBlock">
+      <ul class="CDB-Shape-Dataset is-small is-grey">
+        <li class="CDB-Shape-DatasetItem"></li>
+        <li class="CDB-Shape-DatasetItem"></li>
+      </ul>
+    </div>
+    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
+  </div>
+</div>
+
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-HeaderInfo">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
+    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
+  </button>
+  <div class="CDB-HeaderInfo-inner">
+    <div class="CDB-HeaderInfo-title u-bSpace">
+      <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
+      <div class="CDB-HeaderInfo-actions">
+        <a href="#">
+            <div class="CDB-Shape">
+              <div class="CDB-Shape-threePoints is-blue is-small">
+                <div class="CDB-Shape-threePointsItem"></div>
+                <div class="CDB-Shape-threePointsItem"></div>
+                <div class="CDB-Shape-threePointsItem"></div>
+              </div>
+            </div>
+        </a>
+      </div>
+    </div>
+    <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-altTextColor">Positron by CartoDB</p>
+  </div>
+</div>
+
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-HeaderInfo">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
+    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
+  </button>
+  <div class="CDB-HeaderInfo-inner">
+    <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text u-bSpace--m">
+    <div class="CDB-Shape u-iBlock">
+      <ul class="CDB-Shape-Dataset is-small is-grey">
+        <li class="CDB-Shape-DatasetItem"></li>
+        <li class="CDB-Shape-DatasetItem"></li>
+      </ul>
+    </div>
+    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
+  </div>
+</div>
+
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-HeaderInfo">
+  <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
+
+  <div class="CDB-HeaderInfo-inner CDB-Text">
+    <div class="CDB-HeaderInfo-title u-bSpace--m">
+      <h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large">Type</h2>
+      
+      <div class="CDB-HeaderInfo-actions">
+        <a href="#">
+          <div class="CDB-Shape">
+            <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
+          </div>
+        </a>
+      </div>
+    </div>
+
+    <p class="CDB-Text u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m">Histogram</p>
+    <p class="CDB-Text CDB-Size-medium u-altTextColor">Distribution of a numeric variable in a range</p>
+  </div>
+</div>
+
+<br/>
+<br/>
+<br/>
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+.CDB-HeaderInfo {
+  @include display-flex();
+  @include align-items(flex-start);
+
+  &.is-block {
+    display: block;
+  }
+}
+.CDB-HeaderInfo-listItem {
+  display: inline-block;
+  margin-right: 8px;
+  vertical-align: middle;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.CDB-HeaderInfo-inner {
+  @include flex(1);
+}
+.CDB-HeaderInfo-back {
+  margin-top: 7px;
+}
+.CDB-HeaderInfo-title {
+  @include display-flex();
+  @include align-items(center);
+}
+.CDB-HeaderInfo-titleText {
+  @include flex(1);
+  width: 0;
+  padding-right: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.CDB-HeaderInfo-actionsItem {
+  display: inline-block;
+  margin-left: 4px;
+  vertical-align: middle;
+}
+.CDB-HeaderNumeration {
+  width: $baseSize * 3;
+  min-width: $baseSize * 3;
+  height: $baseSize * 3;
+  border: 1px solid $cMainLine;
+  border-radius: 4px;
+  background-color: $cWhite;
+  color: $cAltText;
+  font-size: $sFontSize-small;
+  line-height: 23px;
+  text-align: center;
+  box-sizing: border-box;
+}

src/scss/cdb-components/lists.scss

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

src/scss/cdb-components/loader.scss

@@ -2,17 +2,19 @@
 // ----------------------------------------------
 
 /* 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>
+
 ```
 */
 
 @import '../cdb-utilities/mixins';
+@import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
 
 .CDB-Loader {
   @include css3-prefix(animation, loader-progress 1000ms linear 1);
@@ -23,8 +25,8 @@ There is only one state 'is-visible', in order to make it visible.
   left: 0;
   width: 100%;
   height: 2px;
-  background: rgba(#3AA9E3, 1);
-  z-index: 10;
+  background: rgba($cBlue, 1);
+  z-index: 2;
 }
 .CDB-Loader.is-visible {
   @include css3-prefix(animation, loader-progress 2000ms linear infinite);
@@ -39,3 +41,139 @@ 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 is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--medium is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+</div>
+
+<div style="padding: 20px; background: #F9F9F9;">
+  <div class="CDB-LoaderIcon is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--medium is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+</div>
+
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-LoaderIcon">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--medium">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+</div>
+
+<div style="padding: 20px; background: #E27D61;">
+  <div class="CDB-LoaderIcon">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--medium">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+</div>
+
+```
+*/
+
+.CDB-LoaderIcon-spinner {
+  animation: rotate 2s linear infinite;
+  width: 16px;
+  height: 16px;
+}
+
+.CDB-LoaderIcon--small .CDB-LoaderIcon-spinner {
+  width: 14px;
+  height: 14px;
+}
+
+.CDB-LoaderIcon--medium .CDB-LoaderIcon-spinner {
+  width: 24px;
+  height: 24px;
+}
+
+.CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
+  width: 40px;
+  height: 40px;
+}
+
+.CDB-LoaderIcon-path {
+  stroke: rgba(255, 255, 255, 0.88);
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+  stroke-width: 4px;
+}
+
+.CDB-LoaderIcon--big .CDB-LoaderIcon-path {
+  stroke-width: 2px;
+}
+
+.CDB-LoaderIcon.is-dark .CDB-LoaderIcon-path {
+  stroke: rgba(0, 0, 0, 0.24);
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}

src/scss/cdb-components/menu.scss

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

src/scss/cdb-components/modals.scss

@@ -0,0 +1,836 @@
+// Modals styles
+// ----------------------------------------------
+
+/* SG
+# Modals/Mod Error Creating Table
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="24px" height="24px" viewBox="521 436 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <g id="Smiley-red" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(521.000000, 436.000000)">
+                <path d="M12,13.797 C9.069,13.797 6.478,15.286 5.07,17.781 C4.934,18.022 5.019,18.327 5.26,18.463 C5.338,18.507 5.422,18.527 5.505,18.527 C5.679,18.527 5.849,18.435 5.941,18.273 C7.169,16.096 9.434,14.796 12,14.796 C14.658,14.796 16.943,16.087 18.114,18.249 C18.245,18.492 18.55,18.582 18.792,18.45 C19.035,18.319 19.125,18.015 18.993,17.772 C17.645,15.283 15.031,13.797 12,13.797 L12,13.797 Z" id="Shape" fill="#F15743"></path>
+                <path d="M7.25,10.5 C8.353,10.5 9.25,9.603 9.25,8.5 C9.25,7.397 8.353,6.5 7.25,6.5 C6.147,6.5 5.25,7.397 5.25,8.5 C5.25,9.603 6.147,10.5 7.25,10.5 L7.25,10.5 Z M7.25,7.5 C7.801,7.5 8.25,7.948 8.25,8.5 C8.25,9.052 7.801,9.5 7.25,9.5 C6.699,9.5 6.25,9.052 6.25,8.5 C6.25,7.948 6.699,7.5 7.25,7.5 L7.25,7.5 Z" id="Shape" fill="#F15743"></path>
+                <path d="M16.25,10.5 C17.353,10.5 18.25,9.603 18.25,8.5 C18.25,7.397 17.353,6.5 16.25,6.5 C15.147,6.5 14.25,7.397 14.25,8.5 C14.25,9.603 15.147,10.5 16.25,10.5 L16.25,10.5 Z M16.25,7.5 C16.801,7.5 17.25,7.948 17.25,8.5 C17.25,9.052 16.801,9.5 16.25,9.5 C15.699,9.5 15.25,9.052 15.25,8.5 C15.25,7.948 15.699,7.5 16.25,7.5 L16.25,7.5 Z" id="Shape" fill="#F15743"></path>
+                <path d="M12,0 C5.383,0 0,5.383 0,12 C0,18.617 5.383,24 12,24 C18.617,24 24,18.617 24,12 C24,5.383 18.617,0 12,0 L12,0 Z M12,23 C5.935,23 1,18.065 1,12 C1,5.935 5.935,1 12,1 C18.065,1 23,5.935 23,12 C23,18.065 18.065,23 12,23 L12,23 Z" id="Shape" fill="#F15743"></path>
+            </g>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-errorTextColor u-bSpace--m">We couldn’t fetch your data</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">Don’t panic, follow these steps</p>
+        <ul class="Modal-listActions u-flex u-alignCenter">
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--primary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">GO BACK</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+  </div>
+```
+*/
+
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+@import '../cdb-utilities/mixins';
+
+
+.Modal-listActions {
+  margin-top: $baseSize * 4;
+}
+
+.Modal-listActionsitem,
+.Modal-icon {
+  margin-right: $baseSize * 2;
+}
+
+.Modal-listActionsitem:last-child {
+  margin-right: 0;
+}
+
+.Modal-icon {
+  margin-top: 6px;
+  line-height: 34px; /* align-items: baseline doesnt work correctly in ff */
+}
+
+
+/* SG
+# Modals/Loading
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <div class="CDB-LoaderIcon CDB-LoaderIcon--medium is-dark">
+          <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+            <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+          </svg>
+        </div>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Export untitled map</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">This map, and the connect data, will be exported as a .carto file</p>
+        <ul class="Modal-listActions u-flex u-alignCenter">
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
+            </button>
+          </li>
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Download</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+  </div>
+```
+*/
+
+
+/* SG
+# Modals/Success
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="Check-Circle---Flattened-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <path d="M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 L12,24 L12,24 L12,24 L12,24 L12,24 L12,24 L12,24 L12,24 Z" id="Path" fill="#9DE0AD"></path>
+            <polyline id="Shape" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="17.25 8.25 10.2341129 15.75 6.75 12.0542755"></polyline>
+          </g>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Export untitled map</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">This map, and the connect data, will be exported as a .carto file</p>
+        <ul class="Modal-listActions u-flex u-alignCenter">
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
+            </button>
+          </li>
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--primary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Download</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+  </div>
+```
+*/
+
+
+/* SG
+# Modals/Delete Layer Warn
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="24px" height="25px" viewBox="521 436 24 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <path d="M524.5,440 L540.5,440 L540.5,460 L524.5,460 L524.5,440 Z M528.5,437 L536.5,437 L536.5,440 L528.5,440 L528.5,437 Z M522,440 L544,440 L522,440 Z M528.5,443.5 L528.5,455.5 L528.5,443.5 Z M532.5,443.5 L532.5,455.5 L532.5,443.5 Z M536.5,443.5 L536.5,455.5 L536.5,443.5 Z" id="Shape" stroke="#F19243" stroke-width="1" fill="none"></path>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m u-alertTextColor">You are about to delete layer gpc_000a11a_eng</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">{{name}} map will be affected and the widgets related to the layer, are you sure you want to delete it?</p>
+        <ul class="Modal-listText">
+          <li class="Modal-listTextItem">
+            <p class="CDB-Text CDB-Size-medium">Deleting this layer will affect to <span class="CDB-Text is-semibold">4 Widgets, 3 Analysis</span> and <span class="CDB-Text is-semibold">2 Layers</span></p>
+          </li>
+          <li class="Modal-listTextItem">
+            <p class="CDB-Text CDB-Size-medium">Before deleting your map, you can <a href="#">export as .CARTO file</a></p>
+          </li>
+        </ul>
+        <ul class="Modal-listActions u-flex u-alignCenter">
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
+            </button>
+          </li>
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--primary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Ok, Delete It</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+  </div>
+```
+*/
+
+.Modal-listTextItem {
+  margin-top: 32px;
+}
+
+
+
+/* SG
+# Modals/Loading
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <div class="CDB-LoaderIcon CDB-LoaderIcon--medium is-dark">
+          <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+            <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+          </svg>
+        </div>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Locking Dataset</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">Your dataset is being locked, this may take a few seconds.</p>
+      </div>
+  </div>
+```
+*/
+
+
+/* SG
+# Modals/Marker
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="13px" height="20px" viewBox="526 438 13 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="Location-pin" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(526.000000, 438.000000)">
+            <path d="M6.5,0 C2.9160625,0 0,2.99083333 0,6.66666667 C0,10.2041667 5.9093125,19.4225 6.1611875,19.8125 C6.2359375,19.93 6.3635,20 6.5,20 C6.6365,20 6.7640625,19.93 6.8388125,19.8125 C7.0906875,19.4225 13,10.2041667 13,6.66666667 C13,2.99083333 10.0839375,0 6.5,0 L6.5,0 Z M6.5,18.8166667 C5.227625,16.7766667 0.8125,9.49666667 0.8125,6.66666667 C0.8125,3.45 3.36375,0.833333333 6.5,0.833333333 C9.63625,0.833333333 12.1875,3.45 12.1875,6.66666667 C12.1875,9.49583333 7.772375,16.7766667 6.5,18.8166667 L6.5,18.8166667 Z" id="Shape" fill="#000000"></path>
+            <path d="M6.5,3.75 C4.931875,3.75 3.65625,5.05833333 3.65625,6.66666667 C3.65625,8.275 4.931875,9.58333333 6.5,9.58333333 C8.068125,9.58333333 9.34375,8.275 9.34375,6.66666667 C9.34375,5.05833333 8.068125,3.75 6.5,3.75 L6.5,3.75 Z M6.5,8.75 C5.380375,8.75 4.46875,7.815 4.46875,6.66666667 C4.46875,5.51833333 5.380375,4.58333333 6.5,4.58333333 C7.619625,4.58333333 8.53125,5.51833333 8.53125,6.66666667 C8.53125,7.815 7.619625,8.75 6.5,8.75 L6.5,8.75 Z" id="Shape" fill="#000000"></path>
+          </g>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Select a marker image</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">Upload your icons or just use our nice selection.</p>
+        <ul class="Modal-listText">
+          <li class="Modal-listTextItem">
+            <p class="CDB-Text CDB-Size-small u-altTextColor">YOUR UPLOADS</p>
+          </li>
+          <li class="Modal-listTextItem">
+            <p class="CDB-Text CDB-Size-small u-altTextColor">SIMPLE ICONS FROM FREEPIK.COM</p>
+          </li>
+          <li class="Modal-listTextItem">
+            <p class="CDB-Text CDB-Size-small u-altTextColor">MAKI ICONS FROM MAPBOX</p>
+          </li>
+        </ul>
+        <ul class="Modal-listActions u-flex u-alignCenter">
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
+            </button>
+          </li>
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Set image</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+  </div>
+```
+*/
+
+/* SG
+# Modals/Drop
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="21px" height="25px" viewBox="538 412 21 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="hand" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(538.000000, 412.000000)">
+            <path d="M16,12 C15.586,12 15.2,12.127 14.881,12.344 C14.607,11.564 13.872,11 13,11 C12.586,11 12.2,11.127 11.881,11.344 C11.607,10.564 10.872,10 10,10 C9.129,10 8.393,10.564 8.119,11.344 C7.8,11.127 7.414,11 7,11 C5.897,11 5,11.897 5,13 L5,14 L4,14 C2.687,14 2,15.258 2,16.5 L2,17.5 C2,20.286 3.509,25 9.165,25 L12.5,25 C15.532,25 18,22.533 18,19.5 L18,15.5 L18,14 C18,12.897 17.103,12 16,12 L16,12 Z M17,19.5 C17,21.982 14.981,24 12.5,24 L9.165,24 C3.173,24 3,18.166 3,17.5 L3,16.5 C3,15.897 3.267,15 4,15 L5,15 L5,16.5 L6,16.5 L6,13 C6,12.449 6.448,12 7,12 C7.552,12 8,12.449 8,13 L8,14 L9,14 L9,13 L9,12 C9,11.449 9.448,11 10,11 C10.552,11 11,11.449 11,12 L11,13 L11,14 L12,14 L12,13 C12,12.449 12.448,12 13,12 C13.552,12 14,12.449 14,13 L14,14 L14,15.5 L15,15.5 L15,14 C15,13.449 15.448,13 16,13 C16.552,13 17,13.449 17,14 L17,15.5 L17,19.5 L17,19.5 Z" id="Shape" fill="#000000"></path>
+            <path d="M20.5,8 L17.5,8 C17.224,8 17,8.224 17,8.5 C17,8.776 17.224,9 17.5,9 L20.5,9 C20.776,9 21,8.776 21,8.5 C21,8.224 20.776,8 20.5,8 L20.5,8 Z" id="Shape" fill="#000000"></path>
+            <path d="M15.5,5 C15.628,5 15.756,4.951 15.854,4.854 L17.854,2.854 C18.049,2.659 18.049,2.342 17.854,2.147 C17.659,1.952 17.342,1.952 17.147,2.147 L15.147,4.147 C14.952,4.342 14.952,4.659 15.147,4.854 C15.244,4.951 15.372,5 15.5,5 L15.5,5 Z" id="Shape" fill="#000000"></path>
+            <path d="M10.5,4 C10.776,4 11,3.776 11,3.5 L11,0.5 C11,0.224 10.776,0 10.5,0 C10.224,0 10,0.224 10,0.5 L10,3.5 C10,3.776 10.224,4 10.5,4 L10.5,4 Z" id="Shape" fill="#000000"></path>
+            <path d="M5.146,4.854 C5.244,4.951 5.372,5 5.5,5 C5.628,5 5.756,4.951 5.854,4.854 C6.049,4.659 6.049,4.342 5.854,4.147 L3.854,2.147 C3.659,1.952 3.342,1.952 3.147,2.147 C2.952,2.342 2.952,2.659 3.147,2.854 L5.146,4.854 L5.146,4.854 Z" id="Shape" fill="#000000"></path>
+            <path d="M4,8.5 C4,8.224 3.776,8 3.5,8 L0.5,8 C0.224,8 0,8.224 0,8.5 C0,8.776 0.224,9 0.5,9 L3.5,9 C3.776,9 4,8.776 4,8.5 L4,8.5 Z" id="Shape" fill="#000000"></path>
+          </g>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Drop your files here</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">Your files will get automatically imported to CARTO.</p>
+      </div>
+  </div>
+```
+*/
+
+
+/* SG
+# Modals/Infowindow
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="24px" height="24px" viewBox="504 400 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="Smiley-black" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(504.000000, 400.000000)">
+            <path d="M12,13.797 C9.069,13.797 6.478,15.286 5.07,17.781 C4.934,18.022 5.019,18.327 5.26,18.463 C5.338,18.507 5.422,18.527 5.505,18.527 C5.679,18.527 5.849,18.435 5.941,18.273 C7.169,16.096 9.434,14.796 12,14.796 C14.658,14.796 16.943,16.087 18.114,18.249 C18.245,18.492 18.55,18.582 18.792,18.45 C19.035,18.319 19.125,18.015 18.993,17.772 C17.645,15.283 15.031,13.797 12,13.797 L12,13.797 Z" id="Shape" fill="#2E3C43" transform="translate(12.029506, 16.162000) scale(1, -1) translate(-12.029506, -16.162000) "></path>
+            <path d="M7.25,10.5 C8.353,10.5 9.25,9.603 9.25,8.5 C9.25,7.397 8.353,6.5 7.25,6.5 C6.147,6.5 5.25,7.397 5.25,8.5 C5.25,9.603 6.147,10.5 7.25,10.5 L7.25,10.5 Z M7.25,7.5 C7.801,7.5 8.25,7.948 8.25,8.5 C8.25,9.052 7.801,9.5 7.25,9.5 C6.699,9.5 6.25,9.052 6.25,8.5 C6.25,7.948 6.699,7.5 7.25,7.5 L7.25,7.5 Z" id="Shape" fill="#2E3C43"></path>
+            <path d="M16.25,10.5 C17.353,10.5 18.25,9.603 18.25,8.5 C18.25,7.397 17.353,6.5 16.25,6.5 C15.147,6.5 14.25,7.397 14.25,8.5 C14.25,9.603 15.147,10.5 16.25,10.5 L16.25,10.5 Z M16.25,7.5 C16.801,7.5 17.25,7.948 17.25,8.5 C17.25,9.052 16.801,9.5 16.25,9.5 C15.699,9.5 15.25,9.052 15.25,8.5 C15.25,7.948 15.699,7.5 16.25,7.5 L16.25,7.5 Z" id="Shape" fill="#2E3C43"></path>
+            <path d="M12,0 C5.383,0 0,5.383 0,12 C0,18.617 5.383,24 12,24 C18.617,24 24,18.617 24,12 C24,5.383 18.617,0 12,0 L12,0 Z M12,23 C5.935,23 1,18.065 1,12 C1,5.935 5.935,1 12,1 C18.065,1 23,5.935 23,12 C23,18.065 18.065,23 12,23 L12,23 Z" id="Shape" fill="#2E3C43"></path>
+          </g>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Templating infowindows in CARTO</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">We support HTML infowindows, so here are some tips to work with them</p>
+        <ul class="Modal-listText">
+          <li class="Modal-listTextItem u-flex u-alignCenter">
+            <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
+            <p class="CDB-Text CDB-Size-medium">You can use the name of yout fields as <span class="CDB-Text is-semibold">name, description</span>, etc.</p>
+          </li>
+          <li class="Modal-listTextItem u-flex u-alignCenter">
+            <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">2</div>
+            <p class="CDB-Text CDB-Size-medium">Be sure you have <span class="Modal-listTextHighlight is-code">.cartodb-popup</span> and <span class="Modal-listTextHighlight is-code">close</span> elements. They are needed for basic interactions.</p>
+          </li>
+          <li class="Modal-listTextItem u-flex u-alignCenter">
+            <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">3</div>
+            <p class="CDB-Text CDB-Size-medium">If you want to know how to work with infowindows classes, check Mustache Docs or Mustache Demo</p>
+          </li>
+        </ul>
+        <div class="Modal-listActions">
+          <div class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Skip</span>
+            </button>
+          </div>
+        </div>
+
+
+      </div>
+  </div>
+```
+*/
+
+.Modal-listTextHighlight {
+  display: inline-block;
+  padding: 4px 5px;
+  border-radius: 2px;
+  background: $cThirdBackground;
+}
+
+.Modal-listTextHighlight.is-code {
+  font: 500 12px 'Monaco', 'Monospace';
+}
+
+
+/* SG
+# Modals/Sync Table
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="23px" height="19px" viewBox="505 403 23 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <g id="sync" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(505.000000, 403.000000)">
+                <path d="M18.7752,8.80515789 C18.8928,8.92257895 19.0464,8.98189474 19.2,8.98189474 C19.3536,8.98189474 19.5072,8.92257895 19.6248,8.80515789 C19.8588,8.56910526 19.8588,8.18536842 19.6248,7.94931579 C19.3572,7.67936842 19.0788,7.42394737 18.7896,7.18547368 C18.75,7.15278947 18.7068,7.12494737 18.666,7.09226316 C16.6668,5.48105263 14.2068,4.59857895 11.61,4.59857895 L11.6076,4.59857895 L11.6052,4.59857895 C8.5776,4.59857895 5.7312,5.78852632 3.5916,7.94931579 C3.3576,8.18536842 3.3576,8.56910526 3.5916,8.80515789 C3.7092,8.92378947 3.8628,8.98189474 4.0164,8.98189474 C4.17,8.98189474 4.3236,8.92257895 4.44,8.80515789 C6.3552,6.87315789 8.9004,5.80910526 11.6076,5.80910526 C14.3148,5.80910526 16.86,6.87315789 18.7752,8.80515789 L18.7752,8.80515789 Z" id="Shape" fill="#2E3C43"></path>
+                <path d="M21.8124,5.65910526 C21.93,5.77773684 22.0836,5.83584211 22.2372,5.83584211 C22.3908,5.83584211 22.5444,5.77652632 22.662,5.65910526 C22.896,5.42305263 22.896,5.03931579 22.662,4.80326316 C16.566,-1.34621053 6.648,-1.34378947 0.5544,4.80326316 C0.3204,5.03931579 0.3204,5.42305263 0.5544,5.65910526 C0.7884,5.89515789 1.1688,5.89515789 1.4028,5.65910526 C7.0284,-0.0170526316 16.1868,-0.0158421053 21.8124,5.65910526 L21.8124,5.65910526 Z" id="Shape" fill="#2E3C43"></path>
+                <path d="M9.1884,9.46842105 C8.256,9.811 7.3752,10.3412105 6.6276,11.0953684 C6.3936,11.3314211 6.3936,11.7151579 6.6276,11.9512105 C6.7452,12.0698421 6.8988,12.1279474 7.0524,12.1279474 C7.206,12.1279474 7.3596,12.0686316 7.4772,11.9512105 C9.7548,9.65605263 13.4616,9.65605263 15.7404,11.9512105 C15.858,12.0698421 16.0116,12.1279474 16.1652,12.1279474 C16.3188,12.1279474 16.4724,12.0686316 16.59,11.9512105 C16.824,11.7151579 16.824,11.3314211 16.59,11.0953684 C14.5896,9.07863158 11.6844,8.54963158 9.1884,9.46842105 L9.1884,9.46842105 Z" id="Shape" fill="#2E3C43"></path>
+                <path d="M11.6076,13.4291579 C10.092,13.4291579 8.8596,14.6723684 8.8596,16.2000526 C8.8596,17.7289474 10.092,18.9721579 11.6076,18.9721579 C13.122,18.9721579 14.3544,17.7289474 14.3544,16.2000526 C14.3544,14.6735789 13.122,13.4291579 11.6076,13.4291579 L11.6076,13.4291579 Z M11.6076,17.7628421 C10.7544,17.7628421 10.0596,17.0619474 10.0596,16.2012632 C10.0596,15.3405789 10.7544,14.6408947 11.6076,14.6408947 C12.4608,14.6408947 13.1544,15.3405789 13.1544,16.2012632 C13.1544,17.0619474 12.4608,17.7628421 11.6076,17.7628421 L11.6076,17.7628421 Z" id="Shape" fill="#2E3C43"></path>
+            </g>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Sync Table options</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">Your table is in Sync with a Google Drive file: Accidents.csv.</p>
+        <div class="Modal-listTextItem u-flex u-alignCenter">
+          <h3 class="CDB-Text CDB-Size-small is-semibold u-upperCase">Sync my data</h3>
+          <ul class="Modal-listForm u-flex u-alignCenter CDB-Text CDB-Size-small">
+            <li class="Modal-listFormItem">
+              <input class="CDB-Radio" type="radio" name="veritas" value="01">
+              <span class="u-iBlock CDB-Radio-face"></span>
+              <label class="u-iBlock u-lSpace">Never</label>
+            </li>
+            <li class="Modal-listFormItem">
+              <input class="CDB-Radio" type="radio" name="veritas" value="01">
+              <span class="u-iBlock CDB-Radio-face"></span>
+              <label class="u-iBlock u-lSpace">Every hour</label>
+            </li>
+            <li class="Modal-listFormItem">
+              <input class="CDB-Radio" type="radio" name="veritas" value="01">
+              <span class="u-iBlock CDB-Radio-face"></span>
+              <label class="u-iBlock u-lSpace">Every day</label>
+            </li>
+            <li class="Modal-listFormItem">
+              <input class="CDB-Radio" type="radio" name="veritas" value="01">
+              <span class="u-iBlock CDB-Radio-face"></span>
+              <label class="u-iBlock u-lSpace">Every week</label>
+            </li>
+            <li class="Modal-listFormItem">
+              <input class="CDB-Radio" type="radio" name="veritas" value="01">
+              <span class="u-iBlock CDB-Radio-face"></span>
+              <label class="u-iBlock u-lSpace">Every month</label>
+            </li>
+          <ul>
+        </div>
+        <ul class="Modal-listActions u-flex u-alignCenter">
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
+            </button>
+          </li>
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--primary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Save</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+  </div>
+```
+*/
+
+
+.Modal-listForm {
+  margin-left: 24px;
+}
+.Modal-listFormItem {
+  margin-right: 32px;
+}
+.Modal-listFormItem:last-child {
+  margin-right: 0;
+}
+
+
+/* SG
+# Modals/Export dataset
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="24px" height="24px" viewBox="459 348 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="Export-dataset" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(459.000000, 348.000000)">
+            <path d="M1,1 L11,1 L11,5.5 C11,5.776 11.224,6 11.5,6 L16,6 L16,9.5 L17,9.5 L17,5.502 C17,5.502 17,5.502 17,5.501 C17,5.5 17,5.501 17,5.5 C17,5.447 16.985,5.398 16.97,5.35 C16.966,5.337 16.967,5.323 16.962,5.311 C16.936,5.247 16.896,5.19 16.847,5.142 L11.854,0.147 C11.808,0.101 11.753,0.064 11.692,0.039 C11.632,0.014 11.567,0 11.5,0 L0.5,0 C0.224,0 0,0.224 0,0.5 L0,21.5 C0,21.776 0.224,22 0.5,22 L10.5,22 L10.5,21 L1,21 L1,1 L1,1 Z M12,1.708 L15.291,5 L12,5 L12,1.708 L12,1.708 Z" id="Shape" fill="#2E3C43"></path>
+            <path d="M17.5,11 C13.916,11 11,13.916 11,17.5 C11,21.084 13.916,24 17.5,24 C21.084,24 24,21.084 24,17.5 C24,13.916 21.084,11 17.5,11 L17.5,11 Z M17.5,23 C14.467,23 12,20.533 12,17.5 C12,14.467 14.467,12 17.5,12 C20.533,12 23,14.467 23,17.5 C23,20.533 20.533,23 17.5,23 L17.5,23 Z" id="Shape" fill="#2E3C43"></path>
+            <path d="M17.858,14.425 C17.767,14.331 17.641,14.272 17.5,14.272 C17.359,14.272 17.232,14.331 17.142,14.425 L14.965,16.602 C14.77,16.797 14.77,17.114 14.965,17.309 C15.16,17.504 15.477,17.504 15.672,17.309 L17,15.981 L17,20.226 C17,20.502 17.224,20.726 17.5,20.726 C17.776,20.726 18,20.502 18,20.226 L18,15.981 L19.328,17.309 C19.426,17.407 19.554,17.455 19.682,17.455 C19.81,17.455 19.938,17.406 20.036,17.309 C20.231,17.114 20.231,16.797 20.036,16.602 L17.858,14.425 L17.858,14.425 Z" id="Shape" fill="#2E3C43" transform="translate(17.500500, 17.499000) scale(1, -1) translate(-17.500500, -17.499000) "></path>
+          </g>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Export dataset</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">All datasets will be compressed in a single file</p>
+        <div class="Modal-listTextItem u-flex u-alignCenter">
+          <h3 class="CDB-Text CDB-Size-small is-semibold u-upperCase">Select format</h3>
+          <ul class="Modal-listForm u-flex u-alignCenter CDB-Text CDB-Size-small">
+            <li class="Modal-listFormItem">
+              <input class="CDB-Radio" type="radio" name="veritas" value="01">
+              <span class="u-iBlock CDB-Radio-face"></span>
+              <label class="u-iBlock u-lSpace">CSV</label>
+            </li>
+            <li class="Modal-listFormItem">
+              <input class="CDB-Radio" type="radio" name="veritas" value="01">
+              <span class="u-iBlock CDB-Radio-face"></span>
+              <label class="u-iBlock u-lSpace">SHP</label>
+            </li>
+            <li class="Modal-listFormItem">
+              <input class="CDB-Radio" type="radio" name="veritas" value="01">
+              <span class="u-iBlock CDB-Radio-face"></span>
+              <label class="u-iBlock u-lSpace">KML</label>
+            </li>
+            <li class="Modal-listFormItem">
+              <input class="CDB-Radio" type="radio" name="veritas" value="01">
+              <span class="u-iBlock CDB-Radio-face"></span>
+              <label class="u-iBlock u-lSpace">GEOJSON</label>
+            </li>
+            <li class="Modal-listFormItem">
+              <input class="CDB-Radio" type="radio" name="veritas" value="01">
+              <span class="u-iBlock CDB-Radio-face"></span>
+              <label class="u-iBlock u-lSpace">SVG</label>
+            </li>
+          <ul>
+        </div>
+        <ul class="Modal-listActions u-flex u-alignCenter">
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
+            </button>
+          </li>
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--primary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Save</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+  </div>
+```
+*/
+
+
+/* SG
+# Modals/Export map
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="24px" height="24px" viewBox="459 348 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="Export-dataset" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(459.000000, 348.000000)">
+            <path d="M1,1 L11,1 L11,5.5 C11,5.776 11.224,6 11.5,6 L16,6 L16,9.5 L17,9.5 L17,5.502 C17,5.502 17,5.502 17,5.501 C17,5.5 17,5.501 17,5.5 C17,5.447 16.985,5.398 16.97,5.35 C16.966,5.337 16.967,5.323 16.962,5.311 C16.936,5.247 16.896,5.19 16.847,5.142 L11.854,0.147 C11.808,0.101 11.753,0.064 11.692,0.039 C11.632,0.014 11.567,0 11.5,0 L0.5,0 C0.224,0 0,0.224 0,0.5 L0,21.5 C0,21.776 0.224,22 0.5,22 L10.5,22 L10.5,21 L1,21 L1,1 L1,1 Z M12,1.708 L15.291,5 L12,5 L12,1.708 L12,1.708 Z" id="Shape" fill="#2E3C43"></path>
+            <path d="M17.5,11 C13.916,11 11,13.916 11,17.5 C11,21.084 13.916,24 17.5,24 C21.084,24 24,21.084 24,17.5 C24,13.916 21.084,11 17.5,11 L17.5,11 Z M17.5,23 C14.467,23 12,20.533 12,17.5 C12,14.467 14.467,12 17.5,12 C20.533,12 23,14.467 23,17.5 C23,20.533 20.533,23 17.5,23 L17.5,23 Z" id="Shape" fill="#2E3C43"></path>
+            <path d="M17.858,14.425 C17.767,14.331 17.641,14.272 17.5,14.272 C17.359,14.272 17.232,14.331 17.142,14.425 L14.965,16.602 C14.77,16.797 14.77,17.114 14.965,17.309 C15.16,17.504 15.477,17.504 15.672,17.309 L17,15.981 L17,20.226 C17,20.502 17.224,20.726 17.5,20.726 C17.776,20.726 18,20.502 18,20.226 L18,15.981 L19.328,17.309 C19.426,17.407 19.554,17.455 19.682,17.455 C19.81,17.455 19.938,17.406 20.036,17.309 C20.231,17.114 20.231,16.797 20.036,16.602 L17.858,14.425 L17.858,14.425 Z" id="Shape" fill="#2E3C43" transform="translate(17.500500, 17.499000) scale(1, -1) translate(-17.500500, -17.499000) "></path>
+          </g>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Export Untitled Map</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">This map, and the connected data, will be exported as a .carto file</p>
+        <ul class="Modal-listActions u-flex u-alignCenter">
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Cancel</span>
+            </button>
+          </li>
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--primary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Export</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+  </div>
+```
+*/
+
+/* SG
+# Modals/Mod Error Adding Widget
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="24px" height="24px" viewBox="521 436 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <g id="Smiley-red" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(521.000000, 436.000000)">
+                <path d="M12,13.797 C9.069,13.797 6.478,15.286 5.07,17.781 C4.934,18.022 5.019,18.327 5.26,18.463 C5.338,18.507 5.422,18.527 5.505,18.527 C5.679,18.527 5.849,18.435 5.941,18.273 C7.169,16.096 9.434,14.796 12,14.796 C14.658,14.796 16.943,16.087 18.114,18.249 C18.245,18.492 18.55,18.582 18.792,18.45 C19.035,18.319 19.125,18.015 18.993,17.772 C17.645,15.283 15.031,13.797 12,13.797 L12,13.797 Z" id="Shape" fill="#F15743"></path>
+                <path d="M7.25,10.5 C8.353,10.5 9.25,9.603 9.25,8.5 C9.25,7.397 8.353,6.5 7.25,6.5 C6.147,6.5 5.25,7.397 5.25,8.5 C5.25,9.603 6.147,10.5 7.25,10.5 L7.25,10.5 Z M7.25,7.5 C7.801,7.5 8.25,7.948 8.25,8.5 C8.25,9.052 7.801,9.5 7.25,9.5 C6.699,9.5 6.25,9.052 6.25,8.5 C6.25,7.948 6.699,7.5 7.25,7.5 L7.25,7.5 Z" id="Shape" fill="#F15743"></path>
+                <path d="M16.25,10.5 C17.353,10.5 18.25,9.603 18.25,8.5 C18.25,7.397 17.353,6.5 16.25,6.5 C15.147,6.5 14.25,7.397 14.25,8.5 C14.25,9.603 15.147,10.5 16.25,10.5 L16.25,10.5 Z M16.25,7.5 C16.801,7.5 17.25,7.948 17.25,8.5 C17.25,9.052 16.801,9.5 16.25,9.5 C15.699,9.5 15.25,9.052 15.25,8.5 C15.25,7.948 15.699,7.5 16.25,7.5 L16.25,7.5 Z" id="Shape" fill="#F15743"></path>
+                <path d="M12,0 C5.383,0 0,5.383 0,12 C0,18.617 5.383,24 12,24 C18.617,24 24,18.617 24,12 C24,5.383 18.617,0 12,0 L12,0 Z M12,23 C5.935,23 1,18.065 1,12 C1,5.935 5.935,1 12,1 C18.065,1 23,5.935 23,12 C23,18.065 18.065,23 12,23 L12,23 Z" id="Shape" fill="#F15743"></path>
+            </g>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-errorTextColor u-bSpace--m">Oops, there was a problem</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">Close the page an open again. If the problem persists contact us at support@cartodb.com</p>
+        <ul class="Modal-listActions u-flex u-alignCenter">
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Contact us</span>
+            </button>
+          </li>
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--primary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Close</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+  </div>
+```
+*/
+
+
+
+/* SG
+# Modals/Mod Add points
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        pending icon
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Start by adding points, lines or polygons</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">Select the geometry type that you want to have in “Untitled Dataset 1”</p>
+        <ul class="Modal-listText">
+          <li class="Modal-listTextItem u-flex u-alignCenter">
+            <div class="u-iBlock u-rSpace--xl">
+              <input class="CDB-Radio" type="radio" name="gender" value="01">
+              <span class="u-iBlock CDB-Radio-face"></span>
+            </div>
+            <div class="u-flex u-alignCenter">
+              <div class="Modal-addItem u-flex u-alignCenter u-justifyCenter u-rSpace--xl">
+                <svg width="16px" height="16px" viewBox="525 410 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <g id="lines" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(525.000000, 410.000000)">
+                    <rect id="Rectangle-1511" fill="#2E3C43" x="0" y="12" width="4" height="4" rx="1"></rect>
+                    <rect id="Rectangle-1511" fill="#2E3C43" x="12" y="0" width="4" height="4" rx="1"></rect>
+                    <path d="M3.5,12.5 L12.5,3.5" id="Line" stroke="#2E3C43" stroke-linecap="square"></path>
+                  </g>
+                </svg>
+              </div>
+              <div>
+                <h3 class="CDB-Text CDB-Size-large u-bSpace--m">Add Lines</h3>
+                <p class="CDB-Text CDB-Size-medium u-altTextColor">Create a layer as a combination of one or more layers. </p>
+              </div>
+            </div>
+          </li>
+          <li class="Modal-listTextItem u-flex u-alignCenter">
+            <div class="u-iBlock u-rSpace--xl">
+              <input class="CDB-Radio" type="radio" name="gender" value="02">
+              <span class="u-iBlock CDB-Radio-face"></span>
+            </div>
+            <div class="u-flex u-alignCenter">
+              <div class="Modal-addItem u-flex u-alignCenter u-justifyCenter u-rSpace--xl">
+                <svg width="16px" height="16px" viewBox="520 417 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <g id="points" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(520.000000, 417.000000)">
+                    <rect id="Rectangle-1511" fill="#2E3C43" x="0" y="0" width="4" height="4" rx="1"></rect>
+                    <rect id="Rectangle-1511" fill="#2E3C43" x="12" y="12" width="4" height="4" rx="1"></rect>
+                    <rect id="Rectangle-1511" fill="#2E3C43" x="0" y="12" width="4" height="4" rx="1"></rect>
+                  </g>
+                </svg>
+              </div>
+              <div>
+                <h3 class="CDB-Text CDB-Size-large u-bSpace--m">Add Points</h3>
+                <p class="CDB-Text CDB-Size-medium u-altTextColor">Specially if you are thinking on POI’s and concreet places</p>
+              </div>
+            </div>
+          </li>
+          <li class="Modal-listTextItem u-flex u-alignCenter">
+            <div class="u-iBlock u-rSpace--xl">
+              <input class="CDB-Radio" type="radio" name="gender" value="03">
+              <span class="u-iBlock CDB-Radio-face"></span>
+            </div>
+            <div class="u-flex u-alignCenter">
+              <div class="Modal-addItem u-flex u-alignCenter u-justifyCenter u-rSpace--xl">
+                <svg width="16px" height="16px" viewBox="525 440 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <g id="polygon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(525.000000, 440.000000)">
+                    <rect id="@bounds" x="0" y="0" width="16" height="16"></rect>
+                    <rect id="Rectangle-2665" fill="#2E3C43" x="3" y="14" width="10" height="1" rx="0.5"></rect>
+                    <rect id="Rectangle-2665-Copy" fill="#2E3C43" x="3" y="1" width="10" height="1" rx="0.5"></rect>
+                    <rect id="Rectangle-2665-Copy-2" fill="#2E3C43" x="1" y="3" width="1" height="10" rx="0.5"></rect>
+                    <rect id="Rectangle-2665-Copy-3" fill="#2E3C43" x="14" y="3" width="1" height="10" rx="0.5"></rect>
+                    <rect id="Rectangle-1511" fill="#2E3C43" x="0" y="12" width="4" height="4" rx="1"></rect>
+                    <rect id="Rectangle-1511" fill="#2E3C43" x="0" y="0" width="4" height="4" rx="1"></rect>
+                    <rect id="Rectangle-1511" fill="#2E3C43" x="12" y="0" width="4" height="4" rx="1"></rect>
+                    <rect id="Rectangle-1511" fill="#2E3C43" x="12" y="12" width="4" height="4" rx="1"></rect>
+                  </g>
+                </svg>
+              </div>
+              <div>
+                <h3 class="CDB-Text CDB-Size-large u-bSpace--m">Add Polygons</h3>
+                <p class="CDB-Text CDB-Size-medium u-altTextColor">Perfect for roads, rivers or tracks</p>
+              </div>
+            </div>
+          </li>
+        </ul>
+
+
+        <div class="Modal-listActions u-flex u-alignCenter">
+          <div class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Skip</span>
+            </button>
+          </div>
+        </div>
+      </div>
+  </div>
+```
+*/
+
+.Modal-addItem {
+  width: 40px;
+  height: 40px;
+  border: 1px solid $cMainLine;
+  border-radius: $halfBaseSize;
+}
+
+
+/* SG
+# Modals/Mod Error Creating Table Steps
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="24px" height="24px" viewBox="521 436 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <g id="Smiley-red" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(521.000000, 436.000000)">
+                <path d="M12,13.797 C9.069,13.797 6.478,15.286 5.07,17.781 C4.934,18.022 5.019,18.327 5.26,18.463 C5.338,18.507 5.422,18.527 5.505,18.527 C5.679,18.527 5.849,18.435 5.941,18.273 C7.169,16.096 9.434,14.796 12,14.796 C14.658,14.796 16.943,16.087 18.114,18.249 C18.245,18.492 18.55,18.582 18.792,18.45 C19.035,18.319 19.125,18.015 18.993,17.772 C17.645,15.283 15.031,13.797 12,13.797 L12,13.797 Z" id="Shape" fill="#F15743"></path>
+                <path d="M7.25,10.5 C8.353,10.5 9.25,9.603 9.25,8.5 C9.25,7.397 8.353,6.5 7.25,6.5 C6.147,6.5 5.25,7.397 5.25,8.5 C5.25,9.603 6.147,10.5 7.25,10.5 L7.25,10.5 Z M7.25,7.5 C7.801,7.5 8.25,7.948 8.25,8.5 C8.25,9.052 7.801,9.5 7.25,9.5 C6.699,9.5 6.25,9.052 6.25,8.5 C6.25,7.948 6.699,7.5 7.25,7.5 L7.25,7.5 Z" id="Shape" fill="#F15743"></path>
+                <path d="M16.25,10.5 C17.353,10.5 18.25,9.603 18.25,8.5 C18.25,7.397 17.353,6.5 16.25,6.5 C15.147,6.5 14.25,7.397 14.25,8.5 C14.25,9.603 15.147,10.5 16.25,10.5 L16.25,10.5 Z M16.25,7.5 C16.801,7.5 17.25,7.948 17.25,8.5 C17.25,9.052 16.801,9.5 16.25,9.5 C15.699,9.5 15.25,9.052 15.25,8.5 C15.25,7.948 15.699,7.5 16.25,7.5 L16.25,7.5 Z" id="Shape" fill="#F15743"></path>
+                <path d="M12,0 C5.383,0 0,5.383 0,12 C0,18.617 5.383,24 12,24 C18.617,24 24,18.617 24,12 C24,5.383 18.617,0 12,0 L12,0 Z M12,23 C5.935,23 1,18.065 1,12 C1,5.935 5.935,1 12,1 C18.065,1 23,5.935 23,12 C23,18.065 18.065,23 12,23 L12,23 Z" id="Shape" fill="#F15743"></path>
+            </g>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-errorTextColor u-bSpace--m">Error creating table from SQL query (8003)</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">Don’t panic, follow these steps</p>
+        <ul class="Modal-listText">
+          <li class="Modal-listTextItem u-flex u-alignCenter">
+            <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
+            <p class="CDB-Text CDB-Size-medium">Your dataset appears broken. Double check that all the necessary parts of the dataset are correctly setted up.</p>
+          </li>
+          <li class="Modal-listTextItem u-flex u-alignCenter">
+            <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">2</div>
+            <p class="CDB-Text CDB-Size-medium">Your dataset appears broken. Double check that all the necessary parts of the dataset are correctly setted up. <span class="Modal-listTextHighlight CDB-Text CDB-Size-small">f9736a7394-3984-3edo-85jrndi4333344e <a href=#" class="u-lSpace">SEND CODE</a></span></p>
+          </li>
+        </ul>
+        <ul class="Modal-listActions u-flex u-alignCenter">
+          <li class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--primary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">GO BACK</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+  </div>
+```
+*/
+
+
+/* SG
+# Modals/Correctly Generated Image
+
+
+```
+  <div class="u-flex">
+      <div class="Modal-icon">
+        <svg width="24px" height="24px" viewBox="504 400 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="Smiley-black" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(504.000000, 400.000000)">
+            <path d="M12,13.797 C9.069,13.797 6.478,15.286 5.07,17.781 C4.934,18.022 5.019,18.327 5.26,18.463 C5.338,18.507 5.422,18.527 5.505,18.527 C5.679,18.527 5.849,18.435 5.941,18.273 C7.169,16.096 9.434,14.796 12,14.796 C14.658,14.796 16.943,16.087 18.114,18.249 C18.245,18.492 18.55,18.582 18.792,18.45 C19.035,18.319 19.125,18.015 18.993,17.772 C17.645,15.283 15.031,13.797 12,13.797 L12,13.797 Z" id="Shape" fill="#2E3C43" transform="translate(12.029506, 16.162000) scale(1, -1) translate(-12.029506, -16.162000) "></path>
+            <path d="M7.25,10.5 C8.353,10.5 9.25,9.603 9.25,8.5 C9.25,7.397 8.353,6.5 7.25,6.5 C6.147,6.5 5.25,7.397 5.25,8.5 C5.25,9.603 6.147,10.5 7.25,10.5 L7.25,10.5 Z M7.25,7.5 C7.801,7.5 8.25,7.948 8.25,8.5 C8.25,9.052 7.801,9.5 7.25,9.5 C6.699,9.5 6.25,9.052 6.25,8.5 C6.25,7.948 6.699,7.5 7.25,7.5 L7.25,7.5 Z" id="Shape" fill="#2E3C43"></path>
+            <path d="M16.25,10.5 C17.353,10.5 18.25,9.603 18.25,8.5 C18.25,7.397 17.353,6.5 16.25,6.5 C15.147,6.5 14.25,7.397 14.25,8.5 C14.25,9.603 15.147,10.5 16.25,10.5 L16.25,10.5 Z M16.25,7.5 C16.801,7.5 17.25,7.948 17.25,8.5 C17.25,9.052 16.801,9.5 16.25,9.5 C15.699,9.5 15.25,9.052 15.25,8.5 C15.25,7.948 15.699,7.5 16.25,7.5 L16.25,7.5 Z" id="Shape" fill="#2E3C43"></path>
+            <path d="M12,0 C5.383,0 0,5.383 0,12 C0,18.617 5.383,24 12,24 C18.617,24 24,18.617 24,12 C24,5.383 18.617,0 12,0 L12,0 Z M12,23 C5.935,23 1,18.065 1,12 C1,5.935 5.935,1 12,1 C18.065,1 23,5.935 23,12 C23,18.065 18.065,23 12,23 L12,23 Z" id="Shape" fill="#2E3C43"></path>
+          </g>
+        </svg>
+      </div>
+      <div>
+        <h2 class=" CDB-Text CDB-Size-huge is-light u-bSpace--m">Your image has been generated correctly</h2>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">You can use download your image in the following link <a href="#">http://saleiva.carto.com/images/super-image.2023131.a.png</a></p>
+        <div class="Modal-listActions u-flex u-alignCenter">
+          <div class="Modal-listActionsitem">
+            <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">DONE</span>
+            </button>
+          </div>
+        </div>
+      </div>
+  </div>
+```
+*/
+
+
+
+/* SG
+# Modals/Layout
+
+
+```
+  <div class="Modal">
+    <div class="Modal-header">
+      <div class="Modal-headerContainer">
+        Header
+      </div>
+    </div>
+    <div class="Modal-container">
+      <div class="Modal-inner">
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+          <p>Menu Entry</p>
+      </div>
+    </div>
+    <div class="Modal-footer">
+      <div class="Modal-footerContainer">
+        Footer
+      </div>
+    </div>
+  </div>
+```
+*/
+
+
+.Modal {
+  @include display-flex();
+  @include flex-direction(column);
+  height: 100%;
+  background: $cThirdBackground;
+  overflow: hidden;
+}
+.Modal-header {
+  @include display-flex();
+  @include justify-content(center);
+  @include flex(0 0 auto);
+  padding: $baseSize * 3 0;
+  background: $cWhite;
+}
+.Modal-footer {
+  @include display-flex();
+  @include justify-content(center);
+  @include flex(0 0 auto);
+}
+.Modal-container {
+  @include display-flex();
+  @include justify-content(center);
+  @include flex(1 1 auto);
+  overflow: scroll;
+}
+.Modal-inner,
+.Modal-headerContainer,
+.Modal-footerContainer {
+  @include flex(0 0 auto);
+  width: 940px;
+}
+
+.Modal-footerContainer {
+  padding: 24px 0;
+  border-top: 1px solid $cSecondaryLine;
+}
+
+

src/scss/cdb-components/shapes.scss

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/scss/cdb-components/tags.scss

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

src/scss/cdb-components/tooltips.scss

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

src/scss/cdb-components/typography.scss

@@ -5,18 +5,24 @@
 # Typography
 
 ```
-<p class="Text Size-huge">Open Sans 26/34 Regular</p>
-<p class="Text Size-large">Open Sans 16/22 Regular</p>
-<p class="Text is-semibold Size-medium">Open Sans 12/16 Semibold</p>
-<p class="Text Size-medium">Open Sans 12/16 Semibold</p>
-<p class="Text is-semibold Size-small">Open Sans 10/14 Semibold</p>
-<p class="Text Size-small">Open Sans 10/14 Regular</p>
+<p class="CDB-Text CDB-Size-huge">Open Sans 26/34 Regular</p>
+<p class="CDB-Text CDB-Size-huge is-light">Open Sans 26/34 Light</p>
+<p class="CDB-Text CDB-Size-large">Open Sans 16/22 Regular</p>
+<p class="CDB-Text is-semibold CDB-Size-medium">Open Sans 12/16 Semibold</p>
+<p class="CDB-Text is-semibold u-upperCase CDB-Size-medium">Open Sans 12/16 Semibold Uppercase</p>
+<p class="CDB-Text CDB-Size-medium u-secondaryTextColor">Open Sans 12/16 Regular</p>
+<p class="CDB-Text CDB-Size-medium u-altTextColor">Open Sans 12/16 Regular</p>
+<p class="CDB-Text CDB-Size-medium u-hintTextColor">Open Sans 12/16 Regular</p>
+<p class="CDB-Text is-semibold CDB-Size-small">Open Sans 10/14 Semibold</p>
+<p class="CDB-Text CDB-Size-small">Open Sans 10/14 Regular</p>
+<span class="CDB-Text CDB-Size-small is-underlined">?</span>
 ```
 */
 
 @import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
 
-.Text {
+.CDB-Text {
   font-family: 'Open Sans';
   $sFontWeight-normal: 400;
 
@@ -28,22 +34,44 @@
   }
 }
 
-.Size-huge {
+.is-underlined {
+  border-bottom: 1px dotted $cMainLine;
+}
+
+.CDB-Size-huge {
   font-size: $sFontSize-huge;
   line-height: $sLineHeight-huge;
 }
 
-.Size-large {
+.CDB-Size-large {
   font-size: $sFontSize-large;
   line-height: $sLineHeight-large;
 }
 
-.Size-medium {
+.CDB-Size-medium {
   font-size: $sFontSize-medium;
   line-height: $sLineHeight-medium;
 }
 
-.Size-small {
+.CDB-Size-small {
   font-size: $sFontSize-small;
   line-height: $sLineHeight-small;
+
 }
+
+.CDB-Size-small.u-whiteTextColor {
+  -webkit-font-smoothing: initial;
+}
+
+.CDB-FontSize-small {
+  font-size: $sFontSize-small;
+}
+
+.CDB-FontSize-medium {
+  font-size: $sFontSize-medium;
+}
+
+.CDB-IconFont.is-disabled {
+  opacity: 0.24;
+}
+

src/scss/cdb-icon-font.scss

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

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

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

src/scss/cdb-utilities/fonts.scss

@@ -1,22 +1,30 @@
 // Fonts
-// - They are being loaded from Google fonts
 // --------------------------------------------------
 
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
+  src: url('../fonts/OpenSans-Light.eot');
+  src: url('../fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/OpenSans-Light.woff') format('woff'),
+  url('../fonts/OpenSans-Light.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
+  src: url('../fonts/OpenSans-Regular.eot');
+  src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/OpenSans-Regular.woff') format('woff'),
+  url('../fonts/OpenSans-Regular.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
+  src: url('../fonts/OpenSans-Semibold.eot');
+  src: url('../fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/OpenSans-Semibold.woff') format('woff'),
+  url('../fonts/OpenSans-Semibold.ttf') format('truetype');
 }

src/scss/cdb-utilities/helpers.scss

@@ -2,13 +2,21 @@
 // ----------------------------------------------
 
 @import './mixins';
+@import '../cdb-variables/colors';
 
+/* Margins */
 .u-tSpace {
   margin-top: 4px;
 }
+.u-tSpace--m {
+  margin-top: 8px;
+}
 .u-tSpace-xl {
   margin-top: 12px;
 }
+.u-rSpace--s {
+  margin-right: 2px;
+}
 .u-rSpace {
   margin-right: 4px;
 }
@@ -18,12 +26,58 @@
 .u-rSpace--xl {
   margin-right: 12px;
 }
+.u-bSpace {
+  margin-bottom: 4px;
+}
+.u-bSpace--m {
+  margin-bottom: 8px;
+}
+.u-bSpace--xl {
+  margin-bottom: 12px;
+}
 .u-lSpace {
   margin-left: 4px;
 }
 .u-lSpace--xl {
   margin-left: 12px;
 }
+
+.u-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+// Colors
+// Main Text Color is default color
+// ----------------------------------------------
+
+.u-actionTextColor {
+  color: $cBlue;
+}
+.u-mainTextColor {
+  color: $cMainText;
+}
+.u-secondaryTextColor {
+  color: $cSecondaryText;
+}
+.u-altTextColor {
+  color: $cAltText;
+}
+.u-hintTextColor {
+  color: $cHintText;
+}
+.u-alertTextColor {
+  color: $cAlert;
+}
+.u-whiteTextColor {
+  color: $cWhite;
+}
+.u-errorTextColor {
+  color: $cError;
+}
+
+/* Displays */
 .u-iBlock {
   @include inline-block();
 }
@@ -34,6 +88,39 @@
   display: none !important;
 }
 
+/* Decoration */
+.u-upperCase {
+  text-transform: uppercase;
+}
+
+/* Flex */
+.u-flex {
+  @include display-flex();
+}
+.u-justifySpace {
+  @include justify-content(space-between);
+}
+.u-justifyCenter {
+  @include justify-content(center);
+}
+.u-justifyStart {
+  @include justify-content(flex-start);
+}
+.u-justifyEnd {
+  @include justify-content(flex-end);
+}
+.u-alignStart {
+  @include align-items(flex-start);
+}
+.u-alignCenter {
+  @include align-items(center);
+}
+.u-alignEnd {
+  @include align-items(flex-end);
+}
+
+
+/* Media queries*/
 @include media-query-mobile() {
   .u-showDesktop {
     display: none !important;
@@ -42,3 +129,10 @@
     display: block !important;
   }
 }
+
+/* helper mixins */
+@mixin default-form-error-style() {
+  border: 1px solid rgba($cError, 0.48);
+  background: rgba($cError, 0.04);
+  color: $cError;
+}

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

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

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

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

src/scss/cdb-variables/_colors.scss

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

src/scss/cdb-variables/_sizes.scss

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