Breakpoint viewport sizes and media queries. Breakpoints are defined as a map of (name: minimum width), order from small to large:

(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)

The map defined in the $grid-breakpoints global variable is used as the $breakpoints argument by default.

Name of the next breakpoint, or null for the last breakpoint.

breakpoint-next(sm) md breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) md breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) md

Minimum breakpoint width. Null for the smallest (first) breakpoint.

breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 576px

Maximum breakpoint width. Null for the largest (last) breakpoint. The maximum value is calculated as the minimum of the next one less 0.02px to work around the limitations of min- and max- prefixes and viewports with fractional widths. See https://www.w3.org/TR/mediaqueries-4/#mq-min-max Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. See https://bugs.webkit.org/show_bug.cgi?id=178261

breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 767.98px

Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. Useful for making responsive utilities.

breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) "" (Returns a blank string) breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) "-sm"

Media of at least the minimum breakpoint width. No query for the smallest breakpoint. Makes the @content apply to the given breakpoint and wider.

Media of at most the maximum breakpoint width. No query for the largest breakpoint. Makes the @content apply to the given breakpoint and narrower.

Media that spans multiple breakpoint widths. Makes the @content apply between the min and max breakpoints

Media between the breakpoint's minimum and maximum widths. No minimum for the smallest breakpoint, and no maximum for the largest one. Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.

Grid breakpoints (Define the minimum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries.)

Grid containers (Define the maximum width of .container for different screen sizes.)

White

Grays (shades of gray from lightest to darkest in steps of 10): 10%

Grays (shades of gray from lightest to darkest in steps of 10): 20%

Grays (shades of gray from lightest to darkest in steps of 10): 30%

Grays (shades of gray from lightest to darkest in steps of 10): 40%

Grays (shades of gray from lightest to darkest in steps of 10): 50%

Grays (shades of gray from lightest to darkest in steps of 10): 60%

Grays (shades of gray from lightest to darkest in steps of 10): 70%

Grays (shades of gray from lightest to darkest in steps of 10): 80%

Grays (shades of gray from lightest to darkest in steps of 10): 90%

Black

Grays map

Blue

Light Blue

dark blue

blue gray

Indigo

Purple

Pink

Red

Light Red

Orange

New shade of orange

Yellow

Violet

Brown

Green

Green Dark

Teal

Cyan

Colors map

Brand colors: light-blue

Brand colors: lighter

Brand colors: light

Brand colors: dark

Brand colors: primary

Brand colors: secondary

Brand colors: success

Brand colors: info

Brand colors: warning

Brand colors: danger

Brand colors (default theme) map

Brand colors: body background-color

Brand colors: body text color

Link color

Link hover color

icon in button extender

Button mixin

Close button component

Checkbox component

Multiselect component

path to local fonts

Imported font Sans Serif

Base font size

Base font size unit

Breakpoint at where font-size starts decreasing if screen width is smaller

Breakpoint unit

Resize font-size based on screen height and width

Factor of decrease

Generate enable or disable classes. Possibilities: false, "enable" or "disable"

1 rem = $rfs-rem-value px

Safari iframe resize bug: https://github.com/twbs/rfs/issues/14

Disable RFS by setting $enable-responsive-font-sizes to false

Cache $rfs-base-font-size unit

Cache $rfs-breakpoint unit to prevent multiple calls

Cache $fs unit

Add !important suffix if needed

Variables for storing static and fluid rescaling

Calculate minimum font-size for given font-size

Calculate difference between given font-size and minimum font-size for given font-size

Base font size: browser default, typically 16px

Extra Large font size: browser default, typically 18px

Large font size: browser default, typically 18px

Large font size: browser default, typically 16px

Small font size: browser default, typically 14px

Extra-small font size: browser default, typically 13px

Extra-extra-small font size: browser default, typically 12px

Extra-extra-extra-small font size: browser default, typically 10px

H1 font size: Assumes the browser default, typically 36px

H2 font size: Assumes the browser default, typically 32px

H3 font size: Assumes the browser default, typically 30px

H1 font size: Assumes the browser default, typically 26px

H5 font size: Assumes the browser default, typically 22px

H6 font size: Assumes the browser default, typically 18px

Giant button size

Large button size

Medium button size

Small button size

Extra small button size

Smallest button size

Base form element size

Giant form element size

Large form element size

Medium form element size

Small form element size

Extra small form element size

caption font size

label font size

icon placeholer

icon mixin

Responsive font-size mixin

The font-size & responsive-font-size mixin uses RFS to rescale font sizes

gutter

z-index dropdown
Warning: Avoid customizing these values. They're used for a bird's eye view of components dependent on the z-axis and are designed to all work together.

z-index sticky
Warning: Avoid customizing these values. They're used for a bird's eye view of components dependent on the z-axis and are designed to all work together.

z-index fixed
Warning: Avoid customizing these values. They're used for a bird's eye view of components dependent on the z-axis and are designed to all work together.

z-index backdrop
Warning: Avoid customizing these values. They're used for a bird's eye view of components dependent on the z-axis and are designed to all work together.

z-index modal
Warning: Avoid customizing these values. They're used for a bird's eye view of components dependent on the z-axis and are designed to all work together.

z-index popover
Warning: Avoid customizing these values. They're used for a bird's eye view of components dependent on the z-axis and are designed to all work together.

z-index tooltip
Warning: Avoid customizing these values. They're used for a bird's eye view of components dependent on the z-axis and are designed to all work together.

small border radius

large border radius

aside modal 2-column size

aside modal 3-column size

point where tables are changing mode view

Ascending. Used to evaluate Sass maps

Starts at zero. Used to ensure the min-width of the lowest breakpoint starts at 0.

Replace $search with $replace in $string.

Color contrast

Retrieve color Sass maps

Request a theme color level

menu width when closed

menu width when open

content gap to allow menu

menu background color when closed

menu background color when open

menu item icon size

menu item icon size

menu item bottom spacing

menu between top and the first button

toggle menu button width

toggle menu button height

max size for user image and logo

variable used for spacing inside the user block

breaking point where user info box change aspect

shaded color for boxes and content background

dark shaded color for boxes and content background

autocomplete item image size

autocomplete item spacing

autocomplete item padding

autocomplete dropdown max-height

dropdown border color

default checkbox/radio form element width and height

default checkbox/radio form element width and height

default input form element height

large input form element height

form element spacing

dropdown element spacing

table cell padding

percentage for fading the main color

language icon size

transition duration default

size of card icon large

size of card icon medium

size of card icon small

carousel dot size

path to local fonts

Imported font Sans Serif

Tag component

imo-popup :: to be moved

temporary TODO: to bbe removed

positioning global