Search

#
breakpoints

##
mixins

### mobile

Since 3.0.0

    @mixin mobile() { ... }

### Description

Mobile breakpoint (see $bp-mobile defined in _vars.scss). This assumes a min-width as defined by the variable.

### Parameters

None.

### Requires

- [variable] `bp-mobile`

### Author

- Gert-Jan Meire

### phablet

Since 3.0.0

    @mixin phablet() { ... }

### Description

Phablet breakpoint (see $bp-phablet defined in _vars.scss). This assumes a min-width as defined by the variable.

### Parameters

None.

### Requires

- [variable] `bp-phablet`

### Author

- Bart Delrue

### tablet-and-below

Since 3.0.0

    @mixin tablet-and-below() { ... }

### Description

Tablet breakpoint (see $bp-tablet defined in _vars.scss). This assumes a max-width as defined by the variable.

### Parameters

None.

### Requires

- [variable] `bp-tablet`

### Author

- Bart Delrue

### tablet

Since 3.0.0

    @mixin tablet() { ... }

### Description

Tablet breakpoint (see $bp-tablet defined in _vars.scss). This assumes a min-width as defined by the variable.

### Parameters

None.

### Requires

- [variable] `bp-tablet`

### Author

- Gert-Jan Meire

### desktop-and-below

Since 3.0.0

    @mixin desktop-and-below() { ... }

### Description

Mobile breakpoint (see $bp-mobile defined in _vars.scss). This assumes a min-width as defined by the variable.

### Parameters

None.

### Requires

- [variable] `bp-desktop`
- [variable] `bp-mobile`

### Author

- Gert-Jan Meire

### desktop

Since 3.0.0

    @mixin desktop() { ... }

### Description

Desktop breakpoint (see $bp-tablet defined in _vars.scss). This assumes a min-width as defined by the variable.

### Parameters

None.

### Requires

- [variable] `bp-desktop`

### Author

- Gert-Jan Meire

### desktop-xl

Since 3.0.0

    @mixin desktop-xl() { ... }

### Description

Desktop XL breakpoint (see $bp-desktop-xl defined in _vars.scss). This assumes a min-width as defined by the variable.

### Parameters

None.

### Requires

- [variable] `bp-desktop-xl`

### Author

- Gert-Jan Meire

#
buttons

##
mixins

### button-small

Since 3.0.0

    @mixin button-small() { ... }

### Description

Button - small variant.

### Parameters

None.

### Requires

- [mixin] `small-text`

### Used by

- [mixin] `button`

### Author

- Gert-Jan Meire

### button-medium

Since 3.0.0

    @mixin button-medium() { ... }

### Description

Button - medium variant.

### Parameters

None.

### Requires

- [mixin] `medium-text`

### Used by

- [mixin] `button`
- [mixin] `button`

### Author

- Gert-Jan Meire

### button-large

Since 3.0.0

    @mixin button-large() { ... }

### Description

Button - large variant.

### Parameters

None.

### Requires

- [mixin] `large-text`

### Used by

- [mixin] `button`

### Author

- Gert-Jan Meire

### button-disabled

Since 3.0.0

    @mixin button-disabled() { ... }

### Description

Button - disabled variant.

### Parameters

None.

### Requires

- [function] `color`

### Used by

- [mixin] `button`

### Author

- Gert-Jan Meire

### button

Since 3.0.0

    @mixin button() { ... }

### Description

General button styling.

### Parameters

None.

### Requires

- [mixin] `button-medium`
- [mixin] `bold-text`
- [mixin] `button-disabled`
- [mixin] `button-small`
- [mixin] `button-medium`
- [mixin] `button-large`
- [mixin] `button-block`
- [mixin] `button-icon`
- [mixin] `button-icon-left`
- [function] `border-radius`
- [variable] `default-font-family`

### Author

- Gert-Jan Meire

### button-block

Since 3.0.0

    @mixin button-block() { ... }

### Description

Makes a button display block instead of inline.

### Parameters

None.

### Used by

- [mixin] `button`

### Author

- Gert-Jan Meire

### button-icon

Since 3.0.0

    @mixin button-icon() { ... }

### Description

Define a button with an icon.

### Parameters

None.

### Used by

- [mixin] `button`
- [placeholder] `button-alert`
- [placeholder] `button-alert`

### Author

- Gert-Jan Meire

### button-icon-left

    @mixin button-icon-left() { ... }

### Description

Define a button with an icon on the left side.

### Parameters

None.

### Used by

- [mixin] `button`

### Author

- Gert-Jan Meire

#
colors

##
mixins

### spot-image

Since 3.0.0

    @mixin spot-image($image: null, $size: 8rem) { ... }

### Description

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

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$image` | The filename of the spot image. | `String` | `null`
`$size` | The default width + height for the spot image. | `String` | `8rem`

### Requires

- [variable] `colors`
- [variable] `themes`
- [variable] `styleguide-dir`

### Author

- Jeroen Goossens

### theme

Since 3.0.0

    @mixin theme($property: null, $default: null, $exception: null) { ... }

### Description

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

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$property` | The property to themify. | `String` | `null`
`$default` | The default value for the themified property. | `String` | `null`
`$exception` | The exception value for the themified property. This is the exception optionally used in subthemes. | `String` | `null`

### Requires

- [function] `set-themified-property`
- [variable] `colors`
- [variable] `themes`
- [variable] `colors`

### Used by

- [mixin] `field-base`
- [mixin] `field-base`
- [mixin] `field-base`
- [mixin] `field-base`
- [mixin] `field-base`
- [mixin] `field-base`
- [mixin] `field-base`
- [mixin] `field-base`
- [mixin] `field-base`
- [mixin] `field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `focus-bare`
- [mixin] `link-background`
- [mixin] `link-underlined`
- [mixin] `link-underlined`
- [placeholder] `button-primary`
- [placeholder] `button-primary`
- [placeholder] `button-primary`
- [placeholder] `button-primary`
- [placeholder] `button-primary`
- [placeholder] `button-primary`
- [placeholder] `button-primary`
- [placeholder] `button-primary`
- [placeholder] `button-primary`
- [placeholder] `button-primary`
- [placeholder] `button-primary`
- [placeholder] `button-secondary`
- [placeholder] `button-secondary`
- [placeholder] `button-secondary`
- [placeholder] `button-secondary`
- [placeholder] `button-secondary`
- [placeholder] `button-secondary`
- [placeholder] `button-secondary`
- [placeholder] `button-secondary`
- [placeholder] `button-secondary`

### Author

- Gert-Jan Meire

### theme-content

Since 3.0.0-beta5

    @mixin theme-content($default: null, $exception: null) { ... }

### Description

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.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$default` | The default value for the themified property. | `String` | `null`
`$exception` | The exception value for the themified property. This is the exception optionally used in subthemes. | `String` | `null`

### Example

    @include theme-content('color-primary', 'link-shadow') {
      text-shadow: 1px 1px 2px $theme-color;
    }

### Requires

- [function] `set-themified-property`
- [variable] `colors`
- [variable] `themes`
- [variable] `colors`

### Used by

- [mixin] `link-background`
- [mixin] `table-backgrounds`
- [mixin] `table-backgrounds`
- [mixin] `table-backgrounds`

### Author

- Helena Standaert

##
functions

### [private] set-themified-property

Since 3.0.0

    @function set-themified-property($colors, $default, $exception) { ... }

### Description

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.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$colors` | The map of colors to check. | `Map` | — none
`$default` | The default value for the themified property. | `String` | — none
`$exception` | The exception value for the themified property. This is the exception optionally used in subthemes. | `String` | — none

### Requires

- [variable] `colors`
- [function] `str-split`
- [function] `color`
- [function] `number`

### Used by

- [mixin] `theme`
- [mixin] `theme-content`

### Author

- Gert-Jan Meire

### rgba-to-rgb

Since 3.0.0

    @function rgba-to-rgb($base-color, $background: #fff) { ... }

### Description

A function to convert a rgba color to a rgb color.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$base-color` | The key of the color in the $colors map. | `Color` | — none
`$background` | The color to mix with. | `Color` | `#fff`

### Requires

- [variable] `colors`

### Used by

- [function] `color`

### Author

- Jeroen Goossens

### color

Since 3.0.0

    @function color($base-color, $tint: 0, $transparent: false, $colors$: $colors) { ... }

### Description

A function to get a color from the $colors map.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$base-color` | The key of the color in the $colors map. | `Color` | — none
`$tint` | The tint to be applied to the base color. | `Int` | `0`
`$transparent` | True when you need a RGBA color, otherwise HEX value will return. | `Boolean` | `false`
`$colors$` | The colors array to use to calculate the correct color tint. | `Map` | `$colors`

### Requires

- [function] `shade`
- [function] `tint`
- [function] `rgba-to-rgb`
- [variable] `colors`

### Used by

- [mixin] `button-disabled`
- [function] `set-themified-property`
- [mixin] `field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [placeholder] `button-alert`
- [placeholder] `button-success`

### Author

- Gert-Jan Meire

### tint

Since 3.0.0

    @function tint($base-color, $tint, $colors$: $colors) { ... }

### Description

A function to adjust the opacity of a base color.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$base-color` | The base color to be modified. | `Color` | — none
`$tint` | The tint value to modify the base color with. | `Int` | — none
`$colors$` | The colors array to use to calculate the correct color tint. | `Map` | `$colors`

### Requires

- [variable] `tints`
- [variable] `colors`

### Used by

- [function] `color`

### Author

- Gert-Jan Meire

### shade

Since 3.0.0

    @function shade($base-color, $tint, $colors$: $colors) { ... }

### Description

A function to darken a base color.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$base-color` | The base color to be modified. | `Color` | — none
`$tint` | The value to shade the base color with. | `Int` | — none
`$colors$` | The colors array to use to calculate the correct color tint. | `Map` | `$colors`

### Requires

- [variable] `tints`
- [variable] `colors`

### Used by

- [function] `color`

### Author

- Gert-Jan Meire

##
variables

### colors

Since 3.0.0

    $colors: (
      'cyan': #009de0,
      'cyan-wcag': #007db3,
      'dark-gray': #23333a,
      'white': #fff,
      'blue': #0340c7,
      'teal': #29cfc9,
      'green': #38ab30,
      'lemon': #f5d605,
      'yellow': #fab600,
      'orange': #f95706,
      'red': #f20f36,
      'pink': #f09,
      'purple': #5a0ec4,
    ) !default;

### Description

The colors map defines all basic and secondary colors.

### Type

`Map`

### Used by

- [mixin] `spot-image`
- [function] `set-themified-property`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme-content`
- [mixin] `theme-content`
- [function] `rgba-to-rgb`
- [function] `color`
- [function] `tint`
- [function] `shade`

### Author

- Gert-Jan Meire

### tints

Since 3.0.0

    $tints: (
      1: 10%,
      2: 25%,
      3: 50%,
      -1: .75,
      -2: .5,
      -3: .25,
      -4: .1,
      -5: .06,
      -6: .02,
    ) !default;

### Description

This map describes different tints. These are used to calculate all color swatches based on the base colors in $colors.

### Type

`Map`

### Used by

- [function] `tint`
- [function] `shade`

### Author

- Gert-Jan Meire

### box-shadow-primary

Since 3.0.0

    $box-shadow-primary: 0 2px 8px 0;

### Description

Themify adds the color for box shadows, this just defines the box shadow without a specific color so it can be reused.

### Type

`String`

### Used by

- [placeholder] `button-alert`

### Author

- Gert-Jan Meire

### themes

Since 3.0.0

    $themes: (
      'cyan': (
        // Required colors!
        'color-primary': color('cyan'),
        'color-secondary': color('white'),
        'color-tertiary': color('dark-gray'),
        'color-info': color('cyan'),
        'color-success': color('green'),
        'color-warning': color('orange'),
        'color-error': color('red'),
        'color-box-shadow': $box-shadow-primary color('cyan-wcag', -3),
        'color-box-shadow-hover': $box-shadow-primary color('cyan-wcag', -2),
        'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
        'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
        'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
        'accolade-stroke-light': svg-as-background('accolade-stroke', color('cyan-wcag', -4), 1280, 21),
        'accolade-stroke-dark': svg-as-background('accolade-stroke', color('cyan', 1), 1280, 21),

        // Exceptions to colors go here...
        // These should be as limited as possible though!
        'link-color': color('cyan-wcag', 1),
        'link-hover-background': color('cyan-wcag', -4),
        'link-hover-color': color('cyan-wcag', 2),
        'link-underlined-hover-color': color('cyan-wcag', 2),

        'focus-outline': color('cyan-wcag'),

        'breadcrumb-expandable-color': color('cyan'),
        'breadcrumb-expandable-background-color-hover': color('cyan', -4),

        'button-primary-background': color('cyan-wcag'),
        'button-primary-border-color': color('cyan-wcag'),
        'button-primary-hover-background': color('cyan-wcag', 1),
        'button-primary-hover-border-color': color('cyan-wcag', 1),
        'button-primary-focus-background': color('cyan-wcag', 3),
        'button-primary-focus-border-color': color('cyan-wcag', 3),

        'button-secondary-border-color': color('cyan-wcag', -2),
        'button-secondary-color': color('cyan-wcag'),
        'button-secondary-hover-color': color('cyan-wcag', 1),
        'button-secondary-hover-border-color': color('cyan', -1),
        'button-secondary-focus-color': color('cyan-wcag', 3),
        'button-secondary-focus-background': color('cyan-wcag', -4),
        'button-secondary-focus-border-color': color('cyan-wcag', -1),

        'image-gallery-show-more-background-color': color('cyan-wcag', 3),

        'radio-background-color-checked': color('cyan', -5),
        'radio-border-color-checked': color('cyan'),
        'radio-checkmark-color': color('cyan'),

        'radio-background-color-hover-and-checked': color('cyan', -3),
        'radio-border-color-hover-and-checked': color('cyan', 3),
        'radio-color-hover-and-checked': color('cyan', 3),

        'checkbox-background-color-checked': color('cyan', -5),
        'checkbox-border-color-checked': color('cyan'),
        'checkbox-checkmark-color': color('cyan'),

        'checkbox-background-color-hover-and-checked': color('cyan', -3),
        'checkbox-border-color-hover-and-checked': color('cyan', 3),
        'checkbox-color-hover-and-checked': color('cyan', 3),

        'readspeaker-icon-color': color('cyan-wcag'),
        'readspeaker-icon-border-color': color('cyan-wcag', -2),

        'tag-border-color-hover': color('cyan-wcag', -2),
        'tag-close-button-background-hover': color('cyan-wcag', -4),
        'teaser-label-icon-color': color('cyan-wcag'),

        'gentinfo-content-shadow': color('cyan-wcag', -5),

        'tag-border-color': color('cyan-wcag', -2),
        'tag-span-border-color': color('cyan-wcag', -3),
      ),
      'orange': (
        // Required colors!
        'color-primary': color('orange'),
        'color-secondary': color('white'),
        'color-tertiary': color('dark-gray'),
        'color-info': color('cyan'),
        'color-success': color('green'),
        'color-warning': color('orange'),
        'color-error': color('red'),
        'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
        'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
        'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
        'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
        'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
        'accolade-stroke-light': svg-as-background('accolade-stroke', color('orange', -4), 1280, 21),
        'accolade-stroke-dark': svg-as-background('accolade-stroke', color('orange', 1), 1280, 21),

        // Exceptions to colors go here...
        // These should be as limited as possible though!
        'link-color': color('dark-gray'),
        'link-hover-color': color('dark-gray', 2),
        'link-underline-color': color('dark-gray', 2),

        'button-primary-background': color('dark-gray'),
        'button-primary-border-color': color('dark-gray'),
        'button-primary-hover-background': color('dark-gray', 1),
        'button-primary-hover-border-color': color('dark-gray', 1),
        'button-primary-focus-background': color('dark-gray', 3),
        'button-primary-focus-border-color': color('dark-gray', 3),

        'button-secondary-border-color': color('dark-gray', -2),
        'button-secondary-color': color('dark-gray'),
        'button-secondary-hover-color': color('dark-gray', 1),
        'button-secondary-hover-background': color('dark-gray', -4),
        'button-secondary-hover-border-color': color('dark-gray', -1),
        'button-secondary-focus-color': color('dark-gray', 3),
        'button-secondary-focus-background': color('dark-gray', -4),
        'button-secondary-focus-border-color': color('dark-gray', -1),
      ),
      'blue': (
        // Required colors!
        'color-primary': color('blue', 3),
        'color-secondary': color('white'),
        'color-tertiary': color('dark-gray'),
        'color-info': color('cyan'),
        'color-success': color('green'),
        'color-warning': color('orange'),
        'color-error': color('red'),
        'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
        'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
        'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
        'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
        'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
        'accolade-stroke-light': svg-as-background('accolade-stroke', color('blue', -4), 1280, 21),
        'accolade-stroke-dark': svg-as-background('accolade-stroke', color('blue', 1), 1280, 21),

        // Exceptions to colors go here...
        // These should be as limited as possible though!
        'link-color': color('dark-gray'),
        'link-hover-color': color('dark-gray', 2),
        'link-underline-color': color('dark-gray', 2),

        'button-primary-background': color('dark-gray'),
        'button-primary-border-color': color('dark-gray'),
        'button-primary-hover-background': color('dark-gray', 1),
        'button-primary-hover-border-color': color('dark-gray', 1),
        'button-primary-focus-background': color('dark-gray', 3),
        'button-primary-focus-border-color': color('dark-gray', 3),

        'button-secondary-border-color': color('dark-gray', -2),
        'button-secondary-color': color('dark-gray'),
        'button-secondary-hover-color': color('dark-gray', 1),
        'button-secondary-hover-background': color('dark-gray', -4),
        'button-secondary-hover-border-color': color('dark-gray', -1),
        'button-secondary-focus-color': color('dark-gray', 3),
        'button-secondary-focus-background': color('dark-gray', -4),
        'button-secondary-focus-border-color': color('dark-gray', -1),
      ),
      'teal': (
        // Required colors!
        'color-primary': color('teal'),
        'color-secondary': color('white'),
        'color-tertiary': color('dark-gray'),
        'color-info': color('cyan'),
        'color-success': color('green'),
        'color-warning': color('orange'),
        'color-error': color('red'),
        'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
        'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
        'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
        'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
        'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
        'accolade-stroke-light': svg-as-background('accolade-stroke', color('teal', -4), 1280, 21),
        'accolade-stroke-dark': svg-as-background('accolade-stroke', color('teal', 1), 1280, 21),

        // Exceptions to colors go here...
        // These should be as limited as possible though!
        'link-color': color('dark-gray'),
        'link-hover-color': color('dark-gray', 2),
        'link-underline-color': color('dark-gray', 2),

        'button-primary-background': color('dark-gray'),
        'button-primary-border-color': color('dark-gray'),
        'button-primary-hover-background': color('dark-gray', 1),
        'button-primary-hover-border-color': color('dark-gray', 1),
        'button-primary-focus-background': color('dark-gray', 3),
        'button-primary-focus-border-color': color('dark-gray', 3),

        'button-secondary-border-color': color('dark-gray', -2),
        'button-secondary-color': color('dark-gray'),
        'button-secondary-hover-color': color('dark-gray', 1),
        'button-secondary-hover-background': color('dark-gray', -4),
        'button-secondary-hover-border-color': color('dark-gray', -1),
        'button-secondary-focus-color': color('dark-gray', 3),
        'button-secondary-focus-background': color('dark-gray', -4),
        'button-secondary-focus-border-color': color('dark-gray', -1),

        'heading-1-color': color('dark-gray'),
        'hero-background-color': color('teal', 2)
      ),
      'green': (
        // Required colors!
        'color-primary': color('green'),
        'color-secondary': color('white'),
        'color-tertiary': color('dark-gray'),
        'color-info': color('cyan'),
        'color-success': color('green'),
        'color-warning': color('orange'),
        'color-error': color('red'),
        'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
        'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
        'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
        'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
        'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
        'accolade-stroke-light': svg-as-background('accolade-stroke', color('green', -4), 1280, 21),
        'accolade-stroke-dark': svg-as-background('accolade-stroke', color('green', 1), 1280, 21),

        // Exceptions to colors go here...
        // These should be as limited as possible though!
        'link-color': color('dark-gray'),
        'link-hover-color': color('dark-gray', 2),
        'link-underline-color': color('dark-gray', 2),

        'button-primary-background': color('dark-gray'),
        'button-primary-border-color': color('dark-gray'),
        'button-primary-hover-background': color('dark-gray', 1),
        'button-primary-hover-border-color': color('dark-gray', 1),
        'button-primary-focus-background': color('dark-gray', 3),
        'button-primary-focus-border-color': color('dark-gray', 3),

        'button-secondary-border-color': color('dark-gray', -2),
        'button-secondary-color': color('dark-gray'),
        'button-secondary-hover-color': color('dark-gray', 1),
        'button-secondary-hover-background': color('dark-gray', -4),
        'button-secondary-hover-border-color': color('dark-gray', -1),
        'button-secondary-focus-color': color('dark-gray', 3),
        'button-secondary-focus-background': color('dark-gray', -4),
        'button-secondary-focus-border-color': color('dark-gray', -1),

        'paragraph-type-background-color': color('green', -5),
        'paragraph-type-color': color('green'),
        'paragraph-course-background-color': color('green'),
        'paragraph-course-color': color('white'),

        'heading-1-color': color('dark-gray'),
        'tag-span-border-color': color('dark-gray', -2),
        'tag-border-color': color('dark-gray', -2),
      )
    ) !default;

### Description

Themify settings. This determines the colors for all main and subthemes.

### Type

`Map`

### Used by

- [mixin] `spot-image`
- [mixin] `theme`
- [mixin] `theme-content`

### Author

- Gert-Jan Meire

#
grid

##
mixins

### extra-wide

Since 3.0.0

    @mixin extra-wide() { ... }

### Description

Helper mixin to break out of the grid structure in targeted places.

### Parameters

None.

### Requires

- [variable] `gutter-width`
- [variable] `gutter-width`
- [variable] `gutter-width`

### Author

- Gert-Jan Meire

### set-layout

Since 3.0.0

    @mixin set-layout($width, $offset, $columns) { ... }

### Description

Provide a helper mixin to easily position items on the grid..

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$width` | The width in columns: e.g. 3 (... of 12). | `String` | — none
`$offset` | The offset in columns: e.g. 3 (... of 12). | `String` | — none
`$columns` | The amount of columns. | `String` | — none

### Requires

- [function] `number`
- [function] `str-split`
- [function] `number`
- [function] `str-split`
- [function] `number`
- [function] `str-split`
- [function] `number`
- [function] `str-split`

### Author

- Gert-Jan Meire

##
variables

### [private] susy

Since 3.0.0

    $susy: (
      'columns': susy-repeat(12),
      'gutters': $gutter-width,
      'spread': 'narrow',
    );

### Description

This map describes the susy grid system settings.

### Type

`Map`

### Author

- Gert-Jan Meire

##
placeholders

### container

Since 3.0.0

    %container { ... }

### Description

The container to put a grid in.

### Requires

- [mixin] `clearfix`
- [variable] `bp-container`
- [variable] `bp-container`

### Author

- Gert-Jan Meire

### content-container

Since 3.0.0

    %content-container { ... }

### Description

The inner container to put a grid in. This also provides the necessary padding for mobile display.

### Requires

- [variable] `bp-max-content`

### Author

- Gert-Jan Meire

#
settings

##
variables

### styleguide-dir

Since 3.0.0

    $styleguide-dir: '../styleguide' !default;

### Description

Defines the style guide directory. This is used for things such as images for backgrounds in SASS.

### Type

`Map`

### Used by

- [mixin] `spot-image`

### Author

- Gert-Jan Meire

### uuid

Since 3.0.0

    $uuid: unique-id();

### Description

Generates a unique ID..

### Type

`Map`

### Author

- Gert-Jan Meire

### border-radius

Since 3.0.0

    $border-radius: (
      'radius-0': 0,
      'radius-1': .2rem,
      'radius-2': .3rem,
      'radius-3': 1rem,
      'radius-4': 1.2rem,
      'radius-5': 1.6rem,
    ) !default;

### Description

Defines the border radius values components can use. These values have been chosen by the design team.

### Type

`Map`

### Used by

- [mixin] `field-base`
- [function] `border-radius`

### Author

- Gert-Jan Meire

### z-layers

Since 3.0.0-beta9

    $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;

### Description

Lists all z-index values used in the components.

### Type

`Map`

### Used by

- [function] `z`

### Author

- Helena Standaert

### bp-mobile

Since 3.0.0

    $bp-mobile: 320px !default;

### Description

Defines the min-width breakpoint for mobile screens.

### Used by

- [mixin] `mobile`
- [mixin] `desktop-and-below`
- [mixin] `hide`
- [mixin] `hide`

### Author

- Gert-Jan Meire

### bp-phablet

Since 3.0.0

    $bp-phablet: 576px !default;

### Description

Defines the min-width breakpoint for phablet screens.

### Used by

- [mixin] `phablet`
- [mixin] `hide`
- [mixin] `hide`

### Author

- Bart Delrue

### bp-tablet

Since 3.0.0

    $bp-tablet: 768px !default;

### Description

Defines the min-width breakpoint for tablet screens.

### Used by

- [mixin] `tablet-and-below`
- [mixin] `tablet`
- [mixin] `hide`
- [mixin] `hide`

### Author

- Gert-Jan Meire

### bp-desktop

Since 3.0.0

    $bp-desktop: 960px !default;

### Description

Defines the min-width breakpoint for desktop screens.

### Used by

- [mixin] `desktop-and-below`
- [mixin] `desktop`
- [mixin] `hide`

### Author

- Gert-Jan Meire

### bp-desktop-xl

Since 3.0.0

    $bp-desktop-xl: 1680px !default;

### Description

Defines the min-width breakpoint for extra large desktop screens.

### Used by

- [mixin] `desktop-xl`

### Author

- Gert-Jan Meire

### bp-max-content

Since 3.0.0

    $bp-max-content: 1280px !default;

### Description

Defines the max width of content in a content container.

### Used by

- [placeholder] `content-container`

### Author

- Gert-Jan Meire

### bp-container

Since 3.0.0

    $bp-container: 1680px !default;

### Description

Defines the max width of a grid container.

### Used by

- [placeholder] `container`
- [placeholder] `container`

### Author

- Gert-Jan Meire

### six-of-bp-container

Since 3.0.0

    $six-of-bp-container: 32rem !default;

### Description

Defines the width of six columns on container max-width. Used to limit with of block content.

### Author

- Bart Delrue

### grid-columns

Since 3.0.0

    $grid-columns: 12 !default;

### Description

Defines the number of grid columns for a given grid container.

### Author

- Gert-Jan Meire

### gutter-width

Since 3.0.0

    $gutter-width: 1.2rem !default;

### Description

Defines the width of grid gutters.

### Used by

- [mixin] `extra-wide`
- [mixin] `extra-wide`
- [mixin] `extra-wide`

### Author

- Gert-Jan Meire

### default-paragraph-margin

Since 3.0.0

    $default-paragraph-margin: 1.6rem !default;

### Description

Defines the default paragraph bottom margin.

### Author

- Bart Delrue

### default-font-family

Since 3.0.0

    $default-font-family: 'Fira Sans', sans-serif !default;

### Description

Defines the default font family Fira Sans.

### Used by

- [mixin] `button`
- [mixin] `field-base`

### Author

- Gert-Jan Meire

### default-font-weight

Since 3.0.0

    $default-font-weight: 400 !default;

### Description

Defines the default font weight.

### Author

- Gert-Jan Meire

### default-font-size

Since 3.0.0

    $default-font-size: 20px !default;

### Description

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.

### Author

- Gert-Jan Meire

### default-line-height

Since 3.0.0

    $default-line-height: 1.75 !default;

### Description

Defines the default line height.

### Author

- Gert-Jan Meire

#
theming

##
mixins

### field-base

Since 3.0.0

    @mixin field-base() { ... }

### Description

The general field atom styling.

### Parameters

None.

### Requires

- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [function] `svg-as-background`
- [function] `svg-as-background`
- [function] `svg-as-background`
- [function] `svg-as-background`
- [function] `svg-as-background`
- [variable] `default-font-family`
- [variable] `border-radius`
- [function] `color`
- [function] `svg-icon`
- [function] `svg-url`
- [function] `border-radius`

### Author

- Gert-Jan Meire

### choices-field-base

Since 3.0.0

    @mixin choices-field-base() { ... }

### Description

The base styling for choice fields.

- Radio buttons.
- Checkboxes.

### Parameters

None.

### Requires

- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `bold-text`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `bold-text`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [function] `border-radius`
- [function] `border-radius`
- [function] `border-radius`
- [function] `color`
- [function] `color`
- [function] `color`
- [function] `color`
- [function] `color`

### Author

- Gert-Jan Meire

#
tools

##
functions

### str-replace

Since 3.0.0

    @function str-replace($string, $search, $replace: '') { ... }

### Description

Helper function to replace characters in a string.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$string` | The needle. | `String` | — none
`$search` | The haystack. | `String` | — none
`$replace` | The separator. | `String` | `''`

### Used by

- [function] `svg-url`

### Author

- Gert-Jan Meire

### border-radius

Since 3.0.0

    @function border-radius($name, $border-radius: $border-radius) { ... }

### Description

Helper function to get a border radius.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$name` | The name of the requested border radius. | `String` | — none
`$border-radius` | The map with border radiuses defined in it. | `Map` | `$border-radius`

### Requires

- [variable] `border-radius`

### Used by

- [mixin] `button`
- [mixin] `field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`

### Author

- Gert-Jan Meire

### [private] str-split

Since 3.0.0

    @function str-split($string, $separator) { ... }

### Description

Split a string based on a separator string.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$string` | The string to be split. | `String` | — none
`$separator` | The separator by which to split the $string. | `String` | — none

### Used by

- [function] `set-themified-property`
- [mixin] `set-layout`
- [mixin] `set-layout`
- [mixin] `set-layout`
- [mixin] `set-layout`

### Author

- Gert-Jan Meire

### [private] number

Since 3.0.0

    @function number($value) { ... }

### Description

Cast a string to a number.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$value` | The string to turn into a number. | `String` | — none

### Used by

- [function] `set-themified-property`
- [mixin] `set-layout`
- [mixin] `set-layout`
- [mixin] `set-layout`
- [mixin] `set-layout`

### Author

- Gert-Jan Meire

### [private] svg-url

Since 3.0.0

    @function svg-url($svg) { ... }

### Description

Function to create an optimized svg url.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$svg` | The SVG code string to be converted for use in SASS. | `String` | — none

### Requires

- [function] `str-replace`

### Used by

- [mixin] `field-base`
- [function] `svg-as-background`

### Author

- Gert-Jan Meire

### [private] svg-icon

Since 3.0.0

    @function svg-icon($icon, $fill-color, $width, $height) { ... }

### Description

Return a colored svg icon.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$icon` | The icon to return. | `String` | — none
`$fill-color` | The color in which to return the svg icon. | `Color` | — none
`$width` | The width of the bounding box of the icon. | `Int` | — none
`$height` | The height of the bounding box of the icon. | `Int` | — none

### Used by

- [mixin] `field-base`
- [function] `svg-as-background`

### Author

- Gert-Jan Meire

### svg-as-background

Since 3.0.0

    @function svg-as-background($icon, $fill-color, $width, $height) { ... }

### Description

Return a colored svg icon as a background image.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$icon` | The icon to return. Refer to the private function svg-icon for the right key to use here. | `String` | — none
`$fill-color` | The color in which to return the svg icon. | `Color` | — none
`$width` | The width of the bounding box of the icon. | `Int` | — none
`$height` | The height of the bounding box of the icon. | `Int` | — none

### Requires

- [function] `svg-url`
- [function] `svg-icon`

### Used by

- [mixin] `field-base`
- [mixin] `field-base`
- [mixin] `field-base`
- [mixin] `field-base`
- [mixin] `field-base`

### Author

- Gert-Jan Meire

##
mixins

### clearfix

Since 3.0.0

    @mixin clearfix() { ... }

### Description

Clearfix

For modern browsers

1. The space content is one way to avoid an Opera bug when the contenteditable attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that are clearfixed.
2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements.

Source: http://nicolasgallagher.com/micro-clearfix-hack/

### Parameters

None.

### Used by

- [placeholder] `container`

### Author

- Gert-Jan Meire

### element-states

Since 3.0.0

    @mixin element-states($state, $state-hover, $property) { ... }

### Description

Color element states like active, visited, hover and focus.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$state` | The default state of the element. | `String` | — none
`$state-hover` | The hover state of the element. | `String` | — none
`$property` | The property to be styled. | `String` | — none

### Author

- Gert-Jan Meire

### no-link-style

Since 3.0.0

    @mixin no-link-style() { ... }

### Description

Force a link without link style.

### Parameters

None.

### Used by

- [placeholder] `no-link-style`

### Author

- Gert-Jan Meire

### [private] small-text

Since 3.0.0

    @mixin small-text() { ... }

### Description

Defines small text.

### Parameters

None.

### Used by

- [mixin] `button-small`

### Author

- Gert-Jan Meire

### [private] medium-text

Since 3.0.0

    @mixin medium-text() { ... }

### Description

Defines medium text.

### Parameters

None.

### Used by

- [mixin] `button-medium`

### Author

- Gert-Jan Meire

### [private] large-text

Since 3.0.0

    @mixin large-text() { ... }

### Description

Defines large text.

### Parameters

None.

### Used by

- [mixin] `button-large`

### Author

- Gert-Jan Meire

### [private] extra-large-text

Since 3.0.0

    @mixin extra-large-text() { ... }

### Description

Defines extra large text.

### Parameters

None.

### Author

- Gert-Jan Meire

### [private] bold-text

Since 3.0.0

    @mixin bold-text() { ... }

### Description

Defines bold text.

### Parameters

None.

### Used by

- [mixin] `button`
- [mixin] `choices-field-base`
- [mixin] `choices-field-base`
- [placeholder] `list-no-style`

### Author

- Helena Standaert

### [private] full-width

Since 3.0.0

    @mixin full-width() { ... }

### Description

Displays an element full-width on the page. Breaks out of it's parent container.

### Parameters

None.

### Author

- Helena Standaert

### [private] focus-bare

Since 3.0.0

    @mixin focus-bare() { ... }

### Description

Add accessibility focus style.

### Parameters

None.

### Requires

- [mixin] `theme`

### Author

- Gert-Jan Meire

### link-background

Since 3.0.0

    @mixin link-background($underline, $hover: null, $underline-exception: null, $hover-exception: null) { ... }

### Description

Applies a hover animation using the background. Typically applied to elements containing text.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$underline` | Underline color for the link. | `String` | — none
`$hover` | Background color for the link on hover. | `String` | `null`
`$underline-exception` | The exception value for the underline color. This is the exception optionally used in subthemes. | `String` | `null`
`$hover-exception` | The exception value for the background color. This is the exception optionally used in subthemes. | `String` | `null`

### Requires

- [mixin] `theme`
- [mixin] `theme-content`

### Author

- Helena Standaert

### reset-link-background

Since 3.0.0-beta9

    @mixin reset-link-background() { ... }

### Description

Undo default link styling.

### Parameters

None.

### Author

- Helena Standaert

### link-underlined

Since 3.0.0-beta9

    @mixin link-underlined($active-selector: null) { ... }

### Description

Link styling with an underline on-hover

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$active-selector` | Selector for active elements. The 'active' state styling is applied to this selector. | `String` | `null`

### Requires

- [mixin] `theme`
- [mixin] `theme`

### Author

- Helena Standaert

### table-backgrounds

Since 3.0.0-beta10

    @mixin table-backgrounds($child-selector: null) { ... }

### Description

Apply background colors for tables

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$child-selector` | Selector for child elements. | `String` | `null`

### Requires

- [mixin] `theme-content`
- [mixin] `theme-content`
- [mixin] `theme-content`

### Author

- Helena Standaert

#
General

##
functions

### map-deep-get

    @function map-deep-get($map, $keys...) { ... }

### Description

Deep get function to get a value from nested sass maps.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$map` | Sass map that contains the desired value. | `Map` | — none
`$keys` | Chain of keys that represent the position of the desired value. | `Arglist` | — none

### Returns

Any type —

Desired value.

### Used by

- [function] `z`

### Author

- Hugo Giraudel

### z

    @function z($layers) { ... }

### Description

Returns the z-index value for a certain layer. The z-layers map is defined in _vars.scss.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$layers` | Name of | `String` | — none

### Requires

- [function] `map-deep-get`
- [variable] `z-layers`

##
css

### .nowrap

    .nowrap { ... }

### Description

Prevent text wrapping.

### .bold

    .bold { ... }

### Description

Add bold styling

### .element-hidden

    .element-hidden { ... }

### Description

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-invisible

    .element-invisible { ... }

### Description

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.

### &.standalone-link:not(.no-icon)

    &.standalone-link:not(.no-icon) { ... }

### Description

Stand alone links.

### &[download]:not(.no-icon)

    &[download]:not(.no-icon) { ... }

### Description

Download links.

### &[href^="mailto:"]:not(.no-icon)

    &[href^="mailto:"]:not(.no-icon) { ... }

### Description

Mail links.

### &[href^="tel:"]:not(.no-icon)

    &[href^="tel:"]:not(.no-icon) { ... }

### Description

Phone links.

### &[href^="http://"]:not(.no-icon), &[href^="https://"]:not(.no-icon)

    &[href^="http://"]:not(.no-icon),
      &[href^="https://"]:not(.no-icon) { ... }

### Description

External links get an indicator.

### &[download]

    &[download] { ... }

### Description

Download links.

### &.standalone-link:not(.no-icon)

    &.standalone-link:not(.no-icon) { ... }

### Description

Stand alone links.

### .text-right

Since 3.0.0

    .text-right { ... }

### Description

Helper class to align text right.

### Author

- Gert-Jan Meire

### .text-left

Since 3.0.0

    .text-left { ... }

### Description

Helper class to align text left.

### Author

- Gert-Jan Meire

### [class*="cs--"] & a

    [class*="cs--"] & a { ... }

### Description

Links in the breadcrumb should never have icons.

### a

    a { ... }

### Description

All links shouldn't have an indicator.

### &-header

    &-header { ... }

### Description

Header

### &-content

    &-content { ... }

### Description

Content

### &-actions

    &-actions { ... }

### Description

Actions

### .modal-overlay

    .modal-overlay { ... }

### Description

Overlay

### [class*="cs--"] & a

    [class*="cs--"] & a { ... }

### Description

Links in the footer should never have icons.

### &-slot

    &-slot { ... }

### Description

Programme slot.

### &-detail

    &-detail { ... }

### Description

Programme detail

### a

    a { ... }

### Description

External links other than group Ghent get an indicator.

##
placeholders

### visually-hidden

    %visually-hidden { ... }

### Description

Visually hidden

### no-link-style

    %no-link-style { ... }

### Description

Force a link to have no link styling.

### Requires

- [mixin] `no-link-style`

### button-alert

Since 3.0.0

    %button-alert { ... }

### Description

Alert button type.

### Requires

- [mixin] `button-icon`
- [mixin] `button-icon`
- [variable] `box-shadow-primary`
- [function] `color`

### Author

- Gert-Jan Meire

### button-primary

Since 3.0.0

    %button-primary { ... }

### Description

Primary button type.

### Requires

- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`

### Author

- Gert-Jan Meire

### button-secondary

Since 3.0.0

    %button-secondary { ... }

### Description

Secondary button type.

### Requires

- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`
- [mixin] `theme`

### Author

- Gert-Jan Meire

### button-success

Since 3.0.0

    %button-success { ... }

### Description

Success button type.

### Requires

- [function] `color`

### Author

- Gert-Jan Meire

### a-remove-indicator

    %a-remove-indicator { ... }

### Description

External links other than group Ghent get an indicator.

### list-no-style

Since 3.0.0

    %list-no-style { ... }

### Description

Remove default styling from a list.

### Requires

- [mixin] `bold-text`

### Author

- Gert-Jan Meire

##
variables

### directions

    $directions: top, right, bottom, left;

### Description

Margin helper classes.

##
mixins

### hide

    @mixin hide() { ... }

### Description

Hiding helper classes.

### Parameters

None.

### Requires

- [variable] `bp-mobile`
- [variable] `bp-mobile`
- [variable] `bp-phablet`
- [variable] `bp-phablet`
- [variable] `bp-tablet`
- [variable] `bp-tablet`
- [variable] `bp-desktop`