Accordion list container.

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

Accordion container styles.

Intended to be chained wiht .bc-panel.

Open accordion variant.

Adds visual changes to indicate the accordion is currently open.

The title of the accordion.

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

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.

Animation transition-duration

The fractional value in milliseconds.

Expected usage

Use setting the duration of most UI animations.

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

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

Animation transition-duration, fast

Fractional value in milliseconds.

Expected usage

Use for setting nav and menu hover animation transitions.

Note this is very fast.

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

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.

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.

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.

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.

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

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

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

Shared bar properties (<dd>).

Default bar label.

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

Extra-small size variant.

Small size variant.

Large size variant.

‘Ruled’ barcharts wrapper variant.

Applies vertical rules/lines at 10% intervals.

[Priority] Severity bar graphs.

…

Blank state (container)

Blank state heading/title.

Blank state body/description.

blank-state small variant.

blank-state large variant.

blank-state borderless, transparent background variant.

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

Body, light theme [default]

Light theme shade variant.

Light theme (darkest) shade variant.

Body, dark theme

Dark theme tint variant.

Dark theme (lightest) tint variant.

Body variant for interstitial pages.

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

Button, positive variant

Button, negative variant

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

Button, link variant

Setup is a partial duplication of the bc-body a { … } styles.

Button, tertiary variant

Button, small variant

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

Button, large variant

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

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.

Button icon visually hidden text helper class

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

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

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.

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

Program brief/document icon button

Cross button icon appearing as an X

Usage: Used for cancel, close or delete actions.

Download icon button

Edit button

Delete button (trash can)

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

Attach/upload button icon.

More button icon (...)

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

Visible/Public (eye) icon

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

Invisible/Private (eye) icon

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

Plus/add (+) icon

Usage: Use for add or create button actions.

Search button icon

Usage: Use for search button actions

Drag button icon

Usage: Use for drag and drop UI

Print button icon

Usage: Use for print button actions

Dropdown collapsed (down carat) button icon

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

Dropdown expanded (up carat) button icon

Usage: Use for buttons that will close a dropdown menu

Next button icon

Usage: Use for buttons that go to the next step

Previous button icon

Usage: Use for buttons that go to the previous step

Checklist assistant nav wrapper

Checklist

Checklist item

Checklist complete[d] item variant

Checklist item link/anchor

Checklist item anchor right-hand arrow icon

‘bugOrange’

Expected usage

TODO: guidance.

‘horizon’

Expected usage

TODO: guidance.

white

Expected usage

TODO: guidance.

black

Expected usage

TODO: guidance.

‘persianRed’

Expected usage

Used for P1.

‘casablanca’

Expected usage

Used for P3.

‘limeade’

Expected usage

Used for P4.

‘blueLagoon’

Expected usage

Used for P5.

‘sanMarino’

Expected usage

Used for Triaged state.

‘carribeanGreen’

Expected usage

Used for Resolved state.

‘deepSea’

Expected usage

Used for Resolved state.

‘purpleHeart’

Expected usage

Used for Duplicate state.

‘pomegranate’

Expected usage

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

‘mineShaft’

Expected usage

TODO: guidance.

‘smoke’

Expected usage

TODO: guidance.

‘dustyGrey’

Expected usage

TODO: guidance.

‘alabaster’

Expected usage

TODO: guidance.

‘sandcastle’

Expected usage

TODO: guidance.

‘P0’

Expected usage

Used for P0/Emergency priority submissions.

‘P1’

Expected usage

Used for P1/Critical priority submissions.

‘P2’

Expected usage

Used for P3/High priority submissions.

‘P3’

Expected usage

Used for P3/Medium priority submissions.

‘P4’

Expected usage

Used for P4/Low priority submissions.

‘P5’

Expected usage

Used for P5/Informational priority submissions.

‘P6’

Expected usage

Really?

‘New’

Expected usage

Used for New submissions.

‘Triaged’

Expected usage

Used for Triaged submissions.

‘Resolved’

Expected usage

Used for Resolved submissions.

‘Unresolved’

Expected usage

Used for Unresolved submissions.

‘Duplicate’

Expected usage

Used for Duplicate submissions.

‘Out of scope’

Expected usage

Used for Out of scope submissions.

‘Not reproducible’

Expected usage

Used for Not reproducible submissions.

‘Won’t fix’

Expected usage

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

‘Not applicable’

Expected usage

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

Light theme: Foreground - Text color.

Expected usage

Applied to general text set on the default background colors.

Light theme: Foreground - Border.

Expected usage

Applied as a color to common borders.

Light theme - Background color (lightest shade).

Expected usage

The base (light theme) background color.

Light theme: Background - Transparent shade.

Expected usage

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

Light theme: Background - Transparent shade, alternative.

Expected usage

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

Why RGBA? https://stackoverflow.com/a/7224621

Light theme - Background: UI.

Expected usage

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

Light theme - Background: UI [internal] shadow.

Expected usage

Applied as an internal box-sahdow to UI components

Light theme: Background - Shade.

Expected usage

Darker default light theme background color.

Light theme: Background - Alternative [darker shade].

Expected usage

Darkest default light theme background color.

Light theme: Foreground - Secondary text color.

Expected usage

Applied to general text set on the default background colors.

Light theme - Foreground: Link/anchor text color.

Expected usage

Applied to text anchors.

Light theme - Foreground: on :hover link/anchor text color.

Expected usage

Applied to text anchors on :hover.

Light theme - Foreground: :focus color.

Expected usage

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

Light theme: Background - Active UI.

Expected usage

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

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.

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.

Light theme: Background - Disabled UI.

Expected usage

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

Light theme: Foreground - Disabled UI.

Expected usage

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

Light theme: Foreground - Disabled UI border.

Expected usage

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

Light theme: Background - Disabled Read-only UI.

Expected usage

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

Light theme: Foreground - Disabled Read-only UI.

Expected usage

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

Light theme: Foreground - Disabled UI border.

Expected usage

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

Light theme: Foreground - UI text.

Expected usage

Applied to the text of UI components.

Light theme: Foreground - UI text, placeholder.

Expected usage

Applied to the text of input ::placeholder content.

Light theme: Foreground - Disabled UI text.

Expected usage

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

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

Expected usage

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

Light theme: Foreground - UI marks/graphics.

Expected usage

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

Light theme: Foreground - UI border.

Expected usage

Applied to the borders of UI components.

Light theme: Foreground - UI border :hover.

Expected usage

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

Light theme: Background - Private message.

Expected usage

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

Light theme: Background - Bugcrowd internal message.

Expected usage

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

Dark theme: Foreground - Text color.

Expected usage

Applied to general text set on a colordark background color.

Dark theme: Foreground - Border.

Expected usage

Applied as a color to common borders.

Dark theme: Background - color (lightest shade).

Expected usage

The base dark theme background color.

Dark theme: Background - Transparent shade.

Expected usage

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

Dark theme: Background - Transparent shade, alternative.

Expected usage

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

Why RGBA? https://stackoverflow.com/a/7224621

Dark theme: Background - UI.

Expected usage

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

Dark theme - Background: UI [internal] shadow.

Expected usage

Applied as an internal box-sahdow to UI components

Dark theme: Background - Shade.

Expected usage

Lighter dark theme background color.

Dark theme: Background - Alternative [darker shade].

Expected usage

Lightest dark theme background color.

Dark theme: Foreground - Link text color.

Expected usage

Applied to text anchors.

Expected usage

Applied to text anchors on :hover.

Dark theme: Foreground - Secondary text color.

Expected usage

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

Dark theme: Foreground - :focus color.

Expected usage

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

Dark theme: Background - Active UI.

Expected usage

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

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.

Dark theme: Background - Selected UI.

Expected usage

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

Dark theme: Background - Disabled UI.

Expected usage

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

Dark theme: Foreground - Disabled UI.

Expected usage

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

Dark theme: Foreground - Disabled UI text.

Expected usage

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

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

Expected usage

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

Dark theme: Foreground - Disabled UI border.

Expected usage

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

Dark theme: Background - Disabled Read-only UI.

Expected usage

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

Dark theme: Foreground - Disabled Read-only UI.

Expected usage

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

Dark theme: Foreground - Disabled UI border.

Expected usage

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

Dark theme: Foreground - UI text.

Expected usage

Applied to the text of UI components.

Dark theme: Foreground - UI text, placeholder.

Expected usage

Applied to the text of input ::placeholder content.

Dark theme: Foreground - UI marks/graphics.

Expected usage

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

Dark theme: Foreground - UI border.

Expected usage

Applied to the borders of UI components.

Dark theme: Foreground - UI border :hover.

Expected usage

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

Dark theme: Background - Private message.

Expected usage

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

Dark theme: Background - Bugcrowd internal message.

Expected usage

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

Light theme: Foreground - Text color - Positive.

Expected usage

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

Light theme: Foreground - Text color - Negative.

Expected usage

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

Dark theme: Foreground - Text color - Positive.

Expected usage

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

Dark theme: Foreground - Text color - Negative.

Expected usage

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

Informational, light theme.

Expected usage

Used for informational dialogs, alerts, and messaging.

Informational, dark theme.

Expected usage

Used for informational dialogs, alerts, and messaging.

Operation successful/live, light theme.

Expected usage

Used for successful operations or to indicate something is live.

Operation successful/live, dark theme.

Expected usage

Used for successful operations or to indicate something is live.

Error, light theme.

Expected usage

Used to indicate an error or problem has occurred.

Error, dark theme.

Expected usage

Used to indicate an error or problem has occurred.

Warning, light theme.

Expected usage

Used to indicate warnings or caution.

Warning, dark theme.

Expected usage

Used to indicate warnings or caution.

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

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

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.

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.

Current WCAG 2.x color contrast ratio compliance setting.

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

WCAG2 Sass @warn standard-out messaging

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

Extra-small breakpoint.

Small breakpoint.

Medium breakpoint.

Large (desktop) breakpoint.

Extra Large (fullscreen desktop) breakpoint.

Z-indexes.

Contextual layers for handling things that require z-indexes.

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.

The control input label text.

::after is used to position the SVGs.

The actual radio button or checkbox input.

‘Unlabelled’ control inputs.

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

Invalid styles for control inputs that cause an error.

Card-style control inputs.

Use for simplified forms that involve multiple steps to complete.

The container for the select.

The icon is applied via an SVG on ::after.

The actual dropdown.

Can be applied to a <select> or <button>.

Sets the border styles, etc.

Disabled dropdown.

Provided via a class and directly via the disabled attribute.

Dropdown block variant.

Invalid [state] dropdown variant.

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

Top-level BEM class for BcErrorBoundary.

.bc-error-boundary__footer

Default fieldset.

Fieldset legend

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

Visible fieldset variant.

Unbordered fieldset

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

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.

The input[type=file].

Disabled state file inputs

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

File input block variant.

Fixed text input.

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

Shared styles for both the prepend and append child elements.

Fixed text inputs with a prepend.

Fixed text inputs with an append.

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

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

“Block” Fixed text input variant.

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

Top-level BEM class for BcFooter.

The form wrapper/container class.

Apply to <form> elements.

Use to group labels and inputs together.

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.

Use to hold CRUD actions associated with a <form>.

Check if value is a number in Sass

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

Check if value is a [time] duration in Sass

Check if value is an integer in Sass

Check if value is a relative unit in Sass

Check if value is an absolute unit in Sass

Check if value is a percentage in Sass

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

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

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

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

Lighten a color by mixing white into it.

Darken a color by mixing black into it.

Replace a string with a string.

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

Dynamically set z-indexes contextually.

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

Example codepens:

• https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
• http://codepen.io/jakob-e/pen/doMoML

Blend RGBA color onto another color.

• Adapted from https://github.com/heygrady/scss-blend-modes

Calculate color luminance.

• Adapted from https://github.com/voxpelli/sass-color-helpers/blob/master/stylesheets/color-helpers/_contrast.scss;
• Which was adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
• Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

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.

• Adapted from https://github.com/voxpelli/sass-color-helpers/blob/master/stylesheets/color-helpers/_contrast.scss;
• Which was adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
• Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

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.

Number of grid columns

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

Gutter width

The white space between each grid column.

sm breakpoint container width

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

md breakpoint container width

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

lg breakpoint container width

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

xl breakpoint container width

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

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.

Bootstrap grid classes with the correct left and right padding.

Float helper mixin.

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

Bootstrap grid classes with float set.

Column width calculation helper mixin.

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

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

Calculation helper combinator mixin.

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

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

Grid generation mixin.

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

Complete Bootstrap grid classes with desired properties.

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.

Screen-reader only helper class.

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

Clearfix helper class.

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

No-margin helper class.

Removes all margins.

No-padding helper class.

Removes all padding.

Display: block helper class.

Sets display: block.

Display: block helper class.

Sets display: inline-block.

Display: inline helper class.

Sets display: inline.

Left-aligned text helper class.

Sets text-align to left.

Centered text helper class.

Sets text-align to center.

Right-aligned text helper class.

Sets text-align to right.

Mouse cursor pointer helper class.

Sets cursor styles to ‘pointer’.

Hide in print helper class.

Hides elements in print media.

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

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

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

Display: Flex display helper class [parent].

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

Sets display: flex.

Flex wrap (flow) helper class [parent].

Sets flex-wrap: wrap.

Flex flow row helper class [parent].

Flex flow column helper class [parent].

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

Flex align-items center helper class [parent].

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

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

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

Flex justify-content center helper class [parent].

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

Flex child shorthand helper class [child]

Sets flex: 1; // 1 0 0%

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

Hint text

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

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

.bc-icons small size variant

Aligned with .bc-avatar sizing.

.bc-icons large size variant

.bc-icons x-large size variant

.bc-icons xx-large size variant

.bc-icons inline 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.

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

Active/checked state button helper class.

Custom --active class for manually setting states.

Block variant.

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

“Left” variant.

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

.bc-kbd

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

[Form] Label.

.bc-loader container

.bc-loader__hex icon animation element

.bc-loader accessible hint text

Markdown content styling wrapper.

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

Style of a Markdown comment visible only between 2 users.

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

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.

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

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.

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

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.

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

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.

Clearfix using pseudo-elements.

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

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

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

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

Inline code style mixin.

Styles code when it appears nested inside other text elements.

Sets inline-block and relative font size.

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/

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

Media query mixin.

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

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

Smooth text mixin.

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

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

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.

Sets rules for truncating text

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

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.

Nav ToC (Table of Content)

4th-tier Table of Contents-style navigation block wrapper class.

Nav ToC list

Styles for nested <ol> lists.

Nav ToC links

Styles for the ToC anchors that link to on-page IDs.

Nav ToC fixed positioning variant

Sets position fixed.

TODO: Consider offering media-query gated classes?

Nav ToC sticky positioning variant

Sets position sticky.

TODO: Consider offering media-query gated classes?

Nav ToC large font size variant

Increases font size for base component to $bc-font-size--lg.

Nav ToC small font size variant

Decreases font size for base component to $bc-font-size--sm.

Responsive media block class

Responsive media video variant

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

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

Responsive video (child) element

Responsive images

Skip-to link <nav> wrapper

Skip to link classes

Stepped nav wrapper

Step item.

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

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

Current/selected link styles

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

Anchor link styles

Accordion toggle button styles

Accordion content

Subnav [nav] wrapper.

Subnav [ul].

Subnav list [li] items.

Subnav active/current [li] item variant

Subnav [nav] wrapper small-size variant.

Reduces font-size and scales component accordingly given em setup.

Switch input container.

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.

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

Tabbed nav’s container (<nav>).

A Tabbed nav’s tab (list item).

A Tabbed nav’s active tab.

Tag

Tags (list container class)

Default text input.

:disabled state text input / --disabled variant.

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

Invalid [state] text input variant.

Valid [state)] text input variant.

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

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

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.

Text input <textarea> variant.

Text input block layout variant.

Text input private message variant.

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

Text input Bugcrowd team note variant.

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

Trend component (default)

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

Trend component, up variant

Trend component, down variant

Trend component, small-sized variant

Trend component, large-sized variant

Trend component, extra large-sized variant

.bc-trust

Default style is that of “newcomer”.

.bc-trust--exceptional

.bc-trust--good

.bc-trust--low

.bc-trust--block

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.

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.

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.

Default font-size

number, in pixels

Extra, extra-small font-size

Set in rems (outputs 10px).

Extra-small font-size

Set in rems (outputs 12px).

Smaller font-size

Set in rems (outputs 14px).

Larger font-size

Set in rems (outputs 18px).

Extra-large font-size

Set in rems (outputs 24px).

Extra, extra-large font-size

Set in rems (outputs 32px).

Base/default font weight.

Set to normal keyword (equates to 400).

Bolded font weight.

Set to bold keyword (equates to 700).

Semi-bolded font weight.

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

The measure [of a line].

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

Our system font stack.

Expected usage

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

Our monospace font stack.

Expected usage

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

Default avatar at 40px.

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

Square variant.

Inline variant.

Large variant.

Small variant.

Extra-small variant.

Accent border color variant.

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

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.

Date/time input field (wrapper)

Date/time field clock icon variant

Date/time field disabled variant

Date/time 100% width block variant

Code highlight block

TODO: full dark variant support.

.bc-pagination__page-menuitems

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

Progress bar value.

Progress bar <output>.

Success variant.

Brand variant.

Extra small variant.

Small variant.

Large variant.

Inline variant.

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

Mixin for generating (default) filled badge color styles.

Correct badge background- and border-color.

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

Correct badge background- & border-color.

Button accessible foreground–background accessible color mixin.

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

• Returns accessible background and text colors.

Mixin for the inverted styles.

Transparent bg with white borders and text.

Button accessible foreground–background + border color mixin.

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

• Returns accessible background and text colors.

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

• Returns accessible background and text colors.

Mixin for generating Trust badge colors.

Correct badge text color and background-color.

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.

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

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

• Returns outline styles.

Default button height

Vertical navigation

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

Nested sublist styles (secondary and tertiary)

Styles for nested <ul> lists.

Vertical nav item anchor/button class

Vertical nav item “count” badge container

Vertical navigation, left active item border style variant

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

VRT logo, default size.

Use as-is; use the inline variant for inlining with text.

VRT logo, inlined variant.

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

VRT logo, small variant.

VRT logo, large variant.