gent_styleguide 5.0.2 → 5.0.6

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

@@ -0,0 +1,205 @@
+////
+///
+/// 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 small-text;
+
+  min-height: 1.9rem;
+  letter-spacing: .02em;
+}
+
+///
+/// Button - medium variant.
+///
+/// @since 3.0.0
+/// @group buttons
+/// @access public
+/// @author Gert-Jan Meire
+///
+@mixin button-medium {
+  @include medium-text;
+
+  min-height: 2.2rem;
+  letter-spacing: .025em;
+}
+
+///
+/// Button - large variant.
+///
+/// @since 3.0.0
+/// @group buttons
+/// @access public
+/// @author Gert-Jan Meire
+///
+@mixin button-large {
+  @include large-text;
+
+  min-height: 2.5rem;
+  letter-spacing: .03em;
+}
+
+///
+/// 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('dark-gray', -3);
+    color: color('white');
+    box-shadow: none;
+
+    &:hover {
+      background-color: color('dark-gray', -3);
+      color: color('white');
+      box-shadow: none;
+      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 bold-text;
+
+  padding: 0 2.6em;
+  transition: background-color .2s ease-in-out, color .2s ease-in-out, box-shadow .1s ease-in-out;
+  border: 2px solid;
+  border-radius: border-radius('radius-1');
+  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-block {
+    @include button-block;
+  }
+
+  &[class*="icon-"] {
+    @include button-icon;
+
+    &.icon-left {
+      @include button-icon-left;
+    }
+  }
+}
+
+///
+/// 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;
+  padding: 0 .8em 0 1.2em;
+  line-height: 1.8em;
+  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;
+    line-height: 1.6;
+  }
+
+  &::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: '';
+  }
+}
+
+///
+/// Define a button with an icon on the left side.
+///
+
+@mixin button-icon-left {
+  &::before {
+    order: unset;
+    margin-right: .5rem;
+    margin-left: 0;
+    // Fix for IE11 flex order property.
+    float: left;
+  }
+}
+
+
+.button,
+input[type="button"],
+input[type="submit"] {
+  @include button;
+
+  -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+}

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

@@ -0,0 +1,41 @@
+///
+/// Alert button type.
+///
+/// @since 3.0.0
+/// @access public
+/// @author Gert-Jan Meire
+/// @require $box-shadow-primary
+/// @require color
+///
+%button-alert,
+.button-alert {
+  @include button-icon;
+
+  border-color: color('red', 1);
+  background-color: color('red', 1);
+  color: color('white');
+  box-shadow: $box-shadow-primary color('red', -3);
+
+  &:not([class*="icon-"]) {
+    @include icon(lightning);
+  }
+
+  &.button-block {
+    @include button-icon;
+ }
+
+  &:hover,
+  &:focus {
+    border-color: color('red', 2);
+    background-color: color('red', 2);
+    color: color('white');
+    box-shadow:  $box-shadow-primary color('red', -2);
+  }
+
+  &:active {
+    border-color: color('red', 3);
+    background-color: color('red', 3);
+    color: color('white');
+    box-shadow: none;
+  }
+}

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

@@ -0,0 +1,30 @@
+///
+/// Primary button type.
+///
+/// @since 3.0.0
+/// @access public
+/// @author Gert-Jan Meire
+///
+%button-primary,
+.button-primary {
+  @include theme('background-color', 'color-primary', 'button-primary-background');
+  @include theme('color', 'color-secondary', 'button-primary-color');
+  @include theme('box-shadow', 'color-box-shadow', 'button-primary-shadow');
+  @include theme('border-color', 'color-primary', 'button-primary-border-color');
+
+  &: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('box-shadow', 'color-box-shadow-hover', 'button-primary-hover-shadow');
+    @include theme('border-color', 'color-primary--darken-1', 'button-primary-hover-border-color');
+  }
+
+  &:active {
+    @include theme('background-color', 'color-primary--darken-3', 'button-primary-focus-background');
+    @include theme('color', 'color-secondary', 'button-primary-focus-color');
+    @include theme('border-color', 'color-primary--darken-3', 'button-primary-focus-border-color');
+
+    box-shadow: none;
+  }
+}

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

@@ -0,0 +1,28 @@
+///
+/// Secondary button type.
+///
+/// @since 3.0.0
+/// @access public
+/// @author Gert-Jan Meire
+///
+%button-secondary,
+.button-secondary {
+  @include theme('background-color', 'color-secondary', 'button-secondary-background');
+  @include theme('color', 'color-primary', 'button-secondary-color');
+  @include theme('border-color', 'color-primary--lighten-1', 'button-secondary-border-color');
+
+  &:hover,
+  &:focus {
+    @include theme('background-color', 'color-primary--lighten-5', '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-focus-background');
+    @include theme('color', 'color-primary--darken-3', 'button-secondary-focus-color');
+    @include theme('border-color', 'color-primary', 'button-secondary-focus-border-color');
+
+    box-shadow: none;
+  }
+}

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

@@ -0,0 +1,27 @@
+///
+/// Success button type.
+///
+/// @since 3.0.0
+/// @access public
+/// @author Gert-Jan Meire
+/// @require color
+///
+%button-success,
+.button-success {
+  border-color: color('green');
+  background-color: color('white');
+  color: color('green', 2);
+
+  &:hover {
+    border-color: color('green');
+    background-color: color('green', -5);
+    color: color('green', 2);
+  }
+
+  &:active,
+  &:focus {
+    border-color: color('green');
+    background-color: color('green', -4);
+    color: color('green', 2);
+  }
+}

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

@@ -0,0 +1,90 @@
+.field-message {
+  @include theme('color', 'color-tertiary--lighten-1', 'field-messages-color');
+  @include theme('background-color', 'color-info--lighten-5', 'field-messages-info-background');
+
+  $field-message-icon-size: 1.5rem;
+  $field-message-icon-margin: 1.5rem;
+
+  display: inline-block;
+  position: relative;
+  align-items: center;
+  max-width: 40rem;
+  min-height: 2.5rem;
+  padding: 1.7rem 1.2rem .7rem;
+  border-radius: border-radius('radius-1');
+  font-size: .8rem;
+  overflow: hidden;
+
+  :nth-last-child(2) {
+    margin-bottom: 0;
+  }
+
+  &::before {
+    display: block;
+    position: absolute;
+    top: 1.5rem;
+    left: .7rem;
+    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;
+    line-height: $field-message-icon-size;
+    text-align: center;
+  }
+
+  .accolade {
+    top: 0;
+    transform: rotate(180deg);
+
+    &::before {
+      left: -1px;
+      width: calc(100% - 1.5rem + 1px);
+    }
+
+    &::after {
+      right: -1px;
+      width: calc(1.5rem + 1px);
+    }
+  }
+
+  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');
+    }
+  }
+
+  &.success {
+    @include icon('checkmark');
+    @include theme('background-color', 'color-success--lighten-4', 'field-description-background');
+
+    padding-left: 2.9rem;
+
+    &::before {
+      @include theme('color', 'color-success', 'field-description-icon');
+    }
+
+    a {
+      @include link-background('color-tertiary', 'color-success--lighten-3', 'field-messages-link-border-color', 'field-messages-success-background-color');
+    }
+  }
+
+  &.error {
+    @include icon('cross');
+    @include theme('background-color', 'color-error--lighten-4', 'field-description-background');
+
+    padding-left: 2.9rem;
+
+    &::before {
+      @include theme('color', 'color-error', 'field-description-icon');
+    }
+
+    a {
+      @include link-background('color-tertiary', 'color-error--lighten-3', 'field-messages-link-border-color', 'field-messages-error-background-color');
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+.fieldset-wrapper fieldset,
+fieldset  {
+  @include theme('border-color', 'color-tertiary--lighten-2', 'fieldset-border-color');
+
+  max-width: 41rem;
+  margin-bottom: 1.2rem;
+  padding: .8rem .8rem .4rem;
+  border: 1px solid;
+  border-radius: border-radius("radius-1");
+
+  @include tablet {
+    padding: .8rem 1.2rem .4rem;
+  }
+
+  .form-item {
+    margin-bottom: .8rem;
+  }
+
+  legend {
+    @include bold-text;
+
+    padding: 0 .4rem;
+    font-size: .8rem;
+    line-height: 2;
+
+    + .field-message,
+    + .form-item > .field-message:first-child {
+      margin-top: -1rem;
+      margin-bottom: 1rem;
+    }
+  }
+
+  fieldset {
+    legend {
+      margin-left: 1.8rem;
+      padding: 0 .4rem;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+figcaption {
+  @include theme('color', 'color-tertiary--lighten-1', 'figcaption-color');
+
+  margin: .4rem 0;
+  font-size: .6rem;
+  text-align: right;
+}

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

@@ -0,0 +1,79 @@
+.file {
+  display: inline-flex;
+  position: relative;
+  flex-wrap: wrap;
+  align-items: center;
+  max-width: 100%;
+  margin: 0 -.6rem;
+  margin-top: .2rem;
+
+  .file__button {
+    @include button;
+    @include button-small;
+    @include theme('background-color', 'color-secondary', 'button-secondary-background');
+    @include theme('color', 'color-primary', 'button-secondary-color');
+    @include theme('border-color', 'color-primary--lighten-1', 'button-secondary-border-color');
+
+    max-width: 100%;
+    margin: 0 .6rem;
+    padding-top: .6rem;
+    padding-bottom: .6rem;
+    content: attr(data-text);
+  }
+
+  &::after {
+    max-width: 100%;
+    margin: .6rem;
+    color: color('dark-gray', -1);
+    font-size: .7rem;
+    font-style: italic;
+    text-overflow: ellipsis;
+    content: attr(data-file);
+    overflow: hidden;
+  }
+
+  input[type="file"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    opacity: 0;
+
+    &:disabled {
+      pointer-events: none;
+
+      + .file__button {
+        @include button-disabled;
+      }
+    }
+
+    &:hover + .file__button,
+    &:focus + .file__button,
+    &:focus-within + .file__button {
+      @include theme('background-color', 'color-primary--lighten-5', '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 + .file__button {
+      @include theme('background-color', 'color-primary--lighten-3', 'button-secondary-focus-background');
+      @include theme('color', 'color-primary--darken-3', 'button-secondary-focus-color');
+      @include theme('border-color', 'color-primary', 'button-secondary-focus-border-color');
+
+      box-shadow: none;
+    }
+
+    &:focus + .file__button {
+      @include focus-bare;
+    }
+  }
+
+  +.help-text {
+    @include theme('color', 'color-tertiary--lighten-1', 'file-size-color');
+    display: block;
+    margin-top: .4rem;
+    font-size: .6rem;
+  }
+}

package/build/styleguide/sass/21-atoms/heading/_heading.scss

@@ -0,0 +1,37 @@
+h1,
+.h1,
+%h1,
+h2,
+.h2,
+%h2,
+h3,
+.h3,
+%h3,
+h4,
+.h4,
+%h4,
+h5,
+.h5,
+%h5 {
+  @include bold-text;
+
+  margin: 0 0 .8rem;
+  font-style: normal;
+  line-height: 1.5;
+
+  button {
+    display: flex;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: inherit;
+    font-style: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    cursor: pointer;
+
+    i {
+      font-size: inherit;
+    }
+  }
+}

package/build/styleguide/sass/21-atoms/heading/css/_collection-title.scss

@@ -0,0 +1,56 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  &.collection-title {
+    @extend %h2;
+    @include theme('border-color', 'color-primary--lighten-4', 'block-title-border-color');
+
+    display: block;
+    position: relative;
+    max-width: 100%;
+    margin-bottom: 1.6rem;
+    padding-bottom: .4rem;
+    border-bottom: 2px solid;
+
+    span {
+      display: inline-block;
+      position: relative;
+      min-width: 5rem;
+      margin-bottom: -1.4rem;
+      padding: inherit;
+      padding-bottom: 1.4rem;
+      background-color: color('white');
+      font-size: inherit;
+
+      &::before,
+      &::after {
+        @include theme('border-color', 'color-primary', 'block-title-accolade-color');
+        display: block;
+        position: absolute;
+        bottom: 0;
+        height: 1rem;
+        border-width: 2px;
+        content: '';
+      }
+
+      &::before {
+        left: 0;
+        width: 2.5rem;
+        border-top-style: solid;
+        border-right-style: solid;
+        border-top-right-radius: border-radius(radius-3);
+      }
+
+      &::after {
+        right: 0;
+        width: calc(100% - 2.5rem + 2px);
+        border-top-style: solid;
+        border-left-style: solid;
+        border-top-left-radius: border-radius(radius-3);
+      }
+    }
+  }
+}

package/build/styleguide/sass/21-atoms/heading/css/_heading-1.scss

@@ -0,0 +1,11 @@
+h1,
+.h1,
+%h1 {
+  @include theme('color', 'color-primary', 'heading-1-color');
+
+  font-size: 1.6rem;
+
+  @include tablet {
+    font-size: 2.1rem;
+  }
+}

package/build/styleguide/sass/21-atoms/heading/css/_heading-2.scss

@@ -0,0 +1,7 @@
+h2,
+.h2,
+%h2 {
+  @include theme('color', 'color-tertiary', 'heading-2-color');
+
+  font-size: 1.3rem;
+}

package/build/styleguide/sass/21-atoms/heading/css/_heading-3.scss

@@ -0,0 +1,7 @@
+h3,
+.h3,
+%h3 {
+  @include theme('color', 'color-tertiary', 'heading-3-color');
+
+  font-size: 1rem;
+}

package/build/styleguide/sass/21-atoms/heading/css/_heading-4.scss

@@ -0,0 +1,7 @@
+h4,
+.h4,
+%h4 {
+  @include theme('color', 'color-tertiary', 'heading-4-color');
+
+  font-size: .9rem;
+}