List of Global Variables
Typography
The .lib-typography-all() mixin variables
| Mixin variable | Default value | Comment |
|---|---|---|
| Predefined font family | ||
| @font-family__sans-serif | 'Helvetica Neue', Helvetica, Arial, sans-serif | Sans-serif font family |
| @font-family__serif | Georgia, 'Times New Roman', Times, serif | Serif font family |
| @font-family__monospace | Menlo, Monaco, Consolas, 'Courier New', monospace | Monospace font family |
| @font-path | "../../fonts/" | Path to custom font |
| Predefined colors | ||
| @color-white | #fff | White |
| @color-gray20 | #333 | Gray 20 |
| @color-gray56 | #8f8f8f | Gray 56 |
| @primary__color | #555 | Primary color |
| @primary__color__dark | darken(@primary__color, 35%) // #000 | Dark primary color |
| @primary__color__darker | darken(@primary__color, 13.5%) // #111 | Darker primary color |
| @primary__color__lighter | lighten(@primary__color, 23%) // #7d7d7d | Lighter primary color |
| @primary__color__light | lighten(@primary__color, 45%) // #a6a6a6 | Light primary color |
| @border-color__base | darken(@page__background-color, 18%) | Base border color |
| @border-width__base | 1px | Base border width |
| Fonts settings | ||
| @font-family__base | @font-family__sans-serif | Basic font family |
| @root__font-size | 62.5% | Setting font-size for HTML tag, use % units |
| @font-size-ratio__base | 1.4 | Defines ratio between root font size and base font size |
| @font-size__base | unit((@root__font-size / 100) * 16 * @font-size-ratio__base, px) | Base font size value in px |
| @font-size__xl | ceil(1.5 * @font-size__base) // 21 | Extra large font size |
| @font-size__l | ceil(1.25 * @font-size__base) // 18 | Large font size |
| @font-size__s | ceil(.85 * @font-size__base) // 12 | Small font size |
| @font-size__xs | floor(.75 * @font-size__base) // 11 | Extra small font size |
| @font-weight__regular | 400 | Basic font weight |
| @font-weight__light | 200 | Light font weight |
| @font-weight__semibold | 600 | Semibold font weight |
| @font-weight__bold | 700 | Bold font weight |
| @font-style__base | normal | Font style |
| @font-style__emphasis | italic | Emphasis font style |
| @line-height__base | 1.428571429 | Base line height |
| @line-height__computed | floor(@font-size__base * @line-height__base) | Computed line height depending on base font size |
| @line-height__l | 1.5 | Large line height |
| @line-height__s | 1.33 | Small line height |
| @text__color | @primary__color | Primary text color |
| @text__color__intense | @primary__color__darker | Darker text color |
| @text__color__muted | @primary__color__lighter | Lighter text color |
| @indent__base | @line-height__computed // 20px | Base text ident (20px) |
| @indent__xl | @line-height__computed * 2 // 40px | Extra large text ident (40px) |
| @indent__l | @line-height__computed * 1.5 // 30px | Large text ident (30px) |
| @indent__m | @indent__base * 1.25 // 25px | Extra large text ident (25px) |
| @indent__s | @line-height__computed / 2 //10px | Small text ident (10px) |
| @indent__xs | @line-height__computed / 4 // 5px | Extra small text ident (5px) |
| Links | ||
| @link__color | #1979c3 | Links color |
| @link__text-decoration | none | Links text decoration |
| @link__visited__color | #800080 | Visited links color |
| @link__visited__text-decoration | none | Visited links text decoration |
| @link__hover__color | #006bb4 | Hovered links color |
| @link__hover__text-decoration | underline | Hovered links text decoration |
| @link__active__color | #ff5501 | Active links color |
| @link__active__text-decoration | underline | Active links text decoration |
| Lists | ||
| @list__color__base | false | List text color |
| @list__font-size__base | @font-size__base | List font size |
| @list__margin-top | 0 | List margin top |
| @list__margin-bottom | @indent__m | List margin bottom |
| @list-item__margin-top | 0 | List item margin top |
| @list-item__margin-bottom | @indent__s | List item margin bottom |
| Definition list | ||
| @dl__margin-top | 0 | Definition list margin top |
| @dl__margin-bottom | @indent__base | Definition list margin bottom |
| @dt__margin-top | 0 | Description term margin top |
| @dt__margin-bottom | @indent__xs | Description term margin bottom |
| @dt__font-weight | @font-weight__bold | Description term |
| @dd__margin-top | 0 | Description margin top |
| @dd__margin-bottom | @indent__s | Description margin bottom |
| Paragraphs | ||
| @p__margin-top | 0 | Paragraph margin top |
| @p__margin-bottom | @indent__s | Paragraph margin bottom |
| Headings | ||
| @heading__font-family__base | false | Heading base font family |
| @heading__font-style__base | false | Heading base font style |
| @heading__font-weight__base | @font-weight__light | Heading base font weight |
| @heading__line-height__base | 1.1 | Heading base line height |
| @heading__color__base | false | Heading base color |
| @heading__margin-top__base | @indent__base | Heading base margin top |
| @heading__margin-bottom__base | @indent__base | Heading base margin bottom |
| H1 | ||
| @h1__font-size | ceil((@font-size__base * 2.85)) // 40px | H1 font size |
| @h1__font-color | @heading__color__base | H1 color |
| @h1__font-family | @heading__font-family__base | H1 font family |
| @h1__font-weight | @heading__font-weight__base | H1 font weight |
| @h1__font-style | @heading__font-style__base | H1 font style |
| @h1__line-height | @heading__line-height__base | H1 line height |
| @h1__margin-top | 0 | H1 margin top |
| @h1__margin-bottom | @heading__margin-bottom__base | H1 margin bottom |
| H2 | ||
| @h2__font-size | ceil((@font-size__base * 1.85)) // 26px | H2 font size |
| @h2__font-color | @heading__color__base | H2 color |
| @h2__font-family | @heading__font-family__base | H2 font family |
| @h2__font-weight | @heading__font-weight__base | H2 font weight |
| @h2__font-style | @heading__font-style__base | H2 font style |
| @h2__line-height | @heading__line-height__base | H2 line height |
| @h2__margin-top | @indent__m | H2 margin top |
| @h2__margin-bottom | @heading__margin-bottom__base | H2 margin bottom |
| H3 | ||
| @h3__font-size | ceil((@font-size__base * 1.28)) // 18px | H3 font size |
| @h3__font-color | @heading__color__base | H3 color |
| @h3__font-family | @heading__font-family__base | H3 font family |
| @h3__font-weight | @heading__font-weight__base | H3 font weight |
| @h3__font-style | @heading__font-style__base | H3 font style |
| @h3__line-height | @heading__line-height__base | H3 line height |
| @h3__margin-top | @indent__base * .75 | H3 margin top |
| @h3__margin-bottom | @indent__s | H3 margin bottom |
| H4 | ||
| @h4__font-size | @font-size__base // 14px | H4 font size |
| @h4__font-color | @heading__color__base | H4 color |
| @h4__font-family | @heading__font-family__base | H4 font family |
| @h4__font-weight | @font-weight__bold | H4 font weight |
| @h4__font-style | @heading__font-style__base | H4 font style |
| @h4__line-height | @heading__line-height__base | H4 line height |
| @h4__margin-top | @heading__margin-top__base | H4 margin top |
| @h4__margin-bottom | @heading__margin-bottom__base | H4 margin bottom |
| H5 | ||
| @h5__font-size | ceil((@font-size__base * .85)) // 12px | H5 font size |
| @h5__font-color | @heading__color__base | H5 color |
| @h5__font-family | @heading__font-family__base | H5 font family |
| @h5__font-weight | @font-weight__bold | H5 font weight |
| @h5__font-style | @heading__font-style__base | H5 font style |
| @h5__line-height | @heading__line-height__base | H5 line height |
| @h5__margin-top | @heading__margin-top__base | H5 margin top |
| @h5__margin-bottom | @heading__margin-bottom__base | H5 margin bottom |
| H6 | ||
| @h6__font-size | ceil((@font-size__base * .7)) // 10px | H6 font size |
| @h6__font-color | @heading__color__base | H6 color |
| @h6__font-family | @heading__font-family__base | H6 font family |
| @h6__font-weight | @heading__font-weight__base | H6 font weight |
| @h6__font-style | @heading__font-style__base | H6 font style |
| @h6__line-height | @heading__line-height__base | H6 line height |
| @h6__margin-top | @heading__margin-top__base | H6 margin top |
| @h6__margin-bottom | @heading__margin-bottom__base | H6 margin bottom |
| <small> tags and tags with class .small placed in H1-H6 headings | ||
| @heading__small-color | @primary__color | <small> and .small heading element color |
| @heading__small-line-height | 1 | <small> and .small heading element line height |
| @heading__small-size | (@font-size__xs/@font-size__base) * 100% | <small> and .small heading element font size |
| Focus | ||
| @focus__box-shadow | 0 0 3px 1px @focus__color | Focused element highlight |
| Code blocks | ||
| @code__background-color | @panel__background-color | Code block background |
| @code__color | @primary__color__darker | Code text color |
| @code__font-size | @font-size__s | Code font size |
| @code__padding | 2px 4px | Code padding |
| @pre__background-color | @primary__color__light | Preformatted text background color |
| @pre__border-color | @border-color__base | Preformatted text border color |
| @pre__border-width | @border-width__base | Preformatted text border width |
| @pre__color | @primary__color__darker | Preformatted text color |
| @kbd__background-color | @panel__background-color | Keyboard input background |
| @kbd__color | @primary__color__darker | Keyboard input text color |
| Blockquote | ||
| @blockquote__border-color | @border-color__base | Blockquote border color |
| @blockquote__border-width | 0 | Blockquote border width |
| @blockquote__content-before | '\2014 \00A0' | "-" and space symbols |
| @blockquote__font-size | @font-size__base | Blockquote font size |
| @blockquote__font-style | @font-style__emphasis | Blockquote font style |
| @blockquote__margin | 0 0 @indent__base @indent__xl | Blockquote margin |
| @blockquote__padding | 0 | Blockquote padding |
| @blockquote-small__color | @primary__color | Blockquote <small> and .small text color |
| @blockquote-small__font-size | @font-size__xs | Blockquote <small> and .small font size |
| Cite | ||
| @cite__font-style | @font-style__base | Cite font style |
| Other elements | ||
| @hr__border-color | @border-color__base | HR border color |
| @hr__border-style | solid | HR border style |
| @hr__border-width | @border-width__base | HR border width |
| @mark__color | @primary__color__dark | <mark> color |
| @mark__background-color | @panel__background-color | <mark> background |
| @abbr__border-color | @border-color__base | <abbr> border color |
| @disable-filters | false | Disable filters output in css |
Base Typography
The .lib-typography__base() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_abbr-border-color | @abbr__border-color | @border-color__base | '' | false | value | <abbr> border color |
| @_dfn-font-style | @font-style__emphasis | italic | '' | false | value | <dfn> font style |
| @_emphasis-font-style | @font-style__emphasis | italic | '' | false | value | <em> font style |
| @_hr-border-color | @hr__border-color | @border-color__base | '' | false | value | HR border color |
| @_hr-border-style | @hr__border-style | solid | '' | false | value | HR border style |
| @_hr-border-width | @hr__border-width | @border-width__base | '' | false | value | HR border width |
| @_hr-margin-bottom | @line-height__computed | floor(@font-size__base * @line-height__base) | '' | false | value | HR margin bottom |
| @_hr-margin-top | @line-height__computed | floor(@font-size__base * @line-height__base) | '' | false | value | HR margin top |
| @_mark-background-color | @mark__background-color | @panel__background-color | '' | false | value | <mark> background color |
| @_mark-color | @mark__color | @primary__color__dark | '' | false | value | <mark> color |
| @_p-margin-bottom | @p__margin-bottom | @indent__s | '' | false | value | Paragraph margin bottom |
| @_p-margin-top | @p__margin-top | 0 | '' | false | value | Paragraph margin top |
| @_root-font-size | @root__font-size | 62.5% | '' | false | value | Setting font-size for HTML tag |
| @_small-font-size | @font-size__s | ceil(.85 * @font-size__base) // 12 | '' | false | value | <small> tag font size |
| @_strong-font-weight | @font-weight__bold | 700 | '' | false | value | <strong> tag font weight |
| @_sub-sup-font-size | - | (@font-size__xs / @font-size__base) * 100% | '' | false | value | <sup> an <sup> tags font size |
Headings
The .lib-typography-headings() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_heading-small-size | @heading__small-size | (@font-size__xs/@font-size__base) * 100% | '' | false | value | <small> and .small heading element font-size |
| @_heading-small-color | @heading__small-color | @primary__color | '' | false | value | <small> and .small heading element color |
| @_heading-small-line-height | @heading__small-line-height | 1 | '' | false | value | <small> and .small heading element line height |
Unordered and Ordered lists
The .lib-typography-lists() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_list-margin-top | @list__margin-top | 0 | '' | false | value | List margin top |
| @_list-margin-bottom | @list__margin-bottom | @indent__m | '' | false | value | List margin bottom |
| @_list-item-margin-top | @list-item__margin-top | 0 | '' | false | value | List item margin top |
| @_list-item-margin-bottom | @list-item__margin-bottom | @indent__s | '' | false | value | List item margin bottom |
| @_dl-margin-bottom | @dl__margin-bottom | @indent__base | '' | false | value | Definition list margin bottom |
| @_dl-margin-top | @dl__margin-top | 0 | '' | false | value | Definition list margin top |
| @_dt-font-weight | @dt__font-weight | @font-weight__bold | '' | false | value | Description term font weight |
| @_dt-margin-bottom | @dt__margin-bottom | @indent__xs | '' | false | value | Description term margin bottom |
| @_dt-margin-top | @dt__margin-top | 0 | '' | false | value | Description term margin top |
| @_dd-margin-bottom | @dd__margin-bottom | @indent__s | '' | false | value | Description margin bottom |
| @_dd-margin-top | @dd__margin-top | 0 | '' | false | value | Description margin top |
Code (inline and block)
The .lib-typography-code() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_font-family-monospace | @font-family__monospace | Menlo, Monaco, Consolas, 'Courier New', monospace | '' | false | value | Monospace font family |
| @_code-background-color | @code__background-color | @panel__background-color | '' | false | value | Code block background |
| @_code-color | @code__color | @primary__color__darker | '' | false | value | Code text color |
| @_code-padding | @code__padding | 2px 4px | '' | false | value | Code block padding |
| @_code-font-size | @code__font-size | @font-size__s | '' | false | value | Code block font size |
| @_kbd-background-color | @kbd__background-color | @panel__background-color | '' | false | value | Keyboard input background |
| @_kbd-color | @kbd__color | @primary__color__darker | '' | false | value | Keyboard input text color |
| @_kbd-padding | @code__padding | 2px 4px | '' | false | value | Keyboard input padding |
| @_kbd-font-size | @code__font-size | @font-size__s | '' | false | value | Keyboard input font size |
| @_pre-background-color | @pre__background-color | @primary__color__light | '' | false | value | Preformatted text background color |
| @_pre-border-width | @pre__border-width | @border-width__base | '' | false | value | Preformatted text border width |
| @_pre-border-color | @pre__border-color | @border-color__base | '' | false | value | Preformatted text border color |
| @_pre-color | @pre__color | @primary__color__darker | '' | false | value | Text color of preformatted text |
| @_pre-line-height | @line-height__base | 1.428571429 | '' | false | value | Preformatted text line height |
| @_pre-margin | - | 0 0 @indent__s | '' | false | value | Preformatted text margin |
| @_pre-padding | - | @indent__s | '' | false | value | Preformatted text padding |
| @_pre-font-size | @code__font-size | @font-size__s | '' | false | value | Preformatted text font size |
Blockquotes
The .lib-typography-blockquote() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_blockquote-border-width | @blockquote__border-width | 0 | '' | false | value | Blockquote border width |
| @_blockquote-border-color | @blockquote__border-color | @border-color__base | '' | false | value | Blockquote border color |
| @_blockquote-margin | @blockquote__margin | 0 0 @indent__base @indent__xl | '' | false | value | Blockquote margin |
| @_blockquote-padding | @blockquote__padding | 0 | '' | false | value | Blockquote padding |
| @_blockquote-font-size | @blockquote__font-size | @font-size__base | '' | false | value | Blockquote font size |
| @_blockquote-font-style | @blockquote__font-style | @font-style__emphasis | '' | false | value | Blockquote font style |
| @_blockquote-small-color | @blockquote-small__color | @primary__color | '' | false | value | Blockquote <small> and .small text color |
| @_blockquote-small-line-height | @line-height__base | 1.428571429 | '' | false | value | Blockquote <small> and .small line height |
| @_blockquote-small-font-size | @blockquote-small__font-size | @font-size__xs | '' | false | value | Blockquote <small> and .small text font size |
| @_blockquote-small-before-content | @blockquote__content-before | '\2014 \00A0' | '' | false | value | Blockquote <small> and .small before pseudo element content |
| @_blockquote-cite | @cite__font-style | @font-style__base | '' | false | value | Blockquote cite font style |
| @_cite | @cite__font-style | @font-style__base | '' | false | value | Cite font style |
Structure
Predefined variables for handle global Z-axis positioning
| Variable | Default value | Allowed values |
|---|---|---|
| @z-index-1 | 100 | constant |
| @z-index-2 | 200 | constant |
| @z-index-3 | 300 | constant |
| @z-index-4 | 400 | constant |
| @z-index-5 | 500 | constant |
| @z-index-6 | 600 | constant |
| @z-index-7 | 700 | constant |
| @z-index-8 | 800 | constant |
| @z-index-9 | 900 | constant |
| @z-index-10 | 1000 | constant |
| Nesting example | ||
| @modal__z-index | @z-index-9 | @z-index-N |
Actions Toolbar
The .lib-actions-toolbar() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_actions-toolbar-actions-position | @actions-toolbar-actions__position | justify | justify | left | right | center | Position for actions in Actions toolbar |
| @_actions-toolbar-actions-reverse | @actions-toolbar-actions__reverse | false | true | false | Reverse primary and secondary blocks position in Actions toolbar |
| @_actions-toolbar-margin | @actions-toolbar__margin | false | '' | false | value | Margins of the Actions toolbar |
| @_actions-toolbar-padding | @actions-toolbar__padding | false | '' | false | value | Paddings of the Actions toolbar |
| @_actions-toolbar-actions-margin | @actions-toolbar-actions__margin | false | '' | false | value | Margins of all .actions in the Actions toolbar |
| @_actions-toolbar-primary-actions-margin | @actions-toolbar-actions-primary__margin | 0 @indent__xs 0 0 | '' | false | value | Margins of primary .actions in the Actions toolbar |
| @_actions-toolbar-secondary-actions-margin | @actions-toolbar-actions-secondary__margin | false | '' | false | value | Margins of secondary .actions in the Actions toolbar |
| @_actions-toolbar-actions-links-margin-top | @actions-toolbar-actions-links__margin-top | false | '' | false | value | Margin-top for links with class .action in the Actions toolbar |
| @_actions-toolbar-primary-actions-links-margin-top | @actions-toolbar-actions-links-primary__margin-top | false | '' | false | value | Margin-top for primary links with class .action in the Actions toolbar |
| @_actions-toolbar-secondary-actions-links-margin-top | @actions-toolbar-actions-secondary__margin | 6px | '' | false | value | Margin-top for secondary links with class .action in the Actions toolbar |
Breadcrumbs variables
The .lib-breadcrumbs() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_breadcrumbs-font-size | @breadcrumbs__font-size | @font-size__s | '' | false | value | Breadcrumbs font size |
| @_breadcrumbs-display | @breadcrumbs__display | false | '' | false | inline | block | inline-block | Breadcrumbs links display property |
| @_breadcrumbs__container-margin | @breadcrumbs__container-margin | 0 0 @indent__base | '' | false | value | Breadcrumbs items padding |
| @_breadcrumbs-padding | @breadcrumbs__padding | false | '' | false | value | Breadcrumbs items padding |
| Breadcrumbs - separator symbol | ||||
| @_breadcrumbs-separator-symbol | @breadcrumbs-separator__symbol | false | '' | false | any symbol | Breadcrumbs separating symbol |
| @_breadcrumbs-separator-color | @breadcrumbs-separator__color | @breadcrumbs-current__color | '' | false | value | Breadcrumbs separating symbol color |
| @_breadcrumbs-icon-use | @breadcrumbs-icon__use | true | true | false | Breadcrumbs separating symbol is an icon |
| @_breadcrumbs-icon-font-content | @breadcrumbs-icon__font-content | @icon-next | '' | false | icon | Breadcrumbs separating icon symbol |
| @_icon-font | @breadcrumbs-icon__font | @icon-font | '' | false | font | Breadcrumbs separating icon font |
| @_icon-font-size | @breadcrumbs-icon__font-size | 24px | '' | false | value | Breadcrumbs separating icon font size |
| @_icon-font-line-height | @breadcrumbs-icon__font-line-height | 18px | '' | false | value | Breadcrumbs separating icon line height |
| @_icon-font-color | @breadcrumbs-icon__font-color | false | '' | false | value | Breadcrumbs separating icon color |
| @_icon-font-margin | @breadcrumbs-icon__font-margin | 0 | '' | false | value | Breadcrumbs separating icon margin |
| @_icon-font-vertical-align | @breadcrumbs-icon__font-vertical-align | top | '' | false | value | Breadcrumbs separating icon vertical align |
| Breadcrumbs - current page | ||||
| @_breadcrumbs-current-color | @breadcrumbs-current__color | #a3a3a3 | '' | false | value | Breadcrumbs current page color |
| @_breadcrumbs-current-font-weight | @breadcrumbs-current__font-weight | @font-weight__regular | '' | false | value | Breadcrumbs current page font weight |
| @_breadcrumbs-current-background | @breadcrumbs-current__background | false | '' | false | value | Breadcrumbs current page background |
| @_breadcrumbs-current-border | @breadcrumbs-current__border | false | '' | false | value | Breadcrumbs current page border |
| @_breadcrumbs-current-gradient | @breadcrumbs-current__gradient | false | true | false | Breadcrumbs current page have gradient background |
| @_breadcrumbs-current-gradient-direction | @breadcrumbs-current__gradient-direction | false | '' | false | vertical | horizontal | Direction of breadcrumbs current page background gradient (if there is any) |
| @_breadcrumbs-current-gradient-color-start | @breadcrumbs-current__gradient-color-start | false | '' | false | value | Breadcrumbs current page gradient start color |
| @_breadcrumbs-current-gradient-color-end | @breadcrumbs-current__gradient-color-end | false | '' | false | value | Breadcrumbs current page gradient end color |
| Breadcrumbs link | ||||
| @_breadcrumbs-link-gradient | @breadcrumbs-link__gradient | false | true | false | Breadcrumbs items have gradient background |
| @_breadcrumbs-link-gradient-direction | @breadcrumbs-link__gradient-direction | false | '' | false | vertical | horizontal | Direction of breadcrumbs item background gradient (if there is any) |
| Breadcrumbs link - default | ||||
| @_breadcrumbs-link-color | @breadcrumbs-link__color | @primary__color | '' | false | value | Breadcrumbs item color |
| @_breadcrumbs-link-background | @breadcrumbs-link__background | false | '' | false | value | Breadcrumbs item background |
| @_breadcrumbs-link-border | @breadcrumbs-link__border | false | '' | false | value | Breadcrumbs item border |
| @_breadcrumbs-link-text-decoration | @breadcrumbs-link__text-decoration | none | '' | false | value | Breadcrumbs item text decoration |
| @_breadcrumbs-link-gradient-color-start | @breadcrumbs-link__gradient-color-start | false | '' | false | value | Breadcrumbs item gradient start color |
| @_breadcrumbs-link-gradient-color-end | @breadcrumbs-link__gradient-color-end | false | '' | false | value | Breadcrumbs item gradient end color |
| Breadcrumbs link - visited | ||||
| @_breadcrumbs-link-color-visited | @breadcrumbs-link__visited__color | @primary__color | '' | false | value | Breadcrumbs item visited color |
| @_breadcrumbs-link-background-visited | @breadcrumbs-link__visited__background | @breadcrumbs-link__background | '' | false | value | Breadcrumbs item visited background |
| @_breadcrumbs-link-border-visited | @breadcrumbs-link__visited__border | @breadcrumbs-link__border | '' | false | value | Breadcrumbs item visited border |
| @_breadcrumbs-link-text-decoration-visited | @breadcrumbs-link__visited__text-decoration | none | '' | false | value | Breadcrumbs item text decoration |
| @_breadcrumbs-link-gradient-color-start-visited | @breadcrumbs-link__visited__gradient-color-start | false | '' | false | value | Breadcrumbs item visited gradient start color |
| @_breadcrumbs-link-gradient-color-end-visited | @breadcrumbs-link__visited__gradient-color-end | false | '' | false | value | Breadcrumbs item visited gradient end color |
| Breadcrumbs link - hover | ||||
| @_breadcrumbs-link-color-hover | @breadcrumbs-link__hover__color | @primary__color | '' | false | value | Breadcrumbs item hover color |
| @_breadcrumbs-link-background-hover | @breadcrumbs-link__hover__background | false | '' | false | value | Breadcrumbs item hover background |
| @_breadcrumbs-link-border-hover | @breadcrumbs-link__hover__border | @breadcrumbs-link__border | '' | false | value | Breadcrumbs item hover border |
| @_breadcrumbs-link-text-decoration-hover | @breadcrumbs-link__hover__text-decoration | underline | '' | false | value | Breadcrumbs item hover text decoration |
| @_breadcrumbs-link-gradient-color-start-hover | @breadcrumbs-link__hover__gradient-color-start | false | '' | false | value | Breadcrumbs item hover gradient start color |
| @_breadcrumbs-link-gradient-color-end-hover | @breadcrumbs-link__hover__gradient-color-end | false | '' | false | value | Breadcrumbs item hover gradient end color |
| Breadcrumbs link - active | ||||
| @_breadcrumbs-link-color-active | @breadcrumbs-link__active__color | @primary__color | '' | false | value | Breadcrumbs item active color |
| @_breadcrumbs-link-background-active | @breadcrumbs-link__active__background | @breadcrumbs-link__background | '' | false | value | Breadcrumbs item active background |
| @_breadcrumbs-link-border-active | @breadcrumbs-link__active__border | @breadcrumbs-link__border | '' | false | value | Breadcrumbs item active border |
| @_breadcrumbs-link-text-decoration-active | @breadcrumbs-link__active__text-decoration | none | '' | false | value | Breadcrumbs item active text decoration |
| @_breadcrumbs-link-gradient-color-start-active | @breadcrumbs-link__active__gradient-color-start | false | '' | false | value | Breadcrumbs item active gradient start color |
| @_breadcrumbs-link-gradient-color-end-active | @breadcrumbs-link__active__gradient-color-end | false | '' | false | value | Breadcrumbs item active gradient end color |
Button variables
The .lib-button() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_button-font-family | @button__font-family | @font-family__base | '' | false | value | Button font family |
| @_button-font-size | @button__font-size | @font-size__base | '' | false | value | Button font size |
| @_button-font-weight | @button__font-weight | @font-weight__bold | '' | false | value | Button font weight |
| @_button-cursor | @button__cursor | pointer | '' | false | value | Button cursor |
| @_button-display | @button__display | inline-block | '' | false | value | Button display |
| @_button-disabled-opacity | @button__disabled__opacity | .5 | '' | false | value | Button disabled opacity |
| @_button-line-height | @button__line-height | @font-size__base + 2 | '' | false | value | Button height |
| @_button-width | @button__width | false | '' | false | value | Button width |
| @_button-margin | @button__margin | 0 | '' | false | value | Button margin |
| @_button-padding | @button__padding | 7px 15px | '' | false | value | Button padding |
| @_button-gradient | @button__gradient | false | '' | false | true | Button has gradient background |
| @_button-gradient-direction | @button__gradient-direction | false | '' | false | vertical | horizontal | Direction of button background gradient (if there is any) |
| Button default state | ||||
| @_button-color | @button__color | @primary__color | '' | false | value | Button text color |
| @_button-background | @button__background | #f2f2f2 | '' | false | value | Button background |
| @_button-border | @button__border | 1px solid #cdcdcd | '' | false | value | Button border |
| @_button-gradient-color-start | @button__gradient-color-start | false | '' | false | value | Gradient background start color |
| @_button-gradient-color-end | @button__gradient-color-end | false | '' | false | value | Gradient background end color |
| Button hover state | ||||
| @_button-color-hover | @button__hover__color | #555 | '' | false | value | Hovered button text color |
| @_button-background-hover | @button__hover__background | #e2e2e2 | '' | false | value | Hovered button background |
| @_button-border-hover | @button__hover__border | @button__border | '' | false | value | Hovered button border |
| @_button-gradient-color-start-hover | @button__hover__gradient-color-start | false | '' | false | value | Hovered button gradient background start color |
| @_button-gradient-color-end-hover | @button__hover__gradient-color-end | false | '' | false | value | Hovered button gradient background end color |
| Button active state | ||||
| @_button-color-active | @button__active__color | @button__color | '' | false | value | Active button text color |
| @_button-background-active | @button__active__background | @button__hover__background | '' | false | value | Active button background |
| @_button-border-active | @button__active__border | @button__border | '' | false | value | Active button border |
| @_button-gradient-color-start-active |
@button__active__gradient-color-start | false | '' | false | value | Active button gradient background start color |
| @_button-gradient-color-end-active | @button__active__gradient-color-end | false | '' | false | value | Active button gradient background end color |
| Button with icon | ||||
| @_button-icon-use | @button-icon__use | false | '' | false | true | Button has an icon |
| @_button-font-content | @button-icon__content | @icon-settings | '' | false | value | Button icon symbol |
| @_button-icon-font | @button-icon__font | @icon-font | '' | false | value | Button icon font |
| @_button-icon-font-size | @button-icon__font-size | 22px | '' | false | value | Button icon font size |
| @_button-icon-font-line-height | @button-icon__line-height | @button-icon__font-size | '' | false | value | Button icon line height |
| @_button-icon-font-color | @button-icon__color | inherit | '' | false | value | Button icon color |
| @_button-icon-font-color-hover | @button-icon__hover__font-color | inherit | '' | false | value | Hovered button icon color |
| @_button-icon-font-color-active | @button-icon__active__font-color | inherit | '' | false | value | Active button icon color |
| @_button-icon-font-margin | @button-icon__margin | 0 | '' | false | value | Button icon margin |
| @_button-icon-font-vertical-align | @button-icon__vertical-align | top | '' | false | value | Button icon vertical align |
| @_button-icon-font-position | @button-icon__position | @icon__position | '' | false | before | after | Button icon font position |
| @_button-icon-font-text-hide | @button-icon__text-hide | false | '' | false | true | Button icon text hide |
The .lib-button-primary() mixin variables
In the variables list primary buttons are configured with @button-primary prefix. So for example to configure primary button background you should use @_button-background variable of the mixin or @button-primarybackground of the global variables list.
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_button-line-height | @button-primary__line-height | false | '' | false | value | Button line-height |
| @_button-width | @button-primary__width | false | '' | false | value | Button width |
| @_button-margin | @button-primary__margin | false | '' | false | value | Button margin |
| @_button-padding | @button-primary__padding | @button__padding | '' | false | value | Button padding |
| @_button-gradient | @button-primary__gradient | false | '' | false | true | Button has gradient background |
| @_button-gradient-direction | @button-primary__gradient-direction | false | '' | false | vertical | horizontal | Direction of button background gradient (if there is any) |
| Button default state | ||||
| @_button-background | @button-primary__background | #1979c3 | '' | false | value | Button background |
| @_button-border | @button-primary__border | 1px solid #1979c3 | '' | false | value | Button border |
| @_button-color | @button-primary__color | #fff | '' | false | value | Button text color |
| @_button-gradient-color-start | @button-primary__gradient-color-start | false | '' | false | value | Gradient background start color |
| @_button-gradient-color-end | @button-primary__gradient-color-end | false | '' | false | value | Gradient background end color |
| Button hover state | ||||
| @_button-background-hover | @button-primary__hover__background | #006bb4 | '' | false | value | Hovered button background |
| @_button-border-hover | @button-primary__hover__border | 1px solid #006bb4 | '' | false | value | Hovered button border |
| @_button-color-hover | @button-primary__hover__color | @button-primary__color | '' | false | value | Hovered button text color |
| @_button-gradient-color-start-hover | @button-primary__hover__gradient-color-start | false | '' | false | value | Hovered button gradient background start color |
| @_button-gradient-color-end-hover | @button-primary__hover__gradient-color-end | false | '' | false | value | Hovered button gradient background end color |
| Button active state | ||||
| @_button-background-active | @button-primary__active__background | @button-primary__hover__background | '' | false | value | Active button background |
| @_button-border-active | @button-primary__active__border | @button-primary__hover__border | '' | false | value | Active button border |
| @_button-color-active | @button-primary__active__color | @button-primary__color | '' | false | value | Active button text color |
| @_button-gradient-color-start-active | @button-primary__active__gradient-color-start | false | '' | false | value | Active button gradient background start color |
| @_button-gradient-color-end-active | @button-primary__active__gradient-color-end | false | '' | false | value | Active button gradient background end color |
The .lib-button-revert-secondary-color() mixin variables
The .lib-button-revert-secondary-color() mixin is used to revert button styles to secondary color styles.
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_button-color | @button__color | @button__color | '' | false | value | Button color |
| @_button-background | @button__background | @button__background | '' | false | value | Button background |
| @_button-border | @button__border | @button__border | '' | false | value | Button border |
| @_button-color-hover | @button__hover__color | @button__hover__color | '' | false | value | Button hover color |
| @_button-background-hover | @button__hover__background | @button__hover__background | '' | false | value | Button hover background |
| @_button-border-hover | @button__hover__border | @button__hover__border | '' | false | value | Button hover border |
| @_button-color-active | @button__active__color | @button__active__color | '' | false | value | Button active color |
| @_button-background-active | @button__active__background | @button__active__background | '' | false | value | Button active background |
| @_button-border-active | @button__active__border | @button__active__border | '' | false | value | Button active border |
The .lib-button-revert-secondary-size() mixin variables
The .lib-button-revert-secondary-size() mixin is used to revert button sizes to secondary button sizes.
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_button-font-size | @button__font-size | @button__font-size | '' | value | Button font size |
| @_button-line-height | @button__line-height | @button__line-height | '' | value | Button line-height |
| @_button-padding | @button__padding | @button__padding | '' | value | Button padding |
The .lib-button-as-link() mixin variables
The .lib-button-as-link() mixin is used to make button look like a link. It resets default button styles.
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_link-color | @link__color | @link-color | '' | false | value | Button as a link color |
| @_link-color-hover | @link__hover__color | @link-color-hover | '' | false | value | Button as a link hovered color |
| @_line-height | @line-height__base | @line-height-base | '' | false | value | Button as a link line height |
| @_margin | - | 0 | '' | false | value | Button as a link margin |
| @_padding | - | 0 | '' | false | value | Button as a link padding |
| @_disabled_opacity | @button__disabled__opacity | .5 | range between .1 and .9 | Button as a link opacity |
Drop-down variables
The .lib-dropdown() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_toggle-selector | - | ~".action.toggle" | Selector | Toggle selector |
| @_options-selector | - | ~"ul.dropdown" | Selector | Options selector |
| @_dropdown-actions-padding | @dropdown-actions__padding | false | '' | false | value | Drop-down toggle element padding |
| @_dropdown-list-min-width | @dropdown-list__min-width | 100% | '' | false | value | Drop-down min width value |
| @_dropdown-list-width | @dropdown-list__width | false | '' | false | value | Drop-down list width value |
| @_dropdown-list-height | @dropdown-list__height | false | '' | false | value | Drop-down list height value |
| @_dropdown-list-margin-top | @dropdown-list__margin-top | 4px | '' | false | value | Drop-down list margin-top value |
| Drop-down list | ||||
| @_dropdown-list-position-top | @dropdown-list__position-top | 100% | '' | false | value | Drop-down list position: top |
| @_dropdown-list-position-right | @dropdown-list__position-right | false | '' | false | value | Drop-down list position: right |
| @_dropdown-list-position-bottom | @dropdown-list__position-bottom | false | '' | false | value | Drop-down list position: bottom |
| @_dropdown-list-position-left | @dropdown-list__position-left | false | '' | false | value | Drop-down list position: left |
| @_dropdown-list-background | @dropdown-list__background | @color-white | '' | false | value | Drop-down list background |
| @_dropdown-list-border | @dropdown-list__border | 1px solid #bbb | '' | false | value | Drop-down list border |
| @_dropdown-list-pointer | @dropdown-list__pointer | true | true | false | Drop-down list pointer is visible |
| @_dropdown-list-pointer-border | @dropdown-list-pointer__border | #bbb | '' | false | value | Drop-down list pointer border |
| @_dropdown-list-pointer-position | @dropdown-list-pointer__position | left | left | right | Drop-down pointer position |
| @_dropdown-list-pointer-position-top | @dropdown-list-pointer__position-top | -12px | value | Drop-down pointer top position |
| @_dropdown-list-pointer-position-left-right | @dropdown-list-pointer__position-left-right | 10px | value | Drop-down pointer left or right position |
| @_dropdown-list-item-border | @dropdown-list-item__border | 0 | '' | false | value | Drop-down list item border |
| @_dropdown-list-item-padding | @dropdown-list-item__padding | 3px @indent__xs | '' | false | value | Drop-down list item padding |
| @_dropdown-list-item-margin | @dropdown-list-item__margin | 0 | '' | false | value | Drop-down list item margin |
| @_dropdown-list-item-hover | @dropdown-list-item__hover | #e8e8e8 | '' | false | value | Drop-down list item hovered background |
| @_dropdown-list-shadow | @dropdown-list__shadow | 0 3px 3px rgba(0,0,0,.15) | '' | false | value | Drop-down list shadow |
| @_dropdown-list-z-index | @dropdown-list__z-index | 100 | '' | false | value | Drop-down list z-index |
| Drop-down icon | ||||
| @_dropdown-toggle-icon-content | @dropdown-toggle-icon__content | @icon-pointer-down | '' | false | value | Drop-down toggle icon symbol code for default state |
| @_dropdown-toggle-active-icon-content | @dropdown-toggle-icon__active__content | @icon-pointer-up | '' | false | value | Drop-down toggle icon symbol code for active state |
| @_icon-font | @dropdown-toggle-icon__font | @button-icon__font | '' | false | value | Drop-down toggle icon font |
| @_icon-font-size | @dropdown-toggle-icon__font-size | @button-icon__font-size | '' | false | value | Drop-down toggle icon font size |
| @_icon-font-line-height | @dropdown-toggle-icon__font-line-height | @button-icon__line-height | '' | false | value | Drop-down toggle icon line height |
| @_icon-font-color | @dropdown-toggle-icon__font-color | @button-icon__color | '' | false | value | Drop-down toggle icon color |
| @_icon-font-color-hover | @dropdown-toggle-icon__font-color-hover | @button-icon__hover__font-color | '' | false | value | Drop-down toggle icon hovered color |
| @_icon-font-color-active | @dropdown-toggle-icon__font-color-active | @button-icon__active__font-color | '' | false | value | Drop-down toggle icon active color |
| @_icon-font-margin | @dropdown-toggle-icon__font-margin | @button-icon__margin | '' | false | value | Drop-down toggle icon margin |
| @_icon-font-position | @dropdown-toggle-icon__position | after | before | after | Drop-down toggle icon position |
| @_icon-font-vertical-align | @dropdown-toggle-icon__font-vertical-align | @button-icon__vertical-align | '' | false | value | Drop-down toggle icon vertical align |
| @_icon-font-text-hide | @dropdown-toggle-icon__text-hide | @button-icon__text-hide | true | false | Text in the tag, that contains icon, is hidden |
Split button variables
The .lib-dropdown-split() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_toggle-selector | - | ~".action.toggle" | selector | Split button action toggle selector |
| @_options-selector | - | ~"ul.dropdown" | selector | Split button options selector |
| @_button-selector | - | ~".action.split" | selector | Split button selector |
| @_dropdown-split-actions-padding | @dropdown-split-actions__padding | 0 @indent__xs | '' | false | value | Split button toggle element padding |
| @_dropdown-split-button-actions-padding | @dropdown-split-button__actions__padding | false | '' | false | value | Split button actions padding |
| @_dropdown-split-toggle-actions-padding | @dropdown-split-toggle__actions__padding | 4px @indent__xs | '' | false | value | Split button toggle padding |
| @_dropdown-split-toggle-position | @dropdown-split-toggle__position | right | '' | false | value | Split button toggle element position |
| Drop-down list | ||||
| @_dropdown-split-list-min-width | @dropdown-split-list__min-width | 100% | '' | false | value | Split button min width |
| @_dropdown-split-list-width | @dropdown-split-list__width | 100% | '' | false | value | Split button width |
| @_dropdown-split-list-height | @dropdown-split-list__height | false | '' | false | value | Split button height |
| @_dropdown-split-list-margin-top | @dropdown-split-list__margin-top | 4px | '' | false | value | Split button margin-top |
| @_dropdown-split-list-position-top | @dropdown-split-list__position-top | @dropdown-list__position-top | '' | false | value | Split button drop-down list position: top |
| @_dropdown-split-list-position-right | @dropdown-split-list__position-right | @dropdown-list__position-right | '' | false | value | Split button drop-down list position: right |
| @_dropdown-split-list-position-bottom | @dropdown-split-list__position-bottom | @dropdown-list__position-bottom | '' | false | value | Split button drop-down list position: bottom |
| @_dropdown-split-list-position-left | @dropdown-split-list__position-left | @dropdown-list__position-left | '' | false | value | Split button drop-down list position: left |
| @_dropdown-split-list-background | @dropdown-split-list__background | @dropdown-list__background | '' | false | value | Split button drop-down background |
| @_dropdown-split-list-border | @dropdown-split-list__border | @dropdown-list__border | '' | false | value | Split button drop-down border |
| @_dropdown-split-list-pointer | @dropdown-split-list__pointer | @dropdown-list__pointer | '' | false | value | Split button drop-down list pointer |
| @_dropdown-split-list-pointer-border | @dropdown-split-list__pointer-border | @dropdown-list-pointer__border | '' | false | value | Split button drop-down list pointer border |
| @_dropdown-split-button-border-radius-fix | @dropdown-split-button__border-radius-fix | false | true | false | Split button drop-down list item border |
| @_dropdown-split-list-item-border | @dropdown-split-list__item-border | @dropdown-list-item__border | '' | false | value | Split button drop-down list item border |
| @_dropdown-split-list-item-padding | @dropdown-split-list__item-padding | @dropdown-list-item__padding | '' | false | value | Split button drop-down list item padding |
| @_dropdown-split-list-item-margin | @dropdown-split-list__item-margin | @dropdown-list-item__margin | '' | false | value | Split button drop-down list item margin |
| @_dropdown-split-list-item-hover | @dropdown-split-list__item-hover | @dropdown-list-item__hover | '' | false | value | Split button drop-down list item hovered background |
| @_dropdown-split-list-pointer-position | @dropdown-split-list__pointer-position | right | left | right | Split button drop-down list pointer position |
| @_dropdown-split-list-pointer-position-top | @dropdown-split-list__pointer-position-top | -12px | '' | false | value | Split button drop-down list pointer position top |
| @_dropdown-split-list-pointer-position-left-right | @dropdown-split-list__pointer-position-left-right | 10px | '' | false | value | Split button drop-down list pointer left or right position |
| @_dropdown-split-list-shadow | @dropdown-split-list__shadow | @dropdown-list__shadow | '' | false | value | Split button drop-down list shadow |
| @_dropdown-split-list-z-index | @dropdown-split-list__z-index | @dropdown-list__z-index | '' | false | value | Split button drop-down list z-index |
| Dropdown icon | ||||
| @_dropdown-split-toggle-icon-content | @dropdown-split-toggle-icon__content | @dropdown-toggle-icon__content | '' | false | value | Split button drop-down toggle icon - default state |
| @_dropdown-split-toggle-active-icon-content | @dropdown-split-toggle-icon__active__content | @dropdown-toggle-icon__active__content | '' | false | value | Split button drop-down toggle icon - active state |
| @_icon-font | @dropdown-split-toggle-icon__font | @button-icon__font | '' | false | value | Split button drop-down toggle icon font |
| @_icon-font-size | @dropdown-split-toggle-icon__font-size | @button-icon__font-size | '' | false | value | Split button drop-down toggle icon font size |
| @_icon-font-line-height | @dropdown-split-toggle-icon__font-line-height | @button-icon__line-height | '' | false | value | Split button drop-down toggle icon line height |
| @_icon-font-color | @dropdown-split-toggle-icon__font-color | @button-icon__color | '' | false | value | Split button drop-down toggle icon color |
| @_icon-font-color-hover | @dropdown-split-toggle-icon__font-color-hover | @button-icon__hover__font-color | '' | false | value | Split button drop-down toggle icon hovered color |
| @_icon-font-color-active | @dropdown-split-toggle-icon__font-color-active | @button-icon__active__font-color | '' | false | value | Split button drop-down toggle icon active color |
| @_icon-font-margin | @dropdown-split-toggle-icon__font-margin | @button-icon__margin | '' | false | value | Split button drop-down toggle icon margin |
| @_icon-font-position | @dropdown-split-toggle-icon__position | after | before | after | Split button drop-down toggle icon position |
| @_icon-font-vertical-align | @dropdown-split-toggle-icon__font-vertical-align | @button-icon__vertical-align | '' | false | value | Split button drop-down toggle icon vertical align |
| @_icon-font-text-hide | @dropdown-split-toggle-icon__text-hide | @button-icon__text-hide | true | false | The text in the toggle tag is hidden |
Forms variables
The .lib-form-fieldset() mixin variables
| Mixin variable | Global variable | Default value | Comment |
|---|---|---|---|
| @_border | @form-fieldset__border | 0 | Fieldset border |
| @_margin | @form-fieldset__margin | 0 0 @indent__xl | Fieldset margin |
| @_padding | @form-fieldset__padding | 0 | Fieldset padding |
| @_legend-color | @form-fieldset-legend__color | false | Legend color |
| @_legend-font-size | @form-fieldset-legend__font-size | 20px | Legend font size |
| @_legend-font-family | @form-fieldset-legend__font-family | false | Legend font family |
| @_legend-font-weight | @form-fieldset-legend__font-weight | false | Legend font weight |
| @_legend-font-style | @form-fieldset-legend__font-style | false | Legend font style |
| @_legend-line-height | @form-fieldset-legend__line-height | 1.2 | Legend line height |
| @_legend-margin | @form-fieldset-legend__margin | 0 0 @indent__m | Legend margin |
| @_legend-padding | @form-fieldset-legend__padding | 0 | Legend padding |
| @_legend-width | @form-fieldset-legend__width | false | Legend width |
The .lib-form-field() mixin variables
| Mixin variable | Global variable | Default values [Allowed values] | Comment |
|---|---|---|---|
| @_type | @form-field-type | inline [inline | block] | How to display from field element and its label. When set to 'inline' they are displayed side-by-side. When set to 'block' the label is displayed above the control |
| @_border | @form-field__border | false | Border of the <div class="field"> element |
| @_column | @form-field-column | false [true | false] | Form fields are displayed in columns |
| @_column-padding | @form-field-column__padding | 0 12px 0 0 | Form fields column padding |
| @_column-number | @form-field-column__number | 2 | Form fields number of columns |
| @_type-block-margin | @form-field-type-block__margin | 0 0 @form-field__vertical-indent | Form fields margin if @form-field-type set to is 'block' |
| @_type-inline-margin | @form-field-type-inline__margin | 0 0 @form-field__vertical-indent | Form fields margin if @form-field-type is set to 'inline' |
| Form field label | |||
| @_label-color | @form-field-label__align | false | Field label text color |
| @_label-color | @form-field-label__color | false | Field label text color |
| @_label-font-size | @form-field-label__font-size | false | Field label font size |
| @_label-font-family | @form-field-label__font-family | false | Field label font family |
| @_label-font-weight | @form-field-label__font-weight | @font-weight__bold | Field label font weight |
| @_label-font-style | @form-field-label__font-style | false | Field label font style |
| @_label-line-height | @form-field-label__line-height | false | Field label line height |
| @_type-block-label-margin | @form-field-type-label-block__margin | 0 0 @indent__xs | Field label margin if @form-field-type is set to 'block' |
| @_type-inline-label-padding | @form-field-type-label-inline__padding | @form-field-type-label-inline__padding-top 15px 0 0 | Field label padding if @form-field-type is set to 'inline' |
| @_type-inline-label-width | @form-field-type-label-inline__width | 25.8% | Field label width if @form-field-type is set to 'inline' |
| @_type-inline-control-width | @form-field-type-control-inline__width | 74.2% | Field control width if @form-field-type is set to 'inline' |
| Label "required" asterisk | |||
| @_label-asterisk-color | @form-field-label-asterisk__color | #da370a | Label asterisk color |
| @_label-asterisk-font-size | @form-field-label-asterisk__font-size | @font-size__s | Label asterisk font size |
| @_label-asterisk-font-family | @form-field-label-asterisk__font-family | false | Label asterisk font family |
| @_label-asterisk-font-weight | @form-field-label-asterisk__font-weight | false | Label asterisk font weight |
| @_label-asterisk-font-style | @form-field-label-asterisk__font-style | false | Label asterisk font style |
| @_label-asterisk-line-height | @form-field-label-asterisk__line-height | false | Label asterisk line height |
| @_label-asterisk-margin | @form-field-label-asterisk__margin | 0 0 0 @indent__xs | Label asterisk margin |
| Field note | |||
| @_note-color | @form-field-note__color | false | Field note text color |
| @_note-font-size | @form-field-note__font-size | @font-size__s | Field note font size |
| @_note-font-family | @form-field-note__font-family | false | Field note font family |
| @_note-font-weight | @form-field-note__font-weight | false | Field note font weight |
| @_note-font-style | @form-field-note__font-style | false | Field note font style |
| @_note-line-height | @form-field-note__line-height | false | Field note line height |
| @_note-margin | @form-field-note__margin | 3px 0 0 | Field note margin |
| @_note-padding | @form-field-note__padding | 0 | Field note padding |
| @_note-icon-font-content | @form-field-note-icon-font__content | @icon-pointer-up | Field note icon code |
| @_note-icon-font | @form-field-note-icon-font | @icon-font | Field note icon font |
| @_note-icon-font-size | @form-field-note-icon-font__size | @form-field-note__font-size*2 | Field note icon font size |
| @_note-icon-font-line-height | @form-field-note-icon-font__line-height | @form-field-note__font-size | Field note icon line height |
| @_note-icon-font-color | @form-field-note-icon-font__color | @form-field-note__color | Field note icon color |
| @_note-icon-font-color-hover | @form-field-note-icon-font__color-hover | false | Field note icon hovered color |
| @_note-icon-font-color-active | @form-field-note-icon-font__color-active | false | Field note icon active color |
| @_note-icon-font-margin | @form-field-note-icon-font__margin | false | Field note icon margin |
| @_note-icon-font-vertical-align | @form-field-note-icon-font__vertical-align | @icon-font__vertical-align | Field note icon vertical align |
| @_note-icon-font-position | @form-field-note-icon-font__position | @icon-font__position [before | after] | Field note icon position |
| @_note-icon-font-text-hide | @form-field-note-icon-font__text-hide | @icon-font__text-hide [true | false] | Field note icon text hide |
The .lib-form-hasrequired() mixin variables
| Mixin variable | Global variable | Default values [Allowed values] | Comment |
|---|---|---|---|
| @_position | @form-hasrequired__position | top [top | bottom] | Position of "required fields" notice |
| @_color | @form-hasrequired__color | @form-field-label-asterisk__color | Text color of "required fields" notice |
| @_font-size | @form-hasrequired__font-size | @font-size__s | Font size of "required fields" notice |
| @_font-family | @form-hasrequired__font-family | false | Font family of "required fields" notice |
| @_font-weight | @form-hasrequired__font-weight | false | Font weight of "required fields" notice |
| @_font-style | @form-hasrequired__font-style | false | Font style of "required fields" notice |
| @_line-height | @form-hasrequired__line-height | false | Line height of "required fields" notice |
| @_border | @form-hasrequired__border | false | Border of "required fields" notice |
| @_margin | @form-hasrequired__margin | @indent__s 0 0 | Margin of "required fields" notice |
| @_padding | @form-hasrequired__padding | false | Padding of "required fields" notice |
The .lib-form-element-input() mixin variables
| Mixin variable | Global variable | Default value [Allowed value] | Comment |
|---|---|---|---|
| @_type | @form-element-input-type | '' [input-text | select | textarea | input-radio | input-checkbox] | Form control type. @form-element-input__[] global variables are used to set up all form elements style. Control-specific global variables use these @form-element-input__[] variables by default. Control-specific global variables can be set up separately. @input-text__[] is used to set up input-text controls style @select__[] is used to set up selects style @textarea__[] is used to set up textarea style |
| @_background | @form-element-input__background @input-text__background @selectbackground @textarea__background |
@color-white @form-element-input__background @form-element-input__background @form-element-input__background |
Form control background |
| @_border | @form-element-input__border @input-text__border @select__border @textarea__border |
1px solid @form-element-input__border-color @form-element-input__border @form-element-input__border @form-element-input__border |
Form control border |
| @_border-radius | @form-element-input__border-radius @input-textborder-radius @select__border-radius @textarea__border-radius |
1px @form-element-input__border-radius @form-element-input__border-radius @form-element-input__border-radius |
Form control border radius |
| @_height | @form-element-input__height @input-text__height @select__height @textarea__height |
32px @form-element-input__height @form-element-input__height auto |
Form control height |
| @_width | @form-element-input__width @input-text__width @select__width @textarea__width |
100% @form-element-input__width @form-element-input__width @form-element-input__width |
Form control width |
| @_margin | @form-element-input__margin @input-text__margin @select__margin @textarea__margin |
false [true | false] @form-element-input__margin @form-element-input__margin 0 |
Form control margin |
| @_padding | @form-element-input__padding @input-text__padding @select__padding @textarea__padding |
0 9px @form-element-input__padding 5px 10px 4px @indent__s |
Form control padding |
| @_vertical-align | @form-element-input__vertical-align @input-text__vertical-align @select__vertical-align @textarea__vertical-align |
baseline @form-element-input__vertical-align @form-element-input__vertical-align @form-element-input__vertical-align |
Form control vertical align |
| @_background-clip | @form-element-input__background-clip @input-text__background-clip @select__background-clip @textarea__background-clip |
padding-box [padding-box | border-box | content-box] @form-element-input__background-clip @form-element-input__background-clip @form-element-input__background-clip |
Form control background clip |
| Text settings | |||
| @_color | @form-element-input__color @input-text__color @select__color @textarea__color |
false @form-element-input__color @form-element-input__color @form-element-input__color |
Form control text color |
| @_font-size | @form-element-input__font-size @input-text__font-size @select__font-size @textarea__font-size |
@font-size__base @form-element-input__font-size @form-element-input__font-size @form-element-input__font-size |
Form control font size |
| @_font-family | @form-element-input__font-family @input-text__font-family @select__font-family @textarea__font-family |
@font-family__base @form-element-input__font-family @form-element-input__font-family @form-element-input__font-family |
Form control font family |
| @_font-weight | @form-element-input__font-weight @input-text__font-weight @select__font-weight @textarea__font-weight |
false @form-element-input__font-weight @form-element-input__font-weight @form-element-input__font-weight |
Form control font weight |
| @_font-style | @form-element-input__font-style @input-text__font-style @selectfont-style @textarea__font-style |
false @form-element-input__font-style @form-element-input__font-style @form-element-input__font-style |
Form control font style |
| @_line-height | @form-element-input__line-height @input-text__line-height @select__line-height @textarea__line-height |
@line-height__base @form-element-input__line-height @form-element-input__line-height @form-element-input__line-height |
Form control line height |
| Placeholder | |||
| @_placeholder-color | @form-element-input-placeholder__color @input-text-placeholder__color @select-placeholder__color @textarea-placeholder__color |
#c2c2c2 @form-element-input-placeholder__color @form-element-input-placeholder__color @form-element-input-placeholder__color |
Form control placeholder color |
| @_placeholder-font-style | @form-element-input-placeholder__font-style @inputtext-placeholder-font-style @select-placeholder__font-style @textarea-placeholder__font-style |
@form-element-input__font-style @form-element-input-placeholder__font-style @form-element-input-placeholder__font-style @form-element-input-placeholder__font-style |
Form control placeholder font style |
| Disabled element | |||
| @_disabled-background | @form-element-input__disabled__background @inputtextdisabled-background @select__disabled__background @textarea__disabled__background |
@form-element-input__background @form-element-input__disabled__background @form-element-input__disabled__background @form-element-input__disabled__background |
Disabled form element background |
| @_disabled-border | @form-element-input__disabled__border @input-text__disabled__border @select__disabled__border @textarea__disabled__border |
@form-element-input__border @form-element-input__disabled__border @form-element-input__disabled__border @form-element-input__disabled__border |
Disabled form element border |
| @_disabled-opacity | @form-element-input__disabled__opacity @input-text__disabled__opacity @select__disabled__opacity @textarea__disabled__opacity |
.5 @form-element-input__disabled__opacity @form-element-input__disabled__opacity @form-element-input__disabled__opacity |
Disabled form element opacity |
| @_disabled-color | @form-element-input__disabled__color @input-text__disabled__color @select__disabled__color @textarea__disabled__color |
@form-element-input__color @form-element-input__disabled__color @form-element-input__disabled__color @form-element-input__disabled__color |
Disabled form element text color |
| @_disabled-font-style | @form-element-input__disabled__font-style @input-text__disabled__font-style @select__disabled__font-style @textarea__disabled__font-style |
@form-element-input__font-style @form-element-input__disabled__font-style @form-element-input__disabled__font-style @form-element-input__disabled__font-style |
Disabled form element font style |
| Focused elements | |||
| @_focus-background | @form-element-input__focus__background @input-text__focus__background @select__focus__background @textarea__focus__background |
@form-element-input__background @form-element-input__focus__background @form-element-input__focus__background @form-element-input__focus__background |
Focused form element background |
| @_focus-border | @form-element-input__focus__border @input-text__focus__border @select__focus__border @textarea__focus__border |
@form-element-input__border @form-element-input__focus__border @form-element-input__focus__border @form-element-input__focus__border |
Focused form element border |
| @_focus-color | @form-element-input__focus__color @input-text__focus__color @select__focus__color @textarea__focus__color |
@form-element-input__color @form-element-input__focus__color @form-element-input__focus__color @form-element-input__focus__color |
Focused form element color |
| @_focus-font-style | @form-element-input__focus__font-style @input-text__focus__font-style @select__focus__font-style @textarea__focus__font-style |
@form-element-input__font-style @form-element-input__focus__font-style @form-element-input__focus__font-style @form-element-input__focus__font-style |
Focused form element font style |
The .lib-form-element-choise() mixin variables
| Mixin variable | Global variable | Default values [Allowed values] | Comment |
|---|---|---|---|
| @_type | @form-element-choice__type | '' ['' | radio | checkbox] | Choice element type |
| @_vertical-align | @form-element-choice__vertical-align @input-radio__vertical-align @input-checkbox__vertical-align |
false @form-element-choice__vertical-align @form-element-choice__vertical-align |
Choice element vertical align |
| @_margin | @form-element-choice__margin @input-radio__margin @input-checkbox__margin |
2px @indent__xs 0 0 @form-element-choice__margin @form-element-choice__margin |
Choice element margin |
| @_disabled-opacity | @form-element-choice__disabled__opacity @input-radio__disabled__opacity @input-checkbox__disabled__opacity |
@form-element-input__disabled__opacity @form-element-choice__disabled__opacity @form-element-choice__disabled__opacity |
Disabled choice element opacity |
The .lib-form-validation-note() mixin
| Mixin variable | Global variable | Default values [Allowed values] | Comment |
|---|---|---|---|
| @_note-color | @form-validation-note__color-error | @error__color | Validation note text color |
| @_note-font-size | @form-validation-note__font-size | @font-size__s | Validation note font size |
| @_note-font-family | @form-validation-note__font-family | false | Validation note font family |
| @_note-font-style | @form-validation-note__font-style | false | Validation note font style |
| @_note-font-weight | @form-validation-note__font-weight | false | Validation note font weight |
| @_note-line-height | @form-validation-note__line-height | false | Validation note line height |
| @_note-margin | @form-validation-note__margin | 3px 0 0 | Validation note margin |
| @_note-padding | @form-validation-note__padding | false | Validation note padding |
| @_note-icon-use | @form-validation-note-icon__use | false [true | false] | Show validation note icon |
| @_note-icon-font-content | @form-validation-note-icon__font-content | @icon-pointer-up | Validation note icon code |
| @_note-icon-font | @form-validation-note-icon__font | @icon-font | Validation note icon font |
| @_note-icon-font-size | @form-validation-note-icon__font-size | @form-validation-note__font-size * 2 | Validation note icon font size |
| @_note-icon-font-line-height | @form-validation-note-icon__font-line-height | @form-validation-note__font-size | Validation note icon line height |
| @_note-icon-font-color | @form-validation-note-icon__font-color | @form-validation-note__color-error | Validation note icon color |
| @_note-icon-font-color-hover | @form-validation-note-icon__font-color-hover | false | Hovered validation note icon color |
| @_note-icon-font-color-active | @form-validation-note-icon__font-color-active | false | Active validation note icon color |
| @_note-icon-font-margin | @form-validation-note-icon__font-margin | false | Validation note icon margin |
| @_note-icon-font-vertical-align | @form-validation-note-icon__font-vertical-align | @icon-font__vertical-align | Validation note icon vertical align |
| @_note-icon-font-position | @form-validation-note-icon__font-position | @icon-font__position | Validation note icon position |
| @_note-icon-font-text-hide | @form-validation-note-icon__font-text-hide | @icon-font__text-hide | Validation note icon text hide |
Font icon variables
The .lib-icon-font() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_icon-font-content | - | '' | icon code | icon variables | Font icon code | |
| @_icon-font | @icon-font | @icons__font-name | '' | false | value | The icon font |
| @_icon-font-size | @icon-font__size | inherit | '' | false | value | Font icon size |
| @_icon-font-line-height | @icon-font__line-height | @icon-font__size | '' | false | value | Font icon line height |
| @_icon-font-color | @icon-font__color | inherit | '' | inherit | color code | Font icon color |
| @_icon-font-color-hover | @icon-font__color-hover | false | '' | inherit | color code | Font icon color - hover state |
| @_icon-font-color-active | @icon-font__color-active | false | '' | inherit | color code | Font icon color - active state |
| @_icon-font-margin | @icon-font__margin | @icon__margin | '' | false | value | Font icon margin |
| @_icon-font-vertical-align | @icon-font__vertical-align | @icon__vertical-align | '' | false | value | Font icon vertical align |
| @_icon-font-position | @icon-font__position | @icon__position | before | after | Font icon position |
| @_icon-font-text-hide | @icon-font__text-hide | @icon__text-hide | true | false | The text of the element is replaced with the icon(true), or the icon is on the side of the text (false) |
| @_icon-font-display | @icon-font__display | inline-block | '' | false | value | The 'display' property of the icon container |
Icon with image or sprite variables
The .lib-icon-image() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_icon-image | - | '' | false | value | A link to an image or sprite, mandatory parameter | |
| @_icon-image-height | @icon__height | 26px | '' | false | value | Icon image height |
| @_icon-image-width | @icon__width | 26px | '' | false | value | Icon image width |
| @_icon-image-margin | @icon__margin | 0 | '' | false | value | Icon image margin |
| @_icon-image-vertical-align | @icon__vertical-align | middle | '' | false | value | Icon image vertical align |
| @_icon-image-position-x | @icon-image__position-x | 0 | '' | false | value | Horizontal image position |
| @_icon-image-position-y | @icon-image__position-y | 0 | '' | false | value | Vertical image position |
| @_icon-image-position | @icon__position | before | before | after | Icon image position |
| @_icon-image-text-hide | @icon__text-hide | false | true | false | The text in the <span> tag should be hidden |
Icon position for an icon with image or sprite variables
The .lib-icon-image-position() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_icon-image-position-x | @icon-image__position-x | 0 | '' | false | value | Horizontal starting position of icon image |
| @_icon-image-position-y | @icon-image__position-y | 0 | '' | false | value | Vertical starting position of icon image |
| @_icon-image-position | - | - | before | after | Position of the icon which is set for the element |
Icon sprite position variables
The .lib-icon-sprite-position() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_icon-sprite-position-x | @icon-sprite__position-x | 0 | '' | false | value | The x coordinate of the desired image on the grid |
| @_icon-sprite-position-y | @icon-sprite__position-y | 0 | '' | false | value | The y coordinate of the desired image on the grid |
| @_icon-sprite-grid | @icon-sprite__grid | 26px | '' | false | value | The size of the grid (in pixels) that the individal images are placed on |
| @_icon-sprite-position | @icon__position | before | before | after | Icon image position |
Image/sprite icon size variables
The .lib-icon-image-size() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_icon-image-width | @icon__width | 26px | '' | false | value | Icon image width |
| @_icon-image-height | @icon__height | 26px | '' | false | value | Icon image height |
| @_icon-image-position | @icon__position | before | before | after | Icon image position |
Layout variables
| Variables list names | Default value | Allowed values | Comment |
|---|---|---|---|
| @layout__width | '' | '' | false | value | Page minimum width |
| @layout__max-width | 1280px | '' | false | value | Page maximum width |
| @layout-indent__width | 20px | '' | false | value | Page indents on the left and right |
| Class names defining different layouts | |||
| @layout-class-1column | page-layout-1column | '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns | Class name for one column layout |
| @layout-class-2columns__left | page-layout-2columns-left | '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns | Class name for two columns layout with left sidebar |
| @layout-class-2columns__right | page-layout-2columns-right | '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns | Class name for two columns layout with right sidebar |
| @layout-class-3columns | page-layout-3columns | '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns | Class name for three columns layout with left sidebar |
| Variables used for layout grid | |||
| @total-columns | 12 | '' | false | value | Number of total columns in layout (i.e. 1, 2, 3) |
| @gutter-width | 0 | '' | false | value | Distanse between columns |
| Variables for layout columns | |||
| @layout-column__width | @total-columns | '' | false | value | Sets base columns number |
| @layout-column__sidebar-width | 2 | '' | false | value | Sets sidebar width |
| @layout-column__left-width | @layout-column__sidebar-width | '' | false | value | Sets left column width |
| @layout-column__right-width | @layout-column__sidebar-width | '' | false | value | Sets right column width |
| Variables for layout columns depending on layout used | |||
| @layout-column-main__width-1 | 100% | '' | false | value | Sets one column width |
| @layout-column-main__width-2-left | @layout-column__width - @layout-column__left-width | '' | false | value | Sets left column width |
| @layout-column-main__width-2-right | @layout-column__width - @layout-column__right-width | '' | false | value | Sets right column width |
| @layout-column-main__width-3 | @layout-column__width - @layout-column__left-width - @layout-column__right-width | '' | false | value | Sets three columns layout main column width |
| Settings variables | |||
| @use-flex | true | '' | true | false | Sets compatibility for browsers not supporting flex |
| @responsive | true | '' | true | false | Is set to true if theme has responsive layout |
Loader variables
The .lib-loader() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_loader-overlay-background-color | @loader-overlay__background-color | rgba(255, 255, 255, .5) | '' | false | value | Loader overlay background color |
| @_loader-overlay-z-index | @loader-overlay__z-index | 9999 | '' | false | value | Loader overlay background z-index |
| @_loader-icon-width | @loader-icon__width | 160px | '' | false | value | Loader icon width |
| @_loader-icon-height | @loader-icon__height | 160px | '' | false | value | Loader icon height |
| @_loader-icon-background-color | @loader-icon__background-color | transparent | '' | false | value | Loader icon background color |
| @_loader-icon-background-image | @loader-icon__background-image | url('@{baseDir}images/loader-2.gif') | '' | false | value | Loader icon ackground image |
| @_loader-icon-background-position | @loader-icon__background-position | 50% 50% | '' | false | value | Loader icon background position |
| @_loader-icon-border-radius | @loader-icon__border-radius | 5px | '' | false | value | Loader icon border radius |
| @_loader-icon-padding | @loader-icon__padding | '' | '' | false | value | Loader icon icon padding |
| @_loader-text | @loader-text | false | '' | false | value | Loader text presence |
| @_loader-text-color | @loader-text__color | @primary__color | '' | false | value | Loader text color |
| @_loader-text-font-size | @loader-text__font-size | @font-size__base | '' | false | value | Loader text font size |
| @_loader-text-font-family | @loader-text__font-family | @font-family__base | '' | false | value | Loader text font family |
| @_loader-text-font-weight | @loader-text__font-weight | @font-weight__regular | '' | false | value | Loader text font weight |
| @_loader-text-font-style | @loader-text__font-style | @font-style__base | '' | false | value | Loader text font style |
| @_loader-text-padding | @loader-text__padding | 130px 0 0 | '' | false | value | Loader text padding |
Loading variables
The .lib-loading() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_loading-background-color | @loading__background-color | @loader-overlay__background-color | '' | false | value | Loading overlay background color |
| @_loading-background-image | @loading__background-image | @loader-icon__background-image | '' | false | value | Loading overlay background z-index |
Messages variables
The .lib-message() mixin variables
| Mixin variable | Default value | Allowed values | Comment |
|---|---|---|---|
| @message__padding | @indent__s @indent__base | '' | value | Message padding |
| @message__margin | @indent__xs 0 | '' | value | Message margin |
| @message__color | false | true | false | Each message type has its own message color |
| Messages font style | |||
| @message__font-size | 13px | '' | false | value | Message font size |
| @message__font-family | false | '' | false | value | Message font family |
| @message__font-style | false | '' | false | value | Message font style |
| @message__font-weight | false | '' | false | value | Message font weight |
| @message__line-height | 1.2em | '' | false | value | Message line height |
| Message icon setup | |||
| @message-icon__font-size | ceil(@message__font-size * 2 + 2) | '' | false | value | Message icon font size |
| @message-icon__font-line-height | @message-icon__font-size | '' | false | value | Message icon line height |
| @message-icon__inner-padding-left | 40px | '' | false | value | Message icon padding left |
| @message-icon__lateral-width | 30px | '' | false | value | Message icon lateral width |
| @message-icon__lateral-arrow-size | 5px | '' | false | value | Message icon arrow size |
| @message-icon__top | 18px | '' | false | value | Message icon top position |
| @message-icon__right | false | '' | false | value | Message icon right position |
| @message-icon__bottom | false | '' | false | value | Message icon bottom position |
| @message-icon__left | 0 | '' | false | value | Message icon left position |
| Message border | |||
| @message__border-width | false | '' | false | value | Message border width |
| @message__border-color | false | '' | false | value | Message border color |
| @message__border-style | false | '' | false | value | Message border style |
| @message__border-radius | false | '' | false | value | Message border radius |
| Information message | |||
| @message-info__color | #6f4400 | '' | false | value | Information message text color |
| @message-info__background | #fdf0d5 | '' | false | value | Information message background |
| @message-info-link__color | @link__color | '' | false | value | Information message link color |
| @message-info-link__color-hover | @link__hover__color | '' | false | value | Information message hovered link color |
| @message-info-link__color-active | @link__hover__color | '' | false | value | Information message active link color |
| @message-info__border-color | @message__border-color | '' | false | value | Information message border color |
| @message-info-icon | @icon-warning | '' | false | value | Information message icon symbol code |
| @message-info-icon__color-inner | #c07600 | '' | false | value | Information message icon symbol color |
| @message-info-icon__color-lateral | @color-white | '' | false | value | Information message lateral icon symbol color |
| @message-info-icon__background | #6f4400 | '' | false | value | Information message icon background |
| @message-info-icon__top | @message-icon__top | '' | false | value | Message icon top position |
| @message-info-icon__right | @message-icon__right | '' | false | value | Message icon right position |
| @message-info-icon__bottom | @message-icon__bottom | '' | false | value | Message icon bottom position |
| @message-info-icon__left | @message-icon__left | '' | false | value | Message icon left position |
| Warning message | |||
| @message-warning__color | @message-info__color | '' | false | value | Warning message text color |
| @message-warning__background | @message-info__background | '' | false | value | Warning message background |
| @message-warning-link__color | @message-info-link__color | '' | false | value | Warning message link color |
| @message-warning-link__color-hover | @message-info-link__color-hover | '' | false | value | Warning message hovered link color |
| @message-warning-link__color-active | @message-info-link__color-active | '' | false | value | Warning message active link color |
| @message-info__border-color | @message-info__border-color | '' | false | value | Warning message border color |
| @message-warning-icon | @message-info-icon | '' | false | value | Warning message icon symbol code |
| @message-warning-icon__color-inner | @message-info-icon__color-inner | '' | false | value | Warning message icon symbol color |
| @message-warning-icon__color-lateral | @message-info-icon__color-lateral | '' | false | value | Warning message lateral icon symbol color |
| @message-warning-icon__background | @message-info-icon__background | '' | false | value | Warning message icon background |
| @message-warning-icon__top | @message-icon__top | '' | false | value | Message icon top position |
| @message-warning-icon__right | @message-icon__right | '' | false | value | Message icon right position |
| @message-warning-icon__bottom | @message-icon__bottom | '' | false | value | Message icon bottom position |
| @message-warning-icon__left | @message-icon__left | '' | false | value | Message icon left position |
| Error message | |||
| @message-error__color | @error__color | '' | false | value | Error message text color |
| @message-error__background | #fae5e5 | '' | false | value | Error message background |
| @message-error-link__color | @link__color | '' | false | value | Error message link color |
| @message-error-link__color-hover | @link__hover__color | '' | false | value | Error message hovered link color |
| @message-error-link__color-active | @link__hover__color | '' | false | value | Error message active link color |
| @message-error__border-color | @message__border-color | '' | false | value | Error message border color |
| @message-error-icon | @icon-warning | '' | false | value | Error message icon symbol code |
| @message-error-icon__color-inner | #b30000 | '' | false | value | Error message icon symbol color |
| @message-error-icon__color-lateral | @color-white | '' | false | value | Error message lateral icon symbol color |
| @message-error-icon__background | #b30000 | '' | false | value | Error message icon background |
| @message-error-icon__top | @message-icon__top | '' | false | value | Message icon top position |
| @message-error-icon__right | @message-icon__right | '' | false | value | Message icon right position |
| @message-error-icon__bottom | @message-icon__bottom | '' | false | value | Message icon bottom position |
| @message-error-icon__left | @message-icon__left | '' | false | value | Message icon left position |
| Success message | |||
| @message-success__color | #006400 | '' | false | value | Success message text color |
| @message-success__background | #e5efe5 | '' | false | value | Success message background |
| @message-success-link__color | @link__color | '' | false | value | Success message link color |
| @message-success-link__color-hover | @link__hover__color | '' | false | value | Success message hovered link color |
| @message-success-link__color-active | @link__hover__color | '' | false | value | Success message active link color |
| @message-success__border-color | @message__border-color | '' | false | value | Success message border color |
| @message-success-icon | @icon-checkmark | '' | false | value | Success message icon symbol code |
| @message-success-icon__color-inner | #006400 | '' | false | value | Success message icon symbol color |
| @message-success-icon__color-lateral | @color-white | '' | false | value | Success message lateral icon symbol color |
| @message-success-icon__background | #006400 | '' | false | value | Success message icon background |
| @message-success-icon__top | @message-icon__top | '' | false | value | Message icon top position |
| @message-success-icon__right | @message-icon__right | '' | false | value | Message icon right position |
| @message-success-icon__bottom | @message-icon__bottom | '' | false | value | Message icon bottom position |
| @message-success-icon__left | @message-icon__left | '' | false | value | Message icon left position |
| Notice message | |||
| @message-notice__color | @message-info__color | '' | false | value | Notice message text color |
| @message-notice__background | @message-info__background | '' | false | value | Notice message background |
| @message-notice-link__color | @message-info-link__color | '' | false | value | Notice message link color |
| @message-notice-link__color-hover | @message-info-link__color-hover | '' | false | value | Notice message hovered link color |
| @message-notice-link__color-active | @message-info-link__color-active | '' | false | value | Notice message active link color |
| @message-notice__border-color | @message-info__border-color | '' | false | value | Notice message border color |
| @message-notice-icon | @message-info-icon | '' | false | value | Notice message icon symbol code |
| @message-notice-icon__color-inner | @message-info-icon__color-inner | '' | false | value | Notice message icon symbol color |
| @message-notice-icon__color-lateral | @message-info-icon__color-lateral | '' | false | value | Notice message lateral icon symbol color |
| @message-notice-icon__background | @message-info-icon__background | '' | false | value | Notice message icon background |
| @message-notice-icon__top | @message-icon__top | '' | false | value | Message icon top position |
| @message-notice-icon__right | @message-icon__right | '' | false | value | Message icon right position |
| @message-notice-icon__bottom | @message-icon__bottom | '' | false | value | Message icon bottom position |
| @message-notice-icon__left | @message-icon__left | '' | false | value | Message icon left position |
Pagination variables
The .lib-pager() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_pager-label-display | @pager-label__display | none | none | block | inline-block | The 'page' label is displayed |
| @_pager-item-display | @pager-item__display | inline-block | none | block | inline-block | The pager item label is displayed |
| @_pager-reset-spaces | @pager-reset-spaces | true | true | false | Reset spaces between inline-block elements if elements 'display' is set to 'inline-block' |
| @_pager-font-size | @pager__font-size | @font-size__s | '' | false | value | Pager font size |
| @_pager-font-weight | @pager__font-weight | @font-weight__bold | '' | false | value | Pager font weight |
| @_pager-line-height | @pager__line-height | 32px | '' | false | value | Pager line height |
| @_pager-item-margin | @pager-item__margin | 0 2px 0 0 | '' | false | value | Pager item margin |
| @_pager-item-padding | @pager-item__padding | 0 4px | '' | false | value | Pager item padding |
| @_pager-actions-padding | @pager-actions__padding | 0 | '' | false | value | Pager actions padding |
| Pager current page | ||||
| @_pager-current-font-weight | @pager-current__font-weight | @font-weight__bold; | '' | false | value | Current page number font weight |
| @_pager-current-color | @pager-current__color | @primary__color | '' | false | value | Current page number color |
| @_pager-current-border | @pager-current__border | false | '' | false | value | Current page number border |
| @_pager-current-background | @pager-current__background | false | '' | false | value | Current page number background |
| @_pager-current-gradient | @pager-current__gradient | false | true | false | Current page number has gradient background |
| @_pager-current-gradient-direction | @pager-current__gradient-direction | false | '' | false | vertical | horizontal | Direction of current page number background gradient (if there is any) |
| @_pager-current-gradient-color-start | @pager-current__gradient-color-start | false | '' | false | value | Current page number gradient start color |
| @_pager-current-gradient-color-end | @pager-current__gradient-color-end | false | '' | false | value | Current page number gradient end color |
| Link to page number | ||||
| @_pager-gradient | @pager__gradient | false | true | false | Pager items have gradient background |
| @_pager-gradient-direction | @pager__gradient-direction | 'false | '' | false | vertical | horizontal | Direction of background gradient (if there is any) of pager item |
| Link to page number - default | ||||
| @_pager-color | @pager__color | @link__color | '' | false | value | Pager item color |
| @_pager-border | @pager__border | false | '' | false | value | Pager item border |
| @_pager-text-decoration | @pager__text-decoration | none | '' | false | value | Pager item text decoration |
| @_pager-background | @pager__background | false | '' | false | value | Pager item background |
| @_pager-gradient-color-start | @pager__gradient-color-start | false | '' | false | value | Pager item gradient start color |
| @_pager-gradient-color-end | @pager__gradient-color-end | false | '' | false | value | Pager item gradient end color |
| Link to page number - visited | ||||
| @_pager-color-visited | @pager__visited__color | @link__visited__color | '' | false | value | Pager item visited color |
| @_pager-border-visited | @pager__visited__border | false | '' | false | value | Pager item visited border |
| @_pager-background-visited | @pager__visited__background | false | '' | false | value | Pager item visited background |
| @_pager-gradient-color-start-visited | @pager__visited__gradient-color-start | false | '' | false | value | Pager item visited gradient start color |
| @_pager-gradient-color-end-visited | @pager__visited__gradient-color-end | false | '' | false | value | Pager item visited gradient end color |
| Link to page number - hover | ||||
| @_pager-color-hover | @pager__hover__color | @link__hover__color | Pager item hover color | |
| @_pager-border-hover | @pager__hover__border | false | '' | false | value | Pager item hover border |
| @_pager-text-decoration-hover | @pager__text-decoration | none | '' | false | value | Pager item hover text decoration |
| @_pager-background-hover | @pager__hover__background | false | '' | false | value | Pager item hover background |
| @_pager-gradient-color-start-hover | @pager__hover__gradient-color-start | false | '' | false | value | Pager item hover gradient start color |
| @_pager-gradient-color-end-hover | @pager__hover__gradient-color-end | false | '' | false | value | Pager item hover gradient end color |
| Link to page number - active | ||||
| @_pager-color-active | @pager__active__color | @link__hover__color | '' | false | value | Pager item active color |
| @_pager-border-active | @pager__active__border | false | '' | false | value | Pager item active border |
| @_pager-background-active | @pager__active__background | false | '' | false | value | Pager item active background |
| @_pager-gradient-color-start-active | @pager__active__gradient-color-start | false | '' | false | value | Pager item active gradient start color |
| @_pager-gradient-color-end-active | @pager__active__gradient-color-end | false | '' | false | value | Pager item active gradient end color |
| Previous/next action links - icons | ||||
| @_pager-icon-use | @pager-icon__use | true | true | false | previous/next links have icons |
| @_pager-icon-previous-content | @pager-icon__previous-content | @icon-prev | '' | false | value | "previous" link icon |
| @_pager-icon-next-content | @pager-icon__next-content | @icon-next | '' | false | value | "next" link icon |
| @_pager-icon-text-hide | true | true | false | The "previous" and "next" words are hidden | |
| @_pager-icon-position | before | before | after | Icon position | |
| @_pager-icon-font | @pager-icon__font | @icon-font | '' | false | value | Icon font |
| @_pager-icon-font-margin | @pager-icon__font-margin | 0 0 0 -6px | '' | false | value | Icon font margin |
| @_pager-icon-font-vertical-align | @pager-icon__font-vertical-align | top | '' | false | value | Icon font vertical align |
| @_pager-icon-font-size | @pager-icon__font-size | 46px | '' | false | value | Icon font size |
| @_pager-icon-font-line-height | @pager-icon__font-line-height | @icon-font__line-height | '' | false | value | Icon font line height |
| Previous/next action links | ||||
| @_pager-action-gradient | @pager__gradient | false | true | false | Previous/next links have gradient background |
| @_pager-action-gradient-direction | @pager__gradient-direction | false | '' | false | vertical | horizontal | Direction of background gradient (if there is any) of previous/next links |
| Previous/next action links - default | ||||
| @_pager-action-color | @pager-action__color | @text__color__muted | '' | false | value | Pager action color |
| @_pager-action-border | @pager-action__border | @border-width__base solid @border-color__base | '' | false | value | Pager action border |
| @_pager-action-text-decoration | @pager-action__text-decoration | @pager__text-decoration | '' | false | value | Pager action text decoration |
| @_pager-action-background | @pager-action__background | @pager__background | '' | false | value | Pager action background |
| @_pager-action-gradient-color-start | @pager__gradient-color-start | false | '' | false | value | Pager action gradient start color |
| @_pager-action-gradient-color-end | @pager__gradient-color-end | false | '' | false | value | Pager action gradient end color |
| Previous/next action links - visited | ||||
| @_pager-action-color-visited | @pager-action__visited__color | @pager-action__color | '' | false | value | Pager action visited color |
| @_pager-action-border-visited | @pager-action__visited__border | false | '' | false | value | Pager action visited border |
| @_pager-action-background-visited | @pager-action__visited__background | false | '' | false | value | Pager action visited background |
| @_pager-action-gradient-color-start-visited | @pager__visited__gradient-color-start | false | '' | false | value | Pager action visited gradient start color |
| @_pager-action-gradient-color-end-visited | @pager__visited__gradient-color-end | false | '' | false | value | Pager action visited gradient end color |
| Previous/next action links - hover | ||||
| @_pager-action-color-hover | @pager-action__hover__color | @pager-action__color | '' | false | value | Pager action hover color |
| @_pager-action-border-hover | @pager-action__hover__border | false | '' | false | value | Pager action hover border |
| @_pager-action-text-decoration-hover | @pager-action__hover__text-decoration | @pager__hover__text-decoration | '' | false | value | Pager action hover text decoration |
| @_pager-action-background-hover | @pager-action__hover__background | false | '' | false | value | Pager action hover background |
| @_pager-action-gradient-color-start-hover | @pager__hover__gradient-color-start | false | '' | false | value | Pager action hover gradient start color |
| @_pager-action-gradient-color-end-hover | @pager__hover__gradient-color-end | false | '' | false | value | Pager action hover gradient end color |
| Previous/next action links - active | ||||
| @_pager-action-color-active | @pager-action__active__color | @pager-action__color | '' | false | value | Pager action active color |
| @_pager-action-border-active | @pager-action__active__border | false | '' | false | value | Pager action active border |
| @_pager-action-background-active | @pager-action__active__background | false | '' | false | value | Pager action active background |
| @_pager-action-gradient-color-start-active | @pager__active__gradient-color-start | false | '' | false | value | Pager action active gradient start color |
| @_pager-action-gradient-color-end-active | @pager__active__gradient-color-end | false | '' | false | value | Pager action active gradient end color |
Popup variables
The .lib-popup() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_popup-width | @popup__width | auto | '' | false | value | Popup width |
| @_popup-height | @popup__height | auto | '' | false | value | Popup height |
| @_popup-padding | @popup__padding | 22px | '' | false | value | Inner popup padding |
| @_popup-background | @popup__background | @color-white | '' | false | value | Popup background |
| @_popup-border | @popup__border | 1px solid #aeaeae | '' | false | value | Popup border |
| @_popup-shadow | @popup__shadow | 0 3px 3px rgba(0,0,0,.15) | '' | false | none | value | Popup shadow |
| @_popup-fade | @popup__fade | opacity .3s linear | '' | false | value | Popup overlay opacity |
| @_popup-z-index | @popup__z-index | 1001 | '' | false | value | Popup z-index |
| Popup position | ||||
| @_popup-position | @popup__position | fixed | '' | false | value | Popup position |
| @_popup-position-top | @popup__position-top | 0 | '' | false | value | Popup top |
| @_popup-position-right | @popup__position-right | 0 | '' | false | value | Popup right |
| @_popup-position-bottom | @popup__position-bottom | 0 | '' | false | value | Popup bottom |
| @_popup-position-left | @popup__position-left | 0 | '' | false | value | Popup left |
| Popup margin | ||||
| @_popup-margin-top | @popup__margin-top | false | '' | false | value | Popup top margin |
| @_popup-margin-right | @popup__margin-right | false | '' | false | value | Popup right margin |
| @_popup-margin-bottom | @popup__margin-bottom | false | '' | false | value | Popup bottom margin |
| @_popup-margin-left | @popup__margin-left | false | '' | false | value | Popup left margin |
| @_popup-content-height | @popup-content__height | auto | '' | false | value | Popup content height |
| @_popup-header-margin | @popup-header__margin | 0 0 25px | '' | false | value | Popup header margin |
| @_popup-content-margin | @popup-content__margin | false | '' | false | value | Popup content margin |
| @_popup-footer-margin | @popup-footer__margin | false | '' | false | value | Popup footer margin |
| @_popup-title-headings | @popup-title-headings | true | true | false | Popup title has the same style as one of page headings |
| @_popup-title-headings-level | @popup-title-headings__level | h3 | h1 | h2 | h3 | h4 | h5 | h6 | What heading style is applied to the popup title |
| Popup close button | ||||
| @_popup-button-close-icon | @popup-button-close__icon | true | true | false | Popup close button has an icon |
| @_popup-button-close-reset | @popup-button-close__reset | true | true | false | Reset popup close button default styles |
| @_popup-button-close-position | @popup-button-close__position | absolute | '' | false | value | Popup button close position |
| @_popup-button-close-position-top | @popup-button-close__position-top | 10px | '' | false | value | Popup button close top position |
| @_popup-button-close-position-right | @popup-button-close__position-right | 10px | '' | false | value | Popup button close right position |
| @_popup-button-close-position-bottom | @popup-button-close__position-bottom | '' | '' | false | value | Popup button close bottom position |
| @_popup-button-close-position-left | @popup-button-close__position-left | '' | '' | false | value | Popup button close left position |
| Popup icons parameters | ||||
| @_popup-icon-font-content | @popup-icon-font__content | @icon-remove | '' | false | value | Popup icon code |
| @_popup-icon-font | @popup-icon-font | @button-icon__font | '' | false | value | Popup icon font |
| @_popup-icon-font-size | @popup-icon-font__size | @button-icon__font-size | '' | false | value | Popup icon font size |
| @_popup-icon-font-line-height | @popup-icon-font__line-height | @button-icon__line-height | '' | false | value | Popup icon line height |
| @_popup-icon-font-color | @popup-icon-font__color | @button-icon__color | '' | false | value | Popup icon color |
| @_popup-icon-font-color-hover | @popup-icon-font__color-hover | @button-icon__hover__font-color | '' | false | value | Hovered popup icon color |
| @_popup-icon-font-color-active | @popup-icon-font__color-active | @popup-icon-font__color-active | '' | false | value | Active popup icon color |
| @_popup-icon-font-margin | @popup-icon-font__margin | @button-icon__margin | '' | false | value | Popup icon margin |
| @_popup-icon-font-vertical-align | @popup-icon-font__vertical-align | @button-icon__vertical-align | '' | false | value | Popup icon vertical align |
| @_popup-icon-font-position | @popup-icon-font__position | @button-icon__position | '' | false | value | Popup icon position |
| @_popup-icon-font-text-hide | @popup-icon-font__text-hide | true | true | false | Popup icon hide text |
| Actions toolbar parameters | ||||
| @_popup-actions-toolbar | @popup-actions-toolbar | false | true | false | Actions toolbar is displayed |
| @_popup-actions-toolbar-actions-position | @popup-actions-toolbar-actions__position | @actions-toolbar-actions__position | justify | left | right | center | Actions toolbar position |
| @_popup-actions-toolbar-actions-reverse | @popup-actions-toolbar-actions__reverse | @actions-toolbar-actions__reverse | true | false | Actions toolbar reverse |
| @_popup-actions-toolbar-margin | @popup-actions-toolbar__margin | @actions-toolbar__margin | '' | false | value | Actions toolbar margin |
| @_popup-actions-toolbar-padding | @popup-actions-toolbar__padding | @actions-toolbar__padding | '' | false | value | Actions toolbar padding |
| @_popup-actions-toolbar-actions-margin | @popup-actions-toolbar-actions__margin | @actions-toolbar-actions__margin | '' | false | value | Actions toolbar actions margin |
| @_popup-actions-toolbar-primary-actions-margin | @popup-actions-toolbar-actions-primary__margin | @actions-toolbar-actions-primary__margin | '' | false | value | Actions toolbar primary actions margin |
| @_popup-actions-toolbar-secondary-actions-margin | @popup-actions-toolbar-actions-secondary__margin | @actions-toolbar-actions-secondary__margin | '' | false | value | Actions toolbar secondary actions margin |
| @_popup-actions-toolbar-actions-links-margin-top | @popup-actions-toolbar-actions-links__margin-top | @actions-toolbar-actions-links__margin-top | '' | false | value | Actions toolbar links top margin |
| @_popup-actions-toolbar-primary-actions-links-margin-top | @popup-actions-toolbar-actions-links-primary__margin-top | @actions-toolbar-actions-links-primary__margin-top | '' | false | value | Actions toolbar primary actions links top margin |
| @_popup-actions-toolbar-secondary-links-margin-top | @popup-actions-toolbar-actions-links-secondary__margin-top | @actions-toolbar-actions-links-secondary__margin-top | '' | false | value | Actions toolbar secondary links top margin |
Window overlay variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_overlay-background | @overlay__background | #000 | '' | false | value | Overlay background color |
| @_overlay-opacity | @overlay__opacity | .5 | '' | false | value | Overlay opacity |
| @_overlay-opacity-old | @overlay__opacity-old | 50 | '' | false | value | Overlay opacity for old browsers |
| @_overlay-fade | @overlay__fade | opacity .15s linear | '' | false | value | Overlay fade |
| @_overlay-z-index | @overlay__z-index | 1000 | '' | value | Overlay z-index |
Rating variables
The .lib-rating-vote() and .lib-rating-summary() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_icon-content | @rating-icon__content | @icon-star | '' | false | icon code | Rating icon symbol code |
| @_icon-count | @rating-icon__count | 5 | '' | value | Number of rating icon symbols |
| @_icon-font | @rating-icon__font | @icon-font | '' | false | value | Icon font |
| @_icon-font-size | @rating-icon__font-size | 28px | '' | false | value | Icon font size |
| @_icon-letter-spacing | @rating-icon__letter-spacing | -10px | '' | false | value | Icon letter spacing |
| @_icon-color | @rating-icon__color | #c7c7c7 | '' | false | value | Unselected icons color |
| @_icon-color-active | @rating-icon__active__color | #ff5601 | '' | false | value | Selected and hovered icons color |
| @_label-hide | @rating-label__hide | false | true | false | Rating label is displayed |
Tabs variables
The .lib-data-tabs() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_tab-control-font-family | @tab-control__font-family | false | '' | false | value | Tabs font family |
| @_tab-control-font-size | @tab-control__font-size | @font-size__base | '' | false | value | Tabs font size |
| @_tab-control-font-weight | @tab-control__font-weight | @font-weight__semibold | '' | false | value | Tabs font weight |
| @_tab-control-font-style | @tab-control__font-style | false | '' | false | value | Tabs font style |
| @_tab-control-line-height | @tab-control__line-height | @tab-control__height | '' | false | value | Tabs line height |
| Tabs controls settings | ||||
| @_tab-control-background-color | @tab-control__background-color | @panel__background-color | '' | false | value | Current tab background |
| @_tab-control-color | @tab-control__color | @link__color | '' | false | value | Current tab text color |
| @_tab-control-text-decoration | @tab-control__text-decoration | none | '' | false | value | Current tab text-decoration |
| @_tab-control-background-color-hover | @tab-control__hover__background-color | lighten(@tab-control__background-color, 5%) | '' | false | value | Hovered tab background |
| @_tab-control-color-visited | @tab-control__color | @text__color__muted | '' | false | value | Visited tab color |
| @_tab-control-text-decoration-visited | @tab-control__color | '' | false | value | Visited tab text-decoration | |
| @_tab-control-color-hover | @tab-control__hover__color | @tab-control__color | '' | false | value | Hovered tab text color |
| @_tab-control-text-decoration-hover | @tab-control__text-decoration | @tab-control__text-decoration | '' | false | value | Hovered tab text-decoration |
| @_tab-control-background-color-active | @tab-control__active__background-color | lighten(@tab-control__background-color, 15%) | '' | false | value | Active tab background |
| @_tab-control-color-active | @tab-control__active__color | @text__color | '' | false | value | Active tab text color |
| @_tab-control-text-decoration-active | @tab-control__text-decoration | @tab-control__text-decoration | '' | false | value | Active tab text-decoration |
| @_tab-control-height | @tab-control__height | @indent__l | '' | false | value | Height of tab control |
| @_tab-control-margin-right | @tab-control__margin-right | @indent__xs | '' | false | value | Right margin of tab title block |
| @_tab-control-padding-top | @tab-control__padding-top | @indent__xs | '' | false | value | Tab control padding top |
| @_tab-control-padding-right | @tab-control__padding-right | @indent__base | '' | false | value | Tab control padding right |
| @_tab-control-padding-bottom | @tab-control__padding-bottom | @tab-control__padding-bottom | '' | false | value | Tab control padding bottom |
| @_tab-control-padding-left | @tab-control__padding-left | @tab-control__padding-left | '' | false | value | Tab control padding left |
| @_tab-control-border-width | @tab-control__border-width | @border-width__base | '' | false | value | Tab control border width |
| @_tab-control-border-color | @tab-control__border-color | @border-color__base | '' | false | value | Tab control border color |
| Tab content settings | ||||
| @_tab-content-background-color | @tab-content__background-color | @tab-control__active__background-color | '' | false | value | Tab content background |
| @_tab-content-border-top-status | @tab-content__border-top-status | false | true | false | Tab content border top status. When set to 'true' the content has only top border. When set to 'false' the content has all 4 borders |
| @_tab-content-border | @tab-content__border | @tab-control__border-width solid @tab-control__border-color | '' | false | value | Tab content border |
| @_tab-content-margin-top | @tab-content__margin-top | @tab-control__height + @tab-control__border-width + @tab-control__padding-top + @tab-control__padding-bottom | '' | false | value | Tab content top margin (it is the sum of tabs height and top border width) |
| @_tab-content-padding-top | @tab-content__padding-top | @indent__base | '' | false | value | Tab content padding |
| @_tab-content-padding-right | @tab-content__padding-right | @indent__base | '' | false | value | Tab content padding |
| @_tab-content-padding-bottom | @tab-content__padding-bottom | @tab-content__padding-top | '' | false | value | Tab content padding |
| @_tab-content-padding-left | @tab-content__padding-left | @tab-content__padding-right | '' | false | value | Tab content padding |
Accordion variables
The .lib-data-accordion() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_accordion-control-font-family | @accordion-control__font-family | @tab-control__font-family | '' | false | value | Accordion font family |
| @_accordion-control-font-size | @accordion-control__font-size | @font-size__l | '' | false | value | Accordion font size |
| @_accordion-control-font-style | @accordion-control__font-style | @tab-control__font-style | '' | false | value | Accordion font style |
| @_accordion-control-font-weight | @accordion-control__font-weight | @tab-control__font-weight | '' | false | value | Accordion font weight |
| @_accordion-control-line-height | @accordion-control__line-height | @accordion-control__height | '' | false | value | Accordion line height |
| Accordion tabs controls settings | ||||
| @_accordion-control-border-top | @accordion-control__border-top | @tab-control__border-width solid @tab-control__border-color | '' | false | value | Accordion control border |
| @_accordion-control-border-right | @accordion-control__border-right | @tab-control__border-width solid @tab-control__border-color | '' | false | value | Accordion control border |
| @_accordion-control-border-bottom | @accordion-control__border-bottom | @tab-control__border-width solid @tab-control__border-color | '' | false | value | Accordion control border |
| @_accordion-control-border-left | @accordion-control__border-left | @tab-control__border-width solid @tab-control__border-color | '' | false | value | Accordion control border |
| @_accordion-control-background-color | @accordion-control__background-color | @tab-control__background-color | '' | false | value | Accordion control background |
| @_accordion-control-color | @accordion-control__color | @tab-control__color | '' | false | value | Accordion control color |
| @_accordion-control-text-decoration | @accordion-control__text-decoration | @tab-control__text-decoration | '' | false | value | Accordion control text decoration |
| @_accordion-control-color-visited | @accordion-control__color | @accordion-control__color | '' | false | value | Accordion control visited link color |
| @_accordion-control-text-decoration-visited | @accordion-control__text-decoration | @accordion-control__text-decoration | '' | false | value | Accordion control visited link text-decoration |
| @_accordion-control-background-color-hover | @accordion-control__hover__background-color | @tab-control__hover__background-color | '' | false | value | Hovered accordion control background |
| @_accordion-control-color-hover | @accordion-control__hover__color | @tab-control__hover__color | '' | false | value | Hovered accordion control text color |
| @_accordion-control-text-decoration-hover | @accordion-control__hover__text-decoration | @tab-control__hover__text-decoration | '' | false | value | Hovered accordion control text-decoration |
| @_accordion-control-background-color-active | @accordion-control__active__background-color | @tab-control__active__background-color | '' | false | value | Active accordion control background |
| @_accordion-control-color-active | @accordion-control__active__color | @tab-control__active__color | '' | false | value | Active accordion control text color |
| @_accordion-control-text-decoration-active | @accordion-control__active__text-decoration | @tab-control__active__text-decoration | '' | false | value | Active accordion control text-decoration |
| @_accordion-control-height | @accordion-control__height | @indent__xl | '' | false | value | Height of accordion control |
| @_accordion-control-margin-bottom | @accordion-control__margin-bottom | @indent__xs | '' | false | value | Bottom margin of the accordion control |
| @_accordion-control-padding-top | @accordion-control__padding-top | @tab-control__padding-top | '' | false | value | Accordion tab control padding top |
| @_accordion-control-padding-right | @accordion-control__padding-right | @indent__base | '' | false | value | Accordion tab control padding right |
| @_accordion-control-padding-bottom | @accordion-control__padding-bottom | @tab-control__padding-bottom | '' | false | value | Accordion tab control padding bottom |
| @_accordion-control-padding-left | @accordion-control__padding-left | @accordion-control__padding-right | '' | false | value | Accordion tab control padding left |
| Accordion content settings | ||||
| @_accordion-content-background-color | @accordion-content__background-color | @tab-control__active__background-color | '' | false | value | Accordion tab content background |
| @_accordion-content-border | @accordion-content__border | @tab-content__border | '' | false | value | Accordion tab content border |
| @_accordion-content-margin | @accordion-content__margin | 0 0 @indent__xs | '' | false | value | Accordion tab content margin |
| @_accordion-content-padding | @accordion-content__padding | @tab-content__padding-top @tab-content__padding-right @tab-content__padding-bottom @tab-content__padding-left | '' | false | value | Accordion tab content padding |
Table variables
The .lib-table() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_table-width | @table__width | 100% | '' | false | value | Table width |
| @_cell-padding-horizontal | @table-cell__padding-horizontal | @indent__s | '' | false | value | Table cell horizontal padding |
| @_cell-padding-vertical | @table-cell__padding-vertical | 8px | '' | false | value | Table cell vertical padding |
| @_table-margin-bottom | @table__margin-bottom | false | '' | false | value | Table margin bottom |
Table typography variables
The .lib-table-typography() mixin variables
| Mixin variable | Default value | Allowed values | Comment |
|---|---|---|---|
| @_table-td-font-size | false | '' | false | value | Table cell font size |
| @_table-td-color | false | '' | false | value | Table cell font color |
| @_table-td-font-family | false | '' | false | value | Table cell font family |
| @_table-td-font-weight | false | '' | false | value | Table cell font weight |
| @_table-td-line-height | false | '' | false | value | Table cell line height |
| @_table-td-font-style | false | '' | false | value | Table cell font style |
| @_table-th-font-size | false | '' | false | value | Table header cell font size |
| @_table-th-color | @text__color__intense | '' | false | value | Table header cell font color |
| @_table-th-font-family | false | '' | false | value | Table header cell font family |
| @_table-th-font-weight | @font-weight__bold | '' | false | value | Table header cell font weight |
| @_table-th-line-height | false | '' | false | value | Table header cell line height |
| @_table-th-font-style | false | '' | false | value | Table header cell font style |
Table caption variables
The .lib-table-caption() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_table-caption-hide | @table-caption__hide | true | '' | false | value | Table caption is visible |
| @_table-caption-font-size | @table-caption__font-size | false | '' | false | value | Table caption font size |
| @_table-caption-color | @table-caption__color | false | '' | false | value | Table caption text color |
| @_table-caption-font-family | @table-caption__font-family | false | '' | false | value | Table caption font family |
| @_table-caption-font-weight | @table-caption__font-weight | false | '' | false | value | Table caption font weight |
| @_table-caption-font-style | @table-caption__font-style | false | '' | false | value | Table caption font style |
| @_table-caption-line-height | @table-caption__line-height | false | '' | false | value | Table caption line height |
| @_table-caption-alignment | @table-caption__alignment | false | '' | false | value | Table caption alignment |
| @_table-caption-margin-top | @table-caption__margin-top | false | '' | false | value | Table caption top margin |
| @_table-caption-margin-bottom | @table-caption__margin-bottom | false | '' | false | value | Table caption bottom margin |
Table cells resize variables
The .lib-table-resize() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_th-padding-top | @table-cell__padding-vertical / 2 | @_td-padding-top | '' | false | value | Table header cell top padding |
| @_th-padding-right | @table-cell__padding-horizontal / 2 | @_td-padding-right | '' | false | value | Table header cell right padding |
| @_th-padding-bottom | @table-cell__padding-vertical / 2 | @_td-padding-top | '' | false | value | Table header cell bottom padding |
| @_th-padding-left | @table-cell__padding-horizontal / 2 | @_td-padding-right | '' | false | value | Table header cell left padding |
| @_td-padding-top | @table-cell__padding-vertical / 2 | @table-cell__padding-vertical / 2 | '' | false | value | Table cell top padding |
| @_td-padding-right | @table-cell__padding-horizontal / 2 | @table-cell__padding-horizontal / 2 | '' | false | value | Table cell right padding |
| @_td-padding-bottom | @table-cell__padding-vertical / 2 | @_td-padding-top | '' | false | value | Table cell bottom padding |
| @_td-padding-left | @table-cell__padding-horizontal / 2 | @_td-padding-right | '' | false | value | Table cell left padding |
Table background variables
The .lib-table-background-color() mixin variables
| Mixin variable | Global variable | Allowed values | Variables list names | Comment |
|---|---|---|---|---|
| @_table-background-color | @table__background-color | false | '' | false | value | Table background |
| @_table-head-background-color | @table-head__background-color | @table__background-color | '' | false | value | Table thead background |
| @_table-foot-background-color | @table-foot__background-color | @table__background-color | '' | false | value | Table tfoot background |
| @_table-body-th-background-color | @table-body-th__background-color | @table__background-color | '' | false | value | Table header cells background |
| @_table-td-background-color | @table-td__background-color | @table__background-color | '' | false | value | Table cells background |
Table borders customization variables
The .lib-table-bordered() mixin variables
| Mixin variable | Global variable | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_table_type | - | normal | normal | horizontal | vertical | light | clear | horizontal_body | Table border settings. When is set to "horizontal_body", the table border settings are applied only for tbody |
| @_table_border-width | @table__border-width | @border-width__base | '' | false | value | Table border width |
| @_table_border-style | @table__border-style | solid | '' | false | value | Table border style |
| @_table_border-color | @table__border-color | @border-color__base | '' | false | value | Table border color |
Striped table variable
The .lib-table-striped() mixin variables
| Mixin variable | Variables list names | Default value | Allowed values | Comment |
|---|---|---|---|---|
| @_stripped-background-color | @table-cell-stripped__background-color | lighten(@table-cell__hover__background-color, 15%) | '' | false | value | Striped cells background color |
| @_stripped-color | @table-cell-stripped__color | @text__color | '' | false | value | Striped cells text color |
| @_stripped-direction | - | horizontal | horizontal | vertical | Stripes direction |
| @_stripped-highlight | - | odd | odd | even | Rows stripes are applied to |