gent_styleguide 5.0.2 → 5.0.6

package/build/styleguide/sass/00-settings/_vars.scss

@@ -0,0 +1,272 @@
+////
+///
+/// This file defines all general style guide settings.
+///
+/// @group settings
+/// @author Gert-Jan Meire
+///
+////
+
+@import 'susy';
+
+///
+/// Defines the style guide directory. This is used for things such as
+/// images for backgrounds in SASS.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @type map
+/// @author Gert-Jan Meire
+///
+$styleguide-dir: '../styleguide' !default;
+
+///
+/// Generates a unique ID..
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @type map
+/// @author Gert-Jan Meire
+///
+$uuid: unique-id();
+
+///
+/// Defines the border radius values components can use.
+/// These values have been chosen by the design team.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @type map
+/// @author Gert-Jan Meire
+///
+$border-radius: (
+  'radius-0': 0,
+  'radius-1': .2rem,
+  'radius-2': .3rem,
+  'radius-3': 1rem,
+  'radius-4': 1.2rem,
+  'radius-5': 1.6rem,
+) !default;
+
+///
+/// Lists all z-index values used in the components.
+///
+/// @since 3.0.0-beta9
+/// @group settings
+/// @access public
+/// @type map
+/// @author Helena Standaert
+///
+$z-layers: (
+  'default': 1,
+  'skiplink': 5,
+  'mijn-gent': 6,
+  'language-switcher': 6,
+  'boxes': (
+    'spotimage': 1
+  ),
+  'menu': (
+    'overlay': 4,
+    'base': 4
+  ),
+  'timeline': (
+    'dots': 1,
+    'video': (
+      'background': 1,
+      'dots': 2,
+      'player': 2
+    )
+  ),
+  'hero': (
+    'base': 1,
+    'caption': 3,
+    'accolade': 2,
+    'overlay': -1
+  ),
+  'teaser': (
+    'overlay-link': 1,
+    'content-link': 2,
+    'label': 1
+  ),
+  'modal': (
+    'base': 6, // creates new stacking context
+    'overlay': -1,
+    'content': 1,
+    'actions': 3, // iOS fix
+    'inner': 3
+  )
+) !default;
+
+///
+/// Defines the min-width breakpoint for mobile screens.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Gert-Jan Meire
+///
+$bp-mobile: 320px !default;
+
+///
+/// Defines the min-width breakpoint for phablet screens.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Bart Delrue
+///
+$bp-phablet: 576px !default;
+
+///
+/// Defines the min-width breakpoint for tablet screens.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Gert-Jan Meire
+///
+$bp-tablet: 768px !default;
+
+///
+/// Defines the min-width breakpoint for desktop screens.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Gert-Jan Meire
+///
+$bp-desktop: 960px !default;
+
+///
+/// Defines the min-width breakpoint for extra large desktop screens.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Gert-Jan Meire
+///
+$bp-desktop-xl: 1680px !default;
+
+///
+/// Defines the max width of content in a content container.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Gert-Jan Meire
+///
+$bp-max-content: 1280px !default;
+
+///
+/// Defines the max width of a grid container.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Gert-Jan Meire
+///
+$bp-container: 1680px !default;
+
+///
+/// Defines the width of six columns on container max-width.
+/// Used to limit with of block content.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Bart Delrue
+///
+$six-of-bp-container: 32rem !default;
+
+///
+/// Defines the number of grid columns for a given grid container.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Gert-Jan Meire
+///
+$grid-columns: 12 !default;
+
+///
+/// Defines the width of grid gutters.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Gert-Jan Meire
+///
+$gutter-width: 1.2rem !default;
+
+///
+/// Defines the default paragraph bottom margin.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Bart Delrue
+///
+$default-paragraph-margin: 1.6rem !default;
+
+///
+/// Defines the default font family Fira Sans.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Gert-Jan Meire
+///
+$default-font-family: 'Fira Sans', sans-serif !default;
+
+///
+/// Defines the default font weight.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Gert-Jan Meire
+///
+$default-font-weight: 400 !default;
+
+///
+/// Defines the default font size.
+/// For better readable SASS code we opted for a default font size of 20px.
+/// Therefor the body element and all elements inside it get a font-size of
+/// .8rem (which is a computed value of 16px).
+/// This allows us to calculate REM values by dividing by 20 instead of 16,
+/// which in turn gives us more readable REM values.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Gert-Jan Meire
+///
+$default-font-size: 20px !default; //px
+
+///
+/// Defines the default line height.
+///
+/// @since 3.0.0
+/// @group settings
+/// @access public
+/// @author Gert-Jan Meire
+///
+$default-line-height: 1.75 !default;
+
+///
+/// This map describes the susy grid system settings.
+///
+/// @since 3.0.0
+/// @group grid
+/// @access private
+/// @type map
+/// @author Gert-Jan Meire
+///
+$susy: (
+  'columns': susy-repeat(12),
+  'gutters': $gutter-width,
+  'spread': 'narrow',
+);

package/build/styleguide/sass/11-base/base/_base.scss

@@ -0,0 +1,112 @@
+////
+/// Default markup for the most common HTML elements, based on the settings file.
+////
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  background: color('white');
+  font: $default-font-weight $default-font-size $default-font-family;
+  line-height: $default-line-height;
+  box-sizing: border-box;
+}
+
+body {
+  // Since the `cs--` class is set on the body element, the styles should be applied directly to the element.
+  @each $theme, $colors in $themes {
+    &.cs--#{$theme} {
+      color: set-themified-property($colors, 'color-tertiary', 'default-text-color');
+    }
+  }
+
+  position: relative;
+  font-size: .8rem;
+}
+
+::selection {
+  @include theme('background-color', 'color-primary--darken-1', 'text-selection-background');
+  @include theme('color', 'color-secondary', 'text-selection-color');
+}
+
+th > * {
+  margin: 0;
+}
+
+hr {
+  margin: 0 auto 1.4rem;
+  clear: both;
+  border: solid color('dark-gray', -2);
+  border-width: 1px 0 0;
+}
+
+//
+// Fix a > img problem
+//
+img {
+  border: 0;
+  vertical-align: top;
+}
+
+p,
+ol,
+ul,
+dl,
+table,
+address,
+pre {
+  margin-bottom: .5em;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+p {
+  margin-bottom: 1em;
+}
+
+address {
+  font-style: normal;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+span,
+input,
+label,
+textarea,
+button,
+select,
+dd,
+q {
+  max-width: 40rem;
+}
+
+strong {
+  @include bold-text;
+}
+
+input[type=button],
+button {
+  font: $default-font-weight $default-font-size $default-font-family;
+}
+
+a[href],
+area[href],
+input:not([disabled]),
+select:not([disabled]),
+textarea:not([disabled]),
+button:not([disabled]),
+object,
+embed,
+iframe,
+*[tabindex]:not([tabindex="-1"]),
+*[contenteditable] {
+  @include focus-style;
+}

package/build/styleguide/sass/11-base/base/_helper-classes.scss

@@ -0,0 +1,146 @@
+////
+/// This file defines helper classes.
+////
+
+
+///
+/// Prevent text wrapping.
+///
+.nowrap {
+  white-space: nowrap;
+}
+
+///
+/// Add bold styling
+///
+.bold {
+  @include bold-text;
+}
+
+///
+/// Visually hidden
+///
+%visually-hidden,
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+
+///
+/// Force a link to have no link styling.
+///
+%no-link-style,
+.no-link-style {
+  @include no-link-style;
+}
+
+///
+/// Margin helper classes.
+///
+$directions: top, right, bottom, left;
+@for $i from 0 through 40 {
+  @each $d in $directions {
+    $ds: str-slice($d, 0, 1); // Get first letter of direction
+
+    .m#{$ds}-#{$i} {
+      margin-#{$d}: $i * .1rem;
+    }
+  }
+}
+
+///
+/// Hiding helper classes.
+///
+@mixin hide($breakpoint: null) {
+  @if ($breakpoint == 'mobile') {
+    @include mobile {
+      display: none;
+    }
+  }
+
+  @if ($breakpoint == 'mobile-only') {
+    @include breakpoint(max-width $bp-mobile - 1) {
+      display: none;
+    }
+  }
+
+  @if ($breakpoint == 'phablet') {
+    @include phablet {
+      display: none;
+    }
+  }
+
+  @if ($breakpoint == 'phablet-only') {
+    @include breakpoint((min-width $bp-mobile) (max-width $bp-phablet - 1)) {
+      display: none;
+    }
+  }
+
+  @if ($breakpoint == 'tablet') {
+    @include tablet {
+      display: none;
+    }
+  }
+
+  @if ($breakpoint == 'tablet-only') {
+    @include breakpoint((min-width $bp-phablet) (max-width $bp-tablet - 1)) {
+      display: none;
+    }
+  }
+
+  @if ($breakpoint == 'desktop') {
+    @include desktop {
+      display: none;
+    }
+  }
+
+  @if ($breakpoint == 'desktop-only') {
+    @include breakpoint((min-width $bp-tablet) (max-width $bp-desktop - 1)) {
+      display: none;
+    }
+  }
+}
+
+.hidden-mobile {
+  @include hide('mobile');
+}
+
+.hidden-mobile-only {
+  @include hide('mobile-only');
+}
+
+.hidden-phablet {
+  @include hide('phablet');
+}
+
+.hidden-phablet-only {
+  @include hide('phablet-only');
+}
+
+.hidden-tablet {
+  @include hide('tablet');
+}
+
+.hidden-tablet-only {
+  @include hide('tablet-only');
+}
+
+.hidden-desktop {
+  @include hide('desktop');
+}
+
+.hidden-desktop-only {
+  @include hide('desktop-only');
+}
+
+.show-desktop-only {
+  @include desktop-and-below {
+    display: none;
+  }
+}

package/build/styleguide/sass/11-base/base/_invisible.scss

@@ -0,0 +1,41 @@
+// sass-lint:disable no-important
+
+// For anything you want to hide on page load when JS is enabled, so
+// that you can use the JS to control visibility and avoid flicker.
+html.js .js-hide {
+  display: none;
+}
+
+/// Hide elements from all users.
+///
+/// Used for elements which should not be immediately displayed to any user. An
+/// example would be a collapsible fieldset that will be expanded with a click
+/// from a user. The effect of this class can be toggled with the jQuery show()
+/// and hide() functions.
+.element-hidden {
+  display: none;
+}
+
+/// Hide elements visually, but keep them available for screen-readers.
+///
+/// Used for information required for screen-reader users to understand and use
+/// the site where visual display is undesirable. Information provided in this
+/// manner should be kept concise, to avoid unnecessary burden on the user.
+/// '!important' is used to prevent unintentional overrides.
+.element-invisible {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+// The .element-focusable class extends the .element-invisible class to allow
+// the element to be focusable when navigated to via the keyboard.
+.element-invisible.element-focusable:active,
+.element-invisible.element-focusable:focus {
+  position: static !important;
+  height: auto;
+  overflow: visible;
+  clip: auto;
+}

package/build/styleguide/sass/11-base/containers/_containers.scss

@@ -0,0 +1,6 @@
+////
+/// This file defines container related theming.
+////
+.page-container {
+  padding: 1.5rem 0;
+}

package/build/styleguide/sass/11-base/fonts/_fonts.scss

@@ -0,0 +1,21 @@
+////
+/// This file defines fonts.
+////
+
+@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600,700'); // sass-lint:disable-line no-url-protocols
+
+// WebfontLoader
+// Bypass the FOUT.
+// Placed on the container to enable loading bars etc.
+html.wf-loading {
+  .container {
+    opacity: 0;
+  }
+}
+
+html:not(.wf-loading) {
+  .container {
+    transition: .1s opacity ease-in;
+    opacity: 1;
+  }
+}