Revert "Adding empty area so it's easier to reach."

This reverts commit 64f04b3bc5.

.scss-lint.yml

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

icon-font/template.jst.ejs

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

package.json

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

src/scss/cdb-components/avatars.scss

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

src/scss/cdb-components/boxes.scss

@@ -0,0 +1,74 @@
+// Menu styles
+// ----------------------------------------------
+
+/* SG
+# Boxes/Box Dropdown
+
+
+```
+  <div class="CDB-Box-Modal">&nbsp;</div>
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+.CDB-Box-Modal {
+  border: 1px solid $cMainLine;
+  border-radius: 4px;
+  background: $cWhite;
+  box-shadow: 0  $baseSize  $baseSize * 2 0 rgba(0, 0, 0, 0.16);
+}
+
+/* SG
+# Boxes/Info Boxes
+
+
+```
+<div class="CDB-InfoBox">
+  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
+  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
+  <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
+</div>
+<br/>
+<br/>
+<br/>
+<div class="CDB-InfoBox is-alert">
+  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
+  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
+  <ul class="CDB-InfoBox-footer">
+    <li class="CDB-InfoBox-footerItem">
+      <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
+    </li>
+    <li class="CDB-InfoBox-footerItem CDB-InfoBox-footerItem--right">
+      <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
+        <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+      </button>
+    </li>
+  </ul>
+</div>
+```
+*/
+
+.CDB-InfoBox {
+  padding: 12px 16px;
+  border-radius: 4px;
+  background: $cThirdBackground;
+  &.is-alert {
+    background: rgba($cHighlightYellow, 0.6);
+  }
+}
+
+.CDB-InfoBox-footer {
+  @include display-flex();
+  @include align-items(center);
+}
+
+.CDB-InfoBox-footerItem {
+  @include flex(1);
+}
+
+.CDB-InfoBox-footerItem--right {
+  text-align: right;
+}

src/scss/cdb-components/buttons.scss

@@ -9,19 +9,23 @@ Layout Component:
 
 ```
 <button class="CDB-Button CDB-Button--primary">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--primary is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--primary CDB-Button--small">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--primary CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
 </button>
 
 <br/>
@@ -30,20 +34,25 @@ Layout Component:
 
 <div style="background: #2E3C43; padding: 20px;">
   <button class="CDB-Button CDB-Button--primary">
-    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--primary is-disabled">
-    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--primary CDB-Button--small">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
+
+  <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
+    <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+  </button>
+
 </div>
 
 ```
@@ -71,6 +80,9 @@ Layout Component:
 .CDB-Button--small {
   padding: $baseSize - 3 $baseSize + 4;
 }
+.CDB-Button--icon {
+  padding: 7px 9px;
+}
 
 .CDB-Button--primary {
   background: $cBlue;
@@ -103,19 +115,19 @@ Layout Component:
 
 ```
 <button class="CDB-Button CDB-Button--secondary">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--secondary is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
 <br/>
@@ -124,19 +136,19 @@ Layout Component:
 
 <div style="background: #2E3C43; padding: 20px;">
   <button class="CDB-Button CDB-Button--secondary">
-    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary is-disabled">
-    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
 </div>
 
@@ -146,7 +158,6 @@ Layout Component:
 
 .CDB-Button--secondary {
   border: 1px solid $cBlue;
-  background: $cWhite;
   color: $cBlue;
 
   &:hover {

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

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

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

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

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

@@ -0,0 +1,71 @@
+// Legends styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Labels
+
+```
+<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Radio" type="radio" name="veritas" value="01">
+  <span class="u-iBlock CDB-Radio-face"></span>
+  <label class="u-iBlock u-lSpace">True</label>
+</div>
+<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Radio" type="radio" name="veritas" value="02" checked>
+  <span class="u-iBlock CDB-Radio-face"></span>
+  <label class="u-iBlock u-lSpace">False</label>
+</div>
+
+<br/>
+<br/>
+<br/>
+
+<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+  <label class="u-iBlock u-lSpace">Sport</label>
+</div>
+<label class="u-iblock CDB-Text CDB-Size-medium">
+  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
+  <span class="u-iBlock CDB-Checkbox-face"></span>
+  <label class="u-iBlock u-lSpace">Travel</label>
+</label>
+
+<br/>
+<br/>
+<br/>
+
+<fieldset>
+  <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
+  <ul class="CDB-Text CDB-Size-medium u-iBlock">
+    <li class="u-iBlock u-rSpace--xl">
+      <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
+        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
+        <span class="u-iBlock CDB-Checkbox-face"></span>
+        <label class="u-iBlock u-lSpace">Sport</label>
+      </div>
+    </li>
+    <li class="u-iblock">
+      <label class="u-iblock CDB-Text CDB-Size-medium">
+        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
+        <span class="u-iBlock CDB-Checkbox-face"></span>
+        <label class="u-iBlock u-lSpace">Travel</label>
+      </label>
+    </li>
+  </ul>
+</fieldset>
+<fieldset class="u-tSpace-xl CDB-Text">
+  <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
+  <div class="u-iBlock">
+    <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
+  </div>
+</fieldset>
+
+```
+*/
+
+@import '../../cdb-variables/sizes';
+
+.CDB-Legend {
+  width: $baseSize * 12;
+}

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

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

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

@@ -0,0 +1,30 @@
+// Select styles
+// ----------------------------------------------
+
+
+/* SG
+# Forms/Selects
+
+```
+<div class="CDB-Select" style="height: 250px;">
+  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
+  <div class="CDB-Box-Modal CDB-SelectItem">
+    <ul class="CDB-Text CDB-Size-medium">
+      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Hide</a></li>
+      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Rename</a></li>
+      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Change source dataset…</a></li>
+      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Delete this layer…</a></li>
+    </ul>
+  </div>
+</div>
+```
+*/
+
+.CDB-Select {
+  position: relative;
+}
+
+.CDB-SelectItem {
+  position: absolute;
+  top: 40px;
+}

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

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

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

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

src/scss/cdb-components/headers.scss

@@ -0,0 +1,195 @@
+// Typography styles
+// ----------------------------------------------
+
+/* SG
+# Headers
+
+```
+<div class="CDB-HeaderInfo is-block">
+  <div class="CDB-HeaderInfo-Title u-bSpace">
+    <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
+    <div class="CDB-HeaderInfo-Actions">
+      <a href="#">
+          <div class="CDB-Shape">
+            <div class="CDB-Shape-threePoints is-blue is-small">
+              <div class="CDB-Shape-threePointsItem"></div>
+              <div class="CDB-Shape-threePointsItem"></div>
+              <div class="CDB-Shape-threePointsItem"></div>
+            </div>
+          </div>
+      </a>
+    </div>
+  </div>
+  <ul class="CDB-HeaderInfo-List">
+    <li class="CDB-HeaderInfo-ListItem">
+      <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
+        PUBLIC
+      </button>
+    </li>
+    <li class="CDB-HeaderInfo-ListItem">
+      <ul class="CDB-AvatarList u-iBlock">
+        <li class="CDB-AvatarList-item">
+          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
+        </li>
+        <li class="CDB-AvatarList-item">
+          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
+        </li>
+        <li class="CDB-AvatarList-item">
+          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
+        </li>
+        <li class="CDB-AvatarList-itemMore">
+          <button class="CDB-Text is-semibold CDB-Size-small">+ 16</button>
+        </li>
+      </ul>
+    </li>
+    <li class="CDB-HeaderInfo-ListItem">
+      <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock">Published 8 days ago</p>
+    </li>
+  </ul>
+</div>
+<br/>
+<br/>
+<br/>
+<div class="CDB-HeaderInfo">
+  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
+    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
+  </a>
+  <div class="CDB-HeaderInfo-Inner">
+    <div class="CDB-HeaderInfo-Title u-bSpace">
+      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected </h2>
+      <ul class="CDB-HeaderInfo-Actions">
+        <li class="CDB-HeaderInfo-ActionsItem">
+          <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
+            <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+          </button>
+        </li>
+        <li class="CDB-HeaderInfo-ActionsItem">
+          <a href="#">
+              <div class="CDB-Shape">
+                <div class="CDB-Shape-threePoints is-blue is-small">
+                  <div class="CDB-Shape-threePointsItem"></div>
+                  <div class="CDB-Shape-threePointsItem"></div>
+                  <div class="CDB-Shape-threePointsItem"></div>
+                </div>
+              </div>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="CDB-Shape u-iBlock">
+      <ul class="CDB-Shape-Dataset is-small is-grey">
+        <li class="CDB-Shape-DatasetItem"></li>
+        <li class="CDB-Shape-DatasetItem"></li>
+      </ul>
+    </div>
+    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
+  </div>
+</div>
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-HeaderInfo">
+  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
+    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
+  </a>
+  <div class="CDB-HeaderInfo-Inner">
+    <div class="CDB-HeaderInfo-Title u-bSpace">
+      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
+      <div class="CDB-HeaderInfo-Actions">
+        <a href="#">
+            <div class="CDB-Shape">
+              <div class="CDB-Shape-threePoints is-blue is-small">
+                <div class="CDB-Shape-threePointsItem"></div>
+                <div class="CDB-Shape-threePointsItem"></div>
+                <div class="CDB-Shape-threePointsItem"></div>
+              </div>
+            </div>
+        </a>
+      </div>
+    </div>
+    <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium">Positron by CartoDB</p>
+  </div>
+</div>
+<br/>
+<br/>
+<br/>
+
+<div class="CDB-HeaderInfo">
+  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
+    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
+  </a>
+  <div class="CDB-HeaderInfo-Inner">
+    <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text u-bSpace--m">
+    <div class="CDB-Shape u-iBlock">
+      <ul class="CDB-Shape-Dataset is-small is-grey">
+        <li class="CDB-Shape-DatasetItem"></li>
+        <li class="CDB-Shape-DatasetItem"></li>
+      </ul>
+    </div>
+    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
+  </div>
+</div>
+<br/>
+<br/>
+<br/>
+
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+.CDB-HeaderInfo {
+  @include display-flex();
+
+  &.is-block {
+    display: block;
+  }
+}
+
+.CDB-HeaderInfo-ListItem {
+  display: inline-block;
+  margin-right: 8px;
+  vertical-align: middle;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.CDB-HeaderInfo-Text {
+  color: $cTypo3;
+}
+
+.CDB-HeaderInfo-Inner {
+  @include flex(1);
+}
+
+.CDB-HeaderInfo-Back {
+  margin-top: 7px;
+}
+
+.CDB-HeaderInfo-Title {
+  @include display-flex();
+  @include align-items(center);
+}
+
+.CDB-HeaderInfo-TitleText {
+  @include flex(1);
+  width: 0;
+  padding-right: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.CDB-HeaderInfo-ActionsItem {
+  display: inline-block;
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+
+

src/scss/cdb-components/lists.scss

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

src/scss/cdb-components/menu.scss

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

src/scss/cdb-components/shapes.scss

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,106 @@
+/* SG
+# Shapes/Three Points
+
+Description
+
+```
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <button class="CDB-Shape-threePoints js-actions">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </button>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <button class="CDB-Shape-threePoints is-blue js-actions">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </button>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <button class="CDB-Shape-threePoints is-white js-actions">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </button>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <button class="CDB-Shape-threePoints is-small js-actions">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </button>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <button class="CDB-Shape-threePoints is-blue is-small js-actions">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </button>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <button class="CDB-Shape-threePoints is-white is-small js-actions">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </button>
+  </div>
+</div>
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-threePoints {
+  display: inline-block;
+}
+
+.CDB-Shape-threePointsItem {
+  width: 2px;
+  height: 2px;
+  margin-bottom: 5px;
+  background: $cMainDark;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.CDB-Shape-threePoints.is-small {
+  padding-top: 2px;
+
+  .CDB-Shape-threePointsItem {
+    width: 2px;
+    height: 2px;
+    margin-bottom: 3px;
+  }
+}
+
+.CDB-Shape-threePoints.is-blue {
+  .CDB-Shape-threePointsItem {
+    background: $cBlue;
+  }
+}
+
+.CDB-Shape-threePoints.is-white {
+  .CDB-Shape-threePointsItem {
+    background: $cWhite;
+  }
+}

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

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

src/scss/cdb-components/tags.scss

@@ -0,0 +1,47 @@
+// Typography styles
+// ----------------------------------------------
+
+/* SG
+# Tags
+
+```
+<button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
+  PUBLIC
+</button>
+<button class="CDB-Tag is-link CDB-Text is-semibold CDB-Size-small u-iBlock">
+  LINK
+</button>
+<button class="CDB-Tag is-password CDB-Text is-semibold CDB-Size-small u-iBlock">
+  PASSWORD
+</button>
+<button class="CDB-Tag is-private CDB-Text is-semibold CDB-Size-small u-iBlock">
+  PRIVATE
+</button>
+```
+*/
+
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+
+.CDB-Tag {
+  padding: 0 3px;
+  border-radius: 2px;
+
+  &.is-public {
+    border: 1px solid $cPublic;
+    color: $cPublic;
+  }
+  &.is-link {
+    border: 1px solid $cLink;
+    color: $cLink;
+  }
+  &.is-password {
+    border: 1px solid $cPassword;
+    color: $cPassword;
+  }
+  &.is-private {
+    border: 1px solid $cError;
+    color: $cError;
+  }
+}

src/scss/cdb-components/typography.scss

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

src/scss/cdb-icon-font.scss

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

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

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

src/scss/cdb-utilities/fonts.scss

@@ -6,17 +6,20 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
+       url('themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
+  src: local('Open Sans'), local('OpenSans'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
+       url('themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
+       url('themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
 }

src/scss/cdb-utilities/helpers.scss

@@ -6,9 +6,15 @@
 .u-tSpace {
   margin-top: 4px;
 }
+.u-tSpace--m {
+  margin-top: 8px;
+}
 .u-tSpace-xl {
   margin-top: 12px;
 }
+.u-rSpace--s {
+  margin-right: 2px;
+}
 .u-rSpace {
   margin-right: 4px;
 }
@@ -24,6 +30,13 @@
 .u-lSpace--xl {
   margin-left: 12px;
 }
+.u-bSpace {
+  margin-bottom: 4px;
+}
+.u-bSpace--m {
+  margin-bottom: 8px;
+}
+
 .u-iBlock {
   @include inline-block();
 }

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

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

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

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

src/scss/cdb-variables/_colors.scss

@@ -29,3 +29,4 @@ $cPublic: #9BC63B;
 $cLink: #FEB100;
 $cPassword: #FB7B23;
 $cError: #F15743;
+$cHighlightYellow: #FFFFC0;

src/scss/cdb-variables/_sizes.scss

@@ -14,7 +14,7 @@ $sMargin-element: 14px; // To separate elements inside a group
 
 // Font sizes
 $sFontSize-small: 10px;
-$sFontSize-medium: 14px;
+$sFontSize-medium: 12px;
 $sFontSize-large: 16px;
 $sFontSize-huge: 26px;