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 sourceDescription
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 sourceDescription
z-index organization. See links below for more information.
Links
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 sourceDescription
Button config
Used by
- [mixin]
btn
global-transition-duration
$global-transition-duration: 0.15s;
View sourceDescription
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 sourceDescription
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 sourceDescription
Labels config
Used by
- [mixin]
label
layouts
$layouts: (
_base: (
width: $global-width,
gutters: $grid-column-gutter,
),
default: (
extend: _base,
),
);
View sourceDescription
Layouts
hr-styles
$hr-styles: (
green: $color-linear-horizontal-green,
purple: $color-linear-horizontal-purple,
blue: $color-linear-horizontal-blue,
);
View sourceDescription
Hr styles
Framework Components
mixins
btn
@mixin btn($button-key, $size: small) { ... }
View sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
Blockquote styles
Parameters
None.
Ungrouped
mixins
label
@mixin label() { ... }
View sourceDescription
Standard label style mixin
Parameters
None.
Requires
- [variable]
labels