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-primary
background
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