Search

#
Configuration

##
variables

### drupal-tabs

    $drupal-tabs: (
      wrap: (
        background: #fafafa,
        border: #efefef,
      ),
      link: (
        color: #251923,
        background: #efefef,
        hover-color: #ffffff,
        hover-background: #251923,
      ),
      alt-colors: #b6c4c5 #575642 #4c4650 #251923,
    );

View source

### Description

Configuration for Drupal Admin tabs.

### z-layers

    $z-layers: (
      skip-link: 8000,
      ajax-throbber: 7000,
      debug: 1000,
      above: 1,
      default: 0,
      under: -1,
      bottomless-pit: -9999,
      dropdown: 800,
      popup: 900,
      menu: (
        block: 850,
        icon: 851,
      ),
    );

View source

### Description

z-index organization. See links below for more information.

### Links

- https://css-tricks.com/handling-z-index/
- http://www.sitepoint.com/using-sass-maps/

### buttons

    $buttons: (
      _base: (
        background: $color-primary-600,
        color: $color-white,
        hover-background: $color-primary-700,
        hover-color: $color-white,
        active-background: $color-primary-400,
        active-color: $color-gray-900,
      ),
      primary: (
        extend: _base,
      ),
    );

View source

### Description

Button config

### Used by

- [mixin] `btn`

### global-transition-duration

    $global-transition-duration: 0.15s;

View source

### Description

Animations variables

### links

    $links: (
      default: (
        color: $color-primary-400,
        font-weight: $global-weight-normal,
        hover-color: $color-primary-600,
        active-color: $color-primary-600,
      ),
      secondary: (
        color: $color-primary-600,
        font-weight: $global-weight-medium,
        hover-color: $color-primary-600,
        active-color: $color-primary-600,
      ),
      more: (
        color: $color-primary-600,
        font-weight: $global-weight-medium,
        hover-color: $color-primary-600,
        active-color: $color-gray-900,
      ),
      more-big: (
        color: $color-primary-600,
        font-weight: $global-weight-bold,
        hover-color: $color-primary-600,
        active-color: $color-gray-900,
      ),
      back: (
        color: $color-primary-600,
        font-weight: $global-weight-medium,
        hover-color: $color-primary-600,
        active-color: $color-gray-900,
      ),
      external: (
        color: $color-primary-600,
        font-weight: $global-weight-medium,
        hover-color: $color-primary-600,
        active-color: $color-primary-600,
      ),
    );

View source

### Description

Links config

### Used by

- [mixin] `link`

### labels

    $labels: (
      default: (
        color: $color-gray-900,
        border-color: $color-primary-600,
        background-color: $color-gray-100,
        active-color: $color-gray-900,
        active-border-color: $color-primary-600,
        active-background-color: $color-gray-300,
      ),
    );

View source

### Description

Labels config

### Used by

- [mixin] `label`

### layouts

    $layouts: (
      _base: (
        width: $global-width,
        gutters: $grid-column-gutter,
      ),
      default: (
        extend: _base,
      ),
    );

View source

### Description

Layouts

### hr-styles

    $hr-styles: (
      green: $color-linear-horizontal-green,
      purple: $color-linear-horizontal-purple,
      blue: $color-linear-horizontal-blue,
    );

View source

### Description

Hr styles

#
Framework Components

##
mixins

### btn

    @mixin btn($button-key, $size: small) { ... }

View source

### Description

Standard button style mixin

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$button-key` | the key in the $buttons map to use from config | `String` | — none
`$size` | the button size, choose from defined keywords in the mixin | `String` | `small`

### Requires

- [variable] `buttons`

### set-gutters

    @mixin set-gutters($gutters) { ... }

View source

### Description

Set the gutters of an element using padding.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$gutters` | A map containing gutter sizes for each breakpoint. | `Map` | — none

### Example

    @include set-gutters($grid-column-gutter)

### Used by

- [mixin] `content-width`

### content-width

    @mixin content-width($key, $collapse, $config-map: $layouts) { ... }

View source

### Description

Set a max-width, center aligned layout using config.

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$key` | Value to use for content width. | `String` or `Map` or `Number` | — none
`$collapse` | Collapse gutters | `String` | — none
`$config-map` | Map to use for layout configuration. | `String` | `$layouts`

### Example

    @include content-width(default)

### Requires

- [mixin] `set-gutters`

### link

    @mixin link($link-key) { ... }

View source

### Description

Standard link style mixin

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$link-key` | the key in the $buttons map to use from config | `String` | — none

### Example

    @include link(inline)

### Requires

- [variable] `links`

### font-vw-max

    @mixin font-vw-max($size, $breakpoint: large, $breakpoint-map: $breakpoints) { ... }

View source

### Description

Font VW Max - Converts a max size at a breakpoint to a VW that scales up to that max size

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$size` | The target max size in px | `Number` | — none
`$breakpoint` | The key of the bp at which max size is reached, or a specific value (ie - 1000px) | `String` | `large`
`$breakpoint-map` | A breakpoint map | `Map` | `$breakpoints`

### Example

    @include font-vw-max(20px, large)

### blockquote

    @mixin blockquote() { ... }

View source

### Description

Blockquote styles

### Parameters

None.

#
Ungrouped

##
mixins

### label

    @mixin label() { ... }

View source

### Description

Standard label style mixin

### Parameters

None.

### Requires

- [variable] `labels`