List of Global Variables

Typography

The `.lib-typography-all()` mixin variables

Mixin variable	Default value	Comment
Predefined font family
---
@font-family__sans-serif	'Helvetica Neue', Helvetica, Arial, sans-serif	Sans-serif font family
@font-family__serif	Georgia, 'Times New Roman', Times, serif	Serif font family
@font-family__monospace	Menlo, Monaco, Consolas, 'Courier New', monospace	Monospace font family
@font-path	"../../fonts/"	Path to custom font
Predefined colors
---
@color-white	#fff	White
@color-gray20	#333	Gray 20
@color-gray56	#8f8f8f	Gray 56
@primary__color	#555	Primary color
@primary__color__dark	darken(@primary__color, 35%) // #000	Dark primary color
@primary__color__darker	darken(@primary__color, 13.5%) // #111	Darker primary color
@primary__color__lighter	lighten(@primary__color, 23%) // #7d7d7d	Lighter primary color
@primary__color__light	lighten(@primary__color, 45%) // #a6a6a6	Light primary color
@border-color__base	darken(@page__background-color, 18%)	Base border color
@border-width__base	1px	Base border width
Fonts settings
---
@font-family__base	@font-family__sans-serif	Basic font family
@root__font-size	62.5%	Setting font-size for HTML tag, use % units
@font-size-ratio__base	1.4	Defines ratio between root font size and base font size
@font-size__base	unit((@root__font-size / 100) * 16 * @font-size-ratio__base, px)	Base font size value in px
@font-size__xl	ceil(1.5 * @font-size__base) // 21	Extra large font size
@font-size__l	ceil(1.25 * @font-size__base) // 18	Large font size
@font-size__s	ceil(.85 * @font-size__base) // 12	Small font size
@font-size__xs	floor(.75 * @font-size__base) // 11	Extra small font size
@font-weight__regular	400	Basic font weight
@font-weight__light	200	Light font weight
@font-weight__semibold	600	Semibold font weight
@font-weight__bold	700	Bold font weight
@font-style__base	normal	Font style
@font-style__emphasis	italic	Emphasis font style
@line-height__base	1.428571429	Base line height
@line-height__computed	floor(@font-size__base * @line-height__base)	Computed line height depending on base font size
@line-height__l	1.5	Large line height
@line-height__s	1.33	Small line height
@text__color	@primary__color	Primary text color
@text__color__intense	@primary__color__darker	Darker text color
@text__color__muted	@primary__color__lighter	Lighter text color
@indent__base	@line-height__computed // 20px	Base text ident (20px)
@indent__xl	@line-height__computed * 2 // 40px	Extra large text ident (40px)
@indent__l	@line-height__computed * 1.5 // 30px	Large text ident (30px)
@indent__m	@indent__base * 1.25 // 25px	Extra large text ident (25px)
@indent__s	@line-height__computed / 2 //10px	Small text ident (10px)
@indent__xs	@line-height__computed / 4 // 5px	Extra small text ident (5px)
Links
---
@link__color	#1979c3	Links color
@link__text-decoration	none	Links text decoration
@link__visited__color	#800080	Visited links color
@link__visited__text-decoration	none	Visited links text decoration
@link__hover__color	#006bb4	Hovered links color
@link__hover__text-decoration	underline	Hovered links text decoration
@link__active__color	#ff5501	Active links color
@link__active__text-decoration	underline	Active links text decoration
Lists
---
@list__color__base	false	List text color
@list__font-size__base	@font-size__base	List font size
@list__margin-top	0	List margin top
@list__margin-bottom	@indent__m	List margin bottom
@list-item__margin-top	0	List item margin top
@list-item__margin-bottom	@indent__s	List item margin bottom
Definition list
---
@dl__margin-top	0	Definition list margin top
@dl__margin-bottom	@indent__base	Definition list margin bottom
@dt__margin-top	0	Description term margin top
@dt__margin-bottom	@indent__xs	Description term margin bottom
@dt__font-weight	@font-weight__bold	Description term
@dd__margin-top	0	Description margin top
@dd__margin-bottom	@indent__s	Description margin bottom
Paragraphs
---
@p__margin-top	0	Paragraph margin top
@p__margin-bottom	@indent__s	Paragraph margin bottom
Headings
---
@heading__font-family__base	false	Heading base font family
@heading__font-style__base	false	Heading base font style
@heading__font-weight__base	@font-weight__light	Heading base font weight
@heading__line-height__base	1.1	Heading base line height
@heading__color__base	false	Heading base color
@heading__margin-top__base	@indent__base	Heading base margin top
@heading__margin-bottom__base	@indent__base	Heading base margin bottom
H1
---
@h1__font-size	ceil((@font-size__base * 2.85)) // 40px	H1 font size
@h1__font-color	@heading__color__base	H1 color
@h1__font-family	@heading__font-family__base	H1 font family
@h1__font-weight	@heading__font-weight__base	H1 font weight
@h1__font-style	@heading__font-style__base	H1 font style
@h1__line-height	@heading__line-height__base	H1 line height
@h1__margin-top	0	H1 margin top
@h1__margin-bottom	@heading__margin-bottom__base	H1 margin bottom
H2
---
@h2__font-size	ceil((@font-size__base * 1.85)) // 26px	H2 font size
@h2__font-color	@heading__color__base	H2 color
@h2__font-family	@heading__font-family__base	H2 font family
@h2__font-weight	@heading__font-weight__base	H2 font weight
@h2__font-style	@heading__font-style__base	H2 font style
@h2__line-height	@heading__line-height__base	H2 line height
@h2__margin-top	@indent__m	H2 margin top
@h2__margin-bottom	@heading__margin-bottom__base	H2 margin bottom
H3
---
@h3__font-size	ceil((@font-size__base * 1.28)) // 18px	H3 font size
@h3__font-color	@heading__color__base	H3 color
@h3__font-family	@heading__font-family__base	H3 font family
@h3__font-weight	@heading__font-weight__base	H3 font weight
@h3__font-style	@heading__font-style__base	H3 font style
@h3__line-height	@heading__line-height__base	H3 line height
@h3__margin-top	@indent__base * .75	H3 margin top
@h3__margin-bottom	@indent__s	H3 margin bottom
H4
---
@h4__font-size	@font-size__base // 14px	H4 font size
@h4__font-color	@heading__color__base	H4 color
@h4__font-family	@heading__font-family__base	H4 font family
@h4__font-weight	@font-weight__bold	H4 font weight
@h4__font-style	@heading__font-style__base	H4 font style
@h4__line-height	@heading__line-height__base	H4 line height
@h4__margin-top	@heading__margin-top__base	H4 margin top
@h4__margin-bottom	@heading__margin-bottom__base	H4 margin bottom
H5
---
@h5__font-size	ceil((@font-size__base * .85)) // 12px	H5 font size
@h5__font-color	@heading__color__base	H5 color
@h5__font-family	@heading__font-family__base	H5 font family
@h5__font-weight	@font-weight__bold	H5 font weight
@h5__font-style	@heading__font-style__base	H5 font style
@h5__line-height	@heading__line-height__base	H5 line height
@h5__margin-top	@heading__margin-top__base	H5 margin top
@h5__margin-bottom	@heading__margin-bottom__base	H5 margin bottom
H6
---
@h6__font-size	ceil((@font-size__base * .7)) // 10px	H6 font size
@h6__font-color	@heading__color__base	H6 color
@h6__font-family	@heading__font-family__base	H6 font family
@h6__font-weight	@heading__font-weight__base	H6 font weight
@h6__font-style	@heading__font-style__base	H6 font style
@h6__line-height	@heading__line-height__base	H6 line height
@h6__margin-top	@heading__margin-top__base	H6 margin top
@h6__margin-bottom	@heading__margin-bottom__base	H6 margin bottom
<small> tags and tags with class .small placed in H1-H6 headings
---
@heading__small-color	@primary__color	<small> and .small heading element color
@heading__small-line-height	1	<small> and .small heading element line height
@heading__small-size	(@font-size__xs/@font-size__base) * 100%	<small> and .small heading element font size
Focus
---
@focus__box-shadow	0 0 3px 1px @focus__color	Focused element highlight
Code blocks
---
@code__background-color	@panel__background-color	Code block background
@code__color	@primary__color__darker	Code text color
@code__font-size	@font-size__s	Code font size
@code__padding	2px 4px	Code padding
@pre__background-color	@primary__color__light	Preformatted text background color
@pre__border-color	@border-color__base	Preformatted text border color
@pre__border-width	@border-width__base	Preformatted text border width
@pre__color	@primary__color__darker	Preformatted text color
@kbd__background-color	@panel__background-color	Keyboard input background
@kbd__color	@primary__color__darker	Keyboard input text color
Blockquote
---
@blockquote__border-color	@border-color__base	Blockquote border color
@blockquote__border-width	0	Blockquote border width
@blockquote__content-before	'\2014 \00A0'	"-" and space symbols
@blockquote__font-size	@font-size__base	Blockquote font size
@blockquote__font-style	@font-style__emphasis	Blockquote font style
@blockquote__margin	0 0 @indent__base @indent__xl	Blockquote margin
@blockquote__padding	0	Blockquote padding
@blockquote-small__color	@primary__color	Blockquote <small> and .small text color
@blockquote-small__font-size	@font-size__xs	Blockquote <small> and .small font size
Cite
---
@cite__font-style	@font-style__base	Cite font style
Other elements
---
@hr__border-color	@border-color__base	HR border color
@hr__border-style	solid	HR border style
@hr__border-width	@border-width__base	HR border width
@mark__color	@primary__color__dark	<mark> color
@mark__background-color	@panel__background-color	<mark> background
@abbr__border-color	@border-color__base	<abbr> border color
@disable-filters	false	Disable filters output in css

Base Typography

The `.lib-typography__base()` mixin variables

Mixin variable	Global variable	Default value	Allowed values	Comment
@_abbr-border-color	@abbr__border-color	@border-color__base	''	false
@_dfn-font-style	@font-style__emphasis	italic	''	false
@_emphasis-font-style	@font-style__emphasis	italic	''	false
@_hr-border-color	@hr__border-color	@border-color__base	''	false
@_hr-border-style	@hr__border-style	solid	''	false
@_hr-border-width	@hr__border-width	@border-width__base	''	false
@_hr-margin-bottom	@line-height__computed	floor(@font-size__base * @line-height__base)	''	false
@_hr-margin-top	@line-height__computed	floor(@font-size__base * @line-height__base)	''	false
@_mark-background-color	@mark__background-color	@panel__background-color	''	false
@_mark-color	@mark__color	@primary__color__dark	''	false
@_p-margin-bottom	@p__margin-bottom	@indent__s	''	false
@_p-margin-top	@p__margin-top	0	''	false
@_root-font-size	@root__font-size	62.5%	''	false
@_small-font-size	@font-size__s	ceil(.85 * @font-size__base) // 12	''	false
@_strong-font-weight	@font-weight__bold	700	''	false
@_sub-sup-font-size	-	(@font-size__xs / @font-size__base) * 100%	''	false

Headings

The `.lib-typography-headings()` mixin variables

Mixin variable	Global variable	Default value	Allowed values	Comment
@_heading-small-size	@heading__small-size	(@font-size__xs/@font-size__base) * 100%	''	false
@_heading-small-color	@heading__small-color	@primary__color	''	false
@_heading-small-line-height	@heading__small-line-height	1	''	false

Unordered and Ordered lists

The `.lib-typography-lists()` mixin variables

Mixin variable	Global variable	Default value	Allowed values	Comment
@_list-margin-top	@list__margin-top	0	''	false
@_list-margin-bottom	@list__margin-bottom	@indent__m	''	false
@_list-item-margin-top	@list-item__margin-top	0	''	false
@_list-item-margin-bottom	@list-item__margin-bottom	@indent__s	''	false
@_dl-margin-bottom	@dl__margin-bottom	@indent__base	''	false
@_dl-margin-top	@dl__margin-top	0	''	false
@_dt-font-weight	@dt__font-weight	@font-weight__bold	''	false
@_dt-margin-bottom	@dt__margin-bottom	@indent__xs	''	false
@_dt-margin-top	@dt__margin-top	0	''	false
@_dd-margin-bottom	@dd__margin-bottom	@indent__s	''	false
@_dd-margin-top	@dd__margin-top	0	''	false

Code (inline and block)

The `.lib-typography-code()` mixin variables

Mixin variable	Global variable	Default value	Allowed values	Comment
@_font-family-monospace	@font-family__monospace	Menlo, Monaco, Consolas, 'Courier New', monospace	''	false
@_code-background-color	@code__background-color	@panel__background-color	''	false
@_code-color	@code__color	@primary__color__darker	''	false
@_code-padding	@code__padding	2px 4px	''	false
@_code-font-size	@code__font-size	@font-size__s	''	false
@_kbd-background-color	@kbd__background-color	@panel__background-color	''	false
@_kbd-color	@kbd__color	@primary__color__darker	''	false
@_kbd-padding	@code__padding	2px 4px	''	false
@_kbd-font-size	@code__font-size	@font-size__s	''	false
@_pre-background-color	@pre__background-color	@primary__color__light	''	false
@_pre-border-width	@pre__border-width	@border-width__base	''	false
@_pre-border-color	@pre__border-color	@border-color__base	''	false
@_pre-color	@pre__color	@primary__color__darker	''	false
@_pre-line-height	@line-height__base	1.428571429	''	false
@_pre-margin	-	0 0 @indent__s	''	false
@_pre-padding	-	@indent__s	''	false
@_pre-font-size	@code__font-size	@font-size__s	''	false

Blockquotes

The `.lib-typography-blockquote()` mixin variables

Mixin variable	Global variable	Default value	Allowed values	Comment
@_blockquote-border-width	@blockquote__border-width	0	''	false
@_blockquote-border-color	@blockquote__border-color	@border-color__base	''	false
@_blockquote-margin	@blockquote__margin	0 0 @indent__base @indent__xl	''	false
@_blockquote-padding	@blockquote__padding	0	''	false
@_blockquote-font-size	@blockquote__font-size	@font-size__base	''	false
@_blockquote-font-style	@blockquote__font-style	@font-style__emphasis	''	false
@_blockquote-small-color	@blockquote-small__color	@primary__color	''	false
@_blockquote-small-line-height	@line-height__base	1.428571429	''	false
@_blockquote-small-font-size	@blockquote-small__font-size	@font-size__xs	''	false
@_blockquote-small-before-content	@blockquote__content-before	'\2014 \00A0'	''	false
@_blockquote-cite	@cite__font-style	@font-style__base	''	false
@_cite	@cite__font-style	@font-style__base	''	false

Structure

Predefined variables for handle global Z-axis positioning

Variable	Default value	Allowed values
@z-index-1	100	constant
@z-index-2	200	constant
@z-index-3	300	constant
@z-index-4	400	constant
@z-index-5	500	constant
@z-index-6	600	constant
@z-index-7	700	constant
@z-index-8	800	constant
@z-index-9	900	constant
@z-index-10	1000	constant
Nesting example
---
@modal__z-index	@z-index-9	@z-index-N

The `.lib-actions-toolbar()` mixin variables

Mixin variable	Global variable	Default value	Allowed values	Comment
@_actions-toolbar-actions-position	@actions-toolbar-actions__position	justify	justify	left
@_actions-toolbar-actions-reverse	@actions-toolbar-actions__reverse	false	true	false
@_actions-toolbar-margin	@actions-toolbar__margin	false	''	false
@_actions-toolbar-padding	@actions-toolbar__padding	false	''	false
@_actions-toolbar-actions-margin	@actions-toolbar-actions__margin	false	''	false
@_actions-toolbar-primary-actions-margin	@actions-toolbar-actions-primary__margin	0 @indent__xs 0 0	''	false
@_actions-toolbar-secondary-actions-margin	@actions-toolbar-actions-secondary__margin	false	''	false
@_actions-toolbar-actions-links-margin-top	@actions-toolbar-actions-links__margin-top	false	''	false
@_actions-toolbar-primary-actions-links-margin-top	@actions-toolbar-actions-links-primary__margin-top	false	''	false
@_actions-toolbar-secondary-actions-links-margin-top	@actions-toolbar-actions-secondary__margin	6px	''	false

Breadcrumbs variables

The `.lib-breadcrumbs()` mixin variables

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

Button variables

The `.lib-button()` mixin variables

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

The `.lib-button-primary()` mixin variables

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

Mixin variable	Global variable	Default value	Allowed values	Comment
@_button-line-height	@button-primary__line-height	false	''	false
@_button-width	@button-primary__width	false	''	false
@_button-margin	@button-primary__margin	false	''	false
@_button-padding	@button-primary__padding	@button__padding	''	false
@_button-gradient	@button-primary__gradient	false	''	false
@_button-gradient-direction	@button-primary__gradient-direction	false	''	false
Button default state
---
@_button-background	@button-primary__background	#1979c3	''	false
@_button-border	@button-primary__border	1px solid #1979c3	''	false
@_button-color	@button-primary__color	#fff	''	false
@_button-gradient-color-start	@button-primary__gradient-color-start	false	''	false
@_button-gradient-color-end	@button-primary__gradient-color-end	false	''	false
Button hover state
---
@_button-background-hover	@button-primary__hover__background	#006bb4	''	false
@_button-border-hover	@button-primary__hover__border	1px solid #006bb4	''	false
@_button-color-hover	@button-primary__hover__color	@button-primary__color	''	false
@_button-gradient-color-start-hover	@button-primary__hover__gradient-color-start	false	''	false
@_button-gradient-color-end-hover	@button-primary__hover__gradient-color-end	false	''	false
Button active state
---
@_button-background-active	@button-primary__active__background	@button-primary__hover__background	''	false
@_button-border-active	@button-primary__active__border	@button-primary__hover__border	''	false
@_button-color-active	@button-primary__active__color	@button-primary__color	''	false
@_button-gradient-color-start-active	@button-primary__active__gradient-color-start	false	''	false
@_button-gradient-color-end-active	@button-primary__active__gradient-color-end	false	''	false

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

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

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

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

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

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

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

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

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

Drop-down variables

The `.lib-dropdown()` mixin variables

Mixin variable	Global variable	Default value	Allowed values	Comment
@_toggle-selector	-	~".action.toggle"	Selector	Toggle selector
@_options-selector	-	~"ul.dropdown"	Selector	Options selector
@_dropdown-actions-padding	@dropdown-actions__padding	false	''	false
@_dropdown-list-min-width	@dropdown-list__min-width	100%	''	false
@_dropdown-list-width	@dropdown-list__width	false	''	false
@_dropdown-list-height	@dropdown-list__height	false	''	false
@_dropdown-list-margin-top	@dropdown-list__margin-top	4px	''	false
Drop-down list
---
@_dropdown-list-position-top	@dropdown-list__position-top	100%	''	false
@_dropdown-list-position-right	@dropdown-list__position-right	false	''	false
@_dropdown-list-position-bottom	@dropdown-list__position-bottom	false	''	false
@_dropdown-list-position-left	@dropdown-list__position-left	false	''	false
@_dropdown-list-background	@dropdown-list__background	@color-white	''	false
@_dropdown-list-border	@dropdown-list__border	1px solid #bbb	''	false
@_dropdown-list-pointer	@dropdown-list__pointer	true	true	false
@_dropdown-list-pointer-border	@dropdown-list-pointer__border	#bbb	''	false
@_dropdown-list-pointer-position	@dropdown-list-pointer__position	left	left	right
@_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
@_dropdown-list-item-padding	@dropdown-list-item__padding	3px @indent__xs	''	false
@_dropdown-list-item-margin	@dropdown-list-item__margin	0	''	false
@_dropdown-list-item-hover	@dropdown-list-item__hover	#e8e8e8	''	false
@_dropdown-list-shadow	@dropdown-list__shadow	0 3px 3px rgba(0,0,0,.15)	''	false
@_dropdown-list-z-index	@dropdown-list__z-index	100	''	false
Drop-down icon
---
@_dropdown-toggle-icon-content	@dropdown-toggle-icon__content	@icon-pointer-down	''	false
@_dropdown-toggle-active-icon-content	@dropdown-toggle-icon__active__content	@icon-pointer-up	''	false
@_icon-font	@dropdown-toggle-icon__font	@button-icon__font	''	false
@_icon-font-size	@dropdown-toggle-icon__font-size	@button-icon__font-size	''	false
@_icon-font-line-height	@dropdown-toggle-icon__font-line-height	@button-icon__line-height	''	false
@_icon-font-color	@dropdown-toggle-icon__font-color	@button-icon__color	''	false
@_icon-font-color-hover	@dropdown-toggle-icon__font-color-hover	@button-icon__hover__font-color	''	false
@_icon-font-color-active	@dropdown-toggle-icon__font-color-active	@button-icon__active__font-color	''	false
@_icon-font-margin	@dropdown-toggle-icon__font-margin	@button-icon__margin	''	false
@_icon-font-position	@dropdown-toggle-icon__position	after	before	after
@_icon-font-vertical-align	@dropdown-toggle-icon__font-vertical-align	@button-icon__vertical-align	''	false
@_icon-font-text-hide	@dropdown-toggle-icon__text-hide	@button-icon__text-hide	true	false

Split button variables

The `.lib-dropdown-split()` mixin variables

Mixin variable	Global variable	Default value	Allowed values	Comment
@_toggle-selector	-	~".action.toggle"	selector	Split button action toggle selector
@_options-selector	-	~"ul.dropdown"	selector	Split button options selector
@_button-selector	-	~".action.split"	selector	Split button selector
@_dropdown-split-actions-padding	@dropdown-split-actions__padding	0 @indent__xs	''	false
@_dropdown-split-button-actions-padding	@dropdown-split-button__actions__padding	false	''	false
@_dropdown-split-toggle-actions-padding	@dropdown-split-toggle__actions__padding	4px @indent__xs	''	false
@_dropdown-split-toggle-position	@dropdown-split-toggle__position	right	''	false
Drop-down list
---
@_dropdown-split-list-min-width	@dropdown-split-list__min-width	100%	''	false
@_dropdown-split-list-width	@dropdown-split-list__width	100%	''	false
@_dropdown-split-list-height	@dropdown-split-list__height	false	''	false
@_dropdown-split-list-margin-top	@dropdown-split-list__margin-top	4px	''	false
@_dropdown-split-list-position-top	@dropdown-split-list__position-top	@dropdown-list__position-top	''	false
@_dropdown-split-list-position-right	@dropdown-split-list__position-right	@dropdown-list__position-right	''	false
@_dropdown-split-list-position-bottom	@dropdown-split-list__position-bottom	@dropdown-list__position-bottom	''	false
@_dropdown-split-list-position-left	@dropdown-split-list__position-left	@dropdown-list__position-left	''	false
@_dropdown-split-list-background	@dropdown-split-list__background	@dropdown-list__background	''	false
@_dropdown-split-list-border	@dropdown-split-list__border	@dropdown-list__border	''	false
@_dropdown-split-list-pointer	@dropdown-split-list__pointer	@dropdown-list__pointer	''	false
@_dropdown-split-list-pointer-border	@dropdown-split-list__pointer-border	@dropdown-list-pointer__border	''	false
@_dropdown-split-button-border-radius-fix	@dropdown-split-button__border-radius-fix	false	true	false
@_dropdown-split-list-item-border	@dropdown-split-list__item-border	@dropdown-list-item__border	''	false
@_dropdown-split-list-item-padding	@dropdown-split-list__item-padding	@dropdown-list-item__padding	''	false
@_dropdown-split-list-item-margin	@dropdown-split-list__item-margin	@dropdown-list-item__margin	''	false
@_dropdown-split-list-item-hover	@dropdown-split-list__item-hover	@dropdown-list-item__hover	''	false
@_dropdown-split-list-pointer-position	@dropdown-split-list__pointer-position	right	left	right
@_dropdown-split-list-pointer-position-top	@dropdown-split-list__pointer-position-top	-12px	''	false
@_dropdown-split-list-pointer-position-left-right	@dropdown-split-list__pointer-position-left-right	10px	''	false
@_dropdown-split-list-shadow	@dropdown-split-list__shadow	@dropdown-list__shadow	''	false
@_dropdown-split-list-z-index	@dropdown-split-list__z-index	@dropdown-list__z-index	''	false
Dropdown icon
---
@_dropdown-split-toggle-icon-content	@dropdown-split-toggle-icon__content	@dropdown-toggle-icon__content	''	false
@_dropdown-split-toggle-active-icon-content	@dropdown-split-toggle-icon__active__content	@dropdown-toggle-icon__active__content	''	false
@_icon-font	@dropdown-split-toggle-icon__font	@button-icon__font	''	false
@_icon-font-size	@dropdown-split-toggle-icon__font-size	@button-icon__font-size	''	false
@_icon-font-line-height	@dropdown-split-toggle-icon__font-line-height	@button-icon__line-height	''	false
@_icon-font-color	@dropdown-split-toggle-icon__font-color	@button-icon__color	''	false
@_icon-font-color-hover	@dropdown-split-toggle-icon__font-color-hover	@button-icon__hover__font-color	''	false
@_icon-font-color-active	@dropdown-split-toggle-icon__font-color-active	@button-icon__active__font-color	''	false
@_icon-font-margin	@dropdown-split-toggle-icon__font-margin	@button-icon__margin	''	false
@_icon-font-position	@dropdown-split-toggle-icon__position	after	before	after
@_icon-font-vertical-align	@dropdown-split-toggle-icon__font-vertical-align	@button-icon__vertical-align	''	false
@_icon-font-text-hide	@dropdown-split-toggle-icon__text-hide	@button-icon__text-hide	true	false

Forms variables

The `.lib-form-fieldset()` mixin variables

Mixin variable	Global variable	Default value	Comment
@_border	@form-fieldset__border	0	Fieldset border
@_margin	@form-fieldset__margin	0 0 @indent__xl	Fieldset margin
@_padding	@form-fieldset__padding	0	Fieldset padding
@_legend-color	@form-fieldset-legend__color	false	Legend color
@_legend-font-size	@form-fieldset-legend__font-size	20px	Legend font size
@_legend-font-family	@form-fieldset-legend__font-family	false	Legend font family
@_legend-font-weight	@form-fieldset-legend__font-weight	false	Legend font weight
@_legend-font-style	@form-fieldset-legend__font-style	false	Legend font style
@_legend-line-height	@form-fieldset-legend__line-height	1.2	Legend line height
@_legend-margin	@form-fieldset-legend__margin	0 0 @indent__m	Legend margin
@_legend-padding	@form-fieldset-legend__padding	0	Legend padding
@_legend-width	@form-fieldset-legend__width	false	Legend width

The `.lib-form-field()` mixin variables

Mixin variable	Global variable	Default values [Allowed values]	Comment
@_type	@form-field-type	inline [inline	block]
@_border	@form-field__border	false	Border of the <div class="field"> element
@_column	@form-field-column	false [true	false]
@_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]
@_note-icon-font-text-hide	@form-field-note-icon-font__text-hide	@icon-font__text-hide [true	false]

The `.lib-form-hasrequired()` mixin variables

Mixin variable	Global variable	Default values [Allowed values]	Comment
@_position	@form-hasrequired__position	top [top	bottom]
@_color	@form-hasrequired__color	@form-field-label-asterisk__color	Text color of "required fields" notice
@_font-size	@form-hasrequired__font-size	@font-size__s	Font size of "required fields" notice
@_font-family	@form-hasrequired__font-family	false	Font family of "required fields" notice
@_font-weight	@form-hasrequired__font-weight	false	Font weight of "required fields" notice
@_font-style	@form-hasrequired__font-style	false	Font style of "required fields" notice
@_line-height	@form-hasrequired__line-height	false	Line height of "required fields" notice
@_border	@form-hasrequired__border	false	Border of "required fields" notice
@_margin	@form-hasrequired__margin	@indent__s 0 0	Margin of "required fields" notice
@_padding	@form-hasrequired__padding	false	Padding of "required fields" notice

The `.lib-form-element-input() mixin variables`

Mixin variable	Global variable	Default value [Allowed value]	Comment
@_type	@form-element-input-type	'' [input-text	select
@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
@input-text__color
@select__color
@textarea__color
@form-element-input__color
@form-element-input__color
@form-element-input__color
@_font-size
@input-text__font-size
@select__font-size
@textarea__font-size
@form-element-input__font-size
@form-element-input__font-size
@form-element-input__font-size
@_font-family
@input-text__font-family
@select__font-family
@textarea__font-family
@form-element-input__font-family
@form-element-input__font-family
@form-element-input__font-family
@_font-weight
@input-text__font-weight
@select__font-weight
@textarea__font-weight
@form-element-input__font-weight
@form-element-input__font-weight
@form-element-input__font-weight
@_font-style
@input-text__font-style
@selectfont-style
@textarea__font-style
@form-element-input__font-style
@form-element-input__font-style
@form-element-input__font-style
@_line-height
@input-text__line-height
@select__line-height
@textarea__line-height
@form-element-input__line-height
@form-element-input__line-height
@form-element-input__line-height
Placeholder
---
@_placeholder-color
@input-text-placeholder__color
@select-placeholder__color
@textarea-placeholder__color
@form-element-input-placeholder__color
@form-element-input-placeholder__color
@form-element-input-placeholder__color
@_placeholder-font-style
@inputtext-placeholder-font-style
@select-placeholder__font-style
@textarea-placeholder__font-style
@form-element-input-placeholder__font-style
@form-element-input-placeholder__font-style
@form-element-input-placeholder__font-style
Disabled element
---
@_disabled-background
@inputtextdisabled-background
@select__disabled__background
@textarea__disabled__background
@form-element-input__disabled__background
@form-element-input__disabled__background
@form-element-input__disabled__background
@_disabled-border
@input-text__disabled__border
@select__disabled__border
@textarea__disabled__border
@form-element-input__disabled__border
@form-element-input__disabled__border
@form-element-input__disabled__border
@_disabled-opacity
@input-text__disabled__opacity
@select__disabled__opacity
@textarea__disabled__opacity
@form-element-input__disabled__opacity
@form-element-input__disabled__opacity
@form-element-input__disabled__opacity
@_disabled-color
@input-text__disabled__color
@select__disabled__color
@textarea__disabled__color
@form-element-input__disabled__color
@form-element-input__disabled__color
@form-element-input__disabled__color
@_disabled-font-style
@input-text__disabled__font-style
@select__disabled__font-style
@textarea__disabled__font-style
@form-element-input__disabled__font-style
@form-element-input__disabled__font-style
@form-element-input__disabled__font-style
Focused elements
---
@_focus-background
@input-text__focus__background
@select__focus__background
@textarea__focus__background
@form-element-input__focus__background
@form-element-input__focus__background
@form-element-input__focus__background
@_focus-border
@input-text__focus__border
@select__focus__border
@textarea__focus__border
@form-element-input__focus__border
@form-element-input__focus__border
@form-element-input__focus__border
@_focus-color
@input-text__focus__color
@select__focus__color
@textarea__focus__color
@form-element-input__focus__color
@form-element-input__focus__color
@form-element-input__focus__color
@_focus-font-style
@input-text__focus__font-style
@select__focus__font-style
@textarea__focus__font-style
@form-element-input__focus__font-style
@form-element-input__focus__font-style
@form-element-input__focus__font-style

The `.lib-form-element-choise()` mixin variables

Mixin variable	Global variable	Default values [Allowed values]	Comment
@_type	@form-element-choice__type	'' [''	radio
@_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]
@_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-font	@icon-font	@icons__font-name	''	false
@_icon-font-size	@icon-font__size	inherit	''	false
@_icon-font-line-height	@icon-font__line-height	@icon-font__size	''	false
@_icon-font-color	@icon-font__color	inherit	''	inherit
@_icon-font-color-hover	@icon-font__color-hover	false	''	inherit
@_icon-font-color-active	@icon-font__color-active	false	''	inherit
@_icon-font-margin	@icon-font__margin	@icon__margin	''	false
@_icon-font-vertical-align	@icon-font__vertical-align	@icon__vertical-align	''	false
@_icon-font-position	@icon-font__position	@icon__position	before	after
@_icon-font-text-hide	@icon-font__text-hide	@icon__text-hide	true	false
@_icon-font-display	@icon-font__display	inline-block	''	false

Icon with image or sprite variables

The `.lib-icon-image()` mixin variables

Mixin variable	Global variable	Default value	Allowed values	Comment
@_icon-image		-	''	false
@_icon-image-height	@icon__height	26px	''	false
@_icon-image-width	@icon__width	26px	''	false
@_icon-image-margin	@icon__margin	0	''	false
@_icon-image-vertical-align	@icon__vertical-align	middle	''	false
@_icon-image-position-x	@icon-image__position-x	0	''	false
@_icon-image-position-y	@icon-image__position-y	0	''	false
@_icon-image-position	@icon__position	before	before	after
@_icon-image-text-hide	@icon__text-hide	false	true	false

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
@_icon-image-position-y	@icon-image__position-y	0	''	false
@_icon-image-position	-	-	before	after

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
@_icon-sprite-position-y	@icon-sprite__position-y	0	''	false
@_icon-sprite-grid	@icon-sprite__grid	26px	''	false
@_icon-sprite-position	@icon__position	before	before	after

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
@_icon-image-height	@icon__height	26px	''	false
@_icon-image-position	@icon__position	before	before	after

Layout variables

Variables list names	Default value	Allowed values	Comment
@layout__width	''	''	false
@layout__max-width	1280px	''	false
@layout-indent__width	20px	''	false
Class names defining different layouts
---
@layout-class-1column	page-layout-1column	''	false
@layout-class-2columns__left	page-layout-2columns-left	''	false
@layout-class-2columns__right	page-layout-2columns-right	''	false
@layout-class-3columns	page-layout-3columns	''	false
Variables used for layout grid
---
@total-columns	12	''	false
@gutter-width	0	''	false
Variables for layout columns
---
@layout-column__width	@total-columns	''	false
@layout-column__sidebar-width	2	''	false
@layout-column__left-width	@layout-column__sidebar-width	''	false
@layout-column__right-width	@layout-column__sidebar-width	''	false
Variables for layout columns depending on layout used
---
@layout-column-main__width-1	100%	''	false
@layout-column-main__width-2-left	@layout-column__width - @layout-column__left-width	''	false
@layout-column-main__width-2-right	@layout-column__width - @layout-column__right-width	''	false
@layout-column-main__width-3	@layout-column__width - @layout-column__left-width - @layout-column__right-width	''	false
Settings variables
---
@use-flex	true	''	true
@responsive	true	''	true

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
@_loader-overlay-z-index	@loader-overlay__z-index	9999	''	false
@_loader-icon-width	@loader-icon__width	160px	''	false
@_loader-icon-height	@loader-icon__height	160px	''	false
@_loader-icon-background-color	@loader-icon__background-color	transparent	''	false
@_loader-icon-background-image	@loader-icon__background-image	url('@{baseDir}images/loader-2.gif')	''	false
@_loader-icon-background-position	@loader-icon__background-position	50% 50%	''	false
@_loader-icon-border-radius	@loader-icon__border-radius	5px	''	false
@_loader-icon-padding	@loader-icon__padding	''	''	false
@_loader-text	@loader-text	false	''	false
@_loader-text-color	@loader-text__color	@primary__color	''	false
@_loader-text-font-size	@loader-text__font-size	@font-size__base	''	false
@_loader-text-font-family	@loader-text__font-family	@font-family__base	''	false
@_loader-text-font-weight	@loader-text__font-weight	@font-weight__regular	''	false
@_loader-text-font-style	@loader-text__font-style	@font-style__base	''	false
@_loader-text-padding	@loader-text__padding	130px 0 0	''	false

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
@_loading-background-image	@loading__background-image	@loader-icon__background-image	''	false

Messages variables

The `.lib-message()` mixin variables

Mixin variable	Default value	Allowed values	Comment
@message__padding	@indent__s @indent__base	''	value
@message__margin	@indent__xs 0	''	value
@message__color	false	true	false
Messages font style
---
@message__font-size	13px	''	false
@message__font-family	false	''	false
@message__font-style	false	''	false
@message__font-weight	false	''	false
@message__line-height	1.2em	''	false
Message icon setup
---
@message-icon__font-size	ceil(@message__font-size * 2 + 2)	''	false
@message-icon__font-line-height	@message-icon__font-size	''	false
@message-icon__inner-padding-left	40px	''	false
@message-icon__lateral-width	30px	''	false
@message-icon__lateral-arrow-size	5px	''	false
@message-icon__top	18px	''	false
@message-icon__right	false	''	false
@message-icon__bottom	false	''	false
@message-icon__left	0	''	false
Message border
---
@message__border-width	false	''	false
@message__border-color	false	''	false
@message__border-style	false	''	false
@message__border-radius	false	''	false
Information message
---
@message-info__color	#6f4400	''	false
@message-info__background	#fdf0d5	''	false
@message-info-link__color	@link__color	''	false
@message-info-link__color-hover	@link__hover__color	''	false
@message-info-link__color-active	@link__hover__color	''	false
@message-info__border-color	@message__border-color	''	false
@message-info-icon	@icon-warning	''	false
@message-info-icon__color-inner	#c07600	''	false
@message-info-icon__color-lateral	@color-white	''	false
@message-info-icon__background	#6f4400	''	false
@message-info-icon__top	@message-icon__top	''	false
@message-info-icon__right	@message-icon__right	''	false
@message-info-icon__bottom	@message-icon__bottom	''	false
@message-info-icon__left	@message-icon__left	''	false
Warning message
---
@message-warning__color	@message-info__color	''	false
@message-warning__background	@message-info__background	''	false
@message-warning-link__color	@message-info-link__color	''	false
@message-warning-link__color-hover	@message-info-link__color-hover	''	false
@message-warning-link__color-active	@message-info-link__color-active	''	false
@message-info__border-color	@message-info__border-color	''	false
@message-warning-icon	@message-info-icon	''	false
@message-warning-icon__color-inner	@message-info-icon__color-inner	''	false
@message-warning-icon__color-lateral	@message-info-icon__color-lateral	''	false
@message-warning-icon__background	@message-info-icon__background	''	false
@message-warning-icon__top	@message-icon__top	''	false
@message-warning-icon__right	@message-icon__right	''	false
@message-warning-icon__bottom	@message-icon__bottom	''	false
@message-warning-icon__left	@message-icon__left	''	false
Error message
---
@message-error__color	@error__color	''	false
@message-error__background	#fae5e5	''	false
@message-error-link__color	@link__color	''	false
@message-error-link__color-hover	@link__hover__color	''	false
@message-error-link__color-active	@link__hover__color	''	false
@message-error__border-color	@message__border-color	''	false
@message-error-icon	@icon-warning	''	false
@message-error-icon__color-inner	#b30000	''	false
@message-error-icon__color-lateral	@color-white	''	false
@message-error-icon__background	#b30000	''	false
@message-error-icon__top	@message-icon__top	''	false
@message-error-icon__right	@message-icon__right	''	false
@message-error-icon__bottom	@message-icon__bottom	''	false
@message-error-icon__left	@message-icon__left	''	false
Success message
---
@message-success__color	#006400	''	false
@message-success__background	#e5efe5	''	false
@message-success-link__color	@link__color	''	false
@message-success-link__color-hover	@link__hover__color	''	false
@message-success-link__color-active	@link__hover__color	''	false
@message-success__border-color	@message__border-color	''	false
@message-success-icon	@icon-checkmark	''	false
@message-success-icon__color-inner	#006400	''	false
@message-success-icon__color-lateral	@color-white	''	false
@message-success-icon__background	#006400	''	false
@message-success-icon__top	@message-icon__top	''	false
@message-success-icon__right	@message-icon__right	''	false
@message-success-icon__bottom	@message-icon__bottom	''	false
@message-success-icon__left	@message-icon__left	''	false
Notice message
---
@message-notice__color	@message-info__color	''	false
@message-notice__background	@message-info__background	''	false
@message-notice-link__color	@message-info-link__color	''	false
@message-notice-link__color-hover	@message-info-link__color-hover	''	false
@message-notice-link__color-active	@message-info-link__color-active	''	false
@message-notice__border-color	@message-info__border-color	''	false
@message-notice-icon	@message-info-icon	''	false
@message-notice-icon__color-inner	@message-info-icon__color-inner	''	false
@message-notice-icon__color-lateral	@message-info-icon__color-lateral	''	false
@message-notice-icon__background	@message-info-icon__background	''	false
@message-notice-icon__top	@message-icon__top	''	false
@message-notice-icon__right	@message-icon__right	''	false
@message-notice-icon__bottom	@message-icon__bottom	''	false
@message-notice-icon__left	@message-icon__left	''	false

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
@_pager-item-display	@pager-item__display	inline-block	none	block
@_pager-reset-spaces	@pager-reset-spaces	true	true	false
@_pager-font-size	@pager__font-size	@font-size__s	''	false
@_pager-font-weight	@pager__font-weight	@font-weight__bold	''	false
@_pager-line-height	@pager__line-height	32px	''	false
@_pager-item-margin	@pager-item__margin	0 2px 0 0	''	false
@_pager-item-padding	@pager-item__padding	0 4px	''	false
@_pager-actions-padding	@pager-actions__padding	0	''	false
Pager current page
---
@_pager-current-font-weight	@pager-current__font-weight	@font-weight__bold;	''	false
@_pager-current-color	@pager-current__color	@primary__color	''	false
@_pager-current-border	@pager-current__border	false	''	false
@_pager-current-background	@pager-current__background	false	''	false
@_pager-current-gradient	@pager-current__gradient	false	true	false
@_pager-current-gradient-direction	@pager-current__gradient-direction	false	''	false
@_pager-current-gradient-color-start	@pager-current__gradient-color-start	false	''	false
@_pager-current-gradient-color-end	@pager-current__gradient-color-end	false	''	false
Link to page number
---
@_pager-gradient	@pager__gradient	false	true	false
@_pager-gradient-direction	@pager__gradient-direction	'false	''	false
Link to page number - default
---
@_pager-color	@pager__color	@link__color	''	false
@_pager-border	@pager__border	false	''	false
@_pager-text-decoration	@pager__text-decoration	none	''	false
@_pager-background	@pager__background	false	''	false
@_pager-gradient-color-start	@pager__gradient-color-start	false	''	false
@_pager-gradient-color-end	@pager__gradient-color-end	false	''	false
Link to page number - visited
---
@_pager-color-visited	@pager__visited__color	@link__visited__color	''	false
@_pager-border-visited	@pager__visited__border	false	''	false
@_pager-background-visited	@pager__visited__background	false	''	false
@_pager-gradient-color-start-visited	@pager__visited__gradient-color-start	false	''	false
@_pager-gradient-color-end-visited	@pager__visited__gradient-color-end	false	''	false
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
@_pager-text-decoration-hover	@pager__text-decoration	none	''	false
@_pager-background-hover	@pager__hover__background	false	''	false
@_pager-gradient-color-start-hover	@pager__hover__gradient-color-start	false	''	false
@_pager-gradient-color-end-hover	@pager__hover__gradient-color-end	false	''	false
Link to page number - active
---
@_pager-color-active	@pager__active__color	@link__hover__color	''	false
@_pager-border-active	@pager__active__border	false	''	false
@_pager-background-active	@pager__active__background	false	''	false
@_pager-gradient-color-start-active	@pager__active__gradient-color-start	false	''	false
@_pager-gradient-color-end-active	@pager__active__gradient-color-end	false	''	false
Previous/next action links - icons
---
@_pager-icon-use	@pager-icon__use	true	true	false
@_pager-icon-previous-content	@pager-icon__previous-content	@icon-prev	''	false
@_pager-icon-next-content	@pager-icon__next-content	@icon-next	''	false
@_pager-icon-text-hide		true	true	false
@_pager-icon-position		before	before	after
@_pager-icon-font	@pager-icon__font	@icon-font	''	false
@_pager-icon-font-margin	@pager-icon__font-margin	0 0 0 -6px	''	false
@_pager-icon-font-vertical-align	@pager-icon__font-vertical-align	top	''	false
@_pager-icon-font-size	@pager-icon__font-size	46px	''	false
@_pager-icon-font-line-height	@pager-icon__font-line-height	@icon-font__line-height	''	false
Previous/next action links
---
@_pager-action-gradient	@pager__gradient	false	true	false
@_pager-action-gradient-direction	@pager__gradient-direction	false	''	false
Previous/next action links - default
---
@_pager-action-color	@pager-action__color	@text__color__muted	''	false
@_pager-action-border	@pager-action__border	@border-width__base solid @border-color__base	''	false
@_pager-action-text-decoration	@pager-action__text-decoration	@pager__text-decoration	''	false
@_pager-action-background	@pager-action__background	@pager__background	''	false
@_pager-action-gradient-color-start	@pager__gradient-color-start	false	''	false
@_pager-action-gradient-color-end	@pager__gradient-color-end	false	''	false
Previous/next action links - visited
---
@_pager-action-color-visited	@pager-action__visited__color	@pager-action__color	''	false
@_pager-action-border-visited	@pager-action__visited__border	false	''	false
@_pager-action-background-visited	@pager-action__visited__background	false	''	false
@_pager-action-gradient-color-start-visited	@pager__visited__gradient-color-start	false	''	false
@_pager-action-gradient-color-end-visited	@pager__visited__gradient-color-end	false	''	false
Previous/next action links - hover
---
@_pager-action-color-hover	@pager-action__hover__color	@pager-action__color	''	false
@_pager-action-border-hover	@pager-action__hover__border	false	''	false
@_pager-action-text-decoration-hover	@pager-action__hover__text-decoration	@pager__hover__text-decoration	''	false
@_pager-action-background-hover	@pager-action__hover__background	false	''	false
@_pager-action-gradient-color-start-hover	@pager__hover__gradient-color-start	false	''	false
@_pager-action-gradient-color-end-hover	@pager__hover__gradient-color-end	false	''	false
Previous/next action links - active
---
@_pager-action-color-active	@pager-action__active__color	@pager-action__color	''	false
@_pager-action-border-active	@pager-action__active__border	false	''	false
@_pager-action-background-active	@pager-action__active__background	false	''	false
@_pager-action-gradient-color-start-active	@pager__active__gradient-color-start	false	''	false
@_pager-action-gradient-color-end-active	@pager__active__gradient-color-end	false	''	false

The `.lib-popup()` mixin variables

Mixin variable	Global variable	Default value	Allowed values	Comment
@_popup-width	@popup__width	auto	''	false
@_popup-height	@popup__height	auto	''	false
@_popup-padding	@popup__padding	22px	''	false
@_popup-background	@popup__background	@color-white	''	false
@_popup-border	@popup__border	1px solid #aeaeae	''	false
@_popup-shadow	@popup__shadow	0 3px 3px rgba(0,0,0,.15)	''	false
@_popup-fade	@popup__fade	opacity .3s linear	''	false
@_popup-z-index	@popup__z-index	1001	''	false
Popup position
---
@_popup-position	@popup__position	fixed	''	false
@_popup-position-top	@popup__position-top	0	''	false
@_popup-position-right	@popup__position-right	0	''	false
@_popup-position-bottom	@popup__position-bottom	0	''	false
@_popup-position-left	@popup__position-left	0	''	false
Popup margin
---
@_popup-margin-top	@popup__margin-top	false	''	false
@_popup-margin-right	@popup__margin-right	false	''	false
@_popup-margin-bottom	@popup__margin-bottom	false	''	false
@_popup-margin-left	@popup__margin-left	false	''	false
@_popup-content-height	@popup-content__height	auto	''	false
@_popup-header-margin	@popup-header__margin	0 0 25px	''	false
@_popup-content-margin	@popup-content__margin	false	''	false
@_popup-footer-margin	@popup-footer__margin	false	''	false
@_popup-title-headings	@popup-title-headings	true	true	false
@_popup-title-headings-level	@popup-title-headings__level	h3	h1	h2
Popup close button
---
@_popup-button-close-icon	@popup-button-close__icon	true	true	false
@_popup-button-close-reset	@popup-button-close__reset	true	true	false
@_popup-button-close-position	@popup-button-close__position	absolute	''	false
@_popup-button-close-position-top	@popup-button-close__position-top	10px	''	false
@_popup-button-close-position-right	@popup-button-close__position-right	10px	''	false
@_popup-button-close-position-bottom	@popup-button-close__position-bottom	''	''	false
@_popup-button-close-position-left	@popup-button-close__position-left	''	''	false
Popup icons parameters
---
@_popup-icon-font-content	@popup-icon-font__content	@icon-remove	''	false
@_popup-icon-font	@popup-icon-font	@button-icon__font	''	false
@_popup-icon-font-size	@popup-icon-font__size	@button-icon__font-size	''	false
@_popup-icon-font-line-height	@popup-icon-font__line-height	@button-icon__line-height	''	false
@_popup-icon-font-color	@popup-icon-font__color	@button-icon__color	''	false
@_popup-icon-font-color-hover	@popup-icon-font__color-hover	@button-icon__hover__font-color	''	false
@_popup-icon-font-color-active	@popup-icon-font__color-active	@popup-icon-font__color-active	''	false
@_popup-icon-font-margin	@popup-icon-font__margin	@button-icon__margin	''	false
@_popup-icon-font-vertical-align	@popup-icon-font__vertical-align	@button-icon__vertical-align	''	false
@_popup-icon-font-position	@popup-icon-font__position	@button-icon__position	''	false
@_popup-icon-font-text-hide	@popup-icon-font__text-hide	true	true	false
Actions toolbar parameters
---
@_popup-actions-toolbar	@popup-actions-toolbar	false	true	false
@_popup-actions-toolbar-actions-position	@popup-actions-toolbar-actions__position	@actions-toolbar-actions__position	justify	left
@_popup-actions-toolbar-actions-reverse	@popup-actions-toolbar-actions__reverse	@actions-toolbar-actions__reverse	true	false
@_popup-actions-toolbar-margin	@popup-actions-toolbar__margin	@actions-toolbar__margin	''	false
@_popup-actions-toolbar-padding	@popup-actions-toolbar__padding	@actions-toolbar__padding	''	false
@_popup-actions-toolbar-actions-margin	@popup-actions-toolbar-actions__margin	@actions-toolbar-actions__margin	''	false
@_popup-actions-toolbar-primary-actions-margin	@popup-actions-toolbar-actions-primary__margin	@actions-toolbar-actions-primary__margin	''	false
@_popup-actions-toolbar-secondary-actions-margin	@popup-actions-toolbar-actions-secondary__margin	@actions-toolbar-actions-secondary__margin	''	false
@_popup-actions-toolbar-actions-links-margin-top	@popup-actions-toolbar-actions-links__margin-top	@actions-toolbar-actions-links__margin-top	''	false
@_popup-actions-toolbar-primary-actions-links-margin-top	@popup-actions-toolbar-actions-links-primary__margin-top	@actions-toolbar-actions-links-primary__margin-top	''	false
@_popup-actions-toolbar-secondary-links-margin-top	@popup-actions-toolbar-actions-links-secondary__margin-top	@actions-toolbar-actions-links-secondary__margin-top	''	false

Window overlay variables

Mixin variable	Global variable	Default value	Allowed values	Comment
@_overlay-background	@overlay__background	#000	''	false
@_overlay-opacity	@overlay__opacity	.5	''	false
@_overlay-opacity-old	@overlay__opacity-old	50	''	false
@_overlay-fade	@overlay__fade	opacity .15s linear	''	false
@_overlay-z-index	@overlay__z-index	1000	''	value

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-count	@rating-icon__count	5	''	value
@_icon-font	@rating-icon__font	@icon-font	''	false
@_icon-font-size	@rating-icon__font-size	28px	''	false
@_icon-letter-spacing	@rating-icon__letter-spacing	-10px	''	false
@_icon-color	@rating-icon__color	#c7c7c7	''	false
@_icon-color-active	@rating-icon__active__color	#ff5601	''	false
@_label-hide	@rating-label__hide	false	true	false

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
@_tab-control-font-size	@tab-control__font-size	@font-size__base	''	false
@_tab-control-font-weight	@tab-control__font-weight	@font-weight__semibold	''	false
@_tab-control-font-style	@tab-control__font-style	false	''	false
@_tab-control-line-height	@tab-control__line-height	@tab-control__height	''	false
Tabs controls settings
---
@_tab-control-background-color	@tab-control__background-color	@panel__background-color	''	false
@_tab-control-color	@tab-control__color	@link__color	''	false
@_tab-control-text-decoration	@tab-control__text-decoration	none	''	false
@_tab-control-background-color-hover	@tab-control__hover__background-color	lighten(@tab-control__background-color, 5%)	''	false
@_tab-control-color-visited	@tab-control__color	@text__color__muted	''	false
@_tab-control-text-decoration-visited	@tab-control__color		''	false
@_tab-control-color-hover	@tab-control__hover__color	@tab-control__color	''	false
@_tab-control-text-decoration-hover	@tab-control__text-decoration	@tab-control__text-decoration	''	false
@_tab-control-background-color-active	@tab-control__active__background-color	lighten(@tab-control__background-color, 15%)	''	false
@_tab-control-color-active	@tab-control__active__color	@text__color	''	false
@_tab-control-text-decoration-active	@tab-control__text-decoration	@tab-control__text-decoration	''	false
@_tab-control-height	@tab-control__height	@indent__l	''	false
@_tab-control-margin-right	@tab-control__margin-right	@indent__xs	''	false
@_tab-control-padding-top	@tab-control__padding-top	@indent__xs	''	false
@_tab-control-padding-right	@tab-control__padding-right	@indent__base	''	false
@_tab-control-padding-bottom	@tab-control__padding-bottom	@tab-control__padding-bottom	''	false
@_tab-control-padding-left	@tab-control__padding-left	@tab-control__padding-left	''	false
@_tab-control-border-width	@tab-control__border-width	@border-width__base	''	false
@_tab-control-border-color	@tab-control__border-color	@border-color__base	''	false
Tab content settings
---
@_tab-content-background-color	@tab-content__background-color	@tab-control__active__background-color	''	false
@_tab-content-border-top-status	@tab-content__border-top-status	false	true	false
@_tab-content-border	@tab-content__border	@tab-control__border-width solid @tab-control__border-color	''	false
@_tab-content-margin-top	@tab-content__margin-top	@tab-control__height + @tab-control__border-width + @tab-control__padding-top + @tab-control__padding-bottom	''	false
@_tab-content-padding-top	@tab-content__padding-top	@indent__base	''	false
@_tab-content-padding-right	@tab-content__padding-right	@indent__base	''	false
@_tab-content-padding-bottom	@tab-content__padding-bottom	@tab-content__padding-top	''	false
@_tab-content-padding-left	@tab-content__padding-left	@tab-content__padding-right	''	false

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
@_accordion-control-font-size	@accordion-control__font-size	@font-size__l	''	false
@_accordion-control-font-style	@accordion-control__font-style	@tab-control__font-style	''	false
@_accordion-control-font-weight	@accordion-control__font-weight	@tab-control__font-weight	''	false
@_accordion-control-line-height	@accordion-control__line-height	@accordion-control__height	''	false
Accordion tabs controls settings
---
@_accordion-control-border-top	@accordion-control__border-top	@tab-control__border-width solid @tab-control__border-color	''	false
@_accordion-control-border-right	@accordion-control__border-right	@tab-control__border-width solid @tab-control__border-color	''	false
@_accordion-control-border-bottom	@accordion-control__border-bottom	@tab-control__border-width solid @tab-control__border-color	''	false
@_accordion-control-border-left	@accordion-control__border-left	@tab-control__border-width solid @tab-control__border-color	''	false
@_accordion-control-background-color	@accordion-control__background-color	@tab-control__background-color	''	false
@_accordion-control-color	@accordion-control__color	@tab-control__color	''	false
@_accordion-control-text-decoration	@accordion-control__text-decoration	@tab-control__text-decoration	''	false
@_accordion-control-color-visited	@accordion-control__color	@accordion-control__color	''	false
@_accordion-control-text-decoration-visited	@accordion-control__text-decoration	@accordion-control__text-decoration	''	false
@_accordion-control-background-color-hover	@accordion-control__hover__background-color	@tab-control__hover__background-color	''	false
@_accordion-control-color-hover	@accordion-control__hover__color	@tab-control__hover__color	''	false
@_accordion-control-text-decoration-hover	@accordion-control__hover__text-decoration	@tab-control__hover__text-decoration	''	false
@_accordion-control-background-color-active	@accordion-control__active__background-color	@tab-control__active__background-color	''	false
@_accordion-control-color-active	@accordion-control__active__color	@tab-control__active__color	''	false
@_accordion-control-text-decoration-active	@accordion-control__active__text-decoration	@tab-control__active__text-decoration	''	false
@_accordion-control-height	@accordion-control__height	@indent__xl	''	false
@_accordion-control-margin-bottom	@accordion-control__margin-bottom	@indent__xs	''	false
@_accordion-control-padding-top	@accordion-control__padding-top	@tab-control__padding-top	''	false
@_accordion-control-padding-right	@accordion-control__padding-right	@indent__base	''	false
@_accordion-control-padding-bottom	@accordion-control__padding-bottom	@tab-control__padding-bottom	''	false
@_accordion-control-padding-left	@accordion-control__padding-left	@accordion-control__padding-right	''	false
Accordion content settings
---
@_accordion-content-background-color	@accordion-content__background-color	@tab-control__active__background-color	''	false
@_accordion-content-border	@accordion-content__border	@tab-content__border	''	false
@_accordion-content-margin	@accordion-content__margin	0 0 @indent__xs	''	false
@_accordion-content-padding	@accordion-content__padding	@tab-content__padding-top @tab-content__padding-right @tab-content__padding-bottom @tab-content__padding-left	''	false

Table variables

The `.lib-table()` mixin variables

Mixin variable	Global variable	Default value	Allowed values	Comment
@_table-width	@table__width	100%	''	false
@_cell-padding-horizontal	@table-cell__padding-horizontal	@indent__s	''	false
@_cell-padding-vertical	@table-cell__padding-vertical	8px	''	false
@_table-margin-bottom	@table__margin-bottom	false	''	false

Table typography variables

The `.lib-table-typography()` mixin variables

Mixin variable	Default value	Allowed values	Comment
@_table-td-font-size	false	''	false
@_table-td-color	false	''	false
@_table-td-font-family	false	''	false
@_table-td-font-weight	false	''	false
@_table-td-line-height	false	''	false
@_table-td-font-style	false	''	false
@_table-th-font-size	false	''	false
@_table-th-color	@text__color__intense	''	false
@_table-th-font-family	false	''	false
@_table-th-font-weight	@font-weight__bold	''	false
@_table-th-line-height	false	''	false
@_table-th-font-style	false	''	false

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
@_table-caption-font-size	@table-caption__font-size	false	''	false
@_table-caption-color	@table-caption__color	false	''	false
@_table-caption-font-family	@table-caption__font-family	false	''	false
@_table-caption-font-weight	@table-caption__font-weight	false	''	false
@_table-caption-font-style	@table-caption__font-style	false	''	false
@_table-caption-line-height	@table-caption__line-height	false	''	false
@_table-caption-alignment	@table-caption__alignment	false	''	false
@_table-caption-margin-top	@table-caption__margin-top	false	''	false
@_table-caption-margin-bottom	@table-caption__margin-bottom	false	''	false

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
@_th-padding-right	@table-cell__padding-horizontal / 2	@_td-padding-right	''	false
@_th-padding-bottom	@table-cell__padding-vertical / 2	@_td-padding-top	''	false
@_th-padding-left	@table-cell__padding-horizontal / 2	@_td-padding-right	''	false
@_td-padding-top	@table-cell__padding-vertical / 2	@table-cell__padding-vertical / 2	''	false
@_td-padding-right	@table-cell__padding-horizontal / 2	@table-cell__padding-horizontal / 2	''	false
@_td-padding-bottom	@table-cell__padding-vertical / 2	@_td-padding-top	''	false
@_td-padding-left	@table-cell__padding-horizontal / 2	@_td-padding-right	''	false

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
@_table-head-background-color	@table-head__background-color	@table__background-color	''	false
@_table-foot-background-color	@table-foot__background-color	@table__background-color	''	false
@_table-body-th-background-color	@table-body-th__background-color	@table__background-color	''	false
@_table-td-background-color	@table-td__background-color	@table__background-color	''	false

Table borders customization variables

The `.lib-table-bordered()` mixin variables

Mixin variable	Global variable	Default value	Allowed values	Comment
@_table_type	-	normal	normal	horizontal
@_table_border-width	@table__border-width	@border-width__base	''	false
@_table_border-style	@table__border-style	solid	''	false
@_table_border-color	@table__border-color	@border-color__base	''	false

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
@_stripped-color	@table-cell-stripped__color	@text__color	''	false
@_stripped-direction	-	horizontal	horizontal	vertical
@_stripped-highlight	-	odd	odd	even

List of Global Variables

List of Global Variables

Typography

The .lib-typography-all() mixin variables

Base Typography

The .lib-typography__base() mixin variables

Headings

The .lib-typography-headings() mixin variables

Unordered and Ordered lists

The .lib-typography-lists() mixin variables

Code (inline and block)

The .lib-typography-code() mixin variables

Blockquotes

The .lib-typography-blockquote() mixin variables

Structure

Predefined variables for handle global Z-axis positioning

Actions Toolbar

The .lib-actions-toolbar() mixin variables

Breadcrumbs variables

The .lib-breadcrumbs() mixin variables

Button variables

The .lib-button() mixin variables

The .lib-button-primary() mixin variables

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

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

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

Drop-down variables

The .lib-dropdown() mixin variables

Split button variables

The .lib-dropdown-split() mixin variables

Forms variables

The .lib-form-fieldset() mixin variables

The .lib-form-field() mixin variables

The .lib-form-hasrequired() mixin variables

The .lib-form-element-input() mixin variables

The .lib-form-element-choise() mixin variables

The .lib-form-validation-note() mixin

Font icon variables

The .lib-icon-font() mixin variables

Icon with image or sprite variables

The .lib-icon-image() mixin variables

Icon position for an icon with image or sprite variables

The .lib-icon-image-position() mixin variables

Icon sprite position variables

The .lib-icon-sprite-position() mixin variables

Image/sprite icon size variables

The .lib-icon-image-size() mixin variables

Layout variables

Loader variables

The .lib-loader() mixin variables

Loading variables

The .lib-loading() mixin variables

Messages variables

The .lib-message() mixin variables

Pagination variables

The .lib-pager() mixin variables

Popup variables

The .lib-popup() mixin variables

Window overlay variables

Rating variables

The .lib-rating-vote() and .lib-rating-summary() mixin variables

Tabs variables

The .lib-data-tabs() mixin variables

Accordion variables

The .lib-data-accordion() mixin variables

Table variables

The .lib-table() mixin variables

Table typography variables

The .lib-table-typography() mixin variables

Table caption variables

The .lib-table-caption() mixin variables

Table cells resize variables

The .lib-table-resize() mixin variables

Table background variables

The .lib-table-background-color() mixin variables

Table borders customization variables

The .lib-table-bordered() mixin variables

Striped table variable

The .lib-table-striped() mixin variables

The `.lib-typography-all()` mixin variables

The `.lib-typography__base()` mixin variables

The `.lib-typography-headings()` mixin variables

The `.lib-typography-lists()` mixin variables

The `.lib-typography-code()` mixin variables

The `.lib-typography-blockquote()` mixin variables

The `.lib-actions-toolbar()` mixin variables

The `.lib-breadcrumbs()` mixin variables

The `.lib-button()` mixin variables

The `.lib-button-primary()` mixin variables

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

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

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

The `.lib-dropdown()` mixin variables

The `.lib-dropdown-split()` mixin variables

The `.lib-form-fieldset()` mixin variables

The `.lib-form-field()` mixin variables

The `.lib-form-hasrequired()` mixin variables

The `.lib-form-element-input() mixin variables`

The `.lib-form-element-choise()` mixin variables

The `.lib-form-validation-note()` mixin

The `.lib-icon-font()` mixin variables

The `.lib-icon-image()` mixin variables

The `.lib-icon-image-position()` mixin variables

The `.lib-icon-sprite-position()` mixin variables

The `.lib-icon-image-size()` mixin variables

The `.lib-loader()` mixin variables

The `.lib-loading()` mixin variables

The `.lib-message()` mixin variables

The `.lib-pager()` mixin variables

The `.lib-popup()` mixin variables

The `.lib-rating-vote()` and `.lib-rating-summary()` mixin variables

The `.lib-data-tabs()` mixin variables

The `.lib-data-accordion()` mixin variables

The `.lib-table()` mixin variables

The `.lib-table-typography()` mixin variables

The `.lib-table-caption()` mixin variables

The `.lib-table-resize()` mixin variables

The `.lib-table-background-color()` mixin variables

The `.lib-table-bordered()` mixin variables

The `.lib-table-striped()` mixin variables