.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 | //
.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 | //
.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 | //
.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 | //
.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 | //
.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 | //
//
| 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 | //
.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 | //
.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 | //
.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 | //
.lib-button-primary() mixin variables
// In the variables list primary buttons are configured with @button-primary__ prefix. So for example to configure primary button background you should use @_button-background variable of the mixin or @button-primary__background of the global variables list.
//
// //
| Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
|---|---|---|---|---|
| @_button-line-height | //@button-primary__line-height | //false | //'' | false | value | //Button line-height | //
| @_button-width | //@button-primary__width | //false | //'' | false | value | //Button width | //
| @_button-margin | //@button-primary__margin | //false | //'' | false | value | //Button margin | //
| @_button-padding | //@button-primary__padding | //@button__padding | //'' | false | value | //Button padding | //
| @_button-gradient | //@button-primary__gradient | //false | //'' | false | true | //Button has gradient background | //
| @_button-gradient-direction | //@button-primary__gradient-direction | //false | //'' | false | vertical | horizontal | //Direction of button background gradient (if there is any) | //
| Button default state | //||||
| @_button-background | //@button-primary__background | //#1979c3 | //'' | false | value | //Button background | //
| @_button-border | //@button-primary__border | //1px solid #1979c3 | //'' | false | value | //Button border | //
| @_button-color | //@button-primary__color | //#fff | //'' | false | value | //Button text color | //
| @_button-gradient-color-start | //@button-primary__gradient-color-start | //false | //'' | false | value | //Gradient background start color | //
| @_button-gradient-color-end | //@button-primary__gradient-color-end | //false | //'' | false | value | //Gradient background end color | //
| Button hover state | //||||
| @_button-background-hover | //@button-primary__hover__background | //#006bb4 | //'' | false | value | //Hovered button background | //
| @_button-border-hover | //@button-primary__hover__border | //1px solid #006bb4 | //'' | false | value | //Hovered button border | //
| @_button-color-hover | //@button-primary__hover__color | //@button-primary__color | //'' | false | value | //Hovered button text color | //
| @_button-gradient-color-start-hover | //@button-primary__hover__gradient-color-start | //false | //'' | false | value | //Hovered button gradient background start color | //
| @_button-gradient-color-end-hover | //@button-primary__hover__gradient-color-end | //false | //'' | false | value | //Hovered button gradient background end color | //
| Button active state | //||||
| @_button-background-active | //@button-primary__active__background | //@button-primary__hover__background | //'' | false | value | //Active button background | //
| @_button-border-active | //@button-primary__active__border | //@button-primary__hover__border | //'' | false | value | //Active button border | //
| @_button-color-active | //@button-primary__active__color | //@button-primary__color | //'' | false | value | //Active button text color | //
| @_button-gradient-color-start-active | //@button-primary__active__gradient-color-start | //false | //'' | false | value | //Active button gradient background start color | //
| @_button-gradient-color-end-active | //@button-primary__active__gradient-color-end | //false | //'' | false | value | //Active button gradient background end color | //
.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 | //
.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 | //
.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 | //
.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 | //
.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 | //
.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 | //
.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 | //
.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 | //
.lib-form-element-input() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value [Allowed value]
// Comment
//
//
// @_type
// @form-element-input-type
// '' [input-text | select | textarea | input-radio | input-checkbox]
// Form control type.
@form-element-input__[] global variables are used to set up all form elements style. Control-specific global variables use these @form-element-input__[] variables by default. Control-specific global variables can be set up separately.
@input-text__[] is used to set up input-text controls style
@select__[] is used to set up selects style
@textarea__[] is used to set up textarea style
//
//
// @_background
// @form-element-input__background
@input-text__background
@selectbackground
@textarea__background
// @color-white
@form-element-input__background
@form-element-input__background
@form-element-input__background
// Form control background
//
//
// @_border
// @form-element-input__border
@input-text__border
@select__border
@textarea__border
// 1px solid @form-element-input__border-color
@form-element-input__border
@form-element-input__border
@form-element-input__border
// Form control border
//
//
// @_border-radius
// @form-element-input__border-radius
@input-textborder-radius
@select__border-radius
@textarea__border-radius
// 1px
@form-element-input__border-radius
@form-element-input__border-radius
@form-element-input__border-radius
// Form control border radius
//
//
// @_height
// @form-element-input__height
@input-text__height
@select__height
@textarea__height
// 32px
@form-element-input__height
@form-element-input__height
auto
// Form control height
//
//
// @_width
// @form-element-input__width
@input-text__width
@select__width
@textarea__width
// 100%
@form-element-input__width
@form-element-input__width
@form-element-input__width
// Form control width
//
//
// @_margin
// @form-element-input__margin
@input-text__margin
@select__margin
@textarea__margin
// false [true | false]
@form-element-input__margin
@form-element-input__margin
0
// Form control margin
//
//
// @_padding
// @form-element-input__padding
@input-text__padding
@select__padding
@textarea__padding
// 0 9px
@form-element-input__padding
5px 10px 4px
@indent__s
// Form control padding
//
//
// @_vertical-align
// @form-element-input__vertical-align
@input-text__vertical-align
@select__vertical-align
@textarea__vertical-align
// baseline
@form-element-input__vertical-align
@form-element-input__vertical-align
@form-element-input__vertical-align
// Form control vertical align
//
//
// @_background-clip
// @form-element-input__background-clip
@input-text__background-clip
@select__background-clip
@textarea__background-clip
// padding-box
[padding-box | border-box | content-box]
@form-element-input__background-clip
@form-element-input__background-clip
@form-element-input__background-clip
// Form control background clip
//
//
// Text settings
//
//
// @_color
// @form-element-input__color
@input-text__color
@select__color
@textarea__color
// false
@form-element-input__color
@form-element-input__color
@form-element-input__color
// Form control text color
//
//
// @_font-size
// @form-element-input__font-size
@input-text__font-size
@select__font-size
@textarea__font-size
// @font-size__base
@form-element-input__font-size
@form-element-input__font-size
@form-element-input__font-size
// Form control font size
//
//
// @_font-family
// @form-element-input__font-family
@input-text__font-family
@select__font-family
@textarea__font-family
// @font-family__base
@form-element-input__font-family
@form-element-input__font-family
@form-element-input__font-family
// Form control font family
//
//
// @_font-weight
// @form-element-input__font-weight
@input-text__font-weight
@select__font-weight
@textarea__font-weight
// false
@form-element-input__font-weight
@form-element-input__font-weight
@form-element-input__font-weight
// Form control font weight
//
//
// @_font-style
// @form-element-input__font-style
@input-text__font-style
@selectfont-style
@textarea__font-style
// false
@form-element-input__font-style
@form-element-input__font-style
@form-element-input__font-style
// Form control font style
//
//
// @_line-height
// @form-element-input__line-height
@input-text__line-height
@select__line-height
@textarea__line-height
// @line-height__base
@form-element-input__line-height
@form-element-input__line-height
@form-element-input__line-height
// Form control line height
//
//
// Placeholder
//
//
// @_placeholder-color
// @form-element-input-placeholder__color
@input-text-placeholder__color
@select-placeholder__color
@textarea-placeholder__color
// #c2c2c2
@form-element-input-placeholder__color
@form-element-input-placeholder__color
@form-element-input-placeholder__color
// Form control placeholder color
//
//
// @_placeholder-font-style
// @form-element-input-placeholder__font-style
@inputtext-placeholder-font-style
@select-placeholder__font-style
@textarea-placeholder__font-style
// @form-element-input__font-style
@form-element-input-placeholder__font-style
@form-element-input-placeholder__font-style
@form-element-input-placeholder__font-style
// Form control placeholder font style
//
//
// Disabled element
//
//
// @_disabled-background
// @form-element-input__disabled__background
@inputtextdisabled-background
@select__disabled__background
@textarea__disabled__background
// @form-element-input__background
@form-element-input__disabled__background
@form-element-input__disabled__background
@form-element-input__disabled__background
// Disabled form element background
//
//
// @_disabled-border
// @form-element-input__disabled__border
@input-text__disabled__border
@select__disabled__border
@textarea__disabled__border
// @form-element-input__border
@form-element-input__disabled__border
@form-element-input__disabled__border
@form-element-input__disabled__border
// Disabled form element border
//
//
// @_disabled-opacity
// @form-element-input__disabled__opacity
@input-text__disabled__opacity
@select__disabled__opacity
@textarea__disabled__opacity
// .5
@form-element-input__disabled__opacity
@form-element-input__disabled__opacity
@form-element-input__disabled__opacity
// Disabled form element opacity
//
//
// @_disabled-color
// @form-element-input__disabled__color
@input-text__disabled__color
@select__disabled__color
@textarea__disabled__color
// @form-element-input__color
@form-element-input__disabled__color
@form-element-input__disabled__color
@form-element-input__disabled__color
// Disabled form element text color
//
//
// @_disabled-font-style
// @form-element-input__disabled__font-style
@input-text__disabled__font-style
@select__disabled__font-style
@textarea__disabled__font-style
// @form-element-input__font-style
@form-element-input__disabled__font-style
@form-element-input__disabled__font-style
@form-element-input__disabled__font-style
// Disabled form element font style
//
//
// Focused elements
//
//
// @_focus-background
// @form-element-input__focus__background
@input-text__focus__background
@select__focus__background
@textarea__focus__background
// @form-element-input__background
@form-element-input__focus__background
@form-element-input__focus__background
@form-element-input__focus__background
// Focused form element background
//
//
// @_focus-border
// @form-element-input__focus__border
@input-text__focus__border
@select__focus__border
@textarea__focus__border
// @form-element-input__border
@form-element-input__focus__border
@form-element-input__focus__border
@form-element-input__focus__border
// Focused form element border
//
//
// @_focus-color
// @form-element-input__focus__color
@input-text__focus__color
@select__focus__color
@textarea__focus__color
// @form-element-input__color
@form-element-input__focus__color
@form-element-input__focus__color
@form-element-input__focus__color
// Focused form element color
//
//
// @_focus-font-style
// @form-element-input__focus__font-style
@input-text__focus__font-style
@select__focus__font-style
@textarea__focus__font-style
// @form-element-input__font-style
@form-element-input__focus__font-style
@form-element-input__focus__font-style
@form-element-input__focus__font-style
// Focused form element font style
//
//
//
//
// #### The .lib-form-element-choise() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default values [Allowed values]
// Comment
//
//
// @_type
// @form-element-choice__type
// '' ['' | radio | checkbox]
// Choice element type
//
//
// @_vertical-align
// @form-element-choice__vertical-align
@input-radio__vertical-align
@input-checkbox__vertical-align
// false
@form-element-choice__vertical-align
@form-element-choice__vertical-align
// Choice element vertical align
//
//
// @_margin
// @form-element-choice__margin
@input-radio__margin
@input-checkbox__margin
// 2px @indent__xs 0 0
@form-element-choice__margin
@form-element-choice__margin
// Choice element margin
//
//
// @_disabled-opacity
// @form-element-choice__disabled__opacity
@input-radio__disabled__opacity
@input-checkbox__disabled__opacity
// @form-element-input__disabled__opacity
@form-element-choice__disabled__opacity
@form-element-choice__disabled__opacity
// Disabled choice element opacity
//
//
//
//
// #### The .lib-form-validation-note() mixin
//
//
//
// Mixin variable
// Global variable
// Default values [Allowed values]
// Comment
//
//
// @_note-color
// @form-validation-note__color-error
// @error__color
// Validation note text color
//
//
// @_note-font-size
// @form-validation-note__font-size
// @font-size__s
// Validation note font size
//
//
// @_note-font-family
// @form-validation-note__font-family
// false
// Validation note font family
//
//
// @_note-font-style
// @form-validation-note__font-style
// false
// Validation note font style
//
//
// @_note-font-weight
// @form-validation-note__font-weight
// false
// Validation note font weight
//
//
// @_note-line-height
// @form-validation-note__line-height
// false
// Validation note line height
//
//
// @_note-margin
// @form-validation-note__margin
// 3px 0 0
// Validation note margin
//
//
// @_note-padding
// @form-validation-note__padding
// false
// Validation note padding
//
//
// @_note-icon-use
// @form-validation-note-icon__use
// false [true | false]
// Show validation note icon
//
//
// @_note-icon-font-content
// @form-validation-note-icon__font-content
// @icon-pointer-up
// Validation note icon code
//
//
// @_note-icon-font
// @form-validation-note-icon__font
// @icon-font
// Validation note icon font
//
//
// @_note-icon-font-size
// @form-validation-note-icon__font-size
// @form-validation-note__font-size * 2
// Validation note icon font size
//
//
// @_note-icon-font-line-height
// @form-validation-note-icon__font-line-height
// @form-validation-note__font-size
// Validation note icon line height
//
//
// @_note-icon-font-color
// @form-validation-note-icon__font-color
// @form-validation-note__color-error
// Validation note icon color
//
//
// @_note-icon-font-color-hover
// @form-validation-note-icon__font-color-hover
// false
// Hovered validation note icon color
//
//
// @_note-icon-font-color-active
// @form-validation-note-icon__font-color-active
// false
// Active validation note icon color
//
//
// @_note-icon-font-margin
// @form-validation-note-icon__font-margin
// false
// Validation note icon margin
//
//
// @_note-icon-font-vertical-align
// @form-validation-note-icon__font-vertical-align
// @icon-font__vertical-align
// Validation note icon vertical align
//
//
// @_note-icon-font-position
// @form-validation-note-icon__font-position
// @icon-font__position
// Validation note icon position
//
//
// @_note-icon-font-text-hide
// @form-validation-note-icon__font-text-hide
// @icon-font__text-hide
// Validation note icon text hide
//
//
//
//
// ## Font icon variables
// #### The .lib-icon-font() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_icon-font-content
// -
//
// '' | icon code | icon variables
// Font icon code
//
//
// @_icon-font
// @icon-font
// @icons__font-name
// '' | false | value
// The icon font
//
//
// @_icon-font-size
// @icon-font__size
// inherit
// '' | false | value
// Font icon size
//
//
// @_icon-font-line-height
// @icon-font__line-height
// @icon-font__size
// '' | false | value
// Font icon line height
//
//
// @_icon-font-color
// @icon-font__color
// inherit
// '' | inherit | color code
// Font icon color
//
//
// @_icon-font-color-hover
// @icon-font__color-hover
// false
// '' | inherit | color code
// Font icon color - hover state
//
//
// @_icon-font-color-active
// @icon-font__color-active
// false
// '' | inherit | color code
// Font icon color - active state
//
//
// @_icon-font-margin
// @icon-font__margin
// @icon__margin
// '' | false | value
// Font icon margin
//
//
// @_icon-font-vertical-align
// @icon-font__vertical-align
// @icon__vertical-align
// '' | false | value
// Font icon vertical align
//
//
// @_icon-font-position
// @icon-font__position
// @icon__position
// before | after
// Font icon position
//
//
// @_icon-font-text-hide
// @icon-font__text-hide
// @icon__text-hide
// true | false
// The text of the element is replaced with the icon(true), or the icon is on the side of the text (false)
//
//
// @_icon-font-display
// @icon-font__display
// inline-block
// '' | false | value
// The 'display' property of the icon container
//
//
//
//
// ## Icon with image or sprite variables
// #### The .lib-icon-image() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_icon-image
// -
// '' | false | value
// A link to an image or sprite, mandatory parameter
//
//
// @_icon-image-height
// @icon__height
// 26px
// '' | false | value
// Icon image height
//
//
// @_icon-image-width
// @icon__width
// 26px
// '' | false | value
// Icon image width
//
//
// @_icon-image-margin
// @icon__margin
// 0
// '' | false | value
// Icon image margin
//
//
// @_icon-image-vertical-align
// @icon__vertical-align
// middle
// '' | false | value
// Icon image vertical align
//
//
// @_icon-image-position-x
// @icon-image__position-x
// 0
// '' | false | value
// Horizontal image position
//
//
// @_icon-image-position-y
// @icon-image__position-y
// 0
// '' | false | value
// Vertical image position
//
//
// @_icon-image-position
// @icon__position
// before
// before | after
// Icon image position
//
//
// @_icon-image-text-hide
// @icon__text-hide
// false
// true | false
// The text in the <span> tag should be hidden
//
//
//
//
// ## Icon position for an icon with image or sprite variables
// #### The .lib-icon-image-position() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_icon-image-position-x
// @icon-image__position-x
// 0
// '' | false | value
// Horizontal starting position of icon image
//
//
// @_icon-image-position-y
// @icon-image__position-y
// 0
// '' | false | value
// Vertical starting position of icon image
//
//
// @_icon-image-position
// -
// -
// before | after
// Position of the icon which is set for the element
//
//
//
//
// ## Icon sprite position variables
// #### The .lib-icon-sprite-position() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_icon-sprite-position-x
// @icon-sprite__position-x
// 0
// '' | false | value
// The x coordinate of the desired image on the grid
//
//
// @_icon-sprite-position-y
// @icon-sprite__position-y
// 0
// '' | false | value
// The y coordinate of the desired image on the grid
//
//
// @_icon-sprite-grid
// @icon-sprite__grid
// 26px
// '' | false | value
// The size of the grid (in pixels) that the individal images are placed on
//
//
// @_icon-sprite-position
// @icon__position
// before
// before | after
// Icon image position
//
//
//
//
// ## Image/sprite icon size variables
// #### The .lib-icon-image-size() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_icon-image-width
// @icon__width
// 26px
// '' | false | value
// Icon image width
//
//
// @_icon-image-height
// @icon__height
// 26px
// '' | false | value
// Icon image height
//
//
// @_icon-image-position
// @icon__position
// before
// before | after
// Icon image position
//
//
//
//
// ## Layout variables
//
//
//
// Variables list names
// Default value
// Allowed values
// Comment
//
//
// @layout__width
// ''
// '' | false | value
// Page minimum width
//
//
// @layout__max-width
// 1280px
// '' | false | value
// Page maximum width
//
//
// @layout-indent__width
// 20px
// '' | false | value
// Page indents on the left and right
//
//
// Class names defining different layouts
//
//
// @layout-class-1column
// page-layout-1column
// '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns
// Class name for one column layout
//
//
// @layout-class-2columns__left
// page-layout-2columns-left
// '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns
// Class name for two columns layout with left sidebar
//
//
// @layout-class-2columns__right
// page-layout-2columns-right
// '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns
// Class name for two columns layout with right sidebar
//
//
// @layout-class-3columns
// page-layout-3columns
// '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns
// Class name for three columns layout with left sidebar
//
//
// Variables used for layout grid
//
//
// @total-columns
// 12
// '' | false | value
// Number of total columns in layout (i.e. 1, 2, 3)
//
//
// @gutter-width
// 0
// '' | false | value
// Distanse between columns
//
//
// Variables for layout columns
//
//
// @layout-column__width
// @total-columns
// '' | false | value
// Sets base columns number
//
//
// @layout-column__sidebar-width
// 2
// '' | false | value
// Sets sidebar width
//
//
// @layout-column__left-width
// @layout-column__sidebar-width
// '' | false | value
// Sets left column width
//
//
// @layout-column__right-width
// @layout-column__sidebar-width
// '' | false | value
// Sets right column width
//
//
// Variables for layout columns depending on layout used
//
//
// @layout-column-main__width-1
// 100%
// '' | false | value
// Sets one column width
//
//
// @layout-column-main__width-2-left
// @layout-column__width - @layout-column__left-width
// '' | false | value
// Sets left column width
//
//
// @layout-column-main__width-2-right
// @layout-column__width - @layout-column__right-width
// '' | false | value
// Sets right column width
//
//
// @layout-column-main__width-3
// @layout-column__width - @layout-column__left-width - @layout-column__right-width
// '' | false | value
// Sets three columns layout main column width
//
//
// Settings variables
//
//
// @use-flex
// true
// '' | true | false
// Sets compatibility for browsers not supporting flex
//
//
// @responsive
// true
// '' | true | false
// Is set to true if theme has responsive layout
//
//
//
//
// ## Loader variables
// #### The .lib-loader() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_loader-overlay-background-color
// @loader-overlay__background-color
// rgba(255, 255, 255, .5)
// '' | false | value
// Loader overlay background color
//
//
// @_loader-overlay-z-index
// @loader-overlay__z-index
// 9999
// '' | false | value
// Loader overlay background z-index
//
//
// @_loader-icon-width
// @loader-icon__width
// 160px
// '' | false | value
// Loader icon width
//
//
// @_loader-icon-height
// @loader-icon__height
// 160px
// '' | false | value
// Loader icon height
//
//
// @_loader-icon-background-color
// @loader-icon__background-color
// transparent
// '' | false | value
// Loader icon background color
//
//
// @_loader-icon-background-image
// @loader-icon__background-image
// url('@{baseDir}images/loader-2.gif')
// '' | false | value
// Loader icon ackground image
//
//
// @_loader-icon-background-position
// @loader-icon__background-position
// 50% 50%
// '' | false | value
// Loader icon background position
//
//
// @_loader-icon-border-radius
// @loader-icon__border-radius
// 5px
// '' | false | value
// Loader icon border radius
//
//
// @_loader-icon-padding
// @loader-icon__padding
// ''
// '' | false | value
// Loader icon icon padding
//
//
// @_loader-text
// @loader-text
// false
// '' | false | value
// Loader text presence
//
//
// @_loader-text-color
// @loader-text__color
// @primary__color
// '' | false | value
// Loader text color
//
//
// @_loader-text-font-size
// @loader-text__font-size
// @font-size__base
// '' | false | value
// Loader text font size
//
//
// @_loader-text-font-family
// @loader-text__font-family
// @font-family__base
// '' | false | value
// Loader text font family
//
//
// @_loader-text-font-weight
// @loader-text__font-weight
// @font-weight__regular
// '' | false | value
// Loader text font weight
//
//
// @_loader-text-font-style
// @loader-text__font-style
// @font-style__base
// '' | false | value
// Loader text font style
//
//
// @_loader-text-padding
// @loader-text__padding
// 130px 0 0
// '' | false | value
// Loader text padding
//
//
//
//
// ## Loading variables
// #### The .lib-loading() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_loading-background-color
// @loading__background-color
// @loader-overlay__background-color
// '' | false | value
// Loading overlay background color
//
//
// @_loading-background-image
// @loading__background-image
// @loader-icon__background-image
// '' | false | value
// Loading overlay background z-index
//
//
//
//
// ## Messages variables
// #### The .lib-message() mixin variables
//
//
//
// Mixin variable
// Default value
// Allowed values
// Comment
//
//
// @message__padding
// @indent__s @indent__base
// '' | value
// Message padding
//
//
// @message__margin
// @indent__xs 0
// '' | value
// Message margin
//
//
// @message__color
// false
// true | false
// Each message type has its own message color
//
//
// Messages font style
//
//
// @message__font-size
// 13px
// '' | false | value
// Message font size
//
//
// @message__font-family
// false
// '' | false | value
// Message font family
//
//
// @message__font-style
// false
// '' | false | value
// Message font style
//
//
// @message__font-weight
// false
// '' | false | value
// Message font weight
//
//
// @message__line-height
// 1.2em
// '' | false | value
// Message line height
//
//
// Message icon setup
//
//
// @message-icon__font-size
// ceil(@message__font-size * 2 + 2)
// '' | false | value
// Message icon font size
//
//
// @message-icon__font-line-height
// @message-icon__font-size
// '' | false | value
// Message icon line height
//
//
// @message-icon__inner-padding-left
// 40px
// '' | false | value
// Message icon padding left
//
//
// @message-icon__lateral-width
// 30px
// '' | false | value
// Message icon lateral width
//
//
// @message-icon__lateral-arrow-size
// 5px
// '' | false | value
// Message icon arrow size
//
//
// @message-icon__top
// 18px
// '' | false | value
// Message icon top position
//
//
// @message-icon__right
// false
// '' | false | value
// Message icon right position
//
//
// @message-icon__bottom
// false
// '' | false | value
// Message icon bottom position
//
//
// @message-icon__left
// 0
// '' | false | value
// Message icon left position
//
//
// Message border
//
//
// @message__border-width
// false
// '' | false | value
// Message border width
//
//
// @message__border-color
// false
// '' | false | value
// Message border color
//
//
// @message__border-style
// false
// '' | false | value
// Message border style
//
//
// @message__border-radius
// false
// '' | false | value
// Message border radius
//
//
// Information message
//
//
// @message-info__color
// #6f4400
// '' | false | value
// Information message text color
//
//
// @message-info__background
// #fdf0d5
// '' | false | value
// Information message background
//
//
// @message-info-link__color
// @link__color
// '' | false | value
// Information message link color
//
//
// @message-info-link__color-hover
// @link__hover__color
// '' | false | value
// Information message hovered link color
//
//
// @message-info-link__color-active
// @link__hover__color
// '' | false | value
// Information message active link color
//
//
// @message-info__border-color
// @message__border-color
// '' | false | value
// Information message border color
//
//
// @message-info-icon
// @icon-warning
// '' | false | value
// Information message icon symbol code
//
//
// @message-info-icon__color-inner
// #c07600
// '' | false | value
// Information message icon symbol color
//
//
// @message-info-icon__color-lateral
// @color-white
// '' | false | value
// Information message lateral icon symbol color
//
//
// @message-info-icon__background
// #6f4400
// '' | false | value
// Information message icon background
//
//
// @message-info-icon__top
// @message-icon__top
// '' | false | value
// Message icon top position
//
//
// @message-info-icon__right
// @message-icon__right
// '' | false | value
// Message icon right position
//
//
// @message-info-icon__bottom
// @message-icon__bottom
// '' | false | value
// Message icon bottom position
//
//
// @message-info-icon__left
// @message-icon__left
// '' | false | value
// Message icon left position
//
//
// Warning message
//
//
// @message-warning__color
// @message-info__color
// '' | false | value
// Warning message text color
//
//
// @message-warning__background
// @message-info__background
// '' | false | value
// Warning message background
//
//
// @message-warning-link__color
// @message-info-link__color
// '' | false | value
// Warning message link color
//
//
// @message-warning-link__color-hover
// @message-info-link__color-hover
// '' | false | value
// Warning message hovered link color
//
//
// @message-warning-link__color-active
// @message-info-link__color-active
// '' | false | value
// Warning message active link color
//
//
// @message-info__border-color
// @message-info__border-color
// '' | false | value
// Warning message border color
//
//
// @message-warning-icon
// @message-info-icon
// '' | false | value
// Warning message icon symbol code
//
//
// @message-warning-icon__color-inner
// @message-info-icon__color-inner
// '' | false | value
// Warning message icon symbol color
//
//
// @message-warning-icon__color-lateral
// @message-info-icon__color-lateral
// '' | false | value
// Warning message lateral icon symbol color
//
//
// @message-warning-icon__background
// @message-info-icon__background
// '' | false | value
// Warning message icon background
//
//
// @message-warning-icon__top
// @message-icon__top
// '' | false | value
// Message icon top position
//
//
// @message-warning-icon__right
// @message-icon__right
// '' | false | value
// Message icon right position
//
//
// @message-warning-icon__bottom
// @message-icon__bottom
// '' | false | value
// Message icon bottom position
//
//
// @message-warning-icon__left
// @message-icon__left
// '' | false | value
// Message icon left position
//
//
// Error message
//
//
// @message-error__color
// @error__color
// '' | false | value
// Error message text color
//
//
// @message-error__background
// #fae5e5
// '' | false | value
// Error message background
//
//
// @message-error-link__color
// @link__color
// '' | false | value
// Error message link color
//
//
// @message-error-link__color-hover
// @link__hover__color
// '' | false | value
// Error message hovered link color
//
//
// @message-error-link__color-active
// @link__hover__color
// '' | false | value
// Error message active link color
//
//
// @message-error__border-color
// @message__border-color
// '' | false | value
// Error message border color
//
//
// @message-error-icon
// @icon-warning
// '' | false | value
// Error message icon symbol code
//
//
// @message-error-icon__color-inner
// #b30000
// '' | false | value
// Error message icon symbol color
//
//
// @message-error-icon__color-lateral
// @color-white
// '' | false | value
// Error message lateral icon symbol color
//
//
// @message-error-icon__background
// #b30000
// '' | false | value
// Error message icon background
//
//
// @message-error-icon__top
// @message-icon__top
// '' | false | value
// Message icon top position
//
//
// @message-error-icon__right
// @message-icon__right
// '' | false | value
// Message icon right position
//
//
// @message-error-icon__bottom
// @message-icon__bottom
// '' | false | value
// Message icon bottom position
//
//
// @message-error-icon__left
// @message-icon__left
// '' | false | value
// Message icon left position
//
//
// Success message
//
//
// @message-success__color
// #006400
// '' | false | value
// Success message text color
//
//
// @message-success__background
// #e5efe5
// '' | false | value
// Success message background
//
//
// @message-success-link__color
// @link__color
// '' | false | value
// Success message link color
//
//
// @message-success-link__color-hover
// @link__hover__color
// '' | false | value
// Success message hovered link color
//
//
// @message-success-link__color-active
// @link__hover__color
// '' | false | value
// Success message active link color
//
//
// @message-success__border-color
// @message__border-color
// '' | false | value
// Success message border color
//
//
// @message-success-icon
// @icon-checkmark
// '' | false | value
// Success message icon symbol code
//
//
// @message-success-icon__color-inner
// #006400
// '' | false | value
// Success message icon symbol color
//
//
// @message-success-icon__color-lateral
// @color-white
// '' | false | value
// Success message lateral icon symbol color
//
//
// @message-success-icon__background
// #006400
// '' | false | value
// Success message icon background
//
//
// @message-success-icon__top
// @message-icon__top
// '' | false | value
// Message icon top position
//
//
// @message-success-icon__right
// @message-icon__right
// '' | false | value
// Message icon right position
//
//
// @message-success-icon__bottom
// @message-icon__bottom
// '' | false | value
// Message icon bottom position
//
//
// @message-success-icon__left
// @message-icon__left
// '' | false | value
// Message icon left position
//
//
// Notice message
//
//
// @message-notice__color
// @message-info__color
// '' | false | value
// Notice message text color
//
//
// @message-notice__background
// @message-info__background
// '' | false | value
// Notice message background
//
//
// @message-notice-link__color
// @message-info-link__color
// '' | false | value
// Notice message link color
//
//
// @message-notice-link__color-hover
// @message-info-link__color-hover
// '' | false | value
// Notice message hovered link color
//
//
// @message-notice-link__color-active
// @message-info-link__color-active
// '' | false | value
// Notice message active link color
//
//
// @message-notice__border-color
// @message-info__border-color
// '' | false | value
// Notice message border color
//
//
// @message-notice-icon
// @message-info-icon
// '' | false | value
// Notice message icon symbol code
//
//
// @message-notice-icon__color-inner
// @message-info-icon__color-inner
// '' | false | value
// Notice message icon symbol color
//
//
// @message-notice-icon__color-lateral
// @message-info-icon__color-lateral
// '' | false | value
// Notice message lateral icon symbol color
//
//
// @message-notice-icon__background
// @message-info-icon__background
// '' | false | value
// Notice message icon background
//
//
// @message-notice-icon__top
// @message-icon__top
// '' | false | value
// Message icon top position
//
//
// @message-notice-icon__right
// @message-icon__right
// '' | false | value
// Message icon right position
//
//
// @message-notice-icon__bottom
// @message-icon__bottom
// '' | false | value
// Message icon bottom position
//
//
// @message-notice-icon__left
// @message-icon__left
// '' | false | value
// Message icon left position
//
//
//
//
// ## Pagination variables
// #### The .lib-pager() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_pager-label-display
// @pager-label__display
// none
// none | block | inline-block
// The 'page' label is displayed
//
//
// @_pager-item-display
// @pager-item__display
// inline-block
// none | block | inline-block
// The pager item label is displayed
//
//
// @_pager-reset-spaces
// @pager-reset-spaces
// true
// true | false
// Reset spaces between inline-block elements if elements 'display' is set to 'inline-block'
//
//
// @_pager-font-size
// @pager__font-size
// @font-size__s
// '' | false | value
// Pager font size
//
//
// @_pager-font-weight
// @pager__font-weight
// @font-weight__bold
// '' | false | value
// Pager font weight
//
//
// @_pager-line-height
// @pager__line-height
// 32px
// '' | false | value
// Pager line height
//
//
// @_pager-item-margin
// @pager-item__margin
// 0 2px 0 0
// '' | false | value
// Pager item margin
//
//
// @_pager-item-padding
// @pager-item__padding
// 0 4px
// '' | false | value
// Pager item padding
//
//
// @_pager-actions-padding
// @pager-actions__padding
// 0
// '' | false | value
// Pager actions padding
//
//
// Pager current page
//
//
// @_pager-current-font-weight
// @pager-current__font-weight
// @font-weight__bold;
// '' | false | value
// Current page number font weight
//
//
// @_pager-current-color
// @pager-current__color
// @primary__color
// '' | false | value
// Current page number color
//
//
// @_pager-current-border
// @pager-current__border
// false
// '' | false | value
// Current page number border
//
//
// @_pager-current-background
// @pager-current__background
// false
// '' | false | value
// Current page number background
//
//
// @_pager-current-gradient
// @pager-current__gradient
// false
// true | false
// Current page number has gradient background
//
//
// @_pager-current-gradient-direction
// @pager-current__gradient-direction
// false
// '' | false | vertical | horizontal
// Direction of current page number background gradient (if there is any)
//
//
// @_pager-current-gradient-color-start
// @pager-current__gradient-color-start
// false
// '' | false | value
// Current page number gradient start color
//
//
// @_pager-current-gradient-color-end
// @pager-current__gradient-color-end
// false
// '' | false | value
// Current page number gradient end color
//
//
// Link to page number
//
//
// @_pager-gradient
// @pager__gradient
// false
// true | false
// Pager items have gradient background
//
//
// @_pager-gradient-direction
// @pager__gradient-direction
// 'false
// '' | false | vertical | horizontal
// Direction of background gradient (if there is any) of pager item
//
//
// Link to page number - default
//
//
// @_pager-color
// @pager__color
// @link__color
// '' | false | value
// Pager item color
//
//
// @_pager-border
// @pager__border
// false
// '' | false | value
// Pager item border
//
//
// @_pager-text-decoration
// @pager__text-decoration
// none
// '' | false | value
// Pager item text decoration
//
//
// @_pager-background
// @pager__background
// false
// '' | false | value
// Pager item background
//
//
// @_pager-gradient-color-start
// @pager__gradient-color-start
// false
// '' | false | value
// Pager item gradient start color
//
//
// @_pager-gradient-color-end
// @pager__gradient-color-end
// false
// '' | false | value
// Pager item gradient end color
//
//
// Link to page number - visited
//
//
// @_pager-color-visited
// @pager__visited__color
// @link__visited__color
// '' | false | value
// Pager item visited color
//
//
// @_pager-border-visited
// @pager__visited__border
// false
// '' | false | value
// Pager item visited border
//
//
// @_pager-background-visited
// @pager__visited__background
// false
// '' | false | value
// Pager item visited background
//
//
// @_pager-gradient-color-start-visited
// @pager__visited__gradient-color-start
// false
// '' | false | value
// Pager item visited gradient start color
//
//
// @_pager-gradient-color-end-visited
// @pager__visited__gradient-color-end
// false
// '' | false | value
// Pager item visited gradient end color
//
//
// Link to page number - hover
//
//
// @_pager-color-hover
// @pager__hover__color
// @link__hover__color
//
// Pager item hover color
//
//
// @_pager-border-hover
// @pager__hover__border
// false
// '' | false | value
// Pager item hover border
//
//
// @_pager-text-decoration-hover
// @pager__text-decoration
// none
// '' | false | value
// Pager item hover text decoration
//
//
// @_pager-background-hover
// @pager__hover__background
// false
// '' | false | value
// Pager item hover background
//
//
// @_pager-gradient-color-start-hover
// @pager__hover__gradient-color-start
// false
// '' | false | value
// Pager item hover gradient start color
//
//
// @_pager-gradient-color-end-hover
// @pager__hover__gradient-color-end
// false
// '' | false | value
// Pager item hover gradient end color
//
//
// Link to page number - active
//
//
// @_pager-color-active
// @pager__active__color
// @link__hover__color
// '' | false | value
// Pager item active color
//
//
// @_pager-border-active
// @pager__active__border
// false
// '' | false | value
// Pager item active border
//
//
// @_pager-background-active
// @pager__active__background
// false
// '' | false | value
// Pager item active background
//
//
// @_pager-gradient-color-start-active
// @pager__active__gradient-color-start
// false
// '' | false | value
// Pager item active gradient start color
//
//
// @_pager-gradient-color-end-active
// @pager__active__gradient-color-end
// false
// '' | false | value
// Pager item active gradient end color
//
//
// Previous/next action links - icons
//
//
// @_pager-icon-use
// @pager-icon__use
// true
// true | false
// previous/next links have icons
//
//
// @_pager-icon-previous-content
// @pager-icon__previous-content
// @icon-prev
// '' | false | value
// "previous" link icon
//
//
// @_pager-icon-next-content
// @pager-icon__next-content
// @icon-next
// '' | false | value
// "next" link icon
//
//
// @_pager-icon-text-hide
// true
// true | false
// The "previous" and "next" words are hidden
//
//
// @_pager-icon-position
// before
// before | after
// Icon position
//
//
// @_pager-icon-font
// @pager-icon__font
// @icon-font
// '' | false | value
// Icon font
//
//
// @_pager-icon-font-margin
// @pager-icon__font-margin
// 0 0 0 -6px
// '' | false | value
// Icon font margin
//
//
// @_pager-icon-font-vertical-align
// @pager-icon__font-vertical-align
// top
// '' | false | value
// Icon font vertical align
//
//
// @_pager-icon-font-size
// @pager-icon__font-size
// 46px
// '' | false | value
// Icon font size
//
//
// @_pager-icon-font-line-height
// @pager-icon__font-line-height
// @icon-font__line-height
// '' | false | value
// Icon font line height
//
//
// Previous/next action links
//
//
// @_pager-action-gradient
// @pager__gradient
// false
// true | false
// Previous/next links have gradient background
//
//
// @_pager-action-gradient-direction
// @pager__gradient-direction
// false
// '' | false | vertical | horizontal
// Direction of background gradient (if there is any) of previous/next links
//
//
// Previous/next action links - default
//
//
// @_pager-action-color
// @pager-action__color
// @text__color__muted
// '' | false | value
// Pager action color
//
//
// @_pager-action-border
// @pager-action__border
// @border-width__base solid @border-color__base
// '' | false | value
// Pager action border
//
//
// @_pager-action-text-decoration
// @pager-action__text-decoration
// @pager__text-decoration
// '' | false | value
// Pager action text decoration
//
//
// @_pager-action-background
// @pager-action__background
// @pager__background
// '' | false | value
// Pager action background
//
//
// @_pager-action-gradient-color-start
// @pager__gradient-color-start
// false
// '' | false | value
// Pager action gradient start color
//
//
// @_pager-action-gradient-color-end
// @pager__gradient-color-end
// false
// '' | false | value
// Pager action gradient end color
//
//
// Previous/next action links - visited
//
//
// @_pager-action-color-visited
// @pager-action__visited__color
// @pager-action__color
// '' | false | value
// Pager action visited color
//
//
// @_pager-action-border-visited
// @pager-action__visited__border
// false
// '' | false | value
// Pager action visited border
//
//
// @_pager-action-background-visited
// @pager-action__visited__background
// false
// '' | false | value
// Pager action visited background
//
//
// @_pager-action-gradient-color-start-visited
// @pager__visited__gradient-color-start
// false
// '' | false | value
// Pager action visited gradient start color
//
//
// @_pager-action-gradient-color-end-visited
// @pager__visited__gradient-color-end
// false
// '' | false | value
// Pager action visited gradient end color
//
//
// Previous/next action links - hover
//
//
// @_pager-action-color-hover
// @pager-action__hover__color
// @pager-action__color
// '' | false | value
// Pager action hover color
//
//
// @_pager-action-border-hover
// @pager-action__hover__border
// false
// '' | false | value
// Pager action hover border
//
//
// @_pager-action-text-decoration-hover
// @pager-action__hover__text-decoration
// @pager__hover__text-decoration
// '' | false | value
// Pager action hover text decoration
//
//
// @_pager-action-background-hover
// @pager-action__hover__background
// false
// '' | false | value
// Pager action hover background
//
//
// @_pager-action-gradient-color-start-hover
// @pager__hover__gradient-color-start
// false
// '' | false | value
// Pager action hover gradient start color
//
//
// @_pager-action-gradient-color-end-hover
// @pager__hover__gradient-color-end
// false
// '' | false | value
// Pager action hover gradient end color
//
//
// Previous/next action links - active
//
//
// @_pager-action-color-active
// @pager-action__active__color
// @pager-action__color
// '' | false | value
// Pager action active color
//
//
// @_pager-action-border-active
// @pager-action__active__border
// false
// '' | false | value
// Pager action active border
//
//
// @_pager-action-background-active
// @pager-action__active__background
// false
// '' | false | value
// Pager action active background
//
//
// @_pager-action-gradient-color-start-active
// @pager__active__gradient-color-start
// false
// '' | false | value
// Pager action active gradient start color
//
//
// @_pager-action-gradient-color-end-active
// @pager__active__gradient-color-end
// false
// '' | false | value
// Pager action active gradient end color
//
//
//
//
// ## Popup variables
// #### The .lib-popup() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_popup-width
// @popup__width
// auto
// '' | false | value
// Popup width
//
//
// @_popup-height
// @popup__height
// auto
// '' | false | value
// Popup height
//
//
// @_popup-padding
// @popup__padding
// 22px
// '' | false | value
// Inner popup padding
//
//
// @_popup-background
// @popup__background
// @color-white
// '' | false | value
// Popup background
//
//
// @_popup-border
// @popup__border
// 1px solid #aeaeae
// '' | false | value
// Popup border
//
//
// @_popup-shadow
// @popup__shadow
// 0 3px 3px rgba(0,0,0,.15)
// '' | false | none | value
// Popup shadow
//
//
// @_popup-fade
// @popup__fade
// opacity .3s linear
// '' | false | value
// Popup overlay opacity
//
//
// @_popup-z-index
// @popup__z-index
// 1001
// '' | false | value
// Popup z-index
//
//
// Popup position
//
//
// @_popup-position
// @popup__position
// fixed
// '' | false | value
// Popup position
//
//
// @_popup-position-top
// @popup__position-top
// 0
// '' | false | value
// Popup top
//
//
// @_popup-position-right
// @popup__position-right
// 0
// '' | false | value
// Popup right
//
//
// @_popup-position-bottom
// @popup__position-bottom
// 0
// '' | false | value
// Popup bottom
//
//
// @_popup-position-left
// @popup__position-left
// 0
// '' | false | value
// Popup left
//
//
// Popup margin
//
//
//
// @_popup-margin-top
// @popup__margin-top
// false
// '' | false | value
// Popup top margin
//
//
// @_popup-margin-right
// @popup__margin-right
// false
// '' | false | value
// Popup right margin
//
//
// @_popup-margin-bottom
// @popup__margin-bottom
// false
// '' | false | value
// Popup bottom margin
//
//
// @_popup-margin-left
// @popup__margin-left
// false
// '' | false | value
// Popup left margin
//
//
// @_popup-content-height
// @popup-content__height
// auto
// '' | false | value
// Popup content height
//
//
// @_popup-header-margin
// @popup-header__margin
// 0 0 25px
// '' | false | value
// Popup header margin
//
//
// @_popup-content-margin
// @popup-content__margin
// false
// '' | false | value
// Popup content margin
//
//
// @_popup-footer-margin
// @popup-footer__margin
// false
// '' | false | value
// Popup footer margin
//
//
// @_popup-title-headings
// @popup-title-headings
// true
// true | false
// Popup title has the same style as one of page headings
//
//
// @_popup-title-headings-level
// @popup-title-headings__level
// h3
// h1 | h2 | h3 | h4 | h5 | h6
// What heading style is applied to the popup title
//
//
// Popup close button
//
//
// @_popup-button-close-icon
// @popup-button-close__icon
// true
// true | false
// Popup close button has an icon
//
//
// @_popup-button-close-reset
// @popup-button-close__reset
// true
// true | false
// Reset popup close button default styles
//
//
// @_popup-button-close-position
// @popup-button-close__position
// absolute
// '' | false | value
// Popup button close position
//
//
// @_popup-button-close-position-top
// @popup-button-close__position-top
// 10px
// '' | false | value
// Popup button close top position
//
//
// @_popup-button-close-position-right
// @popup-button-close__position-right
// 10px
// '' | false | value
// Popup button close right position
//
//
// @_popup-button-close-position-bottom
// @popup-button-close__position-bottom
// ''
// '' | false | value
// Popup button close bottom position
//
//
// @_popup-button-close-position-left
// @popup-button-close__position-left
// ''
// '' | false | value
// Popup button close left position
//
//
// Popup icons parameters
//
//
// @_popup-icon-font-content
// @popup-icon-font__content
// @icon-remove
// '' | false | value
// Popup icon code
//
//
// @_popup-icon-font
// @popup-icon-font
// @button-icon__font
// '' | false | value
// Popup icon font
//
//
// @_popup-icon-font-size
// @popup-icon-font__size
// @button-icon__font-size
// '' | false | value
// Popup icon font size
//
//
// @_popup-icon-font-line-height
// @popup-icon-font__line-height
// @button-icon__line-height
// '' | false | value
// Popup icon line height
//
//
// @_popup-icon-font-color
// @popup-icon-font__color
// @button-icon__color
// '' | false | value
// Popup icon color
//
//
// @_popup-icon-font-color-hover
// @popup-icon-font__color-hover
// @button-icon__hover__font-color
// '' | false | value
// Hovered popup icon color
//
//
// @_popup-icon-font-color-active
// @popup-icon-font__color-active
// @popup-icon-font__color-active
// '' | false | value
// Active popup icon color
//
//
// @_popup-icon-font-margin
// @popup-icon-font__margin
// @button-icon__margin
// '' | false | value
// Popup icon margin
//
//
// @_popup-icon-font-vertical-align
// @popup-icon-font__vertical-align
// @button-icon__vertical-align
// '' | false | value
// Popup icon vertical align
//
//
// @_popup-icon-font-position
// @popup-icon-font__position
// @button-icon__position
// '' | false | value
// Popup icon position
//
//
// @_popup-icon-font-text-hide
// @popup-icon-font__text-hide
// true
// true | false
// Popup icon hide text
//
//
// Actions toolbar parameters
//
//
// @_popup-actions-toolbar
// @popup-actions-toolbar
// false
// true | false
// Actions toolbar is displayed
//
//
// @_popup-actions-toolbar-actions-position
// @popup-actions-toolbar-actions__position
// @actions-toolbar-actions__position
// justify | left | right | center
// Actions toolbar position
//
//
// @_popup-actions-toolbar-actions-reverse
// @popup-actions-toolbar-actions__reverse
// @actions-toolbar-actions__reverse
// true | false
// Actions toolbar reverse
//
//
// @_popup-actions-toolbar-margin
// @popup-actions-toolbar__margin
// @actions-toolbar__margin
// '' | false | value
// Actions toolbar margin
//
//
// @_popup-actions-toolbar-padding
// @popup-actions-toolbar__padding
// @actions-toolbar__padding
// '' | false | value
// Actions toolbar padding
//
//
// @_popup-actions-toolbar-actions-margin
// @popup-actions-toolbar-actions__margin
// @actions-toolbar-actions__margin
// '' | false | value
// Actions toolbar actions margin
//
//
// @_popup-actions-toolbar-primary-actions-margin
// @popup-actions-toolbar-actions-primary__margin
// @actions-toolbar-actions-primary__margin
// '' | false | value
// Actions toolbar primary actions margin
//
//
// @_popup-actions-toolbar-secondary-actions-margin
// @popup-actions-toolbar-actions-secondary__margin
// @actions-toolbar-actions-secondary__margin
// '' | false | value
// Actions toolbar secondary actions margin
//
//
// @_popup-actions-toolbar-actions-links-margin-top
// @popup-actions-toolbar-actions-links__margin-top
// @actions-toolbar-actions-links__margin-top
// '' | false | value
// Actions toolbar links top margin
//
//
// @_popup-actions-toolbar-primary-actions-links-margin-top
// @popup-actions-toolbar-actions-links-primary__margin-top
// @actions-toolbar-actions-links-primary__margin-top
// '' | false | value
// Actions toolbar primary actions links top margin
//
//
// @_popup-actions-toolbar-secondary-links-margin-top
// @popup-actions-toolbar-actions-links-secondary__margin-top
// @actions-toolbar-actions-links-secondary__margin-top
// '' | false | value
// Actions toolbar secondary links top margin
//
//
//
//
// ## Window overlay variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_overlay-background
// @overlay__background
// #000
// '' | false | value
// Overlay background color
//
//
// @_overlay-opacity
// @overlay__opacity
// .5
// '' | false | value
// Overlay opacity
//
//
// @_overlay-opacity-old
// @overlay__opacity-old
// 50
// '' | false | value
// Overlay opacity for old browsers
//
//
// @_overlay-fade
// @overlay__fade
// opacity .15s linear
// '' | false | value
// Overlay fade
//
//
// @_overlay-z-index
// @overlay__z-index
// 1000
// '' | value
// Overlay z-index
//
//
//
//
// ## Rating variables
// #### The .lib-rating-vote() and .lib-rating-summary() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_icon-content
// @rating-icon__content
// @icon-star
// '' | false | icon code
// Rating icon symbol code
//
//
// @_icon-count
// @rating-icon__count
// 5
// '' | value
// Number of rating icon symbols
//
//
// @_icon-font
// @rating-icon__font
// @icon-font
// '' | false | value
// Icon font
//
//
// @_icon-font-size
// @rating-icon__font-size
// 28px
// '' | false | value
// Icon font size
//
//
// @_icon-letter-spacing
// @rating-icon__letter-spacing
// -10px
// '' | false | value
// Icon letter spacing
//
//
// @_icon-color
// @rating-icon__color
// #c7c7c7
// '' | false | value
// Unselected icons color
//
//
// @_icon-color-active
// @rating-icon__active__color
// #ff5601
// '' | false | value
// Selected and hovered icons color
//
//
// @_label-hide
// @rating-label__hide
// false
// true | false
// Rating label is displayed
//
//
//
//
// ## Tabs variables
// #### The .lib-data-tabs() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_tab-control-font-family
// @tab-control__font-family
// false
// '' | false | value
// Tabs font family
//
//
// @_tab-control-font-size
// @tab-control__font-size
// @font-size__base
// '' | false | value
// Tabs font size
//
//
// @_tab-control-font-weight
// @tab-control__font-weight
// @font-weight__semibold
// '' | false | value
// Tabs font weight
//
//
// @_tab-control-font-style
// @tab-control__font-style
// false
// '' | false | value
// Tabs font style
//
//
// @_tab-control-line-height
// @tab-control__line-height
// @tab-control__height
// '' | false | value
// Tabs line height
//
//
// Tabs controls settings
//
//
// @_tab-control-background-color
// @tab-control__background-color
// @panel__background-color
// '' | false | value
// Current tab background
//
//
// @_tab-control-color
// @tab-control__color
// @link__color
// '' | false | value
// Current tab text color
//
//
// @_tab-control-text-decoration
// @tab-control__text-decoration
// none
// '' | false | value
// Current tab text-decoration
//
//
// @_tab-control-background-color-hover
// @tab-control__hover__background-color
// lighten(@tab-control__background-color, 5%)
// '' | false | value
// Hovered tab background
//
//
// @_tab-control-color-visited
// @tab-control__color
// @text__color__muted
// '' | false | value
// Visited tab color
//
//
// @_tab-control-text-decoration-visited
// @tab-control__color
// '' | false | value
// Visited tab text-decoration
//
//
// @_tab-control-color-hover
// @tab-control__hover__color
// @tab-control__color
// '' | false | value
// Hovered tab text color
//
//
// @_tab-control-text-decoration-hover
// @tab-control__text-decoration
// @tab-control__text-decoration
// '' | false | value
// Hovered tab text-decoration
//
//
// @_tab-control-background-color-active
// @tab-control__active__background-color
// lighten(@tab-control__background-color, 15%)
// '' | false | value
// Active tab background
//
//
// @_tab-control-color-active
// @tab-control__active__color
// @text__color
// '' | false | value
// Active tab text color
//
//
// @_tab-control-text-decoration-active
// @tab-control__text-decoration
// @tab-control__text-decoration
// '' | false | value
// Active tab text-decoration
//
//
// @_tab-control-height
// @tab-control__height
// @indent__l
// '' | false | value
// Height of tab control
//
//
// @_tab-control-margin-right
// @tab-control__margin-right
// @indent__xs
// '' | false | value
// Right margin of tab title block
//
//
// @_tab-control-padding-top
// @tab-control__padding-top
// @indent__xs
// '' | false | value
// Tab control padding top
//
//
// @_tab-control-padding-right
// @tab-control__padding-right
// @indent__base
// '' | false | value
// Tab control padding right
//
//
// @_tab-control-padding-bottom
// @tab-control__padding-bottom
// @tab-control__padding-bottom
// '' | false | value
// Tab control padding bottom
//
//
// @_tab-control-padding-left
// @tab-control__padding-left
// @tab-control__padding-left
// '' | false | value
// Tab control padding left
//
//
// @_tab-control-border-width
// @tab-control__border-width
// @border-width__base
// '' | false | value
// Tab control border width
//
//
// @_tab-control-border-color
// @tab-control__border-color
// @border-color__base
// '' | false | value
// Tab control border color
//
//
// Tab content settings
//
//
// @_tab-content-background-color
// @tab-content__background-color
// @tab-control__active__background-color
// '' | false | value
// Tab content background
//
//
// @_tab-content-border-top-status
// @tab-content__border-top-status
// false
// true | false
// Tab content border top status. When set to 'true' the content has only top border. When set to 'false' the content has all 4 borders
//
//
// @_tab-content-border
// @tab-content__border
// @tab-control__border-width solid @tab-control__border-color
// '' | false | value
// Tab content border
//
//
// @_tab-content-margin-top
// @tab-content__margin-top
// @tab-control__height + @tab-control__border-width + @tab-control__padding-top + @tab-control__padding-bottom
// '' | false | value
// Tab content top margin (it is the sum of tabs height and top border width)
//
//
// @_tab-content-padding-top
// @tab-content__padding-top
// @indent__base
// '' | false | value
// Tab content padding
//
//
// @_tab-content-padding-right
// @tab-content__padding-right
// @indent__base
// '' | false | value
// Tab content padding
//
//
// @_tab-content-padding-bottom
// @tab-content__padding-bottom
// @tab-content__padding-top
// '' | false | value
// Tab content padding
//
//
// @_tab-content-padding-left
// @tab-content__padding-left
// @tab-content__padding-right
// '' | false | value
// Tab content padding
//
//
//
//
// ## Accordion variables
// #### The .lib-data-accordion() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_accordion-control-font-family
// @accordion-control__font-family
// @tab-control__font-family
// '' | false | value
// Accordion font family
//
//
// @_accordion-control-font-size
// @accordion-control__font-size
// @font-size__l
// '' | false | value
// Accordion font size
//
//
// @_accordion-control-font-style
// @accordion-control__font-style
// @tab-control__font-style
// '' | false | value
// Accordion font style
//
//
// @_accordion-control-font-weight
// @accordion-control__font-weight
// @tab-control__font-weight
// '' | false | value
// Accordion font weight
//
//
// @_accordion-control-line-height
// @accordion-control__line-height
// @accordion-control__height
// '' | false | value
// Accordion line height
//
//
// Accordion tabs controls settings
//
//
// @_accordion-control-border-top
// @accordion-control__border-top
// @tab-control__border-width solid @tab-control__border-color
// '' | false | value
// Accordion control border
//
//
// @_accordion-control-border-right
// @accordion-control__border-right
// @tab-control__border-width solid @tab-control__border-color
// '' | false | value
// Accordion control border
//
//
// @_accordion-control-border-bottom
// @accordion-control__border-bottom
// @tab-control__border-width solid @tab-control__border-color
// '' | false | value
// Accordion control border
//
//
// @_accordion-control-border-left
// @accordion-control__border-left
// @tab-control__border-width solid @tab-control__border-color
// '' | false | value
// Accordion control border
//
//
// @_accordion-control-background-color
// @accordion-control__background-color
// @tab-control__background-color
// '' | false | value
// Accordion control background
//
//
// @_accordion-control-color
// @accordion-control__color
// @tab-control__color
// '' | false | value
// Accordion control color
//
//
// @_accordion-control-text-decoration
// @accordion-control__text-decoration
// @tab-control__text-decoration
// '' | false | value
// Accordion control text decoration
//
//
// @_accordion-control-color-visited
// @accordion-control__color
// @accordion-control__color
// '' | false | value
// Accordion control visited link color
//
//
// @_accordion-control-text-decoration-visited
// @accordion-control__text-decoration
// @accordion-control__text-decoration
// '' | false | value
// Accordion control visited link text-decoration
//
//
// @_accordion-control-background-color-hover
// @accordion-control__hover__background-color
// @tab-control__hover__background-color
// '' | false | value
// Hovered accordion control background
//
//
// @_accordion-control-color-hover
// @accordion-control__hover__color
// @tab-control__hover__color
// '' | false | value
// Hovered accordion control text color
//
//
// @_accordion-control-text-decoration-hover
// @accordion-control__hover__text-decoration
// @tab-control__hover__text-decoration
// '' | false | value
// Hovered accordion control text-decoration
//
//
// @_accordion-control-background-color-active
// @accordion-control__active__background-color
// @tab-control__active__background-color
// '' | false | value
// Active accordion control background
//
//
// @_accordion-control-color-active
// @accordion-control__active__color
// @tab-control__active__color
// '' | false | value
// Active accordion control text color
//
//
// @_accordion-control-text-decoration-active
// @accordion-control__active__text-decoration
// @tab-control__active__text-decoration
// '' | false | value
// Active accordion control text-decoration
//
//
// @_accordion-control-height
// @accordion-control__height
// @indent__xl
// '' | false | value
// Height of accordion control
//
//
// @_accordion-control-margin-bottom
// @accordion-control__margin-bottom
// @indent__xs
// '' | false | value
// Bottom margin of the accordion control
//
//
// @_accordion-control-padding-top
// @accordion-control__padding-top
// @tab-control__padding-top
// '' | false | value
// Accordion tab control padding top
//
//
// @_accordion-control-padding-right
// @accordion-control__padding-right
// @indent__base
// '' | false | value
// Accordion tab control padding right
//
//
// @_accordion-control-padding-bottom
// @accordion-control__padding-bottom
// @tab-control__padding-bottom
// '' | false | value
// Accordion tab control padding bottom
//
//
// @_accordion-control-padding-left
// @accordion-control__padding-left
// @accordion-control__padding-right
// '' | false | value
// Accordion tab control padding left
//
//
// Accordion content settings
//
//
// @_accordion-content-background-color
// @accordion-content__background-color
// @tab-control__active__background-color
// '' | false | value
// Accordion tab content background
//
//
// @_accordion-content-border
// @accordion-content__border
// @tab-content__border
// '' | false | value
// Accordion tab content border
//
//
// @_accordion-content-margin
// @accordion-content__margin
// 0 0 @indent__xs
// '' | false | value
// Accordion tab content margin
//
//
// @_accordion-content-padding
// @accordion-content__padding
// @tab-content__padding-top @tab-content__padding-right @tab-content__padding-bottom @tab-content__padding-left
// '' | false | value
// Accordion tab content padding
//
//
//
//
// ## Table variables
// #### The .lib-table() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_table-width
// @table__width
// 100%
// '' | false | value
// Table width
//
//
// @_cell-padding-horizontal
// @table-cell__padding-horizontal
// @indent__s
// '' | false | value
// Table cell horizontal padding
//
//
// @_cell-padding-vertical
// @table-cell__padding-vertical
// 8px
// '' | false | value
// Table cell vertical padding
//
//
// @_table-margin-bottom
// @table__margin-bottom
// false
// '' | false | value
// Table margin bottom
//
//
//
//
// ## Table typography variables
// #### The .lib-table-typography() mixin variables
//
//
//
// Mixin variable
// Default value
// Allowed values
// Comment
//
//
// @_table-td-font-size
// false
// '' | false | value
// Table cell font size
//
//
// @_table-td-color
// false
// '' | false | value
// Table cell font color
//
//
// @_table-td-font-family
// false
// '' | false | value
// Table cell font family
//
//
// @_table-td-font-weight
// false
// '' | false | value
// Table cell font weight
//
//
// @_table-td-line-height
// false
// '' | false | value
// Table cell line height
//
//
// @_table-td-font-style
// false
// '' | false | value
// Table cell font style
//
//
// @_table-th-font-size
// false
// '' | false | value
// Table header cell font size
//
//
// @_table-th-color
// @text__color__intense
// '' | false | value
// Table header cell font color
//
//
// @_table-th-font-family
// false
// '' | false | value
// Table header cell font family
//
//
// @_table-th-font-weight
// @font-weight__bold
// '' | false | value
// Table header cell font weight
//
//
// @_table-th-line-height
// false
// '' | false | value
// Table header cell line height
//
//
// @_table-th-font-style
// false
// '' | false | value
// Table header cell font style
//
//
//
//
// ## Table caption variables
// #### The .lib-table-caption() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_table-caption-hide
// @table-caption__hide
// true
// '' | false | value
// Table caption is visible
//
//
// @_table-caption-font-size
// @table-caption__font-size
// false
// '' | false | value
// Table caption font size
//
//
// @_table-caption-color
// @table-caption__color
// false
// '' | false | value
// Table caption text color
//
//
// @_table-caption-font-family
// @table-caption__font-family
// false
// '' | false | value
// Table caption font family
//
//
// @_table-caption-font-weight
// @table-caption__font-weight
// false
// '' | false | value
// Table caption font weight
//
//
// @_table-caption-font-style
// @table-caption__font-style
// false
// '' | false | value
// Table caption font style
//
//
// @_table-caption-line-height
// @table-caption__line-height
// false
// '' | false | value
// Table caption line height
//
//
// @_table-caption-alignment
// @table-caption__alignment
// false
// '' | false | value
// Table caption alignment
//
//
// @_table-caption-margin-top
// @table-caption__margin-top
// false
// '' | false | value
// Table caption top margin
//
//
// @_table-caption-margin-bottom
// @table-caption__margin-bottom
// false
// '' | false | value
// Table caption bottom margin
//
//
//
//
// ## Table cells resize variables
// #### The .lib-table-resize() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_th-padding-top
// @table-cell__padding-vertical / 2
// @_td-padding-top
// '' | false | value
// Table header cell top padding
//
//
// @_th-padding-right
// @table-cell__padding-horizontal / 2
// @_td-padding-right
// '' | false | value
// Table header cell right padding
//
//
// @_th-padding-bottom
// @table-cell__padding-vertical / 2
// @_td-padding-top
// '' | false | value
// Table header cell bottom padding
//
//
// @_th-padding-left
// @table-cell__padding-horizontal / 2
// @_td-padding-right
// '' | false | value
// Table header cell left padding
//
//
// @_td-padding-top
// @table-cell__padding-vertical / 2
// @table-cell__padding-vertical / 2
// '' | false | value
// Table cell top padding
//
//
// @_td-padding-right
// @table-cell__padding-horizontal / 2
// @table-cell__padding-horizontal / 2
// '' | false | value
// Table cell right padding
//
//
// @_td-padding-bottom
// @table-cell__padding-vertical / 2
// @_td-padding-top
// '' | false | value
// Table cell bottom padding
//
//
// @_td-padding-left
// @table-cell__padding-horizontal / 2
// @_td-padding-right
// '' | false | value
// Table cell left padding
//
//
//
//
// ## Table background variables
// #### The .lib-table-background-color() mixin variables
//
//
//
// Mixin variable
// Global variable
// Allowed values
// Variables list names
// Comment
//
//
// @_table-background-color
// @table__background-color
// false
// '' | false | value
// Table background
//
//
// @_table-head-background-color
// @table-head__background-color
// @table__background-color
// '' | false | value
// Table thead background
//
//
// @_table-foot-background-color
// @table-foot__background-color
// @table__background-color
// '' | false | value
// Table tfoot background
//
//
// @_table-body-th-background-color
// @table-body-th__background-color
// @table__background-color
// '' | false | value
// Table header cells background
//
//
// @_table-td-background-color
// @table-td__background-color
// @table__background-color
// '' | false | value
// Table cells background
//
//
//
//
// ## Table borders customization variables
// #### The .lib-table-bordered() mixin variables
//
//
//
// Mixin variable
// Global variable
// Default value
// Allowed values
// Comment
//
//
// @_table_type
// -
// normal
// normal | horizontal | vertical | light | clear | horizontal_body
// Table border settings. When is set to "horizontal_body", the table border settings are applied only for tbody
//
//
// @_table_border-width
// @table__border-width
// @border-width__base
// '' | false | value
// Table border width
//
//
// @_table_border-style
// @table__border-style
// solid
// '' | false | value
// Table border style
//
//
// @_table_border-color
// @table__border-color
// @border-color__base
// '' | false | value
// Table border color
//
//
//
//
// ## Striped table variable
// #### The .lib-table-striped() mixin variables
//
//
//
// Mixin variable
// Variables list names
// Default value
// Allowed values
// Comment
//
//
// @_stripped-background-color
// @table-cell-stripped__background-color
// lighten(@table-cell__hover__background-color, 15%)
// '' | false | value
// Striped cells background color
//
//
// @_stripped-color
// @table-cell-stripped__color
// @text__color
// '' | false | value
// Striped cells text color
//
//
// @_stripped-direction
// -
// horizontal
// horizontal | vertical
// Stripes direction
//
//
// @_stripped-highlight
// -
// odd
// odd | even
// Rows stripes are applied to
//
//
//
//
// # 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
//
//
//