animations
variables
bpk-duration-xs
$bpk-duration-xs: 50ms !default;
bpk-duration-sm
$bpk-duration-sm: 200ms !default;
Used by
- [mixin]
bpk-card
- [mixin]
bpk-form-validation
- [mixin]
bpk-form-validation
bpk-duration-base
$bpk-duration-base: 400ms !default;
badges
mixins
bpk-badge
@mixin bpk-badge() { ... }
Description
Standard badge.
Parameters
None.
Example
.selector {
@include bpk-badge();
}
Requires
- [mixin]
bpk-border-radius-xs
- [mixin]
bpk-text
- [mixin]
bpk-caption
- [function]
bpk-spacing-sm
- [function]
bpk-spacing-md
Used by
- [mixin]
bpk-badge--centered
- [mixin]
bpk-badge--docked-right
- [mixin]
bpk-badge--docked-left
- [mixin]
bpk-badge--normal
- [mixin]
bpk-badge--warning
- [mixin]
bpk-badge--success
- [mixin]
bpk-badge--critical
- [mixin]
bpk-badge--inverse
- [mixin]
bpk-badge--outline
- [mixin]
bpk-badge--strong
- [mixin]
bpk-badge--brand
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
- [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--normal
@mixin bpk-badge--normal() { ... }
Description
Normal badge. Modifies the bpk-badge mixin.
Parameters
None.
Example
.selector {
@include bpk-badge();
@include bpk-badge--normal();
}
Requires
- [variable]
bpk-surface-highlight-day
- [variable]
bpk-text-primary-day
- [variable]
bpk-text-primary-day
- [mixin]
bpk-badge
bpk-badge--warning
@mixin bpk-badge--warning() { ... }
Description
Warning badge. Modifies the bpk-badge mixin.
Parameters
None.
Example
.selector {
@include bpk-badge();
@include bpk-badge--warning();
}
Requires
- [variable]
bpk-status-warning-fill-day
- [variable]
bpk-text-on-light-day
- [variable]
bpk-text-on-light-day
- [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
- [variable]
bpk-status-success-fill-day
- [variable]
bpk-text-on-light-day
- [variable]
bpk-text-on-light-day
- [mixin]
bpk-badge
bpk-badge--critical
@mixin bpk-badge--critical() { ... }
Description
Critical badge. Modifies the bpk-badge mixin.
Parameters
None.
Example
.selector {
@include bpk-badge();
@include bpk-badge--critical();
}
Requires
- [variable]
bpk-status-danger-fill-day
- [variable]
bpk-text-on-light-day
- [variable]
bpk-text-on-light-day
- [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-surface-default-day
- [variable]
bpk-text-primary-day
- [variable]
bpk-text-primary-day
- [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-text-on-dark-day
- [variable]
bpk-border-size-sm
- [variable]
bpk-text-on-dark-day
- [variable]
bpk-text-on-dark-day
- [mixin]
bpk-badge
bpk-badge--strong
@mixin bpk-badge--strong() { ... }
Description
Strong badge. Modifies the bpk-badge mixin.
Parameters
None.
Example
.selector {
@include bpk-badge();
@include bpk-badge--strong();
}
Requires
- [variable]
bpk-core-primary-day
- [variable]
bpk-text-on-dark-day
- [variable]
bpk-text-on-dark-day
- [mixin]
bpk-badge
bpk-badge--brand
@mixin bpk-badge--brand() { ... }
Description
Brand badge. Modifies the bpk-badge mixin.
Parameters
None.
Example
.selector {
@include bpk-badge();
@include bpk-badge--brand();
}
Requires
- [variable]
bpk-core-accent-day
- [variable]
bpk-text-primary-inverse-day
- [variable]
bpk-text-primary-inverse-day
- [mixin]
bpk-badge
borders
variables
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-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-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
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
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
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
box-shadows
variables
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-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-xl
$bpk-box-shadow-xl: 0px 12px 50px 0px rgba(37,32,31,.25) !default;
Used by
- [mixin]
bpk-box-shadow-xl
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
breakpoints
variables
bpk-breakpoint-query-tablet-only
$bpk-breakpoint-query-tablet-only: "(min-width: 32.0625rem) and (max-width: 64rem)" !default;
Used by
- [mixin]
bpk-breakpoint-tablet-only
bpk-breakpoint-small-tablet-margin
$bpk-breakpoint-small-tablet-margin: 1.5rem !default;
bpk-breakpoint-query-small-tablet
$bpk-breakpoint-query-small-tablet: "(max-width: 48rem)" !default;
Used by
- [mixin]
bpk-breakpoint-small-tablet
bpk-breakpoint-small-mobile-margin
$bpk-breakpoint-small-mobile-margin: 1rem !default;
bpk-breakpoint-query-mobile
$bpk-breakpoint-query-mobile: "(max-width: 32rem)" !default;
Used by
- [mixin]
bpk-breakpoint-mobile
bpk-breakpoint-query-small-tablet-only
$bpk-breakpoint-query-small-tablet-only: "(min-width: 32.0625rem) and (max-width: 48rem)" !default;
Used by
- [mixin]
bpk-breakpoint-small-tablet-only
bpk-breakpoint-small-mobile
$bpk-breakpoint-small-mobile: 22.4375rem !default;
bpk-breakpoint-query-above-mobile
$bpk-breakpoint-query-above-mobile: "(min-width: 32.0625rem)" !default;
Used by
- [mixin]
bpk-breakpoint-above-mobile
bpk-breakpoint-query-tablet
$bpk-breakpoint-query-tablet: "(max-width: 64rem)" !default;
Used by
- [mixin]
bpk-breakpoint-tablet
bpk-breakpoint-small-tablet
$bpk-breakpoint-small-tablet: 48rem !default;
bpk-breakpoint-query-above-tablet
$bpk-breakpoint-query-above-tablet: "(min-width: 64.0625rem)" !default;
Used by
- [mixin]
bpk-breakpoint-above-tablet
bpk-breakpoint-desktop
$bpk-breakpoint-desktop: 80rem !default;
bpk-breakpoint-mobile
$bpk-breakpoint-mobile: 32rem !default;
bpk-breakpoint-tablet
$bpk-breakpoint-tablet: 64rem !default;
bpk-breakpoint-query-desktop-only
$bpk-breakpoint-query-desktop-only: "(min-width: 64.0625rem) and (max-width: 80rem)" !default;
Used by
- [mixin]
bpk-breakpoint-desktop-only
bpk-breakpoint-query-above-desktop
$bpk-breakpoint-query-above-desktop: "(min-width: 80.0625rem)" !default;
Used by
- [mixin]
bpk-breakpoint-above-desktop
bpk-breakpoint-tablet-margin
$bpk-breakpoint-tablet-margin: 2rem !default;
bpk-breakpoint-mobile-margin
$bpk-breakpoint-mobile-margin: 1.5rem !default;
bpk-breakpoint-query-small-mobile
$bpk-breakpoint-query-small-mobile: "(max-width: 22.4375rem)" !default;
Used by
- [mixin]
bpk-breakpoint-small-mobile
bpk-breakpoint-desktop-margin
$bpk-breakpoint-desktop-margin: 1rem * 3 !default;
mixins
bpk-container
@mixin bpk-container() { ... }
Parameters
None.
bpk-breakpoint-small-mobile
@mixin bpk-breakpoint-small-mobile() { ... }
Description
Breakpoint to target up to and including small mobile viewports.
Parameters
None.
Example
.selector {
@include bpk-breakpoint-small-mobile {
/* small mobile viewport scss goes here */
}
/* larger mobile, tablet & desktop viewport scss goes here */
}
Requires
- [variable]
bpk-breakpoint-query-small-mobile
bpk-breakpoint-mobile
@mixin bpk-breakpoint-mobile() { ... }
Description
Breakpoint to target up to and including mobile viewports.
Parameters
None.
Example
.selector {
@include bpk-breakpoint-mobile {
/* up to and including mobile viewport scss goes here */
}
/* tablet & desktop viewport scss goes here */
}
Requires
- [variable]
bpk-breakpoint-query-mobile
bpk-breakpoint-small-tablet
@mixin bpk-breakpoint-small-tablet() { ... }
Description
Breakpoint to target up to and including small tablet viewports.
Parameters
None.
Example
.selector {
@include bpk-breakpoint-small-tablet {
/* up to and including small tablet viewport scss goes here */
}
/* larger tablet & desktop viewport scss goes here */
}
Requires
- [variable]
bpk-breakpoint-query-small-tablet
bpk-breakpoint-tablet
@mixin bpk-breakpoint-tablet() { ... }
Description
Breakpoint to target up to and including tablet viewports.
Parameters
None.
Example
.selector {
@include bpk-breakpoint-tablet {
/* mobile & tablet viewport scss goes here */
}
/* desktop viewport scss goes here */
}
Requires
- [variable]
bpk-breakpoint-query-tablet
bpk-breakpoint-small-tablet-only
@mixin bpk-breakpoint-small-tablet-only() { ... }
Description
Breakpoint to target only small tablet viewports.
Parameters
None.
Example
.selector {
@include bpk-breakpoint-small-tablet-only {
/* small tablet viewport scss goes here */
}
/* mobile, larger tablet & desktop viewport scss goes here */
}
Requires
- [variable]
bpk-breakpoint-query-small-tablet-only
bpk-breakpoint-tablet-only
@mixin bpk-breakpoint-tablet-only() { ... }
Description
Breakpoint to target only tablet viewports.
Parameters
None.
Example
.selector {
@include bpk-breakpoint-tablet-only {
/* tablet viewport scss goes here */
}
/* mobile & desktop viewport scss goes here */
}
Requires
- [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
bpk-breakpoint-above-desktop
@mixin bpk-breakpoint-above-desktop() { ... }
Description
Breakpoint to target large desktop viewports.
Parameters
None.
Example
.selector {
@include bpk-breakpoint-above-desktop {
/* large desktop viewport scss goes here */
}
/* mobile, tablet, desktop viewport scss goes here */
}
Requires
- [variable]
bpk-breakpoint-query-above-desktop
bpk-breakpoint-desktop-only
@mixin bpk-breakpoint-desktop-only() { ... }
Description
Breakpoint to target only desktop viewports.
Parameters
None.
Example
.selector {
@include bpk-breakpoint-desktop-only {
/* desktop viewport scss goes here */
}
/* mobile, tablet & large desktop viewport scss goes here */
}
Requires
- [variable]
bpk-breakpoint-query-desktop-only
button-colors
variables
bpk-private-button-secondary-pressed-background-night
$bpk-private-button-secondary-pressed-background-night: rgb(1, 9, 19) !default;
bpk-private-button-link-normal-foreground-night
$bpk-private-button-link-normal-foreground-night: rgb(132, 233, 255) !default;
bpk-private-button-link-on-dark-disabled-foreground-night
$bpk-private-button-link-on-dark-disabled-foreground-night: rgba(255, 255, 255, 0.2) !default;
bpk-private-button-secondary-normal-background-night
$bpk-private-button-secondary-normal-background-night: rgb(36, 51, 70) !default;
bpk-private-button-primary-on-light-pressed-background-day
$bpk-private-button-primary-on-light-pressed-background-day: rgb(21, 70, 121) !default;
Used by
- [mixin]
bpk-button--primary-on-light
- [mixin]
bpk-button--primary-on-light
bpk-private-button-featured-normal-background-day
$bpk-private-button-featured-normal-background-day: rgb(0, 98, 227) !default;
Used by
- [mixin]
bpk-button--featured
bpk-private-button-featured-pressed-background-night
$bpk-private-button-featured-pressed-background-night: rgb(209, 247, 255) !default;
bpk-private-button-primary-on-light-normal-background-night
$bpk-private-button-primary-on-light-normal-background-night: rgb(5, 32, 60) !default;
bpk-private-button-secondary-pressed-background-day
$bpk-private-button-secondary-pressed-background-day: rgb(194, 201, 205) !default;
Used by
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
bpk-private-button-link-normal-foreground-day
$bpk-private-button-link-normal-foreground-day: rgb(0, 98, 227) !default;
Used by
- [mixin]
bpk-button--link
bpk-private-button-primary-on-light-disabled-foreground-night
$bpk-private-button-primary-on-light-disabled-foreground-night: rgba(0, 0, 0, 0.2) !default;
bpk-private-button-secondary-on-dark-disabled-background-night
$bpk-private-button-secondary-on-dark-disabled-background-night: rgb(11, 18, 29) !default;
bpk-private-button-destructive-normal-foreground-night
$bpk-private-button-destructive-normal-foreground-night: rgb(255, 100, 156) !default;
bpk-private-button-link-on-dark-disabled-foreground-day
$bpk-private-button-link-on-dark-disabled-foreground-day: rgba(255, 255, 255, 0.2) !default;
Used by
- [mixin]
bpk-button--link-on-dark
bpk-private-button-secondary-normal-background-day
$bpk-private-button-secondary-normal-background-day: rgb(224, 227, 229) !default;
Used by
- [mixin]
bpk-button--secondary
bpk-private-button-primary-on-light-normal-background-day
$bpk-private-button-primary-on-light-normal-background-day: rgb(5, 32, 60) !default;
Used by
- [mixin]
bpk-button--primary-on-light
bpk-private-button-primary-on-light-disabled-foreground-day
$bpk-private-button-primary-on-light-disabled-foreground-day: rgba(0, 0, 0, 0.2) !default;
Used by
- [mixin]
bpk-button--primary-on-light
bpk-private-button-primary-on-dark-normal-background-night
$bpk-private-button-primary-on-dark-normal-background-night: rgb(255, 255, 255) !default;
bpk-private-button-featured-pressed-background-day
$bpk-private-button-featured-pressed-background-day: rgb(2, 77, 175) !default;
Used by
- [mixin]
bpk-button--featured
- [mixin]
bpk-button--featured
bpk-private-button-primary-on-dark-disabled-foreground-night
$bpk-private-button-primary-on-dark-disabled-foreground-night: rgba(0, 0, 0, 0.2) !default;
bpk-private-button-secondary-on-dark-disabled-background-day
$bpk-private-button-secondary-on-dark-disabled-background-day: rgb(11, 18, 29) !default;
Used by
- [mixin]
bpk-button--secondary-on-dark
bpk-private-button-secondary-on-dark-pressed-background-night
$bpk-private-button-secondary-on-dark-pressed-background-night: rgb(1, 9, 19) !default;
bpk-private-button-destructive-normal-foreground-day
$bpk-private-button-destructive-normal-foreground-day: rgb(200, 4, 86) !default;
Used by
- [mixin]
bpk-button--destructive
bpk-private-button-primary-on-dark-normal-background-day
$bpk-private-button-primary-on-dark-normal-background-day: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--primary-on-dark
bpk-private-button-primary-on-dark-disabled-foreground-day
$bpk-private-button-primary-on-dark-disabled-foreground-day: rgba(0, 0, 0, 0.2) !default;
Used by
- [mixin]
bpk-button--primary-on-dark
bpk-private-button-link-pressed-foreground-night
$bpk-private-button-link-pressed-foreground-night: rgb(209, 247, 255) !default;
bpk-private-button-secondary-on-dark-pressed-background-day
$bpk-private-button-secondary-on-dark-pressed-background-day: rgb(1, 9, 19) !default;
Used by
- [mixin]
bpk-button--secondary-on-dark
- [mixin]
bpk-button--secondary-on-dark
bpk-private-button-primary-on-light-disabled-background-night
$bpk-private-button-primary-on-light-disabled-background-night: rgb(224, 227, 229) !default;
bpk-private-button-link-pressed-foreground-day
$bpk-private-button-link-pressed-foreground-day: rgb(21, 70, 121) !default;
Used by
- [mixin]
bpk-button--link
- [mixin]
bpk-button--link
bpk-private-button-destructive-normal-background-night
$bpk-private-button-destructive-normal-background-night: rgb(36, 51, 70) !default;
bpk-private-button-primary-normal-background-night
$bpk-private-button-primary-normal-background-night: rgb(5, 65, 132) !default;
bpk-private-button-destructive-pressed-background-night
$bpk-private-button-destructive-pressed-background-night: rgb(255, 100, 156) !default;
bpk-private-button-primary-pressed-background-night
$bpk-private-button-primary-pressed-background-night: rgb(0, 43, 91) !default;
bpk-private-button-primary-on-light-disabled-background-day
$bpk-private-button-primary-on-light-disabled-background-day: rgb(224, 227, 229) !default;
Used by
- [mixin]
bpk-button--primary-on-light
bpk-private-button-primary-on-dark-disabled-background-night
$bpk-private-button-primary-on-dark-disabled-background-night: rgb(224, 227, 229) !default;
bpk-private-button-primary-normal-background-day
$bpk-private-button-primary-normal-background-day: rgb(5, 32, 60) !default;
Used by
- [mixin]
bpk-button
bpk-private-button-destructive-normal-background-day
$bpk-private-button-destructive-normal-background-day: rgb(224, 227, 229) !default;
Used by
- [mixin]
bpk-button--destructive
bpk-private-button-link-on-dark-pressed-foreground-night
$bpk-private-button-link-on-dark-pressed-foreground-night: rgba(255, 255, 255, 0.5) !default;
bpk-private-button-destructive-pressed-background-day
$bpk-private-button-destructive-pressed-background-day: rgb(200, 4, 86) !default;
Used by
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
bpk-private-button-primary-pressed-background-day
$bpk-private-button-primary-pressed-background-day: rgb(21, 70, 121) !default;
Used by
- [mixin]
bpk-button
- [mixin]
bpk-button
bpk-private-button-primary-on-dark-disabled-background-day
$bpk-private-button-primary-on-dark-disabled-background-day: rgb(224, 227, 229) !default;
Used by
- [mixin]
bpk-button--primary-on-dark
bpk-private-button-link-on-dark-normal-foreground-night
$bpk-private-button-link-on-dark-normal-foreground-night: rgb(255, 255, 255) !default;
bpk-private-button-disabled-background-night
$bpk-private-button-disabled-background-night: rgb(11, 18, 29) !default;
bpk-private-button-secondary-on-dark-normal-background-night
$bpk-private-button-secondary-on-dark-normal-background-night: rgb(36, 51, 70) !default;
bpk-private-button-secondary-on-dark-disabled-foreground-night
$bpk-private-button-secondary-on-dark-disabled-foreground-night: rgba(255, 255, 255, 0.2) !default;
bpk-private-button-link-on-dark-pressed-foreground-day
$bpk-private-button-link-on-dark-pressed-foreground-day: rgba(255, 255, 255, 0.5) !default;
Used by
- [mixin]
bpk-button--link-on-dark
- [mixin]
bpk-button--link-on-dark
bpk-private-button-primary-on-dark-pressed-background-night
$bpk-private-button-primary-on-dark-pressed-background-night: rgb(194, 201, 205) !default;
bpk-private-button-link-on-dark-normal-foreground-day
$bpk-private-button-link-on-dark-normal-foreground-day: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--link-on-dark
- [mixin]
bpk-button--link-on-dark
bpk-private-button-disabled-background-day
$bpk-private-button-disabled-background-day: rgb(224, 227, 229) !default;
Used by
- [mixin]
bpk-button
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--featured
bpk-private-button-secondary-on-dark-normal-background-day
$bpk-private-button-secondary-on-dark-normal-background-day: rgb(36, 51, 70) !default;
Used by
- [mixin]
bpk-button--secondary-on-dark
bpk-private-button-secondary-on-dark-disabled-foreground-day
$bpk-private-button-secondary-on-dark-disabled-foreground-day: rgba(255, 255, 255, 0.2) !default;
Used by
- [mixin]
bpk-button--secondary-on-dark
bpk-private-button-primary-on-dark-pressed-background-day
$bpk-private-button-primary-on-dark-pressed-background-day: rgb(194, 201, 205) !default;
Used by
- [mixin]
bpk-button--primary-on-dark
- [mixin]
bpk-button--primary-on-dark
bpk-private-button-primary-on-light-pressed-background-night
$bpk-private-button-primary-on-light-pressed-background-night: rgb(21, 70, 121) !default;
bpk-private-button-featured-normal-background-night
$bpk-private-button-featured-normal-background-night: rgb(132, 233, 255) !default;
buttons
variables
bpk-button-height
$bpk-button-height: 2.25rem !default;
Used by
- [mixin]
bpk-button
- [mixin]
bpk-button--icon-only
bpk-button-border-radius
$bpk-button-border-radius: .5rem !default;
Used by
- [mixin]
bpk-button
- [mixin]
bpk-button--icon-only
- [mixin]
bpk-button--large-icon-only
bpk-button-large-height
$bpk-button-large-height: 3rem !default;
Used by
- [mixin]
bpk-button--large
- [mixin]
bpk-button--large-icon-only
bpk-private-button-line-height
$bpk-private-button-line-height: 1.5rem !default;
Used by
- [mixin]
_bpk-svg--align-to-large-button
bpk-private-card-button-contained-color
$bpk-private-card-button-contained-color: rgba(255, 255, 255, 0.8) !default;
mixins
bpk-button
@mixin bpk-button() { ... }
Description
Standard button.
Parameters
None.
Example
.selector {
@include bpk-button();
}
Requires
- [mixin]
bpk-label-1
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [function]
bpk-spacing-base
- [variable]
bpk-button-height
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-button-border-radius
- [variable]
bpk-text-on-dark-day
- [variable]
bpk-private-button-primary-normal-background-day
- [variable]
bpk-text-on-dark-day
- [variable]
bpk-private-button-primary-pressed-background-day
- [variable]
bpk-text-on-dark-day
- [variable]
bpk-private-button-primary-pressed-background-day
- [variable]
bpk-private-button-disabled-background-day
- [variable]
bpk-text-disabled-day
Used by
- [mixin]
bpk-button--large
- [mixin]
bpk-button--primary-on-dark
- [mixin]
bpk-button--primary-on-light
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary-on-dark
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--link
- [css]
/// @example scss /// .selector
- [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
- [function]
bpk-spacing-base
- [variable]
bpk-button-large-height
- [variable]
bpk-one-pixel-rem
- [mixin]
bpk-button
Used by
- [mixin]
bpk-button--large-icon-only
- [mixin]
bpk-button--featured
bpk-button--primary-on-dark
@mixin bpk-button--primary-on-dark() { ... }
Description
PrimaryOnDark button. Modifies the bpk-button mixin.
Parameters
None.
Example
.selector {
@include bpk-button();
@include bpk-button--primary-on-dark();
}
Requires
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [variable]
bpk-text-on-light-day
- [variable]
bpk-private-button-primary-on-dark-normal-background-day
- [variable]
bpk-text-on-light-day
- [variable]
bpk-private-button-primary-on-dark-pressed-background-day
- [variable]
bpk-text-on-light-day
- [variable]
bpk-private-button-primary-on-dark-pressed-background-day
- [variable]
bpk-private-button-primary-on-dark-disabled-background-day
- [variable]
bpk-private-button-primary-on-dark-disabled-foreground-day
- [mixin]
bpk-button
bpk-button--primary-on-light
@mixin bpk-button--primary-on-light() { ... }
Description
PrimaryOnLight button. Modifies the bpk-button mixin.
Parameters
None.
Example
.selector {
@include bpk-button();
@include bpk-button--primary-on-light();
}
Requires
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [variable]
bpk-text-on-dark-night
- [variable]
bpk-private-button-primary-on-light-normal-background-day
- [variable]
bpk-text-on-dark-night
- [variable]
bpk-private-button-primary-on-light-pressed-background-day
- [variable]
bpk-text-on-dark-night
- [variable]
bpk-private-button-primary-on-light-pressed-background-day
- [variable]
bpk-private-button-primary-on-light-disabled-background-day
- [variable]
bpk-private-button-primary-on-light-disabled-foreground-day
- [mixin]
bpk-button
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-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [variable]
bpk-text-primary-day
- [variable]
bpk-private-button-secondary-normal-background-day
- [variable]
bpk-text-primary-day
- [variable]
bpk-private-button-secondary-pressed-background-day
- [variable]
bpk-text-primary-day
- [variable]
bpk-private-button-secondary-pressed-background-day
- [variable]
bpk-private-button-disabled-background-day
- [variable]
bpk-text-disabled-day
- [mixin]
bpk-button
Used by
- [mixin]
bpk-button--destructive
bpk-button--secondary-on-dark
@mixin bpk-button--secondary-on-dark() { ... }
Description
Secondary on dark button. Modifies the bpk-button mixin.
Parameters
None.
Example
.selector {
@include bpk-button();
@include bpk-button--secondary-on-dark();
}
Requires
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [variable]
bpk-text-on-dark-day
- [variable]
bpk-private-button-secondary-on-dark-normal-background-day
- [variable]
bpk-text-on-dark-day
- [variable]
bpk-private-button-secondary-on-dark-pressed-background-day
- [variable]
bpk-text-on-dark-day
- [variable]
bpk-private-button-secondary-on-dark-pressed-background-day
- [variable]
bpk-private-button-secondary-on-dark-disabled-background-day
- [variable]
bpk-private-button-secondary-on-dark-disabled-foreground-day
- [mixin]
bpk-button
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-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [variable]
bpk-private-button-destructive-normal-foreground-day
- [variable]
bpk-private-button-destructive-normal-background-day
- [variable]
bpk-text-primary-inverse-day
- [variable]
bpk-private-button-destructive-pressed-background-day
- [variable]
bpk-text-primary-inverse-day
- [variable]
bpk-private-button-destructive-pressed-background-day
- [variable]
bpk-private-button-disabled-background-day
- [variable]
bpk-text-disabled-day
- [mixin]
bpk-button
- [mixin]
bpk-button--secondary
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-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-private-button-link-normal-foreground-day
- [variable]
bpk-private-button-link-pressed-foreground-day
- [variable]
bpk-private-button-link-pressed-foreground-day
- [variable]
bpk-text-disabled-day
- [mixin]
bpk-button
Used by
- [mixin]
bpk-button--link-on-dark
bpk-button--link-on-dark
@mixin bpk-button--link-on-dark() { ... }
Parameters
None.
Example
.selector {
@include bpk-button();
@include bpk-button--link-on-dark();
}
Requires
- [mixin]
bpk-button--link
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [mixin]
bpk-themeable-property
- [variable]
bpk-private-button-link-on-dark-normal-foreground-day
- [variable]
bpk-private-button-link-on-dark-pressed-foreground-day
- [variable]
bpk-private-button-link-on-dark-pressed-foreground-day
- [variable]
bpk-private-button-link-on-dark-normal-foreground-day
- [variable]
bpk-private-button-link-on-dark-disabled-foreground-day
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-height
- [variable]
bpk-icon-size-sm
- [variable]
bpk-button-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-height
- [variable]
bpk-icon-size-lg
- [variable]
bpk-button-border-radius
- [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
- [variable]
bpk-text-primary-inverse-day
- [variable]
bpk-private-button-featured-normal-background-day
- [variable]
bpk-text-primary-inverse-day
- [variable]
bpk-private-button-featured-pressed-background-day
- [variable]
bpk-text-primary-inverse-day
- [variable]
bpk-private-button-featured-pressed-background-day
- [variable]
bpk-private-button-disabled-background-day
- [variable]
bpk-text-disabled-day
- [mixin]
bpk-button
- [mixin]
bpk-button--large
css
/// @example scss /// .selector
/// @example scss
/// .selector { ... }
Description
Link on dark button. Modifies the bpk-button & bpk-button--link mixins.
calendar
variables
bpk-calendar-day-spacing
$bpk-calendar-day-spacing: .5rem !default;
bpk-calendar-day-size
$bpk-calendar-day-size: 2.25rem !default;
canvas-colors
variables
bpk-canvas-day
$bpk-canvas-day: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-table__cell--head-alternate
bpk-canvas-night
$bpk-canvas-night: rgb(1, 9, 19) !default;
bpk-canvas-contrast-day
$bpk-canvas-contrast-day: rgb(239, 241, 242) !default;
Used by
- [mixin]
bpk-table__cell--head
- [mixin]
bpk-code--alternate
bpk-canvas-contrast-night
$bpk-canvas-contrast-night: rgb(1, 9, 19) !default;
cards
variables
bpk-card-background-color
$bpk-card-background-color: rgb(255, 255, 255) !default;
Used by
bpk-card-padding
$bpk-card-padding: 1rem !default;
Used by
- [mixin]
bpk-card--padded
- [mixin]
bpk-panel--padded
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-text-primary-day
- [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
chip-colors
variables
bpk-private-chip-on-dark-pressed-stroke-day
$bpk-private-chip-on-dark-pressed-stroke-day: rgb(255, 255, 255) !default;
bpk-private-chip-on-dark-pressed-stroke-night
$bpk-private-chip-on-dark-pressed-stroke-night: rgb(5, 65, 132) !default;
bpk-private-chip-on-dark-on-background-day
$bpk-private-chip-on-dark-on-background-day: rgb(255, 255, 255) !default;
bpk-private-chip-on-dark-on-background-night
$bpk-private-chip-on-dark-on-background-night: rgb(5, 65, 132) !default;
bpk-private-chip-disabled-background-day
$bpk-private-chip-disabled-background-day: rgb(224, 227, 229) !default;
bpk-private-chip-disabled-background-night
$bpk-private-chip-disabled-background-night: rgb(11, 18, 29) !default;
bpk-private-chip-on-dark-on-dismiss-icon-day
$bpk-private-chip-on-dark-on-dismiss-icon-day: rgb(84, 88, 96) !default;
bpk-private-chip-on-dark-on-dismiss-icon-night
$bpk-private-chip-on-dark-on-dismiss-icon-night: rgba(255, 255, 255, 0.5) !default;
colors
variables
bpk-color-sky-blue-shade-03
$bpk-color-sky-blue-shade-03: rgb(2, 18, 44) !default;
bpk-color-primary-gradient-light
$bpk-color-primary-gradient-light: rgb(0, 98, 227) !default;
bpk-color-erfoud
$bpk-color-erfoud: rgb(255, 181, 77) !default;
bpk-color-valensole
$bpk-color-valensole: rgb(165, 155, 200) !default;
bpk-color-monteverde
$bpk-color-monteverde: rgb(0, 166, 152) !default;
bpk-color-sky-gray-tint-01
$bpk-color-sky-gray-tint-01: rgb(68, 69, 96) !default;
bpk-color-black
$bpk-color-black: rgb(1, 9, 19) !default;
bpk-color-sky-gray-tint-02
$bpk-color-sky-gray-tint-02: rgb(104, 105, 127) !default;
bpk-color-sagano
$bpk-color-sagano: rgb(208, 238, 236) !default;
bpk-color-sky-gray-tint-03
$bpk-color-sky-gray-tint-03: rgb(143, 144, 160) !default;
bpk-color-sky-gray-tint-04
$bpk-color-sky-gray-tint-04: rgb(178, 178, 191) !default;
bpk-color-harbour
$bpk-color-harbour: rgb(246, 221, 225) !default;
bpk-color-sky-gray-tint-05
$bpk-color-sky-gray-tint-05: rgb(205, 205, 215) !default;
bpk-color-sky-gray-tint-06
$bpk-color-sky-gray-tint-06: rgb(221, 221, 229) !default;
bpk-color-black-tint-01
$bpk-color-black-tint-01: rgb(29, 27, 32) !default;
bpk-color-sky-gray-tint-07
$bpk-color-sky-gray-tint-07: rgb(241, 242, 248) !default;
bpk-color-black-tint-02
$bpk-color-black-tint-02: rgb(44, 44, 46) !default;
bpk-color-abisko
$bpk-color-abisko: rgb(90, 72, 155) !default;
bpk-color-black-tint-03
$bpk-color-black-tint-03: rgb(58, 58, 60) !default;
bpk-color-black-tint-04
$bpk-color-black-tint-04: rgb(72, 72, 74) !default;
bpk-color-white
$bpk-color-white: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-label--white
bpk-color-black-tint-05
$bpk-color-black-tint-05: rgb(99, 99, 102) !default;
bpk-color-black-tint-06
$bpk-color-black-tint-06: rgb(142, 142, 147) !default;
bpk-color-panjin
$bpk-color-panjin: rgb(209, 67, 91) !default;
bpk-color-kolkata
$bpk-color-kolkata: rgb(255, 148, 0) !default;
bpk-color-glencoe
$bpk-color-glencoe: rgb(115, 206, 198) !default;
bpk-color-tochigi
$bpk-color-tochigi: rgb(225, 221, 236) !default;
bpk-color-petra
$bpk-color-petra: rgb(255, 171, 149) !default;
bpk-color-sky-blue
$bpk-color-sky-blue: rgb(0, 98, 227) !default;
Used by
- [mixin]
bpk-apply-primary-color-to
bpk-color-bagan
$bpk-color-bagan: rgb(255, 235, 208) !default;
bpk-color-hillier
$bpk-color-hillier: rgb(225, 139, 150) !default;
bpk-color-sky-blue-tint-01
$bpk-color-sky-blue-tint-01: rgb(109, 159, 235) !default;
bpk-color-sky-blue-tint-02
$bpk-color-sky-blue-tint-02: rgb(157, 192, 242) !default;
bpk-color-bunol
$bpk-color-bunol: rgb(255, 123, 89) !default;
bpk-color-sky-blue-tint-03
$bpk-color-sky-blue-tint-03: rgb(205, 223, 248) !default;
bpk-color-sky-gray
$bpk-color-sky-gray: rgb(17, 18, 54) !default;
bpk-color-nara
$bpk-color-nara: rgb(255, 231, 224) !default;
bpk-color-sky-blue-shade-01
$bpk-color-sky-blue-shade-01: rgb(8, 78, 178) !default;
bpk-color-sky-blue-shade-02
$bpk-color-sky-blue-shade-02: rgb(4, 39, 89) !default;
bpk-line-dark-color
$bpk-line-dark-color: rgb(72, 72, 74) !default;
bpk-background-alternative-secondary-dark-color
$bpk-background-alternative-secondary-dark-color: rgb(29, 27, 32) !default;
bpk-background-light-color
$bpk-background-light-color: rgb(255, 255, 255) !default;
bpk-background-dark-color
$bpk-background-dark-color: rgb(0, 0, 0) !default;
bpk-background-alternative-secondary-light-color
$bpk-background-alternative-secondary-light-color: rgb(255, 255, 255) !default;
bpk-color-system-green
$bpk-color-system-green: rgb(0, 166, 152) !default;
bpk-line-light-color
$bpk-line-light-color: rgb(205, 205, 215) !default;
bpk-background-tertiary-dark-color
$bpk-background-tertiary-dark-color: rgb(44, 44, 46) !default;
bpk-background-secondary-dark-color
$bpk-background-secondary-dark-color: rgb(29, 27, 32) !default;
bpk-background-alternative-light-color
$bpk-background-alternative-light-color: rgb(241, 242, 248) !default;
bpk-primary-dark-color
$bpk-primary-dark-color: rgb(109, 159, 235) !default;
bpk-color-system-red
$bpk-color-system-red: rgb(209, 67, 91) !default;
bpk-background-alternative-dark-color
$bpk-background-alternative-dark-color: rgb(0, 0, 0) !default;
bpk-primary-light-color
$bpk-primary-light-color: rgb(0, 98, 227) !default;
bpk-background-tertiary-light-color
$bpk-background-tertiary-light-color: rgb(255, 255, 255) !default;
bpk-background-secondary-light-color
$bpk-background-secondary-light-color: rgb(241, 242, 248) !default;
bpk-primary-gradient
$bpk-primary-gradient: #0062E3 !default;
core-colors
variables
bpk-core-eco-day
$bpk-core-eco-day: rgb(15, 161, 169) !default;
bpk-core-eco-night
$bpk-core-eco-night: rgb(15, 161, 169) !default;
bpk-core-accent-day
$bpk-core-accent-day: rgb(0, 98, 227) !default;
Used by
- [mixin]
bpk-badge--brand
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-radio__input
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
bpk-core-accent-night
$bpk-core-accent-night: rgb(132, 233, 255) !default;
bpk-core-primary-day
$bpk-core-primary-day: rgb(5, 32, 60) !default;
Used by
- [mixin]
bpk-badge--strong
bpk-core-primary-night
$bpk-core-primary-night: rgb(5, 65, 132) !default;
flare
variables
bpk-flare-height-desktop
$bpk-flare-height-desktop: 1.5rem !default;
bpk-flare-height-mobile
$bpk-flare-height-mobile: 1rem !default;
bpk-flare-corner-radius
$bpk-flare-corner-radius: 1.3125rem !default;
font-weights
variables
bpk-font-weight-book
$bpk-font-weight-book: 400 !default;
Used by
- [mixin]
bpk-text--xs
- [mixin]
bpk-text--sm
- [mixin]
bpk-text--base
- [mixin]
bpk-text--lg
- [mixin]
bpk-text--xl
- [mixin]
bpk-caption
- [mixin]
bpk-footnote
- [mixin]
bpk-body-default
- [mixin]
bpk-body-longform
- [mixin]
bpk-subheading
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--xxl
- [mixin]
bpk-text--xxxl
- [mixin]
bpk-text--xxxxl
- [mixin]
bpk-text--xxxxxl
- [mixin]
bpk-text--bold
- [mixin]
bpk-label-1
- [mixin]
bpk-label-2
- [mixin]
bpk-label-3
- [mixin]
bpk-hero-1
- [mixin]
bpk-hero-2
- [mixin]
bpk-hero-3
- [mixin]
bpk-hero-4
- [mixin]
bpk-hero-5
- [mixin]
bpk-heading-1
- [mixin]
bpk-heading-2
- [mixin]
bpk-heading-3
- [mixin]
bpk-heading-4
- [mixin]
bpk-heading-5
forms
variables
bpk-input-large-height
$bpk-input-large-height: 3rem !default;
Used by
- [mixin]
bpk-input__clear-button
- [mixin]
bpk-input--large
- [mixin]
bpk-select--large
bpk-input-border
$bpk-input-border: solid .0625rem #C2C9CD !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-textarea
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-input-background
$bpk-input-background: #ffffff !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-input
- [mixin]
bpk-input--valid
- [mixin]
bpk-input--invalid
- [mixin]
bpk-input--clearable
- [mixin]
bpk-textarea
- [mixin]
bpk-textarea
- [mixin]
bpk-textarea--invalid
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-label-disabled-color
$bpk-label-disabled-color: rgba(0, 0, 0, 0.2) !default;
Used by
- [mixin]
bpk-checkbox--disabled
- [mixin]
bpk-radio--disabled
- [mixin]
bpk-label--disabled
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-select-disabled-border-color
$bpk-select-disabled-border-color: rgb(224, 227, 229) !default;
bpk-input-disabled-color
$bpk-input-disabled-color: rgba(0, 0, 0, 0.2) !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-textarea
bpk-input-padding-x
$bpk-input-padding-x: .5rem !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-input--valid
- [mixin]
bpk-input--invalid
- [mixin]
bpk-input--clearable
- [mixin]
bpk-textarea
- [mixin]
bpk-textarea--invalid
bpk-input-padding-y
$bpk-input-padding-y: .5rem !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-textarea
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-form-validation-color
$bpk-form-validation-color: rgb(231, 8, 102) !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-height
$bpk-input-height: 2.25rem !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-input__clear-button
- [mixin]
bpk-select
- [mixin]
bpk-select
- [mixin]
bpk-select
- [mixin]
bpk-select--invalid
bpk-input-disabled-border-color
$bpk-input-disabled-border-color: rgb(239, 241, 242) !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-textarea
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-text-primary-day
- [variable]
bpk-text-secondary-day
- [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
- [function]
bpk-spacing-xl
- [function]
bpk-spacing-md
- [function]
bpk-spacing-xl
- [function]
bpk-spacing-md
- [variable]
bpk-input-background
- [variable]
bpk-icon-size-sm
- [variable]
bpk-icon-size-sm
- [variable]
bpk-input-padding-x
- [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
- [function]
bpk-spacing-xl
- [function]
bpk-spacing-md
- [function]
bpk-spacing-xl
- [function]
bpk-spacing-md
- [variable]
bpk-input-background
- [variable]
bpk-icon-size-sm
- [variable]
bpk-icon-size-sm
- [variable]
bpk-form-validation-color
- [variable]
bpk-input-padding-x
- [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
- [function]
bpk-spacing-xl
- [function]
bpk-spacing-xl
- [variable]
bpk-input-padding-x
- [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
- [function]
bpk-spacing-md
- [function]
bpk-spacing-md
- [function]
bpk-spacing-base
- [function]
bpk-spacing-base
- [variable]
bpk-input-height
- [variable]
bpk-input-large-height
- [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
- [function]
bpk-spacing-base
- [function]
bpk-spacing-base
- [function]
bpk-spacing-xxl
- [function]
bpk-spacing-base
- [function]
bpk-spacing-base
- [function]
bpk-spacing-xxl
- [function]
bpk-spacing-base
- [variable]
bpk-input-large-height
- [mixin]
bpk-input
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
- [function]
bpk-spacing-md
- [function]
bpk-spacing-md
- [function]
bpk-spacing-xl
- [function]
bpk-spacing-md
- [function]
bpk-spacing-md
- [function]
bpk-spacing-xl
- [function]
bpk-spacing-md
- [function]
bpk-spacing-md
- [function]
bpk-spacing-md
- [variable]
bpk-input-height
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-line-day
- [variable]
bpk-select-border-radius
- [variable]
bpk-surface-default-day
- [variable]
bpk-input-height
- [variable]
bpk-text-primary-day
- [variable]
bpk-line-height-base
- [variable]
bpk-select-border-width
- [variable]
bpk-surface-highlight-day
- [variable]
bpk-surface-default-day
- [variable]
bpk-input-height
- [variable]
bpk-text-disabled-day
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
- [function]
bpk-spacing-md
- [function]
bpk-spacing-base
- [function]
bpk-spacing-xxl
- [function]
bpk-spacing-base
- [function]
bpk-spacing-base
- [function]
bpk-spacing-xxl
- [function]
bpk-spacing-base
- [variable]
bpk-input-large-height
- [variable]
bpk-surface-default-day
- [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
- [function]
bpk-spacing-xl
- [function]
bpk-spacing-md
- [function]
bpk-spacing-md
- [function]
bpk-spacing-xl
- [function]
bpk-spacing-md
- [variable]
bpk-surface-default-day
- [variable]
bpk-input-height
- [variable]
bpk-form-validation-color
- [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-body-default
- [function]
bpk-spacing-lg
- [function]
bpk-spacing-sm
- [function]
bpk-spacing-lg
- [function]
bpk-spacing-sm
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-caption
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-surface-default-day
- [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-text-error-day
- [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
- [function]
bpk-spacing-md
- [function]
bpk-spacing-lg
- [function]
bpk-spacing-sm
- [function]
bpk-spacing-sm
- [function]
bpk-spacing-md
- [function]
bpk-spacing-sm
- [function]
bpk-spacing-md
- [variable]
bpk-border-size-lg
- [variable]
bpk-text-primary-inverse-day
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-text-disabled-day
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
- [function]
bpk-spacing-lg
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-line-height-base
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-text-secondary-day
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-core-accent-day
- [variable]
bpk-core-accent-day
- [variable]
bpk-text-disabled-day
- [variable]
bpk-text-disabled-day
[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-lg
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
- [function]
bpk-spacing-lg
- [function]
bpk-spacing-sm
- [function]
bpk-spacing-lg
- [function]
bpk-spacing-sm
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-text-primary-inverse-day
- [variable]
bpk-text-primary-inverse-day
- [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-text-error-day
- [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
- [function]
bpk-spacing-lg
- [variable]
bpk-one-pixel-rem
- [variable]
bpk-text-secondary-day
- [variable]
bpk-core-accent-day
- [variable]
bpk-text-disabled-day
- [variable]
bpk-text-disabled-day
bpk-label
@mixin bpk-label() { ... }
Description
Form label.
Parameters
None.
Example
.selector {
@include bpk-label();
}
Requires
- [variable]
bpk-text-primary-day
- [variable]
bpk-font-size-xs
- [variable]
bpk-font-weight-bold
- [variable]
bpk-line-height-xs
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
- [function]
bpk-spacing-base
- [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-form-validation__container
@mixin bpk-form-validation__container() { ... }
Description
Form validation container.
Parameters
None.
Example
.selector {
@include bpk-form-validation__container();
}
Requires
- [function]
bpk-spacing-md
- [variable]
bpk-font-size-xs
bpk-textarea
@mixin bpk-textarea() { ... }
Description
Form textarea.
Parameters
None.
Example
.selector {
@include bpk-textarea();
}
Requires
- [function]
bpk-spacing-md
- [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-text-primary-day
- [variable]
bpk-text-secondary-day
- [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
- [function]
bpk-spacing-xl
- [function]
bpk-spacing-md
- [function]
bpk-spacing-xl
- [function]
bpk-spacing-md
- [function]
bpk-spacing-base
- [function]
bpk-spacing-xxl
- [function]
bpk-spacing-base
- [variable]
bpk-input-background
- [variable]
bpk-form-validation-color
- [variable]
bpk-input-padding-x
- [mixin]
bpk-textarea
horizontal-nav
icons
variables
bpk-icon-size-sm
$bpk-icon-size-sm: 1rem !default;
Used by
- [mixin]
bpk-button--icon-only
- [mixin]
bpk-input--valid
- [mixin]
bpk-input--valid
- [mixin]
bpk-input--invalid
- [mixin]
bpk-input--invalid
- [mixin]
bpk-icon
bpk-icon-size-lg
$bpk-icon-size-lg: 1.5rem !default;
Used by
- [mixin]
bpk-button--large-icon-only
- [mixin]
_bpk-svg--align-to-large-button
- [mixin]
bpk-icon
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-letter-spacing-tight
$bpk-letter-spacing-tight: -0.02em !default;
Used by
- [mixin]
bpk-text--xxxxl
- [mixin]
bpk-text--xxxxxl
- [mixin]
bpk-hero-1
- [mixin]
bpk-hero-2
- [mixin]
bpk-hero-3
- [mixin]
bpk-hero-4
- [mixin]
bpk-hero-5
line-colors
variables
bpk-line-on-dark-night
$bpk-line-on-dark-night: rgb(68, 80, 95) !default;
bpk-line-on-dark-day
$bpk-line-on-dark-day: rgba(255, 255, 255, 0.5) !default;
bpk-line-night
$bpk-line-night: rgb(68, 80, 95) !default;
bpk-line-day
$bpk-line-day: rgb(194, 201, 205) !default;
Used by
- [mixin]
bpk-select
- [mixin]
bpk-table
- [mixin]
bpk-table--alternate
- [mixin]
bpk-code__pre--alternate
map-marker-colors
variables
bpk-private-map-previous-selection-day
$bpk-private-map-previous-selection-day: rgb(207, 228, 255) !default;
bpk-private-map-cluster-pin-night
$bpk-private-map-cluster-pin-night: rgb(255, 255, 255) !default;
bpk-private-map-cluster-pin-previous-selection-night
$bpk-private-map-cluster-pin-previous-selection-night: rgb(148, 195, 255) !default;
bpk-private-map-cluster-pin-day
$bpk-private-map-cluster-pin-day: rgb(5, 32, 60) !default;
bpk-private-map-cluster-pin-previous-selection-day
$bpk-private-map-cluster-pin-previous-selection-day: rgb(148, 195, 255) !default;
bpk-private-map-marker-viewed-foreground-night
$bpk-private-map-marker-viewed-foreground-night: rgba(0, 0, 0, 0.8) !default;
bpk-private-map-marker-viewed-foreground-day
$bpk-private-map-marker-viewed-foreground-day: rgba(255, 255, 255, 0.8) !default;
bpk-private-map-poi-pin-night
$bpk-private-map-poi-pin-night: rgb(142, 71, 186) !default;
bpk-private-map-previous-selection-night
$bpk-private-map-previous-selection-night: rgb(207, 228, 255) !default;
bpk-private-map-poi-pin-day
$bpk-private-map-poi-pin-day: rgb(142, 71, 186) !default;
marcomms-colors
variables
bpk-marcomms-berry
$bpk-marcomms-berry: rgb(231, 8, 102) !default;
bpk-marcomms-charcoal
$bpk-marcomms-charcoal: rgb(22, 22, 22) !default;
bpk-marcomms-orange
$bpk-marcomms-orange: rgb(255, 123, 89) !default;
bpk-marcomms-grey-40
$bpk-marcomms-grey-40: rgb(84, 88, 96) !default;
bpk-marcomms-blue-bright
$bpk-marcomms-blue-bright: rgb(161, 238, 255) !default;
bpk-marcomms-yellow
$bpk-marcomms-yellow: rgb(254, 235, 135) !default;
bpk-marcomms-green-bright
$bpk-marcomms-green-bright: rgb(147, 255, 222) !default;
bpk-marcomms-pink
$bpk-marcomms-pink: rgb(255, 163, 229) !default;
bpk-marcomms-sky-blue
$bpk-marcomms-sky-blue: rgb(0, 98, 227) !default;
bpk-marcomms-dark-sky
$bpk-marcomms-dark-sky: rgb(5, 32, 60) !default;
bpk-marcomms-purple
$bpk-marcomms-purple: rgb(142, 71, 186) !default;
bpk-marcomms-white
$bpk-marcomms-white: rgb(255, 255, 255) !default;
bpk-marcomms-yellow-muted
$bpk-marcomms-yellow-muted: rgb(255, 247, 207) !default;
bpk-marcomms-pink-muted
$bpk-marcomms-pink-muted: rgb(255, 233, 249) !default;
bpk-marcomms-green-muted
$bpk-marcomms-green-muted: rgb(212, 255, 242) !default;
bpk-marcomms-blue-muted
$bpk-marcomms-blue-muted: rgb(217, 248, 255) !default;
bpk-marcomms-eco-green
$bpk-marcomms-eco-green: rgb(15, 161, 169) !default;
modals
variables
bpk-modal-background-color
$bpk-modal-background-color: rgb(255, 255, 255) !default;
bpk-modal-initial-opacity
$bpk-modal-initial-opacity: 0 !default;
bpk-modal-opacity
$bpk-modal-opacity: 1 !default;
bpk-modal-max-width
$bpk-modal-max-width: 32rem !default;
bpk-modal-wide-max-width
$bpk-modal-wide-max-width: 64rem !default;
bpk-modal-content-padding
$bpk-modal-content-padding: 1rem !default;
notifications
variables
bpk-banner-alert-header-expandable-hover-background-color
$bpk-banner-alert-header-expandable-hover-background-color: rgb(239, 241, 242) !default;
bpk-banner-alert-header-expandable-active-background-color
$bpk-banner-alert-header-expandable-active-background-color: rgb(239, 241, 242) !default;
bpk-banner-alert-primary-color
$bpk-banner-alert-primary-color: rgb(0, 98, 227) !default;
bpk-banner-alert-success-color
$bpk-banner-alert-success-color: rgb(12, 131, 138) !default;
bpk-banner-alert-warn-color
$bpk-banner-alert-warn-color: rgb(245, 93, 66) !default;
bpk-banner-alert-error-color
$bpk-banner-alert-error-color: rgb(231, 8, 102) !default;
bpk-banner-alert-neutral-color
$bpk-banner-alert-neutral-color: rgb(194, 201, 205) !default;
panels
variables
bpk-panel-border-color
$bpk-panel-border-color: rgb(194, 201, 205) !default;
Used by
- [mixin]
bpk-panel
- [mixin]
bpk-panel--full-width
- [mixin]
bpk-panel--full-width
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-card-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-card-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
radii
variables
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
bpk-border-radius-sm
$bpk-border-radius-sm: .5rem !default;
Used by
- [mixin]
bpk-border-radius-sm
bpk-border-radius-md
$bpk-border-radius-md: .75rem !default;
Used by
- [mixin]
bpk-border-radius-md
bpk-border-radius-lg
$bpk-border-radius-lg: 1.5rem !default;
Used by
- [mixin]
_bpk-radio-border
- [mixin]
bpk-border-radius-lg
bpk-border-radius-xl
$bpk-border-radius-xl: 2.5rem !default;
Used by
- [mixin]
bpk-border-radius-xl
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-lg
@mixin bpk-border-radius-lg() { ... }
Description
Large border radius.
Parameters
None.
Example
.selector {
@include bpk-border-radius-lg();
}
Requires
- [variable]
bpk-border-radius-lg
bpk-border-radius-xl
@mixin bpk-border-radius-xl() { ... }
Description
Extra large border radius.
Parameters
None.
Example
.selector {
@include bpk-border-radius-xl();
}
Requires
- [variable]
bpk-border-radius-xl
scrim-colors
variables
bpk-scrim-day
$bpk-scrim-day: rgba(0, 0, 0, 0.7) !default;
bpk-scrim-night
$bpk-scrim-night: rgba(0, 0, 0, 0.7) !default;
scroll-indicator
mixins
[private] _bpk-scroll-indicator
@mixin _bpk-scroll-indicator() { ... }
Description
Scroll indicator utility.
Parameters
None.
Requires
- [function]
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
skeleton-colors
variables
bpk-private-skeleton-shimmer-start-end-day
$bpk-private-skeleton-shimmer-start-end-day: rgba(255, 255, 255, 0) !default;
bpk-private-skeleton-shimmer-start-end-night
$bpk-private-skeleton-shimmer-start-end-night: rgba(0, 0, 0, 0) !default;
bpk-private-skeleton-shimmer-center-day
$bpk-private-skeleton-shimmer-center-day: rgba(255, 255, 255, 0.6) !default;
bpk-private-skeleton-shimmer-center-night
$bpk-private-skeleton-shimmer-center-night: rgba(0, 0, 0, 0.2) !default;
slider-colors
variables
bpk-private-slider-selected-day
$bpk-private-slider-selected-day: rgb(21, 70, 121) !default;
spacings
functions
bpk-spacing-xxxxl
@function bpk-spacing-xxxxl() { ... }
Parameters
None.
bpk-spacing-xxl
@function bpk-spacing-xxl() { ... }
Parameters
None.
Used by
- [mixin]
bpk-input--large
- [mixin]
bpk-input--large
- [mixin]
bpk-select--large
- [mixin]
bpk-select--large
- [mixin]
bpk-textarea--invalid
- [mixin]
bpk-touch-tappable
- [mixin]
bpk-touch-tappable
- [mixin]
bpk-touch-tappable
- [mixin]
bpk-touch-tappable
bpk-spacing-md
@function bpk-spacing-md() { ... }
Parameters
None.
Used by
- [mixin]
bpk-badge
- [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
- [mixin]
bpk-select
- [mixin]
bpk-select
- [mixin]
bpk-select--large
- [mixin]
bpk-select--invalid
- [mixin]
bpk-select--invalid
- [mixin]
bpk-select--invalid
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-form-validation__container
- [mixin]
bpk-textarea
- [mixin]
bpk-textarea--invalid
- [mixin]
bpk-textarea--invalid
- [mixin]
bpk-list--nested
- [mixin]
bpk-table
bpk-spacing-sm
@function bpk-spacing-sm() { ... }
Parameters
None.
Used by
- [mixin]
bpk-badge
- [mixin]
bpk-checkbox
- [mixin]
bpk-checkbox
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-radio
- [mixin]
bpk-radio
- [mixin]
bpk-list--nested
- [mixin]
bpk-list-item
- [mixin]
bpk-code
- [mixin]
bpk-touch-tappable
- [mixin]
bpk-touch-tappable
- [mixin]
bpk-touch-tappable
- [mixin]
bpk-touch-tappable
bpk-spacing-lg
@function bpk-spacing-lg() { ... }
Parameters
None.
Used by
- [mixin]
bpk-checkbox
- [mixin]
bpk-checkbox
- [mixin]
bpk-checkbox__checkmark
- [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
- [mixin]
bpk-blockquote
- [mixin]
bpk-blockquote
bpk-spacing-base
@function bpk-spacing-base() { ... }
Parameters
None.
Used by
- [mixin]
bpk-button
- [mixin]
bpk-button--large
- [mixin]
bpk-input__clear-button
- [mixin]
bpk-input__clear-button
- [mixin]
bpk-input--large
- [mixin]
bpk-input--large
- [mixin]
bpk-input--large
- [mixin]
bpk-input--large
- [mixin]
bpk-input--large
- [mixin]
bpk-select--large
- [mixin]
bpk-select--large
- [mixin]
bpk-select--large
- [mixin]
bpk-select--large
- [mixin]
bpk-form-validation
- [mixin]
bpk-textarea--invalid
- [mixin]
bpk-textarea--invalid
- [mixin]
bpk-spinner
- [mixin]
bpk-spinner
- [mixin]
bpk-paragraph
- [mixin]
bpk-list
- [mixin]
bpk-list
- [mixin]
bpk-table__cell
- [mixin]
bpk-code__pre
- [mixin]
bpk-blockquote
bpk-spacing-xl
@function bpk-spacing-xl() { ... }
Parameters
None.
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
- [mixin]
bpk-select
- [mixin]
bpk-select--invalid
- [mixin]
bpk-select--invalid
- [mixin]
bpk-textarea--invalid
- [mixin]
bpk-textarea--invalid
- [mixin]
_bpk-scroll-indicator
- [mixin]
bpk-spinner--xl
- [mixin]
bpk-spinner--xl
- [mixin]
bpk-blockquote--extra-spacing
- [mixin]
bpk-blockquote--extra-spacing
bpk-spacing-xxxl
@function bpk-spacing-xxxl() { ... }
Parameters
None.
variables
bpk-one-pixel-rem
$bpk-one-pixel-rem: .0625rem !default;
Used by
- [mixin]
bpk-button
- [mixin]
bpk-button--large
- [mixin]
bpk-button--link
- [mixin]
bpk-button--link
- [mixin]
bpk-select
- [mixin]
bpk-select
- [mixin]
bpk-checkbox--invalid
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__checkmark
- [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-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
bpk-spacing-none
$bpk-spacing-none: 0 !default;
Used by
- [mixin]
bpk-paragraph
- [mixin]
bpk-list--nested
- [mixin]
bpk-list--nested
bpk-spacing-icon-text
$bpk-spacing-icon-text: .5rem !default;
status-colors
variables
bpk-status-success-spot-night
$bpk-status-success-spot-night: rgb(98, 241, 198) !default;
bpk-status-success-fill-night
$bpk-status-success-fill-night: rgb(177, 255, 231) !default;
bpk-status-success-spot-day
$bpk-status-success-spot-day: rgb(12, 131, 138) !default;
bpk-status-success-fill-day
$bpk-status-success-fill-day: rgb(212, 255, 242) !default;
Used by
- [mixin]
bpk-badge--success
bpk-status-danger-spot-night
$bpk-status-danger-spot-night: rgb(255, 100, 156) !default;
bpk-status-warning-spot-night
$bpk-status-warning-spot-night: rgb(254, 235, 135) !default;
bpk-status-danger-fill-night
$bpk-status-danger-fill-night: rgb(255, 202, 221) !default;
bpk-status-warning-fill-night
$bpk-status-warning-fill-night: rgb(251, 241, 187) !default;
bpk-status-danger-spot-day
$bpk-status-danger-spot-day: rgb(231, 8, 102) !default;
bpk-status-warning-spot-day
$bpk-status-warning-spot-day: rgb(245, 93, 66) !default;
bpk-status-danger-fill-day
$bpk-status-danger-fill-day: rgb(255, 233, 249) !default;
Used by
- [mixin]
bpk-badge--critical
bpk-status-warning-fill-day
$bpk-status-warning-fill-day: rgb(255, 247, 207) !default;
Used by
- [mixin]
bpk-badge--warning
surface-colors
variables
bpk-surface-default-night
$bpk-surface-default-night: rgb(19, 29, 43) !default;
bpk-surface-default-day
$bpk-surface-default-day: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-badge--inverse
- [mixin]
bpk-select
- [mixin]
bpk-select
- [mixin]
bpk-select--large
- [mixin]
bpk-select--invalid
- [mixin]
bpk-checkbox--white
bpk-surface-contrast-night
$bpk-surface-contrast-night: rgb(1, 9, 19) !default;
bpk-surface-contrast-day
$bpk-surface-contrast-day: rgb(5, 32, 60) !default;
bpk-surface-elevated-night
$bpk-surface-elevated-night: rgb(36, 51, 70) !default;
bpk-surface-subtle-night
$bpk-surface-subtle-night: rgb(36, 51, 70) !default;
bpk-surface-elevated-day
$bpk-surface-elevated-day: rgb(255, 255, 255) !default;
bpk-surface-highlight-night
$bpk-surface-highlight-night: rgb(36, 51, 70) !default;
bpk-surface-subtle-day
$bpk-surface-subtle-day: rgb(227, 240, 255) !default;
bpk-surface-highlight-day
$bpk-surface-highlight-day: rgb(224, 227, 229) !default;
Used by
- [mixin]
bpk-badge--normal
- [mixin]
bpk-select
- [mixin]
bpk-code
- [mixin]
bpk-code__pre
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 |
[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
[private] _bpk-svg--align-to-large-button
@mixin _bpk-svg--align-to-large-button() { ... }
Description
Large button alignment utility.
Parameters
None.
Requires
- [variable]
bpk-private-button-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--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
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
bpk-icon--rtl-support
@mixin bpk-icon--rtl-support() { ... }
Description
RTL support. Modifies the bpk-icon-sm or bpk-icon-lg mixin.
Parameters
None.
Example
.selector {
@include bpk-icon-sm(flight-sky-gray-tint-02);
@include bpk-icon--rtl-support();
}
bpk-spinner
@mixin bpk-spinner($spinner) { ... }
Description
Small spinner.
Parameters
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
- [function]
bpk-spacing-base
- [function]
bpk-spacing-base
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
- [function]
bpk-spacing-lg
- [function]
bpk-spacing-lg
- [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
- [function]
bpk-spacing-xl
- [function]
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-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-text-on-dark-day
$bpk-text-on-dark-day: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-badge--outline
- [mixin]
bpk-badge--outline
- [mixin]
bpk-badge--outline
- [mixin]
bpk-badge--strong
- [mixin]
bpk-badge--strong
- [mixin]
bpk-button
- [mixin]
bpk-button
- [mixin]
bpk-button
- [mixin]
bpk-button--secondary-on-dark
- [mixin]
bpk-button--secondary-on-dark
- [mixin]
bpk-button--secondary-on-dark
- [mixin]
bpk-link--alternate
- [mixin]
bpk-link--alternate
- [mixin]
bpk-link--alternate
- [mixin]
bpk-link--alternate
bpk-text-on-light-night
$bpk-text-on-light-night: rgb(1, 9, 19) !default;
bpk-text-disabled-on-dark-day
$bpk-text-disabled-on-dark-day: rgba(255, 255, 255, 0.5) !default;
bpk-text-on-light-day
$bpk-text-on-light-day: rgb(22, 22, 22) !default;
Used by
- [mixin]
bpk-badge--warning
- [mixin]
bpk-badge--warning
- [mixin]
bpk-badge--success
- [mixin]
bpk-badge--success
- [mixin]
bpk-badge--critical
- [mixin]
bpk-badge--critical
- [mixin]
bpk-button--primary-on-dark
- [mixin]
bpk-button--primary-on-dark
- [mixin]
bpk-button--primary-on-dark
bpk-text-link-night
$bpk-text-link-night: rgb(132, 233, 255) !default;
bpk-text-disabled-night
$bpk-text-disabled-night: rgba(255, 255, 255, 0.2) !default;
bpk-text-primary-dark-color
$bpk-text-primary-dark-color: rgb(255, 255, 255) !default;
bpk-text-link-day
$bpk-text-link-day: rgb(0, 98, 227) !default;
Used by
- [mixin]
bpk-link
- [mixin]
bpk-link
- [mixin]
bpk-link
- [mixin]
bpk-link
- [mixin]
bpk-link--active
- [mixin]
bpk-link--active
- [mixin]
bpk-link--active
bpk-text-quaternary-dark-color
$bpk-text-quaternary-dark-color: rgb(142, 142, 147) !default;
bpk-text-primary-night
$bpk-text-primary-night: rgb(255, 255, 255) !default;
bpk-text-quaternary-light-color
$bpk-text-quaternary-light-color: rgb(143, 144, 160) !default;
bpk-text-disabled-day
$bpk-text-disabled-day: rgba(0, 0, 0, 0.2) !default;
Used by
- [mixin]
bpk-button
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--link
- [mixin]
bpk-button--featured
- [mixin]
bpk-select
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-radio__input
- [mixin]
bpk-radio__input
bpk-text-primary-light-color
$bpk-text-primary-light-color: rgb(17, 18, 54) !default;
bpk-text-primary-day
$bpk-text-primary-day: rgb(22, 22, 22) !default;
Used by
- [mixin]
bpk-badge--normal
- [mixin]
bpk-badge--normal
- [mixin]
bpk-badge--inverse
- [mixin]
bpk-badge--inverse
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-card
- [mixin]
bpk-input
- [mixin]
bpk-select
- [mixin]
bpk-label
- [mixin]
bpk-textarea
- [mixin]
bpk-code
bpk-text-error-night
$bpk-text-error-night: rgb(255, 100, 156) !default;
bpk-text-error-day
$bpk-text-error-day: rgb(231, 8, 102) !default;
Used by
- [mixin]
bpk-checkbox--invalid
- [mixin]
bpk-radio--invalid
bpk-text-tertiary-dark-color
$bpk-text-tertiary-dark-color: rgb(142, 142, 147) !default;
bpk-text-secondary-dark-color
$bpk-text-secondary-dark-color: rgb(178, 178, 191) !default;
bpk-text-primary-inverse-night
$bpk-text-primary-inverse-night: rgb(1, 9, 19) !default;
bpk-text-secondary-night
$bpk-text-secondary-night: rgb(189, 196, 203) !default;
bpk-text-on-dark-night
$bpk-text-on-dark-night: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-button--primary-on-light
- [mixin]
bpk-button--primary-on-light
- [mixin]
bpk-button--primary-on-light
bpk-text-secondary-light-color
$bpk-text-secondary-light-color: rgb(104, 105, 127) !default;
bpk-text-primary-inverse-day
$bpk-text-primary-inverse-day: rgb(255, 255, 255) !default;
Used by
- [mixin]
bpk-badge--brand
- [mixin]
bpk-badge--brand
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--featured
- [mixin]
bpk-button--featured
- [mixin]
bpk-button--featured
- [mixin]
bpk-checkbox__checkmark
- [mixin]
bpk-radio--white
- [mixin]
bpk-radio--white
bpk-text-disabled-on-dark-night
$bpk-text-disabled-on-dark-night: rgba(255, 255, 255, 0.5) !default;
bpk-text-tertiary-light-color
$bpk-text-tertiary-light-color: rgb(143, 144, 160) !default;
bpk-text-secondary-day
$bpk-text-secondary-day: rgb(84, 88, 96) !default;
Used by
- [mixin]
bpk-input
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-radio__input
- [mixin]
bpk-textarea
bpk-background-elevation-03-dark-color
$bpk-background-elevation-03-dark-color: rgb(58, 58, 60) !default;
bpk-background-elevation-02-dark-color
$bpk-background-elevation-02-dark-color: rgb(44, 44, 46) !default;
bpk-background-elevation-01-dark-color
$bpk-background-elevation-01-dark-color: rgb(29, 27, 32) !default;
bpk-background-elevation-01-light-color
$bpk-background-elevation-01-light-color: rgb(255, 255, 255) !default;
bpk-background-elevation-02-light-color
$bpk-background-elevation-02-light-color: rgb(255, 255, 255) !default;
bpk-background-elevation-03-light-color
$bpk-background-elevation-03-light-color: rgb(255, 255, 255) !default;
bpk-font-color-base
$bpk-font-color-base: rgb(22, 22, 22) !default;
typesettings
variables
bpk-line-height-xl-tight
$bpk-line-height-xl-tight: 1.75rem !default;
Used by
- [mixin]
bpk-heading-3
bpk-line-height-xxxxxl
$bpk-line-height-xxxxxl: 4.5rem !default;
Used by
- [mixin]
bpk-text--xxxxxl
- [mixin]
bpk-hero-4
bpk-line-height-xxxl
$bpk-line-height-xxxl: 3rem !default;
Used by
- [mixin]
bpk-text--xxxl
- [mixin]
bpk-heading-1
bpk-line-height-xl
$bpk-line-height-xl: 2rem !default;
Used by
- [mixin]
bpk-text--xl
- [mixin]
bpk-subheading
bpk-font-size-xl
$bpk-font-size-xl: 1.5rem !default;
Used by
- [mixin]
bpk-text--xl
- [mixin]
bpk-subheading
- [mixin]
bpk-heading-3
bpk-font-size-xxxxxl
$bpk-font-size-xxxxxl: 4rem !default;
Used by
- [mixin]
bpk-text--xxxxxl
- [mixin]
bpk-hero-4
bpk-font-size-xxxl
$bpk-font-size-xxxl: 2.5rem !default;
Used by
- [mixin]
bpk-text--xxxl
- [mixin]
bpk-heading-1
bpk-line-height-sm
$bpk-line-height-sm: 1.25rem !default;
Used by
- [mixin]
bpk-text--sm
- [mixin]
bpk-footnote
- [mixin]
bpk-label-2
bpk-line-height-lg-tight
$bpk-line-height-lg-tight: 1.5rem !default;
Used by
- [mixin]
bpk-heading-4
bpk-line-height-lg
$bpk-line-height-lg: 1.75rem !default;
Used by
- [mixin]
bpk-text--lg
- [mixin]
bpk-body-longform
bpk-line-height-xs
$bpk-line-height-xs: 1rem !default;
Used by
- [mixin]
bpk-label
- [mixin]
bpk-text--xs
- [mixin]
bpk-caption
- [mixin]
bpk-label-3
bpk-font-size-sm
$bpk-font-size-sm: .875rem !default;
Used by
- [mixin]
bpk-text--sm
- [mixin]
bpk-footnote
- [mixin]
bpk-label-2
bpk-font-size-xs
$bpk-font-size-xs: .75rem !default;
Used by
- [mixin]
bpk-label
- [mixin]
bpk-form-validation__container
- [mixin]
bpk-text--xs
- [mixin]
bpk-caption
- [mixin]
bpk-label-3
bpk-font-size-lg
$bpk-font-size-lg: 1.25rem !default;
Used by
- [mixin]
bpk-text--lg
- [mixin]
bpk-body-longform
- [mixin]
bpk-heading-4
bpk-font-size-root
$bpk-font-size-root: 100% !default;
bpk-font-size-6-xl
$bpk-font-size-6-xl: 4.75rem !default;
Used by
- [mixin]
bpk-hero-3
bpk-font-family-base
$bpk-font-family-base: 'Skyscanner Relative', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;
bpk-line-height-base-tight
$bpk-line-height-base-tight: 1.25rem !default;
Used by
- [mixin]
bpk-heading-5
bpk-font-size-7-xl
$bpk-font-size-7-xl: 6rem !default;
Used by
- [mixin]
bpk-hero-2
bpk-line-height-6-xl
$bpk-line-height-6-xl: 5.25rem !default;
Used by
- [mixin]
bpk-hero-3
bpk-font-size-8-xl
$bpk-font-size-8-xl: 7.5rem !default;
Used by
- [mixin]
bpk-hero-1
bpk-font-size-xxl
$bpk-font-size-xxl: 2rem !default;
Used by
- [mixin]
bpk-text--xxl
- [mixin]
bpk-heading-2
bpk-font-size-xxxxl
$bpk-font-size-xxxxl: 3rem !default;
Used by
- [mixin]
bpk-text--xxxxl
- [mixin]
bpk-hero-5
bpk-line-height-base
$bpk-line-height-base: 1.5rem !default;
Used by
- [mixin]
bpk-select
- [mixin]
bpk-checkbox__input
- [mixin]
bpk-text--base
- [mixin]
bpk-label-1
- [mixin]
bpk-body-default
bpk-line-height-7-xl
$bpk-line-height-7-xl: 6rem !default;
Used by
- [mixin]
bpk-hero-2
bpk-font-size-base
$bpk-font-size-base: 1rem !default;
Used by
- [mixin]
bpk-text--base
- [mixin]
bpk-label-1
- [mixin]
bpk-body-default
- [mixin]
bpk-heading-5
bpk-line-height-8-xl
$bpk-line-height-8-xl: 7.5rem !default;
Used by
- [mixin]
bpk-hero-1
bpk-line-height-xxl
$bpk-line-height-xxl: 2.5rem !default;
Used by
- [mixin]
bpk-text--xxl
- [mixin]
bpk-heading-2
bpk-line-height-xxxxl
$bpk-line-height-xxxxl: 3.5rem !default;
Used by
- [mixin]
bpk-text--xxxxl
- [mixin]
bpk-hero-5
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-caption
- [mixin]
bpk-footnote
- [mixin]
bpk-label-1
- [mixin]
bpk-label-2
- [mixin]
bpk-label-3
- [mixin]
bpk-body-default
- [mixin]
bpk-body-longform
- [mixin]
bpk-subheading
- [mixin]
bpk-hero-1
- [mixin]
bpk-hero-2
- [mixin]
bpk-hero-3
- [mixin]
bpk-hero-4
- [mixin]
bpk-hero-5
- [mixin]
bpk-heading-1
- [mixin]
bpk-heading-2
- [mixin]
bpk-heading-3
- [mixin]
bpk-heading-4
- [mixin]
bpk-heading-5
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-font-size-xs
- [variable]
bpk-line-height-xs
- [variable]
bpk-font-weight-book
- [mixin]
bpk-text
Used by
- [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
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-font-size-sm
- [variable]
bpk-line-height-sm
- [variable]
bpk-font-weight-book
- [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-font-size-base
- [variable]
bpk-line-height-base
- [variable]
bpk-font-weight-book
- [mixin]
bpk-text
Used by
- [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
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-font-size-lg
- [variable]
bpk-line-height-lg
- [variable]
bpk-font-weight-book
- [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-font-size-xl
- [variable]
bpk-line-height-xl
- [variable]
bpk-font-weight-book
- [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
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-font-size-xxl
- [variable]
bpk-line-height-xxl
- [variable]
bpk-font-weight-bold
- [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
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-font-size-xxxl
- [variable]
bpk-line-height-xxxl
- [variable]
bpk-font-weight-bold
- [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-font-size-xxxxl
- [variable]
bpk-line-height-xxxxl
- [variable]
bpk-font-weight-bold
- [variable]
bpk-letter-spacing-tight
- [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
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-font-size-xxxxxl
- [variable]
bpk-line-height-xxxxxl
- [variable]
bpk-font-weight-bold
- [variable]
bpk-letter-spacing-tight
- [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
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-caption
@mixin bpk-caption() { ... }
Description
Caption text style
Parameters
None.
Example
.selector {
@include bpk-caption;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-font-size-xs
- [variable]
bpk-line-height-xs
- [variable]
bpk-font-weight-book
Used by
- [mixin]
bpk-badge
- [mixin]
bpk-checkbox__label--small
bpk-footnote
@mixin bpk-footnote() { ... }
Description
Footnote text style
Parameters
None.
Example
.selector {
@include bpk-footnote;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-font-size-sm
- [variable]
bpk-line-height-sm
- [variable]
bpk-font-weight-book
bpk-label-1
@mixin bpk-label-1() { ... }
Description
Label-1 text style
Parameters
None.
Example
.selector {
@include bpk-label-1;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-font-size-base
- [variable]
bpk-line-height-base
- [variable]
bpk-font-weight-bold
Used by
- [mixin]
bpk-button
- [mixin]
bpk-table__cell--head
bpk-label-2
@mixin bpk-label-2() { ... }
Description
Label-2 text style
Parameters
None.
Example
.selector {
@include bpk-label-2;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-font-size-sm
- [variable]
bpk-line-height-sm
- [variable]
bpk-font-weight-bold
bpk-label-3
@mixin bpk-label-3() { ... }
Description
Label-3 text style
Parameters
None.
Example
.selector {
@include bpk-label-3;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-font-size-xs
- [variable]
bpk-line-height-xs
- [variable]
bpk-font-weight-bold
bpk-body-default
@mixin bpk-body-default() { ... }
Description
Default body text style
Parameters
None.
Example
.selector {
@include bpk-body-default;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-font-size-base
- [variable]
bpk-line-height-base
- [variable]
bpk-font-weight-book
Used by
- [mixin]
bpk-checkbox
bpk-body-longform
@mixin bpk-body-longform() { ... }
Description
Longform body text style
Parameters
None.
Example
.selector {
@include bpk-body-longform;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-font-size-lg
- [variable]
bpk-line-height-lg
- [variable]
bpk-font-weight-book
bpk-subheading
@mixin bpk-subheading() { ... }
Description
Subheading text style
Parameters
None.
Example
.selector {
@include bpk-subheading;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-font-size-xl
- [variable]
bpk-line-height-xl
- [variable]
bpk-font-weight-book
bpk-hero-1
@mixin bpk-hero-1() { ... }
Description
Hero 1 text style
Parameters
None.
Example
.selector {
@include bpk-hero-1;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-font-size-8-xl
- [variable]
bpk-line-height-8-xl
- [variable]
bpk-font-weight-bold
- [variable]
bpk-letter-spacing-tight
bpk-hero-2
@mixin bpk-hero-2() { ... }
Description
Hero 2 text style
Parameters
None.
Example
.selector {
@include bpk-hero-2;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-font-size-7-xl
- [variable]
bpk-line-height-7-xl
- [variable]
bpk-font-weight-bold
- [variable]
bpk-letter-spacing-tight
bpk-hero-3
@mixin bpk-hero-3() { ... }
Description
Hero 3 text style
Parameters
None.
Example
.selector {
@include bpk-hero-3;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-font-size-6-xl
- [variable]
bpk-line-height-6-xl
- [variable]
bpk-font-weight-bold
- [variable]
bpk-letter-spacing-tight
bpk-hero-4
@mixin bpk-hero-4() { ... }
Description
Hero 4 text style
Parameters
None.
Example
.selector {
@include bpk-hero-4;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-font-size-xxxxxl
- [variable]
bpk-line-height-xxxxxl
- [variable]
bpk-font-weight-bold
- [variable]
bpk-letter-spacing-tight
bpk-hero-5
@mixin bpk-hero-5() { ... }
Description
Hero 5 text style
Parameters
None.
Example
.selector {
@include bpk-hero-5;
}
Requires
- [mixin]
_bpk-text-factory
- [variable]
bpk-font-size-xxxxl
- [variable]
bpk-line-height-xxxxl
- [variable]
bpk-font-weight-bold
- [variable]
bpk-letter-spacing-tight
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-font-size-xxxl
- [variable]
bpk-line-height-xxxl
- [variable]
bpk-font-weight-bold
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-font-size-xxl
- [variable]
bpk-line-height-xxl
- [variable]
bpk-font-weight-bold
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-font-size-xl
- [variable]
bpk-line-height-xl-tight
- [variable]
bpk-font-weight-bold
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-font-size-lg
- [variable]
bpk-line-height-lg-tight
- [variable]
bpk-font-weight-bold
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-font-size-base
- [variable]
bpk-line-height-base-tight
- [variable]
bpk-font-weight-bold
bpk-paragraph
@mixin bpk-paragraph() { ... }
Description
Paragraph.
Parameters
None.
Example
.selector {
@include bpk-paragraph();
}
Requires
- [function]
bpk-spacing-base
- [variable]
bpk-spacing-none
bpk-list
@mixin bpk-list() { ... }
Description
List.
Parameters
None.
Example
.selector {
@include bpk-list();
}
Requires
- [function]
bpk-spacing-base
- [function]
bpk-spacing-base
- [function]
bpk-spacing-lg
Used by
- [mixin]
bpk-list--nested
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
- [function]
bpk-spacing-md
- [function]
bpk-spacing-sm
- [variable]
bpk-spacing-none
- [variable]
bpk-spacing-none
- [mixin]
bpk-list
bpk-list-item
@mixin bpk-list-item() { ... }
Description
List item.
Parameters
None.
Example
.selector {
@include bpk-list-item();
}
Requires
- [function]
bpk-spacing-sm
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-text-link-day
- [variable]
bpk-text-link-day
- [variable]
bpk-text-link-day
- [variable]
bpk-text-link-day
Used by
- [mixin]
bpk-button--link
- [mixin]
bpk-link--alternate
- [mixin]
bpk-link--active
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-text-on-dark-day
- [variable]
bpk-text-on-dark-day
- [variable]
bpk-text-on-dark-day
- [variable]
bpk-text-on-dark-day
- [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-text-link-day
- [variable]
bpk-text-link-day
- [variable]
bpk-text-link-day
- [mixin]
bpk-link
bpk-table
@mixin bpk-table() { ... }
Description
Table.
Parameters
None.
Example
.selector {
@include bpk-table();
}
Requires
- [mixin]
bpk-border-sm
- [function]
bpk-spacing-md
- [variable]
bpk-line-day
Used by
- [mixin]
bpk-table--alternate
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-line-day
- [mixin]
bpk-table
bpk-table__cell
@mixin bpk-table__cell() { ... }
Description
Table cell.
Parameters
None.
Example
.selector {
@include bpk-table__cell();
}
Requires
- [function]
bpk-spacing-base
Used by
- [mixin]
bpk-table__cell--head
- [mixin]
bpk-table__cell--head-alternate
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
- [mixin]
bpk-label-1
- [variable]
bpk-canvas-contrast-day
- [mixin]
bpk-table__cell
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-canvas-day
- [mixin]
bpk-table__cell
bpk-code
@mixin bpk-code() { ... }
Description
Code.
Parameters
None.
Example
.selector {
@include bpk-code();
}
Requires
- [mixin]
bpk-border-radius-xs
- [function]
bpk-spacing-sm
- [variable]
bpk-surface-highlight-day
- [variable]
bpk-text-primary-day
Used by
- [mixin]
bpk-code--block
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-canvas-contrast-day
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
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
- [function]
bpk-spacing-base
- [function]
bpk-spacing-lg
- [variable]
bpk-surface-highlight-day
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-line-day
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
- [function]
bpk-spacing-base
- [function]
bpk-spacing-lg
- [function]
bpk-spacing-lg
- [variable]
bpk-core-accent-day
- [variable]
bpk-core-accent-day
- [variable]
bpk-core-accent-day
- [variable]
bpk-core-accent-day
Used by
- [mixin]
bpk-blockquote--extra-spacing
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
- [function]
bpk-spacing-xl
- [function]
bpk-spacing-xl
- [mixin]
bpk-blockquote
General
mixins
bpk-margin-leading
@mixin bpk-margin-leading($margin, $resetOppositeMargin: true) { ... }
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 | true |
Example
.selector {
@include bpk-margin-leading(bpk-spacing-base());
}
bpk-margin-trailing
@mixin bpk-margin-trailing($margin, $resetOppositeMargin: true) { ... }
Description
RTL aware trailing margin
Parameters
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 | true |
Example
.selector {
@include bpk-margin-trailing(bpk-spacing-base());
}
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();
}
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-button
- [mixin]
bpk-button
- [mixin]
bpk-button
- [mixin]
bpk-button
- [mixin]
bpk-button
- [mixin]
bpk-button--primary-on-dark
- [mixin]
bpk-button--primary-on-dark
- [mixin]
bpk-button--primary-on-dark
- [mixin]
bpk-button--primary-on-dark
- [mixin]
bpk-button--primary-on-dark
- [mixin]
bpk-button--primary-on-light
- [mixin]
bpk-button--primary-on-light
- [mixin]
bpk-button--primary-on-light
- [mixin]
bpk-button--primary-on-light
- [mixin]
bpk-button--primary-on-light
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary
- [mixin]
bpk-button--secondary-on-dark
- [mixin]
bpk-button--secondary-on-dark
- [mixin]
bpk-button--secondary-on-dark
- [mixin]
bpk-button--secondary-on-dark
- [mixin]
bpk-button--secondary-on-dark
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--destructive
- [mixin]
bpk-button--link-on-dark
- [mixin]
bpk-button--link-on-dark
- [mixin]
bpk-button--link-on-dark
- [mixin]
bpk-button--link-on-dark
- [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 tappable area of the element to the minimum required for touch devices.
Parameters
None.
Example
.selector {
@include bpk-touch-area;
}
Requires
- [function]
bpk-spacing-xxl
- [function]
bpk-spacing-sm
- [function]
bpk-spacing-xxl
- [function]
bpk-spacing-sm
- [function]
bpk-spacing-xxl
- [function]
bpk-spacing-sm
- [function]
bpk-spacing-xxl
- [function]
bpk-spacing-sm
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-popover
$bpk-zindex-popover: 900 !default;
bpk-zindex-tooltip
$bpk-zindex-tooltip: 900 !default;
bpk-zindex-scrim
$bpk-zindex-scrim: 1000 !default;
bpk-zindex-modal
$bpk-zindex-modal: 1100 !default;
bpk-zindex-drawer
$bpk-zindex-drawer: 1100 !default;