utilities
corners() mixin
Apply the brand three-rounded-corners look to an element corners in $component-sizes map located in _scale.scss
@mixin corners { /* ... */ }.foo {
@include corners;
}Usage (scss)
.foo {
border-radius: 6px 6px 0;
}Output (css)
shadow() mixin
Apply a standard box-shadow to an element
@mixin shadow(
$inset: null
) { /* ... */ }Parameters
| Name | Description | Type | Default |
|---|---|---|---|
$inset | Optionally make the shadow inset. | Boolean | null |
.foo {
@include shadow('inset');
}Usage (scss)
.foo {
box-shadow: 0 0 0.34722rem rgba(37, 41, 44, 0.6) inset;
}Output (css)
text-overflow() mixin
Truncates text and appends ellipsis when extending beyond allowed space
@mixin text-overflow { /* ... */ }outline() mixin
Focus outline state with optional negative offset
@mixin outline(
$offset: null
) { /* ... */ }Parameters
| Name | Description | Type | Default |
|---|---|---|---|
$offset | Use 'offset' if you want to include the negative offset | string | null |
.no-offset {
@include outline;
}
.offset {
@include outline('offset');
}Usage (scss)
.no-offset {
outline: 2px dashed #25292c;
}
.offset {
outline: 2px dashed #25292c;
outline-offset: -2px;
}Output (css)
circlecount() mixin
Displays Number in Circle for unread updates or friend invites
@mixin circlecount(
$color,
$translate-x
) { /* ... */ }Parameters
| Name | Description | Type | Default |
|---|---|---|---|
$color | Background color for contrasted mixin | string | — none |
$translate-x | TranslateX value from top right corner | string | — none |
Requires
[mixin]shadow
safari-vh-fix() mixin
If CSS var is supported, this buggyFill will work on iOS 9.3+ only will degrade on a buggy 100vh on older version of iOS
@mixin safari-vh-fix { /* ... */ }$time variable
Unit of time for consistent transitions
$time: 300ms;$inline-icons variable
Inline Icons transform amount
$inline-icons: -0.125em;$icon-text-spacing variable
Equal space between Icon + Text
$icon-text-spacing: 0.25rem;