// /** // * Copyright © Magento, Inc. All rights reserved. // * See COPYING.txt for license details. // */ // // List default styles reset // --------------------------------------------- .abs-reset-list { .lib-list-reset-styles(); > li { margin: 0; } } // // Link text // --------------------------------------------- .abs-link(@_link: @link-color, @_link-hover: @link-hover-color) { .lib-link( @_link-color: @_link, @_link-text-decoration: none, @_link-color-visited: @_link, @_link-text-decoration-visited: none, @_link-color-hover: @_link-hover, @_link-text-decoration-hover: none, @_link-color-active: @_link-hover, @_link-text-decoration-active: none); } // // Primary button // --------------------------------------------- .action-primary { .lib-button-primary(); .lib-css(border-radius, @button__border-radius); } // // Secondary button // --------------------------------------------- .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 // --------------------------------------------- .abs-action-link-button { .lib-button(); .lib-link-as-button(); .lib-css(border-radius, @button__border-radius); } // // Button as a link // --------------------------------------------- .abs-action-button-as-link { .lib-button-as-link( @_margin: false); border-radius: 0; .lib-css(font-weight, @font-weight__regular); .lib-css(color, @page_link); &:active, &:not(:focus) { box-shadow: none; .lib-css(color, @main_color); } } // // Button revert secondary color // --------------------------------------------- .abs-revert-secondary-color { .lib-button-revert-secondary-color(); } // // Button revert secondary size // --------------------------------------------- .abs-revert-secondary-size { .lib-button-revert-secondary-size(); } // // Large button // --------------------------------------------- .abs-button-l { .lib-button-l(); } // // Product options list // --------------------------------------------- @abs-product-options-list: { dt { float: left; clear: left; margin: 0 @indent__s 0 0; &:after { content: ': '; } .rtl-layout & { float: right; clear: right; margin: 0 0 @indent__xs @indent__s; } } dd { float: left; display: inline-block; margin: 0 0 @indent__xs; .rtl-layout & { float: right; } } } ; .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 // --------------------------------------------- .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) { float: left; clear: left; .rtl-layout & { float: right; clear: right; } } &:nth-child(2) { float: right; & + * { clear: both; } .rtl-layout & { float: left; } } } ; .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 // --------------------------------------------- .abs-reset-image-wrapper { height: auto; padding: 0!important; .product-image-photo { position: static; } } // // Adaptive images // --------------------------------------------- .abs-adaptive-images { display: block; height: auto; max-width: 100%; } .abs-adaptive-images-centered { display: block; height: auto; max-width: 100%; margin: 0 auto; } // // Title for login blocks // --------------------------------------------- .abs-login-block-title { strong { font-weight: 500; } padding-bottom: 12px; margin-bottom: 15px; .lib-css(border-bottom, 1px solid @secondary__color); .lib-font-size(18); } // // Simple Dropdown // --------------------------------------------- .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 // --------------------------------------------- .abs-input-qty { width: 60px; text-align: center; } // // Marging for blocks & widgets // --------------------------------------------- // .abs-margin-for-blocks-and-widgets { // //margin-bottom: @indent__xl; // margin-bottom: @space-lg; // } // .media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__m) { // .abs-margin-for-blocks-and-widgets-desktop { // margin-bottom: @space-lg; // } // } // // Remove button for blocks // --------------------------------------------- .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 // --------------------------------------------- .abs-product-link { > 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 // --------------------------------------------- .abs-like-link { .lib-link(); cursor: pointer; } // // Reset left margin // --------------------------------------------- @abs-reset-left-margin: { margin-left: 0; } ; .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 // --------------------------------------------- .abs-action-remove { &:extend(.abs-action-button-as-link all); width: auto; line-height: normal; position: absolute; top: 34px; margin-left: 73%; } // // 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 // --------------------------------------------- .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(); } ; .abs-hidden { @abs-hidden(); } // // Visually hidden / show visually hidden // --------------------------------------------- @abs-visually-hidden: { .lib-visually-hidden(); } ; .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 // --------------------------------------------- .abs-visually-hidden-reset { .lib-visually-hidden-reset(); } // // Settings icons // --------------------------------------------- .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 // --------------------------------------------- .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 { &:nth-last-child(1), &:nth-last-child(2) { margin-bottom: 0; } .lib-form-field-column(@_column: true); .field { width: 100%; padding: 0; } } } } ; .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 // --------------------------------------------- .abs-methods-shipping-title { .lib-font-size(16); margin-bottom: 15px; .lib-css(font-weight, @font-weight__semibold); } // // 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: 500; padding-bottom: @indent__s; } } &:last-child { border: 0; } } } .product-item-name { margin: 0; } } } // // Add to Actions // --------------------------------------------- .abs-actions-addto { /*.lib-css(color, @addto-color); display: inline-block; text-transform: uppercase; font-weight: @font-weight__semibold; letter-spacing: .05em; .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; } a.towishlist{ position:relative; }*/ } // // Box-tocart block // --------------------------------------------- .abs-box-tocart { margin: 0 0 @indent__s + @indent__xs; } // // 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 ); } } // // Cart discount block // --------------------------------------------- & when (@media-common = true) { .abs-cart-block { margin: 0; > .title { @abs-toggling-title(); padding: 10px 15px 10px; .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 ); //&:extend(.abs-toggling-title all); &:after { color: @color-gray52; } } .content { display: none; padding: 5px 0 20px; position: relative; .font-size(14); } &.active { > .title { .lib-icon-font-symbol( @_icon-font-content: @icon-up, @_icon-font-position: after ); } .content { display: block; } } } .abs-cart-block-content { margin: 0; } } .abs-cart-block-content { margin: 0; } // // Checkout order review price // --------------------------------------------- .abs-checkout-cart-price { .lib-css(color, @primary__color__lighter); .lib-font-size(16); font-weight: @font-weight__bold; } // // Checkout order product name // --------------------------------------------- .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-top: @indent__xs; padding-bottom: 0; } .amount { padding-bottom: @indent__s; padding-top: 0; strong { border-top: none; } } } } } } // // Account pages: title // --------------------------------------------- .abs-account-title { > strong, > span { //.lib-font-size(22); //.lib-css(font-weight, @font-weight__light); .lib-css(color, @page_text); } .lib-css(margin-bottom, @indent__m); .lib-css(padding-bottom, @indent__s); .lib-css(border-bottom, 1px solid @border-color__base); } // // 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 // --------------------------------------------- .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 // --------------------------------------------- .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 // --------------------------------------------- .abs-incl-excl-tax { .price-including-tax, .price-excluding-tax { display: block; .lib-font-size(18); line-height: 1; white-space: nowrap; .price { font-weight: 500; } } } .abs-adjustment-incl-excl-tax { .price-including-tax, .price-excluding-tax { display: inline-block; .lib-font-size(14); } .price-including-tax + .price-excluding-tax { display: inline-block; .lib-font-size(11); &:before { content: "("attr(data-label)": "; } &:after { content: ")"; } } } // // Cart tax total // --------------------------------------------- .abs-tax-total { cursor: pointer; position: relative; padding-right: @indent__s; .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 // --------------------------------------------- .abs-forms-margin-small { .lib-css(margin-bottom, @indent__base); } // // Forms: margin-bottom for small forms // --------------------------------------------- .abs-rating-summary { .rating { &-summary { display: table-row; } &-label { display: table-cell; vertical-align: top; padding-top: 1px; padding-right: @indent__m; padding-bottom: @indent__xs; } &-result { vertical-align: top; display: table-cell; } } .rtl-layout & { .rating-label { padding-right: 0; padding-left: @indent__m; } } } // // Account pages: actions // --------------------------------------------- .abs-account-actions { &:after { content: ""; display: inline-block; height: 12px; margin: 0 @indent__s; .lib-css(border-left, 1px solid @primary__color__light); vertical-align: -1px; } &:last-child { &:after { display: none; } } } // // Account blocks // --------------------------------------------- .abs-account-blocks { .block-title { &:extend(.abs-account-title all); > .action { margin-left: 15px; } .action.edit, .action.view { float: right; position: relative; &:after { .abs-iconfont(@mbi-pencil-line, 12px); margin-left: @indent__xs; line-height: 18px; vertical-align: middle; } } .action.view:after { .abs-iconfont(@mbi-eye, 12px); } strong { font-weight: 500; } } .box-title { > span { font-weight: 500; } display: inline-block; margin: 0 0 @indent__s; > .action { font-weight: 400; margin-left: @indent__s; } } } // // Add colon // --------------------------------------------- .abs-colon { &:after { content: ": "; } } // // Icon - create add // --------------------------------------------- .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 // --------------------------------------------- .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; } ; .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 // --------------------------------------------- .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 // --------------------------------------------- .abs-title-orders { .page-main { .page-title-wrapper { .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: 0 0 15px; } } } } } // // Table striped // --------------------------------------------- .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; z-index: 0; width: 100%; } } } // // Items counter in blocks // --------------------------------------------- .abs-block-items-counter { .lib-css(color, @primary__color__lighter); .lib-font-size(12px); white-space: nowrap; } // // Sidebar and widget blocks title // --------------------------------------------- .abs-block-widget-title { strong { //font-size: @font-size__l; //font-weight: @font-weight__light; } margin: 0 0 @indent__base; } // // Shopping cart items // --------------------------------------------- .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, 70%); &:extend(.abs-add-box-sizing-desktop all); padding-right: 3%; position: relative; .rtl-layout & { float: right; padding-right: 0; padding-left: 3%; } } } // // 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 // --------------------------------------------- .abs-field-date { .control { position: relative; &:extend(.abs-add-box-sizing all); } input { &:extend(.abs-field-date-input); } } // // Form Field Date Input // --------------------------------------------- .abs-field-date-input { .lib-css(margin-right, @indent__s); width: calc(~"100% - (@{icon-calendar__font-size} + @{indent__s})"); } // // Form Field Tooltip // --------------------------------------------- .abs-field-tooltip { &:extend(.abs-add-box-sizing all); position: relative; } // // 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; } } ; .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 // --------------------------------------------- .abs-checkout-title { .abs-csscf(@page_text, @font_h); } // // Shopping cart sidebar and checkout sidebar totals // --------------------------------------------- .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; .rtl-layout & { padding: 6px 14px 6px 0; text-align: left; } } } .table-caption { &:extend(.abs-no-display all); } .grand { th, td { padding: 11px 0; } strong { display: inline-block; font-weight: 500; padding: 3px 0 0; } .mark { border-top: 1px solid @border-color__base; .lib-font-size(18); padding-right: @indent__s; .rtl-layout & { padding-right: 0; padding-left: @indent__s; } } .amount { border-top: 1px solid @border-color__base; .lib-font-size(18); } } .msrp { margin-bottom: @indent__s; } tbody tr:last-child td { padding-bottom: 19px; } .totals-tax { &-summary { .mark, .amount { border-top: @border-width__base solid @border-color__base; border-bottom: @border-width__base solid @border-color__base; cursor: pointer; } .amount .price { position: relative; padding-right: @indent__base; .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 { display: none; border-bottom: @border-width__base solid @border-color__base; &.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 // --------------------------------------------- .abs-discount-block { .block { padding-top: @indent__base * 3; &:extend(.abs-cart-block all); > .title { strong { color: @page_text; 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; } } } .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); width: 100%; > .title { border: 0; cursor: default; text-transform: uppercase; position: relative; padding: 0; margin-bottom: 20px; min-width: 100%; strong { .lib-css(border, 0); padding-bottom: 15px; margin-top: 0; margin-bottom: 0; display: inline-block; vertical-align: top; } &:after { display: none; } } .content { display: block !important; // Need for overwriting collapsible widget padding: 20px; .abs-boxshadow(~'1px 3px 1px rgba(50,50,50,0.1)'); } } .actions-toolbar { .secondary { bottom: -30px; left: 0; position: absolute; } } } } //MageBig Theme Extends======================================= .abs-borderradius(@_value) { -webkit-border-radius: @_value; -moz-border-radius: @_value; border-radius: @_value; } .abs-boxshadow(@_value) { -moz-box-shadow: @_value; -webkit-box-shadow: @_value; -o-box-shadow: @_value; -ms-box-shadow: @_value; box-shadow: @_value; } .abs-transition(@_value: all 500ms ease) { -moz-transition: @_value; -webkit-transition: @_value; -o-transition: @_value; transition: @_value; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .abs-transition-mg(@_value: ~"visibility 250ms ease, opacity 250ms ease, margin 250ms ease") { -webkit-transition: @_value; -moz-transition: @_value; transition: @_value; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .abs-transform(@_value: initial) { -moz-transform: @_value; -webkit-transform: @_value; -o-transform: @_value; transform: @_value; } .abs-iconfont(@_font, @_font-size) { display: inline-block; font-family: mbicon; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: @_font; font-size: @_font-size; } .abs-iconfont2(@_font, @_font-size) { .abs-iconfont(@_font, @_font-size); font-family: 'Pe-icon-7-stroke'; speak: none; } .abs-hidetext() { font-size: 0; display: block; text-indent: -99999px; overflow: hidden; vertical-align: middle; text-align: left; } .abs-opacity(@_opacity) { -webkit-opacity: @_opacity; -moz-opacity: @_opacity; opacity: @_opacity; } .abs-scale (@_factor) { -webkit-transform: scale(@_factor); -moz-transform: scale(@_factor); -ms-transform: scale(@_factor); -o-transform: scale(@_factor); } .abs-colorfont( @_color, @_font) { color: @_color; font: @_font; } .abs-style( @_color, @_border, @_background) { color: @_color; border-color: @_border; background: @_background; } .abs-allstyle( @_color, @_background) { color: @_color; background: @_background; } .abs-allstyle( @_color, @_background, @_font) { color: @_color; background: @_background; font: @_font; } .abs-allstyle( @_color, @_border, @_background, @_font) { color: @_color; border-color: @_border; background: @_background; font: @_font; } .abs-csscf( @_color, @_font) { .lib-css(color, @_color); .lib-css(font-family, @_font); } .abs-csscbf( @_color, @_background, @_font) { .abs-csscf( @_color, @_font); .lib-css(background-color, @_background); } .abs-cssall( @_color, @_background) { .lib-css(color, @_color); .lib-css(background-color, @_background); } .abs-cssall( @_color, @_border, @_background) { .abs-cssall( @_color, @_background); .lib-css(border-color, @_border); } .abs-cssall( @_color, @_border, @_background, @_font) { .abs-cssall( @_color, @_border, @_background); .lib-css(font, @_font); } .abs-cssbg(@_bkgcolor, @_bkgurl, @_bkgposition: ~"0 0", @_bkgrepeat: no-repeat) { background-color: @_bkgcolor; background-image:url("@{_bkgurl}"); background-position: @_bkgposition; background-repeat: @_bkgrepeat; } .abs-icon(@_width, @_height, @_animal, @_bkg-position) { width: @_width; height: @_height; background-image: url('../images/@{_animal}.png'); background-position: @_bkg-position; background-repeat: no-repeat; } // Show Product Item .abs-showproduct(@_item: 4) { .product-items { //&:not(.isotope), &:not(.owl-carousel) { > .product-item { width: (100% / @_item); padding-left: @layout-indent__width; padding-right: @layout-indent__width; .product-item-info { width: 100%; height: 100%; } } } } } .abs-showprocate(@_namescreen, @_item : 6, @_i: 1) when (@_i <=@_item) { .@{_namescreen}_@{_i} { .product-items:not(.owl-carousel) { margin-left: -@layout-indent__width; margin-right: -@layout-indent__width; > .product-item { width: (100% / @_i); padding-left: @layout-indent__width; padding-right: @layout-indent__width; &:nth-child(@{_i}n + 1) { clear: both; } } } } .abs-showprocate(@_namescreen, @_item : 6, (@_i + 1)); } /// placeholder .abs-placeholder(@_color: @page_text) { ::-webkit-input-placeholder { color: @_color; } :-moz-placeholder { /* Firefox 18- */ color: @_color; } ::-moz-placeholder { /* Firefox 19+ */ color: @_color; } :-ms-input-placeholder { color: @_color; } } /////////////Theme Block////////// .abs-block() { padding: @indent__base; margin-bottom: @indent__base; } @baseFontSize: @font_size; .font-size(@font-size: @baseFontSize) { @rem: (@font-size / 10); font-size: ~"@{rem}rem"; }