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 sourceDescription
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.
Type
Number
bc-animate-ui-duration-fast
$bc-animate-ui-duration-fast: 10ms !default;
View sourceDescription
Animation transition-duration, fast
Fractional value in milliseconds.
Expected usage
Use for setting nav and menu hover animation transitions.
Note this is very fast.
Type
Number
bc-animate-ui-timing-func
$bc-animate-ui-timing-func: ease-in-out !default;
View sourceDescription
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 sourceDescription
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 sourceDescription
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
- [mixin]
bc-btn--icon
bc-animate-ui-fast
$bc-animate-ui-fast: $bc-animate-ui-duration-fast $bc-animate-ui-timing-func-fast !default;
View sourceDescription
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
css
.bc-banner
.bc-banner { ... }
Description
Banner top-level container.
.bc-banner__icon
.bc-banner__icon { ... }
Description
Banner icon container.
.bc-banner__message
.bc-banner__message { ... }
Description
Banner message container.
.bc-banner__title
.bc-banner__title { ... }
Description
Banner title
Ideally should be a semantically-correct h1..6.
.bc-banner__description
.bc-banner__description { ... }
Description
Banner description/content/message.
.bc-banner__actions
.bc-banner__actions { ... }
Description
Banner actions
Note the banner description could have its own inline-paragraph links.
.bc-banner--info
.bc-banner--info { ... }
Description
Banner info variant/modifier
.bc-banner--warning
.bc-banner--warning { ... }
Description
Banner warning variant/modifier
.bc-banner--error
.bc-banner--error { ... }
Description
Banner error variant/modifier
bar-charts
css
.bc-barcharts
.bc-barcharts { ... }
Description
Wrapper for a bar chart, or group of bar charts.
.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--link
.bc-btn--link { ... }
Description
Button, link variant
Setup is a partial duplication of the bc-body a { … } styles.
.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--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--search
.bc-btn--search { ... }
Description
Search button icon
Usage: Use for search 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
.bc-checklist-assistant__link
.bc-checklist-assistant__link { ... }
Description
Checklist item link/anchor
&::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 sourceDescription
‘bugOrange’
Expected usage
TODO: guidance.
Type
Color
bc-palette-primary-horizon-blue
$bc-palette-primary-horizon-blue: #296fd1 !default;
View sourceDescription
‘horizon’
Expected usage
TODO: guidance.
Type
Color
bc-palette-primary-white
$bc-palette-primary-white: #fff !default;
View sourceDescription
white
Expected usage
TODO: guidance.
Type
Color
bc-palette-primary-black
$bc-palette-primary-black: #000 !default;
View sourceDescription
black
Expected usage
TODO: guidance.
Type
Color
bc-palette-secondary-persian-red
$bc-palette-secondary-persian-red: #d13535 !default;
View sourceDescription
‘persianRed’
Expected usage
Used for P1.
Type
Color
bc-palette-secondary-casablanca-orange
$bc-palette-secondary-casablanca-orange: #f0ad4e !default;
View sourceDescription
‘casablanca’
Expected usage
Used for P3.
Type
Color
bc-palette-secondary-limeade-green
$bc-palette-secondary-limeade-green: #5eae00 !default;
View sourceDescription
‘limeade’
Expected usage
Used for P4.
Type
Color
bc-palette-secondary-lagoon-blue
$bc-palette-secondary-lagoon-blue: #0278b8 !default;
View sourceDescription
‘blueLagoon’
Expected usage
Used for P5.
Type
Color
bc-palette-tertiary-san-marino-blue
$bc-palette-tertiary-san-marino-blue: #3f51b5 !default;
View sourceDescription
‘sanMarino’
Expected usage
Used for Triaged state.
Type
Color
bc-palette-tertiary-carribean-green
$bc-palette-tertiary-carribean-green: #00bfa5 !default;
View sourceDescription
‘carribeanGreen’
Expected usage
Used for Resolved state.
Type
Color
bc-palette-tertiary-deep-sea-green
$bc-palette-tertiary-deep-sea-green: #0f8063 !default;
View sourceDescription
‘deepSea’
Expected usage
Used for Resolved state.
Type
Color
bc-palette-tertiary-purple-heart
$bc-palette-tertiary-purple-heart: #673ab7 !default;
View sourceDescription
‘purpleHeart’
Expected usage
Used for Duplicate state.
Type
Color
bc-palette-tertiary-pomegranate-red
$bc-palette-tertiary-pomegranate-red: #f44a3d !default;
View sourceDescription
‘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 sourceDescription
‘mineShaft’
Expected usage
TODO: guidance.
Type
Color
bc-palette-tertiary-smoke-grey
$bc-palette-tertiary-smoke-grey: #666 !default;
View sourceDescription
‘smoke’
Expected usage
TODO: guidance.
Type
Color
bc-palette-tertiary-dusty-grey
$bc-palette-tertiary-dusty-grey: #999 !default;
View sourceDescription
‘dustyGrey’
Expected usage
TODO: guidance.
Type
Color
bc-palette-tertiary-alabaster-white
$bc-palette-tertiary-alabaster-white: #fafafa !default;
View sourceDescription
‘alabaster’
Expected usage
TODO: guidance.
Type
Color
bc-palette-tertiary-sandcastle-yellow
$bc-palette-tertiary-sandcastle-yellow: #fffbdc !default;
View sourceDescription
‘sandcastle’
Expected usage
TODO: guidance.
Type
Color
bc-color-p0
$bc-color-p0: $bc-palette-primary-black !default;
View sourceDescription
‘P0’
Expected usage
Used for P0/Emergency priority submissions.
Type
Color
bc-color-p1
$bc-color-p1: $bc-palette-secondary-persian-red !default;
View sourceDescription
‘P1’
Expected usage
Used for P1/Critical priority submissions.
Type
Color
bc-color-p2
$bc-color-p2: $bc-palette-primary-bug-orange !default;
View sourceDescription
‘P2’
Expected usage
Used for P3/High priority submissions.
Type
Color
bc-color-p3
$bc-color-p3: $bc-palette-secondary-casablanca-orange !default;
View sourceDescription
‘P3’
Expected usage
Used for P3/Medium priority submissions.
Type
Color
bc-color-p4
$bc-color-p4: $bc-palette-secondary-limeade-green !default;
View sourceDescription
‘P4’
Expected usage
Used for P4/Low priority submissions.
Type
Color
bc-color-p5
$bc-color-p5: $bc-palette-secondary-lagoon-blue !default;
View sourceDescription
‘P5’
Expected usage
Used for P5/Informational priority submissions.
Type
Color
bc-color-p6
$bc-color-p6: #ad21f6 !default;
View sourceDescription
‘P6’
Expected usage
Really?
Type
Color
bc-color-new
$bc-color-new: $bc-palette-tertiary-dusty-grey !default;
View sourceDescription
‘New’
Expected usage
Used for New submissions.
Type
Color
bc-color-triaged
$bc-color-triaged: $bc-palette-tertiary-san-marino-blue !default;
View sourceDescription
‘Triaged’
Expected usage
Used for Triaged submissions.
Type
Color
bc-color-resolved
$bc-color-resolved: $bc-palette-tertiary-deep-sea-green !default;
View sourceDescription
‘Resolved’
Expected usage
Used for Resolved submissions.
Type
Color
bc-color-unresolved
$bc-color-unresolved: $bc-palette-tertiary-carribean-green !default;
View sourceDescription
‘Unresolved’
Expected usage
Used for Unresolved submissions.
Type
Color
bc-color-duplicate
$bc-color-duplicate: $bc-palette-tertiary-purple-heart !default;
View sourceDescription
‘Duplicate’
Expected usage
Used for Duplicate submissions.
Type
Color
bc-color-outofscope
$bc-color-outofscope: $bc-palette-tertiary-pomegranate-red !default;
View sourceDescription
‘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 sourceDescription
‘Not reproducible’
Expected usage
Used for Not reproducible submissions.
Type
Color
bc-color-wontfix
$bc-color-wontfix: #ff9800 !default;
View sourceDescription
‘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 sourceDescription
‘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 sourceDescription
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 sourceDescription
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 sourceDescription
Light theme - Background color (lightest shade).
Expected usage
The base (light theme) background color.
Type
Color
Used by
- [mixin]
bc-badge-unconfirmed
bc-color-bg-shade-alpha
$bc-color-bg-shade-alpha: rgb(0 0 0 / 2.5%) !default;
View sourceDescription
Light theme: Background - Transparent shade.
Expected usage
Applied to elements that need always darker bgs than the page shade used.
Type
Color
See
- [variable]
bc-color-bg-ui--hover
- [variable]
bc-color-bg-ui--selected
bc-color-bg-shade-alt-alpha
$bc-color-bg-shade-alt-alpha: rgb(0 0 0 / 5%) !default;
View sourceDescription
Light theme: Background - Transparent shade, alternative.
Expected usage
Applied to elements that need always darker bgs than the page shade used.
Type
Color
See
- [variable]
bc-color-bg-ui--hover
- [variable]
bc-color-bg-ui--selected
bc-color-bg-selection
$bc-color-bg-selection: rgba($bc-color-bg-mark, 0.9) !default;
View sourceDescription
Why RGBA? https://stackoverflow.com/a/7224621
Type
Color
bc-color-bg-ui
$bc-color-bg-ui: $bc-color-bg !default;
View sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
Light theme: Foreground - Secondary text color.
Expected usage
Applied to general text set on the default background colors.
Type
Color
bc-color-fg-link
$bc-color-fg-link: bc-color-a11y($bc-color-horizon-60, $bc-color-bg-alt) !default;
View sourceDescription
Light theme - Foreground: Link/anchor text color.
Expected usage
Applied to text anchors.
Type
Color
bc-color-fg-link--hover
$bc-color-fg-link--hover: bc-color-a11y($bc-color-horizon-80, $bc-color-bg-alt) !default;
View sourceDescription
Light theme - Foreground: on :hover
link/anchor text color.
Expected usage
Applied to text anchors on :hover
.
Type
Color
bc-color-fg-focus
$bc-color-fg-focus: bc-color-a11y($bc-color-horizon-50, $bc-color-bg-alt) !default;
View sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
Light theme: Background - Disabled Read-only UI.
Expected usage
Applied to :disabled --readonly variant UI components, greying them out slightly.
Type
Color
Used by
- [mixin]
bc-form-disabled
- [mixin]
bc-form-disabled
bc-color-fg-ui--readonly
$bc-color-fg-ui--readonly: inherit !default;
View sourceDescription
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 sourceDescription
Light theme: Foreground - Disabled UI border.
Expected usage
Applied to :disabled --readonly variant UI components, greying them out slightly.
Type
Color
Used by
- [mixin]
bc-form-disabled
- [mixin]
bc-form-disabled
bc-color-fg-ui-text
$bc-color-fg-ui-text: bc-color-a11y($bc-color-gray-80, $bc-color-bg-alt) !default;
View sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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
- [mixin]
bc-form-disabled
- [mixin]
bc-form-disabled
bc-color-fg-ui-icon
$bc-color-fg-ui-icon: bc-color-a11y($bc-color-gray-40, $bc-color-bg-alt) !default;
View sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
Dark theme: Foreground - Text color.
Expected usage
Applied to general text set on a colordark background color.
Type
Color
Used by
- [mixin]
bc-badge--dark
- [mixin]
bc-badge--dark
bc-colordark-fg-border
$bc-colordark-fg-border: rgb(255 255 255 / 25%) !default;
View sourceDescription
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 sourceDescription
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 sourceDescription
Dark theme: Background - Transparent shade.
Expected usage
Applied to elements that need always darker bgs than the page shade used.
Type
Color
See
- [variable]
bc-colordark-bg-ui--hover
- [variable]
bc-colordark-bg-ui--selected
bc-colordark-bg-shade-alt-alpha
$bc-colordark-bg-shade-alt-alpha: rgb(0 0 0 / 75%) !default;
View sourceDescription
Dark theme: Background - Transparent shade, alternative.
Expected usage
Applied to elements that need always darker bgs than the page shade used.
Type
Color
See
- [variable]
bc-colordark-bg-ui--hover
- [variable]
bc-colordark-bg-ui--selected
bc-colordark-bg-selection
$bc-colordark-bg-selection: $bc-color-bg-selection !default;
View sourceDescription
Why RGBA? https://stackoverflow.com/a/7224621
Type
Color
bc-colordark-bg-ui
$bc-colordark-bg-ui: $bc-colordark-bg !default;
View sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
Dark theme: Background - Alternative [darker shade].
Expected usage
Lightest dark theme background color.
Type
Color
bc-colordark-fg-link
$bc-colordark-fg-link: bc-color-a11y($bc-colordark-horizon-80, $bc-colordark-bg-alt) !default;
View sourceDescription
Dark theme: Foreground - Link text color.
Expected usage
Applied to text anchors.
Type
Color
bc-colordark-fg-link--hover
$bc-colordark-fg-link--hover: bc-color-a11y($bc-colordark-horizon-100, $bc-colordark-bg-alt) !default;
View sourceDescription
Expected usage
Applied to text anchors on :hover
.
Type
Color
bc-colordark-fg-secondary
$bc-colordark-fg-secondary: bc-color-a11y($bc-colordark-gray-80, $bc-colordark-bg-alt) !default;
View sourceDescription
Dark theme: Foreground - Secondary text color.
Expected usage
Applied to general text set on the dark theme’s background colors.
Type
Color
Used by
- [mixin]
bc-badge-unconfirmed
bc-colordark-fg-focus
$bc-colordark-fg-focus: bc-color-a11y($bc-colordark-horizon-90, $bc-colordark-bg-alt) !default;
View sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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
- [mixin]
bc-form-disabled
- [mixin]
bc-form-disabled
bc-colordark-fg-ui-border--disabled
$bc-colordark-fg-ui-border--disabled: rgb(255 255 255 / 7.5%) !default;
View sourceDescription
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 sourceDescription
Dark theme: Background - Disabled Read-only UI.
Expected usage
Applied to :disabled --readonly variant UI components, greying them out slightly.
Type
Color
Used by
- [mixin]
bc-form-disabled
- [mixin]
bc-form-disabled
bc-colordark-fg-ui--readonly
$bc-colordark-fg-ui--readonly: inherit !default;
View sourceDescription
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 sourceDescription
Dark theme: Foreground - Disabled UI border.
Expected usage
Applied to :disabled --readonly variant UI components, greying them out slightly.
Type
Color
Used by
- [mixin]
bc-form-disabled
- [mixin]
bc-form-disabled
bc-colordark-fg-ui-text
$bc-colordark-fg-ui-text: bc-color-a11y($bc-colordark-gray-90, $bc-colordark-bg-alt) !default;
View sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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
- [function]
bc-color-a11y
- [function]
bc-color-a11y
- [function]
bc-color-a11y
bc-wcag-warning-stdout
$bc-wcag-warning-stdout: false !default;
View sourceDescription
WCAG2 Sass @warn standard-out messaging
Toggles whether WCAG2 functions provide @warn informational messages or not.
Type
Boolean
Used by
- [function]
bc-color-a11y
- [function]
bc-color-a11y
bc-media-xs
$bc-media-xs: 576px !default;
View sourceDescription
Extra-small breakpoint.
Type
String
Used by
- [mixin]
bc-media
bc-media-sm
$bc-media-sm: 768px !default;
View sourceDescription
Small breakpoint.
Type
String
Used by
- [mixin]
bc-media
bc-media-md
$bc-media-md: 992px !default;
View sourceDescription
Medium breakpoint.
Type
String
Used by
- [mixin]
bc-media
bc-media-lg
$bc-media-lg: 1200px !default;
View sourceDescription
Large (desktop) breakpoint.
Type
String
Used by
- [mixin]
bc-media
bc-media-xl
$bc-media-xl: 1800px !default;
View sourceDescription
Extra Large (fullscreen desktop) breakpoint.
Type
String
Used by
- [mixin]
bc-media
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 sourceDescription
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
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
css
.bc-dropdown
.bc-dropdown { ... }
Description
The container for the select.
The icon is applied via an SVG on ::after
.
.bc-dropdown__select
.bc-dropdown__select { ... }
Description
The actual dropdown.
Can be applied to a <select>
or <button>
.
Sets the border styles, etc.
&:disabled, .bc-dropdown--disabled &
&:disabled,
.bc-dropdown--disabled & { ... }
Description
Disabled dropdown.
Provided via a class and directly via the disabled attribute.
.bc-dropdown--block
.bc-dropdown--block { ... }
Description
Dropdown block variant.
.bc-dropdown--invalid
.bc-dropdown--invalid { ... }
Description
Invalid [state] dropdown variant.
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 sourceDescription
Check if value is a number in Sass
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | The value to be checked. | Number | — none |
Returns
Type
—The type of the value.
Used by
- [function]
bc-is-time
- [function]
bc-is-integer
- [function]
bc-is-relative-length
- [function]
bc-is-absolute-length
- [function]
bc-is-percentage
Author
Kitty Giraudel
bc-is-time
@function bc-is-time($value) { ... }
View sourceDescription
Check if value is a time of either minutes or seconds in Sass
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | The value to be checked. | Number | — none |
Returns
Type
—The type of the value.
Requires
- [function]
bc-is-number
Used by
- [function]
bc-is-duration
Author
Kitty Giraudel
bc-is-duration
@function bc-is-duration($value) { ... }
View sourceDescription
Check if value is a [time] duration in Sass
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | The value to be checked. | Number | — none |
Returns
Type
—The type of the value.
Requires
- [function]
bc-is-time
Author
Kitty Giraudel
bc-is-integer
@function bc-is-integer($value) { ... }
View sourceDescription
Check if value is an integer in Sass
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | The value to be checked. | Number | — none |
Returns
Type
—The type of the value.
Requires
- [function]
bc-is-number
Author
Kitty Giraudel
bc-is-relative-length
@function bc-is-relative-length($value) { ... }
View sourceDescription
Check if value is a relative unit in Sass
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | The value to be checked. | Number | — none |
Returns
Type
—The type of the value.
Requires
- [function]
bc-is-number
Used by
- [function]
bc-is-length
Author
Kitty Giraudel
bc-is-absolute-length
@function bc-is-absolute-length($value) { ... }
View sourceDescription
Check if value is an absolute unit in Sass
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | The value to be checked. | Number | — none |
Returns
Type
—The type of the value.
Requires
- [function]
bc-is-number
Author
Kitty Giraudel
bc-is-percentage
@function bc-is-percentage($value) { ... }
View sourceDescription
Check if value is a percentage in Sass
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | The value to be checked. | Number | — none |
Returns
Type
—The type of the value.
Requires
- [function]
bc-is-number
Used by
- [function]
bc-is-position
- [function]
bc-tint
- [function]
bc-shade
Author
Kitty Giraudel
bc-is-length
@function bc-is-length($value) { ... }
View sourceDescription
Check if value is either a relative or absolute length unit in Sass
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | The value to be checked. | Number | — none |
Returns
Type
—The type of the value.
Requires
- [function]
bc-is-relative-length
Used by
- [function]
bc-is-position
Author
Kitty Giraudel
bc-is-position
@function bc-is-position($value) { ... }
View sourceDescription
Check if value is a length, percentage, or position (keyword) in Sass
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | The value to be checked. | Number | — none |
Returns
Type
—The type of the value.
Requires
- [function]
bc-is-length
- [function]
bc-is-percentage
Author
Kitty Giraudel
bc-space
@function bc-space($space) { ... }
View sourceDescription
Return a rem space value that equals the given input in pixels (output in rem).
Parameters
parameter Name | parameter Description | parameter Type | parameter 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
- [mixin]
bc-form-label
bc-line-space
@function bc-line-space($number, $number) { ... }
View sourceDescription
Return a space value based on the line-height and the unit em.
Parameters
parameter Name | parameter Description | parameter Type | parameter 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 sourceDescription
Lighten a color by mixing white into it.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | Color to tint | Color | — none |
$percentage | Percentage of | Number | — none |
Returns
Color
Throws
ERROR: Oi mate, the
bc-tint
function $percentage parameter requires the % unit.
Requires
- [function]
bc-is-percentage
Used by
- [mixin]
bc-badge-fill
- [mixin]
bc-trust-color
bc-shade
@function bc-shade($color, $percentage) { ... }
View sourceDescription
Darken a color by mixing black into it.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | Color to shade | Color | — none |
$percentage | Percentage of | Number | — none |
Returns
Color
Throws
ERROR: Oi mate, the
bc-shade
function $percentage parameter requires the % unit.
Requires
- [function]
bc-is-percentage
Used by
- [mixin]
bc-badge--dark
bc-replace
@function bc-replace($string, $search, $replace) { ... }
View sourceDescription
Replace a string with a string.
Example: http://codepen.io/jakob-e/pen/doMoML
Parameters
parameter Name | parameter Description | parameter Type | parameter 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
- [function]
bc-svguri
Author
bc-z
@function bc-z($context) { ... }
View sourceDescription
Dynamically set z-indexes contextually.
Parameters
parameter Name | parameter Description | parameter Type | parameter 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
- [variable]
bc-zindexes
- [variable]
bc-zindexes
- [variable]
bc-zindexes
TODO's
Consider adding a second argument to give a (positive) offset within the specified layer.
bc-svguri
@function bc-svguri($svg) { ... }
View sourceDescription
Generate an optimized SVG data-uri for embedding SVGs in our Sass.
Example codepens:
Parameters
parameter Name | parameter Description | parameter Type | parameter 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
- [function]
bc-replace
Author
bc-color-blend-normal
@function bc-color-blend-normal($foreground, $background) { ... }
View sourceDescription
Blend RGBA color onto another color.
- Adapted from https://github.com/heygrady/scss-blend-modes
Parameters
parameter Name | parameter Description | parameter Type | parameter 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
Grady Kuhnline @heygrady
bc-color-luminance
@function bc-color-luminance($color) { ... }
View sourceDescription
Calculate color luminance.
Parameters
parameter Name | parameter Description | parameter Type | parameter 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
- [function]
bc-color-contrast
Author
Pelle Wessman @voxpelli
bc-color-contrast
@function bc-color-contrast($color-one, $color-two, $ratioKey: $bc-wcag2-contrast-lvl, $silent: true, $rounded: true) { ... }
View sourceDescription
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 Name | parameter Description | parameter Type | parameter 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 | Boolean | true |
$rounded | Round the value. | Boolean | true |
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
- [function]
bc-color-luminance
Used by
- [function]
bc-color-a11y
- [function]
bc-color-a11y
- [function]
bc-color-a11y
Author
Pelle Wessman @voxpelli and Dominik Wilkowski @wilkowskidom
bc-color-a11y
@function bc-color-a11y($toMakeA11y, $immutable-color, $ratioKey: $bc-wcag2-contrast-lvl, $steps: 0.1) { ... }
View sourceDescription
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 Name | parameter Description | parameter Type | parameter 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. | Number | 0.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
- [function]
bc-color-contrast
- [function]
bc-color-contrast
- [function]
bc-color-contrast
- [variable]
bc-wcag2-contrast-lvl
- [variable]
bc-wcag2-contrast-lvl
- [variable]
bc-wcag2-contrast-lvl
- [variable]
bc-wcag-warning-stdout
- [variable]
bc-wcag-warning-stdout
Used by
- [mixin]
bc-btn-fg-bg-colors
- [mixin]
bc-badge--dark
- [mixin]
bc-trust-color
- [mixin]
bc-trust-color
Links
Author
Alex Page @aalexpaage http://alexpage.com.au
grid
variables
bc-grid-cols
$bc-grid-cols: 12 !default;
View sourceDescription
Number of grid columns
Sets the number of grod columns that should be present at all breakpoints.
Type
Number
Used by
- [mixin]
bc-grid-make-grid-cols
- [mixin]
bc-grid-float-grid-cols
- [mixin]
bc-grid-calc-grid-cols
- [mixin]
bc-grid-calc-grid-cols
- [mixin]
bc-grid-calc-grid-cols
- [mixin]
bc-grid-calc-grid-cols
- [mixin]
bc-grid-make-grid
- [mixin]
bc-grid-make-grid
- [mixin]
bc-grid-make-grid
- [mixin]
bc-grid-make-grid
bc-grid-gutter-width
$bc-grid-gutter-width: 24px !default;
View sourceDescription
Gutter width
The white space between each grid column.
Type
Number, in pixels
Used by
- [mixin]
bc-grid-make-grid-cols
- [mixin]
bc-grid-make-grid-cols
bc-grid-max-width--sm
$bc-grid-max-width--sm: ($bc-media-sm - $bc-grid-gutter-width) !default;
View sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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
- [variable]
bc-grid-cols
- [variable]
bc-grid-gutter-width
- [variable]
bc-grid-gutter-width
bc-grid-float-grid-cols
@mixin bc-grid-float-grid-cols() { ... }
View sourceDescription
Float helper mixin.
Iterates through the columns list (≥2) to set the float.
Parameters
None.
Output
Bootstrap grid classes with float set.
Requires
- [variable]
bc-grid-cols
Used by
- [mixin]
bc-grid-make-grid
bc-grid-calc-grid-cols
@mixin bc-grid-calc-grid-cols() { ... }
View sourceDescription
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
- [variable]
bc-grid-cols
- [variable]
bc-grid-cols
- [variable]
bc-grid-cols
- [variable]
bc-grid-cols
Used by
- [mixin]
bc-grid-loop-grid-cols
bc-grid-loop-grid-cols
@mixin bc-grid-loop-grid-cols() { ... }
View sourceDescription
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
- [mixin]
bc-grid-calc-grid-cols
Used by
- [mixin]
bc-grid-make-grid
- [mixin]
bc-grid-make-grid
- [mixin]
bc-grid-make-grid
- [mixin]
bc-grid-make-grid
bc-grid-make-grid
@mixin bc-grid-make-grid() { ... }
View sourceDescription
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
- [mixin]
bc-grid-float-grid-cols
- [mixin]
bc-grid-loop-grid-cols
- [mixin]
bc-grid-loop-grid-cols
- [mixin]
bc-grid-loop-grid-cols
- [mixin]
bc-grid-loop-grid-cols
- [variable]
bc-grid-cols
- [variable]
bc-grid-cols
- [variable]
bc-grid-cols
- [variable]
bc-grid-cols
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 sourceDescription
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$set | either | Boolean | true |
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 sourceDescription
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$outline-type | ‘faux’ outline (via | Keywords | offset |
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
, oroffset
!
Used by
bc-focus
@mixin bc-focus($outline-type: faux) { ... }
View sourceDescription
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$outline-type | ‘faux’ outline (via | Keywords | faux |
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] ortrue
!
Requires
- [mixin]
bc-focus-style-only
- [mixin]
bc-focus-style-only
Links
bc-clearfix
@mixin bc-clearfix() { ... }
View sourceDescription
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 sourceDescription
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$type | either disabled or readonly | Keywords | disabled |
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] orreadonly
!
Requires
- [variable]
bc-color-fg-ui-border--readonly
- [variable]
bc-color-bg-ui--readonly
- [variable]
bc-color-fg-ui-text--readonly
- [variable]
bc-color-fg-ui-border--readonly
- [variable]
bc-color-bg-ui--readonly
- [variable]
bc-color-fg-ui-text--readonly
- [variable]
bc-colordark-fg-ui-border--readonly
- [variable]
bc-colordark-bg-ui--readonly
- [variable]
bc-colordark-fg-ui-text--readonly
- [variable]
bc-colordark-fg-ui-border--readonly
- [variable]
bc-colordark-bg-ui--readonly
- [variable]
bc-colordark-fg-ui-text--readonly
bc-form-label
@mixin bc-form-label() { ... }
View sourceDescription
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
- [function]
bc-space
- [variable]
bc-font-size--sm
- [variable]
bc-font-weight--semibold
bc-content-code
@mixin bc-content-code() { ... }
View sourceDescription
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 sourceDescription
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 sourceDescription
Media query mixin.
Inlude the mixin and pass it one of the breakpoint keywords as an argument to create a media query.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$breakpoint | anyone one of: | 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
- [variable]
bc-media-xs
- [variable]
bc-media-sm
- [variable]
bc-media-md
- [variable]
bc-media-lg
- [variable]
bc-media-xl
bc-smooth-text
@mixin bc-smooth-text() { ... }
View sourceDescription
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 sourceDescription
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$width, | $inline | Keywords | — none |
Output
Sets rules for truncating text
bc-target-browser
@mixin bc-target-browser($browser) { ... }
View sourceDescription
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 Name | parameter Description | parameter Type | parameter 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-a11y-small-link-styles
@mixin bc-a11y-small-link-styles() { ... }
View sourceDescription
Accessible small or hinted/subdued-text link style mixin.
Expected usage: Use for links in small-sized and/or subdued/hinted (grey) text blocks. Note: also applied to many user-supplied content regions.
Applied because link color and state change requirements for links occuring inside reduced-size text blocks and/or reduced color contrast blocks are more stringent.
Parameters
None.
bc-line-clamp
@mixin bc-line-clamp($lines) { ... }
View sourceDescription
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$lines | — none | Number | — 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
.bc-skip-to__link
.bc-skip-to__link { ... }
Description
Skip to link classes
stepped-nav
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
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
Default font-size
number, in pixels
bc-font-size--xxs
$bc-font-size--xxs: 0.625rem !default;
View sourceDescription
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 sourceDescription
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 sourceDescription
Smaller font-size
Set in rems (outputs 14px).
Type
Number, in rems
Used by
- [mixin]
bc-form-label
bc-font-size--lg
$bc-font-size--lg: 1.125rem !default;
View sourceDescription
Larger font-size
Set in rems (outputs 18px).
Type
Number, in rems
bc-font-size--xl
$bc-font-size--xl: 1.5rem !default;
View sourceDescription
Extra-large font-size
Set in rems (outputs 24px).
Type
Number, in rems
bc-font-size--xxl
$bc-font-size--xxl: 2em !default;
View sourceDescription
Extra, extra-large font-size
Set in rems (outputs 32px).
Type
Number, in rems
bc-font-weight
$bc-font-weight: normal !default;
View sourceDescription
Base/default font weight.
Set to normal
keyword (equates to 400
).
bc-font-weight--bold
$bc-font-weight--bold: bold !default;
View sourceDescription
Bolded font weight.
Set to bold
keyword (equates to 700
).
bc-font-weight--semibold
$bc-font-weight--semibold: 500 !default;
View sourceDescription
Semi-bolded font weight.
Set to 500
, leaving things to the native font rendering engine.
Used by
- [mixin]
bc-form-label
bc-measure
$bc-measure: 42em !default;
View sourceDescription
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 sourceDescription
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 sourceDescription
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-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 sourceDescription
Mixin for generating (default) filled badge color styles.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$type-color | The badge color. | Color | — none |
Output
Correct badge background- and border-color.
Requires
- [function]
bc-tint
bc-badge-unconfirmed
@mixin bc-badge-unconfirmed($type-color) { ... }
View sourceDescription
Mixin for generating ‘unfilled’ (white bg) badge color styles.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$type-color | The badge color. | Color | — none |
Output
Correct badge background- & border-color.
Requires
- [variable]
bc-color-bg
- [variable]
bc-colordark-fg-secondary
bc-btn-fg-bg-colors
@mixin bc-btn-fg-bg-colors($text-color, $bg-color, $ratioKey: $bc-wcag2-contrast-lvl) { ... }
View sourceDescription
Button accessible foreground–background accessible color mixin.
The $ratioKey
value is set via the $bc-wcag2-contrast-lvl
variable.
Parameters
parameter Name | parameter Description | parameter Type | parameter 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
- [function]
bc-color-a11y
Used by
- [mixin]
bc-btn-colors
bc-badge--dark
@mixin bc-badge--dark() { ... }
View sourceDescription
Mixin for the inverted styles.
Parameters
None.
Output
Transparent bg with white borders and text.
Requires
- [function]
bc-color-a11y
- [function]
bc-shade
- [variable]
bc-colordark-fg-text
- [variable]
bc-colordark-fg-text
bc-btn-colors
@mixin bc-btn-colors($text-color, $bg-color, $border-color, $ratioKey: $bc-wcag2-contrast-lvl) { ... }
View sourceDescription
Button accessible foreground–background + border color mixin.
The $ratioKey
value is set via the $bc-wcag2-contrast-lvl
variable.
Parameters
parameter Name | parameter Description | parameter Type | parameter 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
- [mixin]
bc-btn-fg-bg-colors
bc-btn-colors--disabled
@mixin bc-btn-colors--disabled() { ... }
View sourceDescription
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 sourceDescription
Mixin for generating Trust badge colors.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$fg-text-color | The trust badge text color. | Color | — none |
Output
Correct badge text color
and background-color
.
Requires
- [function]
bc-color-a11y
- [function]
bc-tint
- [function]
bc-color-a11y
bc-btn--icon
@mixin bc-btn--icon($icon-dimensionsKey: md, $placement: before, $text: visibleText) { ... }
View sourceDescription
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$icon-dimensionsKey | anyone one of: | Keywords | md |
$placement | icon placement, either: | Keywords | before |
$text | visually show the button text (must be wrapped inside a | Keywords | visibleText |
Throws
ERROR: Oi mate, the bc-btn--icon mixin only takes the following icon dimension keywords:
sm
,md
,lg
, orxl
.ERROR: Oi mate, the bc-btn--icon mixin only takes the following icon placement keywords:
before
orafter
.ERROR: Oi mate, the bc-btn--icon mixin only takes the following hide/show text keywords:
visibleText
orhiddenText
.
Requires
- [variable]
bc-animate-ui
bc-outline
@mixin bc-outline($outline, $outline-color--hover) { ... }
View sourceDescription
Mixin to add outline styles to the text inputs, dropdowns etc.
Input States such valid, invalid can be achieved with this mixin.
Parameters
parameter Name | parameter Description | parameter Type | parameter 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 sourceDescription
Default button height
vertical-nav
vrt-logo
css
.bc-vrt-logo
.bc-vrt-logo { ... }
Description
VRT logo, default size.
Use as-is; use the inline variant for inlining with text.
.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.