SHARE
TWEET

_extend.less

a guest Feb 19th, 2020 101 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // /**
  2. //  * Copyright © Magento, Inc. All rights reserved.
  3. //  * See COPYING.txt for license details.
  4. //  */
  5.  
  6. //
  7. //  Styles Extends
  8. //  _____________________________________________
  9.  
  10. //
  11. //  List default styles reset
  12. //  ---------------------------------------------
  13.  
  14. & when (@media-common = true) {
  15.     .abs-reset-list {
  16.         .lib-list-reset-styles();
  17.         > li {
  18.             margin: 0;
  19.         }
  20.     }
  21. }
  22.  
  23. //
  24. //  Link as a button
  25. //  ---------------------------------------------
  26.  
  27. & when (@media-common = true) {
  28.     .abs-action-link-button {
  29.         .lib-button();
  30.         .lib-link-as-button();
  31.         .lib-css(border-radius, @button__border-radius);
  32.     }
  33. }
  34.  
  35. //
  36. //  Product options list
  37. //  ---------------------------------------------
  38.  
  39. @abs-product-options-list: {
  40.     dt {
  41.         clear: left;
  42.         float: left;
  43.         margin: 0 @indent__s @indent__xs 0;
  44.  
  45.         &:after {
  46.             content: ': ';
  47.         }
  48.     }
  49.  
  50.     dd {
  51.         display: inline-block;
  52.         float: left;
  53.         margin: 0 0 @indent__xs;
  54.     }
  55. };
  56.  
  57. & when (@media-common = true) {
  58.     .abs-product-options-list {
  59.         @abs-product-options-list();
  60.     }
  61. }
  62.  
  63. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  64.     .abs-product-options-list-desktop {
  65.         @abs-product-options-list();
  66.     }
  67. }
  68.  
  69. //
  70. //  Button reset width, floats, margins
  71. //  ---------------------------------------------
  72.  
  73. @abs-button-responsive: {
  74.     .lib-button-responsive();
  75. };
  76.  
  77. & when (@media-common = true) {
  78.     .abs-button-responsive {
  79.         @abs-button-responsive();
  80.     }
  81. }
  82.  
  83. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  84.     .abs-button-desktop {
  85.         width: auto;
  86.     }
  87. }
  88.  
  89. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  90.     .abs-button-responsive-smaller {
  91.         @abs-button-responsive();
  92.     }
  93. }
  94.  
  95. //
  96. //  Blocks in 2 columns
  97. //  ---------------------------------------------
  98.  
  99. @abs-blocks-2columns: {
  100.     width: 48.8%;
  101.  
  102.     &:nth-child(odd) {
  103.         clear: left;
  104.         float: left;
  105.     }
  106.  
  107.     &:nth-child(even) {
  108.         float: right;
  109.     }
  110. };
  111.  
  112. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  113.     .abs-blocks-2columns {
  114.         @abs-blocks-2columns();
  115.     }
  116. }
  117.  
  118. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
  119.     .abs-blocks-2columns-s {
  120.         @abs-blocks-2columns();
  121.     }
  122. }
  123.  
  124. //
  125. //  Reset image alignment in container
  126. //  ---------------------------------------------
  127.  
  128. & when (@media-common = true) {
  129.     .abs-reset-image-wrapper {
  130.         height: auto;
  131.         padding: 0 !important;
  132.  
  133.         .product-image-photo {
  134.             position: static;
  135.         }
  136.     }
  137. }
  138.  
  139. //
  140. //  Adaptive images
  141. //  ---------------------------------------------
  142.  
  143. & when (@media-common = true) {
  144.     .abs-adaptive-images {
  145.         display: block;
  146.         height: auto;
  147.         max-width: 100%;
  148.     }
  149.  
  150.     .abs-adaptive-images-centered {
  151.         display: block;
  152.         height: auto;
  153.         margin: 0 auto;
  154.         max-width: 100%;
  155.     }
  156. }
  157.  
  158. //
  159. //  Title for login blocks
  160. //  ---------------------------------------------
  161.  
  162. & when (@media-common = true) {
  163.     .abs-login-block-title {
  164.         strong {
  165.             font-weight: @font-weight__heavier;
  166.         }
  167.  
  168.         .lib-font-size(18);
  169.         border-bottom: 1px solid @secondary__color;
  170.         margin-bottom: 15px;
  171.         padding-bottom: 12px;
  172.     }
  173. }
  174.  
  175. //
  176. //  Abstract block title
  177. //  ---------------------------------------------
  178.  
  179. & when (@media-common = true) {
  180.     .abs-block-title {
  181.         margin-bottom: 15px;
  182.  
  183.         > strong {
  184.             .lib-heading(h3);
  185.         }
  186.     }
  187. }
  188.  
  189. //
  190. //  Account blocks
  191. //  ---------------------------------------------
  192.  
  193. & when (@media-common = true) {
  194.     .abs-account-blocks {
  195.         .block-title {
  196.             &:extend(.abs-block-title all);
  197.  
  198.             > .action {
  199.                 margin-left: 15px;
  200.             }
  201.         }
  202.  
  203.         .box-title {
  204.             display: inline-block;
  205.             margin: 0 0 @indent__xs;
  206.  
  207.             > span {
  208.                 .lib-heading(h4);
  209.             }
  210.  
  211.             > .action {
  212.                 font-weight: @font-weight__regular;
  213.                 margin-left: @indent__s;
  214.             }
  215.         }
  216.  
  217.         .block-content {
  218.             p:last-child {
  219.                 margin-bottom: 0;
  220.             }
  221.  
  222.             .box {
  223.                 margin-bottom: @indent__base;
  224.             }
  225.         }
  226.     }
  227. }
  228.  
  229. //
  230. //  Simple Dropdown
  231. //  ---------------------------------------------
  232.  
  233. & when (@media-common = true) {
  234.     .abs-dropdown-simple {
  235.         .lib-dropdown(
  236.             @_dropdown-list-item-padding: 5px 5px 5px 23px,
  237.             @_dropdown-list-min-width: 200px,
  238.             @_icon-font-margin: 0 0 0 5px,
  239.             @_icon-font-vertical-align: middle
  240.         );
  241.     }
  242. }
  243.  
  244. //
  245. //  Input quantity
  246. //  ---------------------------------------------
  247.  
  248. & when (@media-common = true) {
  249.     .abs-input-qty {
  250.         text-align: center;
  251.         width: 47px;
  252.     }
  253. }
  254.  
  255. //
  256. //  Margin for blocks & widgets
  257. //  ---------------------------------------------
  258.  
  259. & when (@media-common = true) {
  260.     .abs-margin-for-blocks-and-widgets {
  261.         margin-bottom: @indent__xl;
  262.     }
  263. }
  264.  
  265. //
  266. //  Remove button for blocks
  267. //  ---------------------------------------------
  268.  
  269. & when (@media-common = true) {
  270.     .abs-remove-button-for-blocks {
  271.         .lib-icon-font(
  272.             @icon-remove,
  273.             @_icon-font-size: 26px,
  274.             @_icon-font-line-height: 15px,
  275.             @_icon-font-text-hide: true,
  276.             @_icon-font-color: @color-gray19,
  277.             @_icon-font-color-hover: @color-gray19,
  278.             @_icon-font-color-active: @color-gray19
  279.         );
  280.     }
  281. }
  282.  
  283. //
  284. //  Product link
  285. //  ---------------------------------------------
  286.  
  287. & when (@media-common = true) {
  288.     .abs-product-link {
  289.         font-weight: @font-weight__regular;
  290.  
  291.         > a {
  292.             .lib-link(
  293.                 @_link-color: @product-name-link__color,
  294.                 @_link-text-decoration: @product-name-link__text-decoration,
  295.                 @_link-color-visited: @product-name-link__color__visited,
  296.                 @_link-text-decoration-visited: @product-name-link__text-decoration__visited,
  297.                 @_link-color-hover: @product-name-link__color__hover,
  298.                 @_link-text-decoration-hover: @product-name-link__text-decoration__hover,
  299.                 @_link-color-active: @product-name-link__color__active,
  300.                 @_link-text-decoration-active: @product-name-link__text-decoration__active
  301.             );
  302.         }
  303.     }
  304. }
  305.  
  306. //
  307. //  Reset left margin
  308. //  ---------------------------------------------
  309.  
  310. @abs-reset-left-margin: {
  311.     margin-left: 0;
  312. };
  313.  
  314. & when (@media-common = true) {
  315.     .abs-reset-left-margin {
  316.         @abs-reset-left-margin();
  317.     }
  318. }
  319.  
  320. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  321.     .abs-reset-left-margin-desktop {
  322.         @abs-reset-left-margin();
  323.     }
  324. }
  325.  
  326. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
  327.     .abs-reset-left-margin-desktop-s {
  328.         @abs-reset-left-margin();
  329.     }
  330. }
  331.  
  332. //
  333. //  Action with icon remove with text
  334. //  ---------------------------------------------
  335.  
  336. & when (@media-common = true) {
  337.     .abs-action-remove {
  338.         &:extend(.abs-action-button-as-link all);
  339.         left: @indent__s;
  340.         margin-left: 70%;
  341.         position: absolute;
  342.         top: 31px;
  343.         width: auto;
  344.     }
  345. }
  346.  
  347. //
  348. //  Action with icon remove with text for desktop
  349. //  ---------------------------------------------
  350.  
  351. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  352.     .abs-action-remove-desktop when not (@form-field-type-label-inline__width = false) and not (@form-field-type-label-inline__width = '') {
  353.         margin-left: @form-field-type-label-inline__width + 50%;
  354.         top: 6px;
  355.     }
  356. }
  357.  
  358. //
  359. //  Add Recipient
  360. //  ---------------------------------------------
  361.  
  362. & when (@media-common = true) {
  363.     .abs-add-fields {
  364.         .fieldset {
  365.             margin-bottom: 50px;
  366.  
  367.             .field {
  368.                 &:not(.choice) {
  369.                     .control {
  370.                         width: 70%;
  371.                     }
  372.                 }
  373.             }
  374.  
  375.             .actions-toolbar {
  376.                 &:not(:first-child) {
  377.                     &:extend(.abs-add-clearfix all);
  378.  
  379.                     > .secondary {
  380.                         .action {
  381.                             &.add {
  382.                                 margin-top: @indent__l;
  383.                             }
  384.                         }
  385.  
  386.                         float: left;
  387.                     }
  388.                 }
  389.             }
  390.  
  391.             .fields {
  392.                 .actions-toolbar {
  393.                     margin: 0;
  394.                 }
  395.             }
  396.         }
  397.  
  398.         .message {
  399.             &.notice {
  400.                 margin: @indent__l 0 0;
  401.             }
  402.         }
  403.  
  404.         .additional {
  405.             margin-top: 55px;
  406.             position: relative;
  407.         }
  408.  
  409.         .action {
  410.             &.remove {
  411.                 &:extend(.abs-action-remove all);
  412.             }
  413.         }
  414.     }
  415. }
  416.  
  417. //
  418. //  Add Recipient for desktop
  419. //  ---------------------------------------------
  420.  
  421. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  422.     .abs-add-fields-desktop {
  423.         .fieldset {
  424.             .field {
  425.                 &:not(.choice) {
  426.                     .control {
  427.                         width: 50%;
  428.                     }
  429.                 }
  430.             }
  431.  
  432.             .additional {
  433.                 .action {
  434.                     &.remove {
  435.                         &:extend(.abs-action-remove-desktop all);
  436.                     }
  437.                 }
  438.             }
  439.         }
  440.     }
  441. }
  442.  
  443. //
  444. //  Margin for forms
  445. //  ---------------------------------------------
  446.  
  447. @abs-margin-for-forms-desktop: {
  448.     .lib-css(margin-left, @form-field-type-label-inline__width);
  449. };
  450.  
  451. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  452.     .abs-margin-for-forms-desktop {
  453.         @abs-margin-for-forms-desktop();
  454.     }
  455. }
  456.  
  457. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
  458.     .abs-margin-for-forms-desktop-s {
  459.         @abs-margin-for-forms-desktop();
  460.     }
  461. }
  462.  
  463. //
  464. //  Visibility hidden / show visibility hidden
  465. //  ---------------------------------------------
  466.  
  467. & when (@media-common = true) {
  468.     .abs-hidden {
  469.         .lib-visibility-hidden();
  470.     }
  471. }
  472.  
  473. //
  474. //  Visually hidden / show visually hidden
  475. //  ---------------------------------------------
  476.  
  477. @abs-visually-hidden: {
  478.     .lib-visually-hidden();
  479. };
  480.  
  481. & when (@media-common = true) {
  482.     .abs-visually-hidden {
  483.         @abs-visually-hidden();
  484.     }
  485. }
  486.  
  487. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  488.     .abs-visually-hidden-mobile {
  489.         @abs-visually-hidden();
  490.     }
  491. }
  492.  
  493. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  494.     .abs-visually-hidden-mobile-m {
  495.         @abs-visually-hidden();
  496.     }
  497. }
  498.  
  499. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
  500.     .abs-visually-hidden-desktop-s {
  501.         @abs-visually-hidden();
  502.     }
  503. }
  504.  
  505. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  506.     .abs-visually-hidden-desktop {
  507.         @abs-visually-hidden();
  508.     }
  509. }
  510.  
  511. //
  512. //  Visually hidden reset
  513. //  ---------------------------------------------
  514.  
  515. & when (@media-common = true) {
  516.     .abs-visually-hidden-reset {
  517.         .lib-visually-hidden-reset();
  518.     }
  519. }
  520.  
  521. //
  522. //  Clearfix
  523. //  ---------------------------------------------
  524.  
  525. @abs-add-clearfix: {
  526.     .lib-clearfix();
  527. };
  528.  
  529. & when (@media-common = true) {
  530.     .abs-add-clearfix {
  531.         @abs-add-clearfix();
  532.     }
  533. }
  534.  
  535. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  536.     .abs-add-clearfix-desktop {
  537.         @abs-add-clearfix();
  538.     }
  539. }
  540.  
  541. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
  542.     .abs-add-clearfix-desktop-s {
  543.         @abs-add-clearfix();
  544.     }
  545. }
  546.  
  547. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  548.     .abs-add-clearfix-mobile {
  549.         @abs-add-clearfix();
  550.     }
  551. }
  552.  
  553. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  554.     .abs-add-clearfix-mobile-m {
  555.         @abs-add-clearfix();
  556.     }
  557. }
  558.  
  559. //
  560. //  Box-sizing
  561. //  ---------------------------------------------
  562.  
  563. @abs-add-box-sizing: {
  564.     box-sizing: border-box;
  565. };
  566.  
  567. & when (@media-common = true) {
  568.     .abs-add-box-sizing {
  569.         @abs-add-box-sizing();
  570.     }
  571. }
  572.  
  573. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  574.     .abs-add-box-sizing-desktop {
  575.         @abs-add-box-sizing();
  576.     }
  577. }
  578.  
  579. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
  580.     .abs-add-box-sizing-desktop-s {
  581.         @abs-add-box-sizing();
  582.     }
  583. }
  584.  
  585. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  586.     .abs-add-box-sizing-desktop-m {
  587.         @abs-add-box-sizing();
  588.     }
  589. }
  590.  
  591. //
  592. //  Revert field type
  593. //  ---------------------------------------------
  594.  
  595. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  596.     .abs-revert-field-type-desktop {
  597.         .fieldset {
  598.             > .field,
  599.             .fields > .field {
  600.                 .lib-form-field-type-revert(@_type: block);
  601.  
  602.                 &:not(:first-child):last-of-type {
  603.                     margin-bottom: 0;
  604.                 }
  605.             }
  606.         }
  607.     }
  608. }
  609.  
  610. //
  611. //  Settings icons
  612. //  ---------------------------------------------
  613.  
  614. & when (@media-common = true) {
  615.     .abs-navigation-icon {
  616.         .lib-icon-font(
  617.             @_icon-font-content: @icon-down,
  618.             @_icon-font-size: 34px,
  619.             @_icon-font-line-height: 1.2,
  620.             @_icon-font-position: after,
  621.             @_icon-font-display: block
  622.         );
  623.  
  624.         &:after {
  625.             position: absolute;
  626.             right: @indent__xs;
  627.             top: 0;
  628.         }
  629.     }
  630. }
  631.  
  632. //
  633. //  Split button
  634. //  ---------------------------------------------
  635.  
  636. & when (@media-common = true) {
  637.     .abs-split-button {
  638.         .lib-dropdown-split(
  639.             @_options-selector : ~'.items',
  640.             @_dropdown-split-button-border-radius-fix: true
  641.         );
  642.         vertical-align: middle;
  643.     }
  644. }
  645.  
  646. //
  647. //  Action addto
  648. //  ---------------------------------------------
  649.  
  650. & when (@media-common = true) {
  651.     .abs-action-addto-product {
  652.         &:extend(.abs-action-link-button all);
  653.         .lib-button-s();
  654.     }
  655.  
  656.     .abs-actions-addto-gridlist {
  657.         .lib-icon-font(
  658.             @_icon-font-content: '',
  659.             @_icon-font-size: 29px,
  660.             @_icon-font-color: @addto-color,
  661.             @_icon-font-color-hover: @addto-hover-color,
  662.             @_icon-font-text-hide: true,
  663.             @_icon-font-vertical-align: middle,
  664.             @_icon-font-line-height: 24px
  665.         );
  666.     }
  667. }
  668.  
  669. //
  670. //  Large button
  671. //  ---------------------------------------------
  672.  
  673. & when (@media-common = true) {
  674.     .abs-button-l {
  675.         .lib-button-l();
  676.     }
  677. }
  678.  
  679. //
  680. //  Button as a link
  681. //  ---------------------------------------------
  682.  
  683. & when (@media-common = true) {
  684.     .abs-action-button-as-link {
  685.         .lib-button-as-link(@_margin: false);
  686.         border-radius: 0;
  687.         font-size: inherit;
  688.         font-weight: @font-weight__regular;
  689.  
  690.         &:active,
  691.         &:not(:focus) {
  692.             box-shadow: none;
  693.         }
  694.     }
  695. }
  696.  
  697. //
  698. //  Button revert secondary color
  699. //  ---------------------------------------------
  700.  
  701. & when (@media-common = true) {
  702.     .abs-revert-secondary-color {
  703.         .lib-button-revert-secondary-color();
  704.     }
  705. }
  706.  
  707. //
  708. //  Button revert secondary size
  709. //  ---------------------------------------------
  710.  
  711. & when (@media-common = true) {
  712.     .abs-revert-secondary-size {
  713.         .lib-button-revert-secondary-size();
  714.     }
  715. }
  716.  
  717. //
  718. //  Box-tocart block
  719. //  ---------------------------------------------
  720.  
  721. & when (@media-common = true) {
  722.     .abs-box-tocart {
  723.         margin: @indent__s 0;
  724.     }
  725. }
  726.  
  727. //
  728. //  Excl/Incl tax
  729. //  ---------------------------------------------
  730.  
  731. & when (@media-common = true) {
  732.     .abs-adjustment-incl-excl-tax {
  733.         .price-including-tax,
  734.         .price-excluding-tax,
  735.         .weee {
  736.             .lib-font-size(14);
  737.             display: inline-block;
  738.             white-space: nowrap;
  739.         }
  740.  
  741.         .price-including-tax + .price-excluding-tax {
  742.             display: inline-block;
  743.             .lib-font-size(11);
  744.  
  745.             &:before {
  746.                 content: '('attr(data-label)': ';
  747.             }
  748.  
  749.             &:after {
  750.                 content: ')';
  751.             }
  752.         }
  753.     }
  754. }
  755.  
  756. //
  757. //  Cart tax total
  758. //  ---------------------------------------------
  759.  
  760. & when (@media-common = true) {
  761.     .abs-tax-total {
  762.         cursor: pointer;
  763.         padding-right: 12px;
  764.         position: relative;
  765.         .lib-icon-font(
  766.             @icon-down,
  767.             @_icon-font-size: 26px,
  768.             @_icon-font-line-height: 10px,
  769.             @_icon-font-margin: 3px 0 0 0,
  770.             @_icon-font-position: after
  771.         );
  772.  
  773.         &:after {
  774.             position: absolute;
  775.             right: -@indent__s;
  776.             top: 3px;
  777.         }
  778.  
  779.         &-expanded {
  780.             .lib-icon-font-symbol(
  781.                 @_icon-font-content: @icon-up,
  782.                 @_icon-font-position: after
  783.             );
  784.         }
  785.     }
  786.  
  787.     .abs-tax-total-expanded {
  788.         .lib-icon-font-symbol(
  789.             @_icon-font-content: @icon-up,
  790.             @_icon-font-position: after
  791.         );
  792.     }
  793. }
  794.  
  795. //
  796. //  Checkout shipping methods title
  797. //  ---------------------------------------------
  798.  
  799. & when (@media-common = true) {
  800.     .abs-methods-shipping-title {
  801.         .lib-font-size(14);
  802.         font-weight: @font-weight__bold;
  803.         margin: 0 0 15px;
  804.     }
  805. }
  806.  
  807. //
  808. //  Checkout order review
  809. //  ---------------------------------------------
  810.  
  811. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  812.     .abs-checkout-order-review {
  813.         tbody tr {
  814.             &:not(:last-child) {
  815.                 border-bottom: @border-width__base solid @border-color__base;
  816.             }
  817.  
  818.             &:extend(.abs-add-clearfix-mobile all);
  819.  
  820.             .col {
  821.                 &.item {
  822.                     &:before {
  823.                         display: none;
  824.                     }
  825.                 }
  826.  
  827.                 &.qty,
  828.                 &.price,
  829.                 &.subtotal {
  830.                     box-sizing: border-box;
  831.                     float: left;
  832.                     text-align: center;
  833.                     white-space: nowrap;
  834.                     width: 33%;
  835.  
  836.                     &[data-th]:before {
  837.                         content: attr(data-th) ':';
  838.                         display: block;
  839.                         font-weight: @font-weight__bold;
  840.                         padding-bottom: @indent__s;
  841.                     }
  842.                 }
  843.             }
  844.  
  845.             .product-item-name {
  846.                 margin: 0;
  847.             }
  848.         }
  849.     }
  850. }
  851.  
  852. //
  853. //  Account pages: title
  854. //  ---------------------------------------------
  855.  
  856. & when (@media-common = true) {
  857.     .abs-account-title {
  858.         > strong,
  859.         > span {
  860.             .lib-font-size(22);
  861.             .lib-css(font-weight, @font-weight__light);
  862.         }
  863.  
  864.         .lib-css(border-bottom, 1px solid @border-color__base);
  865.         .lib-css(margin-bottom, @indent__m);
  866.         .lib-css(padding-bottom, @indent__s);
  867.     }
  868. }
  869.  
  870. //
  871. //  Ratings: vertical alignment
  872. //  ---------------------------------------------
  873.  
  874. & when (@media-common = true) {
  875.     .abs-rating-summary {
  876.         .rating {
  877.             &-summary {
  878.                 display: table-row;
  879.             }
  880.  
  881.             &-label {
  882.                 display: table-cell;
  883.                 padding-bottom: @indent__xs;
  884.                 padding-right: @indent__m;
  885.                 padding-top: 1px;
  886.                 vertical-align: top;
  887.             }
  888.  
  889.             &-result {
  890.                 display: table-cell;
  891.                 vertical-align: top;
  892.             }
  893.         }
  894.     }
  895. }
  896.  
  897. //
  898. //  Add colon
  899. //  ---------------------------------------------
  900.  
  901. & when (@media-common = true) {
  902.     .abs-colon {
  903.         &:after {
  904.             content: ': ';
  905.         }
  906.     }
  907. }
  908.  
  909. //
  910. //  Icon - create add
  911. //  ---------------------------------------------
  912.  
  913. & when (@media-common = true) {
  914.     .abs-icon-add {
  915.         .lib-icon-font(
  916.             @_icon-font-content: @icon-expand,
  917.             @_icon-font-size: 10px,
  918.             @_icon-font-line-height: 10px,
  919.             @_icon-font-vertical-align: middle
  920.         );
  921.     }
  922. }
  923.  
  924. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  925.     .abs-icon-add-mobile {
  926.         .lib-icon-font(
  927.             @_icon-font-content: @icon-expand,
  928.             @_icon-font-size: 10px,
  929.             @_icon-font-line-height: 10px,
  930.             @_icon-font-vertical-align: middle,
  931.             @_icon-font-margin: 0 5px 0 0,
  932.             @_icon-font-display: block
  933.         );
  934.     }
  935. }
  936.  
  937. //
  938. //  Dropdown items - create new
  939. //  ---------------------------------------------
  940.  
  941. & when (@media-common = true) {
  942.     .abs-dropdown-items-new {
  943.         .items .item:last-child {
  944.             &:hover {
  945.                 .lib-css(background, @dropdown-list-item__hover);
  946.             }
  947.         }
  948.  
  949.         .action.new {
  950.             &:extend(.abs-icon-add all);
  951.             &:before {
  952.                 margin-left: -17px;
  953.                 margin-right: @indent__xs;
  954.             }
  955.         }
  956.     }
  957. }
  958.  
  959. //
  960. //  Abstract toggle title block
  961. //  ---------------------------------------------
  962.  
  963. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  964.     .abs-toggling-title-mobile {
  965.         border-bottom: @border-width__base solid @border-color__base;
  966.         border-top: @border-width__base solid @border-color__base;
  967.         cursor: pointer;
  968.         margin-bottom: 0;
  969.         padding: @indent__s @indent__xl @indent__s @layout__width-xs-indent;
  970.         position: relative;
  971.  
  972.         .lib-icon-font(
  973.             @_icon-font-content: @icon-down,
  974.             @_icon-font-size: 28px,
  975.             @_icon-font-text-hide: false,
  976.             @_icon-font-position: after,
  977.             @_icon-font-display: block
  978.         );
  979.  
  980.         &:after {
  981.             position: absolute;
  982.             right: @indent__s;
  983.             top: 0;
  984.         }
  985.  
  986.         &.active {
  987.             .lib-icon-font-symbol(
  988.                 @_icon-font-content: @icon-up,
  989.                 @_icon-font-position: after
  990.             );
  991.         }
  992.     }
  993. }
  994.  
  995. //
  996. //  Abstract no display
  997. //  ---------------------------------------------
  998.  
  999. @abs-no-display: {
  1000.     display: none;
  1001. };
  1002.  
  1003. & when (@media-common = true) {
  1004.     .abs-no-display {
  1005.         @abs-no-display();
  1006.     }
  1007. }
  1008.  
  1009. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  1010.     .abs-no-display-s {
  1011.         @abs-no-display();
  1012.     }
  1013. }
  1014.  
  1015. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  1016.     .abs-no-display-desktop {
  1017.         @abs-no-display();
  1018.     }
  1019. }
  1020.  
  1021. //
  1022. //  Status
  1023. //  ---------------------------------------------
  1024.  
  1025. & when (@media-common = true) {
  1026.     .abs-status {
  1027.         display: inline-block;
  1028.         margin-bottom: @indent__base;
  1029.     }
  1030. }
  1031.  
  1032. //
  1033. //  Pager toolbar for non-catalog pages mobile
  1034. //  ---------------------------------------------
  1035.  
  1036. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  1037.     .abs-pager-toolbar-mobile {
  1038.         .toolbar-amount,
  1039.         .limiter,
  1040.         .pages {
  1041.             float: none;
  1042.             margin-bottom: @indent__m;
  1043.         }
  1044.     }
  1045. }
  1046.  
  1047. //
  1048. //  Pager toolbar for non-catalog pages mobile
  1049. //  ---------------------------------------------
  1050.  
  1051. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  1052.     .abs-pager-toolbar-mobile-s {
  1053.         .toolbar-amount,
  1054.         .limiter,
  1055.         .pages {
  1056.             margin-bottom: @indent__m;
  1057.         }
  1058.     }
  1059. }
  1060.  
  1061. //
  1062. //  Pager toolbar for non-catalog pages desktop
  1063. //  ---------------------------------------------
  1064.  
  1065. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  1066.     .abs-pager-toolbar {
  1067.         margin-bottom: @indent__base;
  1068.         position: relative;
  1069.         &:extend(.abs-add-clearfix-desktop all);
  1070.  
  1071.         .limiter {
  1072.             float: right;
  1073.             position: relative;
  1074.             z-index: 1;
  1075.         }
  1076.  
  1077.         .toolbar-amount {
  1078.             float: left;
  1079.             line-height: normal;
  1080.             padding: 7px 0 0;
  1081.             position: relative;
  1082.             z-index: 1;
  1083.         }
  1084.  
  1085.         .pages {
  1086.             position: absolute;
  1087.             width: 100%;
  1088.             z-index: 0;
  1089.         }
  1090.     }
  1091. }
  1092.  
  1093. //
  1094. //  Items counter in blocks
  1095. //  ---------------------------------------------
  1096.  
  1097. & when (@media-common = true) {
  1098.     .abs-block-items-counter {
  1099.         .lib-css(color, @primary__color__lighter);
  1100.         .lib-font-size(12px);
  1101.         white-space: nowrap;
  1102.     }
  1103. }
  1104.  
  1105. //
  1106. //  Shopping cart items
  1107. //  ---------------------------------------------
  1108.  
  1109. & when (@media-common = true) {
  1110.     .abs-shopping-cart-items {
  1111.         .action {
  1112.             &.continue {
  1113.                 border-radius: 3px;
  1114.                 font-weight: @font-weight__bold;
  1115.                 .lib-link-as-button();
  1116.                 .lib-button(
  1117.                     @_button-padding: 7px 15px 7px 0,
  1118.                     @_button-icon-use: true,
  1119.                     @_button-font-content: @icon-prev,
  1120.                     @_button-icon-font-size: 32px,
  1121.                     @_button-icon-font-line-height: 16px,
  1122.                     @_button-icon-font-position: before
  1123.                 );
  1124.  
  1125.                 &:active {
  1126.                     .lib-css(box-shadow, @button__shadow);
  1127.                 }
  1128.             }
  1129.  
  1130.             &.update {
  1131.                 .lib-button-icon(
  1132.                     @icon-update,
  1133.                     @_icon-font-size: 32px,
  1134.                     @_icon-font-line-height: 16px
  1135.                 );
  1136.                 padding-left: @indent__xs;
  1137.             }
  1138.         }
  1139.     }
  1140. }
  1141.  
  1142. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  1143.     .abs-shopping-cart-items-mobile {
  1144.         .actions {
  1145.             text-align: center;
  1146.         }
  1147.  
  1148.         .action {
  1149.             &.update,
  1150.             &.continue,
  1151.             &.clear {
  1152.                 margin: 0 auto @indent__s;
  1153.             }
  1154.  
  1155.             &.update,
  1156.             &.clear {
  1157.                 display: block;
  1158.             }
  1159.         }
  1160.     }
  1161. }
  1162.  
  1163. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  1164.     .abs-shopping-cart-items-desktop {
  1165.         float: left;
  1166.         position: relative;
  1167.         width: 73%;
  1168.  
  1169.         .actions {
  1170.             text-align: right;
  1171.         }
  1172.  
  1173.         .action {
  1174.             &.clear,
  1175.             &.update {
  1176.                 margin-left: @indent__s;
  1177.             }
  1178.  
  1179.             &.continue {
  1180.                 float: left;
  1181.             }
  1182.         }
  1183.     }
  1184. }
  1185.  
  1186. //
  1187. //  Form Field Date
  1188. //  ---------------------------------------------
  1189.  
  1190. & when (@media-common = true) {
  1191.     .abs-field-date {
  1192.         .control {
  1193.             &:extend(.abs-add-box-sizing all);
  1194.             position: relative;
  1195.         }
  1196.  
  1197.         input {
  1198.             &:extend(.abs-field-date-input);
  1199.         }
  1200.     }
  1201. }
  1202.  
  1203. //
  1204. //  Form Field Date Input
  1205. //  ---------------------------------------------
  1206.  
  1207. & when (@media-common = true) {
  1208.     .abs-field-date-input {
  1209.         margin-right: @indent__s;
  1210.         width: calc(~'100% -' @icon-calendar__font-size + @indent__s);
  1211.     }
  1212. }
  1213.  
  1214. //
  1215. //  Form Field Tooltip
  1216. //  ---------------------------------------------
  1217.  
  1218. & when (@media-common = true) {
  1219.     .abs-field-tooltip {
  1220.         &:extend(.abs-add-box-sizing all);
  1221.         position: relative;
  1222.  
  1223.         input {
  1224.             margin-right: @indent__s;
  1225.             width: calc(~'100% -' @checkout-tooltip-icon__font-size + @indent__s + @indent__xs);
  1226.         }
  1227.     }
  1228. }
  1229.  
  1230. //
  1231. //  Checkout Tooltip Content (position: top)
  1232. //  ---------------------------------------------
  1233.  
  1234. @abs-checkout-tooltip-content-position-top: {
  1235.     .lib-css(right, @checkout-tooltip-content-mobile__right);
  1236.     .lib-css(top, @checkout-tooltip-content-mobile__top);
  1237.     left: auto;
  1238.  
  1239.     &:before,
  1240.     &:after {
  1241.         .lib-arrow(
  1242.             @_position: top,
  1243.             @_size: @checkout-tooltip-icon-arrow__font-size,
  1244.             @_color: @checkout-tooltip-content__background-color
  1245.         );
  1246.         .lib-css(margin-top, @checkout-tooltip-icon-arrow__left);
  1247.         right: @indent__s;
  1248.         left: auto;
  1249.         top: 0;
  1250.     }
  1251.  
  1252.     &:before {
  1253.         .lib-css(border-bottom-color, @checkout-tooltip-content__border-color);
  1254.     }
  1255.  
  1256.     &:after {
  1257.         .lib-css(border-bottom-color, @checkout-tooltip-content__background-color);
  1258.         top: 1px;
  1259.     }
  1260. };
  1261.  
  1262. & when (@media-common = true) {
  1263.     .abs-checkout-tooltip-content-position-top {
  1264.         @abs-checkout-tooltip-content-position-top();
  1265.     }
  1266. }
  1267.  
  1268. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  1269.     .abs-checkout-tooltip-content-position-top-mobile {
  1270.         @abs-checkout-tooltip-content-position-top();
  1271.     }
  1272. }
  1273.  
  1274. //
  1275. //  Checkout title
  1276. //  ---------------------------------------------
  1277.  
  1278. & when (@media-common = true) {
  1279.     .abs-checkout-title {
  1280.         .lib-css(border-bottom, @checkout-step-title__border);
  1281.         .lib-css(padding-bottom, @checkout-step-title__padding);
  1282.         .lib-typography(
  1283.             @_font-size: @checkout-step-title__font-size,
  1284.             @_font-weight: @checkout-step-title__font-weight,
  1285.             @_font-family: false,
  1286.             @_font-style: false,
  1287.             @_line-height: false
  1288.         );
  1289.     }
  1290. }
  1291.  
  1292. //
  1293. //  Mini Cart and checkout sidebar totals
  1294. //  ---------------------------------------------
  1295.  
  1296. & when (@media-common = true) {
  1297.     .abs-sidebar-totals {
  1298.         .mark {
  1299.             font-weight: @font-weight__regular;
  1300.             padding-left: 4px;
  1301.  
  1302.             strong {
  1303.                 font-weight: @font-weight__regular;
  1304.             }
  1305.         }
  1306.  
  1307.         .amount {
  1308.             padding-right: 4px;
  1309.             text-align: right;
  1310.             white-space: nowrap;
  1311.  
  1312.             strong {
  1313.                 font-weight: @font-weight__regular;
  1314.             }
  1315.         }
  1316.  
  1317.         .grand {
  1318.             .mark,
  1319.             .amount {
  1320.                 padding-top: @indent__base;
  1321.             }
  1322.  
  1323.             .amount {
  1324.                 padding-right: 4px;
  1325.                 text-align: right;
  1326.  
  1327.                 strong {
  1328.                     font-weight: @font-weight__bold;
  1329.                 }
  1330.             }
  1331.         }
  1332.  
  1333.         .msrp {
  1334.             margin-bottom: @indent__s;
  1335.         }
  1336.  
  1337.         .totals-tax {
  1338.             &-summary {
  1339.                 .mark,
  1340.                 .amount {
  1341.                     .lib-css(border-top, @border-width__base solid @border-color__base);
  1342.                     .lib-css(border-bottom, @border-width__base solid @border-color__base);
  1343.                     cursor: pointer;
  1344.                 }
  1345.  
  1346.                 .amount .price {
  1347.                     .lib-icon-font(
  1348.                         @icon-down,
  1349.                         @_icon-font-size: 30px,
  1350.                         @_icon-font-text-hide: true,
  1351.                         @_icon-font-position: after,
  1352.                         @_icon-font-display: block
  1353.                     );
  1354.                     padding-right: @indent__m;
  1355.                     position: relative;
  1356.  
  1357.                     &:after {
  1358.                         position: absolute;
  1359.                         right: -5px;
  1360.                         top: -12px;
  1361.                     }
  1362.                 }
  1363.  
  1364.                 &.expanded {
  1365.                     .mark,
  1366.                     .amount {
  1367.                         border-bottom: 0;
  1368.                     }
  1369.  
  1370.                     .amount .price {
  1371.                         .lib-icon-font-symbol(
  1372.                             @_icon-font-content: @icon-up,
  1373.                             @_icon-font-position: after
  1374.                         );
  1375.                     }
  1376.                 }
  1377.             }
  1378.  
  1379.             &-details {
  1380.                 .lib-css(border-bottom, @border-width__base solid @border-color__base);
  1381.                 display: none;
  1382.  
  1383.                 &.shown {
  1384.                     display: table-row;
  1385.                 }
  1386.             }
  1387.         }
  1388.  
  1389.         .table-caption {
  1390.             &:extend(.abs-no-display all);
  1391.         }
  1392.     }
  1393. }
  1394.  
  1395. //
  1396. //  Shopping cart and payment discount codes block
  1397. //  ---------------------------------------------
  1398.  
  1399. & when (@media-common = true) {
  1400.     .abs-discount-block {
  1401.         > .title {
  1402.             border-top: @border-width__base solid @border-color__base;
  1403.             cursor: pointer;
  1404.             font-weight: @font-weight__semibold;
  1405.             .lib-icon-font(
  1406.                 @_icon-font-content: @icon-down,
  1407.                 @_icon-font-size: 30px,
  1408.                 @_icon-font-position: after,
  1409.                 @_icon-font-display: block
  1410.             );
  1411.             margin-bottom: 0;
  1412.             overflow: hidden;
  1413.             padding: 7px @indent__l 7px @indent__xs;
  1414.             position: relative;
  1415.  
  1416.             &:after {
  1417.                 position: absolute;
  1418.                 right: -5px;
  1419.                 top: -5px;
  1420.             }
  1421.  
  1422.             strong {
  1423.                 .column.main & {
  1424.                     .lib-font-size(18);
  1425.                     font-weight: @font-weight__regular;
  1426.                 }
  1427.             }
  1428.         }
  1429.  
  1430.         > .content {
  1431.             display: none;
  1432.         }
  1433.  
  1434.         &.active {
  1435.             > .title {
  1436.                 .lib-icon-font-symbol(
  1437.                     @_icon-font-content: @icon-up,
  1438.                     @_icon-font-position: after
  1439.                 );
  1440.             }
  1441.  
  1442.             > .content {
  1443.                 display: block;
  1444.             }
  1445.         }
  1446.     }
  1447. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top