animations

variables

bpk-duration-xs

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

bpk-duration-sm

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

Used by

bpk-duration-base

$bpk-duration-base: 400ms !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--normal

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

Description

Normal badge. Modifies the bpk-badge mixin.

Parameters

None.

Example

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

Requires

bpk-badge--warning

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

Description

Warning badge. Modifies the bpk-badge mixin.

Parameters

None.

Example

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

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--critical

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

Description

Critical badge. Modifies the bpk-badge mixin.

Parameters

None.

Example

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

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

bpk-badge--strong

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

Description

Strong badge. Modifies the bpk-badge mixin.

Parameters

None.

Example

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

Requires

bpk-badge--brand

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

Description

Brand badge. Modifies the bpk-badge mixin.

Parameters

None.

Example

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

Requires

borders

variables

bpk-border-size-sm

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

Used by

bpk-border-size-lg

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

Used by

bpk-border-size-xl

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

Used by

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

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

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

box-shadows

variables

bpk-box-shadow-sm

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

Used by

bpk-box-shadow-lg

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

Used by

bpk-box-shadow-xl

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

Used by

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

breakpoints

variables

bpk-breakpoint-query-tablet-only

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

Used by

bpk-breakpoint-small-tablet-margin

$bpk-breakpoint-small-tablet-margin: 1.5rem !default;

bpk-breakpoint-query-small-tablet

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

Used by

bpk-breakpoint-small-mobile-margin

$bpk-breakpoint-small-mobile-margin: 1rem !default;

bpk-breakpoint-query-mobile

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

Used by

bpk-breakpoint-query-small-tablet-only

$bpk-breakpoint-query-small-tablet-only: "(min-width: 32.0625rem) and (max-width: 48rem)" !default;

Used by

bpk-breakpoint-small-mobile

$bpk-breakpoint-small-mobile: 22.4375rem !default;

bpk-breakpoint-query-above-mobile

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

Used by

bpk-breakpoint-query-tablet

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

Used by

bpk-breakpoint-small-tablet

$bpk-breakpoint-small-tablet: 48rem !default;

bpk-breakpoint-query-above-tablet

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

Used by

bpk-breakpoint-desktop

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

bpk-breakpoint-mobile

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

bpk-breakpoint-tablet

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

bpk-breakpoint-query-desktop-only

$bpk-breakpoint-query-desktop-only: "(min-width: 64.0625rem) and (max-width: 80rem)" !default;

Used by

bpk-breakpoint-query-above-desktop

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

Used by

bpk-breakpoint-tablet-margin

$bpk-breakpoint-tablet-margin: 2rem !default;

bpk-breakpoint-mobile-margin

$bpk-breakpoint-mobile-margin: 1.5rem !default;

bpk-breakpoint-query-small-mobile

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

Used by

bpk-breakpoint-desktop-margin

$bpk-breakpoint-desktop-margin: 1rem * 3 !default;

mixins

bpk-container

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

Parameters

None.

bpk-breakpoint-small-mobile

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

Description

Breakpoint to target up to and including small mobile viewports.

Parameters

None.

Example

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

  /* larger mobile, tablet & desktop viewport scss goes here */
}

Requires

bpk-breakpoint-mobile

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

Description

Breakpoint to target up to and including mobile viewports.

Parameters

None.

Example

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

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

Requires

bpk-breakpoint-small-tablet

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

Description

Breakpoint to target up to and including small tablet viewports.

Parameters

None.

Example

.selector {
  @include bpk-breakpoint-small-tablet {
    /* up to and including small tablet viewport scss goes here */
  }

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

Requires

bpk-breakpoint-tablet

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

Description

Breakpoint to target up to and including tablet viewports.

Parameters

None.

Example

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

  /* desktop viewport scss goes here */
}

Requires

bpk-breakpoint-small-tablet-only

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

Description

Breakpoint to target only small tablet viewports.

Parameters

None.

Example

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

  /* mobile, larger tablet & desktop viewport scss goes here */
}

Requires

bpk-breakpoint-tablet-only

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

Description

Breakpoint to target only 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

bpk-breakpoint-above-desktop

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

Description

Breakpoint to target large desktop viewports.

Parameters

None.

Example

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

  /* mobile, tablet, desktop viewport scss goes here */
}

Requires

bpk-breakpoint-desktop-only

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

Description

Breakpoint to target only desktop viewports.

Parameters

None.

Example

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

  /* mobile, tablet & large desktop viewport scss goes here */
}

Requires

button-colors

variables

bpk-private-button-secondary-pressed-background-night

$bpk-private-button-secondary-pressed-background-night: rgb(1, 9, 19) !default;

bpk-private-button-link-normal-foreground-night

$bpk-private-button-link-normal-foreground-night: rgb(132, 233, 255) !default;

bpk-private-button-link-on-dark-disabled-foreground-night

$bpk-private-button-link-on-dark-disabled-foreground-night: rgba(255, 255, 255, 0.2) !default;

bpk-private-button-secondary-normal-background-night

$bpk-private-button-secondary-normal-background-night: rgb(36, 51, 70) !default;

bpk-private-button-primary-on-light-pressed-background-day

$bpk-private-button-primary-on-light-pressed-background-day: rgb(21, 70, 121) !default;

Used by

bpk-private-button-featured-normal-background-day

$bpk-private-button-featured-normal-background-day: rgb(0, 98, 227) !default;

Used by

bpk-private-button-featured-pressed-background-night

$bpk-private-button-featured-pressed-background-night: rgb(209, 247, 255) !default;

bpk-private-button-primary-on-light-normal-background-night

$bpk-private-button-primary-on-light-normal-background-night: rgb(5, 32, 60) !default;

bpk-private-button-secondary-pressed-background-day

$bpk-private-button-secondary-pressed-background-day: rgb(194, 201, 205) !default;

Used by

bpk-private-button-link-normal-foreground-day

$bpk-private-button-link-normal-foreground-day: rgb(0, 98, 227) !default;

Used by

bpk-private-button-primary-on-light-disabled-foreground-night

$bpk-private-button-primary-on-light-disabled-foreground-night: rgba(0, 0, 0, 0.2) !default;

bpk-private-button-secondary-on-dark-disabled-background-night

$bpk-private-button-secondary-on-dark-disabled-background-night: rgb(11, 18, 29) !default;

bpk-private-button-destructive-normal-foreground-night

$bpk-private-button-destructive-normal-foreground-night: rgb(255, 100, 156) !default;

bpk-private-button-link-on-dark-disabled-foreground-day

$bpk-private-button-link-on-dark-disabled-foreground-day: rgba(255, 255, 255, 0.2) !default;

Used by

bpk-private-button-secondary-normal-background-day

$bpk-private-button-secondary-normal-background-day: rgb(224, 227, 229) !default;

Used by

bpk-private-button-primary-on-light-normal-background-day

$bpk-private-button-primary-on-light-normal-background-day: rgb(5, 32, 60) !default;

Used by

bpk-private-button-primary-on-light-disabled-foreground-day

$bpk-private-button-primary-on-light-disabled-foreground-day: rgba(0, 0, 0, 0.2) !default;

Used by

bpk-private-button-primary-on-dark-normal-background-night

$bpk-private-button-primary-on-dark-normal-background-night: rgb(255, 255, 255) !default;

bpk-private-button-featured-pressed-background-day

$bpk-private-button-featured-pressed-background-day: rgb(2, 77, 175) !default;

Used by

bpk-private-button-primary-on-dark-disabled-foreground-night

$bpk-private-button-primary-on-dark-disabled-foreground-night: rgba(0, 0, 0, 0.2) !default;

bpk-private-button-secondary-on-dark-disabled-background-day

$bpk-private-button-secondary-on-dark-disabled-background-day: rgb(11, 18, 29) !default;

Used by

bpk-private-button-secondary-on-dark-pressed-background-night

$bpk-private-button-secondary-on-dark-pressed-background-night: rgb(1, 9, 19) !default;

bpk-private-button-destructive-normal-foreground-day

$bpk-private-button-destructive-normal-foreground-day: rgb(200, 4, 86) !default;

Used by

bpk-private-button-primary-on-dark-normal-background-day

$bpk-private-button-primary-on-dark-normal-background-day: rgb(255, 255, 255) !default;

Used by

bpk-private-button-primary-on-dark-disabled-foreground-day

$bpk-private-button-primary-on-dark-disabled-foreground-day: rgba(0, 0, 0, 0.2) !default;

Used by

bpk-private-button-link-pressed-foreground-night

$bpk-private-button-link-pressed-foreground-night: rgb(209, 247, 255) !default;

bpk-private-button-secondary-on-dark-pressed-background-day

$bpk-private-button-secondary-on-dark-pressed-background-day: rgb(1, 9, 19) !default;

Used by

bpk-private-button-primary-on-light-disabled-background-night

$bpk-private-button-primary-on-light-disabled-background-night: rgb(224, 227, 229) !default;

bpk-private-button-link-pressed-foreground-day

$bpk-private-button-link-pressed-foreground-day: rgb(21, 70, 121) !default;

Used by

bpk-private-button-destructive-normal-background-night

$bpk-private-button-destructive-normal-background-night: rgb(36, 51, 70) !default;

bpk-private-button-primary-normal-background-night

$bpk-private-button-primary-normal-background-night: rgb(5, 65, 132) !default;

bpk-private-button-destructive-pressed-background-night

$bpk-private-button-destructive-pressed-background-night: rgb(255, 100, 156) !default;

bpk-private-button-primary-pressed-background-night

$bpk-private-button-primary-pressed-background-night: rgb(0, 43, 91) !default;

bpk-private-button-primary-on-light-disabled-background-day

$bpk-private-button-primary-on-light-disabled-background-day: rgb(224, 227, 229) !default;

Used by

bpk-private-button-primary-on-dark-disabled-background-night

$bpk-private-button-primary-on-dark-disabled-background-night: rgb(224, 227, 229) !default;

bpk-private-button-primary-normal-background-day

$bpk-private-button-primary-normal-background-day: rgb(5, 32, 60) !default;

Used by

bpk-private-button-destructive-normal-background-day

$bpk-private-button-destructive-normal-background-day: rgb(224, 227, 229) !default;

Used by

bpk-private-button-link-on-dark-pressed-foreground-night

$bpk-private-button-link-on-dark-pressed-foreground-night: rgba(255, 255, 255, 0.5) !default;

bpk-private-button-destructive-pressed-background-day

$bpk-private-button-destructive-pressed-background-day: rgb(200, 4, 86) !default;

Used by

bpk-private-button-primary-pressed-background-day

$bpk-private-button-primary-pressed-background-day: rgb(21, 70, 121) !default;

Used by

bpk-private-button-primary-on-dark-disabled-background-day

$bpk-private-button-primary-on-dark-disabled-background-day: rgb(224, 227, 229) !default;

Used by

bpk-private-button-link-on-dark-normal-foreground-night

$bpk-private-button-link-on-dark-normal-foreground-night: rgb(255, 255, 255) !default;

bpk-private-button-disabled-background-night

$bpk-private-button-disabled-background-night: rgb(11, 18, 29) !default;

bpk-private-button-secondary-on-dark-normal-background-night

$bpk-private-button-secondary-on-dark-normal-background-night: rgb(36, 51, 70) !default;

bpk-private-button-secondary-on-dark-disabled-foreground-night

$bpk-private-button-secondary-on-dark-disabled-foreground-night: rgba(255, 255, 255, 0.2) !default;

bpk-private-button-link-on-dark-pressed-foreground-day

$bpk-private-button-link-on-dark-pressed-foreground-day: rgba(255, 255, 255, 0.5) !default;

Used by

bpk-private-button-primary-on-dark-pressed-background-night

$bpk-private-button-primary-on-dark-pressed-background-night: rgb(194, 201, 205) !default;

bpk-private-button-link-on-dark-normal-foreground-day

$bpk-private-button-link-on-dark-normal-foreground-day: rgb(255, 255, 255) !default;

Used by

bpk-private-button-disabled-background-day

$bpk-private-button-disabled-background-day: rgb(224, 227, 229) !default;

Used by

bpk-private-button-secondary-on-dark-normal-background-day

$bpk-private-button-secondary-on-dark-normal-background-day: rgb(36, 51, 70) !default;

Used by

bpk-private-button-secondary-on-dark-disabled-foreground-day

$bpk-private-button-secondary-on-dark-disabled-foreground-day: rgba(255, 255, 255, 0.2) !default;

Used by

bpk-private-button-primary-on-dark-pressed-background-day

$bpk-private-button-primary-on-dark-pressed-background-day: rgb(194, 201, 205) !default;

Used by

bpk-private-button-primary-on-light-pressed-background-night

$bpk-private-button-primary-on-light-pressed-background-night: rgb(21, 70, 121) !default;

bpk-private-button-featured-normal-background-night

$bpk-private-button-featured-normal-background-night: rgb(132, 233, 255) !default;

buttons

variables

bpk-button-height

$bpk-button-height: 2.25rem !default;

Used by

bpk-button-border-radius

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

Used by

bpk-button-large-height

$bpk-button-large-height: 3rem !default;

Used by

bpk-private-button-line-height

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

Used by

bpk-private-card-button-contained-color

$bpk-private-card-button-contained-color: rgba(255, 255, 255, 0.8) !default;

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--primary-on-dark

@mixin bpk-button--primary-on-dark() { ... }

Description

PrimaryOnDark button. Modifies the bpk-button mixin.

Parameters

None.

Example

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

Requires

bpk-button--primary-on-light

@mixin bpk-button--primary-on-light() { ... }

Description

PrimaryOnLight button. Modifies the bpk-button mixin.

Parameters

None.

Example

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

Requires

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--secondary-on-dark

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

Description

Secondary on dark button. Modifies the bpk-button mixin.

Parameters

None.

Example

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

Requires

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--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

Used by

bpk-button--link-on-dark

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

Parameters

None.

Example

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

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

css

/// @example scss /// .selector

/// @example scss
///   .selector { ... }

Description

Link on dark button. Modifies the bpk-button & bpk-button--link mixins.

calendar

variables

bpk-calendar-day-spacing

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

bpk-calendar-day-size

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

canvas-colors

variables

bpk-canvas-day

$bpk-canvas-day: rgb(255, 255, 255) !default;

Used by

bpk-canvas-night

$bpk-canvas-night: rgb(1, 9, 19) !default;

bpk-canvas-contrast-day

$bpk-canvas-contrast-day: rgb(239, 241, 242) !default;

Used by

bpk-canvas-contrast-night

$bpk-canvas-contrast-night: rgb(1, 9, 19) !default;

cards

variables

bpk-card-background-color

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

Used by

bpk-card-padding

$bpk-card-padding: 1rem !default;

Used by

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

chip-colors

variables

bpk-private-chip-on-dark-pressed-stroke-day

$bpk-private-chip-on-dark-pressed-stroke-day: rgb(255, 255, 255) !default;

bpk-private-chip-on-dark-pressed-stroke-night

$bpk-private-chip-on-dark-pressed-stroke-night: rgb(5, 65, 132) !default;

bpk-private-chip-on-dark-on-background-day

$bpk-private-chip-on-dark-on-background-day: rgb(255, 255, 255) !default;

bpk-private-chip-on-dark-on-background-night

$bpk-private-chip-on-dark-on-background-night: rgb(5, 65, 132) !default;

bpk-private-chip-disabled-background-day

$bpk-private-chip-disabled-background-day: rgb(224, 227, 229) !default;

bpk-private-chip-disabled-background-night

$bpk-private-chip-disabled-background-night: rgb(11, 18, 29) !default;

bpk-private-chip-on-dark-on-dismiss-icon-day

$bpk-private-chip-on-dark-on-dismiss-icon-day: rgb(84, 88, 96) !default;

bpk-private-chip-on-dark-on-dismiss-icon-night

$bpk-private-chip-on-dark-on-dismiss-icon-night: rgba(255, 255, 255, 0.5) !default;

colors

variables

bpk-color-sky-blue-shade-03

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

bpk-color-primary-gradient-light

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

bpk-color-erfoud

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

bpk-color-valensole

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

bpk-color-monteverde

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

bpk-color-sky-gray-tint-01

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

bpk-color-black

$bpk-color-black: rgb(1, 9, 19) !default;

bpk-color-sky-gray-tint-02

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

bpk-color-sagano

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

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;

bpk-color-harbour

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

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;

bpk-color-black-tint-01

$bpk-color-black-tint-01: rgb(29, 27, 32) !default;

bpk-color-sky-gray-tint-07

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

bpk-color-black-tint-02

$bpk-color-black-tint-02: rgb(44, 44, 46) !default;

bpk-color-abisko

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

bpk-color-black-tint-03

$bpk-color-black-tint-03: rgb(58, 58, 60) !default;

bpk-color-black-tint-04

$bpk-color-black-tint-04: rgb(72, 72, 74) !default;

bpk-color-white

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

Used by

bpk-color-black-tint-05

$bpk-color-black-tint-05: rgb(99, 99, 102) !default;

bpk-color-black-tint-06

$bpk-color-black-tint-06: rgb(142, 142, 147) !default;

bpk-color-panjin

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

bpk-color-kolkata

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

bpk-color-glencoe

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

bpk-color-tochigi

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

bpk-color-petra

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

bpk-color-sky-blue

$bpk-color-sky-blue: rgb(0, 98, 227) !default;

Used by

bpk-color-bagan

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

bpk-color-hillier

$bpk-color-hillier: rgb(225, 139, 150) !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-bunol

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

bpk-color-sky-blue-tint-03

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

bpk-color-sky-gray

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

bpk-color-nara

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

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-line-dark-color

$bpk-line-dark-color: rgb(72, 72, 74) !default;

bpk-background-alternative-secondary-dark-color

$bpk-background-alternative-secondary-dark-color: rgb(29, 27, 32) !default;

bpk-background-light-color

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

bpk-background-dark-color

$bpk-background-dark-color: rgb(0, 0, 0) !default;

bpk-background-alternative-secondary-light-color

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

bpk-color-system-green

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

bpk-line-light-color

$bpk-line-light-color: rgb(205, 205, 215) !default;

bpk-background-tertiary-dark-color

$bpk-background-tertiary-dark-color: rgb(44, 44, 46) !default;

bpk-background-secondary-dark-color

$bpk-background-secondary-dark-color: rgb(29, 27, 32) !default;

bpk-background-alternative-light-color

$bpk-background-alternative-light-color: rgb(241, 242, 248) !default;

bpk-primary-dark-color

$bpk-primary-dark-color: rgb(109, 159, 235) !default;

bpk-color-system-red

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

bpk-background-alternative-dark-color

$bpk-background-alternative-dark-color: rgb(0, 0, 0) !default;

bpk-primary-light-color

$bpk-primary-light-color: rgb(0, 98, 227) !default;

bpk-background-tertiary-light-color

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

bpk-background-secondary-light-color

$bpk-background-secondary-light-color: rgb(241, 242, 248) !default;

bpk-primary-gradient

$bpk-primary-gradient: #0062E3 !default;

core-colors

variables

bpk-core-eco-day

$bpk-core-eco-day: rgb(15, 161, 169) !default;

bpk-core-eco-night

$bpk-core-eco-night: rgb(15, 161, 169) !default;

bpk-core-accent-day

$bpk-core-accent-day: rgb(0, 98, 227) !default;

Used by

bpk-core-accent-night

$bpk-core-accent-night: rgb(132, 233, 255) !default;

bpk-core-primary-day

$bpk-core-primary-day: rgb(5, 32, 60) !default;

Used by

bpk-core-primary-night

$bpk-core-primary-night: rgb(5, 65, 132) !default;

flare

variables

bpk-flare-height-desktop

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

bpk-flare-height-mobile

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

bpk-flare-corner-radius

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

font-weights

variables

bpk-font-weight-book

$bpk-font-weight-book: 400 !default;

Used by

bpk-font-weight-black

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

Used by

bpk-font-weight-bold

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

Used by

forms

variables

bpk-input-large-height

$bpk-input-large-height: 3rem !default;

Used by

bpk-input-border

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

Used by

bpk-select-border-radius

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

Used by

bpk-input-background

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

Used by

bpk-input-border-width

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

Used by

bpk-label-disabled-color

$bpk-label-disabled-color: rgba(0, 0, 0, 0.2) !default;

Used by

bpk-input-border-radius

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

Used by

bpk-select-disabled-border-color

$bpk-select-disabled-border-color: rgb(224, 227, 229) !default;

bpk-input-disabled-color

$bpk-input-disabled-color: rgba(0, 0, 0, 0.2) !default;

Used by

bpk-input-padding-x

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

Used by

bpk-input-padding-y

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

Used by

bpk-select-border-width

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

Used by

bpk-form-validation-color

$bpk-form-validation-color: rgb(231, 8, 102) !default;

Used by

bpk-input-height

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

Used by

bpk-input-disabled-border-color

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

Used by

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

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__checkmark

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

Description

Used to create the check/tick inside a checked checkbox.

Parameters

None.

Example

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

Requires

Used by

bpk-checkbox__input

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

Description

Form checkbox input.

Parameters

None.

Example

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

Requires

[private] _bpk-radio-border

@mixin _bpk-radio-border($color) { ... }

Description

Form radio button mixin. This is a reusable mixin to set border styles for the radio button.

Parameters

NameDescriptionTypeDefault value
$color—Variable—

Requires

Used by

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-form-validation__container

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

Description

Form validation container.

Parameters

None.

Example

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

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

horizontal-nav

variables

bpk-horizontal-nav-bar-selected-color

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

icons

variables

bpk-icon-size-sm

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

Used by

bpk-icon-size-lg

$bpk-icon-size-lg: 1.5rem !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-letter-spacing-tight

$bpk-letter-spacing-tight: -0.02em !default;

Used by

line-colors

variables

bpk-line-on-dark-night

$bpk-line-on-dark-night: rgb(68, 80, 95) !default;

bpk-line-on-dark-day

$bpk-line-on-dark-day: rgba(255, 255, 255, 0.5) !default;

bpk-line-night

$bpk-line-night: rgb(68, 80, 95) !default;

bpk-line-day

$bpk-line-day: rgb(194, 201, 205) !default;

Used by

map-marker-colors

variables

bpk-private-map-previous-selection-day

$bpk-private-map-previous-selection-day: rgb(207, 228, 255) !default;

bpk-private-map-cluster-pin-night

$bpk-private-map-cluster-pin-night: rgb(255, 255, 255) !default;

bpk-private-map-cluster-pin-previous-selection-night

$bpk-private-map-cluster-pin-previous-selection-night: rgb(148, 195, 255) !default;

bpk-private-map-cluster-pin-day

$bpk-private-map-cluster-pin-day: rgb(5, 32, 60) !default;

bpk-private-map-cluster-pin-previous-selection-day

$bpk-private-map-cluster-pin-previous-selection-day: rgb(148, 195, 255) !default;

bpk-private-map-marker-viewed-foreground-night

$bpk-private-map-marker-viewed-foreground-night: rgba(0, 0, 0, 0.8) !default;

bpk-private-map-marker-viewed-foreground-day

$bpk-private-map-marker-viewed-foreground-day: rgba(255, 255, 255, 0.8) !default;

bpk-private-map-poi-pin-night

$bpk-private-map-poi-pin-night: rgb(142, 71, 186) !default;

bpk-private-map-previous-selection-night

$bpk-private-map-previous-selection-night: rgb(207, 228, 255) !default;

bpk-private-map-poi-pin-day

$bpk-private-map-poi-pin-day: rgb(142, 71, 186) !default;

marcomms-colors

variables

bpk-marcomms-berry

$bpk-marcomms-berry: rgb(231, 8, 102) !default;

bpk-marcomms-charcoal

$bpk-marcomms-charcoal: rgb(22, 22, 22) !default;

bpk-marcomms-orange

$bpk-marcomms-orange: rgb(255, 123, 89) !default;

bpk-marcomms-grey-40

$bpk-marcomms-grey-40: rgb(84, 88, 96) !default;

bpk-marcomms-blue-bright

$bpk-marcomms-blue-bright: rgb(161, 238, 255) !default;

bpk-marcomms-yellow

$bpk-marcomms-yellow: rgb(254, 235, 135) !default;

bpk-marcomms-green-bright

$bpk-marcomms-green-bright: rgb(147, 255, 222) !default;

bpk-marcomms-pink

$bpk-marcomms-pink: rgb(255, 163, 229) !default;

bpk-marcomms-sky-blue

$bpk-marcomms-sky-blue: rgb(0, 98, 227) !default;

bpk-marcomms-dark-sky

$bpk-marcomms-dark-sky: rgb(5, 32, 60) !default;

bpk-marcomms-purple

$bpk-marcomms-purple: rgb(142, 71, 186) !default;

bpk-marcomms-white

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

bpk-marcomms-yellow-muted

$bpk-marcomms-yellow-muted: rgb(255, 247, 207) !default;

bpk-marcomms-pink-muted

$bpk-marcomms-pink-muted: rgb(255, 233, 249) !default;

bpk-marcomms-green-muted

$bpk-marcomms-green-muted: rgb(212, 255, 242) !default;

bpk-marcomms-blue-muted

$bpk-marcomms-blue-muted: rgb(217, 248, 255) !default;

bpk-marcomms-eco-green

$bpk-marcomms-eco-green: rgb(15, 161, 169) !default;

modals

variables

bpk-modal-background-color

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

bpk-modal-initial-opacity

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

bpk-modal-opacity

$bpk-modal-opacity: 1 !default;

bpk-modal-max-width

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

bpk-modal-wide-max-width

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

bpk-modal-content-padding

$bpk-modal-content-padding: 1rem !default;

notifications

variables

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

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

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

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

bpk-banner-alert-primary-color

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

bpk-banner-alert-success-color

$bpk-banner-alert-success-color: rgb(12, 131, 138) !default;

bpk-banner-alert-warn-color

$bpk-banner-alert-warn-color: rgb(245, 93, 66) !default;

bpk-banner-alert-error-color

$bpk-banner-alert-error-color: rgb(231, 8, 102) !default;

bpk-banner-alert-neutral-color

$bpk-banner-alert-neutral-color: rgb(194, 201, 205) !default;

panels

variables

bpk-panel-border-color

$bpk-panel-border-color: rgb(194, 201, 205) !default;

Used by

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

radii

variables

bpk-border-radius-xs

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

Used by

bpk-border-radius-sm

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

Used by

bpk-border-radius-md

$bpk-border-radius-md: .75rem !default;

Used by

bpk-border-radius-lg

$bpk-border-radius-lg: 1.5rem !default;

Used by

bpk-border-radius-xl

$bpk-border-radius-xl: 2.5rem !default;

Used by

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-md

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

Description

Medium border radius.

Parameters

None.

Example

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

Requires

Used by

bpk-border-radius-lg

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

Description

Large border radius.

Parameters

None.

Example

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

Requires

bpk-border-radius-xl

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

Description

Extra large border radius.

Parameters

None.

Example

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

Requires

scrim-colors

variables

bpk-scrim-day

$bpk-scrim-day: rgba(0, 0, 0, 0.7) !default;

bpk-scrim-night

$bpk-scrim-night: rgba(0, 0, 0, 0.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

skeleton-colors

variables

bpk-private-skeleton-shimmer-start-end-day

$bpk-private-skeleton-shimmer-start-end-day: rgba(255, 255, 255, 0) !default;

bpk-private-skeleton-shimmer-start-end-night

$bpk-private-skeleton-shimmer-start-end-night: rgba(0, 0, 0, 0) !default;

bpk-private-skeleton-shimmer-center-day

$bpk-private-skeleton-shimmer-center-day: rgba(255, 255, 255, 0.6) !default;

bpk-private-skeleton-shimmer-center-night

$bpk-private-skeleton-shimmer-center-night: rgba(0, 0, 0, 0.2) !default;

slider-colors

variables

bpk-private-slider-selected-day

$bpk-private-slider-selected-day: rgb(21, 70, 121) !default;

spacings

functions

bpk-spacing-xxxxl

@function bpk-spacing-xxxxl() { ... }

Parameters

None.

bpk-spacing-xxl

@function bpk-spacing-xxl() { ... }

Parameters

None.

Used by

bpk-spacing-md

@function bpk-spacing-md() { ... }

Parameters

None.

Used by

bpk-spacing-sm

@function bpk-spacing-sm() { ... }

Parameters

None.

Used by

bpk-spacing-lg

@function bpk-spacing-lg() { ... }

Parameters

None.

Used by

bpk-spacing-base

@function bpk-spacing-base() { ... }

Parameters

None.

Used by

bpk-spacing-xl

@function bpk-spacing-xl() { ... }

Parameters

None.

Used by

bpk-spacing-xxxl

@function bpk-spacing-xxxl() { ... }

Parameters

None.

variables

bpk-one-pixel-rem

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

Used by

bpk-spacing-none

$bpk-spacing-none: 0 !default;

Used by

bpk-spacing-icon-text

$bpk-spacing-icon-text: .5rem !default;

status-colors

variables

bpk-status-success-spot-night

$bpk-status-success-spot-night: rgb(98, 241, 198) !default;

bpk-status-success-fill-night

$bpk-status-success-fill-night: rgb(177, 255, 231) !default;

bpk-status-success-spot-day

$bpk-status-success-spot-day: rgb(12, 131, 138) !default;

bpk-status-success-fill-day

$bpk-status-success-fill-day: rgb(212, 255, 242) !default;

Used by

bpk-status-danger-spot-night

$bpk-status-danger-spot-night: rgb(255, 100, 156) !default;

bpk-status-warning-spot-night

$bpk-status-warning-spot-night: rgb(254, 235, 135) !default;

bpk-status-danger-fill-night

$bpk-status-danger-fill-night: rgb(255, 202, 221) !default;

bpk-status-warning-fill-night

$bpk-status-warning-fill-night: rgb(251, 241, 187) !default;

bpk-status-danger-spot-day

$bpk-status-danger-spot-day: rgb(231, 8, 102) !default;

bpk-status-warning-spot-day

$bpk-status-warning-spot-day: rgb(245, 93, 66) !default;

bpk-status-danger-fill-day

$bpk-status-danger-fill-day: rgb(255, 233, 249) !default;

Used by

bpk-status-warning-fill-day

$bpk-status-warning-fill-day: rgb(255, 247, 207) !default;

Used by

surface-colors

variables

bpk-surface-default-night

$bpk-surface-default-night: rgb(19, 29, 43) !default;

bpk-surface-default-day

$bpk-surface-default-day: rgb(255, 255, 255) !default;

Used by

bpk-surface-contrast-night

$bpk-surface-contrast-night: rgb(1, 9, 19) !default;

bpk-surface-contrast-day

$bpk-surface-contrast-day: rgb(5, 32, 60) !default;

bpk-surface-elevated-night

$bpk-surface-elevated-night: rgb(36, 51, 70) !default;

bpk-surface-subtle-night

$bpk-surface-subtle-night: rgb(36, 51, 70) !default;

bpk-surface-elevated-day

$bpk-surface-elevated-day: rgb(255, 255, 255) !default;

bpk-surface-highlight-night

$bpk-surface-highlight-night: rgb(36, 51, 70) !default;

bpk-surface-subtle-day

$bpk-surface-subtle-day: rgb(227, 240, 255) !default;

bpk-surface-highlight-day

$bpk-surface-highlight-day: rgb(224, 227, 229) !default;

Used by

svgs

mixins

[private] _bpk-icon-factory

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

Description

Icon factory.

Parameters

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

[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--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();
}

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-text-on-dark-day

$bpk-text-on-dark-day: rgb(255, 255, 255) !default;

Used by

bpk-text-on-light-night

$bpk-text-on-light-night: rgb(1, 9, 19) !default;

bpk-text-disabled-on-dark-day

$bpk-text-disabled-on-dark-day: rgba(255, 255, 255, 0.5) !default;

bpk-text-on-light-day

$bpk-text-on-light-day: rgb(22, 22, 22) !default;

Used by

bpk-text-link-night

$bpk-text-link-night: rgb(132, 233, 255) !default;

bpk-text-disabled-night

$bpk-text-disabled-night: rgba(255, 255, 255, 0.2) !default;

bpk-text-primary-dark-color

$bpk-text-primary-dark-color: rgb(255, 255, 255) !default;

bpk-text-link-day

$bpk-text-link-day: rgb(0, 98, 227) !default;

Used by

bpk-text-quaternary-dark-color

$bpk-text-quaternary-dark-color: rgb(142, 142, 147) !default;

bpk-text-primary-night

$bpk-text-primary-night: rgb(255, 255, 255) !default;

bpk-text-quaternary-light-color

$bpk-text-quaternary-light-color: rgb(143, 144, 160) !default;

bpk-text-disabled-day

$bpk-text-disabled-day: rgba(0, 0, 0, 0.2) !default;

Used by

bpk-text-primary-light-color

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

bpk-text-primary-day

$bpk-text-primary-day: rgb(22, 22, 22) !default;

Used by

bpk-text-error-night

$bpk-text-error-night: rgb(255, 100, 156) !default;

bpk-text-error-day

$bpk-text-error-day: rgb(231, 8, 102) !default;

Used by

bpk-text-tertiary-dark-color

$bpk-text-tertiary-dark-color: rgb(142, 142, 147) !default;

bpk-text-secondary-dark-color

$bpk-text-secondary-dark-color: rgb(178, 178, 191) !default;

bpk-text-primary-inverse-night

$bpk-text-primary-inverse-night: rgb(1, 9, 19) !default;

bpk-text-secondary-night

$bpk-text-secondary-night: rgb(189, 196, 203) !default;

bpk-text-on-dark-night

$bpk-text-on-dark-night: rgb(255, 255, 255) !default;

Used by

bpk-text-secondary-light-color

$bpk-text-secondary-light-color: rgb(104, 105, 127) !default;

bpk-text-primary-inverse-day

$bpk-text-primary-inverse-day: rgb(255, 255, 255) !default;

Used by

bpk-text-disabled-on-dark-night

$bpk-text-disabled-on-dark-night: rgba(255, 255, 255, 0.5) !default;

bpk-text-tertiary-light-color

$bpk-text-tertiary-light-color: rgb(143, 144, 160) !default;

bpk-text-secondary-day

$bpk-text-secondary-day: rgb(84, 88, 96) !default;

Used by

bpk-background-elevation-03-dark-color

$bpk-background-elevation-03-dark-color: rgb(58, 58, 60) !default;

bpk-background-elevation-02-dark-color

$bpk-background-elevation-02-dark-color: rgb(44, 44, 46) !default;

bpk-background-elevation-01-dark-color

$bpk-background-elevation-01-dark-color: rgb(29, 27, 32) !default;

bpk-background-elevation-01-light-color

$bpk-background-elevation-01-light-color: rgb(255, 255, 255) !default;

bpk-background-elevation-02-light-color

$bpk-background-elevation-02-light-color: rgb(255, 255, 255) !default;

bpk-background-elevation-03-light-color

$bpk-background-elevation-03-light-color: rgb(255, 255, 255) !default;

bpk-font-color-base

$bpk-font-color-base: rgb(22, 22, 22) !default;

typesettings

variables

bpk-line-height-xl-tight

$bpk-line-height-xl-tight: 1.75rem !default;

Used by

bpk-line-height-xxxxxl

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

Used by

bpk-line-height-xxxl

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

Used by

bpk-line-height-xl

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

Used by

bpk-font-size-xl

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

Used by

bpk-font-size-xxxxxl

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

Used by

bpk-font-size-xxxl

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

Used by

bpk-line-height-sm

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

Used by

bpk-line-height-lg-tight

$bpk-line-height-lg-tight: 1.5rem !default;

Used by

bpk-line-height-lg

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

Used by

bpk-line-height-xs

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

Used by

bpk-font-size-sm

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

Used by

bpk-font-size-xs

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

Used by

bpk-font-size-lg

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

Used by

bpk-font-size-root

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

bpk-font-size-6-xl

$bpk-font-size-6-xl: 4.75rem !default;

Used by

bpk-font-family-base

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

bpk-line-height-base-tight

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

Used by

bpk-font-size-7-xl

$bpk-font-size-7-xl: 6rem !default;

Used by

bpk-line-height-6-xl

$bpk-line-height-6-xl: 5.25rem !default;

Used by

bpk-font-size-8-xl

$bpk-font-size-8-xl: 7.5rem !default;

Used by

bpk-font-size-xxl

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

Used by

bpk-font-size-xxxxl

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

Used by

bpk-line-height-base

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

Used by

bpk-line-height-7-xl

$bpk-line-height-7-xl: 6rem !default;

Used by

bpk-font-size-base

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

Used by

bpk-line-height-8-xl

$bpk-line-height-8-xl: 7.5rem !default;

Used by

bpk-line-height-xxl

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

Used by

bpk-line-height-xxxxl

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

Used by

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

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

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

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

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

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

bpk-text--black

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

Description

Black text style

Parameters

None.

Example

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

Requires

Used by

bpk-text-black

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

Description

Black text style (without margin reset)

Parameters

None.

Example

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

Requires

bpk-caption

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

Description

Caption text style

Parameters

None.

Example

.selector {
  @include bpk-caption;
}

Requires

Used by

bpk-footnote

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

Description

Footnote text style

Parameters

None.

Example

.selector {
  @include bpk-footnote;
}

Requires

bpk-label-1

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

Description

Label-1 text style

Parameters

None.

Example

.selector {
  @include bpk-label-1;
}

Requires

Used by

bpk-label-2

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

Description

Label-2 text style

Parameters

None.

Example

.selector {
  @include bpk-label-2;
}

Requires

bpk-label-3

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

Description

Label-3 text style

Parameters

None.

Example

.selector {
  @include bpk-label-3;
}

Requires

bpk-body-default

@mixin bpk-body-default() { ... }

Description

Default body text style

Parameters

None.

Example

.selector {
  @include bpk-body-default;
}

Requires

Used by

bpk-body-longform

@mixin bpk-body-longform() { ... }

Description

Longform body text style

Parameters

None.

Example

.selector {
  @include bpk-body-longform;
}

Requires

bpk-subheading

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

Description

Subheading text style

Parameters

None.

Example

.selector {
  @include bpk-subheading;
}

Requires

bpk-hero-1

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

Description

Hero 1 text style

Parameters

None.

Example

.selector {
  @include bpk-hero-1;
}

Requires

bpk-hero-2

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

Description

Hero 2 text style

Parameters

None.

Example

.selector {
  @include bpk-hero-2;
}

Requires

bpk-hero-3

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

Description

Hero 3 text style

Parameters

None.

Example

.selector {
  @include bpk-hero-3;
}

Requires

bpk-hero-4

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

Description

Hero 4 text style

Parameters

None.

Example

.selector {
  @include bpk-hero-4;
}

Requires

bpk-hero-5

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

Description

Hero 5 text style

Parameters

None.

Example

.selector {
  @include bpk-hero-5;
}

Requires

bpk-heading-1

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

Description

Level 1 heading.

Parameters

None.

Example

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

Requires

bpk-heading-2

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

Description

Level 2 heading.

Parameters

None.

Example

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

Requires

bpk-heading-3

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

Description

Level 3 heading.

Parameters

None.

Example

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

Requires

bpk-heading-4

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

Description

Level 4 heading.

Parameters

None.

Example

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

Requires

bpk-heading-5

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

Description

Level 5 heading.

Parameters

None.

Example

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

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

bpk-list-item

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

Description

List item.

Parameters

None.

Example

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

Requires

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

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

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

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

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

bpk-code__pre

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

Description

Pre (code block wrapper).

Parameters

None.

Example

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

Requires

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

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

General

mixins

bpk-margin-leading

@mixin bpk-margin-leading($margin, $resetOppositeMargin: true) { ... }

Description

RTL aware leading margin

Parameters

NameDescriptionTypeDefault value
$margin

The desired leading margin.

String—
$resetOppositeMargin

Whether to reset the opposite margin to 0.

Booleantrue

Example

.selector {
  @include bpk-margin-leading(bpk-spacing-base());
}

bpk-margin-trailing

@mixin bpk-margin-trailing($margin, $resetOppositeMargin: true) { ... }

Description

RTL aware trailing margin

Parameters

NameDescriptionTypeDefault value
$margin

The desired trailing margin.

String—
$resetOppositeMargin

Whether to reset the opposite margin to 0.

Booleantrue

Example

.selector {
  @include bpk-margin-trailing(bpk-spacing-base());
}

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();
}

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 tappable 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-popover

$bpk-zindex-popover: 900 !default;

bpk-zindex-tooltip

$bpk-zindex-tooltip: 900 !default;

bpk-zindex-scrim

$bpk-zindex-scrim: 1000 !default;

bpk-zindex-modal

$bpk-zindex-modal: 1100 !default;

bpk-zindex-drawer

$bpk-zindex-drawer: 1100 !default;