gent_styleguide 5.0.2 → 5.0.6

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

@@ -0,0 +1,404 @@
+////
+/// This file defines general form input fields styling.
+///
+/// @group forms
+/// @author Gert-Jan Meire
+///
+////
+
+$field-icon-position: no-repeat right .75rem center;
+$field-icon-padding: 2.5rem;
+
+///
+/// The general field atom styling.
+///
+/// @since 3.0.0
+/// @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");
+
+  &:focus {
+    @include theme(
+      "border-color",
+      "color-primary--lighten-2",
+      "fields-border-focus-color"
+    );
+    @include theme(
+      "background",
+      "color-primary--lighten-5",
+      "fields-focus-background"
+    );
+
+    border: 1px solid;
+  }
+
+  &:disabled {
+    padding-right: $field-icon-padding;
+    border: 0;
+    background: color("dark-gray", -5) $field-icon-position;
+    background-image: svg-as-background(
+      "lock-closed",
+      color("dark-gray", -2),
+      20,
+      20
+    );
+    cursor: not-allowed;
+  }
+
+  &.success {
+    padding-right: $field-icon-padding;
+    border: 1px solid color("green");
+    background: color("green", -6) $field-icon-position;
+    background-image: svg-as-background(
+      "checkmark-circle",
+      color("green"),
+      26,
+      26
+    );
+
+    &:focus {
+      border-color: color("green");
+      background: color("green", -6) $field-icon-position;
+      background-image: svg-as-background(
+        "checkmark-circle",
+        color("green"),
+        26,
+        26
+      );
+    }
+  }
+
+  &.error {
+    padding-right: $field-icon-padding;
+    border: 1px solid color("red");
+    background: color("red", -6) $field-icon-position;
+    background-image: svg-as-background(
+      "exclamation-circle",
+      color("red"),
+      26,
+      26
+    );
+
+    &:focus {
+      border-color: color("red");
+      background: color("red", -6) $field-icon-position;
+      background-image: svg-as-background(
+        "exclamation-circle",
+        color("red"),
+        26,
+        26
+      );
+    }
+  }
+
+  &::-webkit-input-placeholder { // sass-lint:disable-line no-vendor-prefixes
+    @include theme(
+      "color",
+      "color-tertiary--lighten-1",
+      "fields-placeholder-color"
+    );
+    font-style: italic;
+    font-weight: normal;
+  }
+
+  &:-moz-placeholder { // sass-lint:disable-line no-vendor-prefixes
+    @include theme(
+      "color",
+      "color-tertiary--lighten-1",
+      "fields-placeholder-color"
+    );
+    font-style: italic;
+    font-weight: normal;
+  }
+
+  &::-moz-placeholder { // sass-lint:disable-line no-vendor-prefixes
+    @include theme(
+      "color",
+      "color-tertiary--lighten-1",
+      "fields-placeholder-color"
+    );
+    font-style: italic;
+    font-weight: normal;
+  }
+
+  &:-ms-input-placeholder { // sass-lint:disable-line no-vendor-prefixes
+    @include theme(
+      "color",
+      "color-tertiary--lighten-1",
+      "fields-placeholder-color"
+    );
+    font-style: italic;
+    font-weight: normal;
+  }
+
+  &::placeholder {
+    @include theme("color", "color-tertiary", "fields-placeholder-color");
+    font-style: italic;
+    font-weight: normal;
+  }
+
+  display: block;
+  width: 100%;
+  height: 2.4rem;
+  padding: 0 .8rem;
+  border: 1px solid;
+  border-radius: border-radius("radius-1");
+  font-family: $default-font-family;
+  font-size: .8rem;
+  font-weight: normal;
+  appearance: none;
+}
+
+///
+/// The base styling for choice fields.
+///   - Radio buttons.
+///   - Checkboxes.
+///
+/// @since 3.0.0
+/// @group theming
+/// @access public
+/// @author Gert-Jan Meire
+///
+@mixin choices-field-base($type) {
+  position: relative;
+  margin-bottom: .5rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-left: 1.4rem;
+    font-weight: normal;
+    line-height: 1.2rem;
+    overflow: unset;
+
+    &::before,
+    &::after {
+      position: absolute;
+      content: "";
+    }
+
+    &::before {
+      display: inline-block;
+      left: 0;
+      width: 1rem;
+      height: 1rem;
+      border: 1px solid;
+      border-radius: border-radius("radius-1");
+      content: "";
+    }
+
+    &::after {
+      display: block;
+    }
+  }
+
+  @if $type == "checkbox" {
+    label {
+      &::before {
+        @include theme(
+          "background-color",
+          "color-tertiary--lighten-6",
+          "checkbox-background-color"
+        );
+        @include theme(
+          "border-color",
+          "color-tertiary--lighten-2",
+          "checkbox-border-color"
+        );
+      }
+
+      &::after {
+        top: 0;
+        left: -.1rem;
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  @if $type == "radio" {
+    label {
+      &::before {
+        @include theme(
+          "background-color",
+          "color-tertiary--lighten-6",
+          "radio-background-color"
+        );
+        @include theme(
+          "border-color",
+          "color-tertiary--lighten-2",
+          "radio-border-color"
+        );
+
+        border-radius: border-radius("radius-4");
+      }
+
+      &::after {
+        top: .3rem;
+        left: .3rem;
+        width: .4rem;
+        height: .4rem;
+        border-radius: border-radius("radius-4");
+      }
+    }
+  }
+
+  input[type="radio"],
+  input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+
+    //
+    // Styling of the label.
+    //
+    + label {
+      @include theme("color", "color-tertiary", "label-color");
+
+      position: relative;
+
+      // Hide checkmark by default.
+      &::after {
+        content: none;
+      }
+    }
+
+    //
+    // Checkbox specific success state.
+    // Checkbox specific error state.
+    //
+    [class*="cs--"] & {
+      &.success + label::before {
+        border-color: color("green");
+      }
+
+      &.error + label::before {
+        border-color: color("red");
+      }
+    }
+
+    //
+    // Disabled state.
+    //
+    &:disabled {
+      + label {
+        font-weight: normal !important; // sass-lint:disable-line no-important
+        cursor: not-allowed;
+
+        &::before {
+          border-color: color(
+            "dark-gray",
+            -4
+          ) !important; // sass-lint:disable-line no-important
+          background: color(
+            "dark-gray",
+            -4
+          ) !important; // sass-lint:disable-line no-important
+        }
+
+        &::after {
+          color: color(
+            "dark-gray"
+          ) !important; // sass-lint:disable-line no-important
+        }
+      }
+    }
+
+    //
+    // Checkbox specific styling.
+    //
+    @if $type == "checkbox" {
+      // Checked state.
+      &:checked {
+        // Show checkmark on checked.
+        + label {
+          @include icon("checkmark", "after");
+
+          @include bold-text;
+
+          &::after {
+            font-size: 1.2rem;
+            line-height: 1;
+          }
+        }
+
+        + label::before {
+          @include theme(
+            "background-color",
+            "color-tertiary--lighten-5",
+            "checkbox-background-color-checked"
+          );
+          @include theme(
+            "border-color",
+            "color-tertiary",
+            "checkbox-border-color-checked"
+          );
+        }
+
+        + label::after {
+          @include theme("color", "color-tertiary", "checkbox-checkmark-color");
+        }
+      }
+    }
+
+    //
+    // Radio specific styling.
+    //
+    @if $type == "radio" {
+      // Checked state.
+      &:checked {
+        // Show checkmark on checked.
+        + label {
+          @include bold-text;
+        }
+
+        + label::before {
+          @include theme(
+            "background-color",
+            "color-tertiary--lighten-5",
+            "radio-background-color-checked"
+          );
+          @include theme(
+            "border-color",
+            "color-tertiary",
+            "radio-border-color-checked"
+          );
+        }
+
+        + label::after {
+          @include theme("background-color", "color-tertiary", "radio-checkmark-color");
+          content: "";
+        }
+      }
+    }
+  }
+}
+
+.form-disclaimer {
+  @include theme('color', 'color-tertiary--lighten-1', 'form-disclaimer-color');
+
+  margin: 1.2rem 0;
+  font-size: .6rem;
+}

package/build/styleguide/sass/11-base/grid/_grid.scss

@@ -0,0 +1,36 @@
+///
+/// The container to put a grid in.
+///
+/// @since 3.0.0
+/// @group grid
+/// @access public
+/// @author Gert-Jan Meire
+///
+%container,
+.container {
+  @include clearfix();
+  @include breakpoint($bp-container) {
+    width: $bp-container;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
+  padding: 0 1rem;
+  overflow: hidden;
+}
+
+///
+/// The inner container to put a grid in. This also provides the necessary
+/// padding for mobile display.
+///
+/// @since 3.0.0
+/// @group grid
+/// @access  public
+/// @author Gert-Jan Meire
+///
+%content-container,
+.content-container {
+  max-width: $bp-max-content;
+  margin: 0 auto;
+}
+

package/build/styleguide/sass/11-base/section/_section.scss

@@ -0,0 +1,10 @@
+// Generate the section specific theming for components.
+@each $theme, $colors in $themes {
+  %cs--#{$theme},
+  .cs--#{$theme} {
+    @include clearfix;
+
+    background: map-get($colors, 'section-background');
+    color: map-get($colors, 'section-text-color');
+  }
+}

package/build/styleguide/sass/21-atoms/accolade/_accolade.scss

@@ -0,0 +1,231 @@
+$span: percentage(6 / 12);
+$span-end: percentage(3 / 12);
+
+.accolade {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  max-width: $bp-max-content;
+  height: 1rem;
+  margin: 0;
+  border: 0;
+  overflow: visible;
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 1rem;
+    margin-top: 0;
+    border-top: 2px solid;
+    border-color: transparent;
+    background: color('white');
+    content: '';
+  }
+
+  &::before {
+    left: 0;
+    width: calc(#{$span});
+    border-right: 2px solid;
+    border-top-right-radius: border-radius('radius-4');
+    border-color: transparent;
+  }
+
+  &::after {
+    right: 0;
+    width: calc(100% - #{$span} - 2px);
+    border-left: 2px solid;
+    border-top-left-radius: border-radius('radius-4');
+    border-color: transparent;
+  }
+
+  //
+  // Top variants.
+  // Bottom variants.
+  //
+  &.top-left,
+  &.top-center,
+  &.top-right {
+    top: 0;
+    transform: rotate(180deg);
+  }
+
+  &.top-left,
+  &.bottom-right {
+    &::before {
+      width: calc(100% - #{$span-end} - 2px);
+    }
+
+    &::after {
+      width: calc(#{$span-end});
+    }
+  }
+
+  &.top-right,
+  &.bottom-left {
+    &::before {
+      width: calc(#{$span-end});
+    }
+
+    &::after {
+      width: calc(100% - #{$span-end} - 2px);
+    }
+  }
+
+  //
+  // Left variants.
+  // Right variants.
+  //
+  &.left-top,
+  &.left-center,
+  &.left-bottom,
+  &.right-top,
+  &.right-center,
+  &.right-bottom {
+    right: auto;
+    left: 0;
+    width: 1rem;
+    height: 100%;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 0;
+      width: 1rem;
+      height: 100%;
+      margin-top: 0;
+      border-left: 2px solid;
+      border-color: transparent;
+      background: color('white');
+      content: '';
+    }
+
+    &::before {
+      left: 0;
+      height: calc(#{$span});
+      border-left: 2px solid;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: border-radius('radius-4');
+      border-color: transparent;
+    }
+
+    &::after {
+      top: auto;
+      bottom: 0;
+      height: calc(100% - #{$span} - 2px);
+      border-left: 2px solid;
+      border-top-left-radius: 0;
+      border-top-right-radius: border-radius('radius-4');
+      border-color: transparent;
+    }
+  }
+
+  &.right-top,
+  &.right-center,
+  &.right-bottom {
+    right: 0;
+    left: auto;
+    transform: rotate(180deg);
+  }
+
+  &.left-top,
+  &.right-bottom {
+    &::before {
+      height: calc(#{$span-end});
+    }
+
+    &::after {
+      height: calc(100% - #{$span-end} - 2px);
+    }
+  }
+
+  &.left-bottom,
+  &.right-top {
+    &::before {
+      height: calc(100% - #{$span-end} - 2px);
+    }
+
+    &::after {
+      height: calc(#{$span-end});
+    }
+  }
+}
+
+
+$span-inverse: percentage(2 / 12);
+$accolade-width: 2rem;
+$accolade-height: 1rem;
+
+.accolade-inverse {
+  position: absolute;
+  width: $accolade-width;
+  height: $accolade-height;
+  background: transparent svg-as-background('accolade', color('white'), $accolade-width, $accolade-height);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+  content: '';
+
+  &.bottom-left,
+  &.bottom-center,
+  &.bottom-right {
+    bottom: 0;
+  }
+
+  &.top-left,
+  &.top-center,
+  &.top-right {
+    top: 0;
+    transform: rotate(180deg);
+  }
+
+  &.top-left,
+  &.bottom-left {
+    left: calc(#{$span-inverse});
+  }
+
+  &.top-center,
+  &.bottom-center {
+    right: 0;
+    left: 0;
+    margin: auto;
+  }
+
+  &.top-right,
+  &.bottom-right {
+    right: calc(#{$span-inverse});
+  }
+
+  &.left-top,
+  &.left-center,
+  &.left-bottom {
+    left: -($accolade-height/2);
+    transform: rotate(90deg);
+  }
+
+  &.right-top,
+  &.right-center,
+  &.right-bottom {
+    right: -($accolade-height/2);
+    transform: rotate(-90deg);
+  }
+
+  &.right-top,
+  &.left-top {
+    top: calc(#{$span-inverse});
+  }
+
+  &.right-center,
+  &.left-center {
+    top: 0;
+    bottom: 0;
+    margin: auto;
+  }
+
+  &.right-bottom,
+  &.left-bottom {
+    bottom: calc(#{$span-inverse});
+  }
+}