Utilities

Variables

Component variables are used to theme a component. They likely will be left as is, but if needed can be overwritten by duplicating the variable in a @key: value format with a different value. This customized variable would be placed in the same file where this component’s less file is imported. Color variables referenced in comments are from cf-core cf-brand-colors.less.

Buttons

Color

// .btn
@btn-text:                  @white;
@btn-bg:                    @pacific;
@btn-bg-hover:              @pacific-dark;
@btn-bg-active:             @navy;

// .btn__secondary
@btn__secondary-text:       @white;
@btn__secondary-bg:         @gray;
@btn__secondary-bg-hover:   @gray-dark;
@btn__secondary-bg-active:  @black;

// .btn__warning
@btn__warning-text:         @white;
@btn__warning-bg:           @red-mid-dark;
@btn__warning-bg-hover:     @red-dark;
@btn__warning-bg-active:    @gray-dark;

// .btn__disabled
@btn__disabled-text:        @gray;
@btn__disabled-bg:          @gray-20;
@btn__disabled-outline:     @gray-20;

Sizing

// .btn
@btn-font-size:             @base-font-size-px;
@btn-border-radius-size:    4px;
@btn-v-padding:             8px;
@btn-h-padding:             14px;
@btn-v-padding-modifier-ie: 0.8;

Forms

Color

// .a-text-input borders
@input-border:                            @gray-60;
@input-border__hover:                     @pacific;
@input-border__focused:                   @pacific;
@input-border__active:                    @pacific;
@input-border__error:                     @red;
@input-border__warning:                   @gold;
@input-border__success:                   @green;
@input-border__selected:                  @pacific;

// .a-text-input backgrounds
@input-bg:                                @white;
@input-bg__selected:                      @pacific;
@input-bg__disabled:                      @gray-10;
@input-bg__disabled-selected:             @gray-40;

// .a-text-input text
@input-text:                              @black;
@input-text__disabled:                    @gray;
@input-text__placeholder:                 @gray;

// .a-text-input icons
@input-icon__error:                       @red;

// .a-select
@select-border:                           @input-border;
@select-icon-bg:                          @gray-10;
@select-text__disabled:                   @input-text__disabled;

// .m-form-field
@form-field-input-border:                 @input-border;
@form-field-input-border__focused:        @input-border;
@form-field-input-border__disabled:       @gray-60;

// .m-form-field__lg-target
@form-field-input-lg-target-bg:           @gray-10;
@form-field-input-lg-target-bg__selected: @pacific-20;
@form-field-input-lg-target-bg__disabled: @gray-20;
@form-field-input-lg-target-border:       @pacific;

// .a-label_helper
@label-helper:                            @gray;

Sizing

// .a-select
@select-height: 30px;

Grid

@grid_wrapper-width: 1230px;

The grid’s maximum width in px. This value can be overridden in the grid_wrapper() mixin.

@grid_gutter-width: 30px;

The fixed width between columns.

@grid_total-columns: 12;

The total number of columns used in calculating column widths. This value can be overridden in the grid_column() mixin.

@grid_debug: false;

Gives column blocks a background color if set to true.

Breakpoints

@bp-xs-max:  600px;
@bp-sm-min:  @bp-xs-max + 1px;
@bp-sm-max:  900px;
@bp-med-min: @bp-sm-max + 1px;
@bp-med-max: 1020px;
@bp-lg-min:  @bp-med-max + 1px;
@bp-lg-max:  1230px;
@bp-xl-min:  @bp-lg-max + 1px;

Icons

Sizing

The standard icon height in ems matches the 19px rendered canvas of text set in Avenir Next sized at 16px (19/16 = 1.1875).

@cf-icon-height: 1.1875em;

Layout

Color

// .block
@block__bg:                 @gray-5;
@block__border:             @gray-40;
@block__border-top:         @gray-40;
@block__border-right:       @gray-40;
@block__border-bottom:      @gray-40;
@block__border-left:        @gray-40;

// .content_main
@content_main-border:       @gray-40;

// .content_sidebar
@content_sidebar-bg:        @gray-5;
@content_sidebar-border:    @gray-40;

// .content_line
@content_line:              @gray-40;

// .grid_column__top-divider
@grid_column__top-divider:  @gray-40;

// .grid_column__left-divider
@grid_column__left-divider: @gray-40;

Heroes and featured content modules

Color

// Hero variables
@hero-bg:                   @gray-5;
@hero-knockout-bg:          @gray;
@hero-knockout-text:        @white;

// Featured Content Module variables
@fcm-bg:                    @block__bg;

Sizing

// Hero variables
@hero-desktop-height: 285px;

Notifications

Color

@notification-bg:             @gray-5;
@notification-bg-success:     @green-10;
@notification-bg-warning:     @gold-10;
@notification-bg-error:       @red-10;

@notification-border:         @gray-40;
@notification-border-success: @green;
@notification-border-warning: @gold;
@notification-border-error:   @red;

@notification-icon:           @gray;
@notification-icon-success:   @green;
@notification-icon-warning:   @gold;
@notification-icon-error:     @red;

Sizing

@notification-padding__px: 15px;

Pagination

Color

@pagination-text: @gray;
@pagination-bg:   @gray-10;

Sizing

@pagination-btn-min-width-px: 130px;

Tables

Color

@table-cell-bg:              @white;
@table-cell-bg_alt:          @gray-5;
@table-row-link-bg-hover:    @pacific-80;
@table-row-link-hover-color: @white;
@table-head-text:            @text;
@table-head-bg:              @gray-5;
@table-scrolling-border:     @gray-40;
@table-border:               @gray;

Typography

Color

// Running text elements

// .a-date
@date:                      @gray;

// .m-pull-quote
@pull-quote_body:           @black;
@pull-quote_citation:       @gray;

// Headings

// .a-heading__icon
@heading__icon:             @black;
@heading__icon__hover:      @link-text-hover;

// Headers

// .m-slug-header
@slug-header_border__thin:  @gray-10;
@slug-header_border__thick: @green;

// .m-meta-header
@meta-header_border:        @gray-40;

// Body
@text:                      @black;

// Links
// a
@link-text:              @pacific;
@link-underline:         @pacific;
@link-text-visited:      @teal;
@link-underline-visited: @teal;
@link-text-hover:        @pacific-dark;
@link-underline-hover:   @pacific-dark;
@link-text-active:       @navy;
@link-underline-active:  @navy;

// .a-link__jump
@jump-link_bg:           @gray-5;
@jump-link_border:       @gray-40;

// code
@code-text:              @text;
@code-bg:                @gray-5;

Sizing

@base-font-size-px:   16px;
@base-line-height-px: 22px;
@base-line-height:    unit( ( @base-line-height-px / @base-font-size-px ) );

@size-xl:             48px; // Super-size

@size-i:              34px; // h1-size
@size-ii:             26px; // h2-size
@size-iii:            22px; // h3-size
@size-iv:             18px; // h4-size
@size-v:              14px; // h5-site
@size-vi:             12px; // h6-size
@size-code:           13px; // Custom size only for Mono code blocks

Font stack

Override this variable in order to specify a font stack other than the CFPB’s default brand font and fallback. @font-stack: 'Avenir Next', Arial, sans-serif;

@font-face file path

Use this variable to point to the file containing your @font-face rules. To use none, set it to an empty string. @font-face-path: 'licensed-fonts.less';

Font source

Use this variable to specify where the fonts declared in licensed-fonts.less are located when self-hosting the font files. Can be either a relative or absolute path.

@cf-fonts-path: '/static/fonts'`;