gent_styleguide 6.0.0-alpha2 → 6.0.0-alpha21

package/build/styleguide/sass/11-base/forms/_forms.scss

@@ -6,7 +6,7 @@
 ///
 ////
 
-$field-icon-position: no-repeat right .75rem center;
+$field-icon-position: no-repeat right .75rem top .4rem;
 $field-icon-padding: 2.5rem;
 
 ///
@@ -16,36 +16,18 @@ $field-icon-padding: 2.5rem;
 /// @group theming
 /// @access public
 /// @author Gert-Jan Meire
-/// @require $border-radius
 /// @require color
 /// @require svg-icon
 /// @require svg-url
-/// @require border-radius
 ///
 @mixin field-base {
-  @include theme(
-    "border-color",
-    "color-tertiary--lighten-2",
-    "fields-border-color"
-  );
-  @include theme(
-    "background",
-    "color-tertiary--lighten-6",
-    "fields-background"
-  );
-  @include theme("color", "color-tertiary", "fields-color");
+  @include theme("border-color", "color-zero--lighten-2", "fields-border-color");
+  @include theme("background", "color-none", "fields-background");
+  @include theme("color", "color-zero", "fields-color");
 
   &:focus {
-    @include theme(
-      "border-color",
-      "color-primary--lighten-2",
-      "fields-border-focus-color"
-    );
-    @include theme(
-      "background",
-      "color-primary--lighten-5",
-      "fields-focus-background"
-    );
+    @include theme("border-color", "color-zero", "fields-border-focus-color");
+    @include theme("background", "color-none", "fields-focus-background");
 
     border: 1px solid;
   }
@@ -53,12 +35,12 @@ $field-icon-padding: 2.5rem;
   &:disabled {
     padding-right: $field-icon-padding;
     border: 0;
-    background: color("dark-gray", -5) $field-icon-position;
+    background: color("gray", -5) $field-icon-position;
     background-image: svg-as-background(
       "lock-closed",
-      color("dark-gray", -2),
-      20,
-      20
+      color("gray", -2),
+      24,
+      24
     );
     cursor: not-allowed;
   }
@@ -66,7 +48,7 @@ $field-icon-padding: 2.5rem;
   &.success {
     padding-right: $field-icon-padding;
     border: 1px solid color("green");
-    background: color("green", -6) $field-icon-position;
+    background: color("green-pastel", -4) $field-icon-position;
     background-image: svg-as-background(
       "checkmark-circle",
       color("green"),
@@ -76,7 +58,7 @@ $field-icon-padding: 2.5rem;
 
     &:focus {
       border-color: color("green");
-      background: color("green", -6) $field-icon-position;
+      background: color("green-pastel", -4) $field-icon-position;
       background-image: svg-as-background(
         "checkmark-circle",
         color("green"),
@@ -112,7 +94,7 @@ $field-icon-padding: 2.5rem;
   &::-webkit-input-placeholder { // sass-lint:disable-line no-vendor-prefixes
     @include theme(
       "color",
-      "color-tertiary--lighten-1",
+      "color-zero--lighten-2",
       "fields-placeholder-color"
     );
     font-style: italic;
@@ -122,7 +104,7 @@ $field-icon-padding: 2.5rem;
   &:-moz-placeholder { // sass-lint:disable-line no-vendor-prefixes
     @include theme(
       "color",
-      "color-tertiary--lighten-1",
+      "color-zero--lighten-2",
       "fields-placeholder-color"
     );
     font-style: italic;
@@ -132,7 +114,7 @@ $field-icon-padding: 2.5rem;
   &::-moz-placeholder { // sass-lint:disable-line no-vendor-prefixes
     @include theme(
       "color",
-      "color-tertiary--lighten-1",
+      "color-zero--lighten-2",
       "fields-placeholder-color"
     );
     font-style: italic;
@@ -142,7 +124,7 @@ $field-icon-padding: 2.5rem;
   &:-ms-input-placeholder { // sass-lint:disable-line no-vendor-prefixes
     @include theme(
       "color",
-      "color-tertiary--lighten-1",
+      "color-zero--lighten-2",
       "fields-placeholder-color"
     );
     font-style: italic;
@@ -150,17 +132,16 @@ $field-icon-padding: 2.5rem;
   }
 
   &::placeholder {
-    @include theme("color", "color-tertiary", "fields-placeholder-color");
+    @include theme("color", "color-zero--lighten-2", "fields-placeholder-color");
     font-style: italic;
     font-weight: normal;
   }
 
   display: block;
   width: 100%;
-  height: 2.4rem;
+  height: 2.2rem;
   padding: 0 .8rem;
   border: 1px solid;
-  border-radius: border-radius("radius-1");
   font-family: $default-font-family;
   font-size: .8rem;
   font-weight: normal;
@@ -191,12 +172,13 @@ $field-icon-padding: 2.5rem;
     left: 0;
     padding-left: 1.4rem;
     font-weight: normal;
-    line-height: 1.2rem;
+    line-height: 1.4rem;
     overflow: unset;
 
     &::before,
     &::after {
       position: absolute;
+      top: .15rem;
       content: "";
     }
 
@@ -205,9 +187,7 @@ $field-icon-padding: 2.5rem;
       left: 0;
       width: 1rem;
       height: 1rem;
-      border: 1px solid;
-      border-radius: border-radius("radius-1");
-      content: "";
+      border: 2px solid;
     }
 
     &::after {
@@ -220,12 +200,12 @@ $field-icon-padding: 2.5rem;
       &::before {
         @include theme(
           "background-color",
-          "color-tertiary--lighten-6",
+          "color-none",
           "checkbox-background-color"
         );
         @include theme(
           "border-color",
-          "color-tertiary--lighten-2",
+          "color-zero--lighten-2",
           "checkbox-border-color"
         );
       }
@@ -244,12 +224,12 @@ $field-icon-padding: 2.5rem;
       &::before {
         @include theme(
           "background-color",
-          "color-tertiary--lighten-6",
+          "color-none",
           "radio-background-color"
         );
         @include theme(
           "border-color",
-          "color-tertiary--lighten-2",
+          "color-zero--lighten-2",
           "radio-border-color"
         );
 
@@ -275,7 +255,7 @@ $field-icon-padding: 2.5rem;
     // Styling of the label.
     //
     + label {
-      @include theme("color", "color-tertiary", "label-color");
+      @include theme("color", "color-zero", "label-color");
 
       position: relative;
 
@@ -304,24 +284,27 @@ $field-icon-padding: 2.5rem;
     //
     &:disabled {
       + label {
+        color: color('gray', -3);
         font-weight: normal !important; // sass-lint:disable-line no-important
         cursor: not-allowed;
 
         &::before {
           border-color: color(
-            "dark-gray",
-            -4
+            "gray",
+            -5
           ) !important; // sass-lint:disable-line no-important
           background: color(
-            "dark-gray",
-            -4
+            "gray",
+            -5
           ) !important; // sass-lint:disable-line no-important
         }
 
         &::after {
           color: color(
-            "dark-gray"
+            "gray",
+            -2
           ) !important; // sass-lint:disable-line no-important
+
         }
       }
     }
@@ -334,12 +317,11 @@ $field-icon-padding: 2.5rem;
       &:checked {
         // Show checkmark on checked.
         + label {
-          @include icon("checkmark", "after");
-
-          @include bold-text;
+          @include icon("checkmark-checkbox", "after");
 
           &::after {
-            font-size: 1.2rem;
+            padding-left: .05rem;
+            font-size: 1.1rem;
             line-height: 1;
           }
         }
@@ -347,18 +329,18 @@ $field-icon-padding: 2.5rem;
         + label::before {
           @include theme(
             "background-color",
-            "color-tertiary--lighten-5",
+            "color-none",
             "checkbox-background-color-checked"
           );
           @include theme(
             "border-color",
-            "color-tertiary",
+            "color-primary",
             "checkbox-border-color-checked"
           );
         }
 
         + label::after {
-          @include theme("color", "color-tertiary", "checkbox-checkmark-color");
+          @include theme("color", "color-primary", "checkbox-checkmark-color");
         }
       }
     }
@@ -369,28 +351,34 @@ $field-icon-padding: 2.5rem;
     @if $type == "radio" {
       // Checked state.
       &:checked {
-        // Show checkmark on checked.
-        + label {
-          @include bold-text;
-        }
-
         + label::before {
           @include theme(
             "background-color",
-            "color-tertiary--lighten-5",
+            "color-none",
             "radio-background-color-checked"
           );
           @include theme(
             "border-color",
-            "color-tertiary",
+            "color-primary",
             "radio-border-color-checked"
           );
         }
 
         + label::after {
-          @include theme("background-color", "color-tertiary", "radio-checkmark-color");
+          @include theme("background-color", "color-primary", "radio-checkmark-color");
           content: "";
         }
+
+        &:disabled {
+          + label {
+            &::after {
+              background-color: color(
+                "gray",
+                -2
+              ) !important; // sass-lint:disable-line no-important
+            }
+          }
+        }
       }
     }
   }

package/build/styleguide/sass/21-atoms/button/_button.scss

@@ -17,9 +17,6 @@
 ///
 @mixin button-small {
   @include small-text;
-
-  min-height: 1.9rem;
-  letter-spacing: .02em;
 }
 
 ///
@@ -33,8 +30,7 @@
 @mixin button-medium {
   @include medium-text;
 
-  min-height: 2.2rem;
-  letter-spacing: .025em;
+  padding: 10px 15px;
 }
 
 ///
@@ -48,8 +44,11 @@
 @mixin button-large {
   @include large-text;
 
-  min-height: 2.4rem;
-  letter-spacing: .03em;
+  padding: 10px 20px;
+
+  &::before {
+    font-size: .9rem;
+  }
 }
 
 
@@ -64,10 +63,12 @@
 @mixin button-extra-large {
   @include extra-large-text;
 
-  min-height: 3.6rem;
-  padding: 1.2em 3.6em;
-  letter-spacing: .03em;
+  padding: 10px 26px;
   line-height: 1.7;
+
+  &::before {
+    font-size: 1.44rem;
+  }
 }
 
 ///
@@ -83,6 +84,7 @@
   [class*='cs--'] & {
     border: 0;
     background-color: color('gray', -5);
+    background-image: none;
     color: color('gray', -2);
 
     &:hover {
@@ -105,9 +107,7 @@
   @include button-medium; // Default.
   @include bold-text;
 
-  padding: 0 2.6em;
-  transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out;
-  border: 2px solid;
+  padding: 10px;
   font-family: $default-font-family;
   text-align: center;
   cursor: pointer;
@@ -145,6 +145,24 @@
   }
 }
 
+///
+/// Defines hover behavior for a button.
+///
+/// @since 6.0.0
+/// @group buttons
+/// @access public
+/// @author Lennart Van Vaerenbergh
+///
+@mixin button-hover {
+  transition: .3s;
+  background-repeat: no-repeat;
+  background-size: 0 100%;
+
+  &:hover {
+    background-size: 100% 100%;
+  }
+}
+
 ///
 /// Makes a button display block instead of inline.
 ///
@@ -171,8 +189,8 @@
   position: relative;
   align-items: center;
   justify-content: space-between;
-  padding: 0 .8em 0 1.2em;
-  line-height: 1.8em;
+  padding: 6px 10px;
+  line-height: 1.4rem;
   text-align: left;
 
   // Padding fix specificly for IE11.
@@ -183,20 +201,9 @@
 
   &::before {
     order: 1;
-    margin-left: .5rem;
-    // Fix for IE11 flex order property.
-    float: right;
-    font-size: 1.8em;
-
-    // Font-size specificly for IE11.
-    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
-      font-size: 1.2rem;
-    }
-  }
-
-  &::after {
-    padding-right: .2rem;
-    content: '';
+    margin-left: 8px;
+    float: right; // Fix for IE11 flex order property.
+    line-height: 1.2rem;
   }
 }
 
@@ -207,18 +214,18 @@
 @mixin button-icon-left {
   &::before {
     order: unset;
-    margin-right: .5rem;
+    margin-right: 8px;
     margin-left: 0;
     // Fix for IE11 flex order property.
     float: left;
   }
 }
 
-
 .button,
 input[type="button"],
 input[type="submit"] {
   @include button;
+  @include button-hover;
 
   -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
 }

package/build/styleguide/sass/21-atoms/button/css/_button-alert.scss

@@ -9,8 +9,11 @@
 %button-alert,
 .button-alert {
   @include button-icon;
+  @include theme-content('color-tertiary', 'button-secondary-hover-background') {
+    background-image: linear-gradient(0, color('red', 2), color('red', 2));
+  };
 
-  border-color: color('red', 1);
+  border: 0;
   background-color: color('red', 1);
   color: color('white');
 
@@ -22,7 +25,6 @@
     @include button-icon;
  }
 
-  &:hover,
   &:focus {
     border-color: color('red', 2);
     background-color: color('red', 2);

package/build/styleguide/sass/21-atoms/button/css/_button-primary.scss

@@ -8,18 +8,18 @@
 .button-primary {
   @include theme('background-color', 'button-primary-background', 'button-primary-background');
   @include theme('color', 'color-secondary', 'button-primary-color');
-  @include theme('border-color', 'color-primary', 'button-primary-border-color');
+  @include theme-content('color-zero', 'button-primary-hover-background') {
+    background-image: linear-gradient(0, $theme-color, $theme-color);
+  };
+  border: 0;
 
-  &:hover,
   &:focus {
     @include theme('background-color', 'color-primary--darken-1', 'button-primary-hover-background');
     @include theme('color', 'color-secondary', 'button-primary-hover-color');
-    @include theme('border-color', 'color-primary--darken-1', 'button-primary-hover-border-color');
   }
 
   &:active {
     @include theme('background-color', 'color-primary--darken-3', 'button-primary-active-background');
     @include theme('color', 'color-secondary', 'button-primary-active-color');
-    @include theme('border-color', 'color-primary--darken-3', 'button-primary-active-border-color');
   }
 }

package/build/styleguide/sass/21-atoms/button/css/_button-secondary-alert.scss

@@ -9,8 +9,11 @@
 %button-alert,
 .button-secondary-alert {
   @include button-icon;
+  @include theme-content('color-tertiary', 'button-secondary-hover-background') {
+    background-image: linear-gradient(0, color('red', -5), color('red', -5));
+  };
 
-  border-color: color('red', -2);
+  border: 2px solid color('red', -2);
   background-color: color('white');
   color: color('red', 1);
 
@@ -21,13 +24,13 @@
   &:hover,
   &:focus {
     border-color: color('red', -1);
-    background-color: color('red', -5);
     color: color('red', 2);
   }
 
   &:active {
     border-color: color('red', -1);
     background-color: color('red', -4);
+    background-image: none;
     color: color('red', 3);
   }
 }

package/build/styleguide/sass/21-atoms/button/css/_button-secondary.scss

@@ -7,20 +7,20 @@
 ///
 %button-secondary,
 .button-secondary {
-  @include theme('background-color', 'color-secondary', 'button-secondary-background');
+  @include theme('background-color', 'color-tertiary', 'button-secondary-background');
   @include theme('color', 'color-primary', 'button-secondary-color');
-  @include theme('border-color', 'color-primary--lighten-1', 'button-secondary-border-color');
+  @include theme-content('color-tertiary', 'button-secondary-hover-background') {
+    background-image: linear-gradient(0, $theme-color, $theme-color);
+  };
+  border: 0;
 
-  &:hover,
   &:focus {
-    @include theme('background-color', 'color-primary--lighten-5', 'button-secondary-hover-background');
+    @include theme('background-color', 'color-tertiary--lighten-1', 'button-secondary-hover-background');
     @include theme('color', 'color-primary', 'button-secondary-hover-color');
-    @include theme('border-color', 'color-primary--lighten-2', 'button-secondary-hover-border-color');
   }
 
   &:active {
-    @include theme('background-color', 'color-primary--lighten-3', 'button-secondary-active-background');
+    @include theme('background-color', 'color-tertiary--lighten-1', 'button-secondary-active-background');
     @include theme('color', 'color-primary--darken-3', 'button-secondary-active-color');
-    @include theme('border-color', 'color-primary', 'button-secondary-active-border-color');
   }
 }

package/build/styleguide/sass/21-atoms/button/css/_button-success.scss

@@ -8,13 +8,16 @@
 ///
 %button-success,
 .button-success {
-  border-color: color('green');
+  @include theme-content('color-tertiary', 'button-secondary-hover-background') {
+    background-image: linear-gradient(0, color('green', -5), color('green', -5));
+  };
+
+  border: 2px solid color('green');
   background-color: color('white');
   color: color('green', 2);
 
   &:hover {
     border-color: color('green');
-    background-color: color('green', -5);
     color: color('green', 2);
   }
 
@@ -22,6 +25,7 @@
   &:focus {
     border-color: color('green');
     background-color: color('green', -4);
+    background-image: none;
     color: color('green', 2);
   }
 }

package/build/styleguide/sass/21-atoms/field-message/_field-message.scss

@@ -1,6 +1,7 @@
 .field-message {
-  @include theme('color', 'color-tertiary--lighten-1', 'field-messages-color');
-  @include theme('background-color', 'color-info--lighten-5', 'field-messages-info-background');
+  @include theme('color', 'color-zero', 'message-text-color');
+  @include theme('background-color', 'color-info-light', 'info-message-background');
+  @include theme('border-color', 'color-info', 'info-message-icon-color');
 
   $field-message-icon-size: 1.5rem;
   $field-message-icon-margin: 1.5rem;
@@ -12,9 +13,8 @@
   min-height: 2.5rem;
   margin-top: .2rem;
   padding: 1.7rem 1.2rem .7rem;
-  border-radius: border-radius('radius-1');
-  font-size: .8rem;
-  overflow: hidden;
+  border-bottom: 3px solid;
+  font-size: .7rem;
 
   :nth-last-child(2) {
     margin-bottom: 0;
@@ -28,9 +28,7 @@
     width: $field-message-icon-size;
     height: $field-message-icon-size;
     margin: auto $field-message-icon-margin auto auto;
-    border-radius: 100%;
-    background-color: color('white');
-    font-size: 1.1rem;
+    font-size: 1.3rem;
     line-height: $field-message-icon-size;
     text-align: center;
   }
@@ -51,41 +49,39 @@
   }
 
   a {
-    @include theme('color', 'color-tertiary--lighten-1', 'field-messages-color');
-    @include link-background('color-tertiary', 'color-primary--lighten-3', 'field-messages-link-border-color', 'link-background-color');
-
-    &:hover {
-      @include theme('color', 'color-tertiary', 'field-messages-link-hover-color');
-    }
+    @include theme('color', 'color-zero', 'field-messages-color');
+    @include link-background('color-zero', 'link-hover-background');
   }
 
   &.success {
-    @include icon('checkmark');
-    @include theme('background-color', 'color-success--lighten-4', 'field-description-background');
+    @include icon('checkmark-circle');
+    @include theme('background-color', 'color-success-light', 'success-message-background');
+    @include theme('border-color', 'color-success', 'success-message-icon-color');
 
     padding-left: 2.9rem;
 
     &::before {
-      @include theme('color', 'color-success', 'field-description-icon');
+      @include theme('color', 'color-success', 'success-message-icon-color');
     }
 
     a {
-      @include link-background('color-tertiary', 'color-success--lighten-3', 'field-messages-link-border-color', 'field-messages-success-background-color');
+      @include link-background('color-zero', 'color-success-light--darken-1', 'success-message-link-border-color', 'success-message-link-background');
     }
   }
 
   &.error {
-    @include icon('cross');
-    @include theme('background-color', 'color-error--lighten-4', 'field-description-background');
+    @include icon('cross-circle');
+    @include theme('background-color', 'color-error-light', 'error-message-background');
+    @include theme('border-color', 'color-error', 'error-message-icon-color');
 
     padding-left: 2.9rem;
 
     &::before {
-      @include theme('color', 'color-error', 'field-description-icon');
+      @include theme('color', 'color-error', 'error-message-icon-color');
     }
 
     a {
-      @include link-background('color-tertiary', 'color-error--lighten-3', 'field-messages-link-border-color', 'field-messages-error-background-color');
+      @include link-background('color-zero', 'color-error-light--darken-1', 'error-message-link-border-color', 'error-message-link-background');
     }
   }
 }