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,
// example nested z-index.
example: (
default: 100,
image: -2
)
);
View sourceDescription
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%)
),
primary: (
extend: _base
)
);
View sourceDescription
Button config
Used by
- [mixin]
btn
links
$links: (
default: (
color: navy,
font-weight: 400,
active-color: skyblue
),
primary: (
extend: _base
)
);
View sourceDescription
Links config
Used by
- [mixin]
link
layouts
$layouts: (
_base: (
width: $global-width,
gutters: $grid-column-gutter
),
default: (
extend: _base
),
);
View sourceDescription
Layouts
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)