gent_styleguide 6.0.17 → 7.0.0

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

@@ -1,233 +1,6 @@
-////
-///
-/// This file defines the bulk of all button styling.
-///
-/// @group buttons
-/// @author Gert-Jan Meire
-///
-////
-
-///
-/// Button - small variant.
-///
-/// @since 3.0.0
-/// @group buttons
-/// @access public
-/// @author Gert-Jan Meire
-///
-@mixin button-small {
-  @include medium-text();
-  padding: 4px 10px;
-  line-height: 175%;
-}
-
-///
-/// Button - medium variant.
-///
-/// @since 3.0.0
-/// @group buttons
-/// @access public
-/// @author Gert-Jan Meire
-///
-@mixin button-medium {
-  @include medium-text();
-  line-height: 175%;
-}
-
-///
-/// Button - large variant.
-///
-/// @since 3.0.0
-/// @group buttons
-/// @access public
-/// @author Gert-Jan Meire
-///
-@mixin button-large {
-  @include large-text();
-  padding: 10px 20px;
-  line-height: 177.778%;
-
-  &::before {
-    font-size: 1.5rem;
-  }
-}
-
-
-///
-/// Button - extra large variant.
-///
-/// @since 5.0.20
-/// @group buttons
-/// @access public
-/// @author Thomas De Vriese
-///
-@mixin button-extra-large {
-  @include large-text();
-
-  padding: 25px 26px;
-  line-height: 177.778%;
-
-  &::before {
-    font-size: 1.5rem;
-  }
-}
-
-///
-/// Button - disabled variant.
-///
-/// @since 3.0.0
-/// @group buttons
-/// @access public
-/// @author Gert-Jan Meire
-/// @require color
-///
-@mixin button-disabled {
-  [class*='cs--'] & {
-    border: 0;
-    background-color: color('gray', -5);
-    background-image: none;
-    color: color('gray', -2);
-
-    &:hover {
-      background-color: color('gray', -5);
-      color: color('gray', -2);
-      cursor: not-allowed;
-    }
-  }
-}
-
-///
-/// General button styling.
-///
-/// @since 3.0.0
-/// @group buttons
-/// @access public
-/// @author Gert-Jan Meire
-///
-@mixin button {
-  @include button-medium; // Default.
-  @include semi-bold-text;
-
-  padding: 8px 15px;
-  font-family: $default-font-family;
-  text-align: center;
-  cursor: pointer;
-
-  &:disabled {
-    @include button-disabled;
-  }
-
-  &.button-small {
-    @include button-small;
-  }
-
-  &.button-medium {
-    @include button-medium;
-  }
-
-  &.button-large {
-    @include button-large;
-  }
-
-  &.button-extra-large {
-    @include button-extra-large;
-  }
-
-  &.button-block {
-    @include button-block;
-  }
-
-  &[class*="icon-"] {
-    @include button-icon;
-
-    &.icon-left {
-      @include button-icon-left;
-    }
-  }
-}
-
-///
-/// 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.
-///
-/// @since 3.0.0
-/// @group buttons
-/// @access public
-/// @author Gert-Jan Meire
-///
-@mixin button-block {
-  display: inline-block;
-  width: 100%;
-}
-
-///
-/// Define a button with an icon.
-///
-/// @since 3.0.0
-/// @group buttons
-/// @access public
-/// @author Gert-Jan Meire
-///
-@mixin button-icon {
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-  text-align: left;
-
-  // Padding fix specificly for IE11.
-  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
-    padding: .3em .8em 0 1.2em;
-  }
-
-  &::before {
-    order: 1;
-    margin-left: 8px;
-    float: right; // Fix for IE11 flex order property.
-    font-size: 1.2rem;
-  }
-}
-
-///
-/// Define a button with an icon on the left side.
-///
-
-@mixin button-icon-left {
-  &::before {
-    order: unset;
-    margin-right: 8px;
-    margin-left: 0;
-    // Fix for IE11 flex order property.
-    float: left;
-  }
-}
-
-.button,
-input[type="button"] {
-  @include button;
-  @include button-hover;
-
-  -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
-}
-
-input[type="submit"],
-button[type="submit"] {
-  @extend %button-secondary;
-}
+@use 'button-styling';
+@use 'css/button-alert';
+@use 'css/button-primary';
+@use 'css/button-secondary';
+@use 'css/button-secondary-alert';
+@use 'css/button-success';

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

@@ -1,3 +1,8 @@
+@use '../button-styling' as *;
+@use '../../../00-settings/colors' as *;
+@use '../../../00-mixins/mixins' as *;
+@use '../../../11-base/fonts/icons' as *;
+
 ///
 /// Alert button type.
 ///
@@ -10,12 +15,15 @@
 .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));
+    $theme-color: coloring('red', 2);
+    background-image: linear-gradient(0, $theme-color, $theme-color);
   };
 
-  border: 0;
-  background-color: color('red', 1);
-  color: color('white');
+  & {
+    border: 0;
+    background-color: coloring('red', 1);
+    color: coloring('white');
+  }
 
   &:not([class*="icon-"]) {
     @include icon(lightning);
@@ -26,14 +34,14 @@
  }
 
   &:focus {
-    border-color: color('red', 2);
-    background-color: color('red', 2);
-    color: color('white');
+    border-color: coloring('red', 2);
+    background-color: coloring('red', 2);
+    color: coloring('white');
   }
 
   &:active {
-    border-color: color('red', 3);
-    background-color: color('red', 3);
-    color: color('white');
+    border-color: coloring('red', 3);
+    background-color: coloring('red', 3);
+    color: coloring('white');
   }
 }

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

@@ -1,3 +1,6 @@
+@use '../button-styling' as *;
+@use '../../../00-mixins/mixins' as *;
+
 ///
 /// Primary button type.
 ///
@@ -6,20 +9,23 @@
 ///
 %button-primary,
 .button-primary {
-  @include theme('background-color', 'button-primary-background', 'button-primary-background');
-  @include theme('color', 'color-secondary', 'button-primary-color');
-  @include theme-content('color-zero', 'button-primary-hover-background') {
+  @include theme('background-color', 'button-primary-background');
+  @include theme('color', 'button-primary-color');
+  @include theme-content('button-primary-background', 'button-primary-hover-background') {
     background-image: linear-gradient(0, $theme-color, $theme-color);
   };
-  border: 0;
+
+  & {
+    border: 0;
+  }
 
   &:focus {
-    @include theme('background-color', 'color-primary--darken-1', 'button-primary-hover-background');
-    @include theme('color', 'color-secondary', 'button-primary-hover-color');
+    @include theme('background-color', 'button-primary-hover-background');
+    @include theme('color', 'button-primary-hover-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('background-color', 'button-primary-active-background');
+    @include theme('color', 'button-primary-active-color');
   }
 }

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

@@ -1,3 +1,7 @@
+@use '../button-styling' as *;
+@use '../../../00-settings/colors' as *;
+@use '../../../00-mixins/mixins' as *;
+
 ///
 /// Alert button type.
 ///
@@ -10,12 +14,15 @@
 .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));
+    $theme-color: coloring('red', -5);
+    background-image: linear-gradient(0, $theme-color, $theme-color);
   };
 
-  border: 2px solid color('red', -2);
-  background-color: color('white');
-  color: color('red', 1);
+  & {
+    border: 2px solid coloring('red', -2);
+    background-color: coloring('white');
+    color: coloring('red', 1);
+  }
 
   &.button-block {
     @include button-icon;
@@ -23,14 +30,14 @@
 
   &:hover,
   &:focus {
-    border-color: color('red', -1);
-    color: color('red', 2);
+    border-color: coloring('red', -1);
+    color: coloring('red', 2);
   }
 
   &:active {
-    border-color: color('red', -1);
-    background-color: color('red', -4);
+    border-color: coloring('red', -1);
+    background-color: coloring('red', -4);
     background-image: none;
-    color: color('red', 3);
+    color: coloring('red', 3);
   }
 }

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

@@ -1,3 +1,6 @@
+@use '../button-styling' as *;
+@use '../../../00-mixins/mixins' as *;
+
 ///
 /// Secondary button type.
 ///
@@ -7,20 +10,23 @@
 ///
 %button-secondary,
 .button-secondary {
-  @include theme('background-color', 'color-tertiary', 'button-secondary-background');
-  @include theme('color', 'color-primary', 'button-secondary-color');
-  @include theme-content('color-tertiary', 'button-secondary-hover-background') {
+  @include theme('background-color', 'button-secondary-background');
+  @include theme('color', 'button-secondary-color');
+  @include theme-content('button-secondary-background', 'button-secondary-hover-background') {
     background-image: linear-gradient(0, $theme-color, $theme-color);
   };
-  border: 0;
+
+  & {
+    border: 0;
+  }
 
   &:focus {
-    @include theme('background-color', 'color-tertiary--lighten-1', 'button-secondary-hover-background');
-    @include theme('color', 'color-primary', 'button-secondary-hover-color');
+    @include theme('background-color', 'button-secondary-hover-background');
+    @include theme('color', 'button-secondary-hover-color');
   }
 
   &:active {
-    @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('background-color', 'button-secondary-active-background');
+    @include theme('color', 'button-secondary-active-color');
   }
 }

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

@@ -1,3 +1,8 @@
+@use '../button-styling' as *;
+@use '../../../00-mixins/mixins' as *;
+@use '../../../00-settings/colors' as *;
+@use '../../../11-base/base' as *;
+
 ///
 /// Success button type.
 ///
@@ -9,23 +14,26 @@
 %button-success,
 .button-success {
   @include theme-content('color-tertiary', 'button-secondary-hover-background') {
-    background-image: linear-gradient(0, color('green', -5), color('green', -5));
+    $theme-color: coloring('green', -5);
+    background-image: linear-gradient(0, $theme-color, $theme-color);
   };
 
-  border: 2px solid color('green');
-  background-color: color('white');
-  color: color('green', 2);
+  & {
+    border: 2px solid coloring('green');
+    background-color: coloring('white');
+    color: coloring('green', 2);
+  }
 
   &:hover {
-    border-color: color('green');
-    color: color('green', 2);
+    border-color: coloring('green');
+    color: coloring('green', 2);
   }
 
   &:active,
   &:focus {
-    border-color: color('green');
-    background-color: color('green', -4);
+    border-color: coloring('green');
+    background-color: coloring('green', -4);
     background-image: none;
-    color: color('green', 2);
+    color: coloring('green', 2);
   }
 }

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

@@ -1,3 +1,7 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../11-base/fonts/icons' as *;
+
 .field-message {
   @include theme('color', 'color-zero', 'message-text-color');
   @include theme('background-color', 'color-info-light', 'info-message-background');
@@ -84,7 +88,9 @@
     @include theme('background-color', 'color-success-light', 'success-message-background');
     @include theme('border-color', 'color-success', 'success-message-icon-color');
 
-    padding-left: 58px;
+    & {
+      padding-left: 58px;
+    }
 
     &::before {
       @include theme('color', 'color-success', 'success-message-icon-color');
@@ -100,7 +106,9 @@
     @include theme('background-color', 'color-error-light', 'error-message-background');
     @include theme('border-color', 'color-error', 'error-message-icon-color');
 
-    padding-left: 58px;
+    & {
+      padding-left: 58px;
+    }
 
     &::before {
       @include theme('color', 'color-error', 'error-message-icon-color');

package/build/styleguide/sass/21-atoms/fieldset/_fieldset.scss

@@ -1,9 +1,14 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 .fieldset-wrapper fieldset,
 fieldset {
   @include theme('border-color', 'color-primary', 'fieldset-border-color');
 
-  max-width: 820px;
-  margin-bottom: 24px;
+  & {
+    max-width: 820px;
+    margin-bottom: 24px;
+  }
 
   .form-item {
     margin-bottom: 16px;
@@ -37,8 +42,10 @@ fieldset {
     .label-optional {
       @include optional-label();
 
-      position: relative;
-      z-index: 2;
+      & {
+        position: relative;
+        z-index: 2;
+      }
     }
 
     + .field-message,
@@ -61,16 +68,20 @@ fieldset {
       &::before {
         @include theme('background-color', 'color-zero', 'fieldset-legend-background-color');
 
-        height: 2px;
+        & {
+          height: 2px;
+        }
       }
 
       .legend-title {
-        @include semi-bold-text;
-        @include medium-text;
         @include theme('color', 'color-none', 'fieldset-legend-color');
         @include theme('background-color', 'color-primary', 'fieldset-legend-background-color');
 
-        padding: 1px 10px;
+        & {
+          @include semi-bold-text;
+          @include medium-text;
+          padding: 1px 10px;
+        }
       }
     }
   }
@@ -80,8 +91,10 @@ fieldset {
     fieldset:not(.webform-type-radios):not(.webform-type-checkboxes):not(.webform-type-webform-radios-other):not(.webform-type-webform-checkboxes-other) {
       @include theme('border-color', 'color-zero', 'inner-fieldset-border-color');
 
-      padding: 20px 20px 12px;
-      border: 1px dashed;
+      & {
+        padding: 20px 20px 12px;
+        border: 1px dashed;
+      }
 
       legend {
         display: flex;
@@ -92,15 +105,19 @@ fieldset {
           @include theme('background-color', 'color-none', 'inner-fieldset-legend-background-color');
           @include theme('border-color', 'color-zero', 'inner-fieldset-border-color');
 
-          height: 1px;
-          border-bottom: 1px dashed;
+          & {
+            height: 1px;
+            border-bottom: 1px dashed;
+          }
         }
 
         .legend-title {
           @include theme('color', 'color-zero', 'inner-fieldset-legend-color');
           @include theme('background-color', 'color-none', 'inner-fieldset-legend-background-color');
 
-          padding: 1px 10px;
+          & {
+            padding: 1px 10px;
+          }
         }
       }
     }
@@ -113,7 +130,9 @@ fieldset {
     legend {
       @include label;
 
-      max-width: 410px;
+      & {
+        max-width: 410px;
+      }
 
       &::before {
         display: none;
@@ -123,7 +142,9 @@ fieldset {
         @include theme('background-color', 'color-none');
         @include theme('color', 'color-primary');
 
-        padding-left: 0;
+        & {
+          padding-left: 0;
+        }
       }
     }
   }

package/build/styleguide/sass/21-atoms/figcaption/_figcaption.scss

@@ -1,3 +1,6 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 figcaption {
   @include accolade();
   @include medium-text;

package/build/styleguide/sass/21-atoms/file/_file.scss

@@ -1,3 +1,8 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../21-atoms/button/button-styling' as *;
+@use '../../21-atoms/button/css/button-secondary';
+
 .file {
   display: inline-flex;
   position: relative;

package/build/styleguide/sass/21-atoms/form-label/_form-label.scss

@@ -1,9 +1,14 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 label {
   @include label();
 
   .label-optional {
     @include optional-label();
 
-    margin: 0 0 3px 5px;
+    & {
+      margin: 0 0 3px 5px;
+    }
   }
 }