Merge pull request #105 from fabric-design/new-form

Implemented new form styles
fabric-design · Jun 18, 2018 · f5fcac6 · f5fcac6
2 parents 7a50ae5 + 09a2535
commit f5fcac6
Show file tree

Hide file tree

Showing 12 changed files with 144 additions and 88 deletions.
diff --git a/atoms/_badges.scss b/atoms/_badges.scss
@@ -1,10 +1,10 @@
 $include-badge-css: true !default;
-$badge-color: $white !default;
-$badge-background-color: $french-gray !default;
-$badge-red-color: $white !default;
-$badge-red-background-color: $geraldine !default;
-$badge-blue-color: $white !default;
-$badge-blue-background-color: $heaven !default;
+$badge-color: $jumbo !default;
+$badge-border-color: $jumbo !default;
+$badge-red-color: $geraldine !default;
+$badge-red-border-color: $geraldine !default;
+$badge-blue-color: $heaven !default;
+$badge-blue-border-color: $heaven !default;
 $badge-font-size: $font-size-small !default;
 $badge-line-height: $space-l !default;
 $badge-small-line-height: $space-m !default;
@@ -25,24 +25,25 @@ $badge-small-line-height: $space-m !default;
 /**_
  * Includes css to colorize a badge
  * @param $color Color value for the font
- * @param $background-color Color for background
+ * @param $border-color-color Color for border
  */
-@mixin badge-color($color, $background-color) {
-  background-color: $background-color;
-  color: $color;  
+@mixin badge-color($color, $border-color) {
+  color: $color;
+  border: 1px solid $border-color;
+  border-radius: 4rem;
 }
 
 @if $include-badge-css {
   .badge {
     @include badge();
-    @include badge-color($badge-color, $badge-background-color);
+    @include badge-color($badge-color, $badge-border-color);
 
     &.mod-blue {
-      @include badge-color($badge-blue-color, $badge-blue-background-color);
+      @include badge-color($badge-blue-color, $badge-blue-border-color);
     }
 
     &.mod-red {
-      @include badge-color($badge-red-color, $badge-red-background-color);
+      @include badge-color($badge-red-color, $badge-red-border-color);
     }
 
     &.mod-small {
@@ -58,7 +59,7 @@ $badge-small-line-height: $space-m !default;
     }
   }
 
-  .badge-group {    
+  .badge-group {
     .badge {
       &:not(:first-child) {
         border-bottom-left-radius: 0;

diff --git a/atoms/_forms.scss b/atoms/_forms.scss
@@ -1,35 +1,47 @@
 $include-form-css: true !default;
-$input-text-color: $asphalt !default;
+$input-text-color: $bombay !default;
+$input-placeholder-color: $bombay !default;
 $input-background-color: $white !default;
-$input-border-color: $french-gray !default;
-$input-shadow-color: lighten($input-border-color, 15%) !default;
+$input-border-color: $mischka !default;
+$input-shadow-color: transparent !default;
 $input-focused-border-color: $primary-color !default;
-$input-focused-shadow-color: lighten($input-focused-border-color, 40%) !default;
+$input-focused-shadow-color: $input-focused-border-color !default;
 $input-disabled-background-color: $catkin !default;
 
-@mixin input-box($bg-color, $border-color, $shadow-color, $focus-border-color, $focus-shadow-color, $disabled-color) {
-  padding: rem(8px);
-  border: 1px solid $border-color;
-  box-shadow: inset 0 1px 3px 0 $shadow-color;
-  box-sizing: border-box;
-  outline: none;
+@mixin input-box($text-color, $bg-color, $border-color, $shadow-color, $focus-border-color, $focus-shadow-color, $disabled-color) {
+  border: 0;
+  border-bottom: 1px solid $border-color;
+  color: $text-color;
   background-color: $bg-color;
-  height: rem(34px);
-  font-weight: normal;
+  line-height: $space-xl;
+  box-shadow: 0 0 0 $shadow-color;
+  padding-left: $space-xs;
+  outline: none;
+  width: 100%;
   transition: border-color 0.15s linear, box-shadow 0.15s linear;
 
   &:focus {
     border-color: $focus-border-color;
-    box-shadow: inset 0 1px 3px 0 $focus-shadow-color;
+    box-shadow: 0 2px 0 -1px $focus-shadow-color; // 2 + -1 works better for small screens
   }
 
   &:disabled {
     background-color: $disabled-color;
   }
+
+  // stylelint-disable-next-line
+  &::-webkit-input-placeholder {
+    color: $input-placeholder-color;
+  }
+
+  &::placeholder {
+    color: $input-placeholder-color;
+  }
 }
 
 @mixin default-input {
   @include input-box(
+    $text-color: $input-text-color,
     $bg-color: $input-background-color,
     $border-color: $input-border-color,
     $shadow-color: $input-shadow-color,
@@ -52,7 +64,7 @@ $input-disabled-background-color: $catkin !default;
   textarea {
     display: block;
     font-family: $base-font-family;
-    font-size: $base-font-size;
+    font-size: $font-size-small;
   }
 
   label {
@@ -76,6 +88,7 @@ $input-disabled-background-color: $catkin !default;
   select,
   textarea {
     @include input-box(
+      $text-color: $input-text-color,
       $bg-color: $input-background-color,
       $border-color: $input-border-color,
       $shadow-color: $input-shadow-color,
@@ -88,10 +101,29 @@ $input-disabled-background-color: $catkin !default;
   .input-wrapper {
     position: relative;
 
+    input:not([type]),
+    input[type=text],
+    input[type=url],
+    input[type=password],
+    input[type=tel],
+    input[type=number],
+    input[type=color],
+    input[type=email],
+    select,
+    textarea {
+      padding-right: $space-m;
+      overflow: hidden;
+    }
+
     .icon {
       position: absolute;
-      top: 10px;
-      right: 8px;
+      right: 0;
+      top: 50%;
+      margin-top: -8px;
+
+      &.icon24 {
+        margin-top: -12px;
+      }
     }
   }
 
@@ -113,16 +145,11 @@ $input-disabled-background-color: $catkin !default;
     padding-top: 0;
     padding-bottom: 0;
     width: auto;
+    height: $space-xl;
   }
 
   .select-box {
-    padding: rem(8px 20px 8px 8px);
-    border: 1px solid $input-border-color;
-    box-sizing: border-box;
-    background-color: $input-background-color;
-    height: rem(34px);
-    line-height: rem(17px);
-    font-weight: normal;
+    @include default-input;
     position: relative;
     display: block;
     cursor: pointer;
@@ -131,6 +158,7 @@ $input-disabled-background-color: $catkin !default;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    min-height: $space-xl;
 
     &::after {
       content: '';

diff --git a/atoms/_icons.scss b/atoms/_icons.scss
diff --git a/atoms/typography/_headings.scss b/atoms/typography/_headings.scss
@@ -1,10 +1,12 @@
 $include-heading-css: true !default;
 $heading-font-family: $base-font-family !default;
 $heading-color: $fjord !default;
-$heading-font-size-small: 1.125rem !default; // 24px
-$heading-font-size-large: 2rem !default; // 32px
-$heading-line-height-small: 2rem !default; // 32px
-$heading-line-height-large: 2rem !default; // 32px
+$heading-4-font-size: $space-l !default; // 24px
+$heading-4-line-height: $space-xl !default; // 32px
+$heading-3-font-size: $space-l !default; // 24 px
+$heading-3-line-height: $space-xl !default; // 32px
+$heading-2-font-size: $space-xl !default; // 32px
+$heading-2-line-height: $space-xl !default; // 32px
 
 @if $include-heading-css {
   h1,
@@ -26,14 +28,20 @@ $heading-line-height-large: 2rem !default; // 32px
   }
   // Large heading
   h2 {
-    font-size: $heading-font-size-large;
-    line-height: $heading-line-height-large;
+    font-size: $heading-2-font-size;
+    line-height: $heading-2-line-height;
     font-weight: 300;
   }
+  // Medium
+  h3 {
+    font-size: $heading-3-font-size;
+    line-height: $heading-3-line-height;
+    font-weight: 500;
+  }
   // Small heading
   h4 {
-    font-size: $heading-font-size-small;
-    line-height: $heading-line-height-small;
+    font-size: $heading-4-font-size;
+    line-height: $heading-4-line-height;
     font-weight: 400;
   }
 }
diff --git a/fonts/config.json b/fonts/config.json
@@ -493,6 +493,20 @@
       "search": [
         "flash"
       ]
+    },
+    {
+      "uid": "2d59d80d3d546db5492eaea4b265113b",
+      "css": "sorting-arrow-desc",
+      "code": 59396,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M91.5 592.2C96.9 592.2 102 594.3 105.9 598.2L367.1 859.4 367.1 91.8C367.1 80.6 376.3 71.4 387.6 71.4 398.8 71.4 408 80.6 408 91.8L408 859.4 669.3 598.2C677.2 590.2 690.2 590.2 698.2 598.2 706.1 606.2 706.1 619.1 698.2 627.1L402.1 923.2C401.1 924.1 400 925 398.9 925.7L397.8 926.5 395.8 927.6 393.7 928.2 392 928.2C389.3 928.7 386.6 928.7 384 928.2L382.3 928.2 380.2 927.6 378.3 926.5 376.6 925.6C375.5 924.9 374.4 924 373.5 923.1L77.4 627C71.6 621.2 69.9 612.5 72.9 604.9 76 597.3 83.3 592.3 91.5 592.2Z",
+        "width": 786
+      },
+      "search": [
+        "sorting-arrow-icon"
+      ]
     }
   ]
 }
diff --git a/fonts/fontello.eot b/fonts/fontello.eot
diff --git a/fonts/fontello.svg b/fonts/fontello.svg
diff --git a/fonts/fontello.ttf b/fonts/fontello.ttf
diff --git a/fonts/fontello.woff b/fonts/fontello.woff
diff --git a/fonts/fontello.woff2 b/fonts/fontello.woff2
diff --git a/molecules/_dropdown.scss b/molecules/_dropdown.scss
@@ -18,7 +18,7 @@ $dropdown-background-color-accent: $earl-gray !default;
   top: 100%;
   right: 0;
   width: $width;
-  margin-top: $space-xs;
+  margin-top: $space-s;
   height: 0;
   display: none;
   background-color: $background-color;
@@ -104,7 +104,7 @@ $dropdown-background-color-accent: $earl-gray !default;
   position: absolute;
   width: rem(10px);
   height: rem(10px);
-  bottom: rem(-13px);
+  bottom: rem(-17px);
   left: rem(20px);
   background: linear-gradient(-45deg, rgba($container-background-color, 0) 50%, $container-background-color 50%);
   transform: rotate(45deg);

diff --git a/utils/variables/_basics.scss b/utils/variables/_basics.scss
@@ -1,18 +1,19 @@
-$base-spacing: $space-m; // 16px
+$base-spacing: $space-m !default; // 16px
 
 $primary-color: $heaven !default;
 $secondary-color: $earl-gray !default;
 
-$base-font-family: 'acumin-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$base-font-size: 1rem; // 16px
-$base-line-height: 1.5rem; // 24px
-$base-font-color: $abbey;
+$base-font-family: 'objektiv-mk1', 'acumin-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
+$base-font-size: 1rem !default; // 16px
+$base-line-height: 1.5rem !default; // 24px
+$base-font-color: $abbey !default;
 
 // @todo is there a border color we always use?
-$base-border-color: $black;
-$base-border: 1px solid $base-border-color;
-$base-border-radius: 3px;
+$base-border-color: $black !default;
+$base-border: 1px solid $base-border-color !default;
+$base-border-radius: 3px !default;
 
 // @todo typo variables like font size, line height, and so on has to be defined and reimplemented
-$font-size-small: 0.8125rem; // 13px
-$font-size-large: 1.5rem; // 24px
+$font-size-tiny: 0.6875rem !default; // 11px
+$font-size-small: 0.8125rem !default; // 13px
+$font-size-large: 1.5rem !default; // 24px