_extends.less 43 KB

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