// /** // * Copyright © 2016 Magento. All rights reserved. // * See COPYING.txt for license details. // */ @mobile-cart-padding: 15px; @cart-price-color: @color-gray40; @cart-item-cell-padding-top: 20px; // // Common // _____________________________________________ & when (@media-common = true) { // // Shopping cart // --------------------------------------------- .checkout-cart-index { .page-main { padding-left: 0; padding-right: 0; } .page-title-wrapper { padding-left: @layout__width-xs-indent; padding-right: @layout__width-xs-indent; } } // Cart container .cart-container { .form-cart { &:extend(.abs-shopping-cart-items all); } } // Summary block .cart-summary { &:extend(.abs-add-box-sizing all); .lib-css(background, @sidebar__background-color); margin-bottom: @indent__m; padding: 1px 0 @indent__m; > .title { .lib-font-size(24); display: none; font-weight: @font-weight__light; margin: 12px 0; } .block { form:not(:last-of-type) { .fieldset { margin: 0 0 @indent__m; } } .price { font-weight: @font-weight__bold; } .field { margin: 0 0 16px; &.note { display: none; } } .actions-toolbar { > .primary { text-align: left; .action.primary { &:extend(.abs-revert-to-action-secondary all); width: auto; } } } .fieldset.estimate { > .legend, > .legend + br { &:extend(.abs-no-display all); } } &:extend(.abs-cart-block all); .title { strong { .lib-font-size(14); font-weight: @font-weight__semibold; } } .item-options { margin: 0 0 16px; .field { .radio { float: left; } .radio { + .label { display: block; margin: 0; overflow: hidden; } } } } } .page-main & { .block { margin-bottom: 0; } } .checkout-methods-items { &:extend(.abs-reset-list all); margin: @indent__base 0 0; padding: 0 @mobile-cart-padding; text-align: center; .action.primary.checkout { &:extend(.abs-button-l all); width: 100%; } .item { margin-bottom: @indent__m; &:last-child { margin-bottom: 0; } } } .message { padding-left: @indent__base; > *:first-child:before { display: none; } } &:extend(.abs-adjustment-incl-excl-tax all); } // Totals block .cart-totals { &:extend(.abs-sidebar-totals all); tbody, tfoot { .mark { text-align: left; } } } // Products table .cart { &.table-wrapper { .cart { thead { tr th.col { border-bottom: @border-width__base solid @border-color__base; padding-bottom: 15px; padding-top: 24px; } } tbody { td { border: 0; } } > .item { border-bottom: @border-width__base solid @border-color__base; position: relative; } } .col { padding-top: 15px; &.price, &.subtotal, &.msrp { padding: @cart-item-cell-padding-top 11px @indent__s; text-align: center; &:extend(.abs-incl-excl-tax all); } &.qty { padding: @indent__base 11px @indent__s; text-align: center; .label { &:extend(.abs-visually-hidden all); } .input-text { height: 36px; margin-top: -7px; text-align: center; width: 45px; } } > .price { .lib-css(color, @primary__color__lighter); .lib-font-size(18); font-weight: @font-weight__bold; } } .item-actions { td { padding-bottom: 0; padding-left: @mobile-cart-padding; padding-right: @mobile-cart-padding; white-space: normal; } } .item { .col.item { display: block; min-height: 75px; padding: 15px @mobile-cart-padding @indent__s 90px; position: relative; } } .actions-toolbar { &:extend(.abs-add-clearfix all); min-height: 20px; padding-bottom: 15px; position: relative; > .action-edit, > .action-delete { position: absolute; right: 16px; top: 0; .lib-icon-font( @icon-edit, @_icon-font-size: 18px, @_icon-font-line-height: 20px, @_icon-font-text-hide: true, @_icon-font-color: @minicart-icons-color, @_icon-font-color-hover: @primary__color, @_icon-font-color-active: @minicart-icons-color ); } > .action-delete { &:extend(.abs-action-button-as-link all); right: 0; .lib-icon-font-symbol( @_icon-font-content: @icon-trash ); } } .action { margin-right: @indent__m; &:last-child { margin-right: 0; } &.help.map { &:extend(.abs-action-button-as-link all); font-weight: @font-weight__regular; } } .product { &-item-photo { display: block; left: @mobile-cart-padding; max-width: 65px; padding: 0; position: absolute; top: 15px; width: 100%; } &-item-name { .lib-font-size(18); display: block; margin: -3px 0 @indent__xs; } } .gift-registry-name-label { &:after { content: ':'; } } // Product options .item-options { margin-bottom: 0; &:extend(.abs-product-options-list all); &:extend(.abs-add-clearfix all); } .product-item-name + .item-options { margin-top: @indent__base; } .cart-tax-total { &:extend(.abs-tax-total all); &-expanded { &:extend(.abs-tax-total-expanded all); } } .product-image-wrapper { &:extend(.abs-reset-image-wrapper all); } .action.configure { display: inline-block; margin: @indent__s 0 0; } .item .message { margin-top: @indent__base; } } } // Discount .cart-discount { border-bottom: @border-width__base solid @border-color__base; clear: left; &:extend(.abs-discount-block all); } // Empty cart .cart-empty { padding-left: @layout__width-xs-indent; padding-right: @layout__width-xs-indent; } .cart-tax-info, .cart .cart-tax-info { + .cart-tax-total { display: block; } } .cart.table-wrapper, .order-items.table-wrapper { .col.price, .col.qty, .col.subtotal, .col.msrp { text-align: right; } } } // // Mobile // _____________________________________________ .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { .cart { .table.items { .col.item, .item-actions td { &:extend(.abs-col-no-prefix all); } .col.qty { text-align: center; } tbody > tr > td:last-child { &:extend(.abs-no-border-bottom-top all); } } } .cart-totals { .totals { &:extend(.abs-sidebar-totals-mobile all); } } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { // Cart container .cart-container { .form-cart { .actions.main { text-align: center; } } } .cart-discount { border-bottom: @border-width__base solid @border-color__base; } .cart { &.table-wrapper { border-top: @border-width__base solid @border-color__base; thead { .col { &.item, &.qty, &.price, &.subtotal, &.msrp { display: none; } } } .col { &.qty, &.price, &.subtotal, &.msrp { box-sizing: border-box; display: block; float: left; white-space: nowrap; width: 33%; &:before { content: attr(data-th); display: block; font-weight: @font-weight__semibold; padding-bottom: 10px; } } &.msrp { white-space: normal; } } .item .col.item { padding-bottom: 0; } tbody > tr > td:last-child { border: 0; } } } .cart-totals { padding-left: @mobile-cart-padding; padding-right: @mobile-cart-padding; .table-wrapper { border-top: 0; } .totals { tbody > tr:not(:last-child) > td:last-child { border: 0; } } } } // // Common // _____________________________________________ & when (@media-common = true) { // Cross sell .block { &.crosssell { .lib-css(padding, 0 @mobile-cart-padding); margin-top: 70px; .product-item-info { width: 200px; } } } } // // Desktop // _____________________________________________ .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .checkout-cart-index { .page-main { padding-left: @layout__width-xs-indent; padding-right: @layout__width-xs-indent; } .page-title-wrapper { &:extend(.abs-revert-side-paddings all); } } // Cart container .cart-container { &:extend(.abs-add-clearfix-desktop all); .form-cart { &:extend(.abs-shopping-cart-items-desktop all); .actions.main { text-align: right; } } .widget { float: left; } } // Summary block .cart-summary { .lib-layout-column(2, 2, @layout-column-checkout__width-left); padding: 1px @indent__base @indent__m; position: relative; > .title { display: block; } .fieldset { .actions-toolbar { margin-left: 0; > .secondary { float: none; } } } .block { > .title { padding-left: 0; &:after { right: 3px; } } .content { &:extend(.abs-revert-side-paddings all); } .fieldset { .field { .lib-form-field-type-revert(@_type: block); margin: 0 0 @indent__s; } } } .checkout-methods-items { padding: 0; } } // Products table .cart { &.table-wrapper { .items { // Google Chrome version 44.0.2403.107 m fix min-width: 100%; width: auto; } tbody td { padding-top: @cart-item-cell-padding-top; } .item { .col.item { padding: @cart-item-cell-padding-top 8px @indent__base 0; } } .item-actions td { padding: 0; } .product { &-item-photo { display: table-cell; max-width: 100%; padding-right: @indent__base; position: static; vertical-align: top; width: 1%; } &-item-details { padding-bottom: 35px; } &-item-details { display: table-cell; vertical-align: top; white-space: normal; width: 99%; } } } } // Discount .cart-discount { &:extend(.abs-discount-block-desktop all); .lib-layout-column(2, 1, @layout-column-checkout__width-main); border: 0; box-sizing: border-box; padding-right: 4%; .block { .title { &:after { display: inline; margin-left: @indent__s; position: static; } } } } // Empty cart .cart-empty { &:extend(.abs-revert-side-paddings all); } // Cross sell .block { &.crosssell { .lib-layout-column(2, 1, @layout-column-checkout__width-main); &:extend(.abs-add-box-sizing-desktop all); padding: 0 4% 0 0; .products-grid .product-item { width: 100%/4; } } } }