add layout

add more modals
add new modals
2016-08-19 16:14:30 +02:00 · 2016-08-19 12:55:27 +02:00 · 2016-08-18 19:39:03 +02:00 · 2016-08-18 18:13:24 +02:00 · 2016-08-18 14:03:31 +02:00 · 2016-08-18 12:43:02 +02:00
57 changed files with 2415 additions and 773 deletions
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@

 ### Installation
 As easy as:
+- ```npm install --global grunt-cli``` [Grunt installation](http://gruntjs.com/getting-started)
 - ```npm install --global gulp-cli``` [Gulp installation](https://github.com/gulpjs/gulp)
 - ```npm install -g markdown-styleguide-generator``` [StyleGenerator installation](https://www.npmjs.com/package/markdown-styleguide-generator#install)
 - ```npm install```
--- a/icon-font/font.sketch
+++ b/icon-font/font.sketch
--- a/icon-font/svgs/icon-font_105_View.svg
+++ b/icon-font/svgs/icon-font_105_View.svg
@@ -1,14 +1,14 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="500px" height="309px" viewBox="0 0 500 309" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.1 (29687) - http://www.bohemiancoding.com/sketch -->
    <title>icon-font_105_View</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-9000.000000, -10104.000000)" fill="#000000">
-            <g id="icon-font_105_View" sketch:type="MSLayerGroup" transform="translate(9000.000000, 10104.000000)">
-                <path d="M253.581879,308.61402 C312.962752,308.61402 370.768722,280.970482 427.225327,234.264991 C447.101103,217.822134 464.002246,201.524318 483.377535,181.181477 C485.568088,178.881533 492.073436,172.004723 492.078081,171.999827 C494.933975,168.989784 496.758569,167.101346 498.204136,165.671731 C499.511808,164.37849 500.384881,163.601664 500.441945,163.564064 C495.349704,166.919331 484.716873,165.896878 484.716873,154.524024 C484.716873,143.151171 495.349704,142.128718 500.441945,145.483984 C500.384881,145.446384 499.511808,144.669559 498.204136,143.376317 C496.758569,141.946702 494.933975,140.058264 492.078081,137.048221 C492.073436,137.043326 485.568088,130.166515 483.377535,127.866571 C464.002246,107.523731 447.101103,91.2259143 427.225327,74.7830573 C370.768722,28.0775667 312.962752,0.434027778 253.581879,0.434027778 C191.731723,0.434027778 130.807245,26.8363188 75.5661959,70.1970001 C35.8951124,101.336257 0.434027778,141.650659 0.434027778,154.524024 C0.434027778,167.397389 35.8951124,207.711792 75.5661959,238.851048 C130.807245,282.211729 191.731723,308.61402 253.581879,308.61402 L253.581879,308.61402 Z M89.1578777,221.535389 C55.2818134,194.944851 22.4468844,157.616028 22.4468844,154.524024 C22.4468844,151.43202 55.2818134,114.103197 89.1578777,87.5126589 C140.855436,46.9333905 197.359154,22.4468844 253.581879,22.4468844 C306.883849,22.4468844 360.314194,47.9979447 413.19371,91.7441773 C432.282846,107.536261 448.611152,123.281689 467.437643,143.048326 C469.597313,145.315844 476.081558,152.170347 476.109114,152.199391 C479.117168,155.369807 481.067363,157.38824 482.725294,159.027876 C485.030509,161.307652 486.691463,162.785505 488.330451,163.86543 C490.742582,165.454779 490.31849,170.118336 493.786291,169.784872 C497.263225,169.45053 499.302153,162.372959 499.607582,155.278924 C499.914506,148.150166 498.470919,141.004783 494.976966,140.668805 C491.509166,140.335341 490.742582,143.59327 488.330451,145.182618 C486.691463,146.262543 485.030509,147.740396 482.725294,150.020172 C481.067363,151.659808 479.117168,153.678241 476.109114,156.848657 C476.081558,156.877701 469.597313,163.732204 467.437643,165.999722 C448.611152,185.766359 432.282846,201.511787 413.19371,217.303871 C360.314194,261.050104 306.883849,286.601164 253.581879,286.601164 C197.359154,286.601164 140.855436,262.114658 89.1578777,221.535389 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-                <path d="M250,60.7910156 C200.300481,60.7910156 159.855769,101.867676 159.855769,152.34375 C159.855769,202.840169 200.300481,243.896484 250,243.896484 C299.699519,243.896484 340.144231,202.840169 340.144231,152.34375 C340.144231,101.867676 299.699519,60.7910156 250,60.7910156 L250,60.7910156 Z M250,223.551432 C211.338141,223.551432 179.887821,191.609701 179.887821,152.34375 C179.887821,113.077799 211.338141,81.1360677 250,81.1360677 C288.661859,81.1360677 320.112179,113.077799 320.112179,152.34375 C320.112179,191.609701 288.661859,223.551432 250,223.551432 L250,223.551432 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-9000.000000, -10001.000000)" fill="#000000">
+            <g id="icon-font_105_View" transform="translate(9000.000000, 10001.000000)">
+                <path d="M471.196067,279.388706 C468.659287,277.229701 466.450984,274.924387 463.701023,271.840781 C461.732497,269.633419 459.572474,267.098603 456.291285,263.177454 C456.234848,263.11001 449.592637,255.148769 447.409623,252.549977 C428.736548,230.320422 412.662967,212.746142 394.043132,195.280662 C344.775461,149.067386 296.239067,122.750167 250.99304,122.750167 C202.046004,122.750167 150.507322,148.074304 102.417295,190.874005 C83.9404874,207.318201 67.2191013,225.348227 54.2710956,242.038469 C49.1796636,248.601428 45.0628096,254.478581 42.4195884,258.812878 C41.546218,260.245013 41.0017054,261.236856 40.8804115,261.498373 C42.4533613,258.106995 43.4872396,254.89797 43.4872396,247.833667 C43.4872396,240.769365 42.4533613,237.560339 40.8804115,234.168962 C41.0017054,234.430479 41.546218,235.422322 42.4195884,236.854456 C45.0628096,241.188754 49.1796636,247.065906 54.2710956,253.628865 C67.2191013,270.319107 83.9404874,288.349133 102.417295,304.79333 C150.507322,347.593031 202.046004,372.917168 250.99304,372.917168 C296.239067,372.917168 344.775461,346.599949 394.043132,300.386673 C412.662967,282.921192 428.736548,265.346913 447.409623,243.117358 C449.592637,240.518566 456.234848,232.557325 456.291285,232.48988 C459.572474,228.568732 461.732497,226.033916 463.701023,223.826554 C466.450984,220.742947 468.659287,218.437634 471.196067,216.278628 C489.585469,237.69567 500,251.756082 500,247.833667 C500,243.911252 489.585468,257.971665 471.196067,279.388706 L471.196067,279.388706 Z M471.11251,278.324435 L471.11251,278.324435 C429.638743,326.768781 346.187297,414.667335 249.997012,414.667335 C112.474265,414.667335 0.990051674,260.667026 0.990051674,247.833667 C0.990051674,235.000308 112.474265,81 249.997012,81 C346.187297,81 429.638743,168.898554 471.11251,217.3429 C467.601977,220.514627 464.627661,224.296843 462.356919,228.549318 C458.659304,235.473933 457.502812,241.748232 457.502812,247.833667 C457.502812,253.919103 458.659304,260.193402 462.356919,267.118017 C464.627661,271.370492 467.601977,275.152708 471.11251,278.324435 L471.11251,278.324435 Z" id="Oval-225"></path>
+                <path d="M210.754843,247.833667 C210.754843,224.834455 229.482775,206.125251 252.50501,206.125251 C275.527245,206.125251 294.255177,224.834455 294.255177,247.833667 C294.255177,270.83288 275.527245,289.542084 252.50501,289.542084 C229.482775,289.542084 210.754843,270.83288 210.754843,247.833667 Z" id="Path"></path>
            </g>
        </g>
    </g>
--- a/icon-font/svgs/icon-font_107_Settings.svg
+++ b/icon-font/svgs/icon-font_107_Settings.svg
@@ -1,18 +1,16 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="500px" height="417px" viewBox="0 0 500 417" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+<svg width="500px" height="417px" viewBox="0 0 500 417" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
    <title>icon-font_107_Settings</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-1000.000000, -11043.000000)" fill="#191919">
-            <g id="icon-font_107_Settings" sketch:type="MSLayerGroup" transform="translate(1000.000000, 11043.000000)">
-                <path d="M20.8333333,41.4748987 L20.8333333,41.4748987 L20.8333333,375.191768 C20.8333333,386.475711 30.2349552,395.833333 41.7697206,395.833333 L458.230279,395.833333 C469.833485,395.833333 479.166667,386.564052 479.166667,375.191768 L479.166667,41.4748987 C479.166667,30.1909553 469.765045,20.8333333 458.230279,20.8333333 L41.7697206,20.8333333 C30.1665145,20.8333333 20.8333333,30.102615 20.8333333,41.4748987 L20.8333333,41.4748987 Z M0,41.4748987 C0,18.5689446 18.6880464,0 41.7697206,0 L458.230279,0 C481.299059,0 500,18.7127579 500,41.4748987 L500,375.191768 C500,398.097722 481.311954,416.666667 458.230279,416.666667 L41.7697206,416.666667 C18.7009409,416.666667 0,397.953909 0,375.191768 L0,41.4748987 L0,41.4748987 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-                <path d="M174.166667,125.494436 C174.166667,125.221366 174.392779,125 174.672232,125 L395.327768,125 C395.606984,125 395.833333,125.219872 395.833333,125.494436 L395.833333,145.338898 C395.833333,145.611967 395.608284,145.833333 395.342879,145.833333 C395.342879,145.833333 268.649937,145.833333 177.304687,145.833333 L173.696606,145.833333 C173.956213,145.833333 174.166667,145.613461 174.166667,145.338898 L174.166667,125.494436 Z" id="Rectangle-7228" sketch:type="MSShapeGroup"></path>
-                <rect id="Rectangle-7228-Copy" sketch:type="MSShapeGroup" x="104.166667" y="270.833333" width="141.666667" height="20.8333333" rx="2"></rect>
-                <rect id="Rectangle-7228-Copy-2" sketch:type="MSShapeGroup" x="314.166667" y="270.833333" width="81.6666667" height="20.8333333" rx="2"></rect>
-                <path d="M135.416667,166.666667 C152.675565,166.666667 166.666667,152.675565 166.666667,135.416667 C166.666667,118.157768 152.675565,104.166667 135.416667,104.166667 C118.157768,104.166667 104.166667,118.157768 104.166667,135.416667 C104.166667,152.675565 118.157768,166.666667 135.416667,166.666667 L135.416667,166.666667 Z M135.416667,187.5 L135.416667,187.5 C106.651836,187.5 83.3333333,164.181497 83.3333333,135.416667 C83.3333333,106.651836 106.651836,83.3333333 135.416667,83.3333333 C164.181497,83.3333333 187.5,106.651836 187.5,135.416667 C187.5,164.181497 164.181497,187.5 135.416667,187.5 L135.416667,187.5 Z" id="Shape" sketch:type="MSShapeGroup"></path>
-                <path d="M281.25,312.5 C298.508898,312.5 312.5,298.508898 312.5,281.25 C312.5,263.991102 298.508898,250 281.25,250 C263.991102,250 250,263.991102 250,281.25 C250,298.508898 263.991102,312.5 281.25,312.5 L281.25,312.5 Z M281.25,333.333333 L281.25,333.333333 C252.485169,333.333333 229.166667,310.014831 229.166667,281.25 C229.166667,252.485169 252.485169,229.166667 281.25,229.166667 C310.014831,229.166667 333.333333,252.485169 333.333333,281.25 C333.333333,310.014831 310.014831,333.333333 281.25,333.333333 L281.25,333.333333 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-1" transform="translate(-1000.000000, -11042.000000)" fill="#191919">
+            <g id="icon-font_107_Settings" transform="translate(1000.000000, 11042.000000)">
+                <path d="M44.1211802,292 L0,292 L0,334 L44.1211802,334 C42.7304327,327.217347 42,320.193974 42,313 C42,305.806026 42.7304327,298.782653 44.1211802,292 Z M247.87882,292 L500,292 L500,334 L247.87882,334 C249.269567,327.217347 250,320.193974 250,313 C250,305.806026 249.269567,298.782653 247.87882,292 Z" id="Combined-Shape"></path>
+                <path d="M251.921266,84 L0,84 L0,126 L252.331378,126 C250.804124,118.908475 250,111.548144 250,104 C250,97.1589618 250.660521,90.4721964 251.921266,84 Z M456.078734,84 L500,84 L500,126 L455.668622,126 C457.195876,118.908475 458,111.548144 458,104 C458,97.1589618 457.339479,90.4721964 456.078734,84 Z" id="Combined-Shape"></path>
+                <path d="M146,375 L146,375 C180.241654,375 208,347.241654 208,313 C208,278.758346 180.241654,251 146,251 C111.758346,251 84,278.758346 84,313 C84,347.241654 111.758346,375 146,375 L146,375 Z M42,313 C42,255.562386 88.562386,209 146,209 C203.437614,209 250,255.562386 250,313 C250,370.437614 203.437614,417 146,417 C88.562386,417 42,370.437614 42,313 Z" id="Oval-18-Copy"></path>
+                <path d="M354,166 L354,166 C388.241654,166 416,138.241654 416,104 C416,69.7583455 388.241654,42 354,42 C319.758346,42 292,69.7583455 292,104 C292,138.241654 319.758346,166 354,166 L354,166 Z M354,208 L354,208 C296.562386,208 250,161.437614 250,104 C250,46.562386 296.562386,0 354,0 C411.437614,0 458,46.562386 458,104 C458,161.437614 411.437614,208 354,208 L354,208 Z" id="Oval-18"></path>
            </g>
        </g>
    </g>
--- a/icon-font/svgs/icon-font_108_downloadCircle.svg
+++ b/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>
--- a/icon-font/svgs/icon-font_108_pencilMenu.svg
+++ b/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>
--- a/icon-font/svgs/icon-font_109_Mobile.svg
+++ b/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>
--- a/icon-font/svgs/icon-font_110_Undo.svg
+++ b/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>
--- a/icon-font/svgs/icon-font_111_Redo.svg
+++ b/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>
--- a/icon-font/svgs/icon-font_112_lArrowLight.svg
+++ b/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>
--- a/icon-font/svgs/icon-font_113_Hide.svg
+++ b/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>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "cartoassets",
  "description": "Share frontend assets between different CartoDB repositories",
-  "version": "0.1.30",
+  "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",
--- a/src/fonts/OpenSans-Light.eot
+++ b/src/fonts/OpenSans-Light.eot
--- a/src/fonts/OpenSans-Light.ttf
+++ b/src/fonts/OpenSans-Light.ttf
--- a/src/fonts/OpenSans-Light.woff
+++ b/src/fonts/OpenSans-Light.woff
--- a/src/fonts/OpenSans-Regular.eot
+++ b/src/fonts/OpenSans-Regular.eot
--- a/src/fonts/OpenSans-Regular.ttf
+++ b/src/fonts/OpenSans-Regular.ttf
--- a/src/fonts/OpenSans-Regular.woff
+++ b/src/fonts/OpenSans-Regular.woff
--- a/src/fonts/OpenSans-Semibold.eot
+++ b/src/fonts/OpenSans-Semibold.eot
--- a/src/fonts/OpenSans-Semibold.ttf
+++ b/src/fonts/OpenSans-Semibold.ttf
--- a/src/fonts/OpenSans-Semibold.woff
+++ b/src/fonts/OpenSans-Semibold.woff
--- a/src/fonts/cartoIcon.eot
+++ b/src/fonts/cartoIcon.eot
--- a/src/fonts/cartoIcon.svg
+++ b/src/fonts/cartoIcon.svg
--- a/src/fonts/cartoIcon.ttf
+++ b/src/fonts/cartoIcon.ttf
--- a/src/fonts/cartoIcon.woff
+++ b/src/fonts/cartoIcon.woff
--- a/src/scss/cdb-components/boxes.scss
+++ b/src/scss/cdb-components/boxes.scss
@@ -6,7 +6,7 @@


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

@@ -14,191 +14,29 @@
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';

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

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

 ```
-<button class="CDB-Button CDB-Button--primary">
+
+<button class="CDB-Button CDB-Button--primary CDB-Button--big">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>

-<button class="CDB-Button CDB-Button--primary is-disabled">
+<button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>

+
+<button class="CDB-Button CDB-Button--primary">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--primary is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
 <button class="CDB-Button CDB-Button--primary CDB-Button--small">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
@@ -32,15 +42,91 @@ Layout Component:
 <br/>
 <br/>

+<button class="CDB-Button CDB-Button--alert CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--big is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+
+<button class="CDB-Button CDB-Button--alert">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--small is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+</button>
+
+
+<br/>
+<br/>
+<br/>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--big is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+
+<button class="CDB-Button CDB-Button--error">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--small is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+</button>
+
+<br/>
+<br/>
+<br/>
+
 <div style="background: #2E3C43; padding: 20px;">
-  <button class="CDB-Button CDB-Button--primary">
+
+  <button class="CDB-Button CDB-Button--primary CDB-Button--big">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

-  <button class="CDB-Button CDB-Button--primary is-disabled">
+  <button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

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

 .CDB-Button--small {
-  padding: $baseSize - 3 $baseSize + 4;
+  padding: $baseSize / 2 $baseSize + 4;
 }
+
+.CDB-Button--big {
+  padding: $baseSize + 4 $baseSize + 12;
+}
+
 .CDB-Button--icon {
  padding: 7px 9px;
 }
@@ -105,6 +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
@@ -114,6 +252,14 @@ Layout Component:
 # Buttons/Secondary

 ```
+<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
 <button class="CDB-Button CDB-Button--secondary">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
@@ -135,10 +281,26 @@ Layout Component:
 <br/>

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

+  <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 CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>
@@ -170,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;
    }
  }
 }
--- a/src/scss/cdb-components/carousel.scss
+++ b/src/scss/cdb-components/carousel.scss
@@ -1,51 +0,0 @@
-// Carousel styles
-// ----------------------------------------------
-
-/* SG
-# Carousel
-
-```
-<div>
-  <ul class="CDB-Carousel">
-    <li class="CDB-CarouselItem is-selected"></li>
-    <li class="CDB-CarouselItem"></li>
-    <li class="CDB-CarouselItem"></li>
-    <li class="CDB-CarouselItem"></li>
-    <li class="CDB-CarouselItem"></li>
-  </ul>
-</div>
-```
-*/
-
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
-.CDB-Carousel {
-  @include display-flex();
-  @include justify-content(flex-start);
-  width: 100%;
-}
-.CDB-CarouselItem {
-  @include display-flex();
-  @include align-items(center);
-  @include justify-content(center);
-  width: $baseSize * 11;
-  height: $baseSize * 7;
-  margin-right: 8px;
-  border: 1px solid $cSecondaryLine;
-  border-radius: 4px;
-  background: $cThirdBackground;
-  box-sizing: border-box;
-
-  &:last-child {
-    margin-right: 0;
-  }
-  &:hover {
-    border: 1px solid $cMainLine;
-    cursor: pointer;
-  }
-}
-.CDB-CarouselItem.is-selected {
-  border: 2px solid $cBlue;
-}
--- a/src/scss/cdb-components/colors.scss
+++ b/src/scss/cdb-components/colors.scss
@@ -6,23 +6,17 @@


 ```
-<div class="box Color-MainDark"></div>
-<div class="box Color-SecondaryDark"></div>
-<div class="box Color-Blue"></div>
-<div class="box Color-White"></div>
-<div class="box Color-SecondaryBackground"></div>
-<div class="box Color-ThirdBackground"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-MainDark"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryDark"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-Blue"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-White"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryBackground"></div>
+<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-ThirdBackground"></div>
 ``` 
 */

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

-.box {
-  display: inline-block;
-  width: 120px;
-  height: 64px;
-  margin: 0 24px 24px 0;
-}

 .Color-Blue {
  background: $cBlue;
--- a/src/scss/cdb-components/forms/checkbox.scss
+++ b/src/scss/cdb-components/forms/checkbox.scss
@@ -22,6 +22,8 @@

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

 .CDB-Checkbox {
  position: absolute;
@@ -67,6 +69,7 @@
 }

 .CDB-Checkbox:checked + .CDB-Checkbox-face {
+  @include transition(background, 300ms);
  border: 1px solid $cBlue;
  background: $cBlue;

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

--- a/src/scss/cdb-components/forms/inputs.scss
+++ b/src/scss/cdb-components/forms/inputs.scss
@@ -13,29 +13,49 @@

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

 .CDB-InputText {
  width: 100%;
-  padding: 7px 8px 6px;
+  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 {
+  &:disabled,
+  &.is-disabled {
    border-color: $cSecondaryLine;
    background: $cThirdBackground;
+    cursor: default;
  }
  &.has-error {
-    border: 1px solid rgba($cError, 0.48);
-    background: rgba($cError, 0.04);
-    color: $cError;
+    @include default-form-error-style();
  }
 }
+.CDB-InputTextPlain {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  font-size: $sFontSize-medium;
+  line-height: $sLineHeight-medium;
+  box-sizing: border-box;
+}
+
+.CDB-FieldError .CDB-InputText {
+  @include default-form-error-style();
+}
--- a/src/scss/cdb-components/forms/legends.scss
+++ b/src/scss/cdb-components/forms/legends.scss
@@ -59,6 +59,27 @@
  <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>
 ```
 */

@@ -69,6 +90,10 @@
  width: $baseSize * 12;
 }

+.CDB-Legend--big {
+  width: ($baseSize * 24);
+}
+
 .CDB-Fieldset {
  @include display-flex();
  @include align-items(center);
--- a/src/scss/cdb-components/forms/option-input.scss
+++ b/src/scss/cdb-components/forms/option-input.scss
@@ -107,6 +107,9 @@
  @include align-items(center);
  margin: 0 $baseSize;
 }
+.CDB-OptionInput-container--noMargin {
+  margin: 0;
+}
 .CDB-OptionInput-item {
  @include display-flex();
  @include align-items(center);
@@ -129,6 +132,9 @@
    }
  }
 }
+.CDB-OptionInput-item--noSeparator::after {
+  content: '';
+}
 .CDB-OptionInput-content {
  @include display-flex();
  @include align-items(center);
--- a/src/scss/cdb-components/forms/radio.scss
+++ b/src/scss/cdb-components/forms/radio.scss
@@ -23,6 +23,8 @@

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

 .CDB-Radio {
  position: absolute;
@@ -59,6 +61,7 @@
 }

 .CDB-Radio:checked + .CDB-Radio-face {
+  @include transition(background, 300ms);
  border: 1px solid $cBlue;
  background: $cBlue;

--- a/src/scss/cdb-components/forms/selects.scss
+++ b/src/scss/cdb-components/forms/selects.scss
@@ -17,6 +17,28 @@
    </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>
@@ -31,6 +53,7 @@

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

 .CDB-Select {
  position: relative;
@@ -51,6 +74,7 @@
  background: $cWhite;
  font-size: $sFontSize-medium;
  line-height: $sLineHeight-medium;
+  box-sizing: border-box;

  &:hover {
    border: 1px solid $cHoverLine;
@@ -64,8 +88,11 @@
    background: $cThirdBackground;
  }
  &.has-error {
-    border: 1px solid rgba($cError, 0.48);
-    background: rgba($cError, 0.04);
-    color: $cError;
+    @include default-form-error-style();
  }
 }
+
+.CDB-FieldError .CDB-Select,
+.CDB-FieldError .CDB-SelectFake {
+  @include default-form-error-style();
+}
--- a/src/scss/cdb-components/forms/tabsForms.scss
+++ b/src/scss/cdb-components/forms/tabsForms.scss
@@ -0,0 +1,101 @@
+// Tabs Forms styles
+// ----------------------------------------------
+
+/* SG
+# Forms/TabsForms
+
+```
+<div class="CDB-TabsForms u-iBlock">
+  <ul class="CDB-TabsForms-inner">
+    <li class="CDB-TabsForms-item">
+      <button class="CDB-TabsForms-button">
+        <div class="CDB-Shape">
+          <ul class="CDB-Shape-paragraph is-left">
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+            </li>
+          </ul>
+        </div>
+      </button>
+    </li>
+    <li class="CDB-TabsForms-item">
+      <button class="CDB-TabsForms-button">
+        <div class="CDB-Shape">
+          <ul class="CDB-Shape-paragraph is-center">
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+            </li>
+          </ul>
+        </div>
+      </button>
+    </li>
+    <li class="CDB-TabsForms-item">
+      <button class="CDB-TabsForms-button">
+        <div class="CDB-Shape">
+          <ul class="CDB-Shape-paragraph is-right is-active">
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
+            </li>
+            <li class="CDB-Shape-paragraphItem">
+              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
+            </li>
+          </ul>
+        </div>
+      </button>
+    </li>
+  </ul>
+</div>
+```
+*/
+
+@import '../../cdb-utilities/mixins';
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+
+
+.CDB-TabsForms {
+  border: 1px solid $cMainLine;
+  border-radius: 4px;
+}
+.CDB-TabsForms-inner {
+  @include display-flex();
+}
+.CDB-TabsForms-item {
+  border-left: 1px solid $cSecondaryLine;
+}
+.CDB-TabsForms-item:first-child {
+  border-left: 0;
+}
+.CDB-TabsForms-button {
+  padding: 7px 8px;
+}
+
+
+
+
+
+
--- a/src/scss/cdb-components/forms/textarea.scss
+++ b/src/scss/cdb-components/forms/textarea.scss
@@ -13,6 +13,7 @@

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

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

  &:hover {
    border: 1px solid $cHoverLine;
@@ -34,9 +36,11 @@
    border-color: $cSecondaryLine;
    background: $cThirdBackground;
  }
-}
-.CDB-Textarea.has-error {
-  border: 1px solid rgba($cError, 0.48);
-  background: rgba($cError, 0.04);
-  color: $cError;
+  &:has-error {
+    @include default-form-error-style();
  }
+}
+.CDB-FieldError .CDB-Textarea,
+.CDB-Textarea.has-error {
+  @include default-form-error-style();
+}
--- a/src/scss/cdb-components/forms/toggle.scss
+++ b/src/scss/cdb-components/forms/toggle.scss
@@ -6,11 +6,24 @@


 ```
-<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 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>
 ```
 */
@@ -49,7 +62,7 @@
  }

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

    &::before {
      right: 2px;
@@ -57,3 +70,7 @@
    }
  }
 }
+
+.Toggle .is-disabled {
+  opacity: 0.24;
+}
--- a/src/scss/cdb-components/headers.scss
+++ b/src/scss/cdb-components/headers.scss
@@ -6,8 +6,8 @@

 ```
 <div class="CDB-HeaderInfo is-block">
-  <div class="CDB-HeaderInfo-Title u-bSpace">
-    <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
+  <div class="CDB-HeaderInfo-title u-bSpace">
+    <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
    <div class="CDB-HeaderInfo-Actions">
      <a href="#">
          <div class="CDB-Shape">
@@ -21,12 +21,12 @@
    </div>
  </div>
  <ul class="CDB-HeaderInfo-List">
-    <li class="CDB-HeaderInfo-ListItem">
+    <li class="CDB-HeaderInfo-listItem">
      <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
        PUBLIC
      </button>
    </li>
-    <li class="CDB-HeaderInfo-ListItem">
+    <li class="CDB-HeaderInfo-listItem">
      <ul class="CDB-AvatarList u-iBlock">
        <li class="CDB-AvatarList-item">
          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
@@ -42,7 +42,7 @@
        </li>
      </ul>
    </li>
-    <li class="CDB-HeaderInfo-ListItem">
+    <li class="CDB-HeaderInfo-listItem">
      <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock u-altTextColor">Published 8 days ago</p>
    </li>
  </ul>
@@ -53,19 +53,19 @@
 <br/>

 <div class="CDB-HeaderInfo">
-  <button class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </button>
-  <div class="CDB-HeaderInfo-Inner">
-    <div class="CDB-HeaderInfo-Title u-bSpace">
-      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected </h2>
+  <div class="CDB-HeaderInfo-inner">
+    <div class="CDB-HeaderInfo-title u-bSpace">
+      <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected </h2>
      <ul class="CDB-HeaderInfo-Actions">
-        <li class="CDB-HeaderInfo-ActionsItem">
+        <li class="CDB-HeaderInfo-actionsItem">
          <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
            <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
          </button>
        </li>
-        <li class="CDB-HeaderInfo-ActionsItem">
+        <li class="CDB-HeaderInfo-actionsItem">
          <a href="#">
              <div class="CDB-Shape">
                <div class="CDB-Shape-threePoints is-blue is-small">
@@ -93,13 +93,13 @@
 <br/>

 <div class="CDB-HeaderInfo">
-  <button class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </button>
-  <div class="CDB-HeaderInfo-Inner">
-    <div class="CDB-HeaderInfo-Title u-bSpace">
-      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
-      <div class="CDB-HeaderInfo-Actions">
+  <div class="CDB-HeaderInfo-inner">
+    <div class="CDB-HeaderInfo-title u-bSpace">
+      <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
+      <div class="CDB-HeaderInfo-actions">
        <a href="#">
            <div class="CDB-Shape">
              <div class="CDB-Shape-threePoints is-blue is-small">
@@ -120,10 +120,10 @@
 <br/>

 <div class="CDB-HeaderInfo">
-  <button class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </button>
-  <div class="CDB-HeaderInfo-Inner">
+  <div class="CDB-HeaderInfo-inner">
    <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text u-bSpace--m">
    <div class="CDB-Shape u-iBlock">
      <ul class="CDB-Shape-Dataset is-small is-grey">
@@ -142,11 +142,11 @@
 <div class="CDB-HeaderInfo">
  <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>

-  <div class="CDB-HeaderInfo-Inner CDB-Text">
-    <div class="CDB-HeaderInfo-Title u-bSpace--m">
-      <h2 class="CDB-Text CDB-HeaderInfo-TitleText CDB-Size-large">Type</h2>
+  <div class="CDB-HeaderInfo-inner CDB-Text">
+    <div class="CDB-HeaderInfo-title u-bSpace--m">
+      <h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large">Type</h2>
      
-      <div class="CDB-HeaderInfo-Actions">
+      <div class="CDB-HeaderInfo-actions">
        <a href="#">
          <div class="CDB-Shape">
            <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
@@ -178,7 +178,7 @@
    display: block;
  }
 }
-.CDB-HeaderInfo-ListItem {
+.CDB-HeaderInfo-listItem {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
@@ -188,17 +188,17 @@
  }
 }

-.CDB-HeaderInfo-Inner {
+.CDB-HeaderInfo-inner {
  @include flex(1);
 }
-.CDB-HeaderInfo-Back {
+.CDB-HeaderInfo-back {
  margin-top: 7px;
 }
-.CDB-HeaderInfo-Title {
+.CDB-HeaderInfo-title {
  @include display-flex();
  @include align-items(center);
 }
-.CDB-HeaderInfo-TitleText {
+.CDB-HeaderInfo-titleText {
  @include flex(1);
  width: 0;
  padding-right: 16px;
@@ -206,13 +206,14 @@
  white-space: nowrap;
  overflow: hidden;
 }
-.CDB-HeaderInfo-ActionsItem {
+.CDB-HeaderInfo-actionsItem {
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
 }
 .CDB-HeaderNumeration {
  width: $baseSize * 3;
+  min-width: $baseSize * 3;
  height: $baseSize * 3;
  border: 1px solid $cMainLine;
  border-radius: 4px;
--- a/src/scss/cdb-components/lists.scss
+++ b/src/scss/cdb-components/lists.scss
@@ -6,23 +6,34 @@


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

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

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

  &:last-child {
    border-bottom: 0;
  }
 }
-
-.CDB-ListDecoration-ItemLink {
-  display: block;
+.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;
+}

--- a/src/scss/cdb-components/loader.scss
+++ b/src/scss/cdb-components/loader.scss
@@ -8,6 +8,7 @@ This is the generic loader for widgets, maps, components, ...

 ```
 <div class="CDB-Loader is-visible"></div>
+
 ```
 */

@@ -24,8 +25,8 @@ This is the generic loader for widgets, maps, components, ...
  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);
@@ -46,83 +47,133 @@ This is the generic loader for widgets, maps, components, ...

 ```
 <div style="padding: 20px;">
-  <div class="CDB-LoaderIcon">
-    <div class="CDB-LoaderIcon-item"></div>
+  <div class="CDB-LoaderIcon is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
+    <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+    </svg>
+  </div>
+  <div 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 is-grey">
-    <div class="CDB-LoaderIcon-item is-grey"></div>
+  <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 {
-  box-sizing: border-box;
-  position: relative;
-  width: $baseSize * 2;
-  height: $baseSize * 2;
-  border: 2px solid $cMainLine;
-  border-radius: 50%;
-  &.is-grey {
-    border: 2px solid $cSecondaryText;
-  }
+.CDB-LoaderIcon-spinner {
+  animation: rotate 2s linear infinite;
+  width: 16px;
+  height: 16px;
 }

-.CDB-LoaderIcon-item {
-  @include css3-prefix(animation, loader-icon 1.4s linear infinite);
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  width: $baseSize * 2;
-  height: $baseSize * 2;
-  border-radius: 50%;
-  background: linear-gradient(to right, $cWhite 10%, rgba($cWhite, 0) 42%);
-
-  &::before,
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    content: '';
-  }
-
-  &::before {
-    width: 50%;
-    height: 50%;
-    border-radius: 100% 0 0;
-    background: $cMainLine;
-  }
-  &::after {
-    right: 0;
-    bottom: 0;
-    width: 75%;
-    height: 75%;
-    margin: auto;
-    border-radius: 50%;
-    background: $cWhite;
-  }
-  &.is-grey {
-    background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%);
-    &::before {
-      background: $cSecondaryText;
-    }
-    &::after {
-      background: $cMainBg;
-    }
-  }
+.CDB-LoaderIcon--small .CDB-LoaderIcon-spinner {
+  width: 14px;
+  height: 14px;
 }

+.CDB-LoaderIcon--medium .CDB-LoaderIcon-spinner {
+  width: 24px;
+  height: 24px;
+}

-@include keyframes(loader-icon) {
-  0% {
-    transform: rotate(0deg);
-  }
+.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;
+  }
+}
--- a/src/scss/cdb-components/menu.scss
+++ b/src/scss/cdb-components/menu.scss
@@ -7,26 +7,26 @@

 ```
 <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>
+  <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 class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">STYLE</button>
    </li>
-    <li class="CDB-NavMenu-Item is-selected">
-      <button class="CDB-NavMenu-Link">POP-UP</button>
-      <ul class="CDB-NavSubmenu CDB-Size-small">
-        <li class="CDB-NavSubmenu-Item is-selected">
-          <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button>
+    <li 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 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 class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">LEGEND</button>
    </li>
  </ul>
  <div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;">
@@ -39,30 +39,92 @@

 <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>
+    <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 class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">STYLE</button>
      </li>
      <li class="CDB-NavMenu-item is-selected">
-        <button class="CDB-NavMenu-Link">POP-UP</button>
-        <ul class="CDB-NavSubmenu CDB-Size-small">
-          <li class="CDB-NavSubmenu-Item is-selected">
-            <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></button>
+        <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 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 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>
+
 ```
 */

@@ -71,15 +133,22 @@

 .CDB-NavMenu {
  position: relative;
+  z-index: 2;
 }

-.CDB-NavMenu-Inner {
+.CDB-NavMenu-inner {
  position: relative;
  margin-bottom: 18px;
  border-bottom: 1px solid $cMainLine;
 }
+.CDB-NavMenu-inner--no-margin {
+  margin-bottom: 0;
+}
+.CDB-NavMenu-inner--is-dropdown {
+  padding: $baseSize 0 0 $baseSize * 2;
+}

-.CDB-NavMenu-Link {
+.CDB-NavMenu-link {
  display: block;
  margin-bottom: -1px;
  padding: 4px 0 11px;
@@ -87,27 +156,35 @@
  color: $cBlue;
 }

-.CDB-NavMenu-Item,
-.CDB-NavSubmenu-Item {
+.CDB-NavMenu-item,
+.CDB-NavSubmenu-item {
  display: inline-block;
-  margin-right: 8px;
+  margin-right: 12px;
  vertical-align: middle;
 }

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

 .CDB-NavSubmenu {
+  border-bottom: 1px solid $cSecondaryLine;
+}
+
+.CDB-NavSubmenu--inside {
  position: absolute;
  right: 0;
  left: 0;
  padding-top: 14px;
-  border-bottom: 1px solid $cSecondaryLine;
 }

-.CDB-NavSubmenu-Link {
+.CDB-NavSubmenu--outside {
+  margin-top: -5px;
+  margin-bottom: 18px;
+}
+
+.CDB-NavSubmenu-link {
  display: block;
  margin-bottom: -1px;
  padding-bottom: 12px;
@@ -115,39 +192,41 @@
  color: $cBlue;
 }

-.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-Link {
+.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
  border-bottom: 1px solid $cMainLine;
  color: $cMainText;
 }

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

-.CDB-Navmenu.is-dark {
+.CDB-NavMenu.is-dark {

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

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

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

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

-  .CDB-NavSubmenu-Status {
+  .CDB-NavSubmenu-status {
    color: $cSecondaryText;
  }
 }

+
+
--- a/src/scss/cdb-components/modals.scss
+++ b/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;
+}
+
+
--- a/src/scss/cdb-components/shapes/dataset.scss
+++ b/src/scss/cdb-components/shapes/dataset.scss
@@ -83,10 +83,8 @@ Description

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

@@ -101,6 +99,7 @@ Description

  &:first-child {
    position: relative;
+    margin-left: 0;
    box-shadow: 3px 0 0 $cWhite;
    z-index: 1;
  }
@@ -112,6 +111,7 @@ Description
    height: 6px;
    margin-left: -7px;
    &:first-child {
+      margin-left: 0;
      box-shadow: 2px 0 0 $cWhite;
    }
  }
--- a/src/scss/cdb-components/shapes/error-circle.scss
+++ b/src/scss/cdb-components/shapes/error-circle.scss
@@ -81,3 +81,23 @@ Description
    border: 1px solid $cError;
  }
 }
+
+
+.CDB-Shape-CircleItem--fill {
+  &.is-blue {
+    border: 1px solid $cBlue;
+    background: $cBlue;
+  }
+  &.is-white {
+    border: 1px solid $cWhite;
+    background: $cWhite;
+  }
+  &.is-green {
+    border: 1px solid $cHighlight;
+    background: $cHighlight;
+  }
+  &.is-red {
+    border: 1px solid $cError;
+    background: $cError;
+  }
+}
--- a/src/scss/cdb-components/shapes/move.scss
+++ b/src/scss/cdb-components/shapes/move.scss
@@ -7,28 +7,37 @@ Description
 <h2>16px</h2>
 <div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move">
-      <div class="CDB-Shape-MoveItem is-first"></div>
-      <div class="CDB-Shape-MoveItem is-second"></div>
-      <div class="CDB-Shape-MoveItem is-third"></div>
+    <div class="CDB-Shape-rectsHandle">
+      <div class="CDB-Shape-rectsHandleItem is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem is-third"></div>
    </div>
  </div>
 </div>
 <div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move">
-      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
+    <div class="CDB-Shape-rectsHandle">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-rectsHandle">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-third"></div>
    </div>
  </div>
 </div>
 <div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
-    <div class="CDB-Shape-Move">
-      <div class="CDB-Shape-MoveItem is-white is-first"></div>
-      <div class="CDB-Shape-MoveItem is-white is-second"></div>
-      <div class="CDB-Shape-MoveItem is-white is-third"></div>
+    <div class="CDB-Shape-rectsHandle">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
    </div>
  </div>
 </div>
@@ -39,28 +48,37 @@ Description
 <h2>12px</h2>
 <div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move is-small">
-      <div class="CDB-Shape-MoveItem is-first"></div>
-      <div class="CDB-Shape-MoveItem is-second"></div>
-      <div class="CDB-Shape-MoveItem is-third"></div>
+    <div class="CDB-Shape-rectsHandle is-small">
+      <div class="CDB-Shape-rectsHandleItem is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem is-third"></div>
    </div>
  </div>
 </div>
 <div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
-    <div class="CDB-Shape-Move is-small">
-      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
-      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
+    <div class="CDB-Shape-rectsHandle is-small">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape">
+    <div class="CDB-Shape-rectsHandle is-small">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-third"></div>
    </div>
  </div>
 </div>
 <div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
-    <div class="CDB-Shape-Move is-small">
-      <div class="CDB-Shape-MoveItem is-white is-first"></div>
-      <div class="CDB-Shape-MoveItem is-white is-second"></div>
-      <div class="CDB-Shape-MoveItem is-white is-third"></div>
+    <div class="CDB-Shape-rectsHandle is-small">
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
+      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
    </div>
  </div>
 </div>
@@ -69,36 +87,41 @@ Description

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

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

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

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

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

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

  &:last-child {
    margin-bottom: 0;
  }
  &::before {
-    display: inline-block;
+    display: block;
+    position: absolute;
+    left: 4px;
    width: 3px;
    height: 3px;
    background: $cMainBg;
@@ -106,25 +129,33 @@ Description
  }

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

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

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

 .CDB-Shape-threePoints {
  display: inline-block;
+  padding: 0 4px;
 }
 .CDB-Shape-threePoints.is-horizontal {
  transform: rotate(90deg);
+  padding: 4px 0;
 }

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

@@ -27,7 +30,9 @@

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

  &.is-public {
    border: 1px solid $cPublic;
@@ -123,8 +128,9 @@

 .CDB-Tag.CDB-Tag--opaque {
  padding: $baseSize / 4 $halfBaseSize;
+  border: 0;
  border-radius: $baseSize / 4;
-  background: $cThirdBackground;
+  background: rgba(0, 0, 0, 0.04);
  text-transform: uppercase;
 }

--- a/src/scss/cdb-components/typography.scss
+++ b/src/scss/cdb-components/typography.scss
@@ -15,10 +15,12 @@
 <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';

 .CDB-Text {
  font-family: 'Open Sans';
@@ -32,6 +34,10 @@
  }
 }

+.is-underlined {
+  border-bottom: 1px dotted $cMainLine;
+}
+
 .CDB-Size-huge {
  font-size: $sFontSize-huge;
  line-height: $sLineHeight-huge;
@@ -50,6 +56,11 @@
 .CDB-Size-small {
  font-size: $sFontSize-small;
  line-height: $sLineHeight-small;
+
+}
+
+.CDB-Size-small.u-whiteTextColor {
+  -webkit-font-smoothing: initial;
 }

 .CDB-FontSize-small {
@@ -59,3 +70,8 @@
 .CDB-FontSize-medium {
  font-size: $sFontSize-medium;
 }
+
+.CDB-IconFont.is-disabled {
+  opacity: 0.24;
+}
+
--- a/src/scss/cdb-icon-font.scss
+++ b/src/scss/cdb-icon-font.scss
@@ -143,12 +143,54 @@ All available icons in CartoDB.
  </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>
@@ -760,441 +802,476 @@ All available icons in CartoDB.
 }


-.CDB-IconFont-wizard::before {
+.CDB-IconFont-downloadCircle::before {
  content: '\E012';
 }


-.CDB-IconFont-info::before {
+.CDB-IconFont-pencilMenu::before {
  content: '\E013';
 }


-.CDB-IconFont-fork::before {
+.CDB-IconFont-mobile::before {
  content: '\E014';
 }


-.CDB-IconFont-facebook::before {
+.CDB-IconFont-wizard::before {
  content: '\E015';
 }


-.CDB-IconFont-folder::before {
+.CDB-IconFont-undo::before {
  content: '\E016';
 }


-.CDB-IconFont-dropbox::before {
+.CDB-IconFont-redo::before {
  content: '\E017';
 }


-.CDB-IconFont-cloud::before {
+.CDB-IconFont-lArrowLight::before {
  content: '\E018';
 }


-.CDB-IconFont-step::before {
+.CDB-IconFont-hide::before {
  content: '\E019';
 }


-.CDB-IconFont-addDocument::before {
+.CDB-IconFont-info::before {
  content: '\E01A';
 }


-.CDB-IconFont-arrowNext::before {
+.CDB-IconFont-fork::before {
  content: '\E01B';
 }


-.CDB-IconFont-arrowPrev::before {
+.CDB-IconFont-facebook::before {
  content: '\E01C';
 }


-.CDB-IconFont-close::before {
+.CDB-IconFont-folder::before {
  content: '\E01D';
 }


-.CDB-IconFont-cartoFante::before {
+.CDB-IconFont-dropbox::before {
  content: '\E01E';
 }


-.CDB-IconFont-lock::before {
+.CDB-IconFont-cloud::before {
  content: '\E01F';
 }


-.CDB-IconFont-cartoDB::before {
+.CDB-IconFont-step::before {
  content: '\E020';
 }


-.CDB-IconFont-lens::before {
+.CDB-IconFont-addDocument::before {
  content: '\E021';
 }


-.CDB-IconFont-closeLimits::before {
+.CDB-IconFont-arrowNext::before {
  content: '\E022';
 }


-.CDB-IconFont-defaultUser::before {
+.CDB-IconFont-arrowPrev::before {
  content: '\E023';
 }


-.CDB-IconFont-cockroach::before {
+.CDB-IconFont-close::before {
  content: '\E024';
 }


-.CDB-IconFont-floppy::before {
+.CDB-IconFont-cartoFante::before {
  content: '\E025';
 }


-.CDB-IconFont-trash::before {
+.CDB-IconFont-lock::before {
  content: '\E026';
 }


-.CDB-IconFont-wifi::before {
+.CDB-IconFont-cartoDB::before {
  content: '\E027';
 }


-.CDB-IconFont-unlock::before {
+.CDB-IconFont-lens::before {
  content: '\E028';
 }


-.CDB-IconFont-unlockWithEllipsis::before {
+.CDB-IconFont-closeLimits::before {
  content: '\E029';
 }


-.CDB-IconFont-gift::before {
+.CDB-IconFont-defaultUser::before {
  content: '\E02A';
 }


-.CDB-IconFont-people::before {
+.CDB-IconFont-cockroach::before {
  content: '\E02B';
 }


-.CDB-IconFont-play::before {
+.CDB-IconFont-floppy::before {
  content: '\E02C';
 }


-.CDB-IconFont-add::before {
+.CDB-IconFont-trash::before {
  content: '\E02D';
 }


-.CDB-IconFont-map::before {
+.CDB-IconFont-wifi::before {
  content: '\E02E';
 }


-.CDB-IconFont-anchor::before {
+.CDB-IconFont-unlock::before {
  content: '\E02F';
 }


-.CDB-IconFont-key::before {
+.CDB-IconFont-unlockWithEllipsis::before {
  content: '\E030';
 }


-.CDB-IconFont-calendar::before {
+.CDB-IconFont-gift::before {
  content: '\E031';
 }


-.CDB-IconFont-document::before {
+.CDB-IconFont-people::before {
  content: '\E032';
 }


-.CDB-IconFont-eye::before {
+.CDB-IconFont-play::before {
  content: '\E033';
 }


-.CDB-IconFont-marker::before {
+.CDB-IconFont-add::before {
  content: '\E034';
 }


-.CDB-IconFont-progressBar::before {
+.CDB-IconFont-map::before {
  content: '\E035';
 }


-.CDB-IconFont-book::before {
+.CDB-IconFont-anchor::before {
  content: '\E036';
 }


-.CDB-IconFont-notes::before {
+.CDB-IconFont-key::before {
  content: '\E037';
 }


-.CDB-IconFont-rectangles::before {
+.CDB-IconFont-calendar::before {
  content: '\E038';
 }


-.CDB-IconFont-mountain::before {
+.CDB-IconFont-document::before {
  content: '\E039';
 }


-.CDB-IconFont-points::before {
+.CDB-IconFont-eye::before {
  content: '\E03A';
 }


-.CDB-IconFont-snake::before {
+.CDB-IconFont-marker::before {
  content: '\E03B';
 }


-.CDB-IconFont-boss::before {
+.CDB-IconFont-progressBar::before {
  content: '\E03C';
 }


-.CDB-IconFont-rocket::before {
+.CDB-IconFont-book::before {
  content: '\E03D';
 }


-.CDB-IconFont-barometer::before {
+.CDB-IconFont-notes::before {
  content: '\E03E';
 }


-.CDB-IconFont-dollar::before {
+.CDB-IconFont-rectangles::before {
  content: '\E03F';
 }


-.CDB-IconFont-email::before {
+.CDB-IconFont-mountain::before {
  content: '\E040';
 }


-.CDB-IconFont-label::before {
+.CDB-IconFont-points::before {
  content: '\E041';
 }


-.CDB-IconFont-outside::before {
+.CDB-IconFont-snake::before {
  content: '\E042';
 }


-.CDB-IconFont-jigsaw::before {
+.CDB-IconFont-boss::before {
  content: '\E043';
 }


-.CDB-IconFont-tools::before {
+.CDB-IconFont-rocket::before {
  content: '\E044';
 }


-.CDB-IconFont-question::before {
+.CDB-IconFont-barometer::before {
  content: '\E045';
 }


-.CDB-IconFont-layerStack::before {
+.CDB-IconFont-dollar::before {
  content: '\E046';
 }


-.CDB-IconFont-alarm::before {
+.CDB-IconFont-email::before {
  content: '\E047';
 }


-.CDB-IconFont-cloudDownArrow::before {
+.CDB-IconFont-label::before {
  content: '\E048';
 }


-.CDB-IconFont-pencil::before {
+.CDB-IconFont-outside::before {
  content: '\E049';
 }


-.CDB-IconFont-fountainPen::before {
+.CDB-IconFont-jigsaw::before {
  content: '\E04A';
 }


-.CDB-IconFont-emptyDoc::before {
+.CDB-IconFont-tools::before {
  content: '\E04B';
 }


-.CDB-IconFont-mergeArrow::before {
+.CDB-IconFont-question::before {
  content: '\E04C';
 }


-.CDB-IconFont-mergeColumns::before {
+.CDB-IconFont-layerStack::before {
  content: '\E04D';
 }


-.CDB-IconFont-mergeSpatial::before {
+.CDB-IconFont-alarm::before {
  content: '\E04E';
 }


-.CDB-IconFont-globe::before {
+.CDB-IconFont-cloudDownArrow::before {
  content: '\E04F';
 }


-.CDB-IconFont-chevronDown::before {
+.CDB-IconFont-pencil::before {
  content: '\E050';
 }


-.CDB-IconFont-streets::before {
+.CDB-IconFont-fountainPen::before {
  content: '\E051';
 }


-.CDB-IconFont-keys::before {
+.CDB-IconFont-emptyDoc::before {
  content: '\E052';
 }


-.CDB-IconFont-facebookSquare::before {
+.CDB-IconFont-mergeArrow::before {
  content: '\E053';
 }


-.CDB-IconFont-fullscreen::before {
+.CDB-IconFont-mergeColumns::before {
  content: '\E054';
 }


-.CDB-IconFont-rArrowLight::before {
+.CDB-IconFont-mergeSpatial::before {
  content: '\E055';
 }


-.CDB-IconFont-share::before {
+.CDB-IconFont-globe::before {
  content: '\E056';
 }


-.CDB-IconFont-linkedin::before {
+.CDB-IconFont-chevronDown::before {
  content: '\E057';
 }


-.CDB-IconFont-calendarBlank::before {
+.CDB-IconFont-streets::before {
  content: '\E058';
 }


-.CDB-IconFont-creativeCommons::before {
+.CDB-IconFont-keys::before {
  content: '\E059';
 }


-.CDB-IconFont-bubble::before {
+.CDB-IconFont-facebookSquare::before {
  content: '\E05A';
 }


-.CDB-IconFont-bars::before {
+.CDB-IconFont-fullscreen::before {
  content: '\E05B';
 }


-.CDB-IconFont-arrowMenuLight::before {
+.CDB-IconFont-rArrowLight::before {
  content: '\E05C';
 }


-.CDB-IconFont-tieFighter::before {
+.CDB-IconFont-share::before {
  content: '\E05D';
 }


-.CDB-IconFont-ray::before {
+.CDB-IconFont-linkedin::before {
  content: '\E05E';
 }


-.CDB-IconFont-markup::before {
+.CDB-IconFont-calendarBlank::before {
  content: '\E05F';
 }


-.CDB-IconFont-table::before {
+.CDB-IconFont-creativeCommons::before {
  content: '\E060';
 }


-.CDB-IconFont-airlock::before {
+.CDB-IconFont-bubble::before {
  content: '\E061';
 }


-.CDB-IconFont-pin::before {
+.CDB-IconFont-bars::before {
  content: '\E062';
 }


-.CDB-IconFont-attache::before {
+.CDB-IconFont-arrowMenuLight::before {
  content: '\E063';
 }


-.CDB-IconFont-download::before {
+.CDB-IconFont-tieFighter::before {
  content: '\E064';
 }


-.CDB-IconFont-group::before {
+.CDB-IconFont-ray::before {
  content: '\E065';
 }


-.CDB-IconFont-dashboard::before {
+.CDB-IconFont-markup::before {
  content: '\E066';
 }


-.CDB-IconFont-spinner::before {
+.CDB-IconFont-table::before {
  content: '\E067';
 }


-.CDB-IconFont-mapsearch::before {
+.CDB-IconFont-airlock::before {
  content: '\E068';
 }


-.CDB-IconFont-rArrow::before {
+.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';
+}
--- a/src/scss/cdb-utilities/fonts.scss
+++ b/src/scss/cdb-utilities/fonts.scss
@@ -1,25 +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'),
-       url('//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
+  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'),
-       url('//themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
+  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'),
-       url('//themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
+  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');
 }
--- a/src/scss/cdb-utilities/helpers.scss
+++ b/src/scss/cdb-utilities/helpers.scss
@@ -49,7 +49,7 @@
 }

 // Colors
-// Main Text Color is default color 
+// Main Text Color is default color
 // ----------------------------------------------

 .u-actionTextColor {
@@ -67,6 +67,15 @@
 .u-hintTextColor {
  color: $cHintText;
 }
+.u-alertTextColor {
+  color: $cAlert;
+}
+.u-whiteTextColor {
+  color: $cWhite;
+}
+.u-errorTextColor {
+  color: $cError;
+}

 /* Displays */
 .u-iBlock {
@@ -84,6 +93,33 @@
  text-transform: uppercase;
 }

+/* Flex */
+.u-flex {
+  @include display-flex();
+}
+.u-justifySpace {
+  @include justify-content(space-between);
+}
+.u-justifyCenter {
+  @include justify-content(center);
+}
+.u-justifyStart {
+  @include justify-content(flex-start);
+}
+.u-justifyEnd {
+  @include justify-content(flex-end);
+}
+.u-alignStart {
+  @include align-items(flex-start);
+}
+.u-alignCenter {
+  @include align-items(center);
+}
+.u-alignEnd {
+  @include align-items(flex-end);
+}
+
+
 /* Media queries*/
@include media-query-mobile() {
  .u-showDesktop {
@@ -93,3 +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;
+}
--- a/src/scss/cdb-variables/_colors.scss
+++ b/src/scss/cdb-variables/_colors.scss
@@ -2,7 +2,7 @@
 // ----------------------------------------------

 // General
-$cBlue: #3AA9E3;
+$cBlue: #1181FB;
 $cBlack: #000;
 $cWhite: #FFF;
 $cMainBg: #2E3C43;
Author	SHA1	Message	Date
piensaenpixel	b54345217e	add layout	2016-08-19 16:14:30 +02:00
piensaenpixel	88dc19c543	add more modals	2016-08-19 12:55:27 +02:00
piensaenpixel	de72395693	add new modals	2016-08-18 19:39:03 +02:00
piensaenpixel	61767e4055	add more modals	2016-08-18 18:13:24 +02:00
piensaenpixel	6735371850	add more modals	2016-08-18 14:03:31 +02:00
piensaenpixel	e897ee9dae	first modals	2016-08-18 12:43:02 +02:00
piensaenpixel	e88024b928	fix opacity	2016-07-14 15:51:34 +02:00
piensaenpixel	c83ce9ecff	Merge pull request #144 from CartoDB/toggle-disabled add disabled style for toggle	2016-07-14 12:45:03 +02:00
Carlos Matallín	988106139f	add disabled style for toggle	2016-07-12 17:17:09 +02:00
piensaenpixel	39ad9c0214	Merge pull request #142 from CartoDB/fix-loading change loader opacity	2016-07-11 09:26:11 +02:00
piensaenpixel	4293c8062c	change loader opacity	2016-07-11 09:04:49 +02:00
piensaenpixel	9b05c9ed0f	fix max-width in buttons	2016-07-07 12:07:30 +02:00
piensaenpixel	75d13a7470	fix ellipsis	2016-07-07 00:06:58 +02:00
piensaenpixel	83b7093281	add button option	2016-07-06 18:59:04 +02:00
piensaenpixel	aff9f0b7d3	fix tags data type	2016-07-06 18:26:52 +02:00
Javier Álvarez Medina	cbb213032a	Merge pull request #141 from CartoDB/icon-alert add fill components	2016-07-06 11:17:43 +02:00
piensaenpixel	1adc6cd569	add fill components	2016-07-06 11:05:26 +02:00
piensaenpixel	c0ab3c7677	fix align	2016-07-05 18:34:28 +02:00
piensaenpixel	44142076b3	add align-Center	2016-07-05 18:19:44 +02:00
piensaenpixel	0260c4fadc	change z-index	2016-07-04 22:28:27 +02:00
piensaenpixel	4764264772	add helpers	2016-07-04 19:16:28 +02:00
piensaenpixel	2a81d41527	fix unnecessary class	2016-07-04 12:34:24 +02:00
piensaenpixel	b96a11f232	add helper	2016-07-03 13:45:28 +02:00
piensaenpixel	c293dec3fa	fix className	2016-07-03 01:21:04 +02:00
piensaenpixel	efee672f73	fix className	2016-07-03 01:10:31 +02:00
piensaenpixel	160615d330	add state	2016-07-03 00:51:25 +02:00
xavijam	43820c8113	Added small loader	2016-07-02 13:40:54 +02:00
piensaenpixel	87e2e80082	fix antialiased only for white text	2016-06-29 11:23:18 +02:00
piensaenpixel	9fa4fe1855	fix analias for small sizes	2016-06-29 11:03:23 +02:00
piensaenpixel	abdf5ce056	Merge pull request #140 from CartoDB/fix-load-fonts change fonts	2016-06-29 09:55:16 +02:00
piensaenpixel	ca138380dc	change fonts	2016-06-28 15:50:30 +02:00
piensaenpixel	eac96c11ef	Merge pull request #138 from CartoDB/add-align-helpers fix pr	2016-06-25 11:21:15 +02:00
piensaenpixel	f9b4b0b5a0	fix pr	2016-06-25 11:22:25 +02:00
piensaenpixel	8f6da318e7	Merge pull request #137 from CartoDB/add-align-helpers add align helpers	2016-06-25 11:17:40 +02:00
piensaenpixel	0e4dfb746f	add align helpers	2016-06-25 11:17:08 +02:00
piensaenpixel	5229b236d7	add helper for errorText	2016-06-23 19:56:33 +02:00
piensaenpixel	05dac9dd96	Merge branch 'master' of github.com:CartoDB/CartoAssets	2016-06-23 19:52:59 +02:00
piensaenpixel	d06fd1085d	fix space menu	2016-06-23 19:52:49 +02:00
Javier Álvarez Medina	28c08c6619	Adding error state for Textarea cc @piensaenpixel	2016-06-23 16:13:46 +02:00
piensaenpixel	f7b70c6de4	fix blue	2016-06-23 11:50:31 +02:00
piensaenpixel	1a202793bc	Merge pull request #136 from CartoDB/change-buttons change buttons and electric blue	2016-06-22 10:31:01 +02:00
piensaenpixel	f6db321559	change buttons and electric blue	2016-06-22 10:07:37 +02:00
piensaenpixel	4d10c030b9	Merge pull request #135 from CartoDB/align-icons align icons	2016-06-21 09:40:46 +02:00
piensaenpixel	49b61ced15	align icons	2016-06-20 22:59:05 +02:00
piensaenpixel	2fc28a59c8	Merge pull request #133 from CartoDB/add-disaabled add disabled state	2016-06-20 12:10:40 +02:00
piensaenpixel	0d7c032e44	Merge pull request #134 from CartoDB/add-transitions add transitions	2016-06-20 11:58:30 +02:00
piensaenpixel	8d4dfaa378	add transitions	2016-06-20 11:50:42 +02:00
piensaenpixel	9ad88d0127	fix opacity	2016-06-20 10:51:31 +02:00
piensaenpixel	2c6bc062fd	add disabled state	2016-06-20 10:44:17 +02:00
piensaenpixel	43a21b5d28	Merge pull request #132 from CartoDB/add-eye-icon Add eye icon	2016-06-16 13:10:14 +02:00
piensaenpixel	20d3d93c2a	fix hide icon	2016-06-16 13:08:16 +02:00
piensaenpixel	402478bfc0	add icon	2016-06-16 13:04:22 +02:00
piensaenpixel	26303a12f7	Merge pull request #131 from CartoDB/add-arrow-icon add new arrow	2016-06-15 23:26:08 +02:00
piensaenpixel	29f8d3867a	add new arrow	2016-06-15 22:32:48 +02:00
piensaenpixel	632415b10d	add z-index	2016-06-15 17:19:24 +02:00
piensaenpixel	1c3ccc1e9e	Merge pull request #129 from CartoDB/loader-sizes add new size	2016-06-10 11:11:08 +02:00
piensaenpixel	810075cf64	add new size	2016-06-10 10:52:32 +02:00
piensaenpixel	46ce854ed9	Merge pull request #126 from CartoDB/clean-colorBar remove colorBar from cartoassets	2016-06-08 12:11:51 +02:00
piensaenpixel	46e2dc5cf6	Merge pull request #128 from CartoDB/fix-loadings unify spinners	2016-06-07 13:54:03 +02:00
piensaenpixel	bf6a54d6b1	unify spinners	2016-06-07 13:47:32 +02:00
piensaenpixel	0bb00aedb2	remove colorBar from cartoassets	2016-06-07 11:36:01 +02:00
Buti	9ef35729de	Merge pull request #125 from CartoDB/remove-infoloader Remove boxloader and infobox	2016-06-07 11:08:47 +02:00
nobuti	a167bab78e	Remove infoboxes and box loader. Already in cartodb.	2016-06-07 09:13:27 +02:00
nobuti	34d850e5ae	Update package.json to work with node v6.x	2016-06-07 09:12:50 +02:00
piensaenpixel	48553731ca	Merge pull request #124 from CartoDB/adjust-input minor size in inputs	2016-06-03 18:15:36 +02:00
piensaenpixel	1a8869501d	minor size in inputs	2016-06-03 18:09:30 +02:00
piensaenpixel	5da12f762d	Merge pull request #123 from CartoDB/add-helper add help	2016-05-31 11:57:11 +02:00
piensaenpixel	827604558d	change classname	2016-05-31 11:56:30 +02:00
piensaenpixel	1b6c26b4fd	fix CR	2016-05-31 11:55:14 +02:00
piensaenpixel	dcaa71a9db	add help	2016-05-31 11:49:35 +02:00
piensaenpixel	933cf2d94b	Merge pull request #122 from CartoDB/picker-color-v2 add helper for components	2016-05-30 13:02:49 +02:00
piensaenpixel	4ca2d866cb	add helper for components	2016-05-30 12:55:33 +02:00
piensaenpixel	8af4f65cbe	Merge pull request #121 from CartoDB/disabled-buttons add helper and disabled icon	2016-05-25 09:33:04 +02:00
piensaenpixel	0c6b43fffe	add helper and disabled icon	2016-05-25 08:27:22 +02:00
piensaenpixel	d7a7028fe1	Merge pull request #120 from CartoDB/is-editing-components add editing status	2016-05-23 16:30:51 +02:00
piensaenpixel	9ea9e4401c	Merge pull request #119 from CartoDB/add-icons add undo and redo icons	2016-05-23 16:30:42 +02:00
piensaenpixel	39411dffb3	fix pr	2016-05-23 15:19:24 +02:00
piensaenpixel	e83f427fb0	add editing status	2016-05-23 14:47:41 +02:00
piensaenpixel	60f2d67315	add undo and redo icons	2016-05-23 12:19:20 +02:00
María Checa	dbd05b4a6a	Merge pull request #117 from CartoDB/icon-font-updated New font icons: mobile	2016-05-20 17:20:51 +02:00
María Checa	fd470d4c88	New font icons: removed status icon	2016-05-20 17:16:22 +02:00
María Checa	8b5bc84f66	New font icons: updated just the new ones	2016-05-20 12:38:15 +02:00
María Checa	529d4eb8df	Revert "New font icons: mobile and status point" This reverts commit `046be003c4`.	2016-05-20 12:30:48 +02:00
piensaenpixel	cc8ee2b833	Merge pull request #118 from CartoDB/fix-cdb-modal add min width and sizing	2016-05-19 20:01:21 +02:00
piensaenpixel	5f58ed12b3	add min width and sizing	2016-05-19 19:53:18 +02:00
María Checa	046be003c4	New font icons: mobile and status point	2016-05-19 18:34:02 +02:00
piensaenpixel	7c60ddb016	Merge pull request #116 from CartoDB/add-header-components add new modifiers	2016-05-19 15:37:32 +02:00
piensaenpixel	f792543dca	add new modifiers	2016-05-19 15:26:12 +02:00
piensaenpixel	7ceb907a3a	Merge pull request #115 from CartoDB/fix-components add helpers	2016-05-19 14:01:02 +02:00
piensaenpixel	625b622fb4	fix PR	2016-05-19 13:57:06 +02:00
piensaenpixel	3debe6953c	add list components	2016-05-19 13:50:53 +02:00
piensaenpixel	a13daa1204	add helpers	2016-05-19 13:47:40 +02:00
piensaenpixel	1e31f03313	Merge pull request #114 from CartoDB/add-icon add icon and helper	2016-05-17 17:34:34 +02:00
piensaenpixel	6e088f30c1	add icon and helper	2016-05-17 17:29:49 +02:00
Pablo Alonso	cc13652adc	Merge pull request #112 from CartoDB/CDB-Shape-threePoints-padding Adds some padding to CDB-Shape-threePoints so that is easier to click on the button	2016-05-17 12:05:32 +02:00
Pablo Alonso Garcia	0eb3044b4c	Adds some padding to CDB-Shape-threePoints so that is easier to click on it	2016-05-17 11:53:27 +02:00
piensaenpixel	9a8f1c1753	fix outline	2016-05-11 23:53:51 +02:00
piensaenpixel	2f707b089d	update package	2016-05-11 17:10:30 +02:00
piensaenpixel	fd18fb30fd	Merge pull request #111 from CartoDB/change-font-iconMenu Change font icon menu	2016-05-11 16:59:32 +02:00
piensaenpixel	b6028d8403	fix align in view icon	2016-05-11 16:54:37 +02:00
piensaenpixel	e49b0eeb04	add sketch	2016-05-11 16:21:57 +02:00
piensaenpixel	2e0105d358	Merge pull request #110 from CartoDB/change-font-iconMenu change font-icon	2016-05-11 14:01:53 +02:00
piensaenpixel	71b1e86cd6	change font-icon	2016-05-11 13:53:14 +02:00
piensaenpixel	03af10143e	Merge pull request #109 from CartoDB/add-select-states add states	2016-05-06 17:47:33 +02:00
piensaenpixel	f1c9544b18	add states	2016-05-06 17:41:57 +02:00
piensaenpixel	9ce66b6fd0	Merge pull request #107 from CartoDB/add-loader-state add new state	2016-05-04 19:39:30 +02:00
piensaenpixel	d96356fbe2	add new state	2016-05-04 17:41:32 +02:00
piensaenpixel	b0ac3dfc85	Merge pull request #106 from CartoDB/fix-loader fix loader	2016-05-04 15:22:42 +02:00
piensaenpixel	47a8775b1d	fix hound	2016-05-04 15:13:13 +02:00
piensaenpixel	20e3afd34a	fix loader	2016-05-04 15:08:46 +02:00
Javier Álvarez Medina	f1c9e1bbd0	Merge pull request #105 from CartoDB/remove-carousel Remove carousel used for editor	2016-05-04 09:53:53 +02:00
xavijam	4c1a5191da	Remove carousel used for editor	2016-05-03 20:10:28 +02:00
piensaenpixel	83d5f7e689	add tag	2016-04-29 13:52:09 +02:00
piensaenpixel	f6e13bdf2e	add border-box	2016-04-26 18:53:06 +02:00
piensaenpixel	9e0f9ca372	Merge pull request #103 from CartoDB/fix-classnames fix class names	2016-04-26 15:10:08 +02:00
piensaenpixel	366e57ec25	fix modal	2016-04-26 14:54:33 +02:00
piensaenpixel	26f0a71a21	fix class names	2016-04-26 13:53:21 +02:00
piensaenpixel	5b45aeda54	Merge pull request #102 from CartoDB/header-dropdown add new component	2016-04-26 13:29:01 +02:00
piensaenpixel	a7b2fbc637	fix pr	2016-04-26 10:34:21 +02:00
piensaenpixel	42790930d6	add new component	2016-04-25 18:31:52 +02:00
Javier Álvarez Medina	882463f25a	Merge pull request #101 from CartoDB/option-input-options Added options for content input, removing separator and margins	2016-04-22 14:03:30 +02:00
xavijam	19e596b714	Renamed file with hyphens instead of underscores	2016-04-22 13:59:58 +02:00
xavijam	b8387c90c0	Fixed noSeparator alternative	2016-04-22 13:58:41 +02:00
xavijam	73af1244e7	Added options for content input, removing separator and margins	2016-04-22 13:42:01 +02:00
Carlos Matallín	e9f60113d3	Merge pull request #100 from CartoDB/legend-with-check legend with check	2016-04-21 16:29:52 +02:00
Carlos Matallín	f6d5aa0d77	CDB-Legend--big	2016-04-21 16:26:01 +02:00
Carlos Matallín	306a67e274	legend with check	2016-04-20 18:54:00 +02:00
piensaenpixel	7a68c685a0	Merge pull request #99 from CartoDB/fix-icon-move Fix icon move	2016-04-20 18:51:10 +02:00
piensaenpixel	d76caab37e	fix hound	2016-04-20 18:40:40 +02:00
piensaenpixel	a98dfb5115	fix icon move	2016-04-20 18:40:12 +02:00
piensaenpixel	a05a8a56e5	Merge pull request #91 from CartoDB/add-tabForm-element add tab form	2016-04-20 12:38:22 +02:00
piensaenpixel	cafce86574	fix CR	2016-04-20 12:33:37 +02:00
Carlos Matallín	6770af7b4e	Merge pull request #98 from CartoDB/submenu-item-typo fix typo: item => Item	2016-04-19 17:31:03 +02:00
Carlos Matallín	dc142c313b	fix typo: item => Item	2016-04-19 17:04:05 +02:00
Carlos Matallín	b22ed193de	Merge pull request #97 from CartoDB/subnavbar-separate subnavbar: separate	2016-04-19 16:35:35 +02:00
Carlos Matallín	6ed2062657	submenu: inside/outside	2016-04-19 16:25:45 +02:00
Carlos Matallín	613e9ec17d	subnavbar: separate	2016-04-19 16:09:11 +02:00
Javier Álvarez Medina	de8e49afd0	Merge pull request #95 from CartoDB/form-fields-error-state Adding fields error state	2016-04-18 16:43:23 +02:00
xavijam	8ea6ac154f	Adding fields error state	2016-04-18 16:04:38 +02:00
piensaenpixel	6edbc23017	Merge pull request #94 from CartoDB/change-icons-navigation change font-icon	2016-04-18 14:10:58 +02:00
piensaenpixel	f5e41a5cc8	change font-icon	2016-04-18 13:51:07 +02:00
piensaenpixel	f23c215f4d	Merge pull request #93 from CartoDB/fix-toggle change toggle color	2016-04-12 11:37:28 +02:00
piensaenpixel	34b33cfd43	change toggle color	2016-04-12 11:30:09 +02:00
piensaenpixel	9d4930474f	Merge pull request #92 from CartoDB/add-types add type layer	2016-04-06 16:21:37 +02:00
piensaenpixel	e9728de420	remove blank lines	2016-04-06 16:21:58 +02:00
piensaenpixel	e010394bb1	fix point type	2016-04-06 16:09:46 +02:00
piensaenpixel	389a834d27	add type layer	2016-04-06 16:07:34 +02:00
piensaenpixel	fd975d00e0	add changes	2016-04-01 12:40:23 +02:00
piensaenpixel	2e8ace150b	Merge pull request #90 from CartoDB/fix-textarea use box-sizing	2016-03-31 17:28:36 +02:00
piensaenpixel	36cac6ccc0	use box-sizing	2016-03-31 17:19:16 +02:00
piensaenpixel	2f1301092f	Merge pull request #89 from CartoDB/fix-move-shape fix move shape and add grey version	2016-03-29 11:11:22 +02:00
piensaenpixel	4d7455e4ce	change class name	2016-03-29 11:13:09 +02:00
piensaenpixel	469850129f	fix CR	2016-03-29 10:47:20 +02:00
piensaenpixel	d247d29120	fix CR	2016-03-29 10:34:32 +02:00
piensaenpixel	f79c750d40	fix move shape and add grey version	2016-03-29 10:23:54 +02:00
piensaenpixel	8dacc12dfd	Merge pull request #87 from CartoDB/86-fix_header_width fix min width	2016-03-28 15:42:43 +02:00
piensaenpixel	00e41cd051	fix min width	2016-03-28 15:41:36 +02:00
piensaenpixel	672e25d0c8	Merge pull request #85 from CartoDB/fix-button-height fix button height	2016-03-28 10:43:27 +02:00
piensaenpixel	012ea610b0	fix button height	2016-03-28 10:38:09 +02:00
piensaenpixel	600345d686	Merge pull request #84 from CartoDB/new-buttons-size add new button size and fix size typography	2016-03-23 11:37:00 +01:00
piensaenpixel	2f0b6c7854	add new button size and fix size typography	2016-03-23 11:33:18 +01:00