animations
variables
bpk-duration-base
$bpk-duration-base: 400ms !default;
bpk-duration-sm
$bpk-duration-sm: 200ms !default;
Used by
- [mixin]
bpk-card
- [mixin]
bpk-form-validation
- [mixin]
bpk-form-validation
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
- [mixin]
bpk-themeable-property
- [mixin]
bpk-border-radius-xs
- [mixin]
bpk-text
- [mixin]
bpk-text--xs
- [variable]
bpk-badge-padding-y
- [variable]
bpk-badge-padding-x
- [variable]
bpk-font-color-base
- [variable]
bpk-badge-background-color
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
Used by
- [mixin]
bpk-badge--centered
- [mixin]
bpk-badge--docked-right
- [mixin]
bpk-badge--docked-left
- [mixin]
bpk-badge--success
- [mixin]
bpk-badge--destructive
- [mixin]
bpk-badge--light
- [mixin]
bpk-badge--inverse
- [mixin]
bpk-badge--outline
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
- [variable]
bpk-badge-centered-vertical-align
- [mixin]
bpk-badge
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
- [variable]
bpk-border-radius-xs
- [mixin]
bpk-badge
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
- [variable]
bpk-border-radius-xs
- [mixin]
bpk-badge
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
- [mixin]
bpk-themeable-property
- [variable]
bpk-color-glencoe
- [mixin]
bpk-badge
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
- [mixin]
bpk-themeable-property
- [variable]
bpk-color-white
- [variable]
bpk-color-white
- [variable]
bpk-color-panjin
- [mixin]
bpk-badge
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
- [variable]
bpk-color-sky-gray-tint-07
- [variable]
bpk-color-sky-gray
- [mixin]
bpk-badge
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
- [variable]
bpk-color-white
- [variable]
bpk-color-sky-gray
- [mixin]
bpk-badge
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
- [variable]
bpk-color-white
- [variable]
bpk-border-size-sm
- [variable]
bpk-color-white
- [variable]
bpk-color-white
- [mixin]
bpk-badge
variables
bpk-badge-background-color
$bpk-badge-background-color: rgb(255, 181, 77) !default;
Used by
- [mixin]
bpk-badge
bpk-badge-centered-vertical-align
$bpk-badge-centered-vertical-align: text-bottom !default;
Used by
- [mixin]
bpk-badge--centered
bpk-badge-padding-x
$bpk-badge-padding-x: .375rem !default;
Used by
- [mixin]
bpk-badge
bpk-badge-padding-y
$bpk-badge-padding-y: 0 !default;
Used by
- [mixin]
bpk-badge
borders
mixins
[private] _bpk-border
@mixin _bpk-border() { ... }
Description
Full border utility.
Parameters
None.
Used by
- [mixin]
bpk-border-sm
- [mixin]
bpk-border-lg
- [mixin]
bpk-border-xl
[private] _bpk-border-top
@mixin _bpk-border-top() { ... }
Description
Top border utility.
Parameters
None.
Used by
- [mixin]
bpk-border-top-sm
- [mixin]
bpk-border-top-lg
- [mixin]
bpk-border-top-xl
[private] _bpk-border-right
@mixin _bpk-border-right() { ... }
Description
Right border utility.
Parameters
None.
Used by
- [mixin]
bpk-border-right-sm
- [mixin]
bpk-border-right-lg
- [mixin]
bpk-border-right-xl
[private] _bpk-border-bottom
@mixin _bpk-border-bottom() { ... }
Description
Bottom border utility.
Parameters
None.
Used by
- [mixin]
bpk-border-bottom-sm
- [mixin]
bpk-border-bottom-lg
- [mixin]
bpk-border-bottom-xl
[private] _bpk-border-left
@mixin _bpk-border-left() { ... }
Description
Left border utility.
Parameters
None.
Used by
- [mixin]
bpk-border-left-sm
- [mixin]
bpk-border-left-lg
- [mixin]
bpk-border-left-xl
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
- [mixin]
_bpk-border
- [variable]
bpk-border-size-sm
Used by
- [mixin]
bpk-panel
- [mixin]
bpk-table
- [mixin]
bpk-table--alternate
- [mixin]
bpk-code__pre--alternate
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
- [mixin]
_bpk-border-top
- [variable]
bpk-border-size-sm
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
- [mixin]
_bpk-border-right
- [variable]
bpk-border-size-sm
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
- [mixin]
_bpk-border-bottom
- [variable]
bpk-border-size-sm
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
- [mixin]
_bpk-border-left
- [variable]
bpk-border-size-sm
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
- [mixin]
_bpk-border
- [variable]
bpk-border-size-lg
Used by
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--outline
- [mixin]
bpk-button--outline
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
- [mixin]
_bpk-border-top
- [variable]
bpk-border-size-lg
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
- [mixin]
_bpk-border-right
- [variable]
bpk-border-size-lg
Used by
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
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
- [mixin]
_bpk-border-bottom
- [variable]
bpk-border-size-lg
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
- [mixin]
_bpk-border-left
- [variable]
bpk-border-size-lg
Used by
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
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
- [mixin]
_bpk-border
- [variable]
bpk-border-size-xl
Used by
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--outline
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
- [mixin]
_bpk-border-top
- [variable]
bpk-border-size-xl
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
- [mixin]
_bpk-border-right
- [variable]
bpk-border-size-xl
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
- [mixin]
_bpk-border-bottom
- [variable]
bpk-border-size-xl
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
- [mixin]
_bpk-border-left
- [variable]
bpk-border-size-xl
variables
bpk-border-size-lg
$bpk-border-size-lg: 2px !default;
Used by
- [mixin]
bpk-border-lg
- [mixin]
bpk-border-top-lg
- [mixin]
bpk-border-right-lg
- [mixin]
bpk-border-bottom-lg
- [mixin]
bpk-border-left-lg
- [mixin]
bpk-checkbox__checkmark
bpk-border-size-sm
$bpk-border-size-sm: 1px !default;
Used by
- [mixin]
bpk-badge--outline
- [mixin]
bpk-border-sm
- [mixin]
bpk-border-top-sm
- [mixin]
bpk-border-right-sm
- [mixin]
bpk-border-bottom-sm
- [mixin]
bpk-border-left-sm
bpk-border-size-xl
$bpk-border-size-xl: 3px !default;
Used by
- [mixin]
bpk-border-xl
- [mixin]
bpk-border-top-xl
- [mixin]
bpk-border-right-xl
- [mixin]
bpk-border-bottom-xl
- [mixin]
bpk-border-left-xl
- [mixin]
_bpk-radio-border
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
- [variable]
bpk-box-shadow-sm
Used by
- [mixin]
bpk-card
bpk-box-shadow-lg
@mixin bpk-box-shadow-lg() { ... }
Description
Large box shadow.
Parameters
None.
Example
.selector {
@include bpk-box-shadow-lg();
}
Requires
- [variable]
bpk-box-shadow-lg
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
- [variable]
bpk-box-shadow-xl
variables
bpk-box-shadow-lg
$bpk-box-shadow-lg: 0px 4px 14px 0px rgba(37,32,31,.25) !default;
Used by
- [mixin]
bpk-box-shadow-lg
bpk-box-shadow-sm
$bpk-box-shadow-sm: 0px 1px 3px 0px rgba(37,32,31,.3) !default;
Used by
- [mixin]
bpk-box-shadow-sm
bpk-box-shadow-xl
$bpk-box-shadow-xl: 0px 12px 50px 0px rgba(37,32,31,.25) !default;
Used by
- [mixin]
bpk-box-shadow-xl
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
- [variable]
bpk-breakpoint-query-mobile
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
- [variable]
bpk-breakpoint-query-tablet
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
- [variable]
bpk-breakpoint-query-tablet-only
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
- [variable]
bpk-breakpoint-query-above-mobile
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
- [variable]
bpk-breakpoint-query-above-tablet
variables
bpk-breakpoint-desktop
$bpk-breakpoint-desktop: 71.25rem !default;
Used by
- [mixin]
bpk-grid__container
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
- [mixin]
bpk-breakpoint-above-mobile
bpk-breakpoint-query-above-tablet
$bpk-breakpoint-query-above-tablet: "(min-width: 50.3125rem)" !default;
Used by
- [mixin]
bpk-breakpoint-above-tablet
bpk-breakpoint-query-mobile
$bpk-breakpoint-query-mobile: "(max-width: 32.25rem)" !default;
Used by
- [mixin]
bpk-breakpoint-mobile
bpk-breakpoint-query-tablet
$bpk-breakpoint-query-tablet: "(max-width: 50.25rem)" !default;
Used by
- [mixin]
bpk-breakpoint-tablet
bpk-breakpoint-query-tablet-only
$bpk-breakpoint-query-tablet-only: "(min-width: 32.3125rem) and (max-width: 50.25rem)" !default;
Used by
- [mixin]
bpk-breakpoint-tablet-only
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
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [variable]
bpk-button-padding-y
- [variable]
bpk-button-padding-x
- [variable]
bpk-button-border-radius
- [variable]
bpk-button-gradient-start-color
- [variable]
bpk-button-gradient-end-color
- [variable]
bpk-button-gradient-start-color
- [variable]
bpk-button-gradient-end-color
- [variable]
bpk-button-font-size
- [variable]
bpk-button-font-weight
- [variable]
bpk-button-line-height
- [variable]
bpk-button-text-align
- [variable]
bpk-button-box-shadow
- [variable]
bpk-button-color
- [variable]
bpk-button-background-color
- [variable]
bpk-button-font-size
- [variable]
bpk-button-hover-background-image
- [variable]
bpk-button-hover-box-shadow
- [variable]
bpk-button-hover-color
- [variable]
bpk-button-hover-background-color
- [variable]
bpk-button-active-background-image
- [variable]
bpk-button-active-box-shadow
- [variable]
bpk-button-active-color
- [variable]
bpk-button-active-background-color
- [variable]
bpk-button-disabled-background-color
- [variable]
bpk-button-disabled-background-image
- [variable]
bpk-button-disabled-color
- [variable]
bpk-button-disabled-box-shadow
Used by
- [mixin]
bpk-button--large
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--outline
- [mixin]
bpk-button--selected
- [mixin]
bpk-button--link
- [mixin]
bpk-button--icon-only
- [mixin]
bpk-button--large-icon-only
- [mixin]
bpk-button--featured
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
- [variable]
bpk-button-large-padding-y
- [variable]
bpk-button-large-padding-x
- [variable]
bpk-button-border-radius
- [variable]
bpk-button-large-font-size
- [variable]
bpk-button-large-line-height
- [mixin]
bpk-button
Used by
- [mixin]
bpk-button--large-icon-only
- [mixin]
bpk-button--featured
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
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-border-lg
- [mixin]
bpk-border-lg
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-border-lg
- [mixin]
bpk-border-lg
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-border-xl
- [mixin]
bpk-border-xl
- [variable]
bpk-button-secondary-background-image
- [variable]
bpk-button-secondary-color
- [variable]
bpk-button-secondary-background-color
- [variable]
bpk-button-secondary-border-color
- [variable]
bpk-button-secondary-border-color
- [variable]
bpk-button-secondary-hover-background-image
- [variable]
bpk-button-secondary-hover-box-shadow
- [variable]
bpk-button-secondary-hover-color
- [variable]
bpk-button-secondary-hover-background-color
- [variable]
bpk-button-secondary-hover-border-color
- [variable]
bpk-button-secondary-hover-border-color
- [variable]
bpk-button-secondary-active-background-image
- [variable]
bpk-button-secondary-active-box-shadow
- [variable]
bpk-button-secondary-active-color
- [variable]
bpk-button-secondary-active-background-color
- [variable]
bpk-button-secondary-active-border-color
- [variable]
bpk-button-secondary-active-border-color
- [variable]
bpk-button-secondary-disabled-background-color
- [variable]
bpk-button-secondary-disabled-background-image
- [variable]
bpk-button-secondary-disabled-color
- [variable]
bpk-button-secondary-disabled-box-shadow
- [mixin]
bpk-button
Used by
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--outline
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
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-border-lg
- [mixin]
bpk-border-lg
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-border-lg
- [mixin]
bpk-border-lg
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-border-xl
- [mixin]
bpk-border-xl
- [variable]
bpk-button-destructive-color
- [variable]
bpk-button-destructive-background-color
- [variable]
bpk-button-destructive-border-color
- [variable]
bpk-button-destructive-border-color
- [variable]
bpk-button-destructive-hover-background-image
- [variable]
bpk-button-destructive-hover-box-shadow
- [variable]
bpk-button-destructive-hover-color
- [variable]
bpk-button-destructive-hover-background-color
- [variable]
bpk-button-destructive-hover-border-color
- [variable]
bpk-button-destructive-hover-border-color
- [variable]
bpk-button-destructive-active-box-shadow
- [variable]
bpk-button-destructive-active-color
- [variable]
bpk-button-destructive-active-background-color
- [variable]
bpk-button-destructive-active-border-color
- [variable]
bpk-button-destructive-active-border-color
- [variable]
bpk-button-destructive-disabled-background-color
- [variable]
bpk-button-destructive-disabled-background-image
- [variable]
bpk-button-destructive-disabled-color
- [variable]
bpk-button-destructive-disabled-box-shadow
- [mixin]
bpk-button
- [mixin]
bpk-button--secondary
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
- [mixin]
bpk-border-lg
- [mixin]
bpk-border-lg
- [mixin]
bpk-border-xl
- [variable]
bpk-button-outline-background-color
- [variable]
bpk-button-outline-background-image
- [variable]
bpk-button-outline-color
- [variable]
bpk-button-outline-border-color
- [variable]
bpk-button-outline-hover-background-color
- [variable]
bpk-button-outline-hover-border-color
- [variable]
bpk-button-outline-hover-border-opacity
- [variable]
bpk-button-outline-active-background-color
- [variable]
bpk-button-outline-active-border-color
- [variable]
bpk-button-outline-disabled-background-color
- [variable]
bpk-button-outline-disabled-background-image
- [variable]
bpk-button-outline-disabled-color
- [variable]
bpk-button-outline-disabled-box-shadow
- [mixin]
bpk-button
- [mixin]
bpk-button--secondary
bpk-button--selected
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
- [variable]
bpk-button-selected-background-color
- [variable]
bpk-button-selected-background-image
- [variable]
bpk-button-selected-color
- [variable]
bpk-button-selected-box-shadow
- [variable]
bpk-button-selected-hover-background-color
- [variable]
bpk-button-selected-hover-background-image
- [variable]
bpk-button-selected-hover-color
- [variable]
bpk-button-selected-hover-box-shadow
- [variable]
bpk-button-selected-active-background-color
- [variable]
bpk-button-selected-active-background-image
- [variable]
bpk-button-selected-active-color
- [variable]
bpk-button-selected-active-box-shadow
- [variable]
bpk-button-selected-disabled-box-shadow
- [mixin]
bpk-button
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
- [mixin]
bpk-link
- [variable]
bpk-color-sky-gray-tint-04
- [mixin]
bpk-button
bpk-button--padded
@mixin bpk-button--padded() { ... }
Description
Padded button. Modifies the bpk-button mixin.
Parameters
None.
Example
.selector {
@include bpk-button();
@include bpk-button--link();
@include bpk-button--padded();
}
Requires
- [variable]
bpk-button-padding-y
- [variable]
bpk-button-padding-x
- [mixin]
bpk-link
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
- [variable]
bpk-button-padding-y
- [variable]
bpk-button-padding-x-icon-only
- [variable]
bpk-button-icon-border-radius
- [mixin]
bpk-button
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
- [variable]
bpk-button-large-padding-y
- [variable]
bpk-button-large-padding-x-icon-only
- [variable]
bpk-button-icon-border-radius-lg
- [mixin]
bpk-button
- [mixin]
bpk-button--large
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
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [variable]
bpk-button-featured-background-image
- [variable]
bpk-button-featured-background-image
- [variable]
bpk-button-featured-background-image
- [variable]
bpk-button-featured-color
- [variable]
bpk-button-featured-background-color
- [variable]
bpk-button-featured-hover-background-image
- [variable]
bpk-button-featured-hover-box-shadow
- [variable]
bpk-button-featured-hover-color
- [variable]
bpk-button-featured-hover-background-color
- [variable]
bpk-button-featured-active-background-image
- [variable]
bpk-button-featured-active-box-shadow
- [variable]
bpk-button-featured-active-color
- [variable]
bpk-button-featured-active-background-color
- [variable]
bpk-button-featured-disabled-background-color
- [variable]
bpk-button-featured-disabled-background-image
- [mixin]
bpk-button
- [mixin]
bpk-button--large
variables
bpk-button-active-background-color
$bpk-button-active-background-color: rgb(0, 106, 97) !default;
Used by
- [mixin]
bpk-button
bpk-button-active-background-image
$bpk-button-active-background-image: none !default;
Used by
- [mixin]
bpk-button
bpk-button-active-box-shadow
$bpk-button-active-box-shadow: none !default;
Used by
- [mixin]
bpk-button
bpk-button-active-color
$bpk-button-active-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button
bpk-button-background-color
$bpk-button-background-color: rgb(0, 166, 152) !default;
Used by
- [mixin]
bpk-button
bpk-button-border-radius
$bpk-button-border-radius: .375rem !default;
Used by
- [mixin]
bpk-button
- [mixin]
bpk-button--large
bpk-button-box-shadow
$bpk-button-box-shadow: none !default;
Used by
- [mixin]
bpk-button
bpk-button-color
$bpk-button-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button
bpk-button-destructive-active-background-color
$bpk-button-destructive-active-background-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--destructive
bpk-button-destructive-active-border-color
$bpk-button-destructive-active-border-color: rgb(209, 67, 91) !default;
Used by
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
bpk-button-destructive-active-box-shadow
$bpk-button-destructive-active-box-shadow: 0 0 0 3px #d1435b inset !default;
Used by
- [mixin]
bpk-button--destructive
bpk-button-destructive-active-color
$bpk-button-destructive-active-color: rgb(209, 67, 91) !default;
Used by
- [mixin]
bpk-button--destructive
bpk-button-destructive-background-color
$bpk-button-destructive-background-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--destructive
bpk-button-destructive-border-color
$bpk-button-destructive-border-color: rgb(221, 221, 229) !default;
Used by
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
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
- [mixin]
bpk-button--destructive
bpk-button-destructive-disabled-background-color
$bpk-button-destructive-disabled-background-color: rgb(221, 221, 229) !default;
Used by
- [mixin]
bpk-button--destructive
bpk-button-destructive-disabled-background-image
$bpk-button-destructive-disabled-background-image: none !default;
Used by
- [mixin]
bpk-button--destructive
bpk-button-destructive-disabled-box-shadow
$bpk-button-destructive-disabled-box-shadow: none !default;
Used by
- [mixin]
bpk-button--destructive
bpk-button-destructive-disabled-color
$bpk-button-destructive-disabled-color: rgb(178, 178, 191) !default;
Used by
- [mixin]
bpk-button--destructive
bpk-button-destructive-hover-background-color
$bpk-button-destructive-hover-background-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--destructive
bpk-button-destructive-hover-background-image
$bpk-button-destructive-hover-background-image: none !default;
Used by
- [mixin]
bpk-button--destructive
bpk-button-destructive-hover-border-color
$bpk-button-destructive-hover-border-color: rgb(209, 67, 91) !default;
Used by
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
bpk-button-destructive-hover-box-shadow
$bpk-button-destructive-hover-box-shadow: 0 0 0 2px #d1435b inset !default;
Used by
- [mixin]
bpk-button--destructive
bpk-button-destructive-hover-color
$bpk-button-destructive-hover-color: rgb(209, 67, 91) !default;
Used by
- [mixin]
bpk-button--destructive
bpk-button-disabled-background-color
$bpk-button-disabled-background-color: rgb(221, 221, 229) !default;
Used by
- [mixin]
bpk-button
bpk-button-disabled-background-image
$bpk-button-disabled-background-image: none !default;
Used by
- [mixin]
bpk-button
bpk-button-disabled-box-shadow
$bpk-button-disabled-box-shadow: none !default;
Used by
- [mixin]
bpk-button
bpk-button-disabled-color
$bpk-button-disabled-color: rgb(178, 178, 191) !default;
Used by
- [mixin]
bpk-button
bpk-button-featured-active-background-color
$bpk-button-featured-active-background-color: rgb(4, 39, 89) !default;
Used by
- [mixin]
bpk-button--featured
bpk-button-featured-active-background-image
$bpk-button-featured-active-background-image: none !default;
Used by
- [mixin]
bpk-button--featured
bpk-button-featured-active-box-shadow
$bpk-button-featured-active-box-shadow: none !default;
Used by
- [mixin]
bpk-button--featured
bpk-button-featured-active-color
$bpk-button-featured-active-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--featured
bpk-button-featured-background-color
$bpk-button-featured-background-color: rgb(7, 112, 227) !default;
Used by
- [mixin]
bpk-button--featured
bpk-button-featured-background-image
$bpk-button-featured-background-image: #0770e3 !default;
Used by
- [mixin]
bpk-button--featured
- [mixin]
bpk-button--featured
- [mixin]
bpk-button--featured
bpk-button-featured-color
$bpk-button-featured-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--featured
bpk-button-featured-disabled-background-color
$bpk-button-featured-disabled-background-color: rgb(221, 221, 229) !default;
Used by
- [mixin]
bpk-button--featured
bpk-button-featured-disabled-background-image
$bpk-button-featured-disabled-background-image: none !default;
Used by
- [mixin]
bpk-button--featured
bpk-button-featured-hover-background-color
$bpk-button-featured-hover-background-color: rgb(8, 78, 178) !default;
Used by
- [mixin]
bpk-button--featured
bpk-button-featured-hover-background-image
$bpk-button-featured-hover-background-image: none !default;
Used by
- [mixin]
bpk-button--featured
bpk-button-featured-hover-box-shadow
$bpk-button-featured-hover-box-shadow: none !default;
Used by
- [mixin]
bpk-button--featured
bpk-button-featured-hover-color
$bpk-button-featured-hover-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--featured
bpk-button-font-weight
$bpk-button-font-weight: 700 !default;
Used by
- [mixin]
bpk-button
bpk-button-gradient-end-color
$bpk-button-gradient-end-color: rgb(0, 166, 152) !default;
Used by
- [mixin]
bpk-button
- [mixin]
bpk-button
bpk-button-gradient-start-color
$bpk-button-gradient-start-color: rgb(0, 166, 152) !default;
Used by
- [mixin]
bpk-button
- [mixin]
bpk-button
bpk-button-hover-background-color
$bpk-button-hover-background-color: rgb(0, 136, 125) !default;
Used by
- [mixin]
bpk-button
bpk-button-hover-background-image
$bpk-button-hover-background-image: none !default;
Used by
- [mixin]
bpk-button
bpk-button-hover-box-shadow
$bpk-button-hover-box-shadow: none !default;
Used by
- [mixin]
bpk-button
bpk-button-hover-color
$bpk-button-hover-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button
bpk-button-icon-border-radius
$bpk-button-icon-border-radius: 1.125rem !default;
Used by
- [mixin]
bpk-button--icon-only
bpk-button-icon-border-radius-lg
$bpk-button-icon-border-radius-lg: 1.3125rem !default;
Used by
- [mixin]
bpk-button--large-icon-only
bpk-button-large-font-size
$bpk-button-large-font-size: 1.5rem !default;
Used by
- [mixin]
bpk-button--large
bpk-button-large-line-height
$bpk-button-large-line-height: 1.875rem !default;
Used by
- [mixin]
bpk-button--large
- [mixin]
_bpk-svg--align-to-large-button
bpk-button-large-padding-x
$bpk-button-large-padding-x: 1.5rem !default;
Used by
- [mixin]
bpk-button--large
bpk-button-large-padding-x-icon-only
$bpk-button-large-padding-x-icon-only: .5625rem !default;
Used by
- [mixin]
bpk-button--large-icon-only
bpk-button-large-padding-y
$bpk-button-large-padding-y: .375rem !default;
Used by
- [mixin]
bpk-button--large
- [mixin]
bpk-button--large-icon-only
bpk-button-line-height
$bpk-button-line-height: 1.5rem !default;
Used by
- [mixin]
bpk-button
bpk-button-outline-active-background-color
$bpk-button-outline-active-background-color: rgba(0, 0, 0, 0) !default;
Used by
- [mixin]
bpk-button--outline
bpk-button-outline-active-border-color
$bpk-button-outline-active-border-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--outline
bpk-button-outline-background-color
$bpk-button-outline-background-color: rgba(0, 0, 0, 0) !default;
Used by
- [mixin]
bpk-button--outline
bpk-button-outline-background-image
$bpk-button-outline-background-image: none !default;
Used by
- [mixin]
bpk-button--outline
bpk-button-outline-border-color
$bpk-button-outline-border-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--outline
bpk-button-outline-color
$bpk-button-outline-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--outline
bpk-button-outline-disabled-background-color
$bpk-button-outline-disabled-background-color: rgb(221, 221, 229) !default;
Used by
- [mixin]
bpk-button--outline
bpk-button-outline-disabled-background-image
$bpk-button-outline-disabled-background-image: none !default;
Used by
- [mixin]
bpk-button--outline
bpk-button-outline-disabled-box-shadow
$bpk-button-outline-disabled-box-shadow: none !default;
Used by
- [mixin]
bpk-button--outline
bpk-button-outline-disabled-color
$bpk-button-outline-disabled-color: rgb(178, 178, 191) !default;
Used by
- [mixin]
bpk-button--outline
bpk-button-outline-hover-background-color
$bpk-button-outline-hover-background-color: rgba(0, 0, 0, 0) !default;
Used by
- [mixin]
bpk-button--outline
bpk-button-outline-hover-border-color
$bpk-button-outline-hover-border-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--outline
bpk-button-outline-hover-border-opacity
$bpk-button-outline-hover-border-opacity: 0.5 !default;
Used by
- [mixin]
bpk-button--outline
bpk-button-padding-x
$bpk-button-padding-x: 1.125rem !default;
Used by
- [mixin]
bpk-button
- [mixin]
bpk-button--padded
bpk-button-padding-x-icon-only
$bpk-button-padding-x-icon-only: .5625rem !default;
Used by
- [mixin]
bpk-button--icon-only
bpk-button-padding-y
$bpk-button-padding-y: .375rem !default;
Used by
- [mixin]
bpk-button
- [mixin]
bpk-button--padded
- [mixin]
bpk-button--icon-only
bpk-button-secondary-active-background-color
$bpk-button-secondary-active-background-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-secondary-active-background-image
$bpk-button-secondary-active-background-image: none !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-secondary-active-border-color
$bpk-button-secondary-active-border-color: rgb(8, 78, 178) !default;
Used by
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
bpk-button-secondary-active-box-shadow
$bpk-button-secondary-active-box-shadow: 0 0 0 3px #084eb2 inset !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-secondary-active-color
$bpk-button-secondary-active-color: rgb(8, 78, 178) !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-secondary-background-color
$bpk-button-secondary-background-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-secondary-background-image
$bpk-button-secondary-background-image: none !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-secondary-border-color
$bpk-button-secondary-border-color: rgb(221, 221, 229) !default;
Used by
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
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
- [mixin]
bpk-button--secondary
bpk-button-secondary-disabled-background-color
$bpk-button-secondary-disabled-background-color: rgb(221, 221, 229) !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-secondary-disabled-background-image
$bpk-button-secondary-disabled-background-image: none !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-secondary-disabled-box-shadow
$bpk-button-secondary-disabled-box-shadow: none !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-secondary-disabled-color
$bpk-button-secondary-disabled-color: rgb(178, 178, 191) !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-secondary-hover-background-color
$bpk-button-secondary-hover-background-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-secondary-hover-background-image
$bpk-button-secondary-hover-background-image: none !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-secondary-hover-border-color
$bpk-button-secondary-hover-border-color: rgb(7, 112, 227) !default;
Used by
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
bpk-button-secondary-hover-box-shadow
$bpk-button-secondary-hover-box-shadow: 0 0 0 2px #0770e3 inset !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-secondary-hover-color
$bpk-button-secondary-hover-color: rgb(7, 112, 227) !default;
Used by
- [mixin]
bpk-button--secondary
bpk-button-selected-active-background-color
$bpk-button-selected-active-background-color: rgb(4, 39, 89) !default;
Used by
- [mixin]
bpk-button--selected
bpk-button-selected-active-background-image
$bpk-button-selected-active-background-image: none !default;
Used by
- [mixin]
bpk-button--selected
bpk-button-selected-active-box-shadow
$bpk-button-selected-active-box-shadow: none !default;
Used by
- [mixin]
bpk-button--selected
bpk-button-selected-active-color
$bpk-button-selected-active-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--selected
bpk-button-selected-background-color
$bpk-button-selected-background-color: rgb(7, 112, 227) !default;
Used by
- [mixin]
bpk-button--selected
bpk-button-selected-background-image
$bpk-button-selected-background-image: #084eb2 !default;
Used by
- [mixin]
bpk-button--selected
bpk-button-selected-box-shadow
$bpk-button-selected-box-shadow: none !default;
Used by
- [mixin]
bpk-button--selected
bpk-button-selected-color
$bpk-button-selected-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--selected
bpk-button-selected-disabled-box-shadow
$bpk-button-selected-disabled-box-shadow: none !default;
Used by
- [mixin]
bpk-button--selected
bpk-button-selected-hover-background-color
$bpk-button-selected-hover-background-color: rgb(8, 78, 178) !default;
Used by
- [mixin]
bpk-button--selected
bpk-button-selected-hover-background-image
$bpk-button-selected-hover-background-image: none !default;
Used by
- [mixin]
bpk-button--selected
bpk-button-selected-hover-box-shadow
$bpk-button-selected-hover-box-shadow: none !default;
Used by
- [mixin]
bpk-button--selected
bpk-button-selected-hover-color
$bpk-button-selected-hover-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--selected
bpk-button-text-align
$bpk-button-text-align: center !default;
Used by
- [mixin]
bpk-button
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-padding
$bpk-calendar-padding: .75rem !default;
cards
mixins
bpk-card
@mixin bpk-card() { ... }
Description
Basic card.
Parameters
None.
Example
.selector {
@include bpk-card();
}
Requires
- [mixin]
bpk-box-shadow-sm
- [mixin]
bpk-border-radius-md
- [mixin]
bpk-box-shadow-lg
- [mixin]
bpk-border-radius-md
- [variable]
bpk-card-background-color
- [variable]
bpk-card-color
- [variable]
bpk-duration-sm
Used by
- [mixin]
bpk-card--padded
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
- [variable]
bpk-card-padding
- [mixin]
bpk-card
variables
bpk-card-background-color
$bpk-card-background-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-card
bpk-card-color
$bpk-card-color: rgb(17, 18, 54) !default;
Used by
- [mixin]
bpk-card
bpk-card-padding
$bpk-card-padding: .75rem !default;
Used by
- [mixin]
bpk-card--padded
colors
variables
bpk-background-alternative-light-color
$bpk-background-alternative-light-color: rgb(241, 242, 248) !default;
bpk-background-alternative-secondary-light-color
$bpk-background-alternative-secondary-light-color: rgb(255, 255, 255) !default;
bpk-background-light-color
$bpk-background-light-color: rgb(255, 255, 255) !default;
bpk-background-secondary-light-color
$bpk-background-secondary-light-color: rgb(241, 242, 248) !default;
bpk-background-tertiary-light-color
$bpk-background-tertiary-light-color: rgb(255, 255, 255) !default;
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
- [mixin]
bpk-badge--success
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
- [mixin]
bpk-badge--destructive
- [mixin]
bpk-checkbox--invalid
- [mixin]
bpk-radio--invalid
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
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
- [mixin]
bpk-apply-primary-color-to
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
- [mixin]
bpk-code--alternate
bpk-color-sky-gray
$bpk-color-sky-gray: rgb(17, 18, 54) !default;
Used by
- [mixin]
bpk-badge--light
- [mixin]
bpk-badge--inverse
bpk-color-sky-gray-tint-01
$bpk-color-sky-gray-tint-01: rgb(68, 69, 96) !default;
Used by
- [mixin]
bpk-code
bpk-color-sky-gray-tint-02
$bpk-color-sky-gray-tint-02: rgb(104, 105, 127) !default;
Used by
- [mixin]
bpk-blockquote
bpk-color-sky-gray-tint-03
$bpk-color-sky-gray-tint-03: rgb(143, 144, 160) !default;
Used by
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-radio__input
bpk-color-sky-gray-tint-04
$bpk-color-sky-gray-tint-04: rgb(178, 178, 191) !default;
Used by
- [mixin]
bpk-button--link
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-radio__input
- [mixin]
bpk-radio__input
- [mixin]
bpk-table--alternate
- [mixin]
bpk-code__pre--alternate
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
- [mixin]
bpk-table
bpk-color-sky-gray-tint-07
$bpk-color-sky-gray-tint-07: rgb(241, 242, 248) !default;
Used by
- [mixin]
bpk-badge--light
- [mixin]
bpk-grid__container--debug
- [mixin]
bpk-table__cell--head
- [mixin]
bpk-code
- [mixin]
bpk-code__pre
- [mixin]
bpk-blockquote
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
- [mixin]
bpk-badge--destructive
- [mixin]
bpk-badge--destructive
- [mixin]
bpk-badge--inverse
- [mixin]
bpk-badge--outline
- [mixin]
bpk-badge--outline
- [mixin]
bpk-badge--outline
- [mixin]
bpk-input--valid
- [mixin]
bpk-input--invalid
- [mixin]
bpk-select
- [mixin]
bpk-select
- [mixin]
bpk-select--invalid
- [mixin]
bpk-checkbox--white
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-radio--white
- [mixin]
bpk-radio--white
- [mixin]
bpk-label--white
- [mixin]
bpk-textarea--invalid
- [mixin]
bpk-grid__column-debugger
- [mixin]
bpk-table__cell--head-alternate
- [mixin]
bpk-code
bpk-line-light-color
$bpk-line-light-color: rgb(205, 205, 215) !default;
bpk-primary-gradient
$bpk-primary-gradient: #0770e3 !default;
bpk-primary-light-color
$bpk-primary-light-color: rgb(7, 112, 227) !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
- [mixin]
bpk-button
- [mixin]
bpk-button
bpk-h-1-font-size
$bpk-h-1-font-size: 2.625rem !default;
Used by
- [mixin]
bpk-heading-1
bpk-h-2-font-size
$bpk-h-2-font-size: 1.875rem !default;
Used by
- [mixin]
bpk-heading-1
- [mixin]
bpk-heading-2
bpk-h-3-font-size
$bpk-h-3-font-size: 1.5rem !default;
Used by
- [mixin]
bpk-heading-2
- [mixin]
bpk-heading-3
bpk-h-4-font-size
$bpk-h-4-font-size: 1rem !default;
Used by
- [mixin]
bpk-heading-3
- [mixin]
bpk-heading-4
bpk-h-5-font-size
$bpk-h-5-font-size: .75rem !default;
Used by
- [mixin]
bpk-heading-4
- [mixin]
bpk-heading-5
bpk-h-6-font-size
$bpk-h-6-font-size: .75rem !default;
Used by
- [mixin]
bpk-heading-6
bpk-text-base-font-size
$bpk-text-base-font-size: 1rem !default;
Used by
- [mixin]
bpk-text--base
bpk-text-lg-font-size
$bpk-text-lg-font-size: 1.25rem !default;
Used by
- [mixin]
bpk-text--lg
bpk-text-sm-font-size
$bpk-text-sm-font-size: .875rem !default;
Used by
- [mixin]
bpk-text--sm
bpk-text-xl-font-size
$bpk-text-xl-font-size: 1.5rem !default;
Used by
- [mixin]
bpk-text--xl
bpk-text-xs-font-size
$bpk-text-xs-font-size: .75rem !default;
Used by
- [mixin]
bpk-text--xs
bpk-text-xxl-font-size
$bpk-text-xxl-font-size: 1.875rem !default;
Used by
- [mixin]
bpk-text--xxl
bpk-text-xxxl-font-size
$bpk-text-xxxl-font-size: 2.25rem !default;
Used by
- [mixin]
bpk-text--xxxl
bpk-text-xxxxl-font-size
$bpk-text-xxxxl-font-size: 2.625rem !default;
Used by
- [mixin]
bpk-text--xxxxl
bpk-text-xxxxxl-font-size
$bpk-text-xxxxxl-font-size: 3.75rem !default;
Used by
- [mixin]
bpk-text--xxxxxl
font-weights
variables
bpk-font-weight-black
$bpk-font-weight-black: 900 !default;
Used by
- [mixin]
bpk-text--black
bpk-font-weight-bold
$bpk-font-weight-bold: 700 !default;
Used by
- [mixin]
bpk-label
- [mixin]
bpk-text--bold
bpk-h-1-font-weight
$bpk-h-1-font-weight: 400 !default;
Used by
- [mixin]
bpk-heading-1
bpk-h-2-font-weight
$bpk-h-2-font-weight: 400 !default;
Used by
- [mixin]
bpk-heading-1
- [mixin]
bpk-heading-2
bpk-h-3-font-weight
$bpk-h-3-font-weight: 400 !default;
Used by
- [mixin]
bpk-heading-2
- [mixin]
bpk-heading-3
bpk-h-4-font-weight
$bpk-h-4-font-weight: 700 !default;
Used by
- [mixin]
bpk-heading-3
- [mixin]
bpk-heading-4
bpk-h-5-font-weight
$bpk-h-5-font-weight: 700 !default;
Used by
- [mixin]
bpk-heading-4
- [mixin]
bpk-heading-5
bpk-h-6-font-weight
$bpk-h-6-font-weight: 700 !default;
Used by
- [mixin]
bpk-heading-6
bpk-text-base-font-weight
$bpk-text-base-font-weight: 400 !default;
Used by
- [mixin]
bpk-text--base
bpk-text-lg-font-weight
$bpk-text-lg-font-weight: 400 !default;
Used by
- [mixin]
bpk-text--lg
bpk-text-sm-font-weight
$bpk-text-sm-font-weight: 400 !default;
Used by
- [mixin]
bpk-text--sm
bpk-text-xl-font-weight
$bpk-text-xl-font-weight: 400 !default;
Used by
- [mixin]
bpk-text--xl
bpk-text-xs-font-weight
$bpk-text-xs-font-weight: 400 !default;
Used by
- [mixin]
bpk-text--xs
bpk-text-xxl-font-weight
$bpk-text-xxl-font-weight: 400 !default;
Used by
- [mixin]
bpk-text--xxl
bpk-text-xxxl-font-weight
$bpk-text-xxxl-font-weight: 400 !default;
Used by
- [mixin]
bpk-text--xxxl
bpk-text-xxxxl-font-weight
$bpk-text-xxxxl-font-weight: 400 !default;
Used by
- [mixin]
bpk-text--xxxxl
bpk-text-xxxxxl-font-weight
$bpk-text-xxxxxl-font-weight: 400 !default;
Used by
- [mixin]
bpk-text--xxxxxl
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
- [variable]
bpk-input-height
- [variable]
bpk-input-padding-y
- [variable]
bpk-input-padding-x
- [variable]
bpk-input-border
- [variable]
bpk-input-border-radius
- [variable]
bpk-input-background
- [variable]
bpk-input-color
- [variable]
bpk-input-placeholder-color
- [variable]
bpk-input-disabled-border-color
- [variable]
bpk-input-background
- [variable]
bpk-input-disabled-color
Used by
- [mixin]
bpk-input--valid
- [mixin]
bpk-input--invalid
- [mixin]
bpk-input--clearable
- [mixin]
bpk-input__container
- [mixin]
bpk-input__clear-button
- [mixin]
bpk-input--large
- [mixin]
bpk-input--docked-first-child
- [mixin]
bpk-input--docked-last-child
- [mixin]
bpk-input--docked-middle-child
- [mixin]
bpk-input--docked
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
- [variable]
bpk-spacing-base
- [variable]
bpk-color-white
- [variable]
bpk-spacing-sm
- [variable]
bpk-spacing-md
- [variable]
bpk-spacing-md
- [variable]
bpk-input-padding-x
- [variable]
bpk-spacing-base
- [variable]
bpk-spacing-sm
- [mixin]
bpk-input
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
- [mixin]
bpk-themeable-property
- [variable]
bpk-spacing-base
- [variable]
bpk-color-white
- [variable]
bpk-spacing-sm
- [variable]
bpk-spacing-md
- [variable]
bpk-spacing-md
- [variable]
bpk-form-validation-color
- [variable]
bpk-input-padding-x
- [variable]
bpk-spacing-base
- [variable]
bpk-spacing-sm
- [mixin]
bpk-input
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
- [variable]
bpk-spacing-base
- [variable]
bpk-input-padding-x
- [variable]
bpk-spacing-base
- [variable]
bpk-input-background
- [mixin]
bpk-input
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
- [mixin]
bpk-input
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
- [mixin]
bpk-input--large
- [variable]
bpk-spacing-sm
- [variable]
bpk-input-height
- [variable]
bpk-spacing-sm
- [mixin]
bpk-input
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
- [variable]
bpk-input-large-height
- [mixin]
bpk-input
Used by
- [mixin]
bpk-input__clear-button
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
- [variable]
bpk-input-border-radius
- [variable]
bpk-input-border-radius
- [variable]
bpk-input-border-width
- [variable]
bpk-input-border-radius
- [variable]
bpk-input-border-radius
- [mixin]
bpk-input
Used by
- [mixin]
bpk-input--docked
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
- [variable]
bpk-input-border-radius
- [variable]
bpk-input-border-radius
- [variable]
bpk-input-border-radius
- [variable]
bpk-input-border-radius
- [mixin]
bpk-input
Used by
- [mixin]
bpk-input--docked
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
- [variable]
bpk-input-border-width
- [mixin]
bpk-input
Used by
- [mixin]
bpk-input--docked
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
- [mixin]
bpk-input--docked-first-child
- [mixin]
bpk-input--docked-last-child
- [mixin]
bpk-input--docked-middle-child
- [mixin]
bpk-input
bpk-select
@mixin bpk-select() { ... }
Description
Form select input.
Parameters
None.
Example
.selector {
@include bpk-select();
}
Requires
- [variable]
bpk-select-height
- [variable]
bpk-select-padding-top
- [variable]
bpk-select-padding-right
- [variable]
bpk-select-padding-bottom
- [variable]
bpk-select-padding-left
- [variable]
bpk-select-border
- [variable]
bpk-select-border-radius
- [variable]
bpk-color-white
- [variable]
bpk-spacing-sm
- [variable]
bpk-spacing-md
- [variable]
bpk-spacing-md
- [variable]
bpk-select-color
- [variable]
bpk-line-height-base
- [variable]
bpk-select-border-width
- [variable]
bpk-select-padding-left
- [variable]
bpk-select-padding-right
- [variable]
bpk-spacing-sm
- [variable]
bpk-spacing-xs
- [variable]
bpk-spacing-sm
- [variable]
bpk-select-disabled-border-color
- [variable]
bpk-color-white
- [variable]
bpk-spacing-sm
- [variable]
bpk-select-disabled-color
Used by
- [mixin]
bpk-select--large
- [mixin]
bpk-select--docked-first-child
- [mixin]
bpk-select--docked-last-child
- [mixin]
bpk-select--docked-middle-child
- [mixin]
bpk-select--docked
- [mixin]
bpk-select--invalid
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
- [variable]
bpk-select-large-height
- [mixin]
bpk-select
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
- [variable]
bpk-select-border-radius
- [variable]
bpk-select-border-radius
- [variable]
bpk-select-border-width
- [variable]
bpk-select-border-radius
- [variable]
bpk-select-border-radius
- [mixin]
bpk-select
Used by
- [mixin]
bpk-select--docked
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
- [variable]
bpk-select-border-radius
- [variable]
bpk-select-border-radius
- [variable]
bpk-select-border-radius
- [variable]
bpk-select-border-radius
- [mixin]
bpk-select
Used by
- [mixin]
bpk-select--docked
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
- [variable]
bpk-select-border-width
- [mixin]
bpk-select
Used by
- [mixin]
bpk-select--docked
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
- [mixin]
bpk-select--docked-first-child
- [mixin]
bpk-select--docked-last-child
- [mixin]
bpk-select--docked-middle-child
- [mixin]
bpk-select
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
- [mixin]
bpk-themeable-property
- [variable]
bpk-spacing-base
- [variable]
bpk-color-white
- [variable]
bpk-spacing-sm
- [variable]
bpk-spacing-md
- [variable]
bpk-spacing-md
- [variable]
bpk-form-validation-color
- [variable]
bpk-input-padding-x
- [variable]
bpk-spacing-base
- [variable]
bpk-spacing-sm
- [mixin]
bpk-select
bpk-checkbox
@mixin bpk-checkbox() { ... }
Description
Form checkbox. Should be applied to containing label element.
Parameters
None.
Example
.selector {
@include bpk-checkbox();
}
Requires
- [mixin]
bpk-text
- [mixin]
bpk-text--base
- [variable]
bpk-spacing-base
- [variable]
bpk-spacing-base
Used by
- [mixin]
bpk-checkbox--white
- [mixin]
bpk-checkbox--disabled
- [mixin]
bpk-checkbox--invalid
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
- [mixin]
bpk-text
- [mixin]
bpk-text--xs
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
- [variable]
bpk-color-white
- [mixin]
bpk-checkbox
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
- [variable]
bpk-label-disabled-color
- [mixin]
bpk-checkbox
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
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-color-panjin
- [mixin]
bpk-checkbox
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
- [variable]
bpk-border-size-lg
- [variable]
bpk-color-white
- [variable]
bpk-spacing-xs
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-spacing-base
- [variable]
bpk-spacing-xs
- [variable]
bpk-spacing-xs
- [variable]
bpk-spacing-xs
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-spacing-xs
- [variable]
bpk-spacing-sm
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-color-sky-gray-tint-04
Used by
- [mixin]
bpk-checkbox__input
bpk-checkbox__input
@mixin bpk-checkbox__input() { ... }
Description
Form checkbox input.
Parameters
None.
Example
.selector {
@include bpk-checkbox__input();
}
Requires
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-checkbox__checkmark
- [variable]
bpk-spacing-base
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-spacing-base
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-color-sky-gray-tint-03
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-color-sky-blue
- [variable]
bpk-color-sky-blue
- [variable]
bpk-color-sky-gray-tint-04
- [variable]
bpk-color-sky-gray-tint-04
[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
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | — none | Variable | — none |
Requires
- [variable]
bpk-border-size-xl
- [variable]
bpk-border-radius-pill
Used by
- [mixin]
bpk-radio--invalid
- [mixin]
bpk-radio__input
bpk-radio
@mixin bpk-radio() { ... }
Description
Form radio button. Should be applied to containing label element.
Parameters
None.
Example
.selector {
@include bpk-radio();
}
Requires
- [variable]
bpk-spacing-base
- [variable]
bpk-spacing-base
Used by
- [mixin]
bpk-radio--disabled
- [mixin]
bpk-radio--white
- [mixin]
bpk-radio--invalid
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
- [variable]
bpk-label-disabled-color
- [mixin]
bpk-radio
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
- [variable]
bpk-color-white
- [variable]
bpk-color-white
- [mixin]
bpk-radio
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
- [mixin]
_bpk-radio-border
- [variable]
bpk-color-panjin
- [mixin]
bpk-radio
bpk-radio__input
@mixin bpk-radio__input() { ... }
Description
Form radio input.
Parameters
None.
Example
.selector {
@include bpk-radio__input();
}
Requires
- [mixin]
_bpk-radio-border
- [mixin]
bpk-themeable-property
- [variable]
bpk-spacing-base
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-color-sky-gray-tint-03
- [variable]
bpk-radio-checked-circle-color
- [variable]
bpk-color-sky-gray-tint-04
- [variable]
bpk-color-sky-gray-tint-04
bpk-label
@mixin bpk-label() { ... }
Description
Form label.
Parameters
None.
Example
.selector {
@include bpk-label();
}
Requires
- [variable]
bpk-label-color
- [variable]
bpk-label-font-size
- [variable]
bpk-font-weight-bold
- [variable]
bpk-label-line-height
Used by
- [mixin]
bpk-label--invalid
- [mixin]
bpk-label--white
- [mixin]
bpk-label--disabled
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
- [mixin]
bpk-themeable-property
- [variable]
bpk-form-validation-color
- [mixin]
bpk-label
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
- [variable]
bpk-color-white
- [mixin]
bpk-label
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
- [variable]
bpk-label-disabled-color
- [mixin]
bpk-label
bpk-form-validation
@mixin bpk-form-validation() { ... }
Description
Form validation.
Parameters
None.
Example
.selector {
@include bpk-form-validation();
}
Requires
- [mixin]
bpk-themeable-property
- [variable]
bpk-spacing-sm
- [variable]
bpk-duration-sm
- [variable]
bpk-duration-sm
- [variable]
bpk-form-validation-color
Used by
- [mixin]
bpk-form-validation--appear
- [mixin]
bpk-form-validation--is-checkbox
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
- [mixin]
bpk-form-validation
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
- [mixin]
bpk-form-validation
bpk-textarea
@mixin bpk-textarea() { ... }
Description
Form textarea.
Parameters
None.
Example
.selector {
@include bpk-textarea();
}
Requires
- [variable]
bpk-textarea-min-height
- [variable]
bpk-input-padding-y
- [variable]
bpk-input-padding-x
- [variable]
bpk-input-border
- [variable]
bpk-input-border-radius
- [variable]
bpk-input-background
- [variable]
bpk-input-color
- [variable]
bpk-input-placeholder-color
- [variable]
bpk-input-disabled-border-color
- [variable]
bpk-input-background
- [variable]
bpk-input-disabled-color
Used by
- [mixin]
bpk-textarea--invalid
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
- [mixin]
bpk-themeable-property
- [variable]
bpk-color-white
- [variable]
bpk-spacing-sm
- [variable]
bpk-form-validation-color
- [variable]
bpk-input-padding-x
- [variable]
bpk-spacing-sm
- [mixin]
bpk-textarea
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
- [mixin]
bpk-input--invalid
- [mixin]
bpk-select--invalid
- [mixin]
bpk-label--invalid
- [mixin]
bpk-form-validation
- [mixin]
bpk-textarea--invalid
bpk-input-background
$bpk-input-background: #ffffff !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-input
- [mixin]
bpk-input--clearable
- [mixin]
bpk-textarea
- [mixin]
bpk-textarea
bpk-input-border
$bpk-input-border: solid .0625rem #B2B2BF !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-textarea
bpk-input-border-radius
$bpk-input-border-radius: .25rem !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-input--docked-first-child
- [mixin]
bpk-input--docked-first-child
- [mixin]
bpk-input--docked-first-child
- [mixin]
bpk-input--docked-first-child
- [mixin]
bpk-input--docked-last-child
- [mixin]
bpk-input--docked-last-child
- [mixin]
bpk-input--docked-last-child
- [mixin]
bpk-input--docked-last-child
- [mixin]
bpk-textarea
bpk-input-border-width
$bpk-input-border-width: .0625rem !default;
Used by
- [mixin]
bpk-input--docked-first-child
- [mixin]
bpk-input--docked-middle-child
bpk-input-color
$bpk-input-color: rgb(17, 18, 54) !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-textarea
bpk-input-disabled-border-color
$bpk-input-disabled-border-color: rgb(241, 242, 248) !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-textarea
bpk-input-disabled-color
$bpk-input-disabled-color: rgb(178, 178, 191) !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-textarea
bpk-input-height
$bpk-input-height: 2.250rem !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-input__clear-button
bpk-input-large-height
$bpk-input-large-height: 2.625rem + .375rem !default;
Used by
- [mixin]
bpk-input--large
bpk-input-padding-x
$bpk-input-padding-x: .75rem !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-input--valid
- [mixin]
bpk-input--invalid
- [mixin]
bpk-input--clearable
- [mixin]
bpk-select--invalid
- [mixin]
bpk-textarea
- [mixin]
bpk-textarea--invalid
bpk-input-padding-y
$bpk-input-padding-y: .375rem !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-textarea
bpk-input-placeholder-color
$bpk-input-placeholder-color: rgb(104, 105, 127) !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-textarea
bpk-label-color
$bpk-label-color: rgb(17, 18, 54) !default;
Used by
- [mixin]
bpk-label
bpk-label-disabled-color
$bpk-label-disabled-color: rgb(178, 178, 191) !default;
Used by
- [mixin]
bpk-checkbox--disabled
- [mixin]
bpk-radio--disabled
- [mixin]
bpk-label--disabled
bpk-label-font-size
$bpk-label-font-size: .75rem !default;
Used by
- [mixin]
bpk-label
bpk-label-line-height
$bpk-label-line-height: 1rem !default;
Used by
- [mixin]
bpk-label
bpk-radio-checked-circle-color
$bpk-radio-checked-circle-color: rgb(7, 112, 227) !default;
Used by
- [mixin]
bpk-radio__input
bpk-required-color
$bpk-required-color: rgb(209, 67, 91) !default;
bpk-select-border
$bpk-select-border: solid .0625rem #B2B2BF !default;
Used by
- [mixin]
bpk-select
bpk-select-border-radius
$bpk-select-border-radius: .25rem !default;
Used by
- [mixin]
bpk-select
- [mixin]
bpk-select--docked-first-child
- [mixin]
bpk-select--docked-first-child
- [mixin]
bpk-select--docked-first-child
- [mixin]
bpk-select--docked-first-child
- [mixin]
bpk-select--docked-last-child
- [mixin]
bpk-select--docked-last-child
- [mixin]
bpk-select--docked-last-child
- [mixin]
bpk-select--docked-last-child
bpk-select-border-width
$bpk-select-border-width: .0625rem !default;
Used by
- [mixin]
bpk-select
- [mixin]
bpk-select--docked-first-child
- [mixin]
bpk-select--docked-middle-child
bpk-select-color
$bpk-select-color: rgb(17, 18, 54) !default;
Used by
- [mixin]
bpk-select
bpk-select-disabled-border-color
$bpk-select-disabled-border-color: rgb(241, 242, 248) !default;
Used by
- [mixin]
bpk-select
bpk-select-disabled-color
$bpk-select-disabled-color: rgb(178, 178, 191) !default;
Used by
- [mixin]
bpk-select
bpk-select-height
$bpk-select-height: 2.250rem !default;
Used by
- [mixin]
bpk-select
bpk-select-large-height
$bpk-select-large-height: 2.625rem + .375rem !default;
Used by
- [mixin]
bpk-select--large
bpk-select-padding-bottom
$bpk-select-padding-bottom: .375rem !default;
Used by
- [mixin]
bpk-select
bpk-select-padding-left
$bpk-select-padding-left: .75rem !default;
Used by
- [mixin]
bpk-select
- [mixin]
bpk-select
bpk-select-padding-right
$bpk-select-padding-right: 1.875rem !default;
Used by
- [mixin]
bpk-select
- [mixin]
bpk-select
bpk-select-padding-top
$bpk-select-padding-top: .375rem !default;
Used by
- [mixin]
bpk-select
bpk-textarea-min-height
$bpk-textarea-min-height: 2.625rem * 2 !default;
Used by
- [mixin]
bpk-textarea
grids
mixins
bpk-grid__container
@mixin bpk-grid__container() { ... }
Description
Grid container.
Parameters
None.
Example
.selector {
@include bpk-grid__container();
}
Requires
- [variable]
bpk-breakpoint-desktop
- [variable]
bpk-grid-container-mobile-padding
- [variable]
bpk-grid-container-mobile-padding
- [variable]
bpk-grid-container-padding
- [variable]
bpk-grid-container-padding
Used by
- [mixin]
bpk-grid__container--debug
- [mixin]
bpk-grid__container--full-width
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
- [variable]
bpk-color-sky-gray-tint-07
- [mixin]
bpk-grid__container
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
- [mixin]
bpk-grid__container
bpk-grid__row
@mixin bpk-grid__row() { ... }
Description
Grid row.
Parameters
None.
Example
.selector {
@include bpk-grid__row();
}
Requires
- [mixin]
bpk-clearfix
- [variable]
bpk-grid-gutter
- [variable]
bpk-grid-gutter
Used by
- [mixin]
bpk-grid__row--padded
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
- [variable]
bpk-grid-gutter
- [variable]
bpk-grid-gutter
- [mixin]
bpk-grid__row
bpk-grid__column
@mixin bpk-grid__column() { ... }
Description
Grid column.
Parameters
None.
Example
.selector {
@include bpk-grid__column();
}
Requires
- [variable]
bpk-grid-gutter
- [variable]
bpk-grid-gutter
Used by
- [mixin]
bpk-grid__column--padded
- [mixin]
bpk-grid__column--debug
- [mixin]
bpk-grid__column--
- [mixin]
bpk-grid__column--mobile-
- [mixin]
bpk-grid__column--tablet-
- [mixin]
bpk-grid__column--offset-
- [mixin]
bpk-grid__column--offset-mobile-
- [mixin]
bpk-grid__column--offset-tablet-
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
- [variable]
bpk-grid-gutter
- [variable]
bpk-grid-gutter
- [mixin]
bpk-grid__column
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
- [variable]
bpk-grid-gutter
- [mixin]
bpk-grid__column
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
- [variable]
bpk-color-white
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
- [variable]
bpk-grid-columns
- [mixin]
bpk-grid__column
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
- [mixin]
bpk-grid__column
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
- [mixin]
bpk-grid__column
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
- [variable]
bpk-grid-columns
- [variable]
bpk-grid-columns
- [mixin]
bpk-grid__column
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
- [mixin]
bpk-grid__column
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
- [mixin]
bpk-grid__column
variables
bpk-grid-columns
$bpk-grid-columns: 12 !default;
Used by
- [mixin]
bpk-grid__column--
- [mixin]
bpk-grid__column--offset-
- [mixin]
bpk-grid__column--offset-
bpk-grid-container-mobile-padding
$bpk-grid-container-mobile-padding: .75rem !default;
Used by
- [mixin]
bpk-grid__container
- [mixin]
bpk-grid__container
bpk-grid-container-padding
$bpk-grid-container-padding: 1.5rem !default;
Used by
- [mixin]
bpk-grid__container
- [mixin]
bpk-grid__container
bpk-grid-gutter
$bpk-grid-gutter: 1.5rem !default;
Used by
- [mixin]
bpk-grid__row
- [mixin]
bpk-grid__row
- [mixin]
bpk-grid__row--padded
- [mixin]
bpk-grid__row--padded
- [mixin]
bpk-grid__column
- [mixin]
bpk-grid__column
- [mixin]
bpk-grid__column--padded
- [mixin]
bpk-grid__column--padded
- [mixin]
bpk-grid__column--debug
horizontal-nav
icons
variables
bpk-icon-size-lg
$bpk-icon-size-lg: 1.5rem !default;
Used by
- [mixin]
_bpk-svg--align-to-large-button
- [mixin]
bpk-icon
- [mixin]
bpk-icon-lg
bpk-icon-size-sm
$bpk-icon-size-sm: 1.125rem !default;
Used by
- [mixin]
bpk-icon
- [mixin]
bpk-icon-sm
layers
mixins
bpk-layer
@mixin bpk-layer() { ... }
Description
Layer base styles.
Parameters
None.
Example
.selector {
@include bpk-layer;
}
Requires
- [mixin]
bpk-border-radius-sm
- [mixin]
bpk-box-shadow-lg
- [variable]
bpk-one-pixel-rem
bpk-layer-arrow
@mixin bpk-layer-arrow() { ... }
Description
Layer arrow base styles.
Parameters
None.
Example
.selector {
@include bpk-layer-arrow(1rem);
}
Requires
- [variable]
bpk-one-pixel-rem
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
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
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
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
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
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
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
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
letter-spacings
variables
bpk-text-base-letter-spacing
$bpk-text-base-letter-spacing: normal !default;
Used by
- [mixin]
bpk-text--base
bpk-text-lg-letter-spacing
$bpk-text-lg-letter-spacing: normal !default;
Used by
- [mixin]
bpk-text--lg
bpk-text-sm-letter-spacing
$bpk-text-sm-letter-spacing: normal !default;
Used by
- [mixin]
bpk-text--sm
bpk-text-xl-letter-spacing
$bpk-text-xl-letter-spacing: normal !default;
Used by
- [mixin]
bpk-text--xl
bpk-text-xs-letter-spacing
$bpk-text-xs-letter-spacing: normal !default;
Used by
- [mixin]
bpk-text--xs
bpk-text-xxl-letter-spacing
$bpk-text-xxl-letter-spacing: normal !default;
Used by
- [mixin]
bpk-text--xxl
line-heights
variables
bpk-h-1-line-height
$bpk-h-1-line-height: 2.9375rem !default;
Used by
- [mixin]
bpk-heading-1
bpk-h-2-line-height
$bpk-h-2-line-height: 2.4375rem !default;
Used by
- [mixin]
bpk-heading-1
- [mixin]
bpk-heading-2
bpk-h-3-line-height
$bpk-h-3-line-height: 1.9375rem !default;
Used by
- [mixin]
bpk-heading-2
- [mixin]
bpk-heading-3
bpk-h-4-line-height
$bpk-h-4-line-height: 1.25rem !default;
Used by
- [mixin]
bpk-heading-3
- [mixin]
bpk-heading-4
bpk-h-5-line-height
$bpk-h-5-line-height: 1rem !default;
Used by
- [mixin]
bpk-heading-4
- [mixin]
bpk-heading-5
bpk-h-6-line-height
$bpk-h-6-line-height: 1rem !default;
Used by
- [mixin]
bpk-heading-6
bpk-text-base-line-height
$bpk-text-base-line-height: 1.25rem !default;
Used by
- [mixin]
bpk-text--base
bpk-text-lg-line-height
$bpk-text-lg-line-height: 1.625rem !default;
Used by
- [mixin]
bpk-text--lg
bpk-text-sm-line-height
$bpk-text-sm-line-height: 1.125rem !default;
Used by
- [mixin]
bpk-text--sm
bpk-text-xl-line-height
$bpk-text-xl-line-height: 1.9375rem !default;
Used by
- [mixin]
bpk-text--xl
bpk-text-xs-line-height
$bpk-text-xs-line-height: 1rem !default;
Used by
- [mixin]
bpk-text--xs
bpk-text-xxl-line-height
$bpk-text-xxl-line-height: 2.4375rem !default;
Used by
- [mixin]
bpk-text--xxl
bpk-text-xxxl-line-height
$bpk-text-xxxl-line-height: 2.9375rem !default;
Used by
- [mixin]
bpk-text--xxxl
bpk-text-xxxxl-line-height
$bpk-text-xxxxl-line-height: 3.4375rem !default;
Used by
- [mixin]
bpk-text--xxxxl
bpk-text-xxxxxl-line-height
$bpk-text-xxxxxl-line-height: 4.875rem !default;
Used by
- [mixin]
bpk-text--xxxxxl
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-event-color
$bpk-banner-alert-event-color: rgb(90, 72, 155) !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
- [mixin]
bpk-border-sm
- [mixin]
bpk-border-radius-md
- [variable]
bpk-panel-background-color
- [variable]
bpk-panel-border-color
Used by
- [mixin]
bpk-panel--padded
- [mixin]
bpk-panel--full-width
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
- [variable]
bpk-panel-padding
- [mixin]
bpk-panel
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
- [variable]
bpk-panel-border-color
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-panel-border-color
- [variable]
bpk-one-pixel-rem
- [mixin]
bpk-panel
variables
bpk-panel-background-color
$bpk-panel-background-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-panel
bpk-panel-border-color
$bpk-panel-border-color: rgb(221, 221, 229) !default;
Used by
- [mixin]
bpk-panel
- [mixin]
bpk-panel--full-width
- [mixin]
bpk-panel--full-width
bpk-panel-padding
$bpk-panel-padding: .75rem !default;
Used by
- [mixin]
bpk-panel--padded
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
- [variable]
bpk-border-radius-xs
Used by
- [mixin]
bpk-badge
- [mixin]
bpk-code
- [mixin]
bpk-code__pre
bpk-border-radius-sm
@mixin bpk-border-radius-sm() { ... }
Description
Small border radius.
Parameters
None.
Example
.selector {
@include bpk-border-radius-sm();
}
Requires
- [variable]
bpk-border-radius-sm
Used by
- [mixin]
bpk-layer
bpk-border-radius-md
@mixin bpk-border-radius-md() { ... }
Description
Medium border radius.
Parameters
None.
Example
.selector {
@include bpk-border-radius-md();
}
Requires
- [variable]
bpk-border-radius-md
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
- [variable]
bpk-border-radius-pill
variables
bpk-border-radius-md
$bpk-border-radius-md: .75rem !default;
Used by
- [mixin]
bpk-border-radius-md
bpk-border-radius-pill
$bpk-border-radius-pill: 1.125rem !default;
Used by
- [mixin]
_bpk-radio-border
- [mixin]
bpk-border-radius-pill
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
- [mixin]
bpk-border-radius-sm
bpk-border-radius-xs
$bpk-border-radius-xs: .25rem !default;
Used by
- [mixin]
bpk-badge--docked-right
- [mixin]
bpk-badge--docked-left
- [mixin]
bpk-border-radius-xs
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
- [variable]
bpk-spacing-xl
Used by
- [mixin]
bpk-scroll-indicator-left
- [mixin]
bpk-scroll-indicator-right
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
- [mixin]
_bpk-scroll-indicator
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
- [mixin]
_bpk-scroll-indicator
spacings
variables
bpk-heading-content-margin-top
$bpk-heading-content-margin-top: 1.875rem !default;
Used by
- [mixin]
bpk-content-heading
bpk-heading-margin-bottom
$bpk-heading-margin-bottom: .75rem !default;
Used by
- [mixin]
bpk-heading-1
- [mixin]
bpk-heading-2
- [mixin]
bpk-heading-3
- [mixin]
bpk-heading-4
- [mixin]
bpk-heading-5
- [mixin]
bpk-heading-6
bpk-heading-margin-top
$bpk-heading-margin-top: 0 !default;
Used by
- [mixin]
bpk-heading-1
- [mixin]
bpk-heading-2
- [mixin]
bpk-heading-3
- [mixin]
bpk-heading-4
- [mixin]
bpk-heading-5
- [mixin]
bpk-heading-6
bpk-list-item-margin-bottom
$bpk-list-item-margin-bottom: 0 !default;
Used by
- [mixin]
bpk-list-item
bpk-list-item-margin-top
$bpk-list-item-margin-top: 0 !default;
Used by
- [mixin]
bpk-list-item
bpk-list-margin-bottom
$bpk-list-margin-bottom: .75rem !default;
Used by
- [mixin]
bpk-list
bpk-list-margin-top
$bpk-list-margin-top: 0 !default;
Used by
- [mixin]
bpk-list
bpk-list-nested-margin-bottom
$bpk-list-nested-margin-bottom: 0 !default;
Used by
- [mixin]
bpk-list--nested
bpk-list-nested-margin-top
$bpk-list-nested-margin-top: 0 !default;
Used by
- [mixin]
bpk-list--nested
bpk-one-pixel-rem
$bpk-one-pixel-rem: .0625rem !default;
Used by
- [mixin]
bpk-badge
- [mixin]
bpk-badge
- [mixin]
bpk-badge
- [mixin]
bpk-badge
- [mixin]
bpk-checkbox--invalid
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-radio__input
- [mixin]
bpk-layer
- [mixin]
bpk-layer-arrow
- [mixin]
bpk-layer-arrow-top
- [mixin]
bpk-layer-arrow-top
- [mixin]
bpk-layer-arrow-top
- [mixin]
bpk-layer-arrow-top
- [mixin]
bpk-layer-arrow-right
- [mixin]
bpk-layer-arrow-right
- [mixin]
bpk-layer-arrow-right
- [mixin]
bpk-layer-arrow-bottom
- [mixin]
bpk-layer-arrow-bottom
- [mixin]
bpk-layer-arrow-bottom
- [mixin]
bpk-layer-arrow-bottom
- [mixin]
bpk-layer-arrow-left
- [mixin]
bpk-layer-arrow-left
- [mixin]
bpk-layer-arrow-left
- [mixin]
bpk-panel--full-width
- [mixin]
bpk-panel--full-width
- [mixin]
bpk-code
bpk-p-margin-bottom
$bpk-p-margin-bottom: .75rem !default;
Used by
- [mixin]
bpk-paragraph
bpk-p-margin-top
$bpk-p-margin-top: 0 !default;
Used by
- [mixin]
bpk-paragraph
bpk-spacing-base
$bpk-spacing-base: 1.5rem !default;
Used by
- [mixin]
bpk-input--valid
- [mixin]
bpk-input--valid
- [mixin]
bpk-input--invalid
- [mixin]
bpk-input--invalid
- [mixin]
bpk-input--clearable
- [mixin]
bpk-input--clearable
- [mixin]
bpk-select--invalid
- [mixin]
bpk-select--invalid
- [mixin]
bpk-checkbox
- [mixin]
bpk-checkbox
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-radio
- [mixin]
bpk-radio
- [mixin]
bpk-radio__input
- [mixin]
bpk-spinner--lg
- [mixin]
bpk-spinner--lg
- [mixin]
bpk-list
- [mixin]
bpk-code__pre
bpk-spacing-lg
$bpk-spacing-lg: 1.875rem !default;
Used by
- [mixin]
bpk-blockquote--extra-spacing
- [mixin]
bpk-blockquote--extra-spacing
bpk-spacing-md
$bpk-spacing-md: 1.125rem !default;
Used by
- [mixin]
bpk-input--valid
- [mixin]
bpk-input--valid
- [mixin]
bpk-input--invalid
- [mixin]
bpk-input--invalid
- [mixin]
bpk-select
- [mixin]
bpk-select
- [mixin]
bpk-select--invalid
- [mixin]
bpk-select--invalid
- [mixin]
bpk-spinner
- [mixin]
bpk-spinner
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
bpk-spacing-none
$bpk-spacing-none: 0 !default;
bpk-spacing-sm
$bpk-spacing-sm: .75rem !default;
Used by
- [mixin]
bpk-input--valid
- [mixin]
bpk-input--valid
- [mixin]
bpk-input--invalid
- [mixin]
bpk-input--invalid
- [mixin]
bpk-input__clear-button
- [mixin]
bpk-input__clear-button
- [mixin]
bpk-select
- [mixin]
bpk-select
- [mixin]
bpk-select
- [mixin]
bpk-select
- [mixin]
bpk-select--invalid
- [mixin]
bpk-select--invalid
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-form-validation
- [mixin]
bpk-textarea--invalid
- [mixin]
bpk-textarea--invalid
- [mixin]
bpk-table
- [mixin]
bpk-table__cell
- [mixin]
bpk-code__pre
- [mixin]
bpk-blockquote
- [mixin]
bpk-content-container--bare-html
- [mixin]
bpk-content-container--bare-html
- [mixin]
bpk-content-container--bare-html
- [mixin]
bpk-content-container--bare-html
- [mixin]
bpk-content-container--bare-html
bpk-spacing-xl
$bpk-spacing-xl: 2.250rem !default;
Used by
- [mixin]
_bpk-scroll-indicator
- [mixin]
bpk-spinner--xl
- [mixin]
bpk-spinner--xl
bpk-spacing-xs
$bpk-spacing-xs: .375rem !default;
Used by
- [mixin]
bpk-select
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-code
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
- [mixin]
bpk-content-container--bare-html
- [mixin]
bpk-content-container--bare-html
bpk-spacing-xxl
$bpk-spacing-xxl: 2.625rem !default;
Used by
- [mixin]
bpk-touch-tappable
- [mixin]
bpk-touch-tappable
- [mixin]
bpk-touch-tappable
- [mixin]
bpk-touch-tappable
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
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$spacing | — none | Variable | — none |
$icon | — none | Key | — none |
Used by
- [mixin]
bpk-icon-sm
- [mixin]
bpk-icon-lg
[private] _bpk-svg--align-to-button
@mixin _bpk-svg--align-to-button() { ... }
Description
Button alignment utility.
Parameters
None.
Used by
- [mixin]
bpk-icon-sm--align-to-button
- [mixin]
bpk-spinner--align-to-button
[private] _bpk-svg--align-to-large-button
@mixin _bpk-svg--align-to-large-button() { ... }
Description
Large button alignment utility.
Parameters
None.
Requires
- [variable]
bpk-button-large-line-height
- [variable]
bpk-icon-size-lg
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
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$icon | — none | Key | — none |
$color | — none | Variable | — none |
$size | — none | Key | — none |
Example
.selector {
@include bpk-icon(flight, $bpk-color-sky-gray-tint-02, large);
}
Requires
- [function]
str-replace
- [variable]
bpk-icon-size-lg
- [variable]
bpk-icon-size-sm
bpk-icon-sm
Use bpk-icon instead
@mixin bpk-icon-sm($icon: '') { ... }
Description
Small icon.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default 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
- [mixin]
_bpk-icon-factory
- [variable]
bpk-icon-size-sm
Used by
- [mixin]
bpk-icon-sm--align-to-button
- [mixin]
bpk-icon--rtl-support
bpk-icon-lg
Use bpk-icon instead
@mixin bpk-icon-lg($icon: '') { ... }
Description
Large icon.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default 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
- [mixin]
_bpk-icon-factory
- [variable]
bpk-icon-size-lg
Used by
- [mixin]
bpk-icon-lg--align-to-large-button
- [mixin]
bpk-icon--rtl-support
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
- [mixin]
_bpk-svg--align-to-button
- [mixin]
bpk-icon-sm
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
- [mixin]
_bpk-svg--align-to-large-button
- [mixin]
bpk-icon-lg
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
- [mixin]
bpk-icon-sm
- [mixin]
bpk-icon-lg
bpk-spinner
@mixin bpk-spinner($spinner) { ... }
Description
Small spinner.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$spinner | The key of the desired SVG datauri from the $bpk-spinners map. | Key | — none |
Example
.selector {
@include bpk-spinner(spinner-sky-gray-tint-02);
}
Requires
- [variable]
bpk-spacing-md
- [variable]
bpk-spacing-md
Used by
- [mixin]
bpk-spinner--lg
- [mixin]
bpk-spinner--xl
- [mixin]
bpk-spinner--align-to-button
- [mixin]
bpk-spinner--align-to-large-button
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
- [variable]
bpk-spacing-base
- [variable]
bpk-spacing-base
- [mixin]
bpk-spinner
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
- [variable]
bpk-spacing-xl
- [variable]
bpk-spacing-xl
- [mixin]
bpk-spinner
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
- [mixin]
_bpk-svg--align-to-button
- [mixin]
bpk-spinner
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
- [mixin]
_bpk-svg--align-to-large-button
- [mixin]
bpk-spinner
text-colors
variables
bpk-font-color-base
$bpk-font-color-base: rgb(17, 18, 54) !default;
Used by
- [mixin]
bpk-badge
bpk-link-active-color
$bpk-link-active-color: rgb(4, 39, 89) !default;
Used by
- [mixin]
bpk-link
- [mixin]
bpk-link--active
- [mixin]
bpk-link--active
- [mixin]
bpk-link--active
bpk-link-alternate-active-color
$bpk-link-alternate-active-color: rgb(221, 221, 229) !default;
Used by
- [mixin]
bpk-link--alternate
bpk-link-alternate-color
$bpk-link-alternate-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-link--alternate
bpk-link-alternate-hover-color
$bpk-link-alternate-hover-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-link--alternate
bpk-link-alternate-visited-color
$bpk-link-alternate-visited-color: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-link--alternate
bpk-link-color
$bpk-link-color: rgb(7, 112, 227) !default;
Used by
- [mixin]
bpk-link
bpk-link-hover-color
$bpk-link-hover-color: rgb(8, 78, 178) !default;
Used by
- [mixin]
bpk-link
bpk-link-visited-color
$bpk-link-visited-color: rgb(7, 112, 227) !default;
Used by
- [mixin]
bpk-link
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-quaternary-light-color
$bpk-text-quaternary-light-color: rgb(143, 144, 160) !default;
bpk-text-secondary-light-color
$bpk-text-secondary-light-color: rgb(68, 69, 96) !default;
bpk-text-tertiary-light-color
$bpk-text-tertiary-light-color: rgb(143, 144, 160) !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
- [mixin]
bpk-link
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
- [mixin]
bpk-select
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
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$font-size | — none | Variable | — none |
$line-height | — none | Variable | — none |
$font-weight | false | Variable | — none |
$letter-spacing | false | Variable | — none |
Used by
- [mixin]
bpk-text--xs
- [mixin]
bpk-text--sm
- [mixin]
bpk-text--base
- [mixin]
bpk-text--lg
- [mixin]
bpk-text--xl
- [mixin]
bpk-text--xxl
- [mixin]
bpk-text--xxxl
- [mixin]
bpk-text--xxxxl
- [mixin]
bpk-text--xxxxxl
- [mixin]
bpk-heading-1
- [mixin]
bpk-heading-2
- [mixin]
bpk-heading-3
- [mixin]
bpk-heading-4
- [mixin]
bpk-heading-5
- [mixin]
bpk-heading-6
bpk-text
@mixin bpk-text() { ... }
Description
Text margin reset.
Parameters
None.
Example
.selector {
@include bpk-text;
}
Used by
- [mixin]
bpk-badge
- [mixin]
bpk-checkbox
- [mixin]
bpk-checkbox__label--small
- [mixin]
bpk-text--xs
- [mixin]
bpk-text--sm
- [mixin]
bpk-text--base
- [mixin]
bpk-text--lg
- [mixin]
bpk-text--xl
- [mixin]
bpk-text--xxl
- [mixin]
bpk-text--xxxl
- [mixin]
bpk-text--xxxxl
- [mixin]
bpk-text--xxxxxl
- [mixin]
bpk-text--bold
- [mixin]
bpk-text--black
bpk-text--xs
@mixin bpk-text--xs() { ... }
Description
Extra small text style
Parameters
None.
Example
.selector {
@include bpk-text;
@include bpk-text--xs;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-text-xs-font-size
- [variable]
bpk-text-xs-line-height
- [variable]
bpk-text-xs-font-weight
- [variable]
bpk-text-xs-letter-spacing
- [mixin]
bpk-text
Used by
- [mixin]
bpk-badge
- [mixin]
bpk-checkbox__label--small
- [mixin]
bpk-text-xs
bpk-text-xs
@mixin bpk-text-xs() { ... }
Description
Extra small text style (without margin reset)
Parameters
None.
Example
.selector {
@include bpk-text-xs;
}
Requires
- [mixin]
bpk-text--xs
Used by
- [mixin]
bpk-content-container--bare-html
- [mixin]
bpk-content-container--bare-html
bpk-text--sm
@mixin bpk-text--sm() { ... }
Description
Small text style
Parameters
None.
Example
.selector {
@include bpk-text;
@include bpk-text--sm;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-text-sm-font-size
- [variable]
bpk-text-sm-line-height
- [variable]
bpk-text-sm-font-weight
- [variable]
bpk-text-sm-letter-spacing
- [mixin]
bpk-text
Used by
- [mixin]
bpk-text-sm
bpk-text-sm
@mixin bpk-text-sm() { ... }
Description
Small text style (without margin reset)
Parameters
None.
Example
.selector {
@include bpk-text-sm;
}
Requires
- [mixin]
bpk-text--sm
bpk-text--base
@mixin bpk-text--base() { ... }
Description
Base text style
Parameters
None.
Example
.selector {
@include bpk-text;
@include bpk-text--base;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-text-base-font-size
- [variable]
bpk-text-base-line-height
- [variable]
bpk-text-base-font-weight
- [variable]
bpk-text-base-letter-spacing
- [mixin]
bpk-text
Used by
- [mixin]
bpk-checkbox
- [mixin]
bpk-text-base
bpk-text-base
@mixin bpk-text-base() { ... }
Description
Base text style (without margin reset)
Parameters
None.
Example
.selector {
@include bpk-text-base;
}
Requires
- [mixin]
bpk-text--base
Used by
- [mixin]
bpk-content-container--bare-html
- [mixin]
bpk-content-container--bare-html
bpk-text--lg
@mixin bpk-text--lg() { ... }
Description
Large text style
Parameters
None.
Example
.selector {
@include bpk-text;
@include bpk-text--lg;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-text-lg-font-size
- [variable]
bpk-text-lg-line-height
- [variable]
bpk-text-lg-font-weight
- [variable]
bpk-text-lg-letter-spacing
- [mixin]
bpk-text
Used by
- [mixin]
bpk-text-lg
bpk-text-lg
@mixin bpk-text-lg() { ... }
Description
Large text style (without margin reset)
Parameters
None.
Example
.selector {
@include bpk-text-lg;
}
Requires
- [mixin]
bpk-text--lg
bpk-text--xl
@mixin bpk-text--xl() { ... }
Description
Extra large text style
Parameters
None.
Example
.selector {
@include bpk-text;
@include bpk-text--xl;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-text-xl-font-size
- [variable]
bpk-text-xl-line-height
- [variable]
bpk-text-xl-font-weight
- [variable]
bpk-text-xl-letter-spacing
- [mixin]
bpk-text
Used by
- [mixin]
bpk-text-xl
bpk-text-xl
@mixin bpk-text-xl() { ... }
Description
Extra large text style (without margin reset)
Parameters
None.
Example
.selector {
@include bpk-text-xl;
}
Requires
- [mixin]
bpk-text--xl
Used by
- [mixin]
bpk-content-container--bare-html
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
- [mixin]
_bpk-text-factory
- [variable]
bpk-text-xxl-font-size
- [variable]
bpk-text-xxl-line-height
- [variable]
bpk-text-xxl-font-weight
- [variable]
bpk-text-xxl-letter-spacing
- [mixin]
bpk-text
Used by
- [mixin]
bpk-text-xxl
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
- [mixin]
bpk-text--xxl
Used by
- [mixin]
bpk-content-container--bare-html
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
- [mixin]
_bpk-text-factory
- [variable]
bpk-text-xxxl-font-size
- [variable]
bpk-text-xxxl-line-height
- [variable]
bpk-text-xxxl-font-weight
- [mixin]
bpk-text
Used by
- [mixin]
bpk-text-xxxl
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
- [mixin]
bpk-text--xxxl
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
- [mixin]
_bpk-text-factory
- [variable]
bpk-text-xxxxl-font-size
- [variable]
bpk-text-xxxxl-line-height
- [variable]
bpk-text-xxxxl-font-weight
- [mixin]
bpk-text
Used by
- [mixin]
bpk-text-xxxxl
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
- [mixin]
bpk-text--xxxxl
Used by
- [mixin]
bpk-content-container--bare-html
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
- [mixin]
_bpk-text-factory
- [variable]
bpk-text-xxxxxl-font-size
- [variable]
bpk-text-xxxxxl-line-height
- [variable]
bpk-text-xxxxxl-font-weight
- [mixin]
bpk-text
Used by
- [mixin]
bpk-text-xxxxxl
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
- [mixin]
bpk-text--xxxxxl
bpk-text--bold
@mixin bpk-text--bold() { ... }
Description
Bold text style
Parameters
None.
Example
.selector {
@include bpk-text;
@include bpk-text--bold;
}
Requires
- [variable]
bpk-font-weight-bold
- [mixin]
bpk-text
Used by
- [mixin]
bpk-text-bold
- [mixin]
bpk-table__cell--head-alternate
bpk-text-bold
@mixin bpk-text-bold() { ... }
Description
Bold text style (without margin reset)
Parameters
None.
Example
.selector {
@include bpk-text-bold;
}
Requires
- [mixin]
bpk-text--bold
Used by
- [mixin]
bpk-content-container--bare-html
- [mixin]
bpk-content-container--bare-html
- [mixin]
bpk-content-container--bare-html
- [mixin]
bpk-content-container--bare-html
bpk-text--black
@mixin bpk-text--black() { ... }
Description
Black text style
Parameters
None.
Example
.selector {
@include bpk-text;
@include bpk-text--black;
}
Requires
- [variable]
bpk-font-weight-black
- [mixin]
bpk-text
Used by
- [mixin]
bpk-text-black
bpk-text-black
@mixin bpk-text-black() { ... }
Description
Black text style (without margin reset)
Parameters
None.
Example
.selector {
@include bpk-text-heavy;
}
Requires
- [mixin]
bpk-text--black
bpk-heading-1
@mixin bpk-heading-1() { ... }
Description
Level 1 heading.
Parameters
None.
Example
.selector {
@include bpk-heading-1();
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-heading-margin-top
- [variable]
bpk-heading-margin-bottom
- [variable]
bpk-h-1-font-size
- [variable]
bpk-h-1-line-height
- [variable]
bpk-h-1-font-weight
- [variable]
bpk-h-2-font-size
- [variable]
bpk-h-2-line-height
- [variable]
bpk-h-2-font-weight
Used by
- [mixin]
bpk-heading--no-bottom-margin
- [mixin]
bpk-content-heading
bpk-heading-2
@mixin bpk-heading-2() { ... }
Description
Level 2 heading.
Parameters
None.
Example
.selector {
@include bpk-heading-2();
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-heading-margin-top
- [variable]
bpk-heading-margin-bottom
- [variable]
bpk-h-2-font-size
- [variable]
bpk-h-2-line-height
- [variable]
bpk-h-2-font-weight
- [variable]
bpk-h-3-font-size
- [variable]
bpk-h-3-line-height
- [variable]
bpk-h-3-font-weight
Used by
- [mixin]
bpk-heading--no-bottom-margin
- [mixin]
bpk-content-heading
bpk-heading-3
@mixin bpk-heading-3() { ... }
Description
Level 3 heading.
Parameters
None.
Example
.selector {
@include bpk-heading-3();
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-heading-margin-top
- [variable]
bpk-heading-margin-bottom
- [variable]
bpk-h-3-font-size
- [variable]
bpk-h-3-line-height
- [variable]
bpk-h-3-font-weight
- [variable]
bpk-h-4-font-size
- [variable]
bpk-h-4-line-height
- [variable]
bpk-h-4-font-weight
Used by
- [mixin]
bpk-heading--no-bottom-margin
- [mixin]
bpk-content-heading
bpk-heading-4
@mixin bpk-heading-4() { ... }
Description
Level 4 heading.
Parameters
None.
Example
.selector {
@include bpk-heading-4();
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-heading-margin-top
- [variable]
bpk-heading-margin-bottom
- [variable]
bpk-h-4-font-size
- [variable]
bpk-h-4-line-height
- [variable]
bpk-h-4-font-weight
- [variable]
bpk-h-5-font-size
- [variable]
bpk-h-5-line-height
- [variable]
bpk-h-5-font-weight
Used by
- [mixin]
bpk-heading--no-bottom-margin
- [mixin]
bpk-content-heading
bpk-heading-5
@mixin bpk-heading-5() { ... }
Description
Level 5 heading.
Parameters
None.
Example
.selector {
@include bpk-heading-5();
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-heading-margin-top
- [variable]
bpk-heading-margin-bottom
- [variable]
bpk-h-5-font-size
- [variable]
bpk-h-5-line-height
- [variable]
bpk-h-5-font-weight
Used by
- [mixin]
bpk-heading--no-bottom-margin
- [mixin]
bpk-content-heading
bpk-heading-6
@mixin bpk-heading-6() { ... }
Description
Level 6 heading.
Parameters
None.
Example
.selector {
@include bpk-heading-6();
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-heading-margin-top
- [variable]
bpk-heading-margin-bottom
- [variable]
bpk-h-6-font-size
- [variable]
bpk-h-6-line-height
- [variable]
bpk-h-6-font-weight
Used by
- [mixin]
bpk-heading--no-bottom-margin
- [mixin]
bpk-content-heading
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
- [mixin]
bpk-heading-1
- [mixin]
bpk-heading-2
- [mixin]
bpk-heading-3
- [mixin]
bpk-heading-4
- [mixin]
bpk-heading-5
- [mixin]
bpk-heading-6
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
- [variable]
bpk-heading-content-margin-top
- [mixin]
bpk-heading-1
- [mixin]
bpk-heading-2
- [mixin]
bpk-heading-3
- [mixin]
bpk-heading-4
- [mixin]
bpk-heading-5
- [mixin]
bpk-heading-6
bpk-paragraph
@mixin bpk-paragraph() { ... }
Description
Paragraph.
Parameters
None.
Example
.selector {
@include bpk-paragraph();
}
Requires
- [variable]
bpk-p-margin-top
- [variable]
bpk-p-margin-bottom
bpk-list
@mixin bpk-list() { ... }
Description
List.
Parameters
None.
Example
.selector {
@include bpk-list();
}
Requires
- [variable]
bpk-list-margin-top
- [variable]
bpk-list-margin-bottom
- [variable]
bpk-spacing-base
Used by
- [mixin]
bpk-list--nested
- [mixin]
bpk-content-container--bare-html
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
- [variable]
bpk-list-nested-margin-top
- [variable]
bpk-list-nested-margin-bottom
- [mixin]
bpk-list
Used by
- [mixin]
bpk-content-container--bare-html
bpk-list-item
@mixin bpk-list-item() { ... }
Description
List item.
Parameters
None.
Example
.selector {
@include bpk-list-item();
}
Requires
- [variable]
bpk-list-item-margin-top
- [variable]
bpk-list-item-margin-bottom
Used by
- [mixin]
bpk-content-container--bare-html
bpk-link
@mixin bpk-link() { ... }
Description
Inline link.
Parameters
None.
Example
.selector {
@include bpk-link();
}
Requires
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [variable]
bpk-link-text-decoration
- [variable]
bpk-link-color
- [variable]
bpk-link-hover-text-decoration
- [variable]
bpk-link-hover-color
- [variable]
bpk-link-visited-color
- [variable]
bpk-link-hover-text-decoration
- [variable]
bpk-link-active-color
Used by
- [mixin]
bpk-button--link
- [mixin]
bpk-button--padded
- [mixin]
bpk-link--alternate
- [mixin]
bpk-link--active
- [mixin]
bpk-content-container--bare-html
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
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [variable]
bpk-link-alternate-color
- [variable]
bpk-link-alternate-hover-color
- [variable]
bpk-link-alternate-visited-color
- [variable]
bpk-link-alternate-active-color
- [mixin]
bpk-link
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
- [variable]
bpk-link-active-color
- [variable]
bpk-link-active-color
- [variable]
bpk-link-active-color
- [mixin]
bpk-link
bpk-table
@mixin bpk-table() { ... }
Description
Table.
Parameters
None.
Example
.selector {
@include bpk-table();
}
Requires
- [mixin]
bpk-border-sm
- [variable]
bpk-spacing-sm
- [variable]
bpk-color-sky-gray-tint-06
Used by
- [mixin]
bpk-table--alternate
- [mixin]
bpk-content-container--bare-html
bpk-table--alternate
@mixin bpk-table--alternate() { ... }
Description
Alternate table style.
Parameters
None.
Example
.selector {
@include bpk-table();
@include bpk-table--alternate();
}
Requires
- [mixin]
bpk-border-sm
- [variable]
bpk-color-sky-gray-tint-04
- [mixin]
bpk-table
Used by
bpk-table__cell
@mixin bpk-table__cell() { ... }
Description
Table cell.
Parameters
None.
Example
.selector {
@include bpk-table__cell();
}
Requires
- [variable]
bpk-spacing-sm
Used by
- [mixin]
bpk-table__cell--head
- [mixin]
bpk-table__cell--head-alternate
- [mixin]
bpk-content-container--bare-html
- [mixin]
bpk-content-container--bare-html
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
- [variable]
bpk-color-sky-gray-tint-07
- [mixin]
bpk-table__cell
Used by
- [mixin]
bpk-content-container--bare-html
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
- [mixin]
bpk-text--bold
- [variable]
bpk-color-white
- [mixin]
bpk-table__cell
Used by
bpk-code
@mixin bpk-code() { ... }
Description
Code.
Parameters
None.
Example
.selector {
@include bpk-code();
}
Requires
- [mixin]
bpk-border-radius-xs
- [variable]
bpk-spacing-xs
- [variable]
bpk-color-sky-gray-tint-07
- [variable]
bpk-color-sky-gray-tint-01
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-color-white
Used by
- [mixin]
bpk-code--block
- [mixin]
bpk-content-container--bare-html
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
- [variable]
bpk-color-sky-blue-tint-03
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
- [mixin]
bpk-code
Used by
bpk-code__pre
@mixin bpk-code__pre() { ... }
Description
Pre (code block wrapper).
Parameters
None.
Example
.selector {
@include bpk-code__pre();
}
Requires
- [mixin]
bpk-border-radius-xs
- [variable]
bpk-spacing-sm
- [variable]
bpk-spacing-base
- [variable]
bpk-color-sky-gray-tint-07
Used by
- [mixin]
bpk-content-container--bare-html
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
- [mixin]
bpk-border-sm
- [variable]
bpk-color-sky-gray-tint-04
Used by
bpk-blockquote
@mixin bpk-blockquote() { ... }
Description
Blockquote.
Parameters
None.
Example
.selector {
@include bpk-blockquote();
}
Requires
- [mixin]
bpk-border-left-lg
- [mixin]
bpk-border-left-lg
- [mixin]
bpk-border-right-lg
- [mixin]
bpk-border-right-lg
- [variable]
bpk-spacing-sm
- [variable]
bpk-spacing-xs
- [variable]
bpk-spacing-xs
- [variable]
bpk-spacing-xs
- [variable]
bpk-spacing-md
- [variable]
bpk-color-sky-gray-tint-07
- [variable]
bpk-color-sky-gray-tint-02
- [variable]
bpk-color-sky-blue
- [variable]
bpk-color-sky-blue
- [variable]
bpk-spacing-xs
- [variable]
bpk-spacing-md
- [variable]
bpk-spacing-xs
- [variable]
bpk-spacing-xs
- [variable]
bpk-color-sky-blue
- [variable]
bpk-color-sky-blue
Used by
- [mixin]
bpk-blockquote--extra-spacing
- [mixin]
bpk-content-container--bare-html
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
- [variable]
bpk-spacing-lg
- [variable]
bpk-spacing-lg
- [mixin]
bpk-blockquote
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
- [mixin]
bpk-text-xxxxl
- [mixin]
bpk-text-xxl
- [mixin]
bpk-text-xl
- [mixin]
bpk-text-bold
- [mixin]
bpk-text-base
- [mixin]
bpk-text-bold
- [mixin]
bpk-text-xs
- [mixin]
bpk-text-bold
- [mixin]
bpk-text-xs
- [mixin]
bpk-text-bold
- [mixin]
bpk-link
- [mixin]
bpk-text-base
- [mixin]
bpk-list
- [mixin]
bpk-list--nested
- [mixin]
bpk-list-item
- [mixin]
bpk-table
- [mixin]
bpk-table__cell
- [mixin]
bpk-table__cell
- [mixin]
bpk-table__cell--head
- [mixin]
bpk-code
- [mixin]
bpk-code__pre
- [mixin]
bpk-code--block
- [mixin]
bpk-blockquote
- [variable]
bpk-spacing-sm
- [variable]
bpk-spacing-sm
- [variable]
bpk-spacing-sm
- [variable]
bpk-spacing-xs
- [variable]
bpk-spacing-sm
- [variable]
bpk-spacing-sm
- [variable]
bpk-spacing-xs
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
- [mixin]
bpk-code--alternate
- [mixin]
bpk-code__pre--alternate
- [mixin]
bpk-code--block
- [mixin]
bpk-table--alternate
- [mixin]
bpk-table__cell--head-alternate
- [mixin]
bpk-content-container--bare-html
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
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$margin | The desired leading margin. | String | — none |
$resetOppositeMargin | Whether to reset the opposite margin to 0. | Boolean | false |
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
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$margin | The desired trailing margin. | String | — none |
$resetOppositeMargin | Whether to reset the opposite margin to 0. | Boolean | false |
Example
.selector {
@include bpk-margin-trailing($bpk-spacing-sm);
}
utils
mixins
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
- [mixin]
bpk-grid__row
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
- [mixin]
bpk-badge
- [mixin]
bpk-badge--success
- [mixin]
bpk-badge--destructive
- [mixin]
bpk-button
- [mixin]
bpk-button
- [mixin]
bpk-button
- [mixin]
bpk-button
- [mixin]
bpk-button
- [mixin]
bpk-button
- [mixin]
bpk-button
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--featured
- [mixin]
bpk-button--featured
- [mixin]
bpk-button--featured
- [mixin]
bpk-button--featured
- [mixin]
bpk-button--featured
- [mixin]
bpk-button--featured
- [mixin]
bpk-input--invalid
- [mixin]
bpk-select--invalid
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-radio__input
- [mixin]
bpk-label--invalid
- [mixin]
bpk-form-validation
- [mixin]
bpk-textarea--invalid
- [mixin]
bpk-link
- [mixin]
bpk-link
- [mixin]
bpk-link
- [mixin]
bpk-link
- [mixin]
bpk-link--alternate
- [mixin]
bpk-link--alternate
- [mixin]
bpk-link--alternate
- [mixin]
bpk-apply-primary-color-to
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
- [mixin]
bpk-themeable-property
- [variable]
bpk-color-sky-blue
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
- [variable]
bpk-spacing-xxl
- [variable]
bpk-spacing-xxl
- [variable]
bpk-spacing-xxl
- [variable]
bpk-spacing-xxl
functions
str-replace
@function str-replace($string, $search, $replace: '') { ... }
Description
Replace part of a string with another string.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$string | The string inside which the replacement should take place. | String | — none |
$search | The substring to be replaced. | String | — none |
$replace | The string to replace $search. | String | '' |
Used by
- [mixin]
bpk-icon
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;