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

The .lib-breadcrumbs() mixin variables

    
Mixin variable Global variable Default value Allowed values Comment
@_breadcrumbs-font-size @breadcrumbs__font-size @font-size__s '' | false | value Breadcrumbs font size
@_breadcrumbs-display @breadcrumbs__display false '' | false | inline | block | inline-block Breadcrumbs links display property
@_breadcrumbs__container-margin @breadcrumbs__container-margin 0 0 @indent__base '' | false | value Breadcrumbs items padding
@_breadcrumbs-padding @breadcrumbs__padding false '' | false | value Breadcrumbs items padding
Breadcrumbs - separator symbol
@_breadcrumbs-separator-symbol @breadcrumbs-separator__symbol false '' | false | any symbol Breadcrumbs separating symbol
@_breadcrumbs-separator-color @breadcrumbs-separator__color @breadcrumbs-current__color '' | false | value Breadcrumbs separating symbol color
@_breadcrumbs-icon-use @breadcrumbs-icon__use true true | false Breadcrumbs separating symbol is an icon
@_breadcrumbs-icon-font-content @breadcrumbs-icon__font-content @icon-next '' | false | icon Breadcrumbs separating icon symbol
@_icon-font @breadcrumbs-icon__font @icon-font '' | false | font Breadcrumbs separating icon font
@_icon-font-size @breadcrumbs-icon__font-size 24px '' | false | value Breadcrumbs separating icon font size
@_icon-font-line-height @breadcrumbs-icon__font-line-height 18px '' | false | value Breadcrumbs separating icon line height
@_icon-font-color @breadcrumbs-icon__font-color false '' | false | value Breadcrumbs separating icon color
@_icon-font-margin @breadcrumbs-icon__font-margin 0 '' | false | value Breadcrumbs separating icon margin
@_icon-font-vertical-align @breadcrumbs-icon__font-vertical-align top '' | false | value Breadcrumbs separating icon vertical align
Breadcrumbs - current page
@_breadcrumbs-current-color @breadcrumbs-current__color #a3a3a3 '' | false | value Breadcrumbs current page color
@_breadcrumbs-current-font-weight @breadcrumbs-current__font-weight @font-weight__regular '' | false | value Breadcrumbs current page font weight
@_breadcrumbs-current-background @breadcrumbs-current__background false '' | false | value Breadcrumbs current page background
@_breadcrumbs-current-border @breadcrumbs-current__border false '' | false | value Breadcrumbs current page border
@_breadcrumbs-current-gradient @breadcrumbs-current__gradient false true | false Breadcrumbs current page have gradient background
@_breadcrumbs-current-gradient-direction @breadcrumbs-current__gradient-direction false '' | false | vertical | horizontal Direction of breadcrumbs current page background gradient (if there is any)
@_breadcrumbs-current-gradient-color-start @breadcrumbs-current__gradient-color-start false '' | false | value Breadcrumbs current page gradient start color
@_breadcrumbs-current-gradient-color-end @breadcrumbs-current__gradient-color-end false '' | false | value Breadcrumbs current page gradient end color
Breadcrumbs link
@_breadcrumbs-link-gradient @breadcrumbs-link__gradient false true | false Breadcrumbs items have gradient background
@_breadcrumbs-link-gradient-direction @breadcrumbs-link__gradient-direction false '' | false | vertical | horizontal Direction of breadcrumbs item background gradient (if there is any)
Breadcrumbs link - default
@_breadcrumbs-link-color @breadcrumbs-link__color @primary__color '' | false | value Breadcrumbs item color
@_breadcrumbs-link-background @breadcrumbs-link__background false '' | false | value Breadcrumbs item background
@_breadcrumbs-link-border @breadcrumbs-link__border false '' | false | value Breadcrumbs item border
@_breadcrumbs-link-text-decoration @breadcrumbs-link__text-decoration none '' | false | value Breadcrumbs item text decoration
@_breadcrumbs-link-gradient-color-start @breadcrumbs-link__gradient-color-start false '' | false | value Breadcrumbs item gradient start color
@_breadcrumbs-link-gradient-color-end @breadcrumbs-link__gradient-color-end false '' | false | value Breadcrumbs item gradient end color
Breadcrumbs link - visited
@_breadcrumbs-link-color-visited @breadcrumbs-link__visited__color @primary__color '' | false | value Breadcrumbs item visited color
@_breadcrumbs-link-background-visited @breadcrumbs-link__visited__background @breadcrumbs-link__background '' | false | value Breadcrumbs item visited background
@_breadcrumbs-link-border-visited @breadcrumbs-link__visited__border @breadcrumbs-link__border '' | false | value Breadcrumbs item visited border
@_breadcrumbs-link-text-decoration-visited @breadcrumbs-link__visited__text-decoration none '' | false | value Breadcrumbs item text decoration
@_breadcrumbs-link-gradient-color-start-visited @breadcrumbs-link__visited__gradient-color-start false '' | false | value Breadcrumbs item visited gradient start color
@_breadcrumbs-link-gradient-color-end-visited @breadcrumbs-link__visited__gradient-color-end false '' | false | value Breadcrumbs item visited gradient end color
Breadcrumbs link - hover
@_breadcrumbs-link-color-hover @breadcrumbs-link__hover__color @primary__color '' | false | value Breadcrumbs item hover color
@_breadcrumbs-link-background-hover @breadcrumbs-link__hover__background false '' | false | value Breadcrumbs item hover background
@_breadcrumbs-link-border-hover @breadcrumbs-link__hover__border @breadcrumbs-link__border '' | false | value Breadcrumbs item hover border
@_breadcrumbs-link-text-decoration-hover @breadcrumbs-link__hover__text-decoration underline '' | false | value Breadcrumbs item hover text decoration
@_breadcrumbs-link-gradient-color-start-hover @breadcrumbs-link__hover__gradient-color-start false '' | false | value Breadcrumbs item hover gradient start color
@_breadcrumbs-link-gradient-color-end-hover @breadcrumbs-link__hover__gradient-color-end false '' | false | value Breadcrumbs item hover gradient end color
Breadcrumbs link - active
@_breadcrumbs-link-color-active @breadcrumbs-link__active__color @primary__color '' | false | value Breadcrumbs item active color
@_breadcrumbs-link-background-active @breadcrumbs-link__active__background @breadcrumbs-link__background '' | false | value Breadcrumbs item active background
@_breadcrumbs-link-border-active @breadcrumbs-link__active__border @breadcrumbs-link__border '' | false | value Breadcrumbs item active border
@_breadcrumbs-link-text-decoration-active @breadcrumbs-link__active__text-decoration none '' | false | value Breadcrumbs item active text decoration
@_breadcrumbs-link-gradient-color-start-active @breadcrumbs-link__active__gradient-color-start false '' | false | value Breadcrumbs item active gradient start color
@_breadcrumbs-link-gradient-color-end-active @breadcrumbs-link__active__gradient-color-end false '' | false | value Breadcrumbs item active gradient end color

Button variables

The .lib-button() mixin variables

    
Mixin variable Global variable Default value Allowed values Comment
@_button-font-family @button__font-family @font-family__base '' | false | value Button font family
@_button-font-size @button__font-size @font-size__base '' | false | value Button font size
@_button-font-weight @button__font-weight @font-weight__bold '' | false | value Button font weight
@_button-cursor @button__cursor pointer '' | false | value Button cursor
@_button-display @button__display inline-block '' | false | value Button display
@_button-disabled-opacity @button__disabled__opacity .5 '' | false | value Button disabled opacity
@_button-line-height @button__line-height @font-size__base + 2 '' | false | value Button height
@_button-width @button__width false '' | false | value Button width
@_button-margin @button__margin 0 '' | false | value Button margin
@_button-padding @button__padding 7px 15px '' | false | value Button padding
@_button-gradient @button__gradient false '' | false | true Button has gradient background
@_button-gradient-direction @button__gradient-direction false '' | false | vertical | horizontal Direction of button background gradient (if there is any)
Button default state
@_button-color @button__color @primary__color '' | false | value Button text color
@_button-background @button__background #f2f2f2 '' | false | value Button background
@_button-border @button__border 1px solid #cdcdcd '' | false | value Button border
@_button-gradient-color-start @button__gradient-color-start false '' | false | value Gradient background start color
@_button-gradient-color-end @button__gradient-color-end false '' | false | value Gradient background end color
Button hover state
@_button-color-hover @button__hover__color #555 '' | false | value Hovered button text color
@_button-background-hover @button__hover__background #e2e2e2 '' | false | value Hovered button background
@_button-border-hover @button__hover__border @button__border '' | false | value Hovered button border
@_button-gradient-color-start-hover @button__hover__gradient-color-start false '' | false | value Hovered button gradient background start color
@_button-gradient-color-end-hover @button__hover__gradient-color-end false '' | false | value Hovered button gradient background end color
Button active state
@_button-color-active @button__active__color @button__color '' | false | value Active button text color
@_button-background-active @button__active__background @button__hover__background '' | false | value Active button background
@_button-border-active @button__active__border @button__border '' | false | value Active button border
@_button-gradient-color-start-active
@button__active__gradient-color-start false '' | false | value Active button gradient background start color
@_button-gradient-color-end-active @button__active__gradient-color-end false '' | false | value Active button gradient background end color
Button with icon
@_button-icon-use @button-icon__use false '' | false | true Button has an icon
@_button-font-content @button-icon__content @icon-settings '' | false | value Button icon symbol
@_button-icon-font @button-icon__font @icon-font '' | false | value Button icon font
@_button-icon-font-size @button-icon__font-size 22px '' | false | value Button icon font size
@_button-icon-font-line-height @button-icon__line-height @button-icon__font-size '' | false | value Button icon line height
@_button-icon-font-color @button-icon__color inherit '' | false | value Button icon color
@_button-icon-font-color-hover @button-icon__hover__font-color inherit '' | false | value Hovered button icon color
@_button-icon-font-color-active @button-icon__active__font-color inherit '' | false | value Active button icon color
@_button-icon-font-margin @button-icon__margin 0 '' | false | value Button icon margin
@_button-icon-font-vertical-align @button-icon__vertical-align top '' | false | value Button icon vertical align
@_button-icon-font-position @button-icon__position @icon__position '' | false | before | after Button icon font position
@_button-icon-font-text-hide @button-icon__text-hide false '' | false | true Button icon text hide

The .lib-button-primary() mixin variables

In the variables list primary buttons are configured with @button-primary prefix. So for example to configure primary button background you should use @_button-background variable of the mixin or @button-primarybackground of the global variables list.

    
Mixin variable Global variable Default value Allowed values Comment
@_button-line-height @button-primary__line-height false '' | false | value Button line-height
@_button-width @button-primary__width false '' | false | value Button width
@_button-margin @button-primary__margin false '' | false | value Button margin
@_button-padding @button-primary__padding @button__padding '' | false | value Button padding
@_button-gradient @button-primary__gradient false '' | false | true Button has gradient background
@_button-gradient-direction @button-primary__gradient-direction false '' | false | vertical | horizontal Direction of button background gradient (if there is any)
Button default state
@_button-background @button-primary__background #1979c3 '' | false | value Button background
@_button-border @button-primary__border 1px solid #1979c3 '' | false | value Button border
@_button-color @button-primary__color #fff '' | false | value Button text color
@_button-gradient-color-start @button-primary__gradient-color-start false '' | false | value Gradient background start color
@_button-gradient-color-end @button-primary__gradient-color-end false '' | false | value Gradient background end color
Button hover state
@_button-background-hover @button-primary__hover__background #006bb4 '' | false | value Hovered button background
@_button-border-hover @button-primary__hover__border 1px solid #006bb4 '' | false | value Hovered button border
@_button-color-hover @button-primary__hover__color @button-primary__color '' | false | value Hovered button text color
@_button-gradient-color-start-hover @button-primary__hover__gradient-color-start false '' | false | value Hovered button gradient background start color
@_button-gradient-color-end-hover @button-primary__hover__gradient-color-end false '' | false | value Hovered button gradient background end color
Button active state
@_button-background-active @button-primary__active__background @button-primary__hover__background '' | false | value Active button background
@_button-border-active @button-primary__active__border @button-primary__hover__border '' | false | value Active button border
@_button-color-active @button-primary__active__color @button-primary__color '' | false | value Active button text color
@_button-gradient-color-start-active @button-primary__active__gradient-color-start false '' | false | value Active button gradient background start color
@_button-gradient-color-end-active @button-primary__active__gradient-color-end false '' | false | value Active button gradient background end color

The .lib-button-revert-secondary-color() mixin variables

The .lib-button-revert-secondary-color() mixin is used to revert button styles to secondary color styles.

    
Mixin variable Global variable Default value Allowed values Comment
@_button-color @button__color @button__color '' | false | value Button color
@_button-background @button__background @button__background '' | false | value Button background
@_button-border @button__border @button__border '' | false | value Button border
@_button-color-hover @button__hover__color @button__hover__color '' | false | value Button hover color
@_button-background-hover @button__hover__background @button__hover__background '' | false | value Button hover background
@_button-border-hover @button__hover__border @button__hover__border '' | false | value Button hover border
@_button-color-active @button__active__color @button__active__color '' | false | value Button active color
@_button-background-active @button__active__background @button__active__background '' | false | value Button active background
@_button-border-active @button__active__border @button__active__border '' | false | value Button active border

The .lib-button-revert-secondary-size() mixin variables

The .lib-button-revert-secondary-size() mixin is used to revert button sizes to secondary button sizes.

    
Mixin variable Global variable Default value Allowed values Comment
@_button-font-size @button__font-size @button__font-size '' | value Button font size
@_button-line-height @button__line-height @button__line-height '' | value Button line-height
@_button-padding @button__padding @button__padding '' | value Button padding

The .lib-button-as-link() mixin variables

The .lib-button-as-link() mixin is used to make button look like a link. It resets default button styles.

    
Mixin variable Global variable Default value Allowed values Comment
@_link-color @link__color @link-color '' | false | value Button as a link color
@_link-color-hover @link__hover__color @link-color-hover '' | false | value Button as a link hovered color
@_line-height @line-height__base @line-height-base '' | false | value Button as a link line height
@_margin - 0 '' | false | value Button as a link margin
@_padding - 0 '' | false | value Button as a link padding
@_disabled_opacity @button__disabled__opacity .5 range between .1 and .9 Button as a link opacity

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

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

Table with rows hover mixin variables

The .lib-table-hover() mixin variables

    
Mixin variable Global variable Default value Allowed values Comment
@_table_cell-background-color-hover @table-cell__hover__background-color @panel__background-color '' | false | value Hovered table row background
@_table_cell-odd-background-color-hover @table-cell__hover__background-color @_table_cell-background-color-hover '' | false | value Hovered table odd row background

Responsive table technics #2 variables

The .lib-table-responsive() mixin variables

    
Mixin variable Variables list names Default value Allowed values Comment
@_table-background-color-responsive @table-responsive__background-color @table__background-color '' | false | value Responsive table background
@_table-th-background-color-responsive @table-responsive-th__background-color false '' | false | value Responsive table header cells background
@_reset-table-striped false - true | false Responsive table striped cells
@_reset-table-hover false - true | false Responsive table hovered table row background
@_table-responsive-cell-padding @table-responsive-cell__padding @indent__xs 0 true | false Responsive table cells padding

Tooltips variables

The .lib-tooltip() mixin variables

    
Mixin variable Global variable Default value Allowed values Comment
@_tooltip-position - top top | right | bottom | left Side of the element tooltip is displayed on
@_tooltip-selector-toggle - ~".tooltip-toggle" '' | false | value The class name of the element that toggles tooltip
@_tooltip-selector-content - ~".tooltip-content" '' | false | value The tooltip content class name
@_tooltip-background @tooltip__background @color-white '' | false | value Tooltip background color
@_tooltip-border-color @tooltip__border-color #bbb '' | false | value Tooltip border color
@_tooltip-border-width @tooltip__border-width 1px '' | false | value Tooltip border width
@_tooltip-border-radius @tooltip__border-radius false '' | false | value Tooltip border radius
@_tooltip-color @tooltip__color @primary__color '' | false | value Tooltip text color
@_tooltip-cursor @tooltip__cursor help '' | false | value Tooltip cursor
@_tooltip-font-size @tooltip__font-size false '' | false | value Tooltip font size
@_tooltip-font-family @tooltip__font-family false '' | false | value Tooltip font family
@_tooltip-font-weight @tooltip__font-weight false '' | false | value Tooltip font weight
@_tooltip-font-style @tooltip__font-style false '' | false | value Tooltip font style
@_tooltip-line-height @tooltip__line-height 1.4 '' | false | value Tooltip line height
@_tooltip-margin @tooltip__margin false '' | false | value Tooltip margin
@_tooltip-padding @tooltip__padding 12px 16px '' | false | value Tooltip padding
@_tooltip-min-width @tooltip__min-width 210px '' | false | value Tooltip minimal width
@_tooltip-max-width @tooltip__max-width 360px '' | false | value Tooltip maximal width
@_tooltip-arrow-size @tooltip-arrow__size 5px '' | false | value Tooltip arrow size
@_tooltip-arrow-offset @tooltip-arrow__offset 10px '' | false | value Tooltip arrow offset
@_tooltip-z-index @tooltip__z-index 100 '' | false | value Tooltip z-index

Components

Cross Components variables

    
Variable Default value Allowed values Comment
@component__shadow-size__base 5px constant Shadow size across all components. Used to count overlay zones sizes
@component__box-shadow__base 1px 1px @component__shadow-size__base rgba(0, 0, 0, .5) constant Shadow style
@component-modal__opacity .98 constant Default opacity for stacked components

Utilities

.lib-css() mixin variables

    
Mixin variable Default value Allowed values Comment
@_property false '' | false | value Any css property
@_value false '' | false | value Any css value
@_prefix 0 '' | false | 1 If set to "1" adds -ms-, -webkit- and -moz- prefixes to the property

.lib-rotate() mixin variables

    
Mixin variable Default value Allowed values Comment
@rotation '' '' | false | value Transform rotate value, false or ''

.lib-input-placeholder() mixin variables

    
Mixin variable Default value Allowed values Comment
@_input-placeholder-color @form-element-input-placeholder__color '' | false | value Input placeholder color
@_input-placeholder-font-weight @form-element-input__font-weight '' | false | value Input placeholder font-weight

.lib-background-gradient() mixin variables

    
Mixin variable Default value Allowed values Comment
@_background-gradient false '' | false | true If set to 'true' the element has gradient background
@_background-gradient-direction '' '' | horizontal | vertical Gradient direction (horizontal or vertical)
@_background-gradient-color-start '' '' | false | value Gradient start color (any css color)
@_background-gradient-color-end '' '' | false | value Gradient end color (any css color)
@_background-gradient-color-position false '' | false | true Sets the background-color fallback property. When set to 'false', the background-color property will be set to @_background-gradient-color-end. When set to 'true', the background-color property will be set to @_background-gradient-color-start

.lib-url-check() mixin variables

    
Mixin variable Allowed values Output variable Comment
@_path '' | false | value @lib-url-check-output Passed url to wrap in 'url( ... )'. If the 'false' value passed mixin will return 'false'