accordions

css

.bc-accordions

.bc-accordions { ... }

Description

Accordion list container.

Should ideally be a <ul> or <ol>. Nest accordions inside the list items.

.bc-accordion

.bc-accordion { ... }

Description

Accordion container styles.

Intended to be chained wiht .bc-panel.

.bc-accordion--open

.bc-accordion--open { ... }

Description

Open accordion variant.

Adds visual changes to indicate the accordion is currently open.

.bc-accordion__title

.bc-accordion__title { ... }

Description

The title of the accordion.

This element is an anchor; it toggles the accordion’s contents.

.bc-accordion__main

.bc-accordion__main { ... }

Description

The accordion main content.

This block is hidden by default through aria-expanded and aria-hidden. It is toggled open by toggling the accordion title element.

TODO: We can’t sadly add transition effects on height: auto, so we’ll have to do that in JS, hooking into the aria-hidden/expanded booleans.

animations

variables

bc-animate-ui-duration

$bc-animate-ui-duration: 70ms !default;
View source

Description

Animation transition-duration

The fractional value in milliseconds.

Expected usage

Use setting the duration of most UI animations.

Note this a bit below the recommended 100ms to make the UI intentionally feel snappier in SPA contexts.

🔗 https://www.nngroup.com/articles/animation-duration/

Type

Number

bc-animate-ui-duration-fast

$bc-animate-ui-duration-fast: 10ms !default;
View source

Description

Animation transition-duration, fast

Fractional value in milliseconds.

Expected usage

Use for setting nav and menu hover animation transitions.

Note this is very fast.

🔗 https://www.nngroup.com/articles/animation-duration/

Type

Number

bc-animate-ui-timing-func

$bc-animate-ui-timing-func: ease-in-out !default;
View source

Description

Animation transition-timing-function

The preferred animation timing function for a transition.

Expected usage

Use to set a common timing function to uniformly animate all transitions.

Type

Number

bc-animate-ui-timing-func-fast

$bc-animate-ui-timing-func-fast: ease !default;
View source

Description

Animation transition-timing-function, fast

The preferred animation timing function for a very fast transition.

Expected usage

Use for setting nav and menu hover animation transitions.

Type

Number

bc-animate-ui

$bc-animate-ui: $bc-animate-ui-duration $bc-animate-ui-timing-func !default;
View source

Description

Animation combined transition duration & timing variable

The combined preferred animation duration & timing function for transitions.

Expected usage

Append after the CSS property you wish to animate.

Type

Number

Used by

bc-animate-ui-fast

$bc-animate-ui-fast: $bc-animate-ui-duration-fast $bc-animate-ui-timing-func-fast !default;
View source

Description

Animation combined transition duration & timing variable

The combined preferred animation duration & timing function for transitions.

Expected usage

Append after the CSS property you wish to animate.

Type

Number

banner

bar-charts

css

.bc-barcharts

.bc-barcharts { ... }

Description

Wrapper for a bar chart, or group of bar charts.

.bc-barcharts__caption

.bc-barcharts__caption { ... }

Description

Combined bar graph caption/title (<dt>).

Note: only use once per group of bar chart definition list/graphs.

.bc-barchart

.bc-barchart { ... }

Description

Shared bar properties (<dd>).

.bc-barchart__label

.bc-barchart__label { ... }

Description

Default bar label.

This is a nested element (eg, <span>) inside the barchart <dd>.

.bc-barcharts--xs

.bc-barcharts--xs { ... }

Description

Extra-small size variant.

.bc-barcharts--sm

.bc-barcharts--sm { ... }

Description

Small size variant.

.bc-barcharts--lg

.bc-barcharts--lg { ... }

Description

Large size variant.

.bc-barcharts--ruled

.bc-barcharts--ruled { ... }

Description

‘Ruled’ barcharts wrapper variant.

Applies vertical rules/lines at 10% intervals.

.bc-barcharts--severity

.bc-barcharts--severity { ... }

Description

[Priority] Severity bar graphs.

blank-state

css

.bc-blank-state

.bc-blank-state { ... }

Description

Blank state (container)

.bc-blank-state__title

.bc-blank-state__title { ... }

Description

Blank state heading/title.

.bc-blank-state__description

.bc-blank-state__description { ... }

Description

Blank state body/description.

.bc-blank-state--sm

.bc-blank-state--sm { ... }

Description

blank-state small variant.

.bc-blank-state--lg

.bc-blank-state--lg { ... }

Description

blank-state large variant.

.bc-blank-state--nobg

.bc-blank-state--nobg { ... }

Description

blank-state borderless, transparent background variant.

This overrides .bc-panel’s border and bg.

body

css

.bc-body

.bc-body { ... }

Description

Body, light theme [default]

.bc-body.bc-body--shade

.bc-body.bc-body--shade { ... }

Description

Light theme shade variant.

.bc-body.bc-body--shade-alt

.bc-body.bc-body--shade-alt { ... }

Description

Light theme (darkest) shade variant.

.bc-body.bc-body--dark

.bc-body.bc-body--dark { ... }

Description

Body, dark theme

.bc-body.bc-body--dark-tint

.bc-body.bc-body--dark-tint { ... }

Description

Dark theme tint variant.

.bc-body.bc-body--dark-tint-alt

.bc-body.bc-body--dark-tint-alt { ... }

Description

Dark theme (lightest) tint variant.

.bc-body--interstitial

.bc-body--interstitial { ... }

Description

Body variant for interstitial pages.

Expected usage: Full-page user forms (e.g., sign up and log in pages).

buttons

css

.bc-btn--positive

.bc-btn--positive { ... }

Description

Button, positive variant

.bc-btn--negative

.bc-btn--negative { ... }

Description

Button, negative variant

.bc-btn--brand

.bc-btn--brand { ... }

Description

Button, brand variant

Accessility note: Please avoid using the brand button variant within product user interfaces as it’s only WCAG 2 'A' color contrast compliant (intentionally, to resemble our brand orange color).

.bc-btn--tertiary

.bc-btn--tertiary { ... }

Description

Button, tertiary variant

.bc-btn--small

.bc-btn--small { ... }

Description

Button, small variant

Intentionally no font-size change for legibility; instead scaling icon height and left|right padding [dimensions].

.bc-btn--large

.bc-btn--large { ... }

Description

Button, large variant

Height & padding set in ems; scales proportionally with increased font-size.

.bc-btn--icon

.bc-btn--icon { ... }

Description

Button icon helper class.

This class provides the shared styling for placing medium-sized (1rem) icons in front of the button text.

Usage: combine with DS-provided button icon classes, or, combine with your own custom class if the defaults work for you; if you need custom sizes or ::after placement don’t use this class but instead just call the bc-btn-icon() mixin and pass it the values you need inside your custom button icon class.

.bc-btn--icon-hidden-text

.bc-btn--icon-hidden-text { ... }

Description

Button icon visually hidden text helper class

This class provides the shared styling for placing medium-sized (1rem) icons in front of the button text, which is visually hidden.

Usage: combine with DS-provided button icon classes, or, combine with your own custom class.

.bc-btn--follow

.bc-btn--follow { ... }

Description

Follow/star button

For following/subscribing to a program or a submission.

Usage: intended to be used with the --secondary variant and --icon--hidden-text.

.bc-btn--follow-active

.bc-btn--follow-active { ... }

Description

Follow Filled-in/active (following/subscribed) icon button sub-variant

.bc-btn--brief

.bc-btn--brief { ... }

Description

Program brief/document icon button

.bc-btn--cross

.bc-btn--cross { ... }

Description

Cross button icon appearing as an X

Usage: Used for cancel, close or delete actions.

.bc-btn--download

.bc-btn--download { ... }

Description

Download icon button

.bc-btn--edit

.bc-btn--edit { ... }

Description

Edit button

.bc-btn--delete

.bc-btn--delete { ... }

Description

Delete button (trash can)

Usage: intended to be used to communicate permanent delete actions that triggers a confirm() modal.

.bc-btn--attach

.bc-btn--attach { ... }

Description

Attach/upload button icon.

.bc-btn--more

.bc-btn--more { ... }

Description

More button icon (...)

Usage: Intended to be used to open a dropdown menu panel that contain tertiary or low priority controls and actions.

.bc-btn--visible

.bc-btn--visible { ... }

Description

Visible/Public (eye) icon

Usage: Intended to be used on toggle boolean buttons that change things from visible to invisible.

.bc-btn--invisible

.bc-btn--invisible { ... }

Description

Invisible/Private (eye) icon

Usage: Intended to be used on toggle boolean buttons that change things from invisible to visible.

.bc-btn--add

.bc-btn--add { ... }

Description

Plus/add (+) icon

Usage: Use for add or create button actions.

.bc-btn--drag

.bc-btn--drag { ... }

Description

Drag button icon

Usage: Use for drag and drop UI

.bc-btn--print

.bc-btn--print { ... }

Description

Print button icon

Usage: Use for print button actions

.bc-btn--dropdown

.bc-btn--dropdown { ... }

Description

Dropdown collapsed (down carat) button icon

Usage: Use for buttons that will open as a dropdown menu

.bc-btn--dropdown-open

.bc-btn--dropdown-open { ... }

Description

Dropdown expanded (up carat) button icon

Usage: Use for buttons that will close a dropdown menu

.bc-btn--next

.bc-btn--next { ... }

Description

Next button icon

Usage: Use for buttons that go to the next step

.bc-btn--prev

.bc-btn--prev { ... }

Description

Previous button icon

Usage: Use for buttons that go to the previous step

checklist-assistant

css

.bc-checklist-assistant

.bc-checklist-assistant { ... }

Description

Checklist assistant nav wrapper

.bc-checklist-assistant__list

.bc-checklist-assistant__list { ... }

Description

Checklist

.bc-checklist-assistant__item

.bc-checklist-assistant__item { ... }

Description

Checklist item

.bc-checklist-assistant__item--complete

.bc-checklist-assistant__item--complete { ... }

Description

Checklist complete[d] item variant

&::after

&::after { ... }

Description

Checklist item anchor right-hand arrow icon

colors

variables

bc-palette-primary-bug-orange

$bc-palette-primary-bug-orange: #ff6900 !default;
View source

Description

‘bugOrange’

Expected usage

TODO: guidance.

Type

Color

bc-palette-primary-horizon-blue

$bc-palette-primary-horizon-blue: #296fd1 !default;
View source

Description

‘horizon’

Expected usage

TODO: guidance.

Type

Color

bc-palette-primary-white

$bc-palette-primary-white: #fff !default;
View source

Description

white

Expected usage

TODO: guidance.

Type

Color

bc-palette-primary-black

$bc-palette-primary-black: #000 !default;
View source

Description

black

Expected usage

TODO: guidance.

Type

Color

bc-palette-secondary-persian-red

$bc-palette-secondary-persian-red: #d13535 !default;
View source

Description

‘persianRed’

Expected usage

Used for P1.

Type

Color

bc-palette-secondary-casablanca-orange

$bc-palette-secondary-casablanca-orange: #f0ad4e !default;
View source

Description

‘casablanca’

Expected usage

Used for P3.

Type

Color

bc-palette-secondary-limeade-green

$bc-palette-secondary-limeade-green: #5eae00 !default;
View source

Description

‘limeade’

Expected usage

Used for P4.

Type

Color

bc-palette-secondary-lagoon-blue

$bc-palette-secondary-lagoon-blue: #0278b8 !default;
View source

Description

‘blueLagoon’

Expected usage

Used for P5.

Type

Color

bc-palette-tertiary-san-marino-blue

$bc-palette-tertiary-san-marino-blue: #3f51b5 !default;
View source

Description

‘sanMarino’

Expected usage

Used for Triaged state.

Type

Color

bc-palette-tertiary-carribean-green

$bc-palette-tertiary-carribean-green: #00bfa5 !default;
View source

Description

‘carribeanGreen’

Expected usage

Used for Resolved state.

Type

Color

bc-palette-tertiary-deep-sea-green

$bc-palette-tertiary-deep-sea-green: #0f8063 !default;
View source

Description

‘deepSea’

Expected usage

Used for Resolved state.

Type

Color

bc-palette-tertiary-purple-heart

$bc-palette-tertiary-purple-heart: #673ab7 !default;
View source

Description

‘purpleHeart’

Expected usage

Used for Duplicate state.

Type

Color

bc-palette-tertiary-pomegranate-red

$bc-palette-tertiary-pomegranate-red: #f44a3d !default;
View source

Description

‘pomegranate’

Expected usage

Used for out-of-scope and not-reproducible states.

Type

Color

bc-palette-tertiary-mineshaft-grey

$bc-palette-tertiary-mineshaft-grey: #333 !default;
View source

Description

‘mineShaft’

Expected usage

TODO: guidance.

Type

Color

bc-palette-tertiary-smoke-grey

$bc-palette-tertiary-smoke-grey: #666 !default;
View source

Description

‘smoke’

Expected usage

TODO: guidance.

Type

Color

bc-palette-tertiary-dusty-grey

$bc-palette-tertiary-dusty-grey: #999 !default;
View source

Description

‘dustyGrey’

Expected usage

TODO: guidance.

Type

Color

bc-palette-tertiary-alabaster-white

$bc-palette-tertiary-alabaster-white: #fafafa !default;
View source

Description

‘alabaster’

Expected usage

TODO: guidance.

Type

Color

bc-palette-tertiary-sandcastle-yellow

$bc-palette-tertiary-sandcastle-yellow: #fffbdc !default;
View source

Description

‘sandcastle’

Expected usage

TODO: guidance.

Type

Color

bc-color-p0

$bc-color-p0: $bc-palette-primary-black !default;
View source

Description

‘P0’

Expected usage

Used for P0/Emergency priority submissions.

Type

Color

bc-color-p1

$bc-color-p1: $bc-palette-secondary-persian-red !default;
View source

Description

‘P1’

Expected usage

Used for P1/Critical priority submissions.

Type

Color

bc-color-p2

$bc-color-p2: $bc-palette-primary-bug-orange !default;
View source

Description

‘P2’

Expected usage

Used for P3/High priority submissions.

Type

Color

bc-color-p3

$bc-color-p3: $bc-palette-secondary-casablanca-orange !default;
View source

Description

‘P3’

Expected usage

Used for P3/Medium priority submissions.

Type

Color

bc-color-p4

$bc-color-p4: $bc-palette-secondary-limeade-green !default;
View source

Description

‘P4’

Expected usage

Used for P4/Low priority submissions.

Type

Color

bc-color-p5

$bc-color-p5: $bc-palette-secondary-lagoon-blue !default;
View source

Description

‘P5’

Expected usage

Used for P5/Informational priority submissions.

Type

Color

bc-color-p6

$bc-color-p6: #ad21f6 !default;
View source

Description

‘P6’

Expected usage

Really?

Type

Color

bc-color-new

$bc-color-new: $bc-palette-tertiary-dusty-grey !default;
View source

Description

‘New’

Expected usage

Used for New submissions.

Type

Color

bc-color-triaged

$bc-color-triaged: $bc-palette-tertiary-san-marino-blue !default;
View source

Description

‘Triaged’

Expected usage

Used for Triaged submissions.

Type

Color

bc-color-resolved

$bc-color-resolved: $bc-palette-tertiary-deep-sea-green !default;
View source

Description

‘Resolved’

Expected usage

Used for Resolved submissions.

Type

Color

bc-color-unresolved

$bc-color-unresolved: $bc-palette-tertiary-carribean-green !default;
View source

Description

‘Unresolved’

Expected usage

Used for Unresolved submissions.

Type

Color

bc-color-duplicate

$bc-color-duplicate: $bc-palette-tertiary-purple-heart !default;
View source

Description

‘Duplicate’

Expected usage

Used for Duplicate submissions.

Type

Color

bc-color-outofscope

$bc-color-outofscope: $bc-palette-tertiary-pomegranate-red !default;
View source

Description

‘Out of scope’

Expected usage

Used for Out of scope submissions.

Type

Color

bc-color-notreproducible

$bc-color-notreproducible: $bc-palette-tertiary-pomegranate-red !default;
View source

Description

‘Not reproducible’

Expected usage

Used for Not reproducible submissions.

Type

Color

bc-color-wontfix

$bc-color-wontfix: #ff9800 !default;
View source

Description

‘Won’t fix’

Expected usage

Used for Won’t fix submissions. Same as ‘Not applicable’.

Type

Color

bc-color-notapplicable

$bc-color-notapplicable: #ff9800 !default;
View source

Description

‘Not applicable’

Expected usage

Used for Not reproducible submissions. Same as ‘Won’t fix’.

Type

Color

bc-color-fg-text

$bc-color-fg-text: $bc-color-gray-90 !default;
View source

Description

Light theme: Foreground - Text color.

Expected usage

Applied to general text set on the default background colors.

Type

Color

bc-color-fg-border

$bc-color-fg-border: rgb(0 0 0 / 12.5%) !default;
View source

Description

Light theme: Foreground - Border.

Expected usage

Applied as a color to common borders.

Type

Color

bc-color-bg

$bc-color-bg: $bc-palette-primary-white !default;
View source

Description

Light theme - Background color (lightest shade).

Expected usage

The base (light theme) background color.

Type

Color

Used by

bc-color-bg-shade-alpha

$bc-color-bg-shade-alpha: rgb(0 0 0 / 2.5%) !default;
View source

Description

Light theme: Background - Transparent shade.

Expected usage

Applied to elements that need always darker bgs than the page shade used.

Type

Color

See

bc-color-bg-shade-alt-alpha

$bc-color-bg-shade-alt-alpha: rgb(0 0 0 / 5%) !default;
View source

Description

Light theme: Background - Transparent shade, alternative.

Expected usage

Applied to elements that need always darker bgs than the page shade used.

Type

Color

See

bc-color-bg-selection

$bc-color-bg-selection: rgba($bc-color-bg-mark, 0.9) !default;
View source

Description

Type

Color

bc-color-bg-ui

$bc-color-bg-ui: $bc-color-bg !default;
View source

Description

Light theme - Background: UI.

Expected usage

Applied to UI components so that they use the background color of the page.

Type

Color

bc-color-bg-ui-input-shadow

$bc-color-bg-ui-input-shadow: rgb(0 0 0 / 5%) !default;
View source

Description

Light theme - Background: UI [internal] shadow.

Expected usage

Applied as an internal box-sahdow to UI components

Type

Color

bc-color-bg-shade

$bc-color-bg-shade: bc-color-a11y($bc-color-bg-shade-suggestion, $bc-color-fg-text) !default;
View source

Description

Light theme: Background - Shade.

Expected usage

Darker default light theme background color.

Type

Color

bc-color-bg-alt

$bc-color-bg-alt: bc-color-a11y($bc-color-bg-alt-suggestion, $bc-color-fg-text) !default;
View source

Description

Light theme: Background - Alternative [darker shade].

Expected usage

Darkest default light theme background color.

Type

Color

bc-color-fg-secondary

$bc-color-fg-secondary: bc-color-a11y($bc-color-gray-50, $bc-color-bg-alt) !default;
View source

Description

Light theme: Foreground - Secondary text color.

Expected usage

Applied to general text set on the default background colors.

Type

Color

bc-color-fg-focus

$bc-color-fg-focus: bc-color-a11y($bc-color-horizon-50, $bc-color-bg-alt) !default;
View source

Description

Light theme - Foreground: :focus color.

Expected usage

Applied to the bc-focus() mixin, and to currently focused (eg. tabbed-to). elements.

Type

Color

bc-color-bg-ui--active

$bc-color-bg-ui--active: $bc-color-fg-link !default;
View source

Description

Light theme: Background - Active UI.

Expected usage

Applied to primary UI components, or used for :active or :selected states, eg checked checkboxes.

Type

Color

bc-color-bg-ui--hover

$bc-color-bg-ui--hover: color.adjust(bc-tint($bc-color-fg-link, 90%), $alpha: -0.5) !default;
View source

Description

Light theme: Background - Hover UI.

Expected usage

Applied to :hover and :focus states on UI components, applying a light blue to the background color, using the link color as a base.

Type

Color

bc-color-bg-ui--selected

$bc-color-bg-ui--selected: color.adjust(bc-tint($bc-color-fg-link, 90%), $alpha: -0.2) !default;
View source

Description

Light theme: Background - Selected UI.

Expected usage

Applied to currenly active/selected states on UI components, applying a slightly darker light blue to the background color :hover.

Type

Color

bc-color-bg-ui--disabled

$bc-color-bg-ui--disabled: rgb(0 0 0 / 5%) !default;
View source

Description

Light theme: Background - Disabled UI.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

bc-color-fg-ui--disabled

$bc-color-fg-ui--disabled: rgb(0 0 0 / 45%) !default;
View source

Description

Light theme: Foreground - Disabled UI.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

bc-color-fg-ui-border--disabled

$bc-color-fg-ui-border--disabled: rgb(0 0 0 / 7.5%) !default;
View source

Description

Light theme: Foreground - Disabled UI border.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

bc-color-bg-ui--readonly

$bc-color-bg-ui--readonly: rgb(0 0 0 / 2.5%) !default;
View source

Description

Light theme: Background - Disabled Read-only UI.

Expected usage

Applied to :disabled --readonly variant UI components, greying them out slightly.

Type

Color

Used by

bc-color-fg-ui--readonly

$bc-color-fg-ui--readonly: inherit !default;
View source

Description

Light theme: Foreground - Disabled Read-only UI.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

bc-color-fg-ui-border--readonly

$bc-color-fg-ui-border--readonly: transparent !default;
View source

Description

Light theme: Foreground - Disabled UI border.

Expected usage

Applied to :disabled --readonly variant UI components, greying them out slightly.

Type

Color

Used by

bc-color-fg-ui-text

$bc-color-fg-ui-text: bc-color-a11y($bc-color-gray-80, $bc-color-bg-alt) !default;
View source

Description

Light theme: Foreground - UI text.

Expected usage

Applied to the text of UI components.

Type

Color

bc-color-fg-ui-text--placeholder

$bc-color-fg-ui-text--placeholder: bc-color-a11y($bc-color-gray-30, $bc-color-bg-alt) !default;
View source

Description

Light theme: Foreground - UI text, placeholder.

Expected usage

Applied to the text of input ::placeholder content.

Type

Color

bc-color-fg-ui-text--disabled

$bc-color-fg-ui-text--disabled: rgb(0 0 0 / 50%) !default;
View source

Description

Light theme: Foreground - Disabled UI text.

Expected usage

Applied to the :disabled text of UI components, greying them out slightly.

Type

Color

bc-color-fg-ui-text--readonly

$bc-color-fg-ui-text--readonly: rgb(0 0 0 / 75%) !default;
View source

Description

Light theme: Foreground - Disabled Read-only UI text.

Expected usage

Applied to the :disabled --readonly variant text of UI components, greying them out slightly.

Type

Color

Used by

bc-color-fg-ui-icon

$bc-color-fg-ui-icon: bc-color-a11y($bc-color-gray-40, $bc-color-bg-alt) !default;
View source

Description

Light theme: Foreground - UI marks/graphics.

Expected usage

Applied to marks --- graphics/icons --- of UI components.

Type

Color

bc-color-fg-ui-border

$bc-color-fg-ui-border: rgb(0 0 0 / 55%) !default;
View source

Description

Light theme: Foreground - UI border.

Expected usage

Applied to the borders of UI components.

Type

Color

bc-color-fg-ui-border--hover

$bc-color-fg-ui-border--hover: bc-shade($bc-color-fg-ui-border, 95%) !default;
View source

Description

Light theme: Foreground - UI border :hover.

Expected usage

Applied to when non-disabled UI components receive :hover.

Type

Color

bc-color-bg-private

$bc-color-bg-private: bc-color-a11y($bc-color-bg-private-suggestion, $bc-color-fg-ui-text) !default;
View source

Description

Light theme: Background - Private message.

Expected usage

Applied to messages visible only to a subset of people involved in the submission.

Type

Color

bc-color-bg-bugcrowd-internal

$bc-color-bg-bugcrowd-internal: bc-color-a11y($bc-color-bg-bugcrowd-internal-suggestion, $bc-color-fg-ui-text) !default;
View source

Description

Light theme: Background - Bugcrowd internal message.

Expected usage

Applied to messages visible only to the Bugcrowd team involved in the submission.

Type

Color

bc-colordark-fg-text

$bc-colordark-fg-text: $bc-colordark-gray-100 !default;
View source

Description

Dark theme: Foreground - Text color.

Expected usage

Applied to general text set on a colordark background color.

Type

Color

Used by

bc-colordark-fg-border

$bc-colordark-fg-border: rgb(255 255 255 / 25%) !default;
View source

Description

Dark theme: Foreground - Border.

Expected usage

Applied as a color to common borders.

Type

Color

bc-colordark-bg

$bc-colordark-bg: $bc-colordark-gray-0 !default;
View source

Description

Dark theme: Background - color (lightest shade).

Expected usage

The base dark theme background color.

Type

Color

bc-colordark-bg-shade-alpha

$bc-colordark-bg-shade-alpha: rgb(0 0 0 / 40%) !default;
View source

Description

Dark theme: Background - Transparent shade.

Expected usage

Applied to elements that need always darker bgs than the page shade used.

Type

Color

See

bc-colordark-bg-shade-alt-alpha

$bc-colordark-bg-shade-alt-alpha: rgb(0 0 0 / 75%) !default;
View source

Description

Dark theme: Background - Transparent shade, alternative.

Expected usage

Applied to elements that need always darker bgs than the page shade used.

Type

Color

See

bc-colordark-bg-selection

$bc-colordark-bg-selection: $bc-color-bg-selection !default;
View source

Description

Type

Color

bc-colordark-bg-ui

$bc-colordark-bg-ui: $bc-colordark-bg !default;
View source

Description

Dark theme: Background - UI.

Expected usage

Applied to UI components so that they use the background color of the page.

Type

Color

bc-colordark-bg-ui-input-shadow

$bc-colordark-bg-ui-input-shadow: rgb(0 0 0 / 22.5%) !default;
View source

Description

Dark theme - Background: UI [internal] shadow.

Expected usage

Applied as an internal box-sahdow to UI components

Type

Color

bc-colordark-bg-tint

$bc-colordark-bg-tint: bc-color-a11y($bc-colordark-gray-10, $bc-colordark-fg-text) !default;
View source

Description

Dark theme: Background - Shade.

Expected usage

Lighter dark theme background color.

Type

Color

bc-colordark-bg-alt

$bc-colordark-bg-alt: bc-color-a11y($bc-colordark-gray-20, $bc-colordark-fg-text) !default;
View source

Description

Dark theme: Background - Alternative [darker shade].

Expected usage

Lightest dark theme background color.

Type

Color

bc-colordark-fg-secondary

$bc-colordark-fg-secondary: bc-color-a11y($bc-colordark-gray-80, $bc-colordark-bg-alt) !default;
View source

Description

Dark theme: Foreground - Secondary text color.

Expected usage

Applied to general text set on the dark theme’s background colors.

Type

Color

Used by

bc-colordark-fg-focus

$bc-colordark-fg-focus: bc-color-a11y($bc-colordark-horizon-90, $bc-colordark-bg-alt) !default;
View source

Description

Dark theme: Foreground - :focus color.

Expected usage

Applied to the bc-focus() mixin, and to currently focused (eg. tabbed-to). elements.

Type

Color

bc-colordark-bg-ui--active

$bc-colordark-bg-ui--active: $bc-colordark-fg-link !default;
View source

Description

Dark theme: Background - Active UI.

Expected usage

Applied to primary UI components, or used for :active or :selected states, eg checked checkboxes.

Type

Color

bc-colordark-bg-ui--hover

$bc-colordark-bg-ui--hover: color.adjust(bc-shade($bc-colordark-fg-link, 90%), $alpha: -0.5) !default;
View source

Description

Dark theme: Background - Hover UI.

Expected usage

Applied to :hover and :focus states on UI components, darkens background color slightly, using the link color as a base.

Type

Color

bc-colordark-bg-ui--selected

$bc-colordark-bg-ui--selected: color.adjust(bc-shade($bc-colordark-fg-link, 90%), $alpha: -0.2) !default;
View source

Description

Dark theme: Background - Selected UI.

Expected usage

Applied to currenly active/selected states on UI components, darkens background color slightly more than on :hover.

Type

Color

bc-colordark-bg-ui--disabled

$bc-colordark-bg-ui--disabled: rgb(255 255 255 / 5%) !default;
View source

Description

Dark theme: Background - Disabled UI.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

bc-colordark-fg-ui--disabled

$bc-colordark-fg-ui--disabled: rgb(255 255 255 / 45%) !default;
View source

Description

Dark theme: Foreground - Disabled UI.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

bc-colordark-fg-ui-text--disabled

$bc-colordark-fg-ui-text--disabled: rgb(255 255 255 / 25%) !default;
View source

Description

Dark theme: Foreground - Disabled UI text.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

bc-colordark-fg-ui-text--readonly

$bc-colordark-fg-ui-text--readonly: rgb(255 255 255 / 75%) !default;
View source

Description

Dark theme: Foreground - Disabled Read-only UI text.

Expected usage

Applied to the :disabled --readonly variant text of UI components, greying them out slightly.

Type

Color

Used by

bc-colordark-fg-ui-border--disabled

$bc-colordark-fg-ui-border--disabled: rgb(255 255 255 / 7.5%) !default;
View source

Description

Dark theme: Foreground - Disabled UI border.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

bc-colordark-bg-ui--readonly

$bc-colordark-bg-ui--readonly: rgb(255 255 255 / 2.5%) !default;
View source

Description

Dark theme: Background - Disabled Read-only UI.

Expected usage

Applied to :disabled --readonly variant UI components, greying them out slightly.

Type

Color

Used by

bc-colordark-fg-ui--readonly

$bc-colordark-fg-ui--readonly: inherit !default;
View source

Description

Dark theme: Foreground - Disabled Read-only UI.

Expected usage

Applied to :disabled UI components, greying them out slightly.

Type

Color

bc-colordark-fg-ui-border--readonly

$bc-colordark-fg-ui-border--readonly: transparent !default;
View source

Description

Dark theme: Foreground - Disabled UI border.

Expected usage

Applied to :disabled --readonly variant UI components, greying them out slightly.

Type

Color

Used by

bc-colordark-fg-ui-text

$bc-colordark-fg-ui-text: bc-color-a11y($bc-colordark-gray-90, $bc-colordark-bg-alt) !default;
View source

Description

Dark theme: Foreground - UI text.

Expected usage

Applied to the text of UI components.

Type

Color

bc-colordark-fg-ui-text--placeholder

$bc-colordark-fg-ui-text--placeholder: bc-color-a11y($bc-colordark-gray-60, $bc-colordark-bg-alt) !default;
View source

Description

Dark theme: Foreground - UI text, placeholder.

Expected usage

Applied to the text of input ::placeholder content.

Type

Color

bc-colordark-fg-ui-icon

$bc-colordark-fg-ui-icon: bc-color-a11y($bc-colordark-gray-80, $bc-colordark-bg-alt) !default;
View source

Description

Dark theme: Foreground - UI marks/graphics.

Expected usage

Applied to marks --- graphics/icons --- of UI components.

Type

Color

bc-colordark-fg-ui-border

$bc-colordark-fg-ui-border: rgb(255 255 255 / 48%) !default;
View source

Description

Dark theme: Foreground - UI border.

Expected usage

Applied to the borders of UI components.

Type

Color

bc-colordark-fg-ui-border--hover

$bc-colordark-fg-ui-border--hover: bc-tint($bc-colordark-fg-ui-border, 36%) !default;
View source

Description

Dark theme: Foreground - UI border :hover.

Expected usage

Applied to when non-disabled UI components receive :hover.

Type

Color

bc-colordark-bg-private

$bc-colordark-bg-private: bc-color-a11y($bc-colordark-bg-private-suggestion, $bc-colordark-fg-ui-text) !default;
View source

Description

Dark theme: Background - Private message.

Expected usage

Applied to messages visible only to a subset of people involved in the submission.

Type

Color

bc-colordark-bg-bugcrowd-internal

$bc-colordark-bg-bugcrowd-internal: bc-color-a11y($bc-colordark-bg-bugcrowd-internal-suggestion, $bc-colordark-fg-ui-text) !default;
View source

Description

Dark theme: Background - Bugcrowd internal message.

Expected usage

Applied to messages visible only to the Bugcrowd team involved in the submission.

Type

Color

bc-color-fg-text--pos

$bc-color-fg-text--pos: bc-color-a11y(color.scale($bc-palette-secondary-limeade-green, $lightness: -10%), $bc-color-bg-alt) !default;
View source

Description

Light theme: Foreground - Text color - Positive.

Expected usage

Applied to text that indicates positive meaning such as monetary and point reward and uptrends.

Type

Color

bc-color-fg-text--neg

$bc-color-fg-text--neg: bc-color-a11y($bc-palette-secondary-persian-red, $bc-color-bg-alt) !default;
View source

Description

Light theme: Foreground - Text color - Negative.

Expected usage

Applied to text that indicates negative meaning such as point deduction and downtrends.

Type

Color

bc-colordark-fg-text--pos

$bc-colordark-fg-text--pos: bc-color-a11y(bc-tint($bc-palette-secondary-limeade-green, 30%), $bc-colordark-bg-alt) !default;
View source

Description

Dark theme: Foreground - Text color - Positive.

Expected usage

Applied to text that indicates positive meanings such as monetary and point rewards and uptrends.

Type

Color

bc-colordark-fg-text--neg

$bc-colordark-fg-text--neg: bc-color-a11y($bc-palette-secondary-persian-red, $bc-colordark-bg-alt) !default;
View source

Description

Dark theme: Foreground - Text color - Negative.

Expected usage

Applied to text that indicates negative meanings such as point deduction and downtrends.

Type

Color

bc-color-info

$bc-color-info: $bc-palette-secondary-lagoon-blue !default;
View source

Description

Informational, light theme.

Expected usage

Used for informational dialogs, alerts, and messaging.

Type

Color

bc-colordark-info

$bc-colordark-info: bc-color-a11y($bc-palette-secondary-lagoon-blue, $bc-colordark-bg-alt) !default;
View source

Description

Informational, dark theme.

Expected usage

Used for informational dialogs, alerts, and messaging.

Type

Color

bc-color-success

$bc-color-success: $bc-color-fg-text--pos !default;
View source

Description

Operation successful/live, light theme.

Expected usage

Used for successful operations or to indicate something is live.

Type

Color

bc-colordark-success

$bc-colordark-success: $bc-colordark-fg-text--pos !default;
View source

Description

Operation successful/live, dark theme.

Expected usage

Used for successful operations or to indicate something is live.

Type

Color

bc-color-error

$bc-color-error: $bc-color-fg-text--neg !default;
View source

Description

Error, light theme.

Expected usage

Used to indicate an error or problem has occurred.

Type

Color

bc-colordark-error

$bc-colordark-error: $bc-colordark-fg-text--neg !default;
View source

Description

Error, dark theme.

Expected usage

Used to indicate an error or problem has occurred.

Type

Color

bc-color-warning

$bc-color-warning: color.adjust($bc-palette-secondary-casablanca-orange, $lightness: -12%) !default;
View source

Description

Warning, light theme.

Expected usage

Used to indicate warnings or caution.

Type

Color

bc-colordark-warning

$bc-colordark-warning: bc-color-a11y($bc-color-warning, $bc-colordark-bg-alt) !default;
View source

Description

Warning, dark theme.

Expected usage

Used to indicate warnings or caution.

Type

Color

bc-color-bg-ui--neg

$bc-color-bg-ui--neg: bc-color-a11y($bc-color-bg-ui--neg-suggestion, $bc-color-fg-ui-text) !default;
View source

Description

Light theme: Background - UI invalid state.

Expected usage

Applied to the background of radio and multi-select controls + labels that are in invalid or error state (eg Control inputs).

Type

Color

bc-colordark-bg-ui--neg

$bc-colordark-bg-ui--neg: bc-color-a11y($bc-colordark-bg-ui--neg-suggestion, $bc-colordark-fg-ui-text) !default;
View source

Description

Dark theme: Background - UI invalid state.

Expected usage

Applied to the background of radio and multi-select controls + labels that are in invalid or error state (eg Control inputs).

Type

Color

bc-color-bg-ui--pos

$bc-color-bg-ui--pos: bc-color-a11y($bc-color-bg-ui--pos-suggestion, $bc-color-fg-ui-text) !default;
View source

Description

Light theme: Background - UI positive/valid state

Expected usage

Applied to the background of UI controls that need to be marked as in a positive or valid or success state.

Type

Color

bc-colordark-bg-ui--pos

$bc-colordark-bg-ui--pos: bc-color-a11y($bc-colordark-bg-ui--pos-suggestion, $bc-colordark-fg-ui-text) !default;
View source

Description

Dark theme: Background - UI positive/valid state

Expected usage

Applied to the background of UI controls that need to be marked as in a positive or valid or success state.

Type

Color

config

variables

bc-wcag2-contrast-lvl

$bc-wcag2-contrast-lvl: 'AA' !default;
View source

Description

Current WCAG 2.x color contrast ratio compliance setting.

Set this either to A (3:1) or AA (4.5:1).

Type

String

Used by

bc-wcag-warning-stdout

$bc-wcag-warning-stdout: false !default;
View source

Description

WCAG2 Sass @warn standard-out messaging

Toggles whether WCAG2 functions provide @warn informational messages or not.

Type

Boolean

Used by

bc-media-xs

$bc-media-xs: 576px !default;
View source

Description

Extra-small breakpoint.

Type

String

Used by

bc-media-sm

$bc-media-sm: 768px !default;
View source

Description

Small breakpoint.

Type

String

Used by

bc-media-md

$bc-media-md: 992px !default;
View source

Description

Medium breakpoint.

Type

String

Used by

bc-media-lg

$bc-media-lg: 1200px !default;
View source

Description

Large (desktop) breakpoint.

Type

String

Used by

bc-media-xl

$bc-media-xl: 1800px !default;
View source

Description

Extra Large (fullscreen desktop) breakpoint.

Type

String

Used by

bc-zindexes

$bc-zindexes: (
  modal        : 500, // Modals.
  overlay      : 400, // Overlays (eg modal overlays, in-page pop-ups).
  foreground   : 300, // Main layer --- push things here to make sure they’re seen.
  background   : 200, // You *might* see things here, if not obscured.
  hidden       : 100  // Don’t expect to see things here.
) !default;
View source

Description

Z-indexes.

Contextual layers for handling things that require z-indexes.

Type

Map

Used by

control-input

css

.bc-control-input

.bc-control-input { ... }

Description

Control input wrapper.

This should be the <label>, which should wrap the <input>.

The label’s text is placed in .bc-control-input__label-text.

.bc-control-input__label-text

.bc-control-input__label-text { ... }

Description

The control input label text.

::after is used to position the SVGs.

// TODO: Deprecate __hint. .bc-control-input .bc-hint, .bc-control-input__hint

Deprecated!

Being deprecated and will be replaced by .bc-hint.

// TODO: Deprecate __hint.
.bc-control-input .bc-hint,
.bc-control-input__hint { ... }

Description

Additional label hint text.

.bc-control-input__input

.bc-control-input__input { ... }

Description

The actual radio button or checkbox input.

.bc-control-input--unlabelled

.bc-control-input--unlabelled { ... }

Description

‘Unlabelled’ control inputs.

For when the input label is visually hidden, or not in immediate proximity to the input field/graphic.

.bc-control-input--invalid

.bc-control-input--invalid { ... }

Description

Invalid styles for control inputs that cause an error.

.bc-control-input--card

.bc-control-input--card { ... }

Description

Card-style control inputs.

Use for simplified forms that involve multiple steps to complete.

dropdowns

error-boundary

css

.bc-error-boundary

.bc-error-boundary { ... }

Description

.bc-error-boundary icons error-boundary container/wrapper class

Top-level BEM class for BcErrorBoundary.

fieldsets

css

.bc-fieldset

.bc-fieldset { ... }

Description

Default fieldset.

.bc-fieldset__legend

.bc-fieldset__legend { ... }

Description

Fieldset legend

The <legend> must be the immediate first child within a <fieldset>.

.bc-fieldset--visible

.bc-fieldset--visible { ... }

Description

Visible fieldset variant.

.bc-fieldset--unbordered

.bc-fieldset--unbordered { ... }

Description

Unbordered fieldset

Intended to be chained with the bc-fieldset--visible variant.

file-input

css

.bc-file-input

.bc-file-input { ... }

Description

File input wrapper.

This should be the <label>, which should wrap the <input>.

The [label’s] button text is designed to be placed a nested .bc-btn.bc-btn--secondary span.

.bc-file-input__input

.bc-file-input__input { ... }

Description

The input[type=file].

.bc-file-input--disabled .bc-btn, .bc-file-input__input:disabled + .bc-btn

.bc-file-input--disabled .bc-btn,
.bc-file-input__input:disabled + .bc-btn { ... }

Description

Disabled state file inputs

Available via the :disabled attribute on the input, and as a class on the top-level wrapper (the label).

.bc-file-input--block

.bc-file-input--block { ... }

Description

File input block variant.

fixed-text-input

css

.bc-fixed-text-input

.bc-fixed-text-input { ... }

Description

Fixed text input.

Fixed text inputs can support both a prepend and an append simultaneously.

.bc-fixed-text-input__prepend, .bc-fixed-text-input__append

.bc-fixed-text-input__prepend,
.bc-fixed-text-input__append { ... }

Description

Shared styles for both the prepend and append child elements.

.bc-fixed-text-input--prepended

.bc-fixed-text-input--prepended { ... }

Description

Fixed text inputs with a prepend.

.bc-fixed-text-input--appended

.bc-fixed-text-input--appended { ... }

Description

Fixed text inputs with an append.

.bc-fixed-text-input--readonly

.bc-fixed-text-input--readonly { ... }

Description

Readonly Fixed text inputs, styled to match readonly text inputs.

.bc-fixed-text-input--disabled

.bc-fixed-text-input--disabled { ... }

Description

Disabled Fixed text inputs, styled to match disabled text inputs.

.bc-fixed-text-input--block

.bc-fixed-text-input--block { ... }

Description

“Block” Fixed text input variant.

Use with .bc-text-input--block to extend the input to 100% container width.

footer

forms

css

.bc-form

.bc-form { ... }

Description

The form wrapper/container class.

Apply to <form> elements.

.bc-form__group

.bc-form__group { ... }

Description

Use to group labels and inputs together.

.bc-form__error

.bc-form__error { ... }

Description

A block to hold ‘inline’ errors associated with a form group.

  • Each error should use .bc-icon.bc-icon--error.
  • Each error should be given on a separate line.
  • Each error should only relate to the offending form field immediately preceeding the error block.

functions

functions

bc-is-number

@function bc-is-number($value) { ... }
View source

Description

Check if value is a number in Sass

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

The value to be checked.

Number none

Returns

Type

The type of the value.

Used by

Author

  • Kitty Giraudel

bc-is-time

@function bc-is-time($value) { ... }
View source

Description

Check if value is a time of either minutes or seconds in Sass

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

The value to be checked.

Number none

Returns

Type

The type of the value.

Requires

Used by

Author

  • Kitty Giraudel

bc-is-duration

@function bc-is-duration($value) { ... }
View source

Description

Check if value is a [time] duration in Sass

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

The value to be checked.

Number none

Returns

Type

The type of the value.

Requires

Author

  • Kitty Giraudel

bc-is-integer

@function bc-is-integer($value) { ... }
View source

Description

Check if value is an integer in Sass

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

The value to be checked.

Number none

Returns

Type

The type of the value.

Requires

Author

  • Kitty Giraudel

bc-is-relative-length

@function bc-is-relative-length($value) { ... }
View source

Description

Check if value is a relative unit in Sass

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

The value to be checked.

Number none

Returns

Type

The type of the value.

Requires

Used by

Author

  • Kitty Giraudel

bc-is-absolute-length

@function bc-is-absolute-length($value) { ... }
View source

Description

Check if value is an absolute unit in Sass

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

The value to be checked.

Number none

Returns

Type

The type of the value.

Requires

Author

  • Kitty Giraudel

bc-is-percentage

@function bc-is-percentage($value) { ... }
View source

Description

Check if value is a percentage in Sass

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

The value to be checked.

Number none

Returns

Type

The type of the value.

Requires

Used by

Author

  • Kitty Giraudel

bc-is-length

@function bc-is-length($value) { ... }
View source

Description

Check if value is either a relative or absolute length unit in Sass

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

The value to be checked.

Number none

Returns

Type

The type of the value.

Requires

Used by

Author

  • Kitty Giraudel

bc-is-position

@function bc-is-position($value) { ... }
View source

Description

Check if value is a length, percentage, or position (keyword) in Sass

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

The value to be checked.

Number none

Returns

Type

The type of the value.

Requires

Author

  • Kitty Giraudel

bc-space

@function bc-space($space) { ... }
View source

Description

Return a rem space value that equals the given input in pixels (output in rem).

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$space

The desired pixel output, that must be one of 4, 6, 8, 12, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 104, 112, 128, or 152.

Number none

Returns

Number

The space in rems.

Throws

  • ERROR: Oi mate, the bc-space function only takes unitless numbers.

  • ERROR: Oi mate, the bc-space function only takes the following numbers: #{$space-units}.

Used by

bc-line-space

@function bc-line-space($number, $number) { ... }
View source

Description

Return a space value based on the line-height and the unit em.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

The space as a multiplier of line-height

Number none
$number

The line-height [optional]

Number none

Returns

Number

The space in ems.

Throws

  • ERROR: Oi mate, the bc-line-space function only takes unitless numbers.

bc-tint

@function bc-tint($color, $percentage) { ... }
View source

Description

Lighten a color by mixing white into it.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Color to tint

Color none
$percentage

Percentage of $color in returned color

Number none

Returns

Color

Throws

  • ERROR: Oi mate, the bc-tint function $percentage parameter requires the % unit.

Requires

Used by

bc-shade

@function bc-shade($color, $percentage) { ... }
View source

Description

Darken a color by mixing black into it.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Color to shade

Color none
$percentage

Percentage of $color in returned color

Number none

Returns

Color

Throws

  • ERROR: Oi mate, the bc-shade function $percentage parameter requires the % unit.

Requires

Used by

bc-replace

@function bc-replace($string, $search, $replace) { ... }
View source

Description

Replace a string with a string.

Example: http://codepen.io/jakob-e/pen/doMoML

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$string

The haystack string to be manipulated

String none
$search

The desired needle to be replaced

String none
$replace

The desired replacement

String none

Returns

String

The manipulated string with replaced values

Throws

  • ERROR: Oi mate, the first argument of the bc-replace function must be a string!

  • ERROR: Oi mate, the second argument of the bc-replace function must be a string!

  • ERROR: Oi mate, the third argument of the bc-replace function must be a string!

Used by

Author

bc-z

@function bc-z($context) { ... }
View source

Description

Dynamically set z-indexes contextually.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$context

The layer or contextual z-index range desired

String none

Returns

Integer

The z-index for the given layer/context

Throws

  • ERROR: Oi mate, the bc-z function only takes the following layer contexts: #{$bc-zindexes}.

Requires

TODO's

  • Consider adding a second argument to give a (positive) offset within the specified layer.

bc-svguri

@function bc-svguri($svg) { ... }
View source

Description

Generate an optimized SVG data-uri for embedding SVGs in our Sass.

Example codepens:

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$svg

The SVG to be converted

String none

Returns

String

An optimized data-uri

Throws

  • ERROR: Oi mate, the bc-svguri function only takes a string.

Requires

Author

bc-color-blend-normal

@function bc-color-blend-normal($foreground, $background) { ... }
View source

Description

Blend RGBA color onto another color.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$foreground

The [RGBA] color you wish to flatten/blend.

String none
$background

The background color you wish to flatten/blend onto.

String none

Returns

String

The combined/flattened/blended HEX RGB color.

Author

bc-color-luminance

@function bc-color-luminance($color) { ... }
View source

Description

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The color to calculate the luminance from.

String none

Returns

Float

The luminance.

Throws

  • ERROR: Oi mate, the bc-color-luminance function only takes a color as an input.

Used by

Author

bc-color-contrast

@function bc-color-contrast($color-one, $color-two, $ratioKey: $bc-wcag2-contrast-lvl, $silent: true, $rounded: true) { ... }
View source

Description

Calculate color contrast ratio of two colors against either the WCAG 2.x A or AA ratios and warn if it’s under at least the A (3:1) ratio to meet compliance. Use for testing foreground (*-fg-*) a text color against a background (*-bg-*) color.

The $ratioKey value is set via the $bc-wcag2-contrast-lvl variable.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color-one

Color one, eg foreground color.

String none
$color-two

Color two, eg background color.

String none
$ratioKey

The keyword 'A' or 'AA' to set the WCAG 2.x contrast ration of 3.0 or 4.5 compliance levels respectively.

'a' or 'aa'$bc-wcag2-contrast-lvl
$silent

Print @warn warnings into stdout.

Booleantrue
$rounded

Round the value.

Booleantrue

Returns

Integer

The calculated contrast ratio of the two input colors.

Throws

  • ERROR: Oi mate, the bc-color-luminance function only takes a colors as an input.

  • ERROR: Oi mate, the bc-color-luminance function only takes a color as an input.

  • ERROR: Oi mate, the bc-color-contrast function only takes

Requires

Used by

Author

bc-color-a11y

@function bc-color-a11y($toMakeA11y, $immutable-color, $ratioKey: $bc-wcag2-contrast-lvl, $steps: 0.1) { ... }
View source

Description

WCAG2 A/AA color contrast checker

Calculate WCAG2 A [default] or AA ratio-compliant color iterations against a pre-given/immutable color.

You can set it to AA (4.5:1 rato), and increase the number size of the steps used to iterate the contrast/luminosity towards finding a compliant color.

The $ratioKey value is set via the $bc-wcag2-contrast-lvl variable.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$toMakeA11y

The color that is to be changed.

Color none
$immutable-color

The background color to compare against toMakeA11y for the contrast.

Color none
$ratioKey

The keyword 'A' or 'AA' to set the WCAG 2.x contrast ration of 3.0 or 4.5 compliance levels respectively.

'a' or 'aa'$bc-wcag2-contrast-lvl
$steps

The step size our function is searching for a new color in. The bigger the number the faster the process the rougher the found color.

Number0.1

Returns

Color

Returns the nearest accessible color

Throws

  • ERROR: Oi mate, the bc-color-a11y function only takes a color as the first attribute.

  • ERROR: Oi mate, the bc-color-a11y function only takes a color as the second attribute.

  • ERROR: Oi mate, the bc-color-a11y function only takes

  • ERROR: Oi mate, the bc-color-a11y function only takes a number as the fourth attribute

  • ERROR: Oi mate, the bc-color-a11y function only takes a number between 0.1 and 100 as the fourth attribute.

  • Warning: ACCESSIBILITY --- the bc-color-a11y function was unable to find an accessible color for you.

Requires

Used by

Links

Author

grid

variables

bc-grid-cols

$bc-grid-cols: 12 !default;
View source

Description

Number of grid columns

Sets the number of grod columns that should be present at all breakpoints.

Type

Number

Used by

bc-grid-gutter-width

$bc-grid-gutter-width: 24px !default;
View source

Description

Gutter width

The white space between each grid column.

Type

Number, in pixels

Used by

bc-grid-max-width--sm

$bc-grid-max-width--sm: ($bc-media-sm - $bc-grid-gutter-width) !default;
View source

Description

sm breakpoint container width

The width of the .container class at the ≥sm breakpoint, in pixels.

Type

Number, in pixels

bc-grid-max-width--md

$bc-grid-max-width--md: ($bc-media-md - $bc-grid-gutter-width) !default;
View source

Description

md breakpoint container width

The width of the .container class at the ≥md breakpoint, in pixels.

Type

Number, in pixels

bc-grid-max-width--lg

$bc-grid-max-width--lg: ($bc-media-lg - $bc-grid-gutter-width) !default;
View source

Description

lg breakpoint container width

The width of the .container class at the ≥lg breakpoint, in pixels.

Type

Number, in pixels

bc-grid-max-width--xl

$bc-grid-max-width--xl: ($bc-media-xl - $bc-grid-gutter-width) !default;
View source

Description

xl breakpoint container width

The width of the .container class at the ≥xl breakpoint, in pixels.

Type

Number, in pixels

mixins

bc-grid-make-grid-cols

@mixin bc-grid-make-grid-cols() { ... }
View source

Description

Padding amount calculation helper mixin.

Iterates through all 12 columns (≥2) to calculate the right amount of left and right padding for each of the Bootstrap grid classes.

Parameters

None.

Output

Bootstrap grid classes with the correct left and right padding.

Requires

bc-grid-float-grid-cols

@mixin bc-grid-float-grid-cols() { ... }
View source

Description

Float helper mixin.

Iterates through the columns list (≥2) to set the float.

Parameters

None.

Output

Bootstrap grid classes with float set.

Requires

Used by

bc-grid-calc-grid-cols

@mixin bc-grid-calc-grid-cols() { ... }
View source

Description

Column width calculation helper mixin.

Calculates the correct widths as a % based on the column count, breakpoint class, and the type (pull or offset).

Parameters

None.

Output

Bootstrap grid classes with correct % widths, and l/r offsets.

Requires

Used by

bc-grid-loop-grid-cols

@mixin bc-grid-loop-grid-cols() { ... }
View source

Description

Calculation helper combinator mixin.

Combines the above mixins to loop through all columns, auto-generate Bootstrap grid classes, including type.

Parameters

None.

Output

Bootstrap grid classes with correct % widths, and l/r offsets.

Requires

Used by

bc-grid-make-grid

@mixin bc-grid-make-grid() { ... }
View source

Description

Grid generation mixin.

Uses the looping combinator mixin to now generate all our grid classes.

Parameters

None.

Output

Complete Bootstrap grid classes with desired properties.

Requires

css

.container-fluid__container

.container-fluid__container { ... }

Description

Custom max-width’d container.

This (custom) fixed-width container class should be a child of .container-fluid and provides a fixed-width container with max-widths to allow implementers to have a fluid outter container (eg for full-viewport- width blocks with background images, etc.) but return to the fixed-width design of the BS3 .container class.

helpers

css

.bc-helper-sronly

.bc-helper-sronly { ... }

Description

Screen-reader only helper class.

Simply consumes the bc-sronly mixin, provisioned as a class.

.bc-helper-clearfix

.bc-helper-clearfix { ... }

Description

Clearfix helper class.

Simply consumes the bc-clearfix mixin, provisioned as a class.

.bc-helper-nomargin

.bc-helper-nomargin { ... }

Description

No-margin helper class.

Removes all margins.

.bc-helper-nopadding

.bc-helper-nopadding { ... }

Description

No-padding helper class.

Removes all padding.

.bc-helper-block

.bc-helper-block { ... }

Description

Display: block helper class.

Sets display: block.

.bc-helper-inlineblock

.bc-helper-inlineblock { ... }

Description

Display: block helper class.

Sets display: inline-block.

.bc-helper-inline

.bc-helper-inline { ... }

Description

Display: inline helper class.

Sets display: inline.

.bc-helper-lefttext

.bc-helper-lefttext { ... }

Description

Left-aligned text helper class.

Sets text-align to left.

.bc-helper-centeredtext

.bc-helper-centeredtext { ... }

Description

Centered text helper class.

Sets text-align to center.

.bc-helper-righttext

.bc-helper-righttext { ... }

Description

Right-aligned text helper class.

Sets text-align to right.

.bc-helper-cursorpointer

.bc-helper-cursorpointer { ... }

Description

Mouse cursor pointer helper class.

Sets cursor styles to ‘pointer’.

.bc-helper-noprint

.bc-helper-noprint { ... }

Description

Hide in print helper class.

Hides elements in print media.

.bc-helper-printonly

.bc-helper-printonly { ... }

Description

Inverse of hide in print helper class. Hides element for screen but shows in print media.

.bc-helper-gap

.bc-helper-gap { ... }

Description

Flex/Grid: Grap (row/col) helper class [parent].

Sets gap and exposes locally-scoped row and column CSS Variables.

.bc-flex

.bc-flex { ... }

Description

Display: Flex display helper class [parent].

Seen https: //css-tricks.com/snippets/css/a-guide-to-flexbox/.

Sets display: flex.

.bc-flex--wrap

.bc-flex--wrap { ... }

Description

Flex wrap (flow) helper class [parent].

Sets flex-wrap: wrap.

.bc-flex--row

.bc-flex--row { ... }

Description

Flex flow row helper class [parent].

.bc-flex--col

.bc-flex--col { ... }

Description

Flex flow column helper class [parent].

.bc-flex--align-flex-start

.bc-flex--align-flex-start { ... }

Description

Flex align-items at flex start (top) helper class [parent].

.bc-flex--align-center

.bc-flex--align-center { ... }

Description

Flex align-items center helper class [parent].

.bc-flex--align-flex-end

.bc-flex--align-flex-end { ... }

Description

Flex align-items at flex end (bottom) helper class [parent].

.bc-flex--justify-flex-start

.bc-flex--justify-flex-start { ... }

Description

Flex justify-content flex start helper class [parent].

.bc-flex--justify-space-between

.bc-flex--justify-space-between { ... }

Description

Flex justify-content space between helper class [parent].

.bc-flex--justify-center

.bc-flex--justify-center { ... }

Description

Flex justify-content center helper class [parent].

.bc-flex--justify-flex-end

.bc-flex--justify-flex-end { ... }

Description

Flex justify-content flex end helper class [parent].

.bc-flex-1

.bc-flex-1 { ... }

Description

Flex child shorthand helper class [child]

Sets flex: 1; // 1 0 0%

Careful: This shorthand sets the flex-basis to 0%.

hint

css

.bc-hint

.bc-hint { ... }

Description

Hint text

Can be used as a wrapper around other text nodes (eg plain paragraphs or span tags), or on text node itself.

icons

css

.bc-icons

.bc-icons { ... }

Description

.bc-icons icon container/wrapper class

Top-level BEM class for BcIcons.

Icons are sized to a line-height of 1, but a font-size of 1em * the (parent) line-height. This means:

  • Despite offering rem size variants, icons will scale by default in ems
  • Icons don’t increase line-height of surrounding text.

You can also hard-set an icon at a given rem size using the available size variants (eg. bc-icons--xl).

.bc-icons__svg

.bc-icons__svg { ... }

Description

.bc-icons SVG class

.bc-icons--sm

.bc-icons--sm { ... }

Description

.bc-icons small size variant

Aligned with .bc-avatar sizing.

.bc-icons--lg

.bc-icons--lg { ... }

Description

.bc-icons large size variant

.bc-icons--xl

.bc-icons--xl { ... }

Description

.bc-icons x-large size variant

.bc-icons--xxl

.bc-icons--xxl { ... }

Description

.bc-icons xx-large size variant

.bc-icons--inlined

.bc-icons--inlined { ... }

Description

.bc-icons inline variant

Sets the icon to be treated as a block or inline box.

.bc-icons--parent-color

.bc-icons--parent-color { ... }

Description

.bc-icons [parent] font color variant

Reset --color-fg-ui-icon back to initial so it can inherit the parent [font] color, eg. required for use inside styled buttons so that icons on dark-colored backgrounds use a light color, eg. the button’s text color.

This also means icons can receive different :hover color changes.

inline-control-group

css

.bc-inline-control-group

.bc-inline-control-group { ... }

Description

Inline control group.

.bc-btn:active, .bc-btn--active, .bc-control-input__input[type='radio']:checked + .bc-btn

.bc-btn:active,
  .bc-btn--active,
  .bc-control-input__input[type='radio']:checked + .bc-btn { ... }

Description

Active/checked state button helper class.

Custom --active class for manually setting

.bc-inline-control-group--block

.bc-inline-control-group--block { ... }

Description

Block variant.

Block variant, that allows the buttons to expand fluidly and thus fill the full width of the inline group container.

.bc-inline-control-group--left

.bc-inline-control-group--left { ... }

Description

“Left” variant.

Button text aligned left variant, with content justified left | right at <sm.

keyboard

css

.bc-kbd

.bc-kbd { ... }

Description

.bc-kbd

Use to style <kbd> [inline] elements (keyboard strokes).

label

css

.bc-label

.bc-label { ... }

Description

[Form] Label.

loader

css

.bc-loader

.bc-loader { ... }

Description

.bc-loader container

.bc-loader__hex

.bc-loader__hex { ... }

Description

.bc-loader__hex icon animation element

.bc-loader__text

.bc-loader__text { ... }

Description

.bc-loader accessible hint text

markdown

css

.bc-markdown

.bc-markdown { ... }

Description

Markdown content styling wrapper.

.bc-markdown--bordered

.bc-markdown--bordered { ... }

Description

Style of a Markdown comment in activity feed. Its default style is for comments visible to everyone involved in a submission.

.bc-markdown--private

.bc-markdown--private { ... }

Description

Style of a Markdown comment visible only between 2 users.

.bc-markdown--bugcrowd-internal

.bc-markdown--bugcrowd-internal { ... }

Description

Style of a Markdown comment visible only to the Bugcrowd team.

mixins

mixins

bc-sronly

@mixin bc-sronly($set: true) { ... }
View source

Description

Screen-reader only ready-made mixin.

Expected usage: include to visually hide an element from displays, but not screen readers or other assistive technologies.

You can provide a false argument to unset the styles to make an element that has the sr-only styles applied visible again.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$set

either true or false

Booleantrue

Output

Styles to visually hide an element, or undo if set to false.

Throws

  • ERROR: Oi mate, the bc-sronly mixin only accepts a boolean ‘true’ or ‘false’!

bc-focus-style-only

@mixin bc-focus-style-only($outline-type: offset) { ... }
View source

Description

Focus-styles mixin

It sets outline|border color, border radius, and box-shadow.

Use bc-focus-style-only() only to add focus styles to children elements of focused parents.

Use bc-focus() primarily to add focus styles to focused elements.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$outline-type

‘faux’ outline (via box-shadow), or a true outline

Keywordsoffset

Output

Desired :focus and :focus:active styles, using either box-shadow or outline.

Throws

  • ERROR: Oi mate, the bc-focus-style-only mixin only accepts strings!

  • ERROR: Oi mate, the bc-focus-style-only mixin only takes the following outline type strings: faux [default], true, or offset!

Used by

bc-focus

@mixin bc-focus($outline-type: faux) { ... }
View source

Description

Focus mixin (:focus and :focus-visible)

Mixin to set focus styles and support :focus-visible for keyboard tabbing as well as fallback focus styles for :focus in Safari.

It sets outline|border color, border radius, and box-shadow.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$outline-type

‘faux’ outline (via box-shadow), or a true outline

Keywordsfaux

Output

Desired :focus-visible and :focus-visible:active styles, using either box-shadow or outline.

Throws

  • ERROR: Oi mate, the bc-focus mixin only accepts strings!

  • ERROR: Oi mate, the bc-focus mixin only takes the following outline type strings: faux [default] or true!

Requires

Links

bc-clearfix

@mixin bc-clearfix() { ... }
View source

Description

Clearfix mixin for clearing floats.

Expected usage: use when required to clear (force content to sit after floated elements) non-floating elements that wrap around floated ones.

You shouldn’t need this much; we don’t intend to make heavy use of floats.

Parameters

None.

Output

Clearfix using pseudo-elements.

bc-form-disabled

@mixin bc-form-disabled($type: disabled) { ... }
View source

Description

Disabled form element styling mixin.

Expected usage: use on form elements (or React components) that are unavailable for a current state.

Use the default styling for elements that cannot be interacted with.

Use the readonly type if the disabled input could shortly become editable (eg, via a button).

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$type

either disabled or readonly

Keywordsdisabled

Output

Styles for :disabled and ‘readonly’ disabled form elements.

Throws

  • ERROR: Oi mate, the bc-form-disabled mixin only accepts strings to set the type!

  • ERROR: Oi mate, the bc-form-disabled mixin only takes the following type strings: disabled [default] or readonly!

Requires

bc-form-label

@mixin bc-form-label() { ... }
View source

Description

Form label mixin.

Expected usage: applied to form labels.

Note: you still need to account for various nesting possibilities (eg see the dropdowns or text-input partial for its labels).

Parameters

None.

Output

Sets block, small margin-bottom, sm font-size and grey color.

Requires

bc-content-code

@mixin bc-content-code() { ... }
View source

Description

Inline code style mixin.

Styles code when it appears nested inside other text elements.

Parameters

None.

Output

Sets inline-block and relative font size.

bc-break-wrap

@mixin bc-break-wrap() { ... }
View source

Description

Break/wrap lines mixin.

Sets text content to break rather than overflow when there isn’t enough space at the end of a line.

Reference: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Parameters

None.

Output

Sets overflow-wrap and word break to break-word/break-all.

bc-media

@mixin bc-media($breakpoint) { ... }
View source

Description

Media query mixin.

Inlude the mixin and pass it one of the breakpoint keywords as an argument to create a media query.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$breakpoint

anyone one of: xs, sm, md, lg

Keywords none

Output

Styles passed in @content, wrapped inside a media query matching breakpoint given as a keyword.

Throws

  • ERROR: Oi mate, the bc-media mixin only accepts strings!

  • ERROR: Oi mate, the bc-media mixin only takes the following breakpoint strings: xs, sm, md, lg, xl!

Requires

bc-smooth-text

@mixin bc-smooth-text() { ... }
View source

Description

Smooth text mixin.

Expected usage: Smooth text aliasing. Appropriate for light-colored text on a dark background or large display type.

Parameters

None.

Output

Sets font-smoothing for more delicate text in Webkit and Firefox.

bc-truncate

@mixin bc-truncate($width,) { ... }
View source

Description

Truncate text mixin.

Expected usage: Truncate text. To avoid vertical alignment issues, we set the parent block to display: inline-flex; call this mixin on a parent block.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$width,

$inline

Keywords none

Output

Sets rules for truncating text

bc-target-browser

@mixin bc-target-browser($browser) { ... }
View source

Description

Target a specific browser mixin.

Expected usage: Use for applying styles only for a specific browser.

Wraps enclosed styles with @supports to apply styles only in the specificied $browser. Use sparingly and judiciously.

Note: Currently only supports targeting Firefox

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$browser

the browser for which styles should be applied to

'firefox' none

Throws

  • ERROR: Oi mate, the bc-media mixin only accepts 1 string!

  • ERROR: Oi mate, parameter of bc-target-browser mixin can only be one of the following: chromium, firefox, safari!

Links

bc-line-clamp

@mixin bc-line-clamp($lines) { ... }
View source

Description

Line-clamping mixin.

Use to truncate lines of overflowing text in a container to a given number of lines, inserting an ellipsis at the point of truncation.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$lines noneNumber none

nav-toc

responsive-media

css

.bc-responsive-media

.bc-responsive-media { ... }

Description

Responsive media block class

.bc-responsive-media--vid, .bc-responsive-media--video

.bc-responsive-media--vid,
.bc-responsive-media--video { ... }

Description

Responsive media video variant

TODO's

  • remove when removing selector-class-pattern

&.bc-responsive-media--vid-16x9, &.bc-responsive-media--video-16x9

&.bc-responsive-media--vid-16x9,
  &.bc-responsive-media--video-16x9 { ... }

Description

Responsive media video 16:9 aspect ratio variant @todo remove when removing selector-class-pattern

&.bc-responsive-media--vid-4x3, &.bc-responsive-media--video-4x3

&.bc-responsive-media--vid-4x3,
  &.bc-responsive-media--video-4x3 { ... }

Description

Responsive media video 4:3 aspect ratio variant @todo remove when removing selector-class-pattern

.bc-responsive-media__video

.bc-responsive-media__video { ... }

Description

Responsive video (child) element

.bc-responsive-media__img, .bc-responsive-media img

.bc-responsive-media__img,
.bc-responsive-media img { ... }

Description

Responsive images

skip-to

css

.bc-skip-to

.bc-skip-to { ... }

Description

Skip-to link <nav> wrapper

stepped-nav

css

.bc-stepped-nav

.bc-stepped-nav { ... }

Description

Stepped nav wrapper

.bc-stepped-nav__step

.bc-stepped-nav__step { ... }

Description

Step item.

.bc-stepped-nav__step--complete

.bc-stepped-nav__step--complete { ... }

Description

Completed step styles The fully completed step indicator Green check icon and line.

.bc-stepped-nav__step--current

.bc-stepped-nav__step--current { ... }

Description

Current step styles The selected or current step the user is on. Bold link text and green circle.

Current/selected link styles

.bc-stepped-nav__step--disabled

.bc-stepped-nav__step--disabled { ... }

Description

Disabled step styles Used to prevent skipping to later steps. Making anchors and markers disabled grey; same for :hover.

.bc-stepped-nav__button

.bc-stepped-nav__button { ... }

Description

Accordion toggle button styles

.bc-stepped-nav__accordion-content

.bc-stepped-nav__accordion-content { ... }

Description

Accordion content

subnav

switch-input

css

.bc-switch-input

.bc-switch-input { ... }

Description

Switch input container.

.bc-switch-input--justify

.bc-switch-input--justify { ... }

Description

Switch input block variant.

Despite the name block, this is a flex wrapper used to space the label and the toggle on opposite sides of the container only in small screens.

.bc-switch-input--reverse

.bc-switch-input--reverse { ... }

Description

Reverse the order of contents, placing the label before the input switch

tabbed-nav

css

.bc-tabbed-nav

.bc-tabbed-nav { ... }

Description

Tabbed nav’s container (<nav>).

.bc-tabbed-nav__item

.bc-tabbed-nav__item { ... }

Description

A Tabbed nav’s tab (list item).

.bc-tabbed-nav__item--active

.bc-tabbed-nav__item--active { ... }

Description

A Tabbed nav’s active tab.

tags

css

.bc-tag

.bc-tag { ... }

Description

Tag

.bc-tags

.bc-tags { ... }

Description

Tags (list container class)

text-input

css

.bc-text-input

.bc-text-input { ... }

Description

Default text input.

.bc-text-input:disabled, .bc-text-input--disabled

.bc-text-input:disabled,
.bc-text-input--disabled { ... }

Description

:disabled state text input / --disabled variant.

.bc-text-input--readonly:disabled, .bc-text-input--readonly

.bc-text-input--readonly:disabled,
.bc-text-input--readonly { ... }

Description

‘Read-only’ (and ideally :disabled) state

.bc-text-input--invalid

.bc-text-input--invalid { ... }

Description

Invalid [state] text input variant.

.bc-text-input--valid

.bc-text-input--valid { ... }

Description

Valid [state)] text input variant.

.bc-text-input--number

.bc-text-input--number { ... }

Description

Text input input[type="number"] variant.

Do not chain with .bc-text-input--code.

.bc-text-input--code

.bc-text-input--code { ... }

Description

Text input monospaced font variant.

Use when alphanumeric text input content benefits from differentiating character glyphs in a monospace font.

Differs from the .bc-text-input--number variant in having no additional tracking (letter-spacing).

Do not chain with .bc-text-input--number.

.bc-text-input--textarea

.bc-text-input--textarea { ... }

Description

Text input <textarea> variant.

.bc-text-input--block

.bc-text-input--block { ... }

Description

Text input block layout variant.

.bc-text-input--private

.bc-text-input--private { ... }

Description

Text input private message variant.

Used for the input of a content visisble only to 2 users.

.bc-text-input--bugcrowd-internal

.bc-text-input--bugcrowd-internal { ... }

Description

Text input Bugcrowd team note variant.

Used for the input of a content visisble only to the Bugcrowd team.

trend

css

.bc-trend

.bc-trend { ... }

Description

Trend component (default)

Base component that doubles as the default (no change) state.

.bc-trend--up

.bc-trend--up { ... }

Description

Trend component, up variant

.bc-trend--down

.bc-trend--down { ... }

Description

Trend component, down variant

.bc-trend--sm

.bc-trend--sm { ... }

Description

Trend component, small-sized variant

.bc-trend--lg

.bc-trend--lg { ... }

Description

Trend component, large-sized variant

.bc-trend--xl

.bc-trend--xl { ... }

Description

Trend component, extra large-sized variant

trust

css

.bc-trust

.bc-trust { ... }

Description

.bc-trust

Default style is that of “newcomer”.

.bc-trust--exceptional

.bc-trust--exceptional { ... }

Description

.bc-trust--exceptional

.bc-trust--good

.bc-trust--good { ... }

Description

.bc-trust--good

.bc-trust--low

.bc-trust--low { ... }

Description

.bc-trust--low

.bc-trust--block

.bc-trust--block { ... }

Description

.bc-trust--block

type

variables

bc-leading

$bc-leading: 1.5 !default;
View source

Description

Leading (line-height).

Yields 1rem/24 (font-size over leading/line-height).

Expected usage

Very little; this is applied to the .bc-body class.

Note

The value is unitless; it acts as a multipler of the element’s font-size.

Type

Unit-less number

bc-leading--tight

$bc-leading--tight: 1.3125 !default;
View source

Description

Tight leading (line-height).

Yields 1rem/21 (font-size over leading/line-height).

Expected usage

Very little; this is applied to the .bc-body class.

Note

The value is unitless; it acts as a multipler of the element’s font-size.

Type

Unit-less number

bc-leading--loose

$bc-leading--loose: 2 !default;
View source

Description

Loose leading (line-height).

Yields 1rem/32 (font-size over leading/line-height).

Expected usage

Very little; this is applied to the .bc-body class.

Note

The value is unitless; it acts as a multipler of the element’s font-size.

Type

Unit-less number

bc-font-size

$bc-font-size: 16px !default;
View source

Description

Default font-size

number, in pixels

bc-font-size--xxs

$bc-font-size--xxs: 0.625rem !default;
View source

Description

Extra, extra-small font-size

Set in rems (outputs 10px).

Type

Number, in rems

bc-font-size--xs

$bc-font-size--xs: 0.75rem !default;
View source

Description

Extra-small font-size

Set in rems (outputs 12px).

Type

Number, in rems

bc-font-size--sm

$bc-font-size--sm: 0.875rem !default;
View source

Description

Smaller font-size

Set in rems (outputs 14px).

Type

Number, in rems

Used by

bc-font-size--lg

$bc-font-size--lg: 1.125rem !default;
View source

Description

Larger font-size

Set in rems (outputs 18px).

Type

Number, in rems

bc-font-size--xl

$bc-font-size--xl: 1.5rem !default;
View source

Description

Extra-large font-size

Set in rems (outputs 24px).

Type

Number, in rems

bc-font-size--xxl

$bc-font-size--xxl: 2em !default;
View source

Description

Extra, extra-large font-size

Set in rems (outputs 32px).

Type

Number, in rems

bc-font-weight

$bc-font-weight: normal !default;
View source

Description

Base/default font weight.

Set to normal keyword (equates to 400).

bc-font-weight--bold

$bc-font-weight--bold: bold !default;
View source

Description

Bolded font weight.

Set to bold keyword (equates to 700).

bc-font-weight--semibold

$bc-font-weight--semibold: 500 !default;
View source

Description

Semi-bolded font weight.

Set to 500, leaving things to the native font rendering engine.

Used by

bc-measure

$bc-measure: 42em !default;
View source

Description

The measure [of a line].

Provides a max width for content to keep line lengths sane and readable.

Type

Number, in ems

bc-font-system

$bc-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;
View source

Description

Our system font stack.

Expected usage

Use $bc-font-system for everything by default. Comes applied to .bc-body.

Type

String

bc-font-monospace

$bc-font-monospace: Menlo, Consolas, 'Liberation Mono', Courier, 'Bitstream Vera Sans Mono', monospace !default;
View source

Description

Our monospace font stack.

Expected usage

Use for all code and target/scope URLs. Comes applied to code nested in .bc-body.

Type

String

General

css

.bc-avatar

.bc-avatar { ... }

Description

Default avatar at 40px.

Image is given a 50% border that renders it circular.

.bc-avatar--square

.bc-avatar--square { ... }

Description

Square variant.

.bc-avatar--inline

.bc-avatar--inline { ... }

Description

Inline variant.

.bc-avatar--lg

.bc-avatar--lg { ... }

Description

Large variant.

.bc-avatar--sm

.bc-avatar--sm { ... }

Description

Small variant.

.bc-avatar--xs

.bc-avatar--xs { ... }

Description

Extra-small variant.

.bc-avatar--accent-border

.bc-avatar--accent-border { ... }

Description

Accent border color variant.

.bc-avatar--grouped

.bc-avatar--grouped { ... }

Description

Modifier class for grouping superimposed a small avatar onto a larger avatar.

.bc-avatar--grouped-child

.bc-avatar--grouped-child { ... }

Description

The ‘child’ avatar.

Styled at the same size as the --xs avatars, unless inside a --lg avatar.

No support for a base/‘parent’ --xs sized avatar, since the child can’t be smaller than xs.

.bc-date-time-input

.bc-date-time-input { ... }

Description

Date/time input field (wrapper)

.bc-date-time-input--time

.bc-date-time-input--time { ... }

Description

Date/time field clock icon variant

.bc-date-time-input--disabled

.bc-date-time-input--disabled { ... }

Description

Date/time field disabled variant

.bc-date-time-input--block

.bc-date-time-input--block { ... }

Description

Date/time 100% width block variant

/* stylelint-disable selector-class-pattern */ .highlight

/* stylelint-disable selector-class-pattern */
.highlight { ... }

Description

Code highlight block

TODO: full dark variant support.

.bc-pagination__navigator

.bc-pagination__navigator { ... }

Description

.bc-pagination__page-menuitems

Child of .bc-paginationbc-pagination--menubar which wraps all menuitems.

.bc-progress-bar__value

.bc-progress-bar__value { ... }

Description

Progress bar value.

.bc-progress-bar__output

.bc-progress-bar__output { ... }

Description

Progress bar <output>.

.bc-progress-bar--success

.bc-progress-bar--success { ... }

Description

Success variant.

.bc-progress-bar--branded

.bc-progress-bar--branded { ... }

Description

Brand variant.

.bc-progress-bar--xs

.bc-progress-bar--xs { ... }

Description

Extra small variant.

.bc-progress-bar--sm

.bc-progress-bar--sm { ... }

Description

Small variant.

.bc-progress-bar--lg

.bc-progress-bar--lg { ... }

Description

Large variant.

.bc-progress-bar--inline

.bc-progress-bar--inline { ... }

Description

Inline variant.

Places output text ‘inline’ to the right of the bar.

mixins

bc-badge-fill

@mixin bc-badge-fill($type-color) { ... }
View source

Description

Mixin for generating (default) filled badge color styles.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$type-color

The badge color.

Color none

Output

Correct badge background- and border-color.

Requires

bc-badge-unconfirmed

@mixin bc-badge-unconfirmed($type-color) { ... }
View source

Description

Mixin for generating ‘unfilled’ (white bg) badge color styles.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$type-color

The badge color.

Color none

Output

Correct badge background- & border-color.

Requires

bc-btn-fg-bg-colors

@mixin bc-btn-fg-bg-colors($text-color, $bg-color, $ratioKey: $bc-wcag2-contrast-lvl) { ... }
View source

Description

Button accessible foreground–background accessible color mixin.

The $ratioKey value is set via the $bc-wcag2-contrast-lvl variable.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$text-color

The color that is to be changed.

Color none
$bg-color

The background color to compare against toMakeA11y for the contrast.

Color none
$ratioKey

The keyword 'A' or 'AA' to set the WCAG 2.x contrast ration of 3.0 or 4.5 compliance levels respectively.

'a' or 'aa'$bc-wcag2-contrast-lvl

Output

  • Returns accessible background and text colors.

Requires

Used by

bc-badge--dark

@mixin bc-badge--dark() { ... }
View source

Description

Mixin for the inverted styles.

Parameters

None.

Output

Transparent bg with white borders and text.

Requires

bc-btn-colors

@mixin bc-btn-colors($text-color, $bg-color, $border-color, $ratioKey: $bc-wcag2-contrast-lvl) { ... }
View source

Description

Button accessible foreground–background + border color mixin.

The $ratioKey value is set via the $bc-wcag2-contrast-lvl variable.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$text-color

The color that is to be changed.

Color none
$bg-color

The background color to compare against toMakeA11y for the contrast.

Color none
$border-color

The border color.

Color none
$ratioKey

The keyword 'A' or 'AA' to set the WCAG 2.x contrast ration of 3.0 or 4.5 compliance levels respectively.

'a' or 'aa'$bc-wcag2-contrast-lvl

Output

  • Returns accessible background and text colors.

Requires

bc-btn-colors--disabled

@mixin bc-btn-colors--disabled() { ... }
View source

Description

Button accessible foreground–background + border color :disabled/--disabled state mixin.

Parameters

None.

Output

  • Returns accessible background and text colors.

bc-trust-color

@mixin bc-trust-color($fg-text-color) { ... }
View source

Description

Mixin for generating Trust badge colors.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$fg-text-color

The trust badge text color.

Color none

Output

Correct badge text color and background-color.

Requires

bc-btn--icon

@mixin bc-btn--icon($icon-dimensionsKey: md, $placement: before, $text: visibleText) { ... }
View source

Description

Button + icon mixin

Include this mixin if you need to create custom buttons with custom icons.

Please use the .bc-btn--icon class that implements the defaults if you want a medium-sized icon, placed before the text, and want the text visible.

Please use the .bc-btn--icon-hidden-text class if you need a medium-sized icon, placed before the text, and wish to visually hide the button’s text.

If you need a custom icon use this mixin and pass it the arguments needed.

You then need create your own class within which you wish to add your icon as a background-image in either a &::before/&::after block, in alignment with the positioning argument you passed the mixin.

You can also choose to visually hide the button’s text. If you do this you’ll have to wrap the button text inside a <span>. Please also ensure that you give the button an aria-label corresponding to the button text.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$icon-dimensionsKey

anyone one of: sm, md, lg, or xl

Keywordsmd
$placement

icon placement, either: before or after

Keywordsbefore
$text

visually show the button text (must be wrapped inside a <span>), either visibleText or hiddenText

KeywordsvisibleText

Throws

  • ERROR: Oi mate, the bc-btn--icon mixin only takes the following icon dimension keywords: sm, md, lg, or xl.

  • ERROR: Oi mate, the bc-btn--icon mixin only takes the following icon placement keywords: before or after.

  • ERROR: Oi mate, the bc-btn--icon mixin only takes the following hide/show text keywords: visibleText or hiddenText.

Requires

bc-outline

@mixin bc-outline($outline, $outline-color--hover) { ... }
View source

Description

Mixin to add outline styles to the text inputs, dropdowns etc.

Input States such valid, invalid can be achieved with this mixin.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$outline

Sets the outline styles.

Outline none
$outline-color--hover

Sets the hover color for outline.

Color none

Output

  • Returns outline styles.

variables

bc-btn-height

$bc-btn-height: 3em !default;
View source

Description

Default button height

vertical-nav

css

.bc-vertical-nav

.bc-vertical-nav { ... }

Description

Vertical navigation

Used for third-level navigation (after Primary and Secondary/Subnav).

.bc-vertical-nav__list

.bc-vertical-nav__list { ... }

Description

Nested sublist styles (secondary and tertiary)

Styles for nested <ul> lists.

.bc-vertical-nav--leftactive

.bc-vertical-nav--leftactive { ... }

Description

Vertical navigation, left active item border style variant

Use for when placed to the right of the content they control.

vrt-logo

css

.bc-vrt-logo--inline

.bc-vrt-logo--inline { ... }

Description

VRT logo, inlined variant.

For use with text. The logo will scale proportionally to the inlined text.

.bc-vrt-logo--small

.bc-vrt-logo--small { ... }

Description

VRT logo, small variant.

.bc-vrt-logo--large

.bc-vrt-logo--large { ... }

Description

VRT logo, large variant.