a11yVisibility

@mixin a11yVisibility($val) { ... }

Description

Parameters

Example

.visualHide { @include a11yVisibility('hidden'); }
.visualShow { @include a11yVisibility('visible'); }

valignChildren

@mixin valignChildren($alignment: center) { ... }

Description

Parameters

Example

@include valignChildren(center); // centers children in element
@include valignChildren(top); // positions children to top of element
@include valignChildren(bottom); // positions children to bottom of element

Requires

• [variable] flexAlignMap

imgFill

%imgFill { ... }

Description

Example

@extend %imgFill;

standardBorder

@mixin standardBorder($side: 'top', $size: 1px) { ... }

Description

Parameters

Example

@include standardBorder(); // default = top

// apply border to bottom OR
// 'top', 'left', 'right', 'bottom', 'all', 'none'
@include standardBorder('bottom');

// apply a custom size (default = 1px)
@include standardBorder('all', 4px);

atMediaUp

@mixin atMediaUp($breakpoint) { ... }

Description

Parameters

Content

This mixin allows extra content to be passed (through the @content directive). Role: [wraps conetnt in media query string matching breakpoint keyword]

Example

@include atMediaUp(medium) {
	body::after {
		content: "medium screens and larger can see me";
	}
}

breakpoint-map

$breakpoint-map: (
	s: $breakpoint-s,
	m: $breakpoint-m,
	l: $breakpoint-l,
	xl: $breakpoint-xl
);

Description

Map structure

isDark

@function isDark($color, $threshold: $brightness_threshold) { ... }

Description

Parameters

Returns

Example

isDark(#000)
// -> True

Used by

• [function] isLight
• [function] getPrimaryTextColor

isLight

@function isLight($color, $threshold: $brightness_threshold) { ... }

Description

Parameters

Returns

Example

isLight(#FFF)
// -> True

Requires

• [function] isDark

getPrimaryTextColor

@function getPrimaryTextColor($color) { ... }

Description

Parameters

Returns

Example

color: getPrimaryTextColor( $myBackgroundColor );

Requires

• [function] isDark

browser-ie11

@mixin browser-ie11() { ... }

Description

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Wraps content in a vendor-specific media query that is only read by IE11]

Example

// default styles
.someClass {
	padding: 0;
}

// IE11 overrides
@include browser-ie11() {
	.someClass {
		padding-top: $space;
	}
}

Used by

• [mixin] buttonBase

browser-lessThanIE

@mixin browser-lessThanIE($IE_version) { ... }

Description

Parameters

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Wraps content with a selector that includes a root body class name generated by IE conditional comments]

Example

.myClass {
	@include browser-lessThanIE( 10 ) { ...styles for all IE versions below 10... }
	@include browser-lessThanIE( 9 ) { ...styles for all IE versions below 9... }
}

Throws

• invalid argument for mixin

Requires

• [variable] root-browserIEPrefix

Used by

• [mixin] flexParent
• [mixin] flexParent
• [mixin] flexChild
• [mixin] flexChild
• [mixin] flexChild

browser-modern

@mixin browser-modern() { ... }

Description

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Wraps content with a selector that includes a root body class name generated by IE conditional comments]

Example

.myClass {
	@include browser-modern() { ...applies to all browsers except IE 9 and below... }
}

Requires

• [variable] root-browserIEPrefix

buttonPersonality

%buttonPersonality { ... }

Description

Used by

• [mixin] buttonBase

buttonBase

@mixin buttonBase() { ... }

Description

Parameters

None.

Example

@include buttonBase();

Requires

• [mixin] browser-ie11
• [placeholder] buttonPersonality
• [variable] defaultRadius
• [variable] font-size-small
• [variable] line-height-smallText
• [variable] space-half
• [variable] space-double

buttonColor

@mixin buttonColor($bgColor, $hoverColor: darken($bgColor, 5%), $activeColor: darken($bgColor, 12%), $textColor: getPrimaryTextColor($bgColor), $textTransition: true) { ... }

Description

Parameters

Example

@include buttonColor($bgColor: $C_red);
@include buttonColor(
	$bgColor: $C_red,
	$hoverColor: darken($C_red, 10%),
	$activeColor: darken($C_red, 15%)
);
@include buttonColor(
	$bgColor: $C_red,
	$hoverColor: darken($C_red, 10%),
	$activeColor: darken($C_red, 15%),
	$textTransition: false
);

Requires

• [mixin] color-all

getGradientList

@function getGradientList($baseColor, $numColors, $spectrum: -90deg) { ... }

Parameters

Returns

Example

@each $color in getGradientList('blue', 12) {
	// $color = step in a 12 step gradient from 'blue'
}

rgba-to-hex

@function rgba-to-hex($rgba, $bgColor) { ... }

Parameters

Returns

Example

.example {
	background-color: rgba-to-hex($C_textHint, $C_white);
}

color-svg

@mixin color-svg($color, $isImportant) { ... }

Description

Parameters

Example

.someSVG {
	@include color-svg(pink);
}

Used by

• [mixin] color-all

color-all

@mixin color-all($color, $isImportant) { ... }

Description

Parameters

Example

.someSVG {
	@include color-all(black);
}

Requires

• [mixin] color-svg

Used by

• [mixin] buttonColor
• [placeholder] text--secondary
• [placeholder] text--secondary
• [placeholder] text--tertiary
• [placeholder] text--tertiary
• [placeholder] text--link
• [placeholder] text--link
• [placeholder] text--attention
• [placeholder] text--disabled
• [placeholder] text--disabled

brightness_threshold

$brightness_threshold: 160;

Description

Type

Number

See

• [function] isDark
• [function] isLight

C_contrast[DargBG|LightBG]

$C_contrast[DargBG|LightBG]: $C_white;

Description

Type

Color

See

• [function] getPrimaryTextColor

root-debugEnable

$root-debugEnable: "enableDebug";

Description

Type

String

root-language-map

$root-language-map: (
	"en": ".lang_en",
	"es": ".lang_es",
	"de": ".lang_es",
	"fr": ".lang_fr",
	"it": ".lang_it",
	"ja": ".lang_ja",
	"pt": ".lang_pt",
	"pl": ".lang_pl",
	"nl": ".lang_nl",
	"ko": ".lang_ko",
	"sv": ".lang_sv"
);

Description

Type

String

Used by

• [mixin] i18n-only
• [mixin] i18n-exclude

root-browserIEPrefix

$root-browserIEPrefix: "ieRoot_";

Description

Type

String

Used by

• [mixin] browser-lessThanIE
• [mixin] browser-modern

pseudoDisplay

@mixin pseudoDisplay($value: block) { ... }

Description

Parameters

Example

@include pseudoDisplay($value: block);

flexParent

@mixin flexParent($orientation, $useFallback: true) { ... }

Description

Parameters

Example

@include flexParent('row'); // displays element as flex with children in row orientation
@include flexParent('column'); // displays element as flex with children in column orientation
@include flexParent('row', false); // optional second argument allows disabling of IE table display fallbacks

Requires

• [mixin] browser-lessThanIE
• [mixin] browser-lessThanIE

flexChild

@mixin flexChild($variant, $useFallback: true) { ... }

Description

Parameters

Example

@include flexChild('grow'); // sets element to grow to fill remaining space in flex parent
@include flexChild('shrink'); // sets element to shirnk to the width of its content
@include flexChild('shrink', false); // optional second argument allows disabling of IE table display fallbacks

Requires

• [mixin] browser-lessThanIE
• [mixin] browser-lessThanIE
• [mixin] browser-lessThanIE

clearfix

%clearfix { ... }

Description

Example

.parentWithFloatedChildren {
	@extend %clearfix;
}

resetFieldStyles

@mixin resetFieldStyles() { ... }

Description

Parameters

None.

Example

input.reset {
	@include resetFieldStyles();
}

formInput

@mixin formInput() { ... }

Description

Parameters

None.

Example

input {
	@include formInput();
}

Requires

• [variable] defaultRadius
• [variable] space-quarter
• [variable] space

formInput--disabled

@mixin formInput--disabled() { ... }

Description

Parameters

None.

Example

input[disabled] {
	@include formInput--disabled();
}

formInput--hovered

@mixin formInput--hovered() { ... }

Description

Parameters

None.

Example

input:hover {
	@include formInput--hovered();
}

formInput--focused

@mixin formInput--focused() { ... }

Description

Parameters

None.

Example

input:focus {
	@include formInput--focused();
}

i18n-only

@mixin i18n-only($langs) { ... }

Description

Parameters

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Wraps content in a selector that includes a root body className specific to provided languages]

Example

@include i18n-only('en') {
	text-transform: uppercase; // only upercasse for English
}

@include i18n-only('en', 'it') { ... } // multiple languages supported

Requires

• [variable] root-language-map

i18n-exclude

@mixin i18n-exclude($langs) { ... }

Description

Parameters

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Wraps content in a selector that includes a root body className specific to provided languages]

Example

@include i18n-exclude('de') {
	text-transform: uppercase; // uppercase every language except German
}

@include i18n-exclude('ja', 'es', 'de') { ... } // multiple languages supported

Requires

• [variable] root-language-map

modal-width

$modal-width: $width-modal;

Description

Type

Value(px)

bounds

$bounds: $width-bounds;

Description

Type

Value(px)

bounds-wide

$bounds-wide: $width-bounds-wide;

Description

Type

Value(px)

smallRadius

$smallRadius: $radius-small;

Description

Type

Value(px)

defaultRadius

$defaultRadius: $radius-normal;

Description

Type

Value(px)

Used by

• [mixin] buttonBase
• [mixin] formInput

largeRadius

$largeRadius: $radius-large;

Description

Type

Value(px)

zindex-map

$zindex-map: (
	main: $zindex-main,
	floating-content: $zindex-floatingContent,
	shade: $zindex-shade,
	shade-content: $zindex-shadeContent,
	modal: $zindex-modal,
	popup: $zindex-popup
);

Description

Map structure

display-values

$display-values: (none, block, flex, inline, inline-block, inline-flex, grid);

Description

Type

List

See

• [function] str-firstCharToUpper

flexJustifyMap

$flexJustifyMap: (
	"flexEnd": flex-end,
	"center": center,
	"spaceBetween": space-between,
	"spaceAround": space-around
);

Description

Map structure

flexAlignMap

$flexAlignMap: ("top": flex-start, "bottom": flex-end, "center": center);

Description

Map structure

Used by

• [mixin] valignChildren

list--reset

%list--reset { ... }

Description

Example

.someSVG {
	@extend %list--reset;
}

centerAbsolute

@mixin centerAbsolute($elementWidth) { ... }

Description

Parameters

Example

.myClass {
	@include centerAbsolute($elementWidth);
	margin-top: 10vh; // specify your own `top` or `margin-top` value
}

fullScreenAbsolute

@mixin fullScreenAbsolute() { ... }

Description

Parameters

None.

Example

.myOverlay {
	@include fullScreenAbsolute();
	background-color: rgba(0,0,0,0.7);
}

block

$block: $block-1;

Description

Type

Value(px)

block-2

$block-2: $block-2;

Description

Type

Value(px)

block-3

$block-3: $block-3;

Description

Type

Value(px)

block-4

$block-4: $block-4;

Description

Type

Value(px)

block-5

$block-5: $block-5;

Description

Type

Value(px)

block-6

$block-6: $block-6;

Description

Type

Value(px)

block-7

$block-7: $block-7;

Description

Type

Value(px)

space

$space: $space-1;

Description

Type

Value(px)

Used by

• [mixin] formInput

space-2

$space-2: $space-2;

Description

Type

Value(px)

space-3

$space-3: $space-3;

Description

Type

Value(px)

space-4

$space-4: $space-4;

Description

Type

Value(px)

space-5

$space-5: $space-5;

Description

Type

Value(px)

space-6

$space-6: $space-6;

Description

Type

Value(px)

space-7

$space-7: $space-7;

Description

Type

Value(px)

space-8

$space-8: $space-8;

Description

Type

Value(px)

space-and-half

$space-and-half: $space-1 * 1.5;

Description

Type

Value(px)

space-double

$space-double: $space-double;

Description

Type

Value(px)

Used by

• [mixin] buttonBase

space-half

$space-half: $space-half;

Description

Type

Value(px)

Used by

• [mixin] buttonBase

space-quarter

$space-quarter: $space-1 / 4;

Description

Type

Value(px)

Used by

• [mixin] formInput

media-xs

$media-xs: $space-1;

Type

Value(px)

media-s

$media-s: $space-2;

Type

Value(px)

media-m

$media-m: $space-3;

Type

Value(px)

media-l

$media-l: $block;

Type

Value(px)

media-xl

$media-xl: $block-2;

Type

Value(px)

media-xxl

$media-xxl: $space-6;

Type

Value(px)

media-map

$media-map: (
	xs: $media-xs,
	s: $media-s,
	m: $media-m,
	l: $media-l,
	xl: $media-xl,
	xxl: $media-xxl
);

Map structure

shadow

%shadow { ... }

Description

Example

@extend %shadow;

shadowOnHover

@mixin shadowOnHover($hasRestingShadow: false) { ... }

Description

Parameters

Example

@include shadowOnHover(); // default = true

// apply more shadow to an element that already has a shadow
@include shadowOnHover(true);

circle

@mixin circle($color, $size) { ... }

Description

Parameters

Example

.myCircle {
	@mixin circle(red, 20px);
}

str-firstCharToUpper

@function str-firstCharToUpper($string) { ... }

Description

Parameters

Returns

Example

str-firstCharToUpper('snowflake') // -> 'Snowflake'
.special#{str-firstCharToUpper('snowflake')} // -> .specialSnowflake

str-replace

@function str-replace($string, $search, $replace: '') { ... }

Description

Parameters

Returns

Example

str-replace('inline-block', '-', '')
// -> 'inlineblock'

.display--#{str-replace('inline-block', '-block', 'Block')}
// -> .display--inlineBlock

text--pageTitle

%text--pageTitle { ... }

Description

Requires

• [variable] font-size-title

text--sectionTitle

%text--sectionTitle { ... }

Description

Requires

• [variable] font-size-big2
• [variable] line-height

text--display1

%text--display1 { ... }

Description

Requires

• [variable] font-size-display1

text--display2

%text--display2 { ... }

Description

Requires

• [variable] font-size-display2

text--display3

%text--display3 { ... }

Description

Requires

• [variable] font-size-display3

text--secondary

%text--secondary { ... }

Description

Requires

• [mixin] color-all
• [mixin] color-all

Used by

• [placeholder] text--caption

text--tertiary

%text--tertiary { ... }

Description

Requires

• [mixin] color-all
• [mixin] color-all

Used by

• [placeholder] text--hint

text--big

%text--big { ... }

Description

Requires

• [variable] font-size-big
• [variable] line-height-largeText

text--small

%text--small { ... }

Description

Requires

• [variable] font-size-small
• [variable] line-height-smallText

Used by

• [placeholder] text--caption

text--tiny

%text--tiny { ... }

Description

Requires

• [variable] font-size-tiny
• [variable] line-height-smallText

text--hint

%text--hint { ... }

Description

Requires

• [placeholder] text--tertiary

text--link

%text--link { ... }

Description

Requires

• [mixin] color-all
• [mixin] color-all

text--caption

%text--caption { ... }

Description

Requires

• [placeholder] text--small
• [placeholder] text--secondary

text--attention

%text--attention { ... }

Description

Requires

• [mixin] color-all

text--mono

%text--mono { ... }

Description

Requires

• [variable] font--mono

text--disabled

%text--disabled { ... }

Description

Requires

• [mixin] color-all
• [mixin] color-all

wrapNice

%wrapNice { ... }

Description

font--mono

$font--mono: Monaco, "Andale Mono", "Courier New", monospace;

Description

Type

String

Used by

• [placeholder] text--mono

font-size-tiny

$font-size-tiny: 12px;

Type

Value(px)

Used by

• [placeholder] text--tiny

font-size-small

$font-size-small: 14px;

Type

Value(px)

Used by

• [mixin] buttonBase
• [placeholder] text--small

font-size

$font-size: 16px;

Type

Value(px)

font-size-tearsheet

$font-size-tearsheet: 24px;

Type

Value(px)

font-size-big2

$font-size-big2: 20px;

Type

Value(px)

Used by

• [placeholder] text--sectionTitle

font-size-big

$font-size-big: 24px;

Type

Value(px)

Used by

• [placeholder] text--big

font-size-title

$font-size-title: 32px;

Type

Value(px)

Used by

• [placeholder] text--pageTitle

font-size-display3

$font-size-display3: 28px;

Type

Value(px)

Used by

• [placeholder] text--display3

font-size-display2

$font-size-display2: 34px;

Type

Value(px)

Used by

• [placeholder] text--display2

font-size-display1

$font-size-display1: 42px;

Type

Value(px)

Used by

• [placeholder] text--display1

W_normal

$W_normal: 400;

Type

Number

W_medium

$W_medium: 500;

Type

Number

W_bold

$W_bold: 600;

Type

Number

line-height-largeText

$line-height-largeText: 1.1;

Type

String

Used by

• [placeholder] text--big

line-height

$line-height: 1.45;

Type

String

Used by

• [placeholder] text--sectionTitle

line-height-smallText

$line-height-smallText: 1.6;

Type

String

Used by

• [mixin] buttonBase
• [placeholder] text--small
• [placeholder] text--tiny

line-height-runningText

$line-height-runningText: 1.8;

Type

String

width-columns

@mixin width-columns($nCols) { ... }

Description

Parameters

Example

.myInlineblockList--3column > li {
	@mixin width-columns(3);
}