Guest User

_extend.less

a guest
Feb 19th, 2020
128
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