// /** // * Copyright © 2016 Magento. All rights reserved. // * See COPYING.txt for license details. // */ // // List default styles reset // --------------------------------------------- & when (@media-common = true) { .abs-reset-list { .lib-list-reset-styles(); > li { margin: 0; } } } // // Primary button // --------------------------------------------- & when (@media-common = true) { .action-primary { .lib-button-primary(); .lib-css(border-radius, @button__border-radius); } } // // Secondary button // --------------------------------------------- & when (@media-common = true) { .abs-revert-to-action-secondary { &:extend(.abs-revert-secondary-color all); .lib-css(border-radius, @button__border-radius); &:not(:focus) { .lib-css(box-shadow, @button__shadow); } &:active { .lib-css(box-shadow, @button__shadow-active); } } } // // Link as a button // --------------------------------------------- & when (@media-common = true) { .abs-action-link-button { .lib-button(); .lib-link-as-button(); .lib-css(border-radius, @button__border-radius); } } // // Button as a link // --------------------------------------------- & when (@media-common = true) { .abs-action-button-as-link { .lib-button-as-link(@_margin: false); .lib-css(font-weight, @font-weight__regular); border-radius: 0; &:active, &:not(:focus) { box-shadow: none; } } } // // Button revert secondary color // --------------------------------------------- & when (@media-common = true) { .abs-revert-secondary-color { .lib-button-revert-secondary-color(); } } // // Button revert secondary size // --------------------------------------------- & when (@media-common = true) { .abs-revert-secondary-size { .lib-button-revert-secondary-size(); } } // // Large button // --------------------------------------------- & when (@media-common = true) { .abs-button-l { .lib-button-l(); } } // // Product options list // --------------------------------------------- @abs-product-options-list: { dt { clear: left; float: left; margin: 0 @indent__s @indent__xs 0; &:after { content: ': '; } } dd { display: inline-block; float: left; margin: 0 0 @indent__xs; } }; & when (@media-common = true) { .abs-product-options-list { @abs-product-options-list(); } } // // Desktop // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-product-options-list-desktop { @abs-product-options-list(); } } // // Button reset width, floats, margins // --------------------------------------------- & when (@media-common = true) { .abs-button-responsive { .lib-button-responsive(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-button-desktop { width: auto; } } // // Blocks in 2 columns // --------------------------------------------- @abs-blocks-2columns: { width: 48%; &:nth-child(1) { clear: left; float: left; } &:nth-child(2) { float: right; & + * { clear: both; } } }; .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-blocks-2columns { @abs-blocks-2columns(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) { .abs-blocks-2columns-s { @abs-blocks-2columns(); } } // // Reset image alignment in container // --------------------------------------------- & when (@media-common = true) { .abs-reset-image-wrapper { height: auto; padding: 0 !important; .product-image-photo { position: static; } } } // // Adaptive images // --------------------------------------------- & when (@media-common = true) { .abs-adaptive-images { display: block; height: auto; max-width: 100%; } .abs-adaptive-images-centered { display: block; height: auto; margin: 0 auto; max-width: 100%; } } // // Title for login blocks // --------------------------------------------- & when (@media-common = true) { .abs-login-block-title { .lib-css(border-bottom, 1px solid @secondary__color); .lib-font-size(18); margin-bottom: 15px; padding-bottom: 12px; strong { font-weight: 500; } } } // // Simple Dropdown // --------------------------------------------- & when (@media-common = true) { .abs-dropdown-simple { .lib-dropdown( @_dropdown-list-item-padding: 5px 5px 5px 23px, @_dropdown-list-min-width: 200px, @_icon-font-margin: 0 0 0 5px, @_icon-font-vertical-align: middle ); ul.items { padding: 6px 0; } } } // // Input quantity // --------------------------------------------- & when (@media-common = true) { .abs-input-qty { text-align: center; width: 54px; } } // // Marging for blocks & widgets // --------------------------------------------- & when (@media-common = true) { .abs-margin-for-blocks-and-widgets { margin-bottom: @indent__xl; } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-margin-for-blocks-and-widgets-desktop { margin-bottom: @indent__xl + @indent__s; } } // // Remove button for blocks // --------------------------------------------- & when (@media-common = true) { .abs-remove-button-for-blocks { .lib-icon-font( @icon-remove, @_icon-font-size: 12px, @_icon-font-line-height: 15px, @_icon-font-text-hide: true, @_icon-font-color: @color-gray60, @_icon-font-color-hover: @color-gray-darken4, @_icon-font-color-active: @color-gray60 ); } } // // Product link // --------------------------------------------- & when (@media-common = true) { .abs-product-link { font-weight: @font-weight__regular; > a { .lib-link( @_link-color: @product-name-link__color, @_link-text-decoration: @product-name-link__text-decoration, @_link-color-visited: @product-name-link__color__visited, @_link-text-decoration-visited: @product-name-link__text-decoration__visited, @_link-color-hover: @product-name-link__color__hover, @_link-text-decoration-hover: @product-name-link__text-decoration__hover, @_link-color-active: @product-name-link__color__active, @_link-text-decoration-active: @product-name-link__text-decoration__active ); } } } // // Link // --------------------------------------------- & when (@media-common = true) { .abs-like-link { .lib-link(); cursor: pointer; } } // // Reset left margin // --------------------------------------------- @abs-reset-left-margin: { margin-left: 0; }; & when (@media-common = true) { .abs-reset-left-margin { @abs-reset-left-margin(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-reset-left-margin-desktop { @abs-reset-left-margin(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) { .abs-reset-left-margin-desktop-s { @abs-reset-left-margin(); } } // // Action with icon remove with text // --------------------------------------------- & when (@media-common = true) { .abs-action-remove { &:extend(.abs-action-button-as-link all); line-height: normal; margin-left: 73%; position: absolute; top: 34px; width: auto; } } // // Action with icon remove with text for desktop // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-action-remove-desktop { margin-left: 90%; } } // // Add Recipient // --------------------------------------------- & when (@media-common = true) { .abs-add-fields { .fieldset { .field { .control { width: 70%; } } .actions-toolbar { &:extend(.abs-add-clearfix all); > .secondary { .action { &.add { margin-top: @indent__l; } } float: left; } } .fields { .actions-toolbar { margin: 0; } } } .additional { margin-top: 55px; position: relative; } .action { &.remove { &:extend(.abs-action-remove all); } } .message { &.notice { margin: @indent__l 0 0; } } } } // // Add Recipient for desktop // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-add-fields-desktop { .fieldset { .field { .control { width: auto; } } .additional { .action { &.remove { &:extend(.abs-action-remove-desktop all); } } } } } } // // Margin for forms // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-margin-for-forms-desktop { .lib-css(margin-left, @form-field-type-label-inline__width); } } // // Visibility hidden / show visibility hidden // --------------------------------------------- @abs-hidden: { .lib-visibility-hidden(); }; & when (@media-common = true) { .abs-hidden { @abs-hidden(); } } // // Visually hidden / show visually hidden // --------------------------------------------- @abs-visually-hidden: { .lib-visually-hidden(); }; & when (@media-common = true) { .abs-visually-hidden { @abs-visually-hidden(); } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .abs-visually-hidden-mobile { @abs-visually-hidden(); } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { .abs-visually-hidden-mobile-m { @abs-visually-hidden(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) { .abs-visually-hidden-desktop-s { @abs-visually-hidden(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-visually-hidden-desktop { @abs-visually-hidden(); } } // // Visually hidden reset // --------------------------------------------- & when (@media-common = true) { .abs-visually-hidden-reset { .lib-visually-hidden-reset(); } } // // Clearfix // --------------------------------------------- @abs-add-clearfix: { .lib-clearfix(); }; & when (@media-common = true) { .abs-add-clearfix { @abs-add-clearfix(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-add-clearfix-desktop { @abs-add-clearfix(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) { .abs-add-clearfix-desktop-s { @abs-add-clearfix(); } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .abs-add-clearfix-mobile { @abs-add-clearfix(); } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { .abs-add-clearfix-mobile-m { @abs-add-clearfix(); } } // // Box-sizing // --------------------------------------------- @abs-add-box-sizing: { box-sizing: border-box; }; & when (@media-common = true) { .abs-add-box-sizing { @abs-add-box-sizing(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-add-box-sizing-desktop { @abs-add-box-sizing(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) { .abs-add-box-sizing-desktop-s { @abs-add-box-sizing(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-add-box-sizing-desktop-m { @abs-add-box-sizing(); } } // // Revert field type // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-revert-field-type-desktop { .fieldset { > .field, .fields > .field { .lib-form-field-type-revert(@_type: block); &:not(:first-child):last-of-type { margin-bottom: 0; } } } } } // // Settings icons // --------------------------------------------- & when (@media-common = true) { .abs-navigation-icon { .lib-icon-font( @_icon-font-content: @icon-down, @_icon-font-size: 34px, @_icon-font-line-height: 1.2, @_icon-font-position: after, @_icon-font-display: block ); &:after { position: absolute; right: 5px; top: 0; } } } // // Split button // --------------------------------------------- & when (@media-common = true) { .abs-split-button { .lib-dropdown-split( @_options-selector : ~'.items', @_dropdown-split-button-border-radius-fix: true ); vertical-align: middle; } } // // Field 2 column // --------------------------------------------- @abs-form-field-column-2: { .fieldset { .field { .lib-form-field-column(@_column: true); &:nth-last-child(1), &:nth-last-child(2) { margin-bottom: 0; } .field { padding: 0; width: 100%; } } } }; .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-form-field-column-2 { @abs-form-field-column-2(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) { .abs-form-field-column-2-s { @abs-form-field-column-2(); } } // // Field 1 column // --------------------------------------------- @abs-form-field-revert-column-1: { .lib-form-field-column-number(@_column-number: 1); }; .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-form-field-revert-column-1 { @abs-form-field-revert-column-1(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) { .abs-form-field-revert-column-1-s { @abs-form-field-revert-column-1(); } } // // Checkout shipping methods title // --------------------------------------------- & when (@media-common = true) { .abs-methods-shipping-title { .lib-css(font-weight, @font-weight__semibold); .lib-font-size(16); margin-bottom: 15px; } } // // Checkout order review // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .abs-checkout-order-review { tbody > tr { &:extend(.abs-add-clearfix-mobile all); &:not(:last-child) { .lib-css(border-bottom, @border-width__base solid @border-color__base); } > td.col { &.item { &:before { display: none; } } &.qty, &.price, &.subtotal { box-sizing: border-box; float: left; text-align: center; white-space: nowrap; width: 33%; &:before { content: attr(data-th) ':'; display: block; font-weight: @font-weight__bold; padding-bottom: @indent__s; } } &:last-child { border: 0; } } } .product-item-name { margin: 0; } } } // // Add to Actions // --------------------------------------------- & when (@media-common = true) { .abs-actions-addto { .lib-css(color, @addto-color); display: inline-block; font-weight: @font-weight__semibold; letter-spacing: .05em; text-transform: uppercase; .lib-icon-font( @_icon-font-content: '', @_icon-font-size: 16px, @_icon-font-line-height: 16px, @_icon-font-margin: -2px 5px 0 0, @_icon-font-vertical-align: middle ); &:hover { .lib-css(color, @addto-hover-color); text-decoration: none; } &:before { width: 18px; } } } // // Box-tocart block // --------------------------------------------- & when (@media-common = true) { .abs-box-tocart { margin: 0 0 @indent__l; } } // // General pages forms // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-forms-general-desktop { max-width: 500px; .legend { .lib-visually-hidden(); } .legend + br { display: none; } } } // // Revert side paddings // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-revert-side-paddings { padding-left: 0; padding-right: 0; } } // // Abstract toggle title block // --------------------------------------------- @abs-toggling-title: { .lib-css(border-top, @border-width__base solid @border-color__base); cursor: pointer; margin-bottom: 0; position: relative; &:after { position: absolute; right: @indent__base; top: @indent__s; } }; & when (@media-common = true) { .abs-toggling-title { @abs-toggling-title(); .lib-css(padding, @indent__s @indent__xl @indent__s @mobile-cart-padding); .lib-icon-font( @icon-down, @_icon-font-size: 12px, @_icon-font-line-height: 12px, @_icon-font-text-hide: true, @_icon-font-margin: 3px 0 0, @_icon-font-position: after, @_icon-font-display: block ); } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { .abs-toggling-title-mobile { @abs-toggling-title(); .lib-css(border-bottom, @border-width__base solid @border-color__base); .lib-css(padding, @indent__s @indent__xl @indent__s @layout__width-xs-indent); .lib-icon-font( @icon-down, @_icon-font-size: 12px, @_icon-font-text-hide: false, @_icon-font-margin: 3px 0 0 0, @_icon-font-position: after, @_icon-font-display: block ); &.active { .lib-icon-font-symbol( @_icon-font-content: @icon-up, @_icon-font-position: after ); } } } // // Cart discount block // --------------------------------------------- & when (@media-common = true) { .abs-cart-block { margin: 0; > .title { &:extend(.abs-toggling-title all); &:after { color: @color-gray52; } } .content { display: none; .lib-css(padding, 5px @mobile-cart-padding 23px); position: relative; } &.active { > .title { .lib-icon-font-symbol( @_icon-font-content: @icon-up, @_icon-font-position: after ); } .content { display: block; } } } .abs-cart-block-content { margin: 0; } } // // Checkout order review price // --------------------------------------------- & when (@media-common = true) { .abs-checkout-cart-price { .lib-css(color, @primary__color__lighter); .lib-font-size(16); font-weight: @font-weight__bold; } } // // Checkout order product name // --------------------------------------------- & when (@media-common = true) { .abs-checkout-product-name { .lib-font-size(18); font-weight: @font-weight__light; margin: 0; } } // // Mobile checkout order product name // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .abs-product-items-summary { tbody { .col { padding: @indent__s 0 0; &:last-child { padding-bottom: @indent__s } } } tfoot { .mark { padding-bottom: @indent__xs; text-align: left; } .amount { padding-top: 0; text-align: left; } .grand.totals { .lib-font-size(16); .mark { padding-bottom: 0; padding-top: @indent__xs; } .amount { padding-bottom: @indent__s; padding-top: 0; strong { border-top: none; } } } } } } // // Account pages: title // --------------------------------------------- & when (@media-common = true) { .abs-account-title { > strong, > span { .lib-font-size(22); .lib-css(font-weight, @font-weight__light); } .lib-css(border-bottom, 1px solid @account-title-border-color); .lib-css(margin-bottom, @indent__m); .lib-css(padding-bottom, @indent__s); } } // // Account pages: block font size // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-account-block-font-size { .lib-font-size(16); } } // // Account pages: block line-height // --------------------------------------------- & when (@media-common = true) { .abs-account-block-line-height { line-height: 24px; } } // // Account pages: margin for table // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .abs-account-table-margin-mobile { .lib-css(margin-top, -@indent__base); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-account-table-margin-desktop { .lib-css(margin-top, -@indent__m); } } // // Account pages: table col actions // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .abs-col-no-prefix { &:before { .lib-visually-hidden(); } } } // // Account pages: order table summary // --------------------------------------------- & when (@media-common = true) { .abs-account-summary { td { .lib-css(background, @sidebar__background-color); } } } // // Action print with icon // --------------------------------------------- @abs-action-print: { .lib-icon-font( @icon-print, @_icon-font-size: 16px, @_icon-font-line-height: 16px, @_icon-font-margin: 0 4px 0 0, @_icon-font-position: before ); &:hover { text-decoration: underline; } }; .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-action-print { @abs-action-print(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) { .abs-action-print-s { @abs-action-print(); } } // // Excl/Incl tax // --------------------------------------------- & when (@media-common = true) { .abs-incl-excl-tax { .price-including-tax, .price-excluding-tax { .lib-css(color, @cart-price-color); .lib-font-size(18); display: block; line-height: 1; white-space: nowrap; .price { font-weight: @font-weight__bold; } } } .abs-adjustment-incl-excl-tax { .price-including-tax, .price-excluding-tax { .lib-font-size(14); display: inline-block; } .price-including-tax + .price-excluding-tax { .lib-font-size(11); display: inline-block; &:before { content: '('attr(data-label)': '; } &:after { content: ')'; } } } } // // Cart tax total // --------------------------------------------- & when (@media-common = true) { .abs-tax-total { cursor: pointer; padding-right: @indent__s; position: relative; .lib-icon-font( @icon-down, @_icon-font-size: 8px, @_icon-font-line-height: 8px, @_icon-font-margin: 3px 0 0 0, @_icon-font-position: after ); &:after { position: absolute; right: -2px; top: 4px; } } .abs-tax-total-expanded { .lib-icon-font-symbol( @_icon-font-content: @icon-up, @_icon-font-position: after ); } } // // Forms: margin-bottom for small forms // --------------------------------------------- & when (@media-common = true) { .abs-forms-margin-small { .lib-css(margin-bottom, @indent__base); } } // // Forms: margin-bottom for small forms // --------------------------------------------- & when (@media-common = true) { .abs-rating-summary { .rating { &-summary { display: table-row; } &-label { display: table-cell; padding-bottom: @indent__xs; padding-right: @indent__m; padding-top: 1px; vertical-align: top; } &-result { display: table-cell; vertical-align: top; } } } } // // Account pages: actions // --------------------------------------------- & when (@media-common = true) { .abs-account-actions { &:after { .lib-css(border-left, 1px solid @primary__color__light); content: ''; display: inline-block; height: 12px; margin: 0 @indent__s; vertical-align: -1px; } &:last-child { &:after { display: none; } } } } // // Account blocks // --------------------------------------------- & when (@media-common = true) { .abs-account-blocks { .block-title { &:extend(.abs-account-title all); > .action { margin-left: 15px; } } .box-title { > span { .lib-font-size(16); } display: inline-block; margin: 0 0 @indent__s; > .action { font-weight: 400; margin-left: @indent__s; } } } } // // Add colon // --------------------------------------------- & when (@media-common = true) { .abs-colon { &:after { content: ': '; } } } // // Icon - create add // --------------------------------------------- & when (@media-common = true) { .abs-icon-add { .lib-icon-font( @_icon-font-content: @icon-expand, @_icon-font-size: 10px, @_icon-font-line-height: 10px, @_icon-font-vertical-align: middle ); } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { .abs-icon-add-mobile { .lib-icon-font( @_icon-font-content: @icon-expand, @_icon-font-size: 10px, @_icon-font-line-height: 10px, @_icon-font-vertical-align: middle, @_icon-font-margin: 0 5px 0 0, @_icon-font-display: block ); } } // // Dropdown items - create new // --------------------------------------------- & when (@media-common = true) { .abs-dropdown-items-new { .items .item:last-child { &:hover { .lib-css(background, @dropdown-list-item__hover); } } .action.new { &:extend(.abs-icon-add all); &:before { margin-left: -17px; margin-right: @indent__xs; } } } } // // Abstract no display // --------------------------------------------- @abs-no-display: { display: none; }; & when (@media-common = true) { .abs-no-display { @abs-no-display(); } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .abs-no-display-s { @abs-no-display(); } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-no-display-desktop { @abs-no-display(); } } // // Status // --------------------------------------------- & when (@media-common = true) { .abs-status { .lib-css(border, 2px solid @border-color__base); border-radius: 3px; display: inline-block; margin: 3px 0 0; padding: 2px @indent__s; text-transform: uppercase; vertical-align: top; } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-status-desktop { margin-top: 6px; padding: @indent__xs @indent__s; } } // // Page title - orders pages // --------------------------------------------- & when (@media-common = true) { .abs-title-orders { .page-main { .page-title-wrapper { .page-title { margin-right: 25px; } .order-date { font-size: 16px; margin-bottom: @indent__s; .label { display: none; } } } } } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .abs-title-orders-mobile { .page-main { .page-title-wrapper { .page-title { display: block; } .order-status { @order-status-indent: ceil(@h1__margin-bottom/2); margin: -@order-status-indent 0 @indent__s; } } } } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-title-orders-desktop { .page-main { .page-title-wrapper { .order-date { @order-date-indent: ceil(@h1__margin-bottom/1.5); margin: -@order-date-indent 0 18px; } } } } } // // Table striped // --------------------------------------------- & when (@media-common = true) { .abs-table-striped { .lib-table-striped( @_stripped-highlight: even ); .lib-table-bordered( @_table_type: light ); } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .abs-table-striped-mobile { > tbody > tr > td:last-child { border: 0; } } } // // Table bordered desktop // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-table-bordered-desktop { .lib-table-bordered( @_table_type: light, @_table_border-width: 1px ); } } // // Pager toolbar for non-catalog pages desktop // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-pager-toolbar { position: relative; .toolbar-amount, .limiter { position: relative; z-index: 1; } .toolbar-amount { .lib-css(line-height, @pager__line-height); padding: 0; } .pages { position: absolute; width: 100%; z-index: 0; } } } // // Items counter in blocks // --------------------------------------------- & when (@media-common = true) { .abs-block-items-counter { .lib-css(color, @primary__color__lighter); .lib-font-size(12px); white-space: nowrap; } } // // Sidebar and widget blocks title // --------------------------------------------- & when (@media-common = true) { .abs-block-widget-title { margin: 0 0 @indent__base; strong { font-size: @font-size__l; font-weight: @font-weight__light; } } } // // Shopping cart items // --------------------------------------------- & when (@media-common = true) { .abs-shopping-cart-items { margin-bottom: @indent__base; .actions.main { .continue, .clear { display: none; } } } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-shopping-cart-items-desktop { .lib-layout-column(2, 1, @layout-column-checkout__width-main); &:extend(.abs-add-box-sizing-desktop all); padding-right: 4%; position: relative; } } // // Remove top border // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .abs-no-border-top { border-top: 0; } } // // Remove bottom border // --------------------------------------------- .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .abs-no-border-bottom { border-bottom: 0; } } // // Form Field Date // --------------------------------------------- & when (@media-common = true) { .abs-field-date { .control { position: relative; &:extend(.abs-add-box-sizing all); } input { &:extend(.abs-field-date-input); } } } // // Form Field Date Input // --------------------------------------------- & when (@media-common = true) { .abs-field-date-input { .lib-css(margin-right, @indent__s); width: calc(~'100% -' @icon-calendar__font-size + @indent__s); } } // // Form Field Tooltip // --------------------------------------------- & when (@media-common = true) { .abs-field-tooltip { &:extend(.abs-add-box-sizing all); position: relative; input { .lib-css(margin-right, @indent__s); width: calc(~'100% -' @checkout-tooltip-icon__font-size + @indent__s + @indent__xs); } } } // // Checkout Tooltip Content (position: top) // --------------------------------------------- @abs-checkout-tooltip-content-position-top: { .lib-css(right, @checkout-tooltip-content-mobile__right); .lib-css(top, @checkout-tooltip-content-mobile__top); left: auto; &:before, &:after { .lib-arrow( @_position: top, @_size: @checkout-tooltip-icon-arrow__font-size, @_color: @checkout-tooltip-content__background-color ); .lib-css(margin-top, @checkout-tooltip-icon-arrow__left); .lib-css(right, @indent__s); left: auto; top: 0; } &:before { .lib-css(border-bottom-color, @checkout-tooltip-content__active__border-color); } &:after { .lib-css(border-bottom-color, @checkout-tooltip-content__background-color); top: 1px; } }; & when (@media-common = true) { .abs-checkout-tooltip-content-position-top { @abs-checkout-tooltip-content-position-top(); } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = (@screen__m + 1)) { .abs-checkout-tooltip-content-position-top-mobile { @abs-checkout-tooltip-content-position-top(); } } // // Checkout title // --------------------------------------------- & when (@media-common = true) { .abs-checkout-title { .lib-css(padding-bottom, @checkout-step-title__padding); .lib-typography( @_font-size: @checkout-step-title__font-size, @_font-weight: @checkout-step-title__font-weight, @_font-family: false, @_font-style: false, @_line-height: false ); } } // // Shopping cart sidebar and checkout sidebar totals // --------------------------------------------- & when (@media-common = true) { .abs-sidebar-totals { border-top: 1px solid @border-color__base; padding-top: 10px; tbody, tfoot { .mark { border: 0; font-weight: @font-weight__regular; padding: 6px 0; } .amount { border: 0; font-weight: @font-weight__regular; padding: 6px 0 6px 14px; text-align: right; white-space: nowrap; } } .table-caption { &:extend(.abs-no-display all); } .grand { th, td { padding: 11px 0; } strong { display: inline-block; font-weight: @font-weight__semibold; padding: 3px 0 0; } .mark { .lib-font-size(18); border-top: 1px solid @border-color__base; padding-right: @indent__s; } .amount { .lib-font-size(18); border-top: 1px solid @border-color__base; } } .msrp { margin-bottom: @indent__s; } tbody tr:last-child td { padding-bottom: 19px; } .totals-tax { &-summary { .mark, .amount { border-bottom: @border-width__base solid @border-color__base; border-top: @border-width__base solid @border-color__base; cursor: pointer; } .amount .price { padding-right: @indent__base; position: relative; .lib-icon-font( @icon-down, @_icon-font-size: 12px, @_icon-font-line-height: 12px, @_icon-font-text-hide: true, @_icon-font-position: after ); &:after { position: absolute; right: 3px; top: 3px; } } &.expanded { .mark, .amount { border-bottom: 0; } .amount .price { .lib-icon-font-symbol( @_icon-font-content: @icon-up, @_icon-font-position: after ); } } } &-details { border-bottom: @border-width__base solid @border-color__base; display: none; &.shown { display: table-row; } } } .table-wrapper { margin-bottom: 0; } } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .abs-sidebar-totals-mobile { th { &:extend(.abs-col-no-prefix all); } td { &:extend(.abs-col-no-prefix all); } tbody tr:not(:last-child) { td { &:extend(.abs-no-border-bottom-top all); } } .amount { text-align: right; } } } // // Shopping cart and payment discount codes block // --------------------------------------------- & when (@media-common = true) { .abs-discount-block { .block { &:extend(.abs-cart-block all); > .title { strong { color: @color-blue1; font-weight: @font-weight__regular; } } } .actions-toolbar { display: table-cell; vertical-align: top; width: 1%; .action { &.primary, &.cancel { &:extend(.abs-revert-to-action-secondary all); border-bottom-left-radius: 0; border-top-left-radius: 0; margin: 0 0 0 -1px; white-space: nowrap; width: auto; } } .secondary { bottom: 5px; left: @mobile-cart-padding; position: absolute; } } .action.check { &:extend(.abs-action-button-as-link all); font-weight: @font-weight__regular; } .fieldset { display: table; width: 100%; > .field { > .label { display: none; } } } .field { display: table-cell; } } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .abs-discount-block-desktop { .block { &:extend(.abs-blocks-2columns all); > .title { border: 0; padding: 0 0 @indent__s; strong { .lib-font-size(16); } } .content { .lib-css(padding, 0 0 @indent__base); } } .actions-toolbar { .secondary { bottom: -30px; left: 0; position: absolute; } } } }