Merge pull request #21 from CartoDB/forms-assets

Forms assets
2016-01-27 15:30:53 +01:00
parent d17e5386ce 78d0d8f085
commit 6af4978a17
19 changed files with 679 additions and 3 deletions
--- a/.scss-lint.yml
+++ b/.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:
--- a/src/fonts/cartoIcon.eot
+++ b/src/fonts/cartoIcon.eot
--- 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
@@ -0,0 +1,21 @@
+// Menu styles
+// ----------------------------------------------
+
+/* SG
+# Boxes/Box Dropdown
+
+
+```
+  <div class="CDB-Box-Modal">&nbsp;</div>
+```
+*/
+
+@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);
+}
--- a/src/scss/cdb-components/forms/checkbox.scss
+++ b/src/scss/cdb-components/forms/checkbox.scss
@@ -0,0 +1,82 @@
+// CheckBoxes styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Checkbox
+
+```
+  <input type="checkbox" name="vehicle" value="Bike" class="CDB-Checkbox" checked>
+  <input type="checkbox" name="vehicle" value="Bus" class="CDB-Checkbox">
+  <input type="checkbox" name="vehicle" value="Car" class="CDB-Checkbox" disabled>
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+
+.CDB-Checkbox {
+  position: relative;
+  width: $baseSize * 2;
+  height: $baseSize * 2;
+  border: 1px solid $cMainLine;
+  border-radius: 3px;
+
+  &::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);
+  }
+
+  &:checked {
+    border: 1px solid $cBlue;
+    background: $cBlue;
+
+    &:hover {
+      border: 1px solid $cBlue;
+    }
+
+    &::before,
+    &::after {
+      background: $cWhite;
+    }
+  }
+
+  &:focus {
+    border: 1px solid $cBlue;
+  }
+
+  &:hover {
+    border: 1px solid $cHoverLine;
+  }
+
+  &:disabled {
+    border: 1px solid $cSecondaryLine;
+    background: $cThirdBackground;
+
+    &:hover {
+      border: 1px solid $cSecondaryLine;
+    }
+
+    &::before,
+    &::after {
+      background: $cWhite;
+    }
+  }
+}
--- a/src/scss/cdb-components/forms/inputs.scss
+++ b/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 Text">
+  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText has-error Text">
+  <input type="text" name="text" placeholder="DejaVu Sans" disabled class="CDB-InputText is-disabled Text">
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+
+.CDB-InputText {
+  min-width: 152px;
+  padding: 7px 8px 6px;
+  border: 1px solid $cMainLine;
+  border-radius: 3px;
+  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;
+  }
+}
--- a/src/scss/cdb-components/forms/legends.scss
+++ b/src/scss/cdb-components/forms/legends.scss
@@ -0,0 +1,65 @@
+// Legends styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Labels
+
+```
+  <label class="u-iblock Text Size-medium u-rSpace--xl">
+    <input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="01" checked>
+    <span class="u-iBlock">True</span>
+  </label>
+  <label class="u-iblock Text Size-medium">
+    <input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="02" checked>
+    <span class="u-iBlock">False</span>
+  </label>
+
+  <br/>
+  <br/>
+  <br/>
+
+  <label class="u-iblock Text Size-medium u-rSpace--xl">
+    <input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Sport" >
+    <span class="u-iBlock">Sport</span>
+  </label>
+  <label class="u-iblock Text Size-medium">
+    <input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Travel">
+    <span class="u-iBlock">Travel</span>
+  </label>
+
+  <br/>
+  <br/>
+  <br/>
+
+  <fieldset>
+    <p class="CDB-Legend u-iBlock Text is-semibold Size-small u-rSpace--m">RADIO</p>
+    <ul class="Text Size-medium u-iBlock">
+      <li class="u-iBlock u-rSpace--xl">
+        <label>
+          <input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel">
+          <span class="u-iBlock">Travel</span>
+        </label>
+      </li>
+      <li class="u-iblock">
+        <label>
+          <input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel">
+          <span class="u-iBlock">Travel</span>
+        </label>
+      </li>
+    </ul>
+  </fieldset>
+  <fieldset class="u-tSpace-xl">
+    <p class="CDB-Legend u-iBlock Text is-semibold Size-small u-rSpace--m">RADIO</p>
+    <div class="u-iBlock">
+      <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText Text">
+    </div>
+  </fieldset>
+
+```
+*/
+
+@import '../../cdb-variables/sizes';
+
+.CDB-Legend {
+  width: $baseSize * 12;
+}
--- a/src/scss/cdb-components/forms/radio.scss
+++ b/src/scss/cdb-components/forms/radio.scss
@@ -0,0 +1,72 @@
+// Radio Button styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Radio
+
+
+```
+  <input class="CDB-Radio" type="radio" name="Gender" value="01" checked>
+  <input class="CDB-Radio" type="radio" name="Gender" value="02">
+  <input class="CDB-Radio" type="radio" name="Gender" value="03" disabled>
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+
+.CDB-Radio {
+  position: relative;
+  width: $baseSize * 2;
+  height: $baseSize * 2;
+  border: 1px solid $cMainLine;
+  border-radius: 50%;
+
+  &::before {
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $baseSize - 2;
+    height: $baseSize - 2;
+    margin-top: -3px;
+    margin-left: -3px;
+    border-radius: 50%;
+    background: $cSecondaryLine;
+    content: '';
+  }
+
+  &:checked {
+    border: 1px solid $cBlue;
+    background: $cBlue;
+
+    &:hover {
+      border: 1px solid $cBlue;
+    }
+
+    &::before {
+      background: $cWhite;
+    }
+  }
+
+  &:focus {
+    border: 1px solid $cBlue;
+  }
+
+  &:hover {
+    border: 1px solid $cHoverLine;
+  }
+
+  &:disabled {
+    border: 1px solid $cSecondaryLine;
+    background: $cThirdBackground;
+
+    &:hover {
+      border: 1px solid $cSecondaryLine;
+    }
+
+    &::before {
+      background: $cWhite;
+    }
+  }
+}
--- a/src/scss/cdb-components/forms/selects.scss
+++ b/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 Text">
+    <div class="CDB-Box-Modal CDB-SelectItem">
+      <ul class="Text 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;
+}
--- a/src/scss/cdb-components/forms/sliders.scss
+++ b/src/scss/cdb-components/forms/sliders.scss
@@ -0,0 +1,81 @@
+// 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 {
+  position: relative;
+  width: 100%;
+  margin: -4px 0 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+.CDB-Range::-webkit-slider-thumb {
+  position: relative;
+  width: $baseSize / 2;
+  height: 100%;
+  border-radius: $baseSize / 2;
+}
+
+.CDB-Range::-webkit-slider-runnable-track {
+  height: $baseSize / 4;
+  margin: $baseSize 0;
+  border-radius: $baseSize / 2;
+  background: $cMainLine;
+}
+
+.CDB-Range::-webkit-slider-thumb::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: -3000px;
+  height: $baseSize / 4;
+  border-radius: $baseSize / 2;
+  background: $cBlue;
+  content: '';
+}
+
+.CDB-Range::-webkit-slider-thumb::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: 10;
+}
+
+.CDB-Range:focus {
+  outline: none;
+}
+
+.CDB-Range:hover::-webkit-slider-thumb::after,
+.CDB-Range:focus::-webkit-slider-thumb::after {
+  cursor: pointer;
+}
+
+.CDB-Range:disabled::-webkit-slider-thumb::before {
+  opacity: 0.2;
+}
+
+.CDB-Range:disabled::-webkit-slider-thumb::after {
+  opacity: 0.2;
+}
--- a/src/scss/cdb-components/forms/toogle.scss
+++ b/src/scss/cdb-components/forms/toogle.scss
@@ -0,0 +1,50 @@
+// Radio Button styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Toogle
+
+
+```
+  <label class="Text Size-small is-semibold u-rSpace--xl">
+    <span class="u-iBlock">TOOLS</span>
+    <input class="CDB-Toogle u-iBlock" type="checkbox" name="Analysis">
+    <span class="u-iBlock">SQL</span>
+  </label>
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
+.CDB-Toogle {
+  @include transition(background, 300ms);
+  position: relative;
+  width: $baseSize * 4;
+  height: $baseSize * 2;
+  margin: 0 2px;
+  border-radius: 50px;
+  background: $cTypo4;
+}
+
+.CDB-Toogle: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: '';
+}
+
+.CDB-Toogle:checked {
+  background: $cMainDark;
+}
+
+.CDB-Toogle:checked:before {
+  right: 2px;
+  left: auto;
+}
--- a/src/scss/cdb-components/lists.scss
+++ b/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;
+}
--- a/src/scss/cdb-components/menu.scss
+++ b/src/scss/cdb-components/menu.scss
@@ -0,0 +1,162 @@
+// Menu styles
+// ----------------------------------------------
+
+/* SG
+# Menu/
+
+
+```
+<nav class="CDB-NavMenu">
+  <ul class="CDB-NavMenu-Inner Text is-semibold 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 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 Text is-semibold Size-medium">
+      <li class="CDB-NavMenu-Item 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 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;
+  }
+}
+
+
--- a/src/scss/cdb-components/shapes.scss
+++ b/src/scss/cdb-components/shapes.scss
@@ -1,8 +1,8 @@
-// Shapes styles
+// Shape styles
 // ----------------------------------------------

 /* SG
-# Shapes/dot
+# Shapes/Dot

 You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:

@@ -14,6 +14,7 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava

@import '../cdb-utilities/mixins';

+
 .CDB-Shape-dot {
  display: inline-block;
  width: 8px;
--- a/src/scss/cdb-utilities/helpers.scss
+++ b/src/scss/cdb-utilities/helpers.scss
@@ -9,6 +9,9 @@
 .u-tSpace-xl {
  margin-top: 12px;
 }
+.u-rSpace--s {
+  margin-right: 2px;
+}
 .u-rSpace {
  margin-right: 4px;
 }
--- a/src/scss/cdb-utilities/normalize.scss
+++ b/src/scss/cdb-utilities/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;
+  }
+}
--- a/src/scss/cdb-variables/_sizes.scss
+++ b/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;

--- a/src/scss/utilities/reset.scss
+++ b/src/scss/utilities/reset.scss
@@ -3,6 +3,8 @@
   License: none (public domain)
 */

+@import '../cdb-variables/colors';
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -58,3 +60,12 @@ button {
 dd, dt {
 	display: inline-block;
 }
+
+a {
+  text-decoration: none;
+  color: $cBlue;
+}
+
+a:hover {
+  text-decoration: underline;
+}