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,

  // example nested z-index.
  example: (
    default: 100,
    image: -2
  )
);
View source

Description

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

Links

buttons

$buttons: (
  _base: (
    background: slategray,
    color: #fff,
    border: slategray,
    active-background: darken(slategray, 10%),
    active-color: #fff,
    active-border: darken(slategray, 10%)
  ),
  blue: (
    extend: _base
  )
);
View source

Description

Button config

Used by

layouts

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

Description

Layouts

Framework Components

mixins

btn

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

Description

Standard button style mixin

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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

Stringsmall

Requires

set-gutters

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

Description

Set the gutters of an element using padding.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutters

A map containing gutter sizes for each breakpoint.

Map none

Example

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

Used by

content-width

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

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

Value to use for content width.

String</code> or <code>Map</code> or <code>Number none
$collapse

Collapse gutters

String none
$config-map

Map to use for layout configuration.

String$layouts

Example

@include content-width(default)

Requires

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 Nameparameter Descriptionparameter Typeparameter 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)

Stringlarge
$breakpoint-map

A breakpoint map

Map$breakpoints

Example

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