.lib-typography-all() mixin. It accumulates all typography mixins and sets all typography for the theme. This mixin is included in the .lib-magento-reset() mixin. So, if you use this reset, you don't have to call basic typography separately. Also, you don't have to apply this mixin to any class, just call it globally.
//
// Additionally, Magento UI library provides number of mixins to customize typography parameters separately.
//
// ```html
// Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat Keyboard input vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
//////Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
// Aenean fermentum, elit eget tincidunt condimentum //
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
// #header h1 a {
// display: block;
// width: 300px;
// height: 80px;
// } Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
////
| Mixin variable | //Default value | //Comment | //
|---|---|---|
| Predefined font family and font colors | //||
| @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 | //
| @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-font-size() mixin calculates font-size in **rem** with fallback in **px**
//
// **Less code:**
// ```css
// .example-typography-1 {
// .lib-font-size(25);
// }
// ```
// **CSS result:**
// ```css
// .example-typography-1 {
// font-size: 25px;
// font-size: 2.5rem;
// }
// ```
//
// ```html
// HTML Ipsum Presents
// ``` .example { .lib-font-size(25); } // # Line-height mixin // // The.lib-line-height() mixin calculates line-height in **rem** with fallback in **px**
//
// **Less code:**
// ```css
// .example-line-height {
// .lib-line-height(30);
// }
// ```
// **CSS result:**
// ```css
// .example-line-height {
// line-height: 30px;
// line-height: 3rem;
// }
// ```
//
// ```html
// HTML Ipsum Presents
// ``` .example-line-height { .lib-line-height(30); } // # Word breaking mixin // // The.lib-wrap-words() mixin specifies word breaking rules. Background and block width are added to display this example.
//
// ```html
// // Supercalifragilisticexpialidocious This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. //
// ``` .example-word-wrap { .lib-wrap-words(); background: #ccc; width: 120px; } // # Font face mixin // // The.lib-font-face() mixin is used to set up custom font.
//
// ```css
// .lib-font-face(
// @family-name,
// @font-path,
// @font-weight: normal,
// @font-style: normal
// ) {
// @font-face {
// font-family: @family-name;
// src: url('@{font-path}.woff2') format('woff2'),
// url('@{font-path}.woff') format('woff');
// font-weight: @font-weight;
// font-style: @font-style;
// }
// }
// ```
//
// # Text overflow mixin
//
// The .lib-text-overflow() mixin is used to add ellipsis ("...") when a text overflows the containing element. Background and block width are added to display this example.
//
// ```html
// // Supercalifragilisticexpialidocious //
// ``` .example-text-overflow { .lib-text-overflow(); background: #ccc; width: 120px; } // # Text hide // // The.lib-text-hide() mixin hides a text of the element the mixin is applied to.
//
// ```html
// // Text to hide //
// ``` .example-text-hide { .lib-text-hide(); } // # Hyphens // // The.lib-hyphens() mixin sets hyphens CSS property with browser prefixes. It accepts the @mode variable with following accessible values:
//
// ```css
// none
// manual
// auto
// ```
//
// Here are two examples with different setup:
//
// ```html
// // An extremely long English word //
//// An extremely long English word //
// ``` .example-hyphens { .lib-hyphens(); } .example-hyphens-none { .lib-hyphens(none); } // # Font style and color // // The.lib-typography() mixin is used to set font style and font color of the element.
//
// ```html
//
// An example of using .lib-typography() mixin
//
// ```
.example-typography {
.lib-typography(30, #fc0, @font-family__monospace, 500, 1.2, italic);
}
// # Font style mixin variables
// //
| Mixin variable | //Default value | //Allowed values | //Comment | //
|---|---|---|---|
| @_color | //@text__color | //'' | false | value | //Text color | //
| @_font-size | //@font-size__base | //'' | false | value | //Font size | //
| @_font-family | //@font-family__base | //'' | false | value | //Font family | //
| @_font-weight | //@font-weight__regular | //'' | false | value | //Font weight | //
| @_font-style | //@font-style__base | //'' | false | value | //Font style | //
| @_line-height | //@line-height__base | //'' | false | value | //Line height | //
.lib-list-reset-styles() mixin resets browser default list style and sets its margins and paddings.
//
// **Default list style:**
// ```html
// .lib-list-reset-styles() mixin applied:**
// ```html
// //
| Mixin variable | //Default value | //Allowed values | //Comment | //
|---|---|---|---|
| @_margin | //0 | //'' | false | value | //List margin | //
| @_padding | //0 | //'' | false | value | //List padding | //
.lib-list-inline() mixin resets browser default list style and sets its list items display property to display: inline-block.
//
// **Default list style:**
// ```html
// .lib-list-inline() mixin applied:**
// ```html
// .lib-link() mixin is used to set styles for all links states.
//
// ```html
// Link with global variables customization
// ```
// ```html
// Link with custom styles
// ```
.example-link-default {
.lib-link();
}
.example-link {
.lib-link(@_link-color: green, @_link-color-hover: orange, @_link-text-decoration-hover: none );
}
// # Link styling mixin variables
// //
| Mixin variable | //Default value | //Allowed values | //Comment | //
|---|---|---|---|
| @_link-color | //#1979c3 | //'' | false | value | //Default link color | //
| @_link-text-decoration | //underline | //'' | false | value | //Default link text decoration | //
| @_link-color-visited | //#800080 | //'' | false | value | //Visited link color | //
| @_link-text-decoration-visited | //underline | //'' | false | value | //Visited link text decoration | //
| @_link-color-hover | //#006bb4 | //'' | false | value | //Hovered link color | //
| @_link-text-decoration-hover | //underline | //'' | false | value | //Hovered link text decoration | //
| @_link-color-active | //#ff5501 | //'' | false | value | //Active link color | //
| @_link-text-decoration-active | //underline | //'' | false | value | //Active link text decoration | //
.lib-heading() mixin is used to set heading styles to an element. To use this mixin, set the type of heading that you want to inherit styles from. The mixin uses global heading variables.
//
// ```html
// .lib-typography__base() mixin applyes basic styles from _variables.less to the following elements:
//
// ```css
// html
// body
// p
// abbr
// b
// strong
// em
// i
// mark
// small
// .small
// hr
// sub,
// sup
// dfn
// ```
//
// ```html
// Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
// ``` .lib-typography__base(); // # Base typography 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 is used to style all H1-H6 headings. This mixin uses settings from global variables list.
//
// ```html
// //
| 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-links() mixin is used to apply default styles to all <a> elements and elements with class="alink". This mixin uses settings from global variables list.
//
// ```html
// Link with global variables customization
// ```
// ```html
// Span styled as a link
// ```
.lib-typography-links();
// # Typography lists mixin
//
// The .lib-typography-lists() mixin is used to apply styles to all ordered, unordered, and definition lists. This mixin uses settings from global variables list.
//
// ```html
// //
| 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 is used to apply styles to the following code elements:
//
// ```css
// code
// kbd
// pre
// samp
// ```
//
// This mixin uses settings from global variables list.
//
// ```html
// Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.
// #header h1 a {
// display: block;
// width: 300px;
// height: 80px;
// } Vestibulum tortor quam, feugiat Keyboard input vitae, ultricies eget, tempor sit amet, ante.
// ``` .lib-typography-code(); // # 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 is used to apply styles to blockquote elements. This mixin uses settings from global variables list.
//
// ```html
// //// ``` .lib-typography-blockquote(); // # Typography blockquote mixin variables //Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
// Author quotes //
//
| 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 | //