spawntree
/
magento-test
2
0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
1 коммит
1 ветка
70 MiB
 
 
 
 
 
 
Дерево: 41ccc32b5d
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из '41ccc32b5d'
${ noResults }
magento-test/lib/web/css/source/lib/_typography.less

580 строки
14 KiB
Исходник Вина История 

  1. // /**

  2. //  * Copyright © Magento, Inc. All rights reserved.

  3. //  * See COPYING.txt for license details.

  4. //  */

  5. 

  6. //

  7. //  Typography

  8. //  _____________________________________________

  9. 

  10. .lib-font-face(

  11.     @family-name,

  12.     @font-path,

  13.     @font-format: false,

  14.     @font-weight: normal,

  15.     @font-style: normal,

  16.     @font-display: auto,

  17.     @font-type: false

  18. ) when (@font-format = false) {

  19.     @font-face {

  20.         font-family: @family-name;

  21.         src: url('@{font-path}.woff2') format('woff2'),

  22.         url('@{font-path}.woff') format('woff');

  23.         font-weight: @font-weight;

  24.         font-style: @font-style;

  25.         font-display: @font-display;

  26.     }

  27. }

  28. 

  29. // When need specify font format also should define font type include

  30. // The available types for @font-type are 'woff', 'woff2', 'truetype', 'opentype', 'embedded-opentype', and 'svg'

  31. // Enclose it in single quotes

  32. //  _____________________________________________

  33. 

  34. .lib-font-face(

  35.     @family-name,

  36.     @font-path,

  37.     @font-format: false,

  38.     @font-weight: normal,

  39.     @font-style: normal,

  40.     @font-display: auto,

  41.     @font-type: false

  42. ) when not (@font-format = false) and not (@font-type = false) {

  43.     @font-face {

  44.         font-family: @family-name;

  45.         src: url('@{font-path}.@{font-format}') format(@font-type);

  46.         font-weight: @font-weight;

  47.         font-style: @font-style;

  48.         font-display: @font-display;

  49.     }

  50. }

  51. 

  52. //  Rem font size

  53. .lib-font-size(@sizeValue) when not (ispercentage(@sizeValue)) and not (@sizeValue = false) and (isunit(@sizeValue, @font-size-unit)) {

  54.     .lib-css(font-size, @sizeValue);

  55. }

  56. 

  57. .lib-font-size(@sizeValue) when not (ispercentage(@sizeValue)) and not (@sizeValue = false) and (isunit(@sizeValue, em)) {

  58.     .lib-css(font-size, @sizeValue);

  59. }

  60. 

  61. .lib-font-size(@sizeValue) when not (ispercentage(@sizeValue)) and not (@sizeValue = false) and not (isunit(@sizeValue, em)) and not (isunit(@sizeValue, @font-size-unit)) {

  62.     .lib-font-size-value(@sizeValue);

  63.     .lib-css(font-size, @fontValue);

  64. }

  65. 

  66. //  Rem line height

  67. .lib-line-height(@heightValue) when not (@heightValue = false) and not (@heightValue = normal) and not (ispercentage(@heightValue)) {

  68.     .lib-font-size-value(@heightValue);

  69.     .lib-css(line-height, @fontValue);

  70. }

  71. 

  72. .lib-line-height(@heightValue) when (ispercentage(@heightValue)) and not (@heightValue = false) {

  73.     .lib-css(line-height, @heightValue);

  74. }

  75. 

  76. .lib-line-height(@heightValue) when (@heightValue = normal) {

  77.     .lib-css(line-height, @heightValue);

  78. }

  79. 

  80. .lib-wrap-words() {

  81.     overflow-wrap: break-word;

  82.     word-wrap: break-word;

  83.     -ms-word-break: break-all;

  84.     word-break: break-word;

  85.     .lib-hyphens();

  86. }

  87. 

  88. .lib-text-overflow() {

  89.     overflow: hidden;

  90.     text-overflow: ellipsis;

  91.     white-space: nowrap;

  92. }

  93. 

  94. .lib-text-hide() {

  95.     background-color: transparent;

  96.     border: 0;

  97.     color: transparent;

  98.     font: ~'0/0' a;

  99.     text-shadow: none;

  100. }

  101. 

  102. //  Optional hyphenation

  103. .lib-hyphens(@mode: auto) {

  104.     -webkit-hyphens: @mode;

  105.        -moz-hyphens: @mode;

  106.         -ms-hyphens: @mode; // IE10+

  107.             hyphens: @mode;

  108. }

  109. 

  110. .lib-typography(

  111.     @_font-size: @font-size__base,

  112.     @_color: @text__color,

  113.     @_font-family: @font-family__base,

  114.     @_font-weight: @font-weight__regular,

  115.     @_line-height: @line-height__base,

  116.     @_font-style: @font-style__base

  117. ) {

  118.     .lib-css(color, @_color);

  119.     .lib-css(font-family, @_font-family);

  120.     .lib-css(font-style, @_font-style);

  121.     .lib-css(font-weight, @_font-weight);

  122.     .lib-css(line-height, @_line-height);

  123.     .lib-font-size(@_font-size);

  124. }

  125. 

  126. .lib-list-reset-styles(@_margin: 0, @_padding: 0) {

  127.     .lib-css(margin, @_margin);

  128.     .lib-css(padding, @_padding);

  129.     list-style: none none;

  130. }

  131. 

  132. .lib-list-inline() {

  133.     .lib-list-reset-styles();

  134. 

  135.     > li {

  136.         display: inline-block;

  137.         vertical-align: top;

  138.     }

  139. }

  140. 

  141. .lib-link(

  142.     @_link-color: @link__color,

  143.     @_link-text-decoration: @link__text-decoration,

  144.     @_link-color-visited: @link__visited__color,

  145.     @_link-text-decoration-visited: @link__visited__text-decoration,

  146.     @_link-color-hover: @link__hover__color,

  147.     @_link-text-decoration-hover: @link__hover__text-decoration,

  148.     @_link-color-active: @link__active__color,

  149.     @_link-text-decoration-active: @link__active__text-decoration

  150. ) {

  151.     .lib-css(color, @_link-color);

  152.     .lib-css(text-decoration, @_link-text-decoration);

  153. 

  154.     &:visited {

  155.         .lib-css(color, @_link-color-visited);

  156.         .lib-css(text-decoration, @_link-text-decoration-visited);

  157.     }

  158. 

  159.     &:hover {

  160.         .lib-css(color, @_link-color-hover);

  161.         .lib-css(text-decoration, @_link-text-decoration-hover);

  162.     }

  163. 

  164.     &:active {

  165.         .lib-css(color,@_link-color-active);

  166.         .lib-css(text-decoration, @_link-text-decoration-active);

  167.     }

  168. }

  169. 

  170. .lib-heading(@_heading_level: h1) {

  171.     @_font-color: "@{_heading_level}__font-color";

  172.     @_font-size: "@{_heading_level}__font-size";

  173.     @_font-family: "@{_heading_level}__font-family";

  174.     @_font-weight: "@{_heading_level}__font-weight";

  175.     @_line-height: "@{_heading_level}__line-height";

  176.     @_font-style: "@{_heading_level}__font-style";

  177.     @_margin-top: "@{_heading_level}__margin-top";

  178.     @_margin-bottom: "@{_heading_level}__margin-bottom";

  179.     .lib-typography(

  180.         @@_font-size,

  181.         @@_font-color,

  182.         @@_font-family,

  183.         @@_font-weight,

  184.         @@_line-height,

  185.         @@_font-style

  186.     );

  187. 

  188.     & {

  189.         .lib-font-size-value(@@_margin-top);

  190.         .lib-css(margin-top, @fontValue);

  191.     }

  192. 

  193.     & {

  194.         .lib-font-size-value(@@_margin-bottom);

  195.         .lib-css(margin-bottom, @fontValue);

  196.     }

  197. }

  198. 

  199. //

  200. //  Base typography

  201. //  ---------------------------------------------

  202. 

  203. .lib-typography__base(

  204.     @_abbr-border-color: @abbr__border-color,

  205.     @_dfn-font-style: @font-style__emphasis,

  206.     @_emphasis-font-style: @font-style__emphasis,

  207.     @_hr-border-color: @hr__border-color,

  208.     @_hr-border-style: @hr__border-style,

  209.     @_hr-border-width: @hr__border-width,

  210.     @_hr-margin-bottom: @line-height__computed,

  211.     @_hr-margin-top: @line-height__computed,

  212.     @_mark-background-color: @mark__background-color,

  213.     @_mark-color: @mark__color,

  214.     @_p-margin-bottom: @p__margin-bottom,

  215.     @_p-margin-top: @p__margin-top,

  216.     @_root-font-size: @root__font-size,

  217.     @_small-font-size: @font-size__s,

  218.     @_strong-font-weight: @font-weight__bold,

  219.     @_sub-sup-font-size: (@font-size__xs/@font-size__base)*100%

  220. ) {

  221.     html {

  222.         .lib-css(font-size, @_root-font-size);

  223.         -webkit-text-size-adjust: 100%;

  224.         -ms-text-size-adjust: 100%;

  225.         font-size-adjust: 100%;

  226.     }

  227. 

  228.     body {

  229.         .lib-typography();

  230.     }

  231. 

  232.     p {

  233.         & {

  234.             .lib-font-size-value(@_p-margin-top);

  235.             .lib-css(margin-top, @fontValue);

  236.         }

  237. 

  238.         & {

  239.             .lib-font-size-value(@_p-margin-bottom);

  240.             .lib-css(margin-bottom, @fontValue);

  241.         }

  242.     }

  243. 

  244.     //  Abbreviations and acronyms

  245.     abbr[title] {

  246.         .lib-css(border-bottom, 1px dotted @_abbr-border-color);

  247.         cursor: help;

  248.     }

  249. 

  250.     b,

  251.     strong {

  252.         .lib-css(font-weight, @_strong-font-weight);

  253.     }

  254. 

  255.     em,

  256.     i {

  257.         .lib-css(font-style, @_emphasis-font-style);

  258.     }

  259. 

  260.     mark {

  261.         .lib-css(background, @_mark-background-color);

  262.         .lib-css(color, @_mark-color);

  263.     }

  264. 

  265.     small,

  266.     .small {

  267.         .lib-css(font-size, @_small-font-size);

  268.     }

  269. 

  270.     hr {

  271.         border: 0;

  272.         .lib-css(border-top, @_hr-border-width @_hr-border-style @_hr-border-color);

  273.         .lib-css(margin-bottom, @_hr-margin-bottom);

  274.         .lib-css(margin-top, @_hr-margin-top);

  275.     }

  276. 

  277.     sub,

  278.     sup {

  279.         .lib-css(font-size, @_sub-sup-font-size);

  280.         line-height: 0;

  281.         position: relative;

  282.         vertical-align: baseline;

  283.     }

  284. 

  285.     sup {

  286.         top: -.5em;

  287.     }

  288. 

  289.     sub {

  290.         bottom: -.25em;

  291.     }

  292. 

  293.     dfn {

  294.         .lib-css(font-style, @_dfn-font-style);

  295.     }

  296. }

  297. 

  298. //

  299. //  Headings

  300. //  ---------------------------------------------

  301. 

  302. .lib-typography-headings(

  303.     @_heading-small-color: @heading__small-color,

  304.     @_heading-small-line-height: @heading__small-line-height,

  305.     @_heading-small-size: @heading__small-size

  306. ) {

  307.     h1 {

  308.         .lib-heading(h1);

  309.     }

  310. 

  311.     h2 {

  312.         .lib-heading(h2);

  313.     }

  314. 

  315.     h3 {

  316.         .lib-heading(h3);

  317.     }

  318. 

  319.     h4 {

  320.         .lib-heading(h4);

  321.     }

  322. 

  323.     h5 {

  324.         .lib-heading(h5);

  325.     }

  326. 

  327.     h6 {

  328.         .lib-heading(h6);

  329.     }

  330. 

  331.     h1, h2, h3, h4, h5, h6 {

  332.         small,

  333.         .small {

  334.             .lib-typography(

  335.             @_heading-small-size,

  336.             @_heading-small-color,

  337.             @_line-height: @_heading-small-line-height

  338.             );

  339.         }

  340.     }

  341. }

  342. 

  343. 

  344. //

  345. //  Links

  346. //  ---------------------------------------------

  347. 

  348. .lib-typography-links() {

  349.     a,

  350.     .alink {

  351.         .lib-link();

  352.     }

  353. }

  354. 

  355. //

  356. //  Unordered and Ordered lists

  357. //  ---------------------------------------------

  358. 

  359. .lib-typography-lists(

  360.     @_list-margin-bottom: @list__margin-bottom,

  361.     @_list-margin-top: @list__margin-top,

  362.     @_list-item-margin-bottom: @list-item__margin-bottom,

  363.     @_list-item-margin-top: @list-item__margin-top,

  364.     @_dl-margin-bottom: @dl__margin-bottom,

  365.     @_dl-margin-top: @dl__margin-top,

  366.     @_dd-margin-bottom: @dd__margin-bottom,

  367.     @_dd-margin-top: @dd__margin-top,

  368.     @_dt-font-weight: @dt__font-weight,

  369.     @_dt-margin-bottom: @dt__margin-bottom,

  370.     @_dt-margin-top: @dt__margin-top

  371. ) {

  372.     ul,

  373.     ol {

  374.         & {

  375.             .lib-font-size-value(@_list-margin-top);

  376.             .lib-css(margin-top, @fontValue);

  377.         }

  378. 

  379.         & {

  380.             .lib-font-size-value(@_list-margin-bottom);

  381.             .lib-css(margin-bottom, @fontValue);

  382.         }

  383. 

  384.         > li {

  385.             & {

  386.                 .lib-font-size-value(@_list-item-margin-top);

  387.                 .lib-css(margin-top, @fontValue);

  388.             }

  389. 

  390.             & {

  391.                 .lib-font-size-value(@_list-item-margin-bottom);

  392.                 .lib-css(margin-bottom, @fontValue);

  393.             }

  394.         }

  395. 

  396.         ul,

  397.         ol {

  398.             margin-bottom: 0;

  399.         }

  400.     }

  401. 

  402.     dl {

  403.         .lib-css(margin-bottom, @_dl-margin-bottom);

  404.         .lib-css(margin-top, @_dl-margin-top);

  405.     }

  406. 

  407.     dt {

  408.         .lib-css(font-weight, @_dt-font-weight);

  409.         .lib-css(margin-bottom, @_dt-margin-bottom);

  410.         .lib-css(margin-top, @_dt-margin-top);

  411.     }

  412. 

  413.     dd {

  414.         .lib-css(margin-bottom, @_dd-margin-bottom);

  415.         .lib-css(margin-top, @_dd-margin-top);

  416.         margin-left: 0;

  417.     }

  418. }

  419. 

  420. //

  421. //  Code (inline and block)

  422. //  ---------------------------------------------

  423. 

  424. .lib-typography-code(

  425.     @_font-family-monospace: @font-family__monospace,

  426.     @_code-background-color: @code__background-color,

  427.     @_code-color: @code__color,

  428.     @_code-font-size: @code__font-size,

  429.     @_code-padding: @code__padding,

  430.     @_kbd-background-color: @kbd__background-color,

  431.     @_kbd-color: @kbd__color,

  432.     @_kbd-font-size: @code__font-size,

  433.     @_kbd-padding: @code__padding,

  434.     @_pre-background-color: @pre__background-color,

  435.     @_pre-border-color: @pre__border-color,

  436.     @_pre-border-width: @pre__border-width,

  437.     @_pre-color: @pre__color,

  438.     @_pre-font-size: @code__font-size,

  439.     @_pre-line-height: @line-height__base,

  440.     @_pre-margin: 0 0 @indent__s,

  441.     @_pre-padding: @indent__s

  442. ) {

  443.     code,

  444.     kbd,

  445.     pre,

  446.     samp {

  447.         .lib-css(font-family, @_font-family-monospace);

  448.     }

  449. 

  450.     //  Inline code

  451.     code {

  452.         .lib-css(background, @_code-background-color);

  453.         .lib-css(color, @_code-color);

  454.         .lib-css(padding, @_code-padding);

  455.         .lib-font-size(@_code-font-size);

  456.         white-space: nowrap;

  457.     }

  458. 

  459.     //  User input typically entered via keyboard

  460.     kbd {

  461.         .lib-css(background, @_kbd-background-color);

  462.         .lib-css(color, @_kbd-color);

  463.         .lib-css(padding, @_kbd-padding);

  464.         .lib-font-size(@_kbd-font-size);

  465.     }

  466. 

  467.     //  Blocks of code

  468.     pre {

  469.         .lib-css(background, @_pre-background-color);

  470.         .lib-css(border, @_pre-border-width solid @_pre-border-color);

  471.         .lib-css(color, @_pre-color);

  472.         .lib-css(line-height, @_pre-line-height);

  473.         .lib-css(margin, @_pre-margin);

  474.         .lib-css(padding, @_pre-padding);

  475.         .lib-font-size(@_pre-font-size);

  476.         display: block;

  477.         word-wrap: break-word;

  478. 

  479.         code {

  480.             background-color: transparent;

  481.             border-radius: 0;

  482.             color: inherit;

  483.             font-size: inherit;

  484.             padding: 0;

  485.             white-space: pre-wrap;

  486.         }

  487.     }

  488. }

  489. 

  490. //

  491. //  Blockquotes

  492. //  ---------------------------------------------

  493. 

  494. .lib-typography-blockquote(

  495.     @_blockquote-border-color: @blockquote__border-color,

  496.     @_blockquote-border-width: @blockquote__border-width,

  497.     @_blockquote-font-size: @blockquote__font-size,

  498.     @_blockquote-font-style: @blockquote__font-style,

  499.     @_blockquote-margin: @blockquote__margin,

  500.     @_blockquote-padding: @blockquote__padding,

  501.     @_blockquote-small-before-content: @blockquote__content-before,

  502.     @_blockquote-small-color: @blockquote-small__color,

  503.     @_blockquote-small-font-size: @blockquote-small__font-size,

  504.     @_blockquote-small-line-height: @line-height__base,

  505.     @_blockquote-cite: @cite__font-style,

  506.     @_cite: @cite__font-style

  507. ) {

  508.     blockquote {

  509.         .lib-css(border-left, @_blockquote-border-width solid @_blockquote-border-color);

  510.         .lib-css(margin, @_blockquote-margin);

  511.         .lib-css(padding, @_blockquote-padding);

  512.         .lib-typography(

  513.             @_font-size: @_blockquote-font-size,

  514.             @_font-style: @_blockquote-font-style

  515.         );

  516. 

  517.         p,

  518.         ul,

  519.         ol {

  520.             &:last-child {

  521.                 margin-bottom: 0;

  522.             }

  523.         }

  524. 

  525.         footer,

  526.         small,

  527.         .small {

  528.             .lib-css(color, @_blockquote-small-color);

  529.             .lib-css(line-height, @_blockquote-small-line-height);

  530.             .lib-font-size(@_blockquote-small-font-size);

  531.             display: block;

  532. 

  533.             &:before {

  534.                 .lib-css(content, @_blockquote-small-before-content);

  535.             }

  536.         }

  537. 

  538.         cite {

  539.             .lib-css(font-style, @_blockquote-cite);

  540.         }

  541.     }

  542. 

  543.     //  Quotes

  544.     blockquote {

  545.         &:before,

  546.         &:after {

  547.             content: '';

  548.         }

  549.     }

  550. 

  551.     q {

  552.         quotes: none;

  553. 

  554.         &:before,

  555.         &:after {

  556.             content: '';

  557.             content: none;

  558.         }

  559.     }

  560. 

  561.     //  Undo browser default styling

  562.     cite {

  563.         .lib-css(font-style, @_cite);

  564.     }

  565. }

  566. 

  567. //

  568. //  All typography

  569. //  ---------------------------------------------

  570. 

  571. .lib-typography-all() {

  572.     .lib-typography__base();

  573.     .lib-typography-headings();

  574.     .lib-typography-links();

  575.     .lib-typography-lists();

  576.     .lib-typography-code();

  577.     .lib-typography-blockquote();

  578. }