_extends.less 32 KB

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