gent_styleguide 5.0.2 → 5.0.6

package/build/styleguide/sass/00-mixins/link/_link.scss

@@ -0,0 +1,104 @@
+///
+///  Applies a hover animation using the background.
+///  Typically applied to elements containing text.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access public
+/// @author Helena Standaert
+///
+/// @param {string} $underline
+///   Underline color for the link.
+///
+/// @param {string} $hover [null]
+///   Background color for the link on hover.
+///
+/// @param {string} $underline-exception [null]
+///   The exception value for the underline color.
+///   This is the exception optionally used in subthemes.
+///
+/// @param {string} $hover-exception [null]
+///   The exception value for the background color.
+///   This is the exception optionally used in subthemes.
+///
+@mixin link-background($underline, $hover: null, $underline-exception: null, $hover-exception: null) {
+  @include theme('border-color', $underline, $underline-exception);
+  transition: background-image 1s;
+  border-bottom: 1px solid;
+  background-repeat: repeat-x;
+  background-position: 0 100%;
+
+  @if $hover {
+    @include theme-content($hover, $hover-exception) {
+      background-image: linear-gradient(to bottom,
+        $theme-color 0,
+        $theme-color 100%);
+    }
+    transition: background-size .2s;
+    background-size: 1px 0;
+
+    &:hover,
+    &:focus {
+      background-size: 1px 100%;
+    }
+  }
+}
+
+///
+/// Undo default link styling.
+///
+/// @since 3.0.0-beta9
+/// @group tools
+/// @access public
+/// @author Helena Standaert
+///
+@mixin reset-link-background() {
+  border-bottom: 0;
+
+  &,
+  &:focus,
+  &:hover {
+    background-image: none;
+  }
+}
+
+///
+/// Link styling with an underline on-hover
+///
+/// @since 3.0.0-beta9
+/// @group tools
+/// @access public
+/// @author Helena Standaert
+///
+/// @param {string} $active-selector [null]
+///   Selector for active elements.
+///   The 'active' state styling is applied to this selector.
+///
+@mixin link-underlined($active-selector: '.active') {
+  @include theme('color', 'color-tertiary', 'default-text-color');
+  display: inline-block;
+  font-weight: 400;
+  text-decoration: none;
+
+  &::after {
+    @include theme('color', 'color-primary', 'link-underlined-hover-color');
+    display: block;
+    position: static;
+    width: 0;
+    margin: 0 auto;
+    transition: width 100ms;
+    border-bottom: 2px solid;
+    content: '';
+    overflow: visible;
+  }
+
+  &#{$active-selector},
+  &:hover,
+  &:focus {
+    background: transparent;
+
+    &::after {
+      width: 70%;
+    }
+  }
+}

package/build/styleguide/sass/00-mixins/opening-hours/_opening-hours.scss

@@ -0,0 +1,43 @@
+// mixins
+// ===
+@mixin month-widget-mobile {
+  min-width: initial;
+  padding-right: 0;
+  padding-bottom: 6rem;
+
+  > .openinghours {
+    padding-right: 0;
+    padding-bottom: $month-day-size-mobile / 2;
+    border: 0;
+  }
+
+  .openinghours--details {
+    @include theme('border-color', 'color-primary--lighten-3', 'opening-hours-border');
+
+    top: calc(100% + #{$month-day-size-mobile / 2});
+    left: $month-day-size-mobile / 4;
+    padding-top: $month-day-size-mobile / 2;
+    border-top: 2px solid;
+  }
+}
+
+@mixin month-widget-desktop {
+  padding-right: $month-day-size * 7 - $month-day-size;
+  padding-bottom: 0;
+
+  > .openinghours {
+    @include theme('border-color', 'color-primary--lighten-3', 'opening-hours-border');
+
+    padding-right: $month-day-size / 2;
+    padding-bottom: 0;
+    border-right: 2px solid;
+  }
+
+  .openinghours--details {
+
+    top: -$month-day-size / 2;
+    left: calc(100% + #{$month-day-size});
+    padding-top: 0;
+    border-top: 0;
+  }
+}

package/build/styleguide/sass/00-mixins/svg/_spot-images.scss

@@ -0,0 +1,32 @@
+///
+/// Theme mixin to generate all themes spot images.
+/// This generates the necessary theme CSS for all defined themes based on the
+/// $themes map defined in _colors.scss
+///
+/// @since 3.0.0
+/// @group colors
+/// @access public
+/// @author Jeroen Goossens
+///
+/// @param {string} $image [null]
+///   The filename of the spot image.
+///
+/// @param {string} $size [8rem]
+///   The default width + height for the spot image.
+///
+@mixin spot-image($image, $size: 8rem) {
+  @each $theme, $colors in $themes {
+    // Apply the default section as default color scheme if there is no section
+    // defined in the DOM.
+    .cs--#{$theme} & {
+      background-image: url('#{$styleguide-dir}/img/svg/build/#{$image}--#{$theme}.svg');
+    }
+  }
+
+  display: block;
+  width: $size;
+  height: $size;
+  background: no-repeat center center;
+  background-size: 100%;
+  content: '';
+}

package/build/styleguide/sass/00-mixins/svg/_svg-icons.scss

@@ -0,0 +1,172 @@
+////
+///
+/// This file defines SVG related functions and mixins.
+///
+/// @group tools
+/// @author Gert-Jan Meire
+///
+////
+
+///
+///  Function to create an optimized svg url.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access private
+/// @author Gert-Jan Meire
+/// @require str-replace
+///
+/// @param {string} $svg
+///   The SVG code string to be converted for use in SASS.
+///
+@function svg-url($svg) {
+  //
+  //  Add missing namespace
+  //
+  @if not str-index($svg, xmlns) {
+    $svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+  }
+  //
+  //  Chunk up string in order to avoid
+  //  "stack level too deep" error
+  //
+  $encoded: '';
+  $slice: 2000;
+  $index: 0;
+  $loops: ceil(str-length($svg)/$slice);
+  @for $i from 1 through $loops {
+    $chunk: str-slice($svg, $index, $index + $slice - 1);
+    //
+    //   Encode
+    //
+    $chunk: str-replace($chunk, '"', '\'');
+    $chunk: str-replace($chunk, '%', '%25');
+    $chunk: str-replace($chunk, '&', '%26');
+    $chunk: str-replace($chunk, '#', '%23');
+    $chunk: str-replace($chunk, '{', '%7B');
+    $chunk: str-replace($chunk, '}', '%7D');
+    $chunk: str-replace($chunk, '<', '%3C');
+    $chunk: str-replace($chunk, '>', '%3E');
+
+    //
+    //    The maybe list
+    //
+    //    Keep size and compile time down
+    //    ... only add on documented fail
+    //
+    //  $chunk: str-replace($chunk, '|', '%7C');
+    //  $chunk: str-replace($chunk, '[', '%5B');
+    //  $chunk: str-replace($chunk, ']', '%5D');
+    //  $chunk: str-replace($chunk, '^', '%5E');
+    //  $chunk: str-replace($chunk, '`', '%60');
+    //  $chunk: str-replace($chunk, ';', '%3B');
+    //  $chunk: str-replace($chunk, '?', '%3F');
+    //  $chunk: str-replace($chunk, ':', '%3A');
+    //  $chunk: str-replace($chunk, '@', '%40');
+    //  $chunk: str-replace($chunk, '=', '%3D');
+
+    $encoded: #{$encoded}#{$chunk};
+    $index: $index + $slice;
+  }
+  @return url("data:image/svg+xml,#{$encoded}");
+}
+
+///
+/// Return a colored svg icon.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access private
+/// @author Gert-Jan Meire
+///
+/// @param {string} $icon
+///   The icon to return.
+///
+/// @param {color} $fill-color
+///   The color in which to return the svg icon.
+///
+/// @param {int} $width
+///   The width of the bounding box of the icon.
+///
+/// @param {int} $height
+///   The height of the bounding box of the icon.
+///
+@function svg-icon($icon, $fill-color, $width, $height) {
+  @if $icon == 'cross' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" width="#{$width}" height="#{$height}" viewBox="0 0 32 32">\
+      <path fill="#{$fill-color}" fill-rule="evenodd" d="M18.121 16l6.44-6.439a1.5 1.5 0 0 0-2.122-2.122L16 13.879l-6.44-6.44a1.501 1.501 0 0 0-2.12 2.122L13.88 16l-6.44 6.439a1.5 1.5 0 0 0 2.12 2.122l6.44-6.44 6.44 6.44c.292.293.676.439 1.06.439s.767-.146 1.06-.439a1.5 1.5 0 0 0 0-2.122L18.121 16z"/>\
+      </svg>';
+  }
+
+  @if $icon == 'lock-closed' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" width="#{$width}" height="#{$height}" viewBox="0 0 32 32"> <path fill="#{$fill-color}" fill-rule="evenodd" d="M23.5 12.551c2.514.256 4.5 2.37 4.5 4.949v8c0 2.75-2.25 5-5 5H9c-2.75 0-5-2.25-5-5v-8c0-2.579 1.986-4.693 4.5-4.949V9.5C8.5 5.364 11.864 2 16 2s7.5 3.364 7.5 7.5v3.051zM25 25.5v-8c0-1.084-.916-2-2-2H9c-1.084 0-2 .916-2 2v8c0 1.084.916 2 2 2h14c1.084 0 2-.916 2-2zM16 5a4.505 4.505 0 0 0-4.5 4.5v3h9v-3C20.5 7.019 18.481 5 16 5zm0 13a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 1 1-3 0v-4A1.5 1.5 0 0 1 16 18z"/> </svg>';
+  }
+
+  @if $icon == 'cross' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" width="#{$width}" height="#{$width}" viewBox="0 0 32 32">\
+      <path fill="#{$fill-color}" fill-rule="evenodd" d="M18.121 16l6.44-6.439a1.5 1.5 0 0 0-2.122-2.122L16 13.879l-6.44-6.44a1.501 1.501 0 0 0-2.12 2.122L13.88 16l-6.44 6.439a1.5 1.5 0 0 0 2.12 2.122l6.44-6.44 6.44 6.44c.292.293.676.439 1.06.439s.767-.146 1.06-.439a1.5 1.5 0 0 0 0-2.122L18.121 16z"/>\
+      </svg>';
+  }
+
+  @if $icon == 'checkmark' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" width="#{$width}" height="#{$height}" viewBox="0 0 32 32"> <path fill="#{$fill-color}" fill-rule="evenodd" d="M13.3 22.22l-5.86-5.86a1.5 1.5 0 1 1 2.12-2.12l3.74 3.739 8.54-8.54a1.5 1.5 0 1 1 2.122 2.121L13.3 22.22z"/> </svg>';
+  }
+
+  @if $icon == 'checkmark-circle' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" width="#{$width}" height="#{$height}" viewBox="0 0 32 32">\
+      <path fill="#{$fill-color}" fill-rule="evenodd" d="M15.06 21.06l8-8a1.5 1.5 0 1 0-2.12-2.12L14 17.879l-2.94-2.94a1.5 1.5 0 1 0-2.12 2.122l4 4c.292.293.676.439 1.06.439.383 0 .767-.146 1.06-.44M16 2C8.267 2 2 8.269 2 16c0 7.732 6.268 14 14 14 7.731 0 14-6.268 14-14C30 8.269 23.73 2 16 2m0 3c6.065 0 11 4.935 11 11 0 6.066-4.935 11-11 11-6.066 0-11-4.934-11-11C5 9.935 9.933 5 16 5"/>\
+      </svg>';
+  }
+
+  @if $icon == 'exclamation-circle' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" width="#{$width}" height="#{$height}" viewBox="0 0 32 32"> <path fill="#{$fill-color}" fill-rule="evenodd" d="M18 22a2 2 0 1 1-4.001-.001A2 2 0 0 1 18 22m-3.5-4.5v-9a1.5 1.5 0 1 1 3 0v9a1.5 1.5 0 1 1-3 0M16 27C9.935 27 5 22.065 5 16S9.935 5 16 5s11 4.935 11 11-4.935 11-11 11m0-25C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2"/> </svg>';
+  }
+
+  @if $icon == 'shevron-down' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" width="#{$width}" height="#{$height}" viewBox="0 0 32 32"> <path fill="#{$fill-color}" fill-rule="evenodd" d="M15.7 21.82l-8.26-8.26a1.5 1.5 0 1 1 2.12-2.12l6.14 6.138 6.14-6.139a1.5 1.5 0 1 1 2.121 2.121l-8.26 8.26z"/> </svg>';
+  }
+
+  @if $icon == 'accolade' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" width="#{$width}" height="#{$height}" viewBox="0 0 36 19"> <path fill="#{$fill-color}" fill-rule="evenodd" d="M36 18.998L0 19c4.782.006 9.37-1.992 12.755-5.555C16.14 9.882 18.045 5.047 17.95 0c.006 5.045 1.91 9.88 5.296 13.443 3.385 3.563 7.973 5.562 12.754 5.555z"/> </svg>';
+  }
+
+  @if $icon == 'accolade-inverse' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" width="#{$width}" height="#{$height}" viewBox="0 0 40 18">\
+      <path fill="#{$fill-color}" fill-rule="nonzero" d="M20 0c-.219 5.005-1.73 8.973-5.115 12.536C11.505 16.093 6.797 18 2.023 18H0V0h20zm0 0h20v18h-2.023c-4.774 0-9.482-1.907-12.862-5.464C21.73 8.973 20.219 5.005 20 0z"/></svg>';
+  }
+
+  @if $icon == 'accolade-stroke' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="#{$width}" height="#{$height}" viewBox="0 0 1280 21" version="1.1"><rect id="Rectangle-1" fill="#{$fill-color}" x="0" y="0" width="610" height="2"/><rect id="Rectangle-2" fill="#{$fill-color}" x="670" y="0" width="610" height="2"/><path fill="#{$fill-color}" x="0" y="0" transform="translate(670,21) rotate(180)" width="60" height="21" d="M31,0 C30.9999999,2.09535288 30.6599198,4.16802273 29.9988305,6.16649502 C29.3389076,4.16884025 29.0000001,2.09651067 29,0 L31,0 C30.9999999,4.80051152 32.9820137,9.47900754 36.7153758,13.301259 C40.6172956,17.2960815 44.5070799,18.9999829 50.0000006,18.9999829 L60,19 L60,21 L49.9999989,20.9999829 C43.9578466,20.9999829 39.5559339,19.0717461 35.2846236,14.6987381 C32.8014961,12.1564887 31.0176211,9.25047902 29.9988305,6.16649502 C28.9787664,9.25014786 27.1944229,12.1571463 24.7158604,14.6982422 C20.4521131,19.0695628 16.056584,20.9999982 10.0142851,20.9999829 L0,21 L0,19 L10.0142859,18.9999829 C15.5064046,18.9999968 19.3895734,17.2945806 23.2841402,13.3017549 C27.011863,9.47998264 29.0000001,4.79560732 29,0 L31,0 Z" id="path-1"/></svg>';
+  }
+
+  @if $icon == 'search' {
+    @return '<svg xmlns="http://www.w3.org/2000/svg" width="#{$width}" height="#{$height}" viewBox="0 0 32 32">\
+      <path fill="#{$fill-color}" fill-rule="evenodd" d="M15 22c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7m12.061 2.939l-4.017-4.016A9.94 9.94 0 0 0 25 15c0-5.523-4.477-10-10-10S5 9.477 5 15s4.477 10 10 10a9.94 9.94 0 0 0 5.923-1.956l4.016 4.017c.293.293.677.439 1.061.439a1.502 1.502 0 0 0 1.061-2.561"/>\
+      </svg>';
+  }
+}
+
+///
+/// Return a colored svg icon as a background image.
+///
+/// @since 3.0.0
+/// @group tools
+/// @access public
+/// @author Gert-Jan Meire
+///
+/// @param {string} $icon
+///   The icon to return. Refer to the private function svg-icon for the right
+///   key to use here.
+///
+/// @param {color} $fill-color
+///   The color in which to return the svg icon.
+///
+/// @param {int} $width
+///   The width of the bounding box of the icon.
+///
+/// @param {int} $height
+///   The height of the bounding box of the icon.
+///
+@function svg-as-background($svg, $fill-color, $width, $height) {
+  @return svg-url(svg-icon($svg, $fill-color, $width, $height));
+}

package/build/styleguide/sass/00-mixins/table/_table-backgrounds.scss

@@ -0,0 +1,34 @@
+///
+/// Apply background colors for tables
+///
+/// @since 3.0.0-beta10
+/// @group tools
+/// @access public
+/// @author Helena Standaert
+///
+/// @param {string} $child-selector [null]
+///   Selector for child elements.
+///
+
+@mixin table-backgrounds($child-selector: null) {
+  &.success #{$child-selector} {
+    @include theme-content('color-success--lighten-4', 'table-success-background') {
+      border-color: $theme-color;
+      background-color: $theme-color;
+    };
+  }
+
+  &.warning #{$child-selector} {
+    @include theme-content('color-warning--lighten-4', 'table-warning-background') {
+      border-color: $theme-color;
+      background-color: $theme-color;
+    };
+  }
+
+  &.error #{$child-selector} {
+    @include theme-content('color-error--lighten-4', 'table-error-background') {
+      border-color: $theme-color;
+      background-color: $theme-color;
+    };
+  }
+}

package/build/styleguide/sass/00-mixins/themify/_themify.scss

@@ -0,0 +1,169 @@
+////
+///
+/// This file defines all themify related functions and mixins.
+///
+/// @group colors
+/// @author Gert-Jan Meire
+///
+////
+
+///
+/// Do check if the default value exists in map colors.
+///
+///   We check if the given $exception exists in the theme map.
+///   If it does we return the color applied there.
+///   If it does NOT we split the $default string based on two dasshes --
+///   We then get the color palette value based on that key from the $themes map.
+///   and we apply the correct tint through the color() mixin.
+///
+/// @since 3.0.0
+/// @group colors
+/// @access private
+/// @author Gert-Jan Meire
+/// @require $colors
+/// @require str-split
+/// @require color
+/// @require number
+///
+/// @param {map} $colors
+///   The map of colors to check.
+///
+/// @param {string} $default
+///   The default value for the themified property.
+///
+/// @param {string} $exception
+///   The exception value for the themified property.
+///   This is the exception optionally used in subthemes.
+///
+@function set-themified-property($colors, $default, $exception) {
+  @if map-has-key($colors, $exception) {
+    @return map-get($colors, $exception);
+  }
+
+  // Split the string based on two dashes --
+  $color-variant: str-split($default);
+
+  // Get the length of the color variant list.
+  $length: length($color-variant);
+
+  // Make sure the list exists of 2 parts.
+  @if $length > 1 {
+    // If a tint has been specified we should apply the correct effect.
+    @if nth($color-variant, 2) != '' {
+      // Get the tint variant list containing the tint type
+      // and the tint strength.
+      $tint-variant: str-split(nth($color-variant, 2), '-');
+
+      // Check if the tint variant is a valid list.
+      @if length($tint-variant) > 1 {
+        // Get the base-color from the color variant list.
+        $base-color: nth($color-variant, 1);
+
+        // Transparent is default false.
+        $transparent: false;
+        @if length($color-variant) > 2 and nth($color-variant, 3) == 'transparent' {
+          $transparent: true;
+        }
+
+        // If it's a light variant.
+        @if nth($tint-variant, 1) == 'lighten' {
+          // Get the negative tint strength.
+          $tint: number(-#{nth($tint-variant, 2)});
+
+          @return color($base-color, $tint, $transparent, $colors);
+        }
+
+        // If it's a dark variant.
+        @if nth($tint-variant, 1) == 'darken' {
+          // Get the positive tint strength.
+          $tint: number(nth($tint-variant, 2));
+
+          @if $transparent {
+            @warn "Darker colors can not be transparent!";
+          }
+
+          @return color($base-color, $tint, false, $colors);
+        }
+      }
+    }
+  }
+  @else {
+    // Check if the first item of the variant is not empty.
+    @if nth($color-variant, 1) != '' {
+      // Set the $base-color.
+      $base-color: nth($color-variant, 1);
+
+      @return color($base-color, 0, false, $colors);
+    }
+  }
+
+  @return '';
+}
+
+///
+/// Theme mixin to generate all themes for components.
+/// This generates the necessary theme CSS for all defined themes based on the
+/// $themes map defined in _colors.scss
+///
+/// @since 3.0.0
+/// @group colors
+/// @access public
+/// @author Gert-Jan Meire
+///
+/// @param {string} $property [null]
+///   The property to themify.
+///
+/// @param {string} $default [null]
+///   The default value for the themified property.
+///
+/// @param {string} $exception [null]
+///   The exception value for the themified property.
+///   This is the exception optionally used in subthemes.
+///
+@mixin theme($property: null, $default: null, $exception: null, $extra-values: null) {
+  @each $theme, $colors in $themes {
+    // Apply the default section as default color scheme if there is no section
+    // defined in the DOM.
+    .cs--#{$theme} & {
+      #{$property}: set-themified-property($colors, $default, $exception);
+    }
+  }
+}
+
+///
+/// This mixin is similare to the theme-mixin, but uses the @content directive
+/// to make it possible to pass in custom values for a property (as often seen
+/// in borders, shadows, ...)
+///
+/// Inside the content block when including this mixin, you'll have the
+/// $theme-color variable available to reference.
+///
+/// @since 3.0.0-beta5
+/// @group colors
+/// @access public
+/// @author Helena Standaert
+/// @content
+///
+/// @param {string} $default [null]
+///   The default value for the themified property.
+///
+/// @param {string} $exception [null]
+///   The exception value for the themified property.
+///   This is the exception optionally used in subthemes.
+///
+/// @example
+///   @include theme-content('color-primary', 'link-shadow') {
+///     text-shadow: 1px 1px 2px $theme-color;
+///   }
+///
+@mixin theme-content($default: null, $exception: null) {
+  @each $theme, $colors in $themes {
+    $theme-color: set-themified-property($colors, $default, $exception) !global;
+
+    // Apply the default section as default color scheme if there is no section
+    // defined in the DOM.
+    .cs--#{$theme} & {
+      @content;
+    }
+  }
+}

package/build/styleguide/sass/00-mixins/z-index/_map-deep-get.scss

@@ -0,0 +1,25 @@
+///
+/// Deep get function to get a value from nested sass maps.
+///
+/// @author Hugo Giraudel
+/// @access public
+///
+/// @param {Map} $map
+///   Sass map that contains the desired value.
+/// @param {Arglist} $keys
+///   Chain of keys that represent the position of the desired value.
+///
+/// @return {*}
+///   Desired value.
+///
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    @if not map-has-key($map, $key) {
+      @warn "Key `#{$key}` in not found in map. Property omitted.";
+    }
+
+    $map: map-get($map, $key);
+  }
+
+  @return $map;
+}

package/build/styleguide/sass/00-mixins/z-index/_z.scss

@@ -0,0 +1,10 @@
+///
+/// Returns the z-index value for a certain layer.
+/// The z-layers map is defined in _vars.scss.
+///
+/// @param {string} $layers
+///   Name of
+///
+@function z($layers...) {
+  @return map-deep-get($z-layers, $layers...);
+}