animations

variables

bpk-duration-base

$bpk-duration-base: 400ms !default;

bpk-duration-sm

$bpk-duration-sm: 200ms !default;

Used by

bpk-duration-xs

$bpk-duration-xs: 50ms !default;

autosuggest

variables

bpk-autosuggest-list-background-color

$bpk-autosuggest-list-background-color: rgb(255, 255, 255) !default;

bpk-autosuggest-list-item-active-background-color

$bpk-autosuggest-list-item-active-background-color: rgb(221, 221, 229) !default;

bpk-autosuggest-list-item-highlighted-background-color

$bpk-autosuggest-list-item-highlighted-background-color: rgb(241, 242, 248) !default;

badges

mixins

bpk-badge

@mixin bpk-badge() { ... }

Description

Standard badge.

Parameters

None.

Example

.selector {
  @include bpk-badge();
}

Requires

Used by

bpk-badge--centered

@mixin bpk-badge--centered() { ... }

Description

Centered badge. Modifies the bpk-badge mixin.

Parameters

None.

Example

.selector {
  @include bpk-badge();
  @include bpk-badge--centered();
}

Requires

bpk-badge--docked-right

@mixin bpk-badge--docked-right() { ... }

Description

Right-docked badge. Modifies the bpk-badge mixin.

Parameters

None.

Example

.selector {
  @include bpk-badge();
  @include bpk-badge--docked-right();
}

Requires

bpk-badge--docked-left

@mixin bpk-badge--docked-left() { ... }

Description

Left-docked badge. Modifies the bpk-badge mixin.

Parameters

None.

Example

.selector {
  @include bpk-badge();
  @include bpk-badge--docked-left();
}

Requires

bpk-badge--success

@mixin bpk-badge--success() { ... }

Description

Success badge. Modifies the bpk-badge mixin.

Parameters

None.

Example

.selector {
  @include bpk-badge();
  @include bpk-badge--success();
}

Requires

bpk-badge--destructive

@mixin bpk-badge--destructive() { ... }

Description

Destructive badge. Modifies the bpk-badge mixin.

Parameters

None.

Example

.selector {
  @include bpk-badge();
  @include bpk-badge--destructive();
}

Requires

bpk-badge--light

@mixin bpk-badge--light() { ... }

Description

Light badge. Modifies the bpk-badge mixin.

Parameters

None.

Example

.selector {
  @include bpk-badge();
  @include bpk-badge--light();
}

Requires

bpk-badge--inverse

@mixin bpk-badge--inverse() { ... }

Description

Inverse badge. Modifies the bpk-badge mixin.

Parameters

None.

Example

.selector {
  @include bpk-badge();
  @include bpk-badge--inverse();
}

Requires

bpk-badge--outline

@mixin bpk-badge--outline() { ... }

Description

Outline badge. Modifies the bpk-badge mixin.

Parameters

None.

Example

.selector {
  @include bpk-badge();
  @include bpk-badge--outline();
}

Requires

variables

bpk-badge-background-color

$bpk-badge-background-color: rgb(255, 181, 77) !default;

Used by

bpk-badge-centered-vertical-align

$bpk-badge-centered-vertical-align: text-bottom !default;

Used by

bpk-badge-padding-x

$bpk-badge-padding-x: .375rem !default;

Used by

bpk-badge-padding-y

$bpk-badge-padding-y: 0 !default;

Used by

borders

mixins

[private] _bpk-border

@mixin _bpk-border() { ... }

Description

Full border utility.

Parameters

None.

Used by

[private] _bpk-border-top

@mixin _bpk-border-top() { ... }

Description

Top border utility.

Parameters

None.

Used by

[private] _bpk-border-right

@mixin _bpk-border-right() { ... }

Description

Right border utility.

Parameters

None.

Used by

[private] _bpk-border-bottom

@mixin _bpk-border-bottom() { ... }

Description

Bottom border utility.

Parameters

None.

Used by

[private] _bpk-border-left

@mixin _bpk-border-left() { ... }

Description

Left border utility.

Parameters

None.

Used by

bpk-border-sm

@mixin bpk-border-sm() { ... }

Description

Small "1px" border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-sm($bpk-color-sky-gray-tint-06);
}

Requires

Used by

bpk-border-top-sm

@mixin bpk-border-top-sm() { ... }

Description

Small "1px" top border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-top-sm($bpk-color-sky-gray-tint-06);
}

Requires

bpk-border-right-sm

@mixin bpk-border-right-sm() { ... }

Description

Small "1px" right border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-right-sm($bpk-color-sky-gray-tint-06);
}

Requires

bpk-border-bottom-sm

@mixin bpk-border-bottom-sm() { ... }

Description

Small "1px" bottom border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06);
}

Requires

bpk-border-left-sm

@mixin bpk-border-left-sm() { ... }

Description

Small "1px" left border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-left-sm($bpk-color-sky-gray-tint-06);
}

Requires

bpk-border-lg

@mixin bpk-border-lg() { ... }

Description

Large "2px" border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-lg($bpk-color-sky-gray-tint-06);
}

Requires

Used by

bpk-border-top-lg

@mixin bpk-border-top-lg() { ... }

Description

Large "2px" top border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-top-lg($bpk-color-sky-gray-tint-06);
}

Requires

bpk-border-right-lg

@mixin bpk-border-right-lg() { ... }

Description

Large "2px" right border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-right-lg($bpk-color-sky-gray-tint-06);
}

Requires

Used by

bpk-border-bottom-lg

@mixin bpk-border-bottom-lg() { ... }

Description

Large "2px" bottom border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-bottom-lg($bpk-color-sky-gray-tint-06);
}

Requires

bpk-border-left-lg

@mixin bpk-border-left-lg() { ... }

Description

Large "2px" left border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-left-lg($bpk-color-sky-gray-tint-06);
}

Requires

Used by

bpk-border-xl

@mixin bpk-border-xl() { ... }

Description

Extra large "3px" border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-xl($bpk-color-sky-gray-tint-06);
}

Requires

Used by

bpk-border-top-xl

@mixin bpk-border-top-xl() { ... }

Description

Extra large "3px" top border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-top-xl($bpk-color-sky-gray-tint-06);
}

Requires

bpk-border-right-xl

@mixin bpk-border-right-xl() { ... }

Description

Extra large "3px" right border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-right-xl($bpk-color-sky-gray-tint-06);
}

Requires

bpk-border-bottom-xl

@mixin bpk-border-bottom-xl() { ... }

Description

Extra large "3px" bottom border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-bottom-xl($bpk-color-sky-gray-tint-06);
}

Requires

bpk-border-left-xl

@mixin bpk-border-left-xl() { ... }

Description

Extra large "3px" left border.

Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.

Parameters

None.

Example

.selector {
  @include bpk-border-left-xl($bpk-color-sky-gray-tint-06);
}

Requires

variables

bpk-border-size-lg

$bpk-border-size-lg: 2px !default;

Used by

bpk-border-size-sm

$bpk-border-size-sm: 1px !default;

Used by

bpk-border-size-xl

$bpk-border-size-xl: 3px !default;

Used by

box-shadows

mixins

bpk-box-shadow-sm

@mixin bpk-box-shadow-sm() { ... }

Description

Small box shadow.

Parameters

None.

Example

.selector {
  @include bpk-box-shadow-sm();
}

Requires

Used by

bpk-box-shadow-lg

@mixin bpk-box-shadow-lg() { ... }

Description

Large box shadow.

Parameters

None.

Example

.selector {
  @include bpk-box-shadow-lg();
}

Requires

Used by

bpk-box-shadow-xl

@mixin bpk-box-shadow-xl() { ... }

Description

Extra large box shadow.

Parameters

None.

Example

.selector {
  @include bpk-box-shadow-xl();
}

Requires

variables

bpk-box-shadow-lg

$bpk-box-shadow-lg: 0px 4px 14px 0px rgba(37,32,31,.25) !default;

Used by

bpk-box-shadow-sm

$bpk-box-shadow-sm: 0px 1px 3px 0px rgba(37,32,31,.3) !default;

Used by

bpk-box-shadow-xl

$bpk-box-shadow-xl: 0px 12px 50px 0px rgba(37,32,31,.25) !default;

Used by

breakpoints

mixins

bpk-breakpoint-mobile

@mixin bpk-breakpoint-mobile() { ... }

Description

Breakpoint to target mobile viewports.

Parameters

None.

Example

.selector {
  @include bpk-breakpoint-mobile {
    /* mobile viewport scss goes here */
  }

  /* tablet & desktop viewport scss goes here */
}

Requires

bpk-breakpoint-tablet

@mixin bpk-breakpoint-tablet() { ... }

Description

Breakpoint to target mobile & tablet viewports.

Parameters

None.

Example

.selector {
  @include bpk-breakpoint-tablet {
    /* mobile & tablet viewport scss goes here */
  }

  /* desktop viewport scss goes here */
}

Requires

bpk-breakpoint-tablet-only

@mixin bpk-breakpoint-tablet-only() { ... }

Description

Breakpoint to target tablet viewports.

Parameters

None.

Example

.selector {
  @include bpk-breakpoint-tablet-only {
    /* tablet viewport scss goes here */
  }

  /* mobile & desktop viewport scss goes here */
}

Requires

bpk-breakpoint-above-mobile

@mixin bpk-breakpoint-above-mobile() { ... }

Description

Breakpoint to target tablet & desktop viewports.

Parameters

None.

Example

.selector {
  @include bpk-breakpoint-above-mobile {
    /* tablet & desktop viewport scss goes here */
  }

  /* mobile viewport scss goes here */
}

Requires

bpk-breakpoint-above-tablet

@mixin bpk-breakpoint-above-tablet() { ... }

Description

Breakpoint to target desktop viewports.

Parameters

None.

Example

.selector {
  @include bpk-breakpoint-above-tablet {
    /* desktop viewport scss goes here */
  }

  /* mobile & tablet viewport scss goes here */
}

Requires

variables

bpk-breakpoint-desktop

$bpk-breakpoint-desktop: 71.25rem !default;

Used by

bpk-breakpoint-mobile

$bpk-breakpoint-mobile: 32.25rem !default;

bpk-breakpoint-query-above-mobile

$bpk-breakpoint-query-above-mobile: "(min-width: 32.3125rem)" !default;

Used by

bpk-breakpoint-query-above-tablet

$bpk-breakpoint-query-above-tablet: "(min-width: 50.3125rem)" !default;

Used by

bpk-breakpoint-query-mobile

$bpk-breakpoint-query-mobile: "(max-width: 32.25rem)" !default;

Used by

bpk-breakpoint-query-tablet

$bpk-breakpoint-query-tablet: "(max-width: 50.25rem)" !default;

Used by

bpk-breakpoint-query-tablet-only

$bpk-breakpoint-query-tablet-only: "(min-width: 32.3125rem) and (max-width: 50.25rem)" !default;

Used by

bpk-breakpoint-tablet

$bpk-breakpoint-tablet: 50.25rem !default;

buttons

mixins

bpk-button

@mixin bpk-button() { ... }

Description

Standard button.

Parameters

None.

Example

.selector {
  @include bpk-button();
}

Requires

Used by

bpk-button--large

@mixin bpk-button--large() { ... }

Description

Large button. Modifies the bpk-button mixin.

Parameters

None.

Example

.selector {
  @include bpk-button();
  @include bpk-button--large();
}

Requires

Used by

bpk-button--secondary

@mixin bpk-button--secondary() { ... }

Description

Secondary button. Modifies the bpk-button mixin.

Parameters

None.

Example

.selector {
  @include bpk-button();
  @include bpk-button--secondary();
}

Requires

Used by

bpk-button--destructive

@mixin bpk-button--destructive() { ... }

Description

Destructive button. Modifies the bpk-button & bpk-button--secondary mixins.

Parameters

None.

Example

.selector {
  @include bpk-button();
  @include bpk-button--secondary();
  @include bpk-button--destructive();
}

Requires

bpk-button--outline

@mixin bpk-button--outline() { ... }

Description

Outline button. Modifies the bpk-button & bpk-button--secondary mixins.

Parameters

None.

Example

.selector {
  @include bpk-button();
  @include bpk-button--outline();
}

Requires

bpk-button--selected

Deprecated!

Use a checkbox or standard button instead.

@mixin bpk-button--selected() { ... }

Description

Selected button. Modifies the bpk-button mixin.

Parameters

None.

Example

.selector {
  @include bpk-button();
  @include bpk-button--selected();
}

Requires

bpk-button--link

@mixin bpk-button--link() { ... }

Description

Link-style button. Modifies the bpk-button mixin.

Parameters

None.

Example

.selector {
  @include bpk-button();
  @include bpk-button--link();
}

Requires

bpk-button--icon-only

@mixin bpk-button--icon-only() { ... }

Description

Icon-only button. Modifies the bpk-button mixin.

Parameters

None.

Example

.selector {
  @include bpk-button();
  @include bpk-button--icon-only();
}

Requires

bpk-button--large-icon-only

@mixin bpk-button--large-icon-only() { ... }

Description

Large icon-only button. Modifies the bpk-button & bpk-button--large mixins.

Parameters

None.

Example

.selector {
  @include bpk-button();
  @include bpk-button--large();
  @include bpk-button--large-icon-only();
}

Requires

bpk-button--featured

@mixin bpk-button--featured() { ... }

Description

Featured button. Modifies the bpk-button

Parameters

None.

Example

.selector {
  @include bpk-button();
  @include bpk-button--featured();
}

Requires

variables

bpk-button-active-background-color

$bpk-button-active-background-color: rgb(0, 106, 97) !default;

Used by

bpk-button-active-background-image

$bpk-button-active-background-image: none !default;

Used by

bpk-button-active-box-shadow

$bpk-button-active-box-shadow: none !default;

Used by

bpk-button-active-color

$bpk-button-active-color: rgb(255, 255, 255) !default;

Used by

bpk-button-background-color

$bpk-button-background-color: rgb(0, 166, 152) !default;

Used by

bpk-button-border-radius

$bpk-button-border-radius: .25rem !default;

Used by

bpk-button-box-shadow

$bpk-button-box-shadow: none !default;

Used by

bpk-button-color

$bpk-button-color: rgb(255, 255, 255) !default;

Used by

bpk-button-destructive-active-background-color

$bpk-button-destructive-active-background-color: rgb(255, 255, 255) !default;

Used by

bpk-button-destructive-active-border-color

$bpk-button-destructive-active-border-color: rgb(209, 67, 91) !default;

Used by

bpk-button-destructive-active-box-shadow

$bpk-button-destructive-active-box-shadow: 0 0 0 3px #d1435b inset !default;

Used by

bpk-button-destructive-active-color

$bpk-button-destructive-active-color: rgb(209, 67, 91) !default;

Used by

bpk-button-destructive-background-color

$bpk-button-destructive-background-color: rgb(255, 255, 255) !default;

Used by

bpk-button-destructive-border-color

$bpk-button-destructive-border-color: rgb(221, 221, 229) !default;

Used by

bpk-button-destructive-box-shadow

$bpk-button-destructive-box-shadow: 0 0 0 2px #DDDDE5 inset !default;

bpk-button-destructive-color

$bpk-button-destructive-color: rgb(209, 67, 91) !default;

Used by

bpk-button-destructive-disabled-background-color

$bpk-button-destructive-disabled-background-color: rgb(221, 221, 229) !default;

Used by

bpk-button-destructive-disabled-background-image

$bpk-button-destructive-disabled-background-image: none !default;

Used by

bpk-button-destructive-disabled-box-shadow

$bpk-button-destructive-disabled-box-shadow: none !default;

Used by

bpk-button-destructive-disabled-color

$bpk-button-destructive-disabled-color: rgb(178, 178, 191) !default;

Used by

bpk-button-destructive-hover-background-color

$bpk-button-destructive-hover-background-color: rgb(255, 255, 255) !default;

Used by

bpk-button-destructive-hover-background-image

$bpk-button-destructive-hover-background-image: none !default;

Used by

bpk-button-destructive-hover-border-color

$bpk-button-destructive-hover-border-color: rgb(209, 67, 91) !default;

Used by

bpk-button-destructive-hover-box-shadow

$bpk-button-destructive-hover-box-shadow: 0 0 0 2px #d1435b inset !default;

Used by

bpk-button-destructive-hover-color

$bpk-button-destructive-hover-color: rgb(209, 67, 91) !default;

Used by

bpk-button-disabled-background-color

$bpk-button-disabled-background-color: rgb(221, 221, 229) !default;

Used by

bpk-button-disabled-background-image

$bpk-button-disabled-background-image: none !default;

Used by

bpk-button-disabled-box-shadow

$bpk-button-disabled-box-shadow: none !default;

Used by

bpk-button-disabled-color

$bpk-button-disabled-color: rgb(178, 178, 191) !default;

Used by

bpk-button-featured-active-background-color

$bpk-button-featured-active-background-color: rgb(4, 39, 89) !default;

Used by

bpk-button-featured-active-background-image

$bpk-button-featured-active-background-image: none !default;

Used by

bpk-button-featured-active-box-shadow

$bpk-button-featured-active-box-shadow: none !default;

Used by

bpk-button-featured-active-color

$bpk-button-featured-active-color: rgb(255, 255, 255) !default;

Used by

bpk-button-featured-background-color

$bpk-button-featured-background-color: rgb(7, 112, 227) !default;

Used by

bpk-button-featured-background-image

$bpk-button-featured-background-image: #0770e3 !default;

Used by

bpk-button-featured-color

$bpk-button-featured-color: rgb(255, 255, 255) !default;

Used by

bpk-button-featured-disabled-background-color

$bpk-button-featured-disabled-background-color: rgb(221, 221, 229) !default;

Used by

bpk-button-featured-disabled-background-image

$bpk-button-featured-disabled-background-image: none !default;

Used by

bpk-button-featured-hover-background-color

$bpk-button-featured-hover-background-color: rgb(8, 78, 178) !default;

Used by

bpk-button-featured-hover-background-image

$bpk-button-featured-hover-background-image: none !default;

Used by

bpk-button-featured-hover-box-shadow

$bpk-button-featured-hover-box-shadow: none !default;

Used by

bpk-button-featured-hover-color

$bpk-button-featured-hover-color: rgb(255, 255, 255) !default;

Used by

bpk-button-font-weight

$bpk-button-font-weight: 700 !default;

Used by

bpk-button-gradient-end-color

$bpk-button-gradient-end-color: rgb(0, 166, 152) !default;

Used by

bpk-button-gradient-start-color

$bpk-button-gradient-start-color: rgb(0, 166, 152) !default;

Used by

bpk-button-hover-background-color

$bpk-button-hover-background-color: rgb(0, 136, 125) !default;

Used by

bpk-button-hover-background-image

$bpk-button-hover-background-image: none !default;

Used by

bpk-button-hover-box-shadow

$bpk-button-hover-box-shadow: none !default;

Used by

bpk-button-hover-color

$bpk-button-hover-color: rgb(255, 255, 255) !default;

Used by

bpk-button-icon-border-radius

$bpk-button-icon-border-radius: 1.125rem !default;

Used by

bpk-button-icon-border-radius-lg

$bpk-button-icon-border-radius-lg: 1.3125rem !default;

Used by

bpk-button-large-font-size

$bpk-button-large-font-size: 1.5rem !default;

Used by

bpk-button-large-line-height

$bpk-button-large-line-height: 1.875rem !default;

Used by

bpk-button-large-padding-x

$bpk-button-large-padding-x: 1.5rem !default;

Used by

bpk-button-large-padding-x-icon-only

$bpk-button-large-padding-x-icon-only: .5625rem !default;

Used by

bpk-button-large-padding-y

$bpk-button-large-padding-y: .375rem !default;

Used by

bpk-button-line-height

$bpk-button-line-height: 1.5rem !default;

Used by

bpk-button-outline-active-background-color

$bpk-button-outline-active-background-color: rgba(0, 0, 0, 0) !default;

Used by

bpk-button-outline-active-border-color

$bpk-button-outline-active-border-color: rgb(255, 255, 255) !default;

Used by

bpk-button-outline-background-color

$bpk-button-outline-background-color: rgba(0, 0, 0, 0) !default;

Used by

bpk-button-outline-background-image

$bpk-button-outline-background-image: none !default;

Used by

bpk-button-outline-border-color

$bpk-button-outline-border-color: rgb(255, 255, 255) !default;

Used by

bpk-button-outline-color

$bpk-button-outline-color: rgb(255, 255, 255) !default;

Used by

bpk-button-outline-disabled-background-color

$bpk-button-outline-disabled-background-color: rgb(221, 221, 229) !default;

Used by

bpk-button-outline-disabled-background-image

$bpk-button-outline-disabled-background-image: none !default;

Used by

bpk-button-outline-disabled-box-shadow

$bpk-button-outline-disabled-box-shadow: none !default;

Used by

bpk-button-outline-disabled-color

$bpk-button-outline-disabled-color: rgb(178, 178, 191) !default;

Used by

bpk-button-outline-hover-background-color

$bpk-button-outline-hover-background-color: rgba(0, 0, 0, 0) !default;

Used by

bpk-button-outline-hover-border-color

$bpk-button-outline-hover-border-color: rgb(255, 255, 255) !default;

Used by

bpk-button-outline-hover-border-opacity

$bpk-button-outline-hover-border-opacity: 0.5 !default;

Used by

bpk-button-padding-x

$bpk-button-padding-x: 1.125rem !default;

Used by

bpk-button-padding-x-icon-only

$bpk-button-padding-x-icon-only: .5625rem !default;

Used by

bpk-button-padding-y

$bpk-button-padding-y: .375rem !default;

Used by

bpk-button-secondary-active-background-color

$bpk-button-secondary-active-background-color: rgb(255, 255, 255) !default;

Used by

bpk-button-secondary-active-background-image

$bpk-button-secondary-active-background-image: none !default;

Used by

bpk-button-secondary-active-border-color

$bpk-button-secondary-active-border-color: rgb(8, 78, 178) !default;

Used by

bpk-button-secondary-active-box-shadow

$bpk-button-secondary-active-box-shadow: 0 0 0 3px #084eb2 inset !default;

Used by

bpk-button-secondary-active-color

$bpk-button-secondary-active-color: rgb(8, 78, 178) !default;

Used by

bpk-button-secondary-background-color

$bpk-button-secondary-background-color: rgb(255, 255, 255) !default;

Used by

bpk-button-secondary-background-image

$bpk-button-secondary-background-image: none !default;

Used by

bpk-button-secondary-border-color

$bpk-button-secondary-border-color: rgb(221, 221, 229) !default;

Used by

bpk-button-secondary-box-shadow

$bpk-button-secondary-box-shadow: 0 0 0 2px #DDDDE5 inset !default;

bpk-button-secondary-color

$bpk-button-secondary-color: rgb(7, 112, 227) !default;

Used by

bpk-button-secondary-disabled-background-color

$bpk-button-secondary-disabled-background-color: rgb(221, 221, 229) !default;

Used by

bpk-button-secondary-disabled-background-image

$bpk-button-secondary-disabled-background-image: none !default;

Used by

bpk-button-secondary-disabled-box-shadow

$bpk-button-secondary-disabled-box-shadow: none !default;

Used by

bpk-button-secondary-disabled-color

$bpk-button-secondary-disabled-color: rgb(178, 178, 191) !default;

Used by

bpk-button-secondary-hover-background-color

$bpk-button-secondary-hover-background-color: rgb(255, 255, 255) !default;

Used by

bpk-button-secondary-hover-background-image

$bpk-button-secondary-hover-background-image: none !default;

Used by

bpk-button-secondary-hover-border-color

$bpk-button-secondary-hover-border-color: rgb(7, 112, 227) !default;

Used by

bpk-button-secondary-hover-box-shadow

$bpk-button-secondary-hover-box-shadow: 0 0 0 2px #0770e3 inset !default;

Used by

bpk-button-secondary-hover-color

$bpk-button-secondary-hover-color: rgb(7, 112, 227) !default;

Used by

bpk-button-selected-active-background-color

$bpk-button-selected-active-background-color: rgb(4, 39, 89) !default;

Used by

bpk-button-selected-active-background-image

$bpk-button-selected-active-background-image: none !default;

Used by

bpk-button-selected-active-box-shadow

$bpk-button-selected-active-box-shadow: none !default;

Used by

bpk-button-selected-active-color

$bpk-button-selected-active-color: rgb(255, 255, 255) !default;

Used by

bpk-button-selected-background-color

$bpk-button-selected-background-color: rgb(7, 112, 227) !default;

Used by

bpk-button-selected-background-image

$bpk-button-selected-background-image: #084eb2 !default;

Used by

bpk-button-selected-box-shadow

$bpk-button-selected-box-shadow: none !default;

Used by

bpk-button-selected-color

$bpk-button-selected-color: rgb(255, 255, 255) !default;

Used by

bpk-button-selected-disabled-box-shadow

$bpk-button-selected-disabled-box-shadow: none !default;

Used by

bpk-button-selected-hover-background-color

$bpk-button-selected-hover-background-color: rgb(8, 78, 178) !default;

Used by

bpk-button-selected-hover-background-image

$bpk-button-selected-hover-background-image: none !default;

Used by

bpk-button-selected-hover-box-shadow

$bpk-button-selected-hover-box-shadow: none !default;

Used by

bpk-button-selected-hover-color

$bpk-button-selected-hover-color: rgb(255, 255, 255) !default;

Used by

bpk-button-text-align

$bpk-button-text-align: center !default;

Used by

calendar

variables

bpk-calendar-day-active-background-color

$bpk-calendar-day-active-background-color: rgb(221, 221, 229) !default;

bpk-calendar-day-active-color

$bpk-calendar-day-active-color: rgb(17, 18, 54) !default;

bpk-calendar-day-color

$bpk-calendar-day-color: rgb(7, 112, 227) !default;

bpk-calendar-day-disabled-color

$bpk-calendar-day-disabled-color: rgb(221, 221, 229) !default;

bpk-calendar-day-focused-border-color

$bpk-calendar-day-focused-border-color: rgb(7, 112, 227) !default;

bpk-calendar-day-focused-color

$bpk-calendar-day-focused-color: rgb(7, 112, 227) !default;

bpk-calendar-day-hover-background-color

$bpk-calendar-day-hover-background-color: rgb(241, 242, 248) !default;

bpk-calendar-day-hover-color

$bpk-calendar-day-hover-color: rgb(68, 69, 96) !default;

bpk-calendar-day-outside-color

$bpk-calendar-day-outside-color: rgb(178, 178, 191) !default;

bpk-calendar-day-selected-background-color

$bpk-calendar-day-selected-background-color: rgb(8, 78, 178) !default;

bpk-calendar-day-selected-color

$bpk-calendar-day-selected-color: rgb(255, 255, 255) !default;

bpk-calendar-day-size

$bpk-calendar-day-size: 2.250rem !default;

bpk-calendar-day-spacing

$bpk-calendar-day-spacing: .375rem !default;

bpk-calendar-nav-icon-active-fill

$bpk-calendar-nav-icon-active-fill: rgb(4, 39, 89) !default;

bpk-calendar-nav-icon-disabled-fill

$bpk-calendar-nav-icon-disabled-fill: rgb(221, 221, 229) !default;

bpk-calendar-nav-icon-fill

$bpk-calendar-nav-icon-fill: rgb(7, 112, 227) !default;

bpk-calendar-nav-icon-hover-fill

$bpk-calendar-nav-icon-hover-fill: rgb(8, 78, 178) !default;

bpk-calendar-padding

$bpk-calendar-padding: .75rem !default;

cards

mixins

bpk-card

@mixin bpk-card() { ... }

Description

Basic card.

Parameters

None.

Example

.selector {
  @include bpk-card();
}

Requires

Used by

bpk-card--padded

@mixin bpk-card--padded() { ... }

Description

Adds padding to cards. Modifies the bpk-card mixin.

Parameters

None.

Example

.selector {
  @include bpk-card();
  @include bpk-card--padded();
}

Requires

variables

bpk-card-background-color

$bpk-card-background-color: rgb(255, 255, 255) !default;

Used by

bpk-card-color

$bpk-card-color: rgb(17, 18, 54) !default;

Used by

bpk-card-padding

$bpk-card-padding: .75rem !default;

Used by

colors

variables

bpk-color-abisko

$bpk-color-abisko: rgb(90, 72, 155) !default;

bpk-color-bagan

$bpk-color-bagan: rgb(255, 235, 208) !default;

bpk-color-bunol

$bpk-color-bunol: rgb(255, 123, 89) !default;

bpk-color-erfoud

$bpk-color-erfoud: rgb(255, 181, 77) !default;

bpk-color-glencoe

$bpk-color-glencoe: rgb(115, 206, 198) !default;

Used by

bpk-color-harbour

$bpk-color-harbour: rgb(246, 221, 225) !default;

bpk-color-hillier

$bpk-color-hillier: rgb(225, 139, 150) !default;

bpk-color-kolkata

$bpk-color-kolkata: rgb(255, 148, 0) !default;

bpk-color-monteverde

$bpk-color-monteverde: rgb(0, 166, 152) !default;

bpk-color-nara

$bpk-color-nara: rgb(255, 231, 224) !default;

bpk-color-panjin

$bpk-color-panjin: rgb(209, 67, 91) !default;

Used by

bpk-color-petra

$bpk-color-petra: rgb(255, 171, 149) !default;

bpk-color-primary-gradient-light

$bpk-color-primary-gradient-light: rgb(7, 112, 227) !default;

bpk-color-sagano

$bpk-color-sagano: rgb(208, 238, 236) !default;

bpk-color-sky-blue

$bpk-color-sky-blue: rgb(7, 112, 227) !default;

Used by

bpk-color-sky-blue-shade-01

$bpk-color-sky-blue-shade-01: rgb(8, 78, 178) !default;

bpk-color-sky-blue-shade-02

$bpk-color-sky-blue-shade-02: rgb(4, 39, 89) !default;

bpk-color-sky-blue-shade-03

$bpk-color-sky-blue-shade-03: rgb(2, 18, 44) !default;

bpk-color-sky-blue-tint-01

$bpk-color-sky-blue-tint-01: rgb(109, 159, 235) !default;

bpk-color-sky-blue-tint-02

$bpk-color-sky-blue-tint-02: rgb(157, 192, 242) !default;

bpk-color-sky-blue-tint-03

$bpk-color-sky-blue-tint-03: rgb(205, 223, 248) !default;

Used by

bpk-color-sky-gray

$bpk-color-sky-gray: rgb(17, 18, 54) !default;

bpk-color-sky-gray-tint-01

$bpk-color-sky-gray-tint-01: rgb(68, 69, 96) !default;

Used by

bpk-color-sky-gray-tint-02

$bpk-color-sky-gray-tint-02: rgb(104, 105, 127) !default;

Used by

bpk-color-sky-gray-tint-03

$bpk-color-sky-gray-tint-03: rgb(143, 144, 160) !default;

bpk-color-sky-gray-tint-04

$bpk-color-sky-gray-tint-04: rgb(178, 178, 191) !default;

Used by

bpk-color-sky-gray-tint-05

$bpk-color-sky-gray-tint-05: rgb(205, 205, 215) !default;

bpk-color-sky-gray-tint-06

$bpk-color-sky-gray-tint-06: rgb(221, 221, 229) !default;

Used by

bpk-color-sky-gray-tint-07

$bpk-color-sky-gray-tint-07: rgb(241, 242, 248) !default;

Used by

bpk-color-system-green

$bpk-color-system-green: rgb(0, 166, 152) !default;

bpk-color-system-red

$bpk-color-system-red: rgb(209, 67, 91) !default;

bpk-color-tochigi

$bpk-color-tochigi: rgb(225, 221, 236) !default;

bpk-color-valensole

$bpk-color-valensole: rgb(165, 155, 200) !default;

bpk-color-white

$bpk-color-white: rgb(255, 255, 255) !default;

Used by

bpk-primary-gradient

$bpk-primary-gradient: #0770e3 !default;

flare

variables

bpk-flare-corner-radius

$bpk-flare-corner-radius: 1.3125rem !default;

bpk-flare-height-desktop

$bpk-flare-height-desktop: 1.5rem !default;

bpk-flare-height-mobile

$bpk-flare-height-mobile: 1.125rem !default;

font-sizes

variables

bpk-button-font-size

$bpk-button-font-size: 1.1875rem !default;

Used by

bpk-h-1-font-size

$bpk-h-1-font-size: 2.625rem !default;

Used by

bpk-h-2-font-size

$bpk-h-2-font-size: 1.875rem !default;

Used by

bpk-h-3-font-size

$bpk-h-3-font-size: 1.5rem !default;

Used by

bpk-h-4-font-size

$bpk-h-4-font-size: 1rem !default;

Used by

bpk-h-5-font-size

$bpk-h-5-font-size: .75rem !default;

Used by

bpk-h-6-font-size

$bpk-h-6-font-size: .75rem !default;

Used by

bpk-text-base-font-size

$bpk-text-base-font-size: 1rem !default;

Used by

bpk-text-lg-font-size

$bpk-text-lg-font-size: 1.25rem !default;

Used by

bpk-text-sm-font-size

$bpk-text-sm-font-size: .875rem !default;

Used by

bpk-text-xl-font-size

$bpk-text-xl-font-size: 1.5rem !default;

Used by

bpk-text-xs-font-size

$bpk-text-xs-font-size: .75rem !default;

Used by

bpk-text-xxl-font-size

$bpk-text-xxl-font-size: 1.875rem !default;

Used by

bpk-text-xxxl-font-size

$bpk-text-xxxl-font-size: 2.25rem !default;

Used by

bpk-text-xxxxl-font-size

$bpk-text-xxxxl-font-size: 2.625rem !default;

Used by

bpk-text-xxxxxl-font-size

$bpk-text-xxxxxl-font-size: 3.75rem !default;

Used by

font-weights

variables

bpk-font-weight-black

$bpk-font-weight-black: 900 !default;

bpk-font-weight-bold

$bpk-font-weight-bold: 700 !default;

Used by

bpk-h-1-font-weight

$bpk-h-1-font-weight: 400 !default;

Used by

bpk-h-2-font-weight

$bpk-h-2-font-weight: 400 !default;

Used by

bpk-h-3-font-weight

$bpk-h-3-font-weight: 400 !default;

Used by

bpk-h-4-font-weight

$bpk-h-4-font-weight: 700 !default;

Used by

bpk-h-5-font-weight

$bpk-h-5-font-weight: 700 !default;

Used by

bpk-h-6-font-weight

$bpk-h-6-font-weight: 700 !default;

Used by

bpk-text-base-font-weight

$bpk-text-base-font-weight: 400 !default;

Used by

bpk-text-lg-font-weight

$bpk-text-lg-font-weight: 400 !default;

Used by

bpk-text-sm-font-weight

$bpk-text-sm-font-weight: 400 !default;

Used by

bpk-text-xl-font-weight

$bpk-text-xl-font-weight: 400 !default;

Used by

bpk-text-xs-font-weight

$bpk-text-xs-font-weight: 400 !default;

Used by

bpk-text-xxl-font-weight

$bpk-text-xxl-font-weight: 400 !default;

Used by

bpk-text-xxxl-font-weight

$bpk-text-xxxl-font-weight: 400 !default;

Used by

bpk-text-xxxxl-font-weight

$bpk-text-xxxxl-font-weight: 400 !default;

Used by

bpk-text-xxxxxl-font-weight

$bpk-text-xxxxxl-font-weight: 400 !default;

Used by

forms

mixins

bpk-input

@mixin bpk-input() { ... }

Description

Form input. Can be used for text, email, number, password and tel type inputs.

Parameters

None.

Example

.selector {
  @include bpk-input();
}

Requires

Used by

bpk-input--valid

@mixin bpk-input--valid() { ... }

Description

Valid form input. Modifies the bpk-input mixin.

Parameters

None.

Example

.selector {
  @include bpk-input();
  @include bpk-input--valid();
}

Requires

bpk-input--invalid

@mixin bpk-input--invalid() { ... }

Description

Invalid form input. Modifies the bpk-input mixin.

Parameters

None.

Example

.selector {
  @include bpk-input();
  @include bpk-input--invalid();
}

Requires

bpk-input--clearable

@mixin bpk-input--clearable() { ... }

Description

Clearable form input. Modifies the bpk-input mixin.

Parameters

None.

Example

.selector {
  @include bpk-input();
  @include bpk-input--clearable();
}

Requires

bpk-input__container

@mixin bpk-input__container() { ... }

Description

Clearable form input container. Modifies the bpk-input mixin.

Parameters

None.

Example

.selector {
  @include bpk-input();
  @include bpk-input__container();
}

Requires

bpk-input__clear-button

@mixin bpk-input__clear-button() { ... }

Description

Clearable (clear button) form input. Modifies the bpk-input mixin.

Parameters

None.

Example

.selector {
  @include bpk-input();
  @include bpk-input__clear-button();
}

Requires

bpk-input--large

@mixin bpk-input--large() { ... }

Description

Large form input. Modifies the bpk-input mixin.

Parameters

None.

Example

.selector {
  @include bpk-input();
  @include bpk-input--large();
}

Requires

Used by

bpk-input--docked-first-child

@mixin bpk-input--docked-first-child() { ... }

Description

Docked (first-child) form input. Modifies the bpk-input mixin.

Parameters

None.

Example

.selector {
  @include bpk-input();
  @include bpk-input--docked-first-child();
}

Requires

Used by

bpk-input--docked-last-child

@mixin bpk-input--docked-last-child() { ... }

Description

Docked (last-child) form input. Modifies the bpk-input mixin.

Parameters

None.

Example

.selector {
  @include bpk-input();
  @include bpk-input--docked-last-child();
}

Requires

Used by

bpk-input--docked-middle-child

@mixin bpk-input--docked-middle-child() { ... }

Description

Docked (middle-child) form input. Modifies the bpk-input mixin.

Parameters

None.

Example

.selector {
  @include bpk-input();
  @include bpk-input--docked-middle-child();
}

Requires

Used by

bpk-input--docked

@mixin bpk-input--docked() { ... }

Description

Docked form input (inputs must sit side-by-side in the DOM). Modifies the bpk-input mixin.

Parameters

None.

Example

.selector {
  @include bpk-input();
  @include bpk-input--docked();
}

Requires

bpk-select

@mixin bpk-select() { ... }

Description

Form select input.

Parameters

None.

Example

.selector {
  @include bpk-select();
}

Requires

Used by

bpk-select--large

@mixin bpk-select--large() { ... }

Description

Large form select input. Modifies the bpk-select mixin.

Parameters

None.

Example

.selector {
  @include bpk-select();
  @include bpk-select--large();
}

Requires

bpk-select--docked-first-child

@mixin bpk-select--docked-first-child() { ... }

Description

Docked (first-child) form select input. Modifies the bpk-select mixin.

Parameters

None.

Example

.selector {
  @include bpk-select();
  @include bpk-select--docked-first-child();
}

Requires

Used by

bpk-select--docked-last-child

@mixin bpk-select--docked-last-child() { ... }

Description

Docked (last-child) form select input. Modifies the bpk-select mixin.

Parameters

None.

Example

.selector {
  @include bpk-select();
  @include bpk-select--docked-last-child();
}

Requires

Used by

bpk-select--docked-middle-child

@mixin bpk-select--docked-middle-child() { ... }

Description

Docked (middle-child) form select input. Modifies the bpk-select mixin.

Parameters

None.

Example

.selector {
  @include bpk-select();
  @include bpk-select--docked-middle-child();
}

Requires

Used by

bpk-select--docked

@mixin bpk-select--docked() { ... }

Description

Docked form select input (selects must sit side-by-side in the DOM). Modifies the bpk-select mixin.

Parameters

None.

Example

.selector {
  @include bpk-select();
  @include bpk-select--docked();
}

Requires

bpk-select--invalid

@mixin bpk-select--invalid() { ... }

Description

Invalid form input. Modifies the bpk-selct mixin.

Parameters

None.

Example

.selector {
  @include bpk-select();
  @include bpk-select--invalid();
}

Requires

bpk-checkbox

@mixin bpk-checkbox() { ... }

Description

Form checkbox. Should be applied to containing label element.

Parameters

None.

Example

.selector {
  @include bpk-checkbox();
}

Requires

Used by

bpk-checkbox__label

@mixin bpk-checkbox__label() { ... }

Description

Label for checkbox. Should be applied to label text element.

Parameters

None.

Example

.selector {
  @include bpk-checkbox__label();
}

bpk-checkbox__label--small

@mixin bpk-checkbox__label--small() { ... }

Description

Small label for checkbox. Should be applied to label text element. Modifies bpk-checkbox__label.

Parameters

None.

Example

.selector {
  @include bpk-checkbox__label();
  @include bpk-checkbox__label--small();
}

Requires

bpk-checkbox--white

@mixin bpk-checkbox--white() { ... }

Description

White label checkbox. Modifies the bpk-checkbox mixin.

Parameters

None.

Example

.selector {
  @include bpk-checkbox();
  @include bpk-checkbox--white();
}

Requires

bpk-checkbox--disabled

@mixin bpk-checkbox--disabled() { ... }

Description

Disabled form checkbox. Modifies the bpk-checkbox mixin.

Parameters

None.

Example

.selector {
  @include bpk-checkbox();
  @include bpk-checkbox--disabled();
}

Requires

bpk-checkbox--invalid

@mixin bpk-checkbox--invalid() { ... }

Description

Invalid form checkbox. Modifies the bpk-checkbox mixin.

Parameters

None.

Example

.selector {
  @include bpk-checkbox();
  @include bpk-checkbox--invalid();
}

Requires

bpk-checkbox__input

@mixin bpk-checkbox__input() { ... }

Description

Form checkbox input.

Parameters

None.

Example

.selector {
  @include bpk-checkbox__input();
}

Requires

bpk-radio

@mixin bpk-radio() { ... }

Description

Form radio button. Should be applied to containing label element.

Parameters

None.

Example

.selector {
  @include bpk-radio();
}

Requires

Used by

bpk-radio--disabled

@mixin bpk-radio--disabled() { ... }

Description

Disabled form radio button. Modifies the bpk-radio mixin.

Parameters

None.

Example

.selector {
  @include bpk-radio();
  @include bpk-radio--disabled();
}

Requires

bpk-radio--white

@mixin bpk-radio--white() { ... }

Description

White label radio button. Modifies the bpk-radio mixin.

Parameters

None.

Example

.selector {
  @include bpk-radio();
  @include bpk-radio--white();
}

Requires

bpk-radio--invalid

@mixin bpk-radio--invalid() { ... }

Description

Invalid radio button. Modifies the bpk-radio mixin.

Parameters

None.

Example

.selector {
  @include bpk-radio();
  @include bpk-radio--invalid();
}

Requires

bpk-radio__input

@mixin bpk-radio__input() { ... }

Description

Form radio input.

Parameters

None.

Example

.selector {
  @include bpk-radio__input();
}

Requires

bpk-label

@mixin bpk-label() { ... }

Description

Form label.

Parameters

None.

Example

.selector {
  @include bpk-label();
}

Requires

Used by

bpk-label--invalid

@mixin bpk-label--invalid() { ... }

Description

Invalid form label. Modifies the bpk-label mixin.

Parameters

None.

Example

.selector {
  @include bpk-label();
  @include bpk-label--invalid();
}

Requires

bpk-label--white

@mixin bpk-label--white() { ... }

Description

White form label. Modifies the bpk-label mixin.

Parameters

None.

Example

.selector {
  @include bpk-label();
  @include bpk-label--white();
}

Requires

bpk-label--disabled

@mixin bpk-label--disabled() { ... }

Description

Disabled form label. Modifies the bpk-label mixin.

Parameters

None.

Example

.selector {
  @include bpk-label();
  @include bpk-label--disabled();
}

Requires

bpk-form-validation

@mixin bpk-form-validation() { ... }

Description

Form validation.

Parameters

None.

Example

.selector {
  @include bpk-form-validation();
}

Requires

Used by

bpk-form-validation--appear

@mixin bpk-form-validation--appear() { ... }

Description

Form validation transition state. Modifies the bpk-form-validation mixin.

Parameters

None.

Example

.selector {
  @include bpk-form-validation();

  &--appear {
    @include bpk-form-validation--appear();
  }
}

Requires

bpk-form-validation--is-checkbox

@mixin bpk-form-validation--is-checkbox() { ... }

Description

Checkbox form validation. Modifies the bpk-form-validation mixin.

Parameters

None.

Example

.selector {
  @include bpk-form-validation();

  &--is-checkbox {
    @include bpk-form-validation--is-checkbox();
  }
}

Requires

bpk-textarea

@mixin bpk-textarea() { ... }

Description

Form textarea.

Parameters

None.

Example

.selector {
  @include bpk-textarea();
}

Requires

Used by

bpk-textarea--invalid

@mixin bpk-textarea--invalid() { ... }

Description

Invalid form input. Modifies the bpk-textarea mixin.

Parameters

None.

Example

.selector {
  @include bpk-textarea();
  @include bpk-textarea--invalid();
}

Requires

css

// @mixin bpk-form-validation__container

//
@mixin bpk-form-validation__container { ... }

Description

Form validation container.

Example

.selector {
  @include bpk-form-validation__container();
}

variables

bpk-checkbox-checked-tick-color

$bpk-checkbox-checked-tick-color: rgb(7, 112, 227) !default;

bpk-form-validation-arrow-size

$bpk-form-validation-arrow-size: .375rem !default;

bpk-form-validation-color

$bpk-form-validation-color: rgb(209, 67, 91) !default;

Used by

bpk-input-background

$bpk-input-background: #ffffff !default;

Used by

bpk-input-border

$bpk-input-border: solid .0625rem #B2B2BF !default;

Used by

bpk-input-border-radius

$bpk-input-border-radius: .25rem !default;

Used by

bpk-input-border-width

$bpk-input-border-width: .0625rem !default;

Used by

bpk-input-color

$bpk-input-color: rgb(17, 18, 54) !default;

Used by

bpk-input-disabled-border-color

$bpk-input-disabled-border-color: rgb(241, 242, 248) !default;

Used by

bpk-input-disabled-color

$bpk-input-disabled-color: rgb(178, 178, 191) !default;

Used by

bpk-input-height

$bpk-input-height: 2.250rem !default;

Used by

bpk-input-large-height

$bpk-input-large-height: 2.625rem + .375rem !default;

Used by

bpk-input-padding-x

$bpk-input-padding-x: .75rem !default;

Used by

bpk-input-padding-y

$bpk-input-padding-y: .375rem !default;

Used by

bpk-input-placeholder-color

$bpk-input-placeholder-color: rgb(104, 105, 127) !default;

Used by

bpk-input-placeholder-font-style

$bpk-input-placeholder-font-style: italic !default;

Used by

bpk-label-color

$bpk-label-color: rgb(17, 18, 54) !default;

Used by

bpk-label-disabled-color

$bpk-label-disabled-color: rgb(178, 178, 191) !default;

Used by

bpk-label-font-size

$bpk-label-font-size: .75rem !default;

Used by

bpk-label-line-height

$bpk-label-line-height: 1rem !default;

Used by

bpk-radio-checked-circle-color

$bpk-radio-checked-circle-color: rgb(7, 112, 227) !default;

bpk-required-color

$bpk-required-color: rgb(209, 67, 91) !default;

bpk-select-border

$bpk-select-border: solid .0625rem #B2B2BF !default;

Used by

bpk-select-border-radius

$bpk-select-border-radius: .25rem !default;

Used by

bpk-select-border-width

$bpk-select-border-width: .0625rem !default;

Used by

bpk-select-color

$bpk-select-color: rgb(17, 18, 54) !default;

Used by

bpk-select-disabled-border-color

$bpk-select-disabled-border-color: rgb(241, 242, 248) !default;

Used by

bpk-select-disabled-color

$bpk-select-disabled-color: rgb(178, 178, 191) !default;

Used by

bpk-select-height

$bpk-select-height: 2.250rem !default;

Used by

bpk-select-large-height

$bpk-select-large-height: 2.625rem + .375rem !default;

Used by

bpk-select-padding-bottom

$bpk-select-padding-bottom: .375rem !default;

Used by

bpk-select-padding-left

$bpk-select-padding-left: .75rem !default;

Used by

bpk-select-padding-right

$bpk-select-padding-right: 1.875rem !default;

Used by

bpk-select-padding-top

$bpk-select-padding-top: .375rem !default;

Used by

bpk-textarea-min-height

$bpk-textarea-min-height: 2.625rem * 2 !default;

Used by

grids

mixins

bpk-grid__container

@mixin bpk-grid__container() { ... }

Description

Grid container.

Parameters

None.

Example

.selector {
  @include bpk-grid__container();
}

Requires

Used by

bpk-grid__container--debug

@mixin bpk-grid__container--debug() { ... }

Description

Grid container debug. Modifies the bpk-grid__container mixin.

Parameters

None.

Example

.selector {
  @include bpk-grid__container();
  @include bpk-grid__container--debug();
}

Requires

bpk-grid__container--full-width

@mixin bpk-grid__container--full-width() { ... }

Description

Container will use the width of the parent element. Modifies the bpk-grid__container mixin.

Parameters

None.

Example

.selector {
  @include bpk-grid__container();
  @include bpk-grid__container--full-width();
}

Requires

bpk-grid__row

@mixin bpk-grid__row() { ... }

Description

Grid row.

Parameters

None.

Example

.selector {
  @include bpk-grid__row();
}

Requires

Used by

bpk-grid__row--padded

@mixin bpk-grid__row--padded() { ... }

Description

Grid row padded. Modifies the bpk-grid__row mixin.

Parameters

None.

Example

.selector {
  @include bpk-grid__row();
  @include bpk-grid__row--padded();
}

Requires

bpk-grid__column

@mixin bpk-grid__column() { ... }

Description

Grid column.

Parameters

None.

Example

.selector {
  @include bpk-grid__column();
}

Requires

Used by

bpk-grid__column--padded

@mixin bpk-grid__column--padded() { ... }

Description

Grid column padded. Modifies the bpk-grid__column mixin.

Parameters

None.

Example

.selector {
  @include bpk-grid__column();
  @include bpk-grid__column--padded();
}

Requires

bpk-grid__column--debug

@mixin bpk-grid__column--debug() { ... }

Description

Grid column debug. Modifies the bpk-grid__column mixin.

Parameters

None.

Example

.selector {
  @include bpk-grid__column();
  @include bpk-grid__column--debug();
}

Requires

bpk-grid__column-debugger

@mixin bpk-grid__column-debugger() { ... }

Description

Grid column inner element debugger.

Parameters

None.

Example

.selector {
  @include bpk-grid__column-debugger();
}

Requires

bpk-grid__column--

@mixin bpk-grid__column--() { ... }

Description

Grid column width. Modifies the bpk-grid__column mixin.

Parameters

None.

Example

.selector {
  @include bpk-grid__column();
  @include bpk-grid__column--(6);
}

Requires

bpk-grid__column--mobile-

@mixin bpk-grid__column--mobile-() { ... }

Description

Grid column width on mobile. Modifies the bpk-grid__column mixin.

Parameters

None.

Example

.selector {
  @include bpk-grid__column();
  @include bpk-grid__column--mobile-(6);
}

Requires

bpk-grid__column--tablet-

@mixin bpk-grid__column--tablet-() { ... }

Description

Grid column width on tablet. Modifies the bpk-grid__column mixin.

Parameters

None.

Example

.selector {
  @include bpk-grid__column();
  @include bpk-grid__column--tablet-(6);
}

Requires

bpk-grid__column--offset-

@mixin bpk-grid__column--offset-() { ... }

Description

Grid column offset. Modifies the bpk-grid__column mixin.

Parameters

None.

Example

.selector {
  @include bpk-grid__column();
  @include bpk-grid__column--offset-(6);
}

Requires

bpk-grid__column--offset-mobile-

@mixin bpk-grid__column--offset-mobile-() { ... }

Description

Grid column offset on mobile. Modifies the bpk-grid__column mixin.

Parameters

None.

Example

.selector {
  @include bpk-grid__column();
  @include bpk-grid__column--offset-mobile-(6);
}

Requires

bpk-grid__column--offset-tablet-

@mixin bpk-grid__column--offset-tablet-() { ... }

Description

Grid column offset on tablet. Modifies the bpk-grid__column mixin.

Parameters

None.

Example

.selector {
  @include bpk-grid__column();
  @include bpk-grid__column--offset-tablet-(6);
}

Requires

variables

bpk-grid-columns

$bpk-grid-columns: 12 !default;

Used by

bpk-grid-container-mobile-padding

$bpk-grid-container-mobile-padding: .75rem !default;

Used by

bpk-grid-container-padding

$bpk-grid-container-padding: 1.5rem !default;

Used by

bpk-grid-gutter

$bpk-grid-gutter: 1.5rem !default;

Used by

horizontal-nav

variables

bpk-horizontal-nav-bar-selected-color

$bpk-horizontal-nav-bar-selected-color: rgb(7, 112, 227) !default;

bpk-horizontal-nav-link-active-color

$bpk-horizontal-nav-link-active-color: rgb(17, 18, 54) !default;

bpk-horizontal-nav-link-color

$bpk-horizontal-nav-link-color: rgb(104, 105, 127) !default;

bpk-horizontal-nav-link-hover-color

$bpk-horizontal-nav-link-hover-color: rgb(68, 69, 96) !default;

bpk-horizontal-nav-link-selected-color

$bpk-horizontal-nav-link-selected-color: rgb(7, 112, 227) !default;

icons

variables

bpk-icon-size-lg

$bpk-icon-size-lg: 1.5rem !default;

Used by

bpk-icon-size-sm

$bpk-icon-size-sm: 1.125rem !default;

Used by

layers

mixins

bpk-layer

@mixin bpk-layer() { ... }

Description

Layer base styles.

Parameters

None.

Example

.selector {
  @include bpk-layer;
}

Requires

bpk-layer-arrow

@mixin bpk-layer-arrow() { ... }

Description

Layer arrow base styles.

Parameters

None.

Example

.selector {
  @include bpk-layer-arrow(1rem);
}

Requires

bpk-layer-arrow-top

@mixin bpk-layer-arrow-top() { ... }

Description

Layer top arrow.

Parameters

None.

Example

.selector {
  @include bpk-layer-arrow(1rem);
  @include bpk-layer-arrow-top(1rem);
}

Requires

bpk-layer-arrow-right

@mixin bpk-layer-arrow-right() { ... }

Description

Layer right arrow.

Parameters

None.

Example

.selector {
  @include bpk-layer-arrow(1rem);
  @include bpk-layer-arrow-right(1rem);
}

Requires

bpk-layer-arrow-bottom

@mixin bpk-layer-arrow-bottom() { ... }

Description

Layer bottom arrow.

Parameters

None.

Example

.selector {
  @include bpk-layer-arrow(1rem);
  @include bpk-layer-arrow-bottom(1rem);
}

Requires

bpk-layer-arrow-left

@mixin bpk-layer-arrow-left() { ... }

Description

Layer left arrow.

Parameters

None.

Example

.selector {
  @include bpk-layer-arrow(1rem);
  @include bpk-layer-arrow-left(1rem);
}

Requires

letter-spacings

variables

bpk-text-base-letter-spacing

$bpk-text-base-letter-spacing: normal !default;

Used by

bpk-text-lg-letter-spacing

$bpk-text-lg-letter-spacing: normal !default;

Used by

bpk-text-sm-letter-spacing

$bpk-text-sm-letter-spacing: normal !default;

Used by

bpk-text-xl-letter-spacing

$bpk-text-xl-letter-spacing: normal !default;

Used by

bpk-text-xs-letter-spacing

$bpk-text-xs-letter-spacing: normal !default;

Used by

bpk-text-xxl-letter-spacing

$bpk-text-xxl-letter-spacing: normal !default;

Used by

line-heights

variables

bpk-h-1-line-height

$bpk-h-1-line-height: 2.9375rem !default;

Used by

bpk-h-2-line-height

$bpk-h-2-line-height: 2.4375rem !default;

Used by

bpk-h-3-line-height

$bpk-h-3-line-height: 1.9375rem !default;

Used by

bpk-h-4-line-height

$bpk-h-4-line-height: 1.25rem !default;

Used by

bpk-h-5-line-height

$bpk-h-5-line-height: 1rem !default;

Used by

bpk-h-6-line-height

$bpk-h-6-line-height: 1rem !default;

Used by

bpk-text-base-line-height

$bpk-text-base-line-height: 1.25rem !default;

Used by

bpk-text-lg-line-height

$bpk-text-lg-line-height: 1.625rem !default;

Used by

bpk-text-sm-line-height

$bpk-text-sm-line-height: 1.125rem !default;

Used by

bpk-text-xl-line-height

$bpk-text-xl-line-height: 1.9375rem !default;

Used by

bpk-text-xs-line-height

$bpk-text-xs-line-height: 1rem !default;

Used by

bpk-text-xxl-line-height

$bpk-text-xxl-line-height: 2.4375rem !default;

Used by

bpk-text-xxxl-line-height

$bpk-text-xxxl-line-height: 2.9375rem !default;

Used by

bpk-text-xxxxl-line-height

$bpk-text-xxxxl-line-height: 3.4375rem !default;

Used by

bpk-text-xxxxxl-line-height

$bpk-text-xxxxxl-line-height: 4.875rem !default;

Used by

modals

variables

bpk-modal-background-color

$bpk-modal-background-color: rgb(255, 255, 255) !default;

bpk-modal-content-padding

$bpk-modal-content-padding: .75rem !default;

bpk-modal-header-padding

$bpk-modal-header-padding: .75rem !default;

bpk-modal-initial-opacity

$bpk-modal-initial-opacity: 0 !default;

bpk-modal-max-width

$bpk-modal-max-width: 32.25rem !default;

bpk-modal-opacity

$bpk-modal-opacity: 1 !default;

bpk-modal-wide-max-width

$bpk-modal-wide-max-width: 50.25rem !default;

notifications

variables

bpk-banner-alert-background-color

$bpk-banner-alert-background-color: rgb(255, 255, 255) !default;

bpk-banner-alert-children-color

$bpk-banner-alert-children-color: rgb(104, 105, 127) !default;

bpk-banner-alert-children-padding-x

$bpk-banner-alert-children-padding-x: .75rem !default;

bpk-banner-alert-children-padding-y

$bpk-banner-alert-children-padding-y: .375rem !default;

bpk-banner-alert-error-color

$bpk-banner-alert-error-color: rgb(209, 67, 91) !default;

bpk-banner-alert-expand-icon-fill

$bpk-banner-alert-expand-icon-fill: rgb(68, 69, 96) !default;

bpk-banner-alert-header-expandable-active-background-color

$bpk-banner-alert-header-expandable-active-background-color: rgb(221, 221, 229) !default;

bpk-banner-alert-header-expandable-hover-background-color

$bpk-banner-alert-header-expandable-hover-background-color: rgb(241, 242, 248) !default;

bpk-banner-alert-header-padding-x

$bpk-banner-alert-header-padding-x: .75rem !default;

bpk-banner-alert-header-padding-y

$bpk-banner-alert-header-padding-y: .375rem !default;

bpk-banner-alert-neutral-color

$bpk-banner-alert-neutral-color: rgb(104, 105, 127) !default;

bpk-banner-alert-primary-color

$bpk-banner-alert-primary-color: rgb(7, 112, 227) !default;

bpk-banner-alert-success-color

$bpk-banner-alert-success-color: rgb(0, 166, 152) !default;

bpk-banner-alert-warn-color

$bpk-banner-alert-warn-color: rgb(255, 181, 77) !default;

panels

mixins

bpk-panel

@mixin bpk-panel() { ... }

Description

Basic panel.

Parameters

None.

Example

.selector {
  @include @bpk-panel()
}

Requires

Used by

bpk-panel--padded

@mixin bpk-panel--padded() { ... }

Description

Adds padding to panels. Modifies the bpk-panel mixin.

Parameters

None.

Example

.selector {
  @include bpk-panel();
  @include bpk-panel--padded();
}

Requires

bpk-panel--full-width

@mixin bpk-panel--full-width() { ... }

Description

Makes panel full width by removing left and right border. Modifies the bpk-panel mixin.

Parameters

None.

Example

.selector {
  @include bpk-panel();
  @include bpk-panel--full-width();
}

Requires

variables

bpk-panel-background-color

$bpk-panel-background-color: rgb(255, 255, 255) !default;

Used by

bpk-panel-border-color

$bpk-panel-border-color: rgb(221, 221, 229) !default;

Used by

bpk-panel-padding

$bpk-panel-padding: .75rem !default;

Used by

radii

mixins

bpk-border-radius-xs

@mixin bpk-border-radius-xs() { ... }

Description

Extra small border radius.

Parameters

None.

Example

.selector {
  @include bpk-border-radius-xs();
}

Requires

Used by

bpk-border-radius-sm

@mixin bpk-border-radius-sm() { ... }

Description

Small border radius.

Parameters

None.

Example

.selector {
  @include bpk-border-radius-sm();
}

Requires

Used by

bpk-border-radius-pill

@mixin bpk-border-radius-pill() { ... }

Description

Pill shaped border radius.

Parameters

None.

Example

.selector {
  @include bpk-border-radius-pill();
}

Requires

variables

bpk-border-radius-pill

$bpk-border-radius-pill: 1.125rem !default;

Used by

bpk-border-radius-pill-lg

$bpk-border-radius-pill-lg: 1.3125rem !default;

bpk-border-radius-sm

$bpk-border-radius-sm: .375rem !default;

Used by

bpk-border-radius-xs

$bpk-border-radius-xs: .25rem !default;

Used by

ratings

variables

bpk-rating-base-height

$bpk-rating-base-height: .75rem * 4 !default;

bpk-rating-base-width

$bpk-rating-base-width: .75rem * 4 !default;

bpk-rating-lg-height

$bpk-rating-lg-height: 1.875rem * 2 !default;

bpk-rating-lg-width

$bpk-rating-lg-width: 1.875rem * 2 !default;

bpk-rating-sm-height

$bpk-rating-sm-height: .75rem * 3 !default;

bpk-rating-sm-width

$bpk-rating-sm-width: .75rem * 3 !default;

scrims

variables

bpk-scrim-background-color

$bpk-scrim-background-color: rgb(178, 178, 191) !default;

bpk-scrim-dark-background-color

$bpk-scrim-dark-background-color: rgb(17, 18, 54) !default;

bpk-scrim-dark-opacity

$bpk-scrim-dark-opacity: .95 !default;

bpk-scrim-initial-opacity

$bpk-scrim-initial-opacity: 0 !default;

bpk-scrim-mobile-opacity

$bpk-scrim-mobile-opacity: 1 !default;

bpk-scrim-opacity

$bpk-scrim-opacity: .7 !default;

scroll-indicator

mixins

[private] _bpk-scroll-indicator

@mixin _bpk-scroll-indicator() { ... }

Description

Scroll indicator utility.

Parameters

None.

Requires

Used by

bpk-scroll-indicator-left

@mixin bpk-scroll-indicator-left() { ... }

Description

Left-sided scroll indicator.

Parameters

None.

Example

.selector {
  @include bpk-scroll-indicator-left($bpk-color-grey-100);
}

Requires

bpk-scroll-indicator-right

@mixin bpk-scroll-indicator-right() { ... }

Description

Right-sided scroll indicator.

Parameters

None.

Example

.selector {
  @include bpk-scroll-indicator-right($bpk-color-grey-100);
}

Requires

spacings

variables

bpk-heading-content-margin-top

$bpk-heading-content-margin-top: 1.875rem !default;

Used by

bpk-heading-margin-bottom

$bpk-heading-margin-bottom: .75rem !default;

Used by

bpk-heading-margin-top

$bpk-heading-margin-top: 0 !default;

Used by

bpk-list-item-margin-bottom

$bpk-list-item-margin-bottom: 0 !default;

Used by

bpk-list-item-margin-top

$bpk-list-item-margin-top: 0 !default;

Used by

bpk-list-margin-bottom

$bpk-list-margin-bottom: .75rem !default;

Used by

bpk-list-margin-top

$bpk-list-margin-top: 0 !default;

Used by

bpk-list-nested-margin-bottom

$bpk-list-nested-margin-bottom: 0 !default;

Used by

bpk-list-nested-margin-top

$bpk-list-nested-margin-top: 0 !default;

Used by

bpk-one-pixel-rem

$bpk-one-pixel-rem: .0625rem !default;

Used by

bpk-p-margin-bottom

$bpk-p-margin-bottom: .75rem !default;

Used by

bpk-p-margin-top

$bpk-p-margin-top: 0 !default;

Used by

bpk-spacing-base

$bpk-spacing-base: 1.5rem !default;

Used by

bpk-spacing-lg

$bpk-spacing-lg: 1.875rem !default;

Used by

bpk-spacing-md

$bpk-spacing-md: 1.125rem !default;

Used by

bpk-spacing-none

$bpk-spacing-none: 0 !default;

bpk-spacing-sm

$bpk-spacing-sm: .75rem !default;

Used by

bpk-spacing-xl

$bpk-spacing-xl: 2.250rem !default;

Used by

bpk-spacing-xs

$bpk-spacing-xs: .375rem !default;

Used by

bpk-spacing-xxl

$bpk-spacing-xxl: 2.625rem !default;

Used by

states

variables

bpk-state-selected-background-color

$bpk-state-selected-background-color: rgb(8, 78, 178) !default;

svgs

mixins

[private] _bpk-icon-factory

@mixin _bpk-icon-factory($spacing, $icon) { ... }

Description

Icon factory.

Parameters

NameDescriptionTypeDefault value
$spacing—Variable—
$icon—Key—

Used by

[private] _bpk-svg--align-to-button

@mixin _bpk-svg--align-to-button() { ... }

Description

Button alignment utility.

Parameters

None.

Used by

[private] _bpk-svg--align-to-large-button

@mixin _bpk-svg--align-to-large-button() { ... }

Description

Large button alignment utility.

Parameters

None.

Requires

Used by

bpk-icon

@mixin bpk-icon($icon, $color, $size) { ... }

Description

Icon.

Note: You will need to pass the sassFunction encodebase64 to your node-sass process to use this mixin:

var sass = require('node-sass');
var sassFunctions = require('bpk-mixins/sass-functions');
...
sass.render({
  file: 'mysassfile.scss',
  functions: sassFunctions,
});

Parameters

NameDescriptionTypeDefault value
$icon—Key—
$color—Variable—
$size—Key—

Example

.selector {
  @include bpk-icon(flight, $bpk-color-sky-gray-tint-02, large);
}

Requires

bpk-icon-sm

Deprecated!

Use bpk-icon instead

@mixin bpk-icon-sm($icon: '') { ... }

Description

Small icon.

Parameters

NameDescriptionTypeDefault value
$icon

The key of the desired SVG datauri from the $bpk-icons-sm map.

Key''

Example

.selector {
  @include bpk-icon-sm(flight-sky-gray-tint-02);
}

Requires

Used by

bpk-icon-lg

Deprecated!

Use bpk-icon instead

@mixin bpk-icon-lg($icon: '') { ... }

Description

Large icon.

Parameters

NameDescriptionTypeDefault value
$icon

The key of the desired SVG datauri from the $bpk-icons-lg map.

Key''

Example

.selector {
  @include bpk-icon-lg(flight-sky-gray-tint-02);
}

Requires

Used by

bpk-icon-sm--align-to-button

@mixin bpk-icon-sm--align-to-button() { ... }

Description

Align to button. Modifies the bpk-icon-sm mixin.

Parameters

None.

Example

.selector {
  @include bpk-icon-sm(flight-sky-gray-tint-02);
  @include bpk-icon-sm--align-to-button();
}

Requires

bpk-icon-lg--align-to-large-button

@mixin bpk-icon-lg--align-to-large-button() { ... }

Description

Align to large button. Modifies the bpk-icon-lg mixin.

Parameters

None.

Example

.selector {
  @include bpk-icon-lg(flight-sky-gray-tint-02);
  @include bpk-icon-lg--align-to-large-button();
}

Requires

bpk-icon--rtl-support

@mixin bpk-icon--rtl-support() { ... }

Description

RTL support. Modifies the bpk-icon-sm or bpk-icon-lg mixin.

Parameters

None.

Example

.selector {
  @include bpk-icon-sm(flight-sky-gray-tint-02);
  @include bpk-icon--rtl-support();
}

Requires

bpk-spinner

@mixin bpk-spinner($spinner) { ... }

Description

Small spinner.

Parameters

NameDescriptionTypeDefault value
$spinner

The key of the desired SVG datauri from the $bpk-spinners map.

Key—

Example

.selector {
  @include bpk-spinner(spinner-sky-gray-tint-02);
}

Requires

Used by

bpk-spinner--lg

@mixin bpk-spinner--lg() { ... }

Description

Large spinner. Modifies the bpk-spinner mixin.

Parameters

None.

Example

.selector {
  @include bpk-spinner(spinner-sky-gray-tint-02);
  @include bpk-spinner--lg();
}

Requires

bpk-spinner--xl

@mixin bpk-spinner--xl() { ... }

Description

Extra large spinner. Modifies the bpk-spinner mixin.

Parameters

None.

Example

.selector {
  @include bpk-spinner(spinner-sky-gray-tint-02);
  @include bpk-spinner--xl();
}

Requires

bpk-spinner--align-to-button

@mixin bpk-spinner--align-to-button() { ... }

Description

Align spinner to button. Modifies the bpk-spinner mixin.

Parameters

None.

Example

.selector {
  @include bpk-spinner();
  @include bpk-icon--align-to-button();
}

Requires

bpk-spinner--align-to-large-button

@mixin bpk-spinner--align-to-large-button() { ... }

Description

Align spinner to large button. Modifies the bpk-spinner mixin.

Parameters

None.

Example

.selector {
  @include bpk-spinner();
  @include bpk-spinner--align-to-large-button();
}

Requires

text-colors

variables

bpk-font-color-base

$bpk-font-color-base: rgb(17, 18, 54) !default;

Used by

bpk-link-active-color

$bpk-link-active-color: rgb(4, 39, 89) !default;

Used by

bpk-link-alternate-active-color

$bpk-link-alternate-active-color: rgb(221, 221, 229) !default;

Used by

bpk-link-alternate-color

$bpk-link-alternate-color: rgb(255, 255, 255) !default;

Used by

bpk-link-alternate-hover-color

$bpk-link-alternate-hover-color: rgb(255, 255, 255) !default;

Used by

bpk-link-alternate-visited-color

$bpk-link-alternate-visited-color: rgb(255, 255, 255) !default;

Used by

bpk-link-color

$bpk-link-color: rgb(7, 112, 227) !default;

Used by

bpk-link-hover-color

$bpk-link-hover-color: rgb(8, 78, 178) !default;

Used by

bpk-link-visited-color

$bpk-link-visited-color: rgb(7, 112, 227) !default;

Used by

bpk-link-white-active-color

$bpk-link-white-active-color: rgb(221, 221, 229) !default;

bpk-link-white-color

$bpk-link-white-color: rgb(255, 255, 255) !default;

bpk-link-white-hover-color

$bpk-link-white-hover-color: rgb(255, 255, 255) !default;

bpk-link-white-visited-color

$bpk-link-white-visited-color: rgb(255, 255, 255) !default;

bpk-text-primary-light-color

$bpk-text-primary-light-color: rgb(17, 18, 54) !default;

bpk-text-secondary-light-color

$bpk-text-secondary-light-color: rgb(68, 69, 96) !default;

text-decorations

variables

bpk-link-hover-text-decoration

$bpk-link-hover-text-decoration: underline !default;

Used by

bpk-link-text-decoration

$bpk-link-text-decoration: none !default;

Used by

typesettings

variables

bpk-font-family-base

$bpk-font-family-base: 'Skyscanner Relative', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif !default;

bpk-font-size-base

$bpk-font-size-base: 1rem !default;

bpk-font-size-lg

$bpk-font-size-lg: 1.25rem !default;

bpk-font-size-root

$bpk-font-size-root: 100% !default;

bpk-font-size-sm

$bpk-font-size-sm: .875rem !default;

bpk-font-size-xl

$bpk-font-size-xl: 1.5rem !default;

bpk-font-size-xs

$bpk-font-size-xs: .75rem !default;

bpk-font-size-xxl

$bpk-font-size-xxl: 1.875rem !default;

bpk-font-size-xxxl

$bpk-font-size-xxxl: 2.25rem !default;

bpk-font-size-xxxxl

$bpk-font-size-xxxxl: 2.625rem !default;

bpk-font-size-xxxxxl

$bpk-font-size-xxxxxl: 3.75rem !default;

bpk-line-height-base

$bpk-line-height-base: 1.25rem !default;

Used by

bpk-line-height-lg

$bpk-line-height-lg: 1.625rem !default;

bpk-line-height-sm

$bpk-line-height-sm: 1.125rem !default;

bpk-line-height-xl

$bpk-line-height-xl: 1.9375rem !default;

bpk-line-height-xs

$bpk-line-height-xs: 1rem !default;

bpk-line-height-xxl

$bpk-line-height-xxl: 2.4375rem !default;

bpk-line-height-xxxl

$bpk-line-height-xxxl: 2.9375rem !default;

bpk-line-height-xxxxl

$bpk-line-height-xxxxl: 3.4375rem !default;

bpk-line-height-xxxxxl

$bpk-line-height-xxxxxl: 4.875rem !default;

typography

mixins

[private] _bpk-text-factory

@mixin _bpk-text-factory($font-size, $line-height, $font-weight, $letter-spacing) { ... }

Description

Type factory.

Parameters

NameDescriptionTypeDefault value
$font-size—Variable—
$line-height—Variable—
$font-weight

false

Variable—
$letter-spacing

false

Variable—

Used by

bpk-text

@mixin bpk-text() { ... }

Description

Text margin reset.

Parameters

None.

Example

.selector {
  @include bpk-text;
}

Used by

bpk-text--xs

@mixin bpk-text--xs() { ... }

Description

Extra small text style

Parameters

None.

Example

.selector {
  @include bpk-text;
  @include bpk-text--xs;
}

Requires

Used by

bpk-text-xs

@mixin bpk-text-xs() { ... }

Description

Extra small text style (without margin reset)

Parameters

None.

Example

.selector {
  @include bpk-text-xs;
}

Requires

Used by

bpk-text--sm

@mixin bpk-text--sm() { ... }

Description

Small text style

Parameters

None.

Example

.selector {
  @include bpk-text;
  @include bpk-text--sm;
}

Requires

Used by

bpk-text-sm

@mixin bpk-text-sm() { ... }

Description

Small text style (without margin reset)

Parameters

None.

Example

.selector {
  @include bpk-text-sm;
}

Requires

bpk-text--base

@mixin bpk-text--base() { ... }

Description

Base text style

Parameters

None.

Example

.selector {
  @include bpk-text;
  @include bpk-text--base;
}

Requires

Used by

bpk-text-base

@mixin bpk-text-base() { ... }

Description

Base text style (without margin reset)

Parameters

None.

Example

.selector {
  @include bpk-text-base;
}

Requires

Used by

bpk-text--lg

@mixin bpk-text--lg() { ... }

Description

Large text style

Parameters

None.

Example

.selector {
  @include bpk-text;
  @include bpk-text--lg;
}

Requires

Used by

bpk-text-lg

@mixin bpk-text-lg() { ... }

Description

Large text style (without margin reset)

Parameters

None.

Example

.selector {
  @include bpk-text-lg;
}

Requires

bpk-text--xl

@mixin bpk-text--xl() { ... }

Description

Extra large text style

Parameters

None.

Example

.selector {
  @include bpk-text;
  @include bpk-text--xl;
}

Requires

Used by

bpk-text-xl

@mixin bpk-text-xl() { ... }

Description

Extra large text style (without margin reset)

Parameters

None.

Example

.selector {
  @include bpk-text-xl;
}

Requires

Used by

bpk-text--xxl

@mixin bpk-text--xxl() { ... }

Description

Extra extra large text style

Parameters

None.

Example

.selector {
  @include bpk-text;
  @include bpk-text--xxl;
}

Requires

Used by

bpk-text-xxl

@mixin bpk-text-xxl() { ... }

Description

Extra extra large text style (without margin reset)

Parameters

None.

Example

.selector {
  @include bpk-text-xxl;
}

Requires

Used by

bpk-text--xxxl

@mixin bpk-text--xxxl() { ... }

Description

Extra extra large text style

Parameters

None.

Example

.selector {
  @include bpk-text;
  @include bpk-text--xxxl;
}

Requires

Used by

bpk-text-xxxl

@mixin bpk-text-xxxl() { ... }

Description

Extra extra large text style (without margin reset)

Parameters

None.

Example

.selector {
  @include bpk-text-xxxl;
}

Requires

bpk-text--xxxxl

@mixin bpk-text--xxxxl() { ... }

Description

Extra extra large text style

Parameters

None.

Example

.selector {
  @include bpk-text;
  @include bpk-text--xxxxl;
}

Requires

Used by

bpk-text-xxxxl

@mixin bpk-text-xxxxl() { ... }

Description

Extra extra large text style (without margin reset)

Parameters

None.

Example

.selector {
  @include bpk-text-xxxxl;
}

Requires

Used by

bpk-text--xxxxxl

@mixin bpk-text--xxxxxl() { ... }

Description

Extra extra large text style

Parameters

None.

Example

.selector {
  @include bpk-text;
  @include bpk-text--xxxxxl;
}

Requires

Used by

bpk-text-xxxxxl

@mixin bpk-text-xxxxxl() { ... }

Description

Extra extra large text style (without margin reset)

Parameters

None.

Example

.selector {
  @include bpk-text-xxxxxl;
}

Requires

bpk-text--bold

@mixin bpk-text--bold() { ... }

Description

Bold text style

Parameters

None.

Example

.selector {
  @include bpk-text;
  @include bpk-text--bold;
}

Requires

Used by

bpk-text-bold

@mixin bpk-text-bold() { ... }

Description

Bold text style (without margin reset)

Parameters

None.

Example

.selector {
  @include bpk-text-bold;
}

Requires

Used by

bpk-heading-1

@mixin bpk-heading-1() { ... }

Description

Level 1 heading.

Parameters

None.

Example

.selector {
  @include bpk-heading-1();
}

Requires

Used by

bpk-heading-2

@mixin bpk-heading-2() { ... }

Description

Level 2 heading.

Parameters

None.

Example

.selector {
  @include bpk-heading-2();
}

Requires

Used by

bpk-heading-3

@mixin bpk-heading-3() { ... }

Description

Level 3 heading.

Parameters

None.

Example

.selector {
  @include bpk-heading-3();
}

Requires

Used by

bpk-heading-4

@mixin bpk-heading-4() { ... }

Description

Level 4 heading.

Parameters

None.

Example

.selector {
  @include bpk-heading-4();
}

Requires

Used by

bpk-heading-5

@mixin bpk-heading-5() { ... }

Description

Level 5 heading.

Parameters

None.

Example

.selector {
  @include bpk-heading-5();
}

Requires

Used by

bpk-heading-6

@mixin bpk-heading-6() { ... }

Description

Level 6 heading.

Parameters

None.

Example

.selector {
  @include bpk-heading-6();
}

Requires

Used by

bpk-heading--no-bottom-margin

@mixin bpk-heading--no-bottom-margin() { ... }

Description

Remove bottom margin from heading. Modifies the various bpk-heading mixins.

Parameters

None.

Example

.selector {
  @include bpk-heading-1();
  @include bpk-heading--no-bottom-margin();
}

Requires

bpk-content-heading

@mixin bpk-content-heading() { ... }

Description

Headings within content containers. Modifies the various bpk-heading mixins.

Parameters

None.

Example

.selector {
  @include bpk-heading-1();
  @include bpk-content-heading();
}

Requires

bpk-paragraph

@mixin bpk-paragraph() { ... }

Description

Paragraph.

Parameters

None.

Example

.selector {
  @include bpk-paragraph();
}

Requires

bpk-list

@mixin bpk-list() { ... }

Description

List.

Parameters

None.

Example

.selector {
  @include bpk-list();
}

Requires

Used by

bpk-list--nested

@mixin bpk-list--nested() { ... }

Description

Nested list. Modifies the bpk-list mixin.

Parameters

None.

Example

.selector {
  @include bpk-list();
  @include bpk-list--nested();
}

Requires

Used by

bpk-list-item

@mixin bpk-list-item() { ... }

Description

List item.

Parameters

None.

Example

.selector {
  @include bpk-list-item();
}

Requires

Used by

bpk-link

@mixin bpk-link() { ... }

Description

Inline link.

Parameters

None.

Example

.selector {
  @include bpk-link();
}

Requires

Used by

bpk-link--alternate

@mixin bpk-link--alternate() { ... }

Description

White link. Modifies the bpk-link mixin.

Parameters

None.

Example

.selector {
  @include bpk-link();
  @include bpk-link--white();
}

Requires

bpk-link--active

@mixin bpk-link--active() { ... }

Description

Active link. Modifies the bpk-link mixin.

Parameters

None.

Example

.selector {
  @include bpk-link();
  @include bpk-link--active();
}

Requires

bpk-table

@mixin bpk-table() { ... }

Description

Table.

Parameters

None.

Example

.selector {
  @include bpk-table();
}

Requires

Used by

bpk-table--alternate

@mixin bpk-table--alternate() { ... }

Description

Alternate table style.

Parameters

None.

Example

.selector {
  @include bpk-table();
  @include bpk-table--alternate();
}

Requires

Used by

bpk-table__cell

@mixin bpk-table__cell() { ... }

Description

Table cell.

Parameters

None.

Example

.selector {
  @include bpk-table__cell();
}

Requires

Used by

bpk-table__cell--head

@mixin bpk-table__cell--head() { ... }

Description

Table head cell. Modifies the bpk-table__cell mixin.

Parameters

None.

Example

.selector {
  @include bpk-table__cell();
  @include bpk-table__cell--head();
}

Requires

Used by

bpk-table__cell--head-alternate

@mixin bpk-table__cell--head-alternate() { ... }

Description

Alternate table head cell. Modifies the bpk-table__cell mixin.

Parameters

None.

Example

.selector {
  @include bpk-table__cell();
  @include bpk-table__cell--head-alternate();
}

Requires

Used by

bpk-code

@mixin bpk-code() { ... }

Description

Code.

Parameters

None.

Example

.selector {
  @include bpk-code();
}

Requires

Used by

bpk-code--alternate

@mixin bpk-code--alternate() { ... }

Description

Alternate code style suited for display on non-white backgrounds.

Parameters

None.

Example

.selector {
  @include bpk-code();
  @include bpk-code--alternate();
}

Requires

Used by

bpk-code--block

@mixin bpk-code--block() { ... }

Description

Code block. Modifies the bpk-code mixin.

Parameters

None.

Example

.selector {
  @include bpk-code();
  @include bpk-code--block();
}

Requires

Used by

bpk-code__pre

@mixin bpk-code__pre() { ... }

Description

Pre (code block wrapper).

Parameters

None.

Example

.selector {
  @include bpk-code__pre();
}

Requires

Used by

bpk-code__pre--alternate

@mixin bpk-code__pre--alternate() { ... }

Description

Pre (code block wrapper) alternate style.

Parameters

None.

Example

.selector {
  @include bpk-code__pre();
  @include bpk-code__pre--alternate();
}

Requires

Used by

bpk-blockquote

@mixin bpk-blockquote() { ... }

Description

Blockquote.

Parameters

None.

Example

.selector {
  @include bpk-blockquote();
}

Requires

Used by

bpk-blockquote--extra-spacing

@mixin bpk-blockquote--extra-spacing() { ... }

Description

Adds additional spacing above and below blockquotes. Modifies the bpk-blockquote mixin.

Parameters

None.

Example

.selector {
  @include bpk-blockquote();
  @include bpk-blockquote--extra-spacing();
}

Requires

bpk-content-container--bare-html

@mixin bpk-content-container--bare-html() { ... }

Description

Content container for bare html. Modifies the bpk-content-container mixin.

Parameters

None.

Example

.selector {
  @include bpk-content-container();
  @include bpk-content-container--bare-html();
}

Requires

Used by

bpk-content-container--bare-html-alternate

@mixin bpk-content-container--bare-html-alternate() { ... }

Description

Content container for bare html with alternate style

Parameters

None.

Example

.selector {
  @include bpk-content-container();
  @include bpk-content-container--bare-html();
  @include bpk-content-container--bare-html-alternate();
}

Requires

css

/* stylelint-disable selector-max-type */ @mixin bpk-content-container

/* stylelint-disable selector-max-type */
@mixin bpk-content-container { ... }

Description

Content container.

Example

.selector {
  @include bpk-content-container();
}

General

mixins

bpk-margin-leading

@mixin bpk-margin-leading($margin, $resetOppositeMargin: false) { ... }

Description

RTL aware leading margin

Parameters

NameDescriptionTypeDefault value
$margin

The desired leading margin.

String—
$resetOppositeMargin

Whether to reset the opposite margin to 0.

Booleanfalse

Example

.selector {
  @include bpk-margin-leading($bpk-spacing-sm);
}

bpk-margin-trailing

@mixin bpk-margin-trailing($margin, $resetOppositeMargin: false) { ... }

Description

RTL aware trailing margin

Parameters

NameDescriptionTypeDefault value
$margin

The desired trailing margin.

String—
$resetOppositeMargin

Whether to reset the opposite margin to 0.

Booleanfalse

Example

.selector {
  @include bpk-margin-trailing($bpk-spacing-sm);
}

utils

mixins

bpk-hidden

@mixin bpk-hidden() { ... }

Description

Hide visually and from screen readers.

Parameters

None.

Example

.selector {
  @include bpk-hidden();
}

bpk-visually-hidden

@mixin bpk-visually-hidden() { ... }

Description

Hide only visually, but have it available for screen readers:

http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

Parameters

None.

Example

.selector {
  @include bpk-visually-hidden();
}

Used by

bpk-visually-hidden--focusable

@mixin bpk-visually-hidden--focusable() { ... }

Description

Modifies the bpk-visually-hidden mixin to allow the element to be focusable when navigated to via the keyboard:

https://www.drupal.org/node/897638

Parameters

None.

Example

.selector {
  @include bpk-visually-hidden();
  @include bpk-visually-hidden--focusable();
}

Requires

bpk-invisible

@mixin bpk-invisible() { ... }

Description

Hide visually and from screen readers, but maintain layout.

Parameters

None.

Example

.selector {
  @include bpk-invisible();
}

bpk-clearfix

@mixin bpk-clearfix() { ... }

Description

Clearfix: contain floats.

Parameters

None.

Example

.selector {
  @include bpk-clearfix();
}

Used by

bpk-rtl

@mixin bpk-rtl() { ... }

Description

Target RTL specific styles.

Parameters

None.

Example

.selector {
  @include bpk-rtl() {
    /* RTL scss goes here */
  }
}

bpk-hover

@mixin bpk-hover() { ... }

Description

:hover pseudo selector wrapper which prevents styles displaying on touch devices

Parameters

None.

Example

.selector {
  @include bpk-hover() {
    /* Non-touch specific hover scss goes here */
  }
}

bpk-locale

@mixin bpk-locale() { ... }

Description

Target locale specific styles.

Parameters

None.

Example

.selector {
  @include bpk-locale('ja-JP') {
    /* ja-JP scss goes here */
  }
}

bpk-themeable-property

@mixin bpk-themeable-property() { ... }

Description

Create a Backpack themeable property with fallback support for old browsers and when the CSS variable is not defined.

Parameters

None.

Example

.selector {
  @include bpk-themeable-property(color, --bpk-link-text-color, $fallback-text-color);
}

Used by

bpk-apply-primary-color-to

@mixin bpk-apply-primary-color-to() { ... }

Description

Create a property that uses the Backpack primary color blue-500.

Parameters

None.

Example

.selector {
  @include bpk-apply-primary-color-to(color);
}

Requires

bpk-touch-tappable

@mixin bpk-touch-tappable() { ... }

Description

Increases the tappabel area of the element to the minimum required for touch devices.

Parameters

None.

Example

.selector {
  @include bpk-touch-area;
}

Requires

functions

str-replace

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

Description

Replace part of a string with another string.

Parameters

NameDescriptionTypeDefault value
$string

The string inside which the replacement should take place.

String—
$search

The substring to be replaced.

String—
$replace

The string to replace $search.

String''

Used by

z-indices

variables

bpk-zindex-autosuggest

$bpk-zindex-autosuggest: 900 !default;

bpk-zindex-drawer

$bpk-zindex-drawer: 1100 !default;

bpk-zindex-modal

$bpk-zindex-modal: 1100 !default;

bpk-zindex-popover

$bpk-zindex-popover: 900 !default;

bpk-zindex-scrim

$bpk-zindex-scrim: 1000 !default;

bpk-zindex-tooltip

$bpk-zindex-tooltip: 900 !default;