diff --git a/Magento_AdvancedCheckout/styles/_module.scss b/Magento_AdvancedCheckout/styles/_module.scss index 575c9992..7b35c16f 100644 --- a/Magento_AdvancedCheckout/styles/_module.scss +++ b/Magento_AdvancedCheckout/styles/_module.scss @@ -52,8 +52,8 @@ .actions-toolbar { clear: both; @include lib-actions-toolbar( - $_actions-toolbar-actions-position: left, - $_actions-toolbar-margin: 0 0 $indent__base + $_actions-toolbar-actions-position : left, + $_actions-toolbar-margin : 0 0 $indent__base ); @include lib-actions-toolbar-clear-floats(); @@ -75,8 +75,8 @@ } .block-cart-failed { - @extend .abs-shopping-cart-items; margin-top: $indent__xl; + @extend .abs-shopping-cart-items; .block-title { @include lib-font-size($h2__font-size); @@ -110,10 +110,10 @@ .action { &.remove { @include lib-button-icon( - $_icon-font-content: $icon-remove, - $_icon-font-text-hide: true, - $_icon-font-size: 28px, - $_icon-font-margin: 1px 0 0 + $_icon-font-content : $icon-remove, + $_icon-font-text-hide : true, + $_icon-font-size : 28px, + $_icon-font-margin : 1px 0 0 ); @include lib-button-reset(); } diff --git a/Magento_AdvancedSearch/styles/_module.scss b/Magento_AdvancedSearch/styles/_module.scss deleted file mode 100644 index ce86e39b..00000000 --- a/Magento_AdvancedSearch/styles/_module.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'module/common'; diff --git a/Magento_AdvancedSearch/styles/module/_common.scss b/Magento_AdvancedSearch/styles/module/_common.scss deleted file mode 100644 index 450bfe64..00000000 --- a/Magento_AdvancedSearch/styles/module/_common.scss +++ /dev/null @@ -1,34 +0,0 @@ -// -// Advanced Search -// _____________________________________________ - -// This part of code fixes the gap between page title and error message -// In Luma on Mobile screens we have top padding on '.column' to give room for absolutely positioned toolbar controls. -// If Advanced Search returns no results, controls do not appear, and visual gap appears. -// We compensate it with negative top margin applied to '.message.error' on Mobile screens. - -// -// Common -// _____________________________________________ - -.catalogsearch-advanced-result { - .message { - &.error { - margin-top: -60px; - } - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__s) { - .catalogsearch-advanced-result { - .message { - &.error { - margin-top: 0; - } - } - } -} diff --git a/Magento_Banner/styles/_widgets.scss b/Magento_Banner/styles/_widgets.scss index cf48a868..43d1b248 100644 --- a/Magento_Banner/styles/_widgets.scss +++ b/Magento_Banner/styles/_widgets.scss @@ -1,14 +1,18 @@ .block-banners, .block-banners-inline { @extend .abs-margin-for-blocks-and-widgets; + .banner-items { @extend .abs-reset-list; } + .banner-item { display: block; } + .banner-item-content { - margin-bottom: $indent__base; + @include lib-css(margin-bottom, $indent__base); + img { display: block; margin: 0 auto; diff --git a/Magento_Braintree/styles/_module.scss b/Magento_Braintree/styles/_module.scss index 36b4dafb..2de9b5cd 100644 --- a/Magento_Braintree/styles/_module.scss +++ b/Magento_Braintree/styles/_module.scss @@ -1,2 +1,190 @@ -@import 'variables'; -@import 'module/common'; +// +// Variables +// _____________________________________________ + +$braintree-input-border__color : $color-gray76; + +$braintree-error__color : $color-red10; +$braintree-focus__color : $color-blue2; +$braintree-success__color : $color-dark-green1; + +$braintree-paypal-icon__height : 16px; +$braintree-paypal-icon__width : 16px; +$braintree-paypal-account__padding-right : 50px; +$braintree-paypal-account__padding-vertical : 15px; + +.payment-method-braintree { + + .hosted-date-wrap { + @extend .abs-add-clearfix; + } + + .hosted-control { + @include lib-form-element-input($_type: input-text); + position: relative; + width: 225px; + + &.braintree-hosted-fields-focused { + border-color: $braintree-focus__color; + } + + &.braintree-hosted-fields-invalid:not(.braintree-hosted-fields-focused) { + border-color: $braintree-error__color; + + & ~ .hosted-error { + height: auto; + opacity: 1; + } + } + + &.braintree-hosted-fields-valid { + border-color: $braintree-success__color; + } + + &.hosted-cid { + width: 5rem; + } + + &.hosted-date { + $distance: 50px; + + float: left; + margin-bottom: 7px; + width: 6rem; + + &:first-of-type { + margin-right: $distance; + + &:after { + content: '/'; + display: inline; + padding-bottom: inherit; + padding-top: inherit; + position: absolute; + right: -$distance / 2; + top: 5px; + } + } + } + } + + .field-tooltip { + right: 0; + } + + .hosted-error { + clear: both; + color: $braintree-error__color; + font-size: 1.2rem; + height: 0; + margin-top: 7px; + opacity: 0; + } +} + +.braintree-paypal-logo { + margin-top: $indent__s; + text-align: center; +} + +.braintree-paypal-account { + padding: $braintree-paypal-account__padding-vertical 0 $braintree-paypal-account__padding-vertical $braintree-paypal-account__padding-right; + position: relative; + + @include lib-icon-image( + $_icon-image: '../Magento_Braintree/images/paypal-small.png', + $_icon-image-position: before, + $_icon-image-width: $braintree-paypal-icon__width, + $_icon-image-height: $braintree-paypal-icon__height + ); + + &:before { + left: $braintree-paypal-account__padding-right/2 - $braintree-paypal-icon__width/2; + margin-top: -$braintree-paypal-icon__height/2; + position: absolute; + top: 50%; + } + + .payment-method-type { + font-weight: $font-weight__bold; + } + + .payment-method-description { + color: $color-gray34; + } +} + +.braintree-paypal-fieldset { + border: 0; + margin: 0; + padding: 0; +} + +.action-braintree-paypal-logo { + @include lib-button-reset(); + + img { + margin: 0; + width: 114px; + } +} + +.payment-method { + .payment-method-content { + .actions-toolbar { + &.braintree-paypal-actions { + margin-left: 0; + } + } + } +} + +// My Account > Stored Payment Methods +.account { + .table { + .col { + &.paypal-account { + img { + vertical-align: middle; + } + + + .actions { + vertical-align: middle; + } + } + } + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .payment-method-braintree { + .cvv { + .field-tooltip { + left: 6rem; + } + } + } + + .braintree-paypal-account { + border-color: $color-gray80; + border-style: solid; + border-width: 1px 0; + display: inline-block; + width: 50%; + } + + // My Account > Stored Payment Methods + .account { + .table-credit-cards { + .col { + &.actions { + width: 100px; + } + } + } + } +} diff --git a/Magento_Braintree/styles/_variables.scss b/Magento_Braintree/styles/_variables.scss deleted file mode 100644 index 57b1c5fb..00000000 --- a/Magento_Braintree/styles/_variables.scss +++ /dev/null @@ -1,9 +0,0 @@ -// -// Variables -// _____________________________________________ - -$braintree-input-border__color: $color-gray76 !default; - -$braintree-error__color : $color-red10 !default; -$braintree-focus__color : $color-blue2 !default; -$braintree-success__color : $color-dark-green1 !default; diff --git a/Magento_Braintree/styles/module/_common.scss b/Magento_Braintree/styles/module/_common.scss deleted file mode 100644 index fe7b23a9..00000000 --- a/Magento_Braintree/styles/module/_common.scss +++ /dev/null @@ -1,86 +0,0 @@ -// -// Common -// _____________________________________________ - -.payment-method-braintree { - - .hosted-date-wrap { - @extend .abs-add-clearfix; - } - - .hosted-control { - @include lib-form-element-input($_type: input-text); - position: relative; - width: 225px; - - &.braintree-hosted-fields-focused { - border-color: $braintree-focus__color; - } - - &.braintree-hosted-fields-invalid:not(.braintree-hosted-fields-focused) { - border-color: $braintree-error__color; - - & ~ .hosted-error { - height: auto; - opacity: 1; - } - } - - &.braintree-hosted-fields-valid { - border-color: $braintree-success__color; - } - - &.hosted-cid { - width: 85px; - } - - &.hosted-date { - $distance: 50px; - - float: left; - margin-bottom: 7px; - width: 100px; - - &:first-of-type { - margin-right: $distance; - - &:after { - content: '/'; - display: inline; - padding-bottom: inherit; - padding-top: inherit; - position: absolute; - right: -$distance / 2; - top: 5px; - } - } - } - } - - .field-tooltip { - right: 0; - } - - .hosted-error { - clear: both; - color: $braintree-error__color; - font-size: 20px; - height: 0; - margin-top: 7px; - opacity: 0; - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .payment-method-braintree { - .cvv { - .field-tooltip { - left: 6rem; - } - } - } -} diff --git a/Magento_BraintreeTwo/styles/_module.scss b/Magento_BraintreeTwo/styles/_module.scss deleted file mode 100644 index ce86e39b..00000000 --- a/Magento_BraintreeTwo/styles/_module.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'module/common'; diff --git a/Magento_BraintreeTwo/styles/module/_common.scss b/Magento_BraintreeTwo/styles/module/_common.scss deleted file mode 100644 index 2a24c452..00000000 --- a/Magento_BraintreeTwo/styles/module/_common.scss +++ /dev/null @@ -1,13 +0,0 @@ -.braintree-paypal-logo { - margin-top: $indent__s; - text-align: center; -} - -.action-braintree-paypal-logo { - @include lib-button-reset(); - - img { - margin: 0; - width: 114px; - } -} diff --git a/Magento_Bundle/styles/_email.scss b/Magento_Bundle/styles/_email.scss deleted file mode 100644 index 57af3444..00000000 --- a/Magento_Bundle/styles/_email.scss +++ /dev/null @@ -1,31 +0,0 @@ -// -// Bundle Module Styles -// --------------------------------------------- - -// -// Bundle Items -// --------------------------------------------- - -.email-items { - .bundle-option-label { - > td { - padding: 0 $email-content__padding__base 0 $email-content__padding__l; - } - } - - .bundle-option-value { - > td { - padding: 0 $email-content__padding__base $email-content__padding__base; - - &.item-info { - padding: 0 $email-content__padding__base $email-content__padding__base $email-content__padding__xl; - } - } - } - - tr.bundle-option-value + tr { - > td.item-extra { - padding-top: $email-content__padding__base; - } - } -} diff --git a/Magento_Bundle/styles/_module.scss b/Magento_Bundle/styles/_module.scss index ce86e39b..202b3bad 100644 --- a/Magento_Bundle/styles/_module.scss +++ b/Magento_Bundle/styles/_module.scss @@ -1 +1,143 @@ -@import 'module/common'; +.bundle-actions { + @extend .abs-box-tocart; + .action.primary { + @extend .abs-button-l; + } +} + +.bundle-options-container { + clear: both; + margin-bottom: $indent__xl; + + .legend.title { + @include lib-heading(h2); + } + + .product-add-form { + display: none; + } + + .input-text.qty { + @extend .abs-input-qty; + } + + .product-options-wrapper { + margin-bottom: $indent__l; + } + + .action.back { + margin-bottom: $indent__l; + } + + .price-box { + .price { + font-size: $font-size__l; + font-weight: $font-weight__bold; + } + } + + .price-notice { + @extend .abs-adjustment-incl-excl-tax; + } + + .block-bundle-summary { + @extend .abs-add-box-sizing; + @include lib-css(background, $secondary__color); + padding: $indent__s $indent__base; + + > .title > strong { + @include lib-heading(h2); + } + + .bundle-summary { + margin-top: $indent__l; + + &.empty { + display: none; + } + + > .subtitle { + @include lib-heading(h3); + display: block; + } + } + + .bundle.items { + @extend .abs-reset-list; + + > li { + margin-bottom: $indent__s; + } + } + + .box-tocart { + .actions { + display: inline-block; + margin-bottom: $indent__s; + } + + .action.primary { + @extend .abs-button-l; + } + } + + .product-addto-links { + > .action { + @extend .abs-action-addto-product; + vertical-align: top; + } + } + } + .nested { + .field.qty { + .label { + @include lib-css(font-weight, $form-field-label__font-weight); + @include lib-css(margin, 0 0 $indent__xs); + display: inline-block; + } + + @include lib-css(margin-top, $form-field__vertical-indent); + } + } + + p.required { + @include lib-css(color, $form-field-label-asterisk__color); + } + + .product-options-bottom { + clear: left; + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .bundle-options-container { + .legend.title { + @extend .abs-reset-left-margin-desktop; + } + + .bundle-options-wrapper, + .product-options-wrapper { + float: left; + width: 57%; + } + + .block-bundle-summary { + float: right; + position: relative; + width: 40%; + } + + .bundle-options-wrapper, + .block-bundle-summary { + .page-layout-2columns-left &, + .page-layout-2columns-right &, + .page-layout-3columns & { + width: 48%; + } + } + } +} diff --git a/Magento_Bundle/styles/module/_common.scss b/Magento_Bundle/styles/module/_common.scss deleted file mode 100644 index c18998c7..00000000 --- a/Magento_Bundle/styles/module/_common.scss +++ /dev/null @@ -1,143 +0,0 @@ -.bundle-actions { - @extend .abs-box-tocart; - .action.primary { - @extend .abs-button-l; - } -} - -.bundle-options-container { - clear: both; - margin-bottom: $indent__xl; - - .legend.title { - @include lib-heading(h2); - } - - .product-add-form { - display: none; - } - - .input-text.qty { - @extend .abs-input-qty; - } - - .product-options-wrapper { - margin-bottom: $indent__l; - } - - .action.back { - margin-bottom: $indent__l; - } - - .price-box { - .price { - font-size: $font-size__l; - font-weight: $font-weight__bold; - } - } - - .price-notice { - @extend .abs-adjustment-incl-excl-tax; - } - - .block-bundle-summary { - @extend .abs-add-box-sizing; - background: $secondary__color; - padding: $indent__s $indent__base; - - > .title > strong { - @include lib-heading(h2); - } - - .bundle-summary { - margin-top: $indent__l; - - &.empty { - display: none; - } - - > .subtitle { - @include lib-heading(h3); - display: block; - } - } - - .bundle.items { - @extend .abs-reset-list; - - > li { - margin-bottom: $indent__s; - } - } - - .box-tocart { - .actions { - display: inline-block; - margin-bottom: $indent__s; - } - - .action.primary { - @extend .abs-button-l; - } - } - - .product-addto-links { - > .action { - @extend .abs-action-addto-product; - vertical-align: top; - } - } - } - .nested { - .field.qty { - .label { - font-weight: $form-field-label__font-weight; - margin: 0 0 $indent__xs; - display: inline-block; - } - - margin-top: $form-field__vertical-indent; - } - } - - p.required { - color: $form-field-label-asterisk__color; - } - - .product-options-bottom { - clear: left; - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .bundle-options-container { - .legend.title { - @extend .abs-reset-left-margin-desktop; - } - - .bundle-options-wrapper, - .product-options-wrapper { - float: left; - width: 57%; - } - - .block-bundle-summary { - float: right; - position: relative; - width: 40%; - } - - .bundle-options-wrapper, - .block-bundle-summary { - .page-layout-2columns-left &, - .page-layout-2columns-right &, - .page-layout-3columns & { - width: 48%; - } - } - } -} diff --git a/Magento_Catalog/styles/_module.scss b/Magento_Catalog/styles/_module.scss index d607759e..f0cb6466 100644 --- a/Magento_Catalog/styles/_module.scss +++ b/Magento_Catalog/styles/_module.scss @@ -1,5 +1,803 @@ -@import 'variables'; +$product-grid-items-per-row-layout-default : 2; + +$product-grid-items-per-row-layout-1-screen-s : 3; +$product-grid-items-per-row-layout-1-screen-m : 4; +$product-grid-items-per-row-layout-1-screen-l : 5; + +$product-grid-items-per-row-layout-2-left-screen-s : 3; +$product-grid-items-per-row-layout-2-left-screen-m : 4; +$product-grid-items-per-row-layout-2-left-screen-l : ''; + +$product-grid-items-per-row-layout-2-right-screen-s : 3; +$product-grid-items-per-row-layout-2-right-screen-m : 4; +$product-grid-items-per-row-layout-2-right-screen-l : ''; + +$product-grid-items-per-row-layout-3-screen-s : 3; +$product-grid-items-per-row-layout-3-screen-m : ''; +$product-grid-items-per-row-layout-3-screen-l : ''; + +$product-grid-items-padding : 0 $indent__base $indent__base; +$product-grid-items-margin : 0 0 $indent__s; + +$product-name-text-decoration : none; +$product-name-text-decoration-hover : $link__hover__text-decoration; + +$toolbar-mode-icon-font-size : 26px; +$product-h1-margin-bottom-desktop : $indent__base; + @import 'module/listings'; @import 'module/toolbar'; @import 'module/gallery'; -@import 'module/common'; + +// +// Category view +// --------------------------------------------- + +.old-price, +.old.price { + text-decoration: line-through; +} + +.prices-tier { + .price-container { + .price-including-tax { + + .price-excluding-tax { + &:before { + content: '(' attr(data-label) ': '; + } + + &:last-child:after { + content: ')'; + } + } + } + + .weee[data-label] { + display: inline; + + .price { + @include lib-font-size(11); + } + + &:before { + content: ' +' attr(data-label) ': '; + } + } + } +} + +.actual-price { + font-weight: $font-weight__bold; +} + +.product.name a { + @extend .abs-product-link; +} + +.category-image { + .image { + display: block; + height: auto; + max-width: 100%; + } +} + +.category-image, +.category-description { + margin-bottom: $indent__base; +} + +// +// Product images general container +// --------------------------------------------- + +.product-image-container { + display: inline-block; + max-width: 100%; +} + +.product-image-wrapper { + display: block; + height: 0; + overflow: hidden; + position: relative; + z-index: 1; +} + +.product-image-photo { + bottom: 0; + display: block; + height: auto; + left: 0; + margin: auto; + max-width: 100%; + position: absolute; + right: 0; + top: 0; +} + +// +// Product view +// --------------------------------------------- + +.product.media { + .product.photo .photo.image { + @extend .abs-adaptive-images-centered; + } + + .placeholder .photo.container { + max-width: 100%; + } + + .notice { + @include lib-css(color, $text__color__muted); + @include lib-font-size($font-size__s); + margin: $indent__s 0; + } + + .product.thumbs { + margin: $indent__base 0 $indent__l; + } + + .items.thumbs { + @include lib-list-inline(); + + .active { + display: block; + line-height: 1; + } + } +} + +.product.info.detailed { + clear: both; + margin-bottom: 30px; + + .additional-attributes { + width: auto; + @include lib-table-resize( + $_th-padding-left : 0, + $_th-padding-right : $indent__l, + $_th-padding-bottom : $indent__s, + $_td-padding-bottom : $indent__s + ); + } +} + +.product-info-main { + .page-title-wrapper { + .page-title { + line-height: $line-height__base; + margin-bottom: $indent__s; + } + } + + .stock { + &.available, + &.unavailable { + display: inline-block; + font-weight: $font-weight__bold; + margin-right: $indent__base; + text-transform: uppercase; + vertical-align: top; + } + } + + .product { + &.attribute { + &.sku { + display: inline-block; + vertical-align: top; + @include lib-css(color, $text__color__muted); + + > .value { + display: inline-block; + vertical-align: top; + word-break: break-all; + } + + .type { + margin-right: $indent__xs; + } + } + + &.overview { + margin: $indent__base 0; + } + } + + &.alert { + margin: $indent__s 0; + } + } + + .price-box { + margin-top: $indent__s; + } + + .product-reviews-summary .reviews-actions { + @include lib-font-size($font-size__base); + } +} + +.product-options-wrapper { + .fieldset-product-options-inner { + .legend { + @include lib-css(font-weight, $font-weight__bold); + @include lib-css(margin, 0 0 $indent__xs); + @include lib-font-size(14px); + border: none; + display: inline-block; + float: none; + padding: 0; + } + + // Date & Time custom option (Affect Time that goes only after Date) + input.datetime-picker { + ~ select.datetime-picker { + margin-top: $indent__s; + } + } + + &.required, + &._required { + .legend { + &:after { + content: '*'; + @include lib-typography( + $_font-size : $form-field-label-asterisk__font-size, + $_color : $form-field-label-asterisk__color, + $_font-family : $form-field-label-asterisk__font-family, + $_font-weight : $form-field-label-asterisk__font-weight, + $_line-height : $form-field-label-asterisk__line-height, + $_font-style : $form-field-label-asterisk__font-style + ); + @include lib-css(margin, $form-field-label-asterisk__margin); + } + } + } + } + + .field { + .note { + display: block; + } + + .price-notice { + @extend .abs-adjustment-incl-excl-tax; + } + } +} + +.product-info-main, +.product-options-bottom { + .price-box { + .price-including-tax + .price-excluding-tax, + .weee + .price-excluding-tax, + .weee { + @include lib-font-size(12); + line-height: 14px; + margin-bottom: $indent__xs; + + .price { + @include lib-font-size(12); + font-weight: $font-weight__bold; + } + } + + .price-wrapper .price { + @include lib-font-size(18); + font-weight: $font-weight__bold; + } + + .price { + white-space: nowrap; + } + } + + .special-price { + display: block; + margin: $indent__s 0; + + .price-container { + @include lib-font-size(14); + } + + .price-label + .price-wrapper { + display: inline-block; + } + } + + .old-price, + .special-price { + .price-label { + &:after { + content: ': '; + } + } + } + + .box-tocart { + margin: $indent__base 0; + + .field.qty { + padding-right: .75 * $indent__base; + } + + .input-text.qty { + $tocart-input-size: $button__line-height__l + 30px; + height: $tocart-input-size; + text-align: center; + width: $tocart-input-size; + } + + .actions { + text-align: center; + } + + .action.tocart { + @extend .abs-button-l; + } + } + + .product-addto-links { + margin: $indent__base 0; + } + + .action.tocompare { + @extend .abs-action-addto-product; + vertical-align: top; + } +} + +.prices-tier { + @extend .abs-reset-list; + @include lib-css(background, $sidebar__background-color); + margin: $indent__s 0; + padding: $indent__s (0.75 * $indent__base); + + .price-container { + display: inline-block; + } + + .price-including-tax, + .price-excluding-tax, + .weee { + display: inline-block; + + .price { + @include lib-font-size(14); + font-weight: $font-weight__bold; + } + } +} + +.ui-dialog-titlebar-close { + @include lib-button-as-link(); +} + +.block.related { + .action.select { + margin: 0 $indent__xs; + } +} + +// +// Sidebar product view +// --------------------------------------------- + +.sidebar { + .product-items { + .product-item { + margin-bottom: $indent__base; + position: relative; + } + + .product-item-info { + position: relative; + width: auto; + + .product-item-photo { + left: 0; + position: absolute; + top: 0; + } + } + + .product-item-name { + margin-top: 0; + } + + .product-item-details { + margin: 0 0 0 85px; + } + + .product-item-actions { + display: block; + margin-top: $indent__s; + } + + .price-box { + display: block; + margin: 7px 0; + } + + .text { + margin-right: 8px; + } + + .counter { + @include lib-css(color, $primary__color__lighter); + @include lib-font-size(12); + white-space: nowrap; + } + + .minilist { + .price { + display: inline; + padding: 0; + } + + .weee:before { + display: inline-block; + } + } + } + + .action { + &.delete { + @extend .abs-remove-button-for-blocks; + position: absolute; + right: 0; + top: 0; + } + } + + .subtitle { + @extend .abs-no-display; + } + + // + // Product images only + // --------------------------------------------- + + .product-items-images { + @extend .abs-add-clearfix; + margin-left: -$indent__xs; + + .product-item { + @extend .abs-add-box-sizing; + float: left; + padding-left: $indent__xs; + } + } + + // + // Product names only + // --------------------------------------------- + + .product-items-names { + .product-item { + margin-bottom: $indent__s; + } + + .product-item-name { + margin: 0; + } + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m) { + .catalog-product-view { + .column.main { + @include lib-vendor-prefix-display(flex); + @include lib-vendor-prefix-flex-direction(column); + } + + .product.media { + @include lib-vendor-prefix-order(-1); + } + } + + .product-info-main .box-tocart { + .actions { + .action.tocart { + @extend .abs-button-responsive-smaller; + } + } + } + + .block.related { + .action.select { + display: block; + margin: $indent__xs 0; + } + } + + .compare, + .product-addto-links .action.tocompare, + .product-item-actions .actions-secondary > .action.tocompare, + [class*='block-compare'] { + display: none; + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .product-info-main, + .product-options-bottom { + .box-tocart { + display: table; + + .field.qty { + display: table-cell; + } + + .actions { + display: table-cell; + padding-top: $indent__m; + text-align: center; + vertical-align: bottom; + } + } + } + + .product-info-main { + .page-title-wrapper { + .page-title { + margin-top: -13px; + } + } + } + + .sidebar { + .product-items { + .product-item-info { + .product-item-photo { + float: left; + left: auto; + margin: 0 $indent__s $indent__s 0; + position: relative; + top: auto; + } + } + + .product-item-details { + margin: 0; + } + + .product-item-actions { + clear: left; + } + } + } + + .product-add-form { + @extend .abs-revert-field-type-desktop; + } +} + +// +// Desktop large +// _____________________________________________ + +@include min-screen($screen__xl) { + .sidebar { + .product-items { + .product-item-info { + .product-item-photo { + float: none; + left: 0; + margin: 0; + position: absolute; + top: 0; + } + } + + .product-item-details { + margin-left: 85px; + } + } + } +} + +// +// Category page layout +// --------------------------------------------- + +@include min-screen($screen__m) { + .product-info-main { + float: right; + } + + .product.media { + float: left; + margin-bottom: $indent__m; + } + + .page-layout-1column { + .product-info-main { + width: 40%; + } + .product.media { + width: 57%; + } + } + + .page-layout-2columns-left, + .page-layout-2columns-right, + .page-layout-3columns { + .product-info-main { + width: 48%; + } + + .product.media { + width: 50%; + } + } +} + +// +// Compare Products Page +// --------------------------------------------- + +body.catalog-product-compare-index { + .action.print { + float: right; + margin: 15px 0; + } +} + +.table-wrapper.comparison { + clear: both; + max-width: 100%; + overflow-x: auto; +} + +.table-comparison { + table-layout: fixed; + + .cell.label.remove, + .cell.label.product { + span { + @extend .abs-visually-hidden; + } + } + + .cell.label, + td:last-child { + border-right: $table__border-width $table__border-style $table__border-color; + } + + .cell { + padding: 15px; + width: 140px; + + .attribute.value { + overflow: hidden; + width: 100%; + } + + &.product.info, + &.product.label { + border-bottom: $table__border-width $table__border-style $table__border-color; + } + + &.label { + .attribute.label { + display: block; + width: 100%; + word-wrap: break-word; + } + } + + &.attribute { + @include lib-font-size(13); + img { + height: auto; + max-width: 100%; + } + } + } + + .product-item-photo { + display: block; + margin: 0 auto 15px; + } + + .product-image-photo { + margin-left: 0; + } + + .product-item-actions, + .price-box, + .product.rating, + .product-item-name { + display: block; + margin: 15px 0; + } + + .product-addto-links { + margin-top: 15px; + + .action.split, + .action.toggle { + @include lib-button-s(); + } + + .action.toggle { + padding: 0; + } + } + + .cell.remove { + padding-bottom: 0; + padding-top: 0; + text-align: right; + + .action.delete { + @extend .abs-remove-button-for-blocks; + } + } + + .product-item-actions { + > .actions-primary { + + .actions-secondary { + margin-top: $indent__s; + } + } + } + + .action { + &.tocart { + white-space: nowrap; + } + } +} + +.comparison.headings { + @include lib-css(background, $page__background-color); + left: 0; + position: absolute; + top: 0; + width: auto; + z-index: 2; +} + +.block-compare { + .block-title { + @extend .abs-block-title; + } + + .product-item .product-item-name { + margin-left: 22px; + } + + .action { + &.delete { + @extend .abs-remove-button-for-blocks; + left: -6px; + position: absolute; + top: 0; + } + + &.compare { + @extend .abs-revert-secondary-color; + } + } + + .counter { + @extend .abs-block-items-counter; + } + + .actions-toolbar { + margin: 17px 0 0; + } +} diff --git a/Magento_Catalog/styles/_variables.scss b/Magento_Catalog/styles/_variables.scss deleted file mode 100644 index 9538cc2e..00000000 --- a/Magento_Catalog/styles/_variables.scss +++ /dev/null @@ -1,26 +0,0 @@ -$product-grid-items-per-row-layout-default : 2 !default; - -$product-grid-items-per-row-layout-1-screen-s : 3 !default; -$product-grid-items-per-row-layout-1-screen-m : 4 !default; -$product-grid-items-per-row-layout-1-screen-l : 5 !default; - -$product-grid-items-per-row-layout-2-left-screen-s : 3 !default; -$product-grid-items-per-row-layout-2-left-screen-m : 4 !default; -$product-grid-items-per-row-layout-2-left-screen-l : '' !default; - -$product-grid-items-per-row-layout-2-right-screen-s: 3 !default; -$product-grid-items-per-row-layout-2-right-screen-m: 4 !default; -$product-grid-items-per-row-layout-2-right-screen-l: '' !default; - -$product-grid-items-per-row-layout-3-screen-s : 3 !default; -$product-grid-items-per-row-layout-3-screen-m : '' !default; -$product-grid-items-per-row-layout-3-screen-l : '' !default; - -$product-grid-items-padding : 0 $indent__base $indent__base !default; -$product-grid-items-margin : 0 0 $indent__s !default; - -$product-name-text-decoration : none !default; -$product-name-text-decoration-hover : $link__hover__text-decoration !default; - -$toolbar-mode-icon-font-size : 26px !default; -$product-h1-margin-bottom-desktop : $indent__base !default; diff --git a/Magento_Catalog/styles/_widgets.scss b/Magento_Catalog/styles/_widgets.scss index 14c13fff..62a56683 100644 --- a/Magento_Catalog/styles/_widgets.scss +++ b/Magento_Catalog/styles/_widgets.scss @@ -1,31 +1,38 @@ -.block-category-link, -.block-product-link { +.block-product-link, +.block-category-link { &.widget { display: block; margin-bottom: $indent__base; } } + .block-product-link-inline { &.widget { margin: 0; } } + .block.widget { .product-item-info { width: auto; } + .pager { padding: 0; + .toolbar-amount { float: none; - font-size: 12px; + @include lib-font-size(12); } + .pages-item-previous { padding-left: 0; } + .pages-item-next { position: relative; } + .items { white-space: nowrap; } @@ -33,57 +40,77 @@ } // -// Mobile +// Mobile // _____________________________________________ @include min-screen($screen__s) { .block.widget .products-grid .product-item, .page-layout-1column .block.widget .products-grid .product-item, .page-layout-3columns .block.widget .products-grid .product-item { - width: 33.3333%; + width: 100% / 3; } } + // -// Desktop +// Desktop // _____________________________________________ @include min-screen($screen__m) { .block.widget .products-grid .product-item { - width: 33.3333%; + width: 100% / 3; + + .sidebar & { + margin-left: 0; + width: 100%; + + .actions-secondary { + display: block; + padding: 10px 0; + } + } } + .page-layout-1column .block.widget .products-grid .product-item { - width: 25%; + width: 100% / 4; } + .page-layout-3columns .block.widget .products-grid .product-item { - width: 50%; + width: 100% / 2; } } @include min-screen($screen__l) { .block.widget .products-grid .product-item { - width: 20%; + width: 100% / 5; } + .page-layout-1column .block.widget .products-grid .product-item { - width: 16.6666%; - margin-left: calc((100% - 5 * (100%/6)) / 4); - &:nth-child(4n+1) { - margin-left: calc((100% - 5 * (100%/6)) / 4); + margin-left: calc((100% - 5 * (100% / 6)) / 4); + width: 100% / 6; + + &:nth-child(4n + 1) { + margin-left: calc((100% - 5 * (100% / 6)) / 4); } - &:nth-child(5n+1) { + + &:nth-child(5n + 1) { margin-left: 0; } } + .page-layout-3columns .block.widget .products-grid .product-item { - width: 25%; + width: 100% / 4; } + .block.widget .products-grid .product-items { margin: 0; } + .block.widget .products-grid .product-item { - width: 24.439%; margin-left: calc((100% - 4 * 24.439%) / 3); padding: 0; - &:nth-child(4n+1) { + width: 24.439%; + + &:nth-child(4n + 1) { margin-left: 0; } } @@ -94,8 +121,10 @@ .item:not(.pages-item-next):not(.pages-item-previous) { @extend .abs-no-display-desktop; } + .pages-item-next { padding: 0; + .action { margin: 0; } diff --git a/Magento_Catalog/styles/module/_common.scss b/Magento_Catalog/styles/module/_common.scss deleted file mode 100644 index 1bc76272..00000000 --- a/Magento_Catalog/styles/module/_common.scss +++ /dev/null @@ -1,771 +0,0 @@ -// -// Category view -// --------------------------------------------- - -.old-price, -.old.price { - text-decoration: line-through; -} - -.prices-tier { - .price-container { - .price-including-tax { - + .price-excluding-tax { - &:before { - content: '(' attr(data-label) ': '; - } - - &:last-child:after { - content: ')'; - } - } - } - - .weee[data-label] { - display: inline; - - .price { - font-size: 11px; - } - - &:before { - content: ' +' attr(data-label) ': '; - } - } - } -} - -.actual-price { - font-weight: $font-weight__bold; -} - -.product.name a { - @extend .abs-product-link; -} - -.category { - &-image { - .image { - display: block; - height: auto; - max-width: 100%; - } - } - - &-image, - &-description { - margin-bottom: $indent__base; - } -} - -// -// Product images general container -// --------------------------------------------- - -.product-image { - &-container { - display: inline-block; - max-width: 100%; - } - - &-wrapper { - display: block; - height: 0; - overflow: hidden; - position: relative; - z-index: 1; - } - - &-photo { - bottom: 0; - display: block; - height: auto; - left: 0; - margin: auto; - max-width: 100%; - position: absolute; - right: 0; - top: 0; - } -} - -// -// Product view -// --------------------------------------------- - -.product.media { - .product.photo .photo.image { - @extend .abs-adaptive-images-centered; - } - - .placeholder .photo.container { - max-width: 100%; - } - - .notice { - color: $text__color__muted; - font-size: $font-size__s; - margin: $indent__s 0; - } - - .product.thumbs { - margin: $indent__base 0 $indent__l; - } - - .items.thumbs { - @include lib-list-inline(); - - .active { - display: block; - line-height: 1; - } - } -} - -.product.info.detailed { - clear: both; - margin-bottom: 30px; - - .additional-attributes { - width: auto; - @include lib-table-resize( - $_th-padding-left : 0, - $_th-padding-right : $indent__l, - $_th-padding-bottom: $indent__s, - $_td-padding-bottom: $indent__s - ); - } -} - -.product-info-main { - .page-title-wrapper { - .page-title { - line-height: $line-height__base; - margin-bottom: $indent__s; - } - } - - .stock { - &.available, - &.unavailable { - display: inline-block; - font-weight: $font-weight__bold; - margin-right: $indent__base; - text-transform: uppercase; - vertical-align: top; - } - } - - .product { - &.attribute { - &.sku { - display: inline-block; - vertical-align: top; - color: $text__color__muted; - - > .value { - display: inline-block; - vertical-align: top; - word-break: break-all; - } - - .type { - margin-right: $indent__xs; - } - } - - &.overview { - margin: $indent__base 0; - } - } - - &.alert { - margin: $indent__s 0; - } - } - - .price-box { - margin-top: $indent__s; - } - - .product-reviews-summary .reviews-actions { - font-size: $font-size__base; - } -} - -.product-options-wrapper { - .fieldset-product-options-inner { - .legend { - font-weight: $font-weight__bold; - margin: 0 0 $indent__xs; - font-size: 14px; - border: none; - display: inline-block; - padding: 0; - } - - &.required, - &._required { - .legend { - &:after { - content: '*'; - @include lib-typography( - $_font-size : $form-field-label-asterisk__font-size, - $_color : $form-field-label-asterisk__color, - $_font-family: $form-field-label-asterisk__font-family, - $_font-weight: $form-field-label-asterisk__font-weight, - $_line-height: $form-field-label-asterisk__line-height, - $_font-style : $form-field-label-asterisk__font-style - ); - margin: $form-field-label-asterisk__margin; - } - } - } - } - - .field { - .note { - display: block; - } - - .price-notice { - @extend .abs-adjustment-incl-excl-tax; - } - } -} - -.product-info-main, -.product-options-bottom { - .price-box { - .price-including-tax + .price-excluding-tax, - .weee + .price-excluding-tax, - .weee { - font-size: 12px; - line-height: 14px; - margin-bottom: $indent__xs; - - .price { - font-size: 12px; - font-weight: $font-weight__bold; - } - } - - .price-wrapper .price { - font-size: 18px; - font-weight: $font-weight__bold; - } - - .price { - white-space: nowrap; - } - } - - .special-price { - display: block; - margin: $indent__s 0; - - .price-container { - font-size: 14px; - } - - .price-label + .price-wrapper { - display: inline-block; - } - } - - .old-price, - .special-price { - .price-label { - &:after { - content: ': '; - } - } - } - - .box-tocart { - margin: $indent__base 0; - - .field.qty { - padding-right: 0.75 * $indent__base; - } - - .input-text.qty { - $tocart-input-size: $button__line-height__l + 28px; - height: $tocart-input-size + 2px; - text-align: center; - width: $tocart-input-size + 2px; - } - - .actions { - text-align: center; - } - - .action.tocart { - @extend .abs-button-l; - } - } - - .product-addto-links { - margin: $indent__base 0; - } - - .action.tocompare { - @extend .abs-action-addto-product; - vertical-align: top; - } -} - -.prices-tier { - @extend .abs-reset-list; - background: $sidebar__background-color; - margin: $indent__s 0; - padding: $indent__s (0.75 * $indent__base); - - .price-container { - display: inline-block; - } - - .price-including-tax, - .price-excluding-tax, - .weee { - display: inline-block; - - .price { - font-size: 14px; - font-weight: $font-weight__bold; - } - } -} - -.ui-dialog-titlebar-close { - @include lib-button-as-link(); -} - -.block.related { - .action.select { - margin: 0 $indent__xs; - } -} - -// -// Sidebar product view -// --------------------------------------------- - -.sidebar { - .product-items { - .product-item { - margin-bottom: $indent__base; - position: relative; - - &-info { - position: relative; - width: auto; - - .product-item-photo { - left: 0; - position: absolute; - top: 0; - } - } - - &-name { - margin-top: 0; - } - - &-details { - margin: 0 0 0 85px; - } - - &-actions { - display: block; - margin-top: $indent__s; - } - } - - .price-box { - display: block; - margin: 7px 0; - } - - .text { - margin-right: 8px; - } - - .counter { - color: $primary__color__lighter; - font-size: 12px; - white-space: nowrap; - } - - .minilist { - .price { - display: inline; - padding: 0; - } - - .weee:before { - display: inline-block; - } - } - } - - .action { - &.delete { - @extend .abs-remove-button-for-blocks; - position: absolute; - right: 0; - top: 0; - } - } - - .subtitle { - @extend .abs-no-display; - } - - // - // Product images only - // --------------------------------------------- - - .product-items-images { - @extend .abs-add-clearfix; - margin-left: -$indent__xs; - - .product-item { - @extend .abs-add-box-sizing; - float: left; - padding-left: $indent__xs; - } - } - - // - // Product names only - // --------------------------------------------- - - .product-items-names { - .product-item { - margin-bottom: $indent__s; - } - - .product-item-name { - margin: 0; - } - } -} - - -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__m) { - .catalog-product-view { - .column.main { - display: flex; - flex-direction: column; - } - - .product.media { - order: -1; - } - } - - .product-info-main .box-tocart { - .actions { - .action.tocart { - @extend .abs-button-responsive-smaller; - } - } - } - - .block.related { - .action.select { - display: block; - margin: $indent__xs 0; - } - } - - .compare, - .product-addto-links .action.tocompare, - .product-item-actions .actions-secondary > .action.tocompare, - [class*='block-compare'] { - display: none; - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .product-info-main, - .product-options-bottom { - .box-tocart { - display: table; - - .field.qty { - display: table-cell; - } - - .actions { - display: table-cell; - text-align: center; - vertical-align: bottom; - } - } - } - - .product-info-main { - .page-title-wrapper { - .page-title { - margin-top: -13px; - } - } - } - - .sidebar { - .product-items { - .product-item { - &-info { - .product-item-photo { - float: left; - left: auto; - margin: 0 $indent__s $indent__s 0; - position: relative; - top: auto; - } - } - - &-details { - margin: 0; - } - - &-actions { - clear: left; - } - } - } - } - - .product-add-form { - @extend .abs-revert-field-type-desktop; - } -} - -// -// Desktop large -// _____________________________________________ - -@include min-screen($screen__xl) { - .sidebar { - .product-items { - .product-item { - &-info { - .product-item-photo { - position: absolute; - top: 0; - left: 0; - margin: 0; - } - } - - &-details { - margin-left: 85px; - } - } - } - } -} - -// -// Category page layout -// --------------------------------------------- - -@include min-screen($screen__m) { - .product-info-main { - float: right; - } - - .product.media { - float: left; - margin-bottom: $indent__m; - } - - .page-layout-1column { - .product-info-main { - width: 40%; - } - .product.media { - width: 57%; - } - } - - .page-layout-2columns-left, - .page-layout-2columns-right, - .page-layout-3columns { - .product-info-main { - width: 48%; - } - - .product.media { - width: 50%; - } - } -} - -// -// Compare Products Page -// --------------------------------------------- - -body.catalog-product-compare-index { - .action.print { - float: right; - margin: 15px 0; - } -} - -.table-wrapper.comparison { - clear: both; - max-width: 100%; - overflow-x: auto; -} - -.table-comparison { - table-layout: fixed; - - .cell.label.remove, - .cell.label.product { - span { - @extend .abs-visually-hidden; - } - } - - .cell.label, - td:last-child { - border-right: $table__border-width $table__border-style $table__border-color; - } - - .cell { - padding: 15px; - width: 140px; - - .attribute.value { - overflow: hidden; - width: 100%; - } - - &.product.info, - &.product.label { - border-bottom: $table__border-width $table__border-style $table__border-color; - } - - &.label { - .attribute.label { - display: block; - width: 100%; - word-wrap: break-word; - } - } - - &.attribute { - font-size: 13px; - img { - height: auto; - max-width: 100%; - } - } - } - - .product-item-photo { - display: block; - margin: 0 auto 15px; - } - - .product-image-photo { - margin-left: 0; - } - - .product-item-actions, - .price-box, - .product.rating, - .product-item-name { - display: block; - margin: 15px 0; - } - - .product-addto-links { - margin-top: 15px; - - .action.split, - .action.toggle { - @include lib-button-s(); - } - - .action.toggle { - padding: 0; - } - } - - .cell.remove { - padding-bottom: 0; - padding-top: 0; - text-align: right; - - .action.delete { - @extend .abs-remove-button-for-blocks; - } - } - - .product-item-actions { - > .actions-primary { - + .actions-secondary { - margin-top: $indent__s; - } - } - } - - .action { - &.tocart { - white-space: nowrap; - } - } -} - -.comparison.headings { - background: $page__background-color; - left: 0; - position: absolute; - top: 0; - width: auto; - z-index: 2; -} - -.block-compare { - .block-title { - @extend .abs-block-title; - } - - .product-item .product-item-name { - margin-left: 22px; - } - - .action { - &.delete { - @extend .abs-remove-button-for-blocks; - left: -6px; - position: absolute; - top: 0; - } - - &.compare { - @extend .abs-revert-secondary-color; - } - } - - .counter { - @extend .abs-block-items-counter; - } - - .actions-toolbar { - margin: 17px 0 0; - } -} diff --git a/Magento_CatalogEvent/styles/_module.scss b/Magento_CatalogEvent/styles/_module.scss index 36b4dafb..d501ccde 100644 --- a/Magento_CatalogEvent/styles/_module.scss +++ b/Magento_CatalogEvent/styles/_module.scss @@ -1,2 +1,131 @@ -@import 'variables'; -@import 'module/common'; +$catalog-event-background-color : $color-gray94; +$catalog-event-color : $primary__color; + +// +// Catalog Events +// --------------------------------------------- + +.block-category-event { + @include lib-css(background, $catalog-event-background-color); + @include lib-css(color, $catalog-event-color); + padding: $indent__s 0 15px; + text-align: center; + + &.block:last-child { + margin-bottom: $indent__s; + } + + .block-title { + margin: 0 0 $indent__s; + + strong { + @include lib-font-size(15); + font-weight: $font-weight__light; + } + } + + .ticker { + @include lib-list-reset-styles(); + + li { + display: none; + margin: 0 15px; + } + + .value { + @include lib-font-size(18); + font-weight: $font-weight__light; + } + + .label { + @include lib-font-size(10); + display: block; + text-transform: lowercase; + } + } + + .dates { + display: table; + margin: 0 auto; + + .start, + .end { + display: table-cell; + vertical-align: top; + } + + .date { + @include lib-font-size(18); + } + + .time { + display: block; + } + + .start { + padding-right: $indent__xl; + position: relative; + + &:after { + @include lib-font-size(18); + content: '\2013'; + display: block; + position: absolute; + right: 15px; + top: 0; + } + } + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .block-category-event { + &.block:last-child { + margin-bottom: $indent__l; + padding: $indent__s 0 $indent__l; + } + + .block-title { + margin: 0; + + strong { + @include lib-font-size(24); + } + } + + .ticker { + li { + display: none; + margin: 0 50px; + } + + .value { + @include lib-font-size(60); + } + + .label { + @include lib-font-size(14); + text-transform: none; + } + } + + .dates { + .date { + @include lib-font-size(50); + } + + .start { + padding-right: 50px; + + &:after { + @include lib-font-size(50); + right: 10px; + } + } + } + } +} diff --git a/Magento_CatalogEvent/styles/_variables.scss b/Magento_CatalogEvent/styles/_variables.scss deleted file mode 100644 index 6b3a5629..00000000 --- a/Magento_CatalogEvent/styles/_variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -$catalog-event-background-color: $color-gray94 !default; -$catalog-event-color : $primary__color !default; diff --git a/Magento_CatalogEvent/styles/_widgets.scss b/Magento_CatalogEvent/styles/_widgets.scss index 84807f13..e29213d2 100644 --- a/Magento_CatalogEvent/styles/_widgets.scss +++ b/Magento_CatalogEvent/styles/_widgets.scss @@ -7,7 +7,7 @@ .block-content { position: relative; - & > .action { + > .action { cursor: pointer; margin-top: -6px; position: absolute; @@ -16,15 +16,15 @@ &.backward, &.forward { - opacity: 0.5; + opacity: .5; overflow: hidden; width: 20px; @include lib-icon-font( - $_icon-font-content : $icon-prev, - $_icon-font-text-hide : true, - $_icon-font-size : 55px, - $_icon-font-line-height: 30px + $_icon-font-content : $icon-prev, + $_icon-font-text-hide : true, + $_icon-font-size : 55px, + $_icon-font-line-height : 30px ); &:before { @@ -66,7 +66,7 @@ white-space: nowrap; .item { - background: $catalog-event-background-color; + @include lib-css(background, $catalog-event-background-color); display: inline-block; text-align: center; vertical-align: top; @@ -84,7 +84,7 @@ .category-name { display: inline-block; - font-size: 18px; + @include lib-font-size(18); padding: 15px 5px 0; word-break: break-all; } @@ -98,13 +98,13 @@ } .value { - font-size: 26px; + @include lib-font-size(26); font-weight: $font-weight__light; } .label { display: block; - font-size: 13px; + @include lib-font-size(13); } } @@ -119,19 +119,19 @@ .start { &:after { - font-size: 18px; + @include lib-font-size(18); content: '\2013'; display: block; } } .date { - font-size: 18px; + @include lib-font-size(18); font-weight: $font-weight__light; } .time { - font-size: 13px; + @include lib-font-size(13); } } @@ -164,8 +164,8 @@ } &.event { - @extend .abs-action-link-button; @include lib-button-primary(); + @extend .abs-action-link-button; margin-top: 15px; &:hover { diff --git a/Magento_CatalogEvent/styles/module/_common.scss b/Magento_CatalogEvent/styles/module/_common.scss deleted file mode 100644 index 6cc8c8c9..00000000 --- a/Magento_CatalogEvent/styles/module/_common.scss +++ /dev/null @@ -1,128 +0,0 @@ -// -// Catalog Events -// _____________________________________________ - -.block-category-event { - background: $catalog-event-background-color; - color: $catalog-event-color; - padding: $indent__s 0 15px; - text-align: center; - - &.block:last-child { - margin-bottom: $indent__s; - } - - .block-title { - margin: 0 0 $indent__s; - - strong { - font-size: 15px; - font-weight: $font-weight__light; - } - } - - .ticker { - @include lib-list-reset-styles(); - - li { - display: none; - margin: 0 15px; - } - - .value { - font-size: 18px; - font-weight: $font-weight__light; - } - - .label { - font-size: 10px; - display: block; - text-transform: lowercase; - } - } - - .dates { - display: table; - margin: 0 auto; - - .start, - .end { - display: table-cell; - vertical-align: top; - } - - .date { - font-size: 18px; - } - - .time { - display: block; - } - - .start { - padding-right: $indent__xl; - position: relative; - - &:after { - font-size: 18px; - content: '\2013'; - display: block; - position: absolute; - right: 15px; - top: 0; - } - } - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .block-category-event { - &.block:last-child { - margin-bottom: $indent__l; - padding: $indent__s 0 $indent__l; - } - - .block-title { - margin: 0; - - strong { - font-size: 24px; - } - } - - .ticker { - li { - display: none; - margin: 0 50px; - } - - .value { - font-size: 60px; - } - - .label { - font-size: 14px; - text-transform: none; - } - } - - .dates { - .date { - font-size: 50px; - } - - .start { - padding-right: 50px; - - &:after { - font-size: 50px; - right: 10px; - } - } - } - } -} diff --git a/Magento_CatalogSearch/styles/_module.scss b/Magento_CatalogSearch/styles/_module.scss index 36b4dafb..e94cfdbe 100644 --- a/Magento_CatalogSearch/styles/_module.scss +++ b/Magento_CatalogSearch/styles/_module.scss @@ -1,2 +1,248 @@ -@import 'variables'; -@import 'module/common'; +// +// Variables +// _____________________________________________ + +$autocomplete__background-color : $color-white; +$autocomplete__border : 1px solid $form-element-input__border-color; +$autocomplete-item__border : 1px solid $color-gray90; +$autocomplete-item__hover__color : $color-gray91; +$autocomplete-item-amount__color : $color-gray60; + +.block-search { + margin-bottom: 0; + + .block { + &-title { + display: none; + } + } + + .block-content { + margin-bottom: 0; + } + + .label { + @include lib-icon-font( + $_icon-font-content : $icon-search, + $_icon-font-size : 35px, + $_icon-font-line-height : 33px, + $_icon-font-color : $minicart-icons-color, + $_icon-font-color-hover : $minicart-icons-color-hover, + $_icon-font-color-active : $minicart-icons-color-hover, + $_icon-font-text-hide : true + ); + display: inline-block; + float: right; + + &.active { + + .control { + input { + position: static; + } + } + } + } + + .action.search { + display: none; + } + + .control { + border-top: 1px solid $border-color__base; + clear: both; + margin: 0 -$layout__width-xs-indent -1px; + padding: 0 $layout__width-xs-indent; + } + + input { + left: -300%; + margin: 15px 0; + position: absolute; + } + + .nested { + display: none; + } +} + +.search-autocomplete { + @extend .abs-add-box-sizing; + display: none; + margin-top: -15px; + overflow: hidden; + position: absolute; + z-index: 3; + + ul { + @include lib-list-reset-styles(); + + li { + @include lib-css(border-top, $autocomplete-item__border); + cursor: pointer; + margin: 0; + padding: $indent__xs $indent__xl $indent__xs $indent__s; + position: relative; + text-align: left; + white-space: normal; + + &:not(:empty) { + border-top: 0; + @include lib-css(border, $autocomplete__border); + @include lib-css(background, $autocomplete__background-color); + } + + &:first-child { + border-top: none; + } + + &:hover, + &.selected { + @include lib-css(background, $autocomplete-item__hover__color); + } + + .amount { + @include lib-css(color, $autocomplete-item-amount__color); + position: absolute; + right: 7px; + top: $indent__xs; + } + } + } +} + +.form.search.advanced { + .fields.range { + .field { + &:first-child { + position: relative; + + .control { + padding-right: 25px; + + &:after { + content: ' \2013 '; + display: inline-block; + position: absolute; + right: 0; + text-align: center; + top: 6px; + width: 25px; + } + } + } + + &:last-child { + position: relative; + + div.mage-error[generated] { + left: 0; + position: absolute; + top: 32px; + } + } + + &.with-addon { + .control { + padding-right: 45px; + } + } + } + } + + .group.price { + .addon { + .addafter { + background: none; + border: 0; + padding-top: 6px; + position: absolute; + right: 0; + top: 0; + } + } + } +} + +.search.summary { + margin-bottom: $indent__s; +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m) { + .block-search { + .block-content { + margin-bottom: 0; + } + } +} + +@include max-screen($screen__s) { + .block-search { + margin-top: $indent__s; + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .block-search { + float: right; + padding-left: 15px; + position: relative; + width: 250px; + z-index: 4; + + .label { + @extend .abs-visually-hidden-desktop; + } + + .control { + border-top: 0; + margin: 0; + padding: 0 0 25px; + } + + .nested { + display: block; + padding-top: 5px; + position: absolute; + } + + input { + @include lib-input-placeholder($form-element-input-placeholder__color); + margin: 0; + padding-right: 35px; + position: static; + } + + .action.search { + display: inline-block; + @include lib-button-icon( + $_icon-font-content : $icon-search, + $_icon-font-text-hide : true, + $_icon-font-color : $header-icons-color + ); + @include lib-button-reset(); + padding: $indent__xs 0; + position: absolute; + right: 10px; + top: 0; + z-index: 1; + + &:focus { + &:before { + @include lib-css(color, $color-gray20); + } + } + } + } + + .search-autocomplete { + margin-top: 0; + } +} diff --git a/Magento_CatalogSearch/styles/_variables.scss b/Magento_CatalogSearch/styles/_variables.scss deleted file mode 100644 index ff682ded..00000000 --- a/Magento_CatalogSearch/styles/_variables.scss +++ /dev/null @@ -1,9 +0,0 @@ -// -// Variables -// _____________________________________________ - -$autocomplete__background-color : $color-white !default; -$autocomplete__border : 1px solid $form-element-input__border-color !default; -$autocomplete-item__border : 1px solid $color-gray90 !default; -$autocomplete-item__hover__color: $color-gray91 !default; -$autocomplete-item-amount__color: $color-gray60 !default; diff --git a/Magento_CatalogSearch/styles/module/_common.scss b/Magento_CatalogSearch/styles/module/_common.scss deleted file mode 100644 index b592881a..00000000 --- a/Magento_CatalogSearch/styles/module/_common.scss +++ /dev/null @@ -1,244 +0,0 @@ -// -// Common -// _____________________________________________ - -.block-search { - margin-bottom: 0; - - .block { - &-title { - display: none; - } - } - - .block-content { - margin-bottom: 0; - } - - .label { - @include lib-icon-font( - $_icon-font-content : $icon-search, - $_icon-font-size : 35px, - $_icon-font-line-height : 33px, - $_icon-font-color : $minicart-icons-color, - $_icon-font-color-hover : $minicart-icons-color-hover, - $_icon-font-color-active: $minicart-icons-color-hover, - $_icon-font-text-hide : true, - $_icon-font-display : block - ); - float: right; - - &.active { - + .control { - input { - position: static; - } - } - } - } - - .action.search { - display: none; - } - - .control { - border-top: 1px solid $border-color__base; - clear: both; - margin: 0 (-$layout__width-xs-indent) -1px; - padding: 0 $layout__width-xs-indent; - } - - input { - left: -300%; - margin: 15px 0; - position: absolute; - } - - .nested { - display: none; - } -} - -.search-autocomplete { - @extend .abs-add-box-sizing; - display: none; - margin-top: -15px; - overflow: hidden; - position: absolute; - z-index: 3; - - ul { - @include lib-list-reset-styles(); - - li { - border-top: $autocomplete-item__border; - cursor: pointer; - margin: 0; - padding: $indent__xs $indent__xl $indent__xs $indent__s; - position: relative; - text-align: left; - white-space: normal; - - &:not(:empty) { - border-top: 0; - border: $autocomplete__border; - background: $autocomplete__background-color; - } - - &:first-child { - border-top: none; - } - - &:hover, - &.selected { - background: $autocomplete-item__hover__color; - } - - .amount { - color: $autocomplete-item-amount__color; - position: absolute; - right: 7px; - top: $indent__xs; - } - } - } -} - -.form.search.advanced { - .fields.range { - .field { - &:first-child { - position: relative; - - .control { - padding-right: 25px; - - &:after { - content: ' \2013 '; - display: inline-block; - position: absolute; - right: 0; - text-align: center; - top: 6px; - width: 25px; - } - } - } - - &:last-child { - position: relative; - - div.mage-error[generated] { - left: 0; - position: absolute; - top: 32px; - } - } - - &.with-addon { - .control { - padding-right: 45px; - } - } - } - } - - .group.price { - .addon { - .addafter { - background: none; - border: 0; - padding-top: 6px; - position: absolute; - right: 0; - top: 0; - } - } - } -} - -.search.summary { - margin-bottom: $indent__s; -} - -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__m) { - .block-search { - .block-content { - margin-bottom: 0; - } - } -} - -@include max-screen($screen__s) { - .block-search { - margin-top: $indent__s; - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .block-search { - float: right; - padding-left: 15px; - position: relative; - width: 250px; - z-index: 4; - - .label { - @extend .abs-visually-hidden-desktop; - } - - .control { - border-top: 0; - margin: 0; - padding: 0 0 25px; - } - - .nested { - display: block; - padding-top: 5px; - position: absolute; - } - - input { - @include lib-input-placeholder() { - color: $form-element-input-placeholder__color; - } - margin: 0; - padding-right: 35px; - position: static; - } - - .action.search { - display: inline-block; - @include lib-button-icon( - $_icon-font-content : $icon-search, - $_icon-font-text-hide: true, - $_icon-font-color : $header-icons-color - ); - @include lib-button-reset(); - padding: $indent__xs 0; - position: absolute; - right: 10px; - top: 0; - z-index: 1; - - &:focus { - &:before { - color: $color-gray20; - } - } - } - } - - .search-autocomplete { - margin-top: 0; - } -} diff --git a/Magento_Checkout/styles/module/_cart.scss b/Magento_Checkout/styles/module/_cart.scss index 36b2a771..aa4baa02 100644 --- a/Magento_Checkout/styles/module/_cart.scss +++ b/Magento_Checkout/styles/module/_cart.scss @@ -5,12 +5,11 @@ // Summary block .cart-summary { @extend .abs-add-box-sizing; - @extend .abs-adjustment-incl-excl-tax; - background: $sidebar__background-color; + @include lib-css(background, $sidebar__background-color); margin-bottom: $indent__m; padding: 1px 15px $indent__m; - & > .title { + > .title { display: block; @include lib-heading(h3); } @@ -36,7 +35,7 @@ .methods { .field { - & > .label { + > .label { display: inline; } } @@ -44,19 +43,20 @@ } .fieldset.estimate { - & > .legend, - & > .legend + br { + > .legend, + > .legend + br { @extend .abs-no-display; } } } .actions-toolbar { - & > .primary { + > .primary { button { @extend .abs-revert-secondary-color; } } } + @extend .abs-adjustment-incl-excl-tax; } // Totals block @@ -78,7 +78,7 @@ border-top: $border-width__base solid $border-color__base; } - & > .item { + > .item { border-bottom: $border-width__base solid $border-color__base; position: relative; } @@ -119,7 +119,7 @@ .actions-toolbar { @extend .abs-add-clearfix; - & > .action { + > .action { @extend button; @include lib-link-as-button(); margin-bottom: $indent__s; @@ -211,6 +211,30 @@ } } +// Products pager +.cart-products-toolbar { + .toolbar-amount { + margin: $indent__m 0 15px; + padding: 0; + text-align: center; + } + + .pages { + margin: 0 0 $indent__m; + text-align: center; + + .items { + > .item { + border-bottom: 0; + } + } + } +} + +.cart-products-toolbar-top { + border-bottom: $border-width__base solid $border-color__base; +} + // // Cross sell // --------------------------------------------- @@ -221,7 +245,7 @@ .cart-tax-info, .cart .cart-tax-info { - & + .cart-tax-total { + + .cart-tax-total { display: block; } } @@ -264,6 +288,7 @@ text-align: center; white-space: nowrap; width: 33%; + &:before { content: attr(data-th) ':'; display: block; @@ -316,7 +341,7 @@ .actions-toolbar { .column.main & { @extend .abs-reset-left-margin-desktop; - & > .secondary { + > .secondary { float: none; } } @@ -373,10 +398,54 @@ .item-actions { .actions-toolbar { - @extend .abs-reset-left-margin-desktop; text-align: left; + @extend .abs-reset-left-margin-desktop; + } + } + } + + .action { + margin-bottom: $indent__s; + } + } + + // Products pager + .cart-products-toolbar { + .toolbar-amount { + line-height: 30px; + margin: 0; + } + + .pages { + float: right; + margin: 0 0 1px; + + .item { + &:last-child { + margin-right: 0; } } } } + + .cart.table-wrapper { + .cart-products-toolbar { + + .cart { + thead { + tr { + th.col { + padding-bottom: 7px; + padding-top: 8px; + } + } + } + } + } + + .cart { + + .cart-products-toolbar { + margin-top: $indent__m; + } + } + } } diff --git a/Magento_Checkout/styles/module/_minicart.scss b/Magento_Checkout/styles/module/_minicart.scss index bde9b091..9b7661ac 100644 --- a/Magento_Checkout/styles/module/_minicart.scss +++ b/Magento_Checkout/styles/module/_minicart.scss @@ -2,10 +2,10 @@ // Variables // _____________________________________________ -$minicart__border-color : $color-gray80 !default; -$minicart__padding-horizontal: $indent__base !default; +$minicart__border-color : $color-gray80; +$minicart__padding-horizontal : $indent__base; -$minicart-qty__height : 24px !default; +$minicart-qty__height : 24px; // // Minicart @@ -22,7 +22,7 @@ $minicart-qty__height : 24px !default; } .subtotal { - margin: 0 $indent__s; + margin: 0 $indent__s $indent__s; text-align: right; .label { @@ -93,25 +93,26 @@ $minicart-qty__height : 24px !default; .minicart-wrapper { @include lib-dropdown( - $_toggle-selector : '.action.showcart', - $_options-selector : '.block-minicart', - $_dropdown-toggle-icon-content : $icon-cart, - $_dropdown-toggle-active-icon-content: $icon-cart, - $_dropdown-list-item-padding : false, - $_dropdown-list-item-hover : false, - $_icon-font-position : before, - $_icon-font-size : 35px, - $_icon-font-line-height : 33px, - $_icon-font-color : $minicart-icons-color, - $_icon-font-color-hover : $minicart-icons-color-hover, - $_icon-font-color-active : $minicart-icons-color + $_toggle-selector : '.action.showcart', + $_options-selector : '.block-minicart', + $_dropdown-toggle-icon-content : $icon-cart, + $_dropdown-toggle-active-icon-content : $icon-cart, + $_dropdown-list-item-padding : false, + $_dropdown-list-item-hover : false, + $_icon-font-position : before, + $_icon-font-size : 35px, + $_icon-font-line-height : 33px, + $_icon-font-color : $minicart-icons-color, + $_icon-font-color-hover : $minicart-icons-color-hover, + $_icon-font-color-active : $minicart-icons-color ); float: right; .block-minicart { - padding: 25px $minicart__padding-horizontal; + @include lib-css(padding, 25px $minicart__padding-horizontal); right: 0; width: 320px; + z-index: 101; .block-title { display: none; @@ -145,9 +146,9 @@ $minicart-qty__height : 24px !default; &.close { @include lib-button-icon( $icon-remove, - $_icon-font-size : 32px, - $_icon-font-line-height: 32px, - $_icon-font-text-hide : true + $_icon-font-size : 32px, + $_icon-font-line-height : 32px, + $_icon-font-text-hide : true ); @include lib-button-reset(); height: 40px; @@ -165,10 +166,10 @@ $minicart-qty__height : 24px !default; } .counter.qty { - background: $active__color; - color: $page__background-color; - height: $minicart-qty__height; - line-height: $minicart-qty__height; + @include lib-css(background, $active__color); + @include lib-css(color, $page__background-color); + @include lib-css(height, $minicart-qty__height); + @include lib-css(line-height, $minicart-qty__height); border-radius: 2px; display: inline-block; margin: 3px 0 0; @@ -184,7 +185,7 @@ $minicart-qty__height : 24px !default; .loader { > img { - max-width: $minicart-qty__height; + @include lib-css(max-width, $minicart-qty__height); } } } @@ -201,8 +202,8 @@ $minicart-qty__height : 24px !default; } .minicart-items-wrapper { - border: 1px solid $minicart__border-color; - margin: 0 (-$minicart__padding-horizontal); + @include lib-css(border, 1px solid $minicart__border-color); + @include lib-css(margin, 0 -$minicart__padding-horizontal); border-left: 0; border-right: 0; overflow-x: auto; @@ -216,7 +217,7 @@ $minicart-qty__height : 24px !default; padding: $indent__base 0; &:not(:first-child) { - border-top: 1px solid $minicart__border-color; + @include lib-css(border-top, 1px solid $minicart__border-color); } &:first-child { @@ -251,26 +252,28 @@ $minicart-qty__height : 24px !default; .toggle { @include lib-icon-font( - $_icon-font-content : $icon-down, - $_icon-font-size : 28px, - $_icon-font-line-height: 16px, - $_icon-font-text-hide : false, - $_icon-font-position : after, - $_icon-font-display : block + $_icon-font-content : $icon-down, + $_icon-font-size : 28px, + $_icon-font-line-height : 16px, + $_icon-font-text-hide : false, + $_icon-font-position : after, + $_icon-font-display : block ); cursor: pointer; position: relative; &:after { position: static; + right: $indent__base; + top: 0; } } &.active { > .toggle { @include lib-icon-font-symbol( - $_icon-font-content : $icon-up, - $_icon-font-position: after + $_icon-font-content : $icon-up, + $_icon-font-position : after ); } } @@ -281,7 +284,7 @@ $minicart-qty__height : 24px !default; margin: 0 0 $indent__s; a { - color: $link__color; + @include lib-css(color, $link__color); } } @@ -298,7 +301,7 @@ $minicart-qty__height : 24px !default; } .weee[data-label] { - font-size: 11px; + @include lib-font-size(11); .label { @extend .abs-no-display; } @@ -313,11 +316,11 @@ $minicart-qty__height : 24px !default; .tooltip.toggle { @include lib-icon-font( $icon-down, - $_icon-font-size : 28px, - $_icon-font-line-height: 28px, - $_icon-font-text-hide : true, - $_icon-font-margin : -3px 0 0 7px, - $_icon-font-position : after + $_icon-font-size : 28px, + $_icon-font-line-height : 28px, + $_icon-font-text-hide : true, + $_icon-font-margin : -3px 0 0 7px, + $_icon-font-position : after ); .details { @@ -340,7 +343,7 @@ $minicart-qty__height : 24px !default; } .update-cart-item { - font-size: 11px; + @include lib-font-size(11); vertical-align: top; } @@ -353,17 +356,19 @@ $minicart-qty__height : 24px !default; &.delete { @include lib-icon-font( $icon-settings, - $_icon-font-size : 28px, - $_icon-font-line-height : 28px, - $_icon-font-text-hide : true, - $_icon-font-color : $color-gray19, - $_icon-font-color-hover : $color-gray19, - $_icon-font-color-active: $color-gray19 + $_icon-font-size : 28px, + $_icon-font-line-height : 28px, + $_icon-font-text-hide : true, + $_icon-font-color : $color-gray19, + $_icon-font-color-hover : $color-gray19, + $_icon-font-color-active : $color-gray19 ); } &.delete { - @include lib-icon-font-symbol($_icon-font-content: $icon-trash); + @include lib-icon-font-symbol( + $_icon-font-content : $icon-trash + ); } } } diff --git a/Magento_Checkout/styles/module/checkout/_authentication.scss b/Magento_Checkout/styles/module/checkout/_authentication.scss index 83a010ca..27f42daf 100644 --- a/Magento_Checkout/styles/module/checkout/_authentication.scss +++ b/Magento_Checkout/styles/module/checkout/_authentication.scss @@ -2,15 +2,11 @@ // Variables // _____________________________________________ -$block-auth__dropdown__padding : $indent__m !default; -$block-auth__dropdown__background-color: $color-white !default; -$block-auth__or-label__size : 36px !default; -$block-auth__width : 0 !default; -$block-auth__border : 1px solid $color-gray-light3 !default; - -// -// Common -// _____________________________________________ +$block-auth__dropdown__padding : $indent__m; +$block-auth__dropdown__background-color : $color-white; +$block-auth__or-label__size : 36px; +$block-auth__width : 0; +$block-auth__border : 1px solid $color-gray-light3; .authentication-dropdown { box-sizing: border-box; @@ -37,7 +33,7 @@ $block-auth__border : 1px solid $color-gray-light3 !default; .block-authentication { .block-title { - font-size: $h3__font-size; + @include lib-font-size($h3__font-size); border-bottom: 0; margin-bottom: $indent__m; @@ -55,7 +51,7 @@ $block-auth__border : 1px solid $color-gray-light3 !default; .actions-toolbar { margin-bottom: $indent__xs; - & > .secondary { + > .secondary { padding-top: $indent__m; text-align: left; } @@ -89,10 +85,10 @@ $block-auth__border : 1px solid $color-gray-light3 !default; position: relative; &::before { - height: $block-auth__or-label__size; - line-height: $block-auth__or-label__size - 2px; - margin: (-$block-auth__or-label__size / 2 + 1px) 0 0 (-$block-auth__or-label__size / 2); - min-width: $block-auth__or-label__size; + @include lib-css(height, $block-auth__or-label__size); + @include lib-css(line-height, $block-auth__or-label__size - 2px); + @include lib-css(margin, -($block-auth__or-label__size/2 + 1px) 0 0 -($block-auth__or-label__size / 2)); + @include lib-css(min-width, $block-auth__or-label__size); background: $color-white; border: 1px solid $color-gray-light5; border-radius: 50%; @@ -102,7 +98,7 @@ $block-auth__border : 1px solid $color-gray-light3 !default; display: inline-block; left: 50%; letter-spacing: normal; - padding: 0 0.2rem; + padding: 0 .2rem; position: absolute; text-align: center; text-transform: uppercase; @@ -118,21 +114,21 @@ $block-auth__border : 1px solid $color-gray-light3 !default; @include min-screen($screen__m) { .authentication-dropdown { + @include lib-css(background-color, $block-auth__dropdown__background-color); + @include lib-css(border, $block-auth__border); position: absolute; - top: 100%; - width: 100%; - background-color: $block-auth__dropdown__background-color; - border: $block-auth__border; text-align: left; - transform: scale(1, 0); + top: 100%; + transform: scale(1,0); transform-origin: 0 0; - transition: transform linear 0.15s, visibility 0s linear 0.15s; + transition: transform linear .1s, visibility 0s linear .1s; visibility: hidden; + width: 100%; &._show { - z-index: $dropdown-list__z-index; - transform: scale(1, 1); - transition: transform linear 0.15s, visibility 0s linear 0s; + @include lib-css(z-index, $dropdown-list__z-index); + transform: scale(1,1); + transition: transform linear .1s, visibility 0s linear 0s; visibility: visible; } } @@ -144,13 +140,14 @@ $block-auth__border : 1px solid $color-gray-light3 !default; .block-authentication { .block-title { - font-size: headings($heading-h2, font-size); + @include lib-font-size($h2__font-size); border-bottom: 0; margin-bottom: $indent__m; } .actions-toolbar { - & > .primary { + > .primary { + display: inline; float: right; margin-right: 0; .action { @@ -158,7 +155,7 @@ $block-auth__border : 1px solid $color-gray-light3 !default; } } - & > .secondary { + > .secondary { float: left; margin-right: 2rem; padding-top: 1rem; @@ -173,8 +170,8 @@ $block-auth__border : 1px solid $color-gray-light3 !default; } .block-authentication { - display: flex; - flex-direction: row; + @include lib-vendor-prefix-display(flex); + @include lib-vendor-prefix-flex-direction(row); border-top: 1px solid $color-gray-light5; } @@ -182,9 +179,9 @@ $block-auth__border : 1px solid $color-gray-light3 !default; .form-login, .fieldset, .block-content { - display: flex; - flex-direction: column; - flex-grow: 1; + @include lib-vendor-prefix-display(flex); + @include lib-vendor-prefix-flex-direction(column); + @include lib-vendor-prefix-flex-grow(1); } .block[class] { diff --git a/Magento_Checkout/styles/module/checkout/_checkout-agreements.scss b/Magento_Checkout/styles/module/checkout/_checkout-agreements.scss index 037a08f6..620c38ed 100644 --- a/Magento_Checkout/styles/module/checkout/_checkout-agreements.scss +++ b/Magento_Checkout/styles/module/checkout/_checkout-agreements.scss @@ -1,5 +1,7 @@ .checkout-agreements-block { - margin-bottom: $indent__base; + .checkout-agreements { + margin-bottom: $indent__base; + } .action-show { @extend .abs-action-button-as-link; diff --git a/Magento_Checkout/styles/module/checkout/_checkout.scss b/Magento_Checkout/styles/module/checkout/_checkout.scss index ee21332e..a0d24589 100644 --- a/Magento_Checkout/styles/module/checkout/_checkout.scss +++ b/Magento_Checkout/styles/module/checkout/_checkout.scss @@ -2,22 +2,17 @@ // Variables // _____________________________________________ -$checkout-wrapper__margin : $indent__base !default; -$checkout-wrapper__columns : 8 !default; +$checkout-wrapper__margin : $indent__base; +$checkout-wrapper__columns : 8; -$checkout-step-title__border : $border-width__base solid $color-gray80 !default; -$checkout-step-title__font-size : 26px !default; -$checkout-step-title__font-weight : $font-weight__light !default; -$checkout-step-title__padding : $indent__s !default; +$checkout-step-title__border : $border-width__base solid $color-gray80; +$checkout-step-title__font-size : 26px; +$checkout-step-title__font-weight : $font-weight__light; +$checkout-step-title__padding : $indent__s; -$checkout-step-title-mobile__font-size: 18px !default; +$checkout-step-title-mobile__font-size : 18px; -// -// Common -// _____________________________________________ - -.checkout-index-index, -.checkout-onepage-success { +.checkout-index-index { .page-title-wrapper { @extend .abs-visually-hidden; } @@ -25,11 +20,11 @@ $checkout-step-title-mobile__font-size: 18px !default; .checkout-container { @extend .abs-add-clearfix; - margin: 0 0 $checkout-wrapper__margin; + @include lib-css(margin, 0 0 $checkout-wrapper__margin); } .opc-wrapper { - margin: 0 0 $checkout-wrapper__margin; + @include lib-css(margin, 0 0 $checkout-wrapper__margin); .opc { @extend .abs-reset-list; @@ -55,6 +50,14 @@ $checkout-step-title-mobile__font-size: 18px !default; } } +.checkout-onepage-success { + @extend .abs-add-clearfix; + + .print { + display: none; + } +} + // // Mobile // _____________________________________________ @@ -62,7 +65,7 @@ $checkout-step-title-mobile__font-size: 18px !default; @include max-screen($screen__s) { .opc-wrapper { .step-title { - font-size: $checkout-step-title-mobile__font-size; + @include lib-css(font-size, $checkout-step-title-mobile__font-size); border-bottom: 0; padding-bottom: 0; } @@ -79,4 +82,12 @@ $checkout-step-title-mobile__font-size: 18px !default; @include lib-layout-column(2, 1, $checkout-wrapper__columns); padding-right: $indent__l; } + + .checkout-onepage-success { + .print { + display: block; + float: right; + margin: 22px 0 0; + } + } } diff --git a/Magento_Checkout/styles/module/checkout/_estimated-total.scss b/Magento_Checkout/styles/module/checkout/_estimated-total.scss index b8e9eede..a0155ad4 100644 --- a/Magento_Checkout/styles/module/checkout/_estimated-total.scss +++ b/Magento_Checkout/styles/module/checkout/_estimated-total.scss @@ -1,17 +1,17 @@ // // Checkout Estimated Total -// _____________________________________________ +// --------------------------------------------- .opc-estimated-wrapper { @extend .abs-add-clearfix; @extend .abs-no-display-desktop; - border-bottom: $border-width__base solid $color-gray80; + @include lib-css(border-bottom, $border-width__base solid $color-gray80); margin: 0 0 15px; padding: 18px 15px; .estimated-block { - font-size: $checkout-step-title-mobile__font-size; - font-weight: $font-weight__bold; + @include lib-css(font-size, $checkout-step-title-mobile__font-size); + @include lib-css(font-weight, $font-weight__bold); float: left; .estimated-label { @@ -24,7 +24,7 @@ .action { &.showcart { &:before { - color: $primary__color; + @include lib-css(color, $primary__color); } } } diff --git a/Magento_Checkout/styles/module/checkout/_fields.scss b/Magento_Checkout/styles/module/checkout/_fields.scss index 0df24551..da875ffb 100644 --- a/Magento_Checkout/styles/module/checkout/_fields.scss +++ b/Magento_Checkout/styles/module/checkout/_fields.scss @@ -4,10 +4,6 @@ $checkout-field-validation__border-color: $form-element-validation__border-error; -// -// Common -// _____________________________________________ - .field { .control { &._with-tooltip { @@ -24,7 +20,7 @@ $checkout-field-validation__border-color: $form-element-validation__border-error } .field-tooltip-action { - line-height: $checkout-tooltip-icon__font-size; + @include lib-css(line-height, $checkout-tooltip-icon__font-size); } } @@ -33,7 +29,7 @@ $checkout-field-validation__border-color: $form-element-validation__border-error input, select, textarea { - border-color: $checkout-field-validation__border-color; + @include lib-css(border-color, $checkout-field-validation__border-color); } } } @@ -41,8 +37,8 @@ $checkout-field-validation__border-color: $form-element-validation__border-error .opc-wrapper { .fieldset { - & > .field { - & > .label { + > .field { + > .label { font-weight: $font-weight__regular; } } @@ -57,12 +53,12 @@ $checkout-field-validation__border-color: $form-element-validation__border-error // ToDo UI: remove with global blank theme .field.required update .opc-wrapper { .fieldset { - & > .field { + > .field { &.required, &._required { position: relative; - & > label { + > label { padding-right: 25px; &:after { diff --git a/Magento_Checkout/styles/module/checkout/_modals.scss b/Magento_Checkout/styles/module/checkout/_modals.scss index 1c0cd7f4..34710826 100644 --- a/Magento_Checkout/styles/module/checkout/_modals.scss +++ b/Magento_Checkout/styles/module/checkout/_modals.scss @@ -2,11 +2,7 @@ // Variables // _____________________________________________ -$checkout-modal-popup__width: 800px !default; - -// -// Common -// _____________________________________________ +$checkout-modal-popup__width: 800px; .checkout-index-index { .modal-popup { @@ -26,7 +22,7 @@ $checkout-modal-popup__width: 800px !default; .checkout-index-index { .modal-popup { .form-shipping-address { - max-width: $checkout-shipping-address__max-width; + @include lib-css(max-width, $checkout-shipping-address__max-width); } .modal-footer { @@ -43,8 +39,8 @@ $checkout-modal-popup__width: 800px !default; .checkout-index-index { .modal-popup { .modal-inner-wrap { - margin-left: (-$checkout-modal-popup__width / 2); - width: $checkout-modal-popup__width; + @include lib-css(margin-left, -($checkout-modal-popup__width/2)); + @include lib-css(width, $checkout-modal-popup__width); left: 50%; } } diff --git a/Magento_Checkout/styles/module/checkout/_order-summary.scss b/Magento_Checkout/styles/module/checkout/_order-summary.scss index 23196ecb..6e05fa51 100644 --- a/Magento_Checkout/styles/module/checkout/_order-summary.scss +++ b/Magento_Checkout/styles/module/checkout/_order-summary.scss @@ -2,37 +2,38 @@ // Variables // _____________________________________________ -$checkout-summary__background-color: $color-white-smoke !default; -$checkout-summary__padding : 22px $indent__l !default; +$checkout-summary__background-color : $color-white-smoke; +$checkout-summary__padding : 22px $indent__l; -$checkout-summary-title__margin : $indent__s !default; -$checkout-summary-mark-value__color: $color-gray60 !default; +$checkout-summary-title__margin : $indent__s; +$checkout-summary-mark-value__color : $color-gray60; -$checkout-summary-items__max-height: 370px !default; -$checkout-summary-items__padding : 15px !default; +$checkout-summary-items__max-height : 370px; +$checkout-summary-items__padding : 15px; // // Order Summary -// _____________________________________________ +// --------------------------------------------- .opc-block-summary { @extend .abs-add-box-sizing; - background: $checkout-summary__background-color; - padding: $checkout-summary__padding; + @include lib-css(background, $checkout-summary__background-color); + @include lib-css(padding, $checkout-summary__padding); margin: 0 0 $indent__base; - & > .title { + > .title { @extend .abs-checkout-title; display: block; } + // Totals table .table-totals { @extend .abs-sidebar-totals; } .mark { .value { - color: $checkout-summary-mark-value__color; + @include lib-css(color, $checkout-summary-mark-value__color); display: block; } } @@ -42,7 +43,7 @@ $checkout-summary-items__padding : 15px !default; .mark, .amount { border-top: 0; - font-size: 14px; + @include lib-font-size(14); padding-top: 0; strong { @@ -58,21 +59,22 @@ $checkout-summary-items__padding : 15px !default; // // Items list - // _____________________________________________ + // --------------------------------------------- + // Block title .items-in-cart { - & > .title { + > .title { border-bottom: $border-width__base solid $border-color__base; - padding: $indent__s $indent__xl $indent__s 0; + @include lib-css(padding, $indent__s $indent__xl $indent__s 0); cursor: pointer; @include lib-icon-font( $icon-down, - $_icon-font-size : 30px, - $_icon-font-line-height: 12px, - $_icon-font-text-hide : true, - $_icon-font-margin : 3px 0 0, - $_icon-font-position : after, - $_icon-font-display : block + $_icon-font-size : 30px, + $_icon-font-line-height : 12px, + $_icon-font-text-hide : true, + $_icon-font-margin : 3px 0 0, + $_icon-font-position : after, + $_icon-font-display : block ); margin-bottom: 0; position: relative; @@ -84,17 +86,17 @@ $checkout-summary-items__padding : 15px !default; } strong { - font-size: 18px; + @include lib-font-size(18); font-weight: $font-weight__light; margin: 0; } } &.active { - & > .title { + > .title { @include lib-icon-font-symbol( - $_icon-font-content : $icon-up, - $_icon-font-position: after + $_icon-font-content: $icon-up, + $_icon-font-position: after ); } } @@ -104,14 +106,11 @@ $checkout-summary-items__padding : 15px !default; } } - // // Cart items - // _____________________________________________ - .minicart-items-wrapper { - margin: 0 (-$checkout-summary-items__padding) 0 0; - max-height: $checkout-summary-items__max-height; - padding: $checkout-summary-items__padding $checkout-summary-items__padding 0 0; + @include lib-css(margin, 0 -($checkout-summary-items__padding) 0 0); + @include lib-css(max-height, $checkout-summary-items__max-height); + @include lib-css(padding, $checkout-summary-items__padding $checkout-summary-items__padding 0 0); border: 0; } @@ -141,7 +140,7 @@ $checkout-summary-items__padding : 15px !default; } .price { - font-size: 16px; + @include lib-font-size(16); font-weight: $font-weight__regular; } @@ -150,11 +149,29 @@ $checkout-summary-items__padding : 15px !default; margin: 0; .price { - font-size: 10px; + @include lib-font-size(10); } } } } + + .actions-toolbar { + position: relative; + z-index: 1; + + .secondary { + border-top: $border-width__base solid $border-color__base; + display: block; + float: none; + margin: -1px 0 0; + padding: 15px 0 0; + text-align: left; + + .action { + margin: 0; + } + } + } } // diff --git a/Magento_Checkout/styles/module/checkout/_payment-options.scss b/Magento_Checkout/styles/module/checkout/_payment-options.scss index be4779e7..28e30795 100644 --- a/Magento_Checkout/styles/module/checkout/_payment-options.scss +++ b/Magento_Checkout/styles/module/checkout/_payment-options.scss @@ -2,22 +2,18 @@ // Variables // _____________________________________________ -$checkout-payment-option-title__border : $checkout-payment-method-title__border !default; -$checkout-payment-option-title__color : $link__color !default; -$checkout-payment-option-title__padding : $checkout-payment-method-title__padding !default; -$checkout-payment-option-title-mobile__padding : $checkout-payment-method-title-mobile__padding !default; +$checkout-payment-option-title__border : $checkout-payment-method-title__border; +$checkout-payment-option-title__color : $link__color; +$checkout-payment-option-title__padding : $checkout-payment-method-title__padding; +$checkout-payment-option-title-mobile__padding : $checkout-payment-method-title-mobile__padding; -$checkout-payment-option-title-icon__font-size : 32px !default; -$checkout-payment-option-title-icon__line-height : 16px !default; -$checkout-payment-option-title-icon__margin : 0 !default; -$checkout-payment-option-title-icon__color : $minicart-icons-color !default; -$checkout-payment-option-title-icon__hover__color: $primary__color !default; +$checkout-payment-option-title-icon__font-size : 32px; +$checkout-payment-option-title-icon__line-height : 16px; +$checkout-payment-option-title-icon__margin : 0; +$checkout-payment-option-title-icon__color : $minicart-icons-color; +$checkout-payment-option-title-icon__hover__color : $primary__color; -$checkout-payment-option-content__padding__xl : $checkout-payment-method-content__padding__xl !default; - -// -// Common -// _____________________________________________ +$checkout-payment-option-content__padding__xl : $checkout-payment-method-content__padding__xl; .checkout-payment-method { .payment-option { @@ -43,26 +39,26 @@ $checkout-payment-option-content__padding__xl : $checkout-payment-method-cont } .payment-option-title { - border-top: $checkout-payment-option-title__border; - padding: $checkout-payment-option-title__padding 0; + @include lib-css(border-top, $checkout-payment-option-title__border); + @include lib-css(padding, $checkout-payment-option-title__padding 0); .action-toggle { - color: $checkout-payment-option-title__color; + @include lib-css(color, $checkout-payment-option-title__color); @include lib-icon-font( $icon-down, - $_icon-font-size : $checkout-payment-option-title-icon__font-size, - $_icon-font-line-height : $checkout-payment-option-title-icon__line-height, - $_icon-font-color : $checkout-payment-option-title-icon__color, - $_icon-font-color-hover : $checkout-payment-option-title-icon__hover__color, - $_icon-font-color-active: $checkout-payment-option-title-icon__color, - $_icon-font-margin : $checkout-payment-option-title-icon__margin, - $_icon-font-position : after + $_icon-font-size : $checkout-payment-option-title-icon__font-size, + $_icon-font-line-height : $checkout-payment-option-title-icon__line-height, + $_icon-font-color : $checkout-payment-option-title-icon__color, + $_icon-font-color-hover : $checkout-payment-option-title-icon__hover__color, + $_icon-font-color-active : $checkout-payment-option-title-icon__color, + $_icon-font-margin : $checkout-payment-option-title-icon__margin, + $_icon-font-position : after ); } } .payment-option-content { - padding: 0 0 $indent__base $checkout-payment-option-content__padding__xl; + @include lib-css(padding, 0 0 $indent__base $checkout-payment-option-content__padding__xl); } .payment-option-inner { @@ -87,7 +83,7 @@ $checkout-payment-option-content__padding__xl : $checkout-payment-method-cont } &._inactive { - opacity: 0.4; + opacity: .4; } span { @@ -98,8 +94,8 @@ $checkout-payment-option-content__padding__xl : $checkout-payment-method-cont } img { - filter: grayscale(100%); - transition: all 0.6s ease; + filter: grayscale(100%); // For Webkit browsers + transition: all .6s ease; // Fade to color for Chrome and Safari } } @@ -109,7 +105,7 @@ $checkout-payment-option-content__padding__xl : $checkout-payment-method-cont } .fields { - & > .year { + > .year { padding-left: $indent__xs; } @@ -137,8 +133,8 @@ $checkout-payment-option-content__padding__xl : $checkout-payment-method-cont } } - & > .field.cvv { - & > .control { + > .field.cvv { + > .control { padding-right: $indent__base; width: auto; } @@ -151,7 +147,7 @@ $checkout-payment-option-content__padding__xl : $checkout-payment-method-cont } &.fieldset { - & > .field { + > .field { .fields.group.group-2 { .field { width: auto !important; @@ -169,14 +165,14 @@ $checkout-payment-option-content__padding__xl : $checkout-payment-method-cont @include max-screen($screen__m) { .checkout-payment-method { .payment-option { - margin: 0 (-$checkout-payment-option-title-mobile__padding); + @include lib-css(margin, 0 -($checkout-payment-option-title-mobile__padding)); .payment-option-title { - padding: $checkout-payment-option-title-mobile__padding; + @include lib-css(padding, $checkout-payment-option-title-mobile__padding) } .payment-option-content { - padding: 0 $checkout-payment-option-title-mobile__padding $indent__base; + @include lib-css(padding, 0 $checkout-payment-option-title-mobile__padding $indent__base); } } } @@ -189,7 +185,7 @@ $checkout-payment-option-content__padding__xl : $checkout-payment-method-cont @include min-screen($screen__m) { .checkout-payment-method { .payment-option-title { - padding-left: $checkout-payment-option-content__padding__xl; + @include lib-css(padding-left, $checkout-payment-option-content__padding__xl); } .payment-option-content { .payment-option-inner { diff --git a/Magento_Checkout/styles/module/checkout/_payments.scss b/Magento_Checkout/styles/module/checkout/_payments.scss index 2f6485d0..56413f82 100644 --- a/Magento_Checkout/styles/module/checkout/_payments.scss +++ b/Magento_Checkout/styles/module/checkout/_payments.scss @@ -2,15 +2,15 @@ // Variables // _____________________________________________ -$checkout-payment-method-title__border : $checkout-shipping-method__border !default; -$checkout-payment-method-title__padding : $checkout-shipping-method__padding !default; -$checkout-payment-method-title-mobile__padding: 15px !default; +$checkout-payment-method-title__border : $checkout-shipping-method__border; +$checkout-payment-method-title__padding : $checkout-shipping-method__padding; +$checkout-payment-method-title-mobile__padding : 15px; -$checkout-payment-method-content__padding__xl : 22px !default; +$checkout-payment-method-content__padding__xl : 22px; -$checkout-billing-address-details__line-height: 27px !default; -$checkout-billing-address-details__padding : 0 0 0 23px !default; -$checkout-billing-address-form__max-width : $checkout-shipping-address__max-width !default; +$checkout-billing-address-details__line-height : 27px; +$checkout-billing-address-details__padding : 0 0 0 23px; +$checkout-billing-address-form__max-width : $checkout-shipping-address__max-width; // // Common @@ -18,6 +18,7 @@ $checkout-billing-address-form__max-width : $checkout-shipping-address__max- .checkout-payment-method { .step-title { + border-bottom: 0; margin-bottom: 0; } @@ -33,11 +34,17 @@ $checkout-billing-address-form__max-width : $checkout-shipping-address__max- display: block; } } + + & + .payment-method { + .payment-method-title { + @include lib-css(border-top, $checkout-payment-method-title__border); + } + } } .payment-method-content { - & > .actions-toolbar { - & > .primary { + > .actions-toolbar { + > .primary { .action { &.primary { @extend .abs-button-l; @@ -48,8 +55,7 @@ $checkout-billing-address-form__max-width : $checkout-shipping-address__max- } .payment-method-title { - border-top: $checkout-payment-method-title__border; - padding: $checkout-payment-method-title__padding 0; + @include lib-css(padding, $checkout-payment-method-title__padding 0); margin: 0; .payment-icon { @@ -66,8 +72,7 @@ $checkout-billing-address-form__max-width : $checkout-shipping-address__max- .payment-method-content { display: none; - - padding: 0 0 $indent__base $checkout-payment-method-content__padding__xl; + @include lib-css(padding, 0 0 $indent__base $checkout-payment-method-content__padding__xl); .fieldset { &:not(:last-child) { margin: 0 0 $indent__base; @@ -75,16 +80,24 @@ $checkout-billing-address-form__max-width : $checkout-shipping-address__max- } } + .payment-group { + & + .payment-group { + .step-title { + margin: $indent__base 0 0; + } + } + } + .field-select-billing, .billing-address-form { - max-width: $checkout-billing-address-form__max-width; + @include lib-css(max-width, $checkout-billing-address-form__max-width); } .billing-address-same-as-shipping-block { margin: 0 0 $indent__s; } - .payment-method-billing-address { + .checkout-billing-address { margin: 0 0 $indent__base; .primary { @@ -98,23 +111,19 @@ $checkout-billing-address-form__max-width : $checkout-shipping-address__max- } .billing-address-details { - line-height: $checkout-billing-address-details__line-height; - padding: $checkout-billing-address-details__padding; - - .action-edit-address { - @extend .abs-action-button-as-link; - } + @include lib-css(line-height, $checkout-billing-address-details__line-height); + @include lib-css(padding, $checkout-billing-address-details__padding); } } .payment-method-note { - & + .payment-method-billing-address { + & + .checkout-billing-address { margin-top: $indent__base; } } .field-select-billing { - & > .label { + > .label { @extend .abs-visually-hidden; } } @@ -143,18 +152,18 @@ $checkout-billing-address-form__max-width : $checkout-shipping-address__max- @include max-screen($screen__m) { .checkout-payment-method { .payment-methods { - margin: 0 (-$checkout-payment-method-title-mobile__padding); + @include lib-css(margin, 0 -($checkout-payment-method-title-mobile__padding)); } .payment-method-title { - padding: $checkout-payment-method-title-mobile__padding; + @include lib-css(padding, $checkout-payment-method-title-mobile__padding) } .payment-method-content { - padding: 0 $checkout-payment-method-title-mobile__padding $indent__base; + @include lib-css(padding, 0 $checkout-payment-method-title-mobile__padding $indent__base); } - .payment-method-billing-address { + .checkout-billing-address { .action-cancel { margin-top: $indent__s; } @@ -168,18 +177,16 @@ $checkout-billing-address-form__max-width : $checkout-shipping-address__max- @include min-screen($screen__m) { .checkout-payment-method { - .payment-methods { - .actions-toolbar { - .primary { - float: right; - margin: 0; - } + .actions-toolbar { + .primary { + float: right; + margin: 0; } } .fieldset { - & > .field-select-billing { - & > .control { + > .field-select-billing { + > .control { float: none; width: 100%; } @@ -188,7 +195,7 @@ $checkout-billing-address-form__max-width : $checkout-shipping-address__max- .payment-method-content { .fieldset { - & > .field { + > .field { margin: 0 0 $indent__base; &.type { @@ -207,7 +214,7 @@ $checkout-billing-address-form__max-width : $checkout-shipping-address__max- } } - .payment-method-billing-address { + .checkout-billing-address { .action-update { float: right; } diff --git a/Magento_Checkout/styles/module/checkout/_progress-bar.scss b/Magento_Checkout/styles/module/checkout/_progress-bar.scss index 0f63af5e..7fa5409f 100644 --- a/Magento_Checkout/styles/module/checkout/_progress-bar.scss +++ b/Magento_Checkout/styles/module/checkout/_progress-bar.scss @@ -2,53 +2,52 @@ // Variables // _____________________________________________ -$checkout-progress-bar__font-size : 18px !default; -$checkout-progress-bar__font-weight : $font-weight__light !default; -$checkout-progress-bar__margin : $indent__base !default; - -$checkout-progress-bar-item__background-color : $color-gray-middle1 !default; -$checkout-progress-bar-item__border-radius : 6px !default; -$checkout-progress-bar-item__color : $primary__color !default; -$checkout-progress-bar-item__margin : $indent__s !default; -$checkout-progress-bar-item__width : 185px !default; -$checkout-progress-bar-item__active__background-color : $color-orange-red1 !default; -$checkout-progress-bar-item__complete__color : $link__color !default; - -$checkout-progress-bar-item-element__width : 38px !default; -$checkout-progress-bar-item-element__height : $checkout-progress-bar-item-element__width !default; - -$checkout-progress-bar-item-element-outer-radius__width : 6px !default; -$checkout-progress-bar-item-element-inner__background-color : $page__background-color !default; -$checkout-progress-bar-item-element-inner__color : $checkout-progress-bar-item__color !default; -$checkout-progress-bar-item-element-inner__width : $checkout-progress-bar-item-element__width - ($checkout-progress-bar-item-element-outer-radius__width * 2) !default; -$checkout-progress-bar-item-element-inner__height : $checkout-progress-bar-item-element-inner__width !default; -$checkout-progress-bar-item-element-inner__active__content : $icon-checkmark !default; -$checkout-progress-bar-item-element-inner__active__font-size : 28px !default; -$checkout-progress-bar-item-element-inner__active__line-height: 1 !default; - +$checkout-progress-bar__font-size : 18px; +$checkout-progress-bar__font-weight : $font-weight__light; +$checkout-progress-bar__margin : $indent__base; + +$checkout-progress-bar-item__background-color : $color-gray-middle1; +$checkout-progress-bar-item__border-radius : 6px; +$checkout-progress-bar-item__color : $primary__color; +$checkout-progress-bar-item__margin : $indent__s; +$checkout-progress-bar-item__width : 185px; +$checkout-progress-bar-item__active__background-color : $color-orange-red1; +$checkout-progress-bar-item__complete__color : $link__color; + +$checkout-progress-bar-item-element__width : 38px; +$checkout-progress-bar-item-element__height : $checkout-progress-bar-item-element__width; + +$checkout-progress-bar-item-element-inner__background-color : $page__background-color; +$checkout-progress-bar-item-element-inner__color : $checkout-progress-bar-item__color; +$checkout-progress-bar-item-element-outer-radius__width : 6px; +$checkout-progress-bar-item-element-inner__width : $checkout-progress-bar-item-element__width - ($checkout-progress-bar-item-element-outer-radius__width * 2); +$checkout-progress-bar-item-element-inner__height : $checkout-progress-bar-item-element-inner__width; +$checkout-progress-bar-item-element-inner__active__content : $icon-checkmark; +$checkout-progress-bar-item-element-inner__active__font-size : 28px; +$checkout-progress-bar-item-element-inner__active__line-height : 1; // // Checkout Progress Bar -// _____________________________________________ +// --------------------------------------------- .opc-progress-bar { @extend .abs-reset-list; - margin: 0 0 $checkout-progress-bar__margin; + @include lib-css(margin, 0 0 $checkout-progress-bar__margin); counter-reset: i; font-size: 0; } .opc-progress-bar-item { - margin: 0 0 $checkout-progress-bar-item__margin; - width: 50%; + @include lib-css(margin, 0 0 $checkout-progress-bar-item__margin); display: inline-block; position: relative; text-align: center; vertical-align: top; + width: 50%; &:before { // Horizontal line - background: $checkout-progress-bar-item__background-color; - top: $checkout-progress-bar-item-element__width / 2; + @include lib-css(background, $checkout-progress-bar-item__background-color); + @include lib-css(top, $checkout-progress-bar-item-element__width/2); content: ''; height: 7px; left: 0; @@ -58,37 +57,37 @@ $checkout-progress-bar-item-element-inner__active__line-height: 1 !default; &:first-child { &:before { - border-radius: $checkout-progress-bar-item__border-radius 0 0 $checkout-progress-bar-item__border-radius; + @include lib-css(border-radius, $checkout-progress-bar-item__border-radius 0 0 $checkout-progress-bar-item__border-radius); } } &:last-child { &:before { - border-radius: 0 $checkout-progress-bar-item__border-radius $checkout-progress-bar-item__border-radius 0; + @include lib-css(border-radius, 0 $checkout-progress-bar-item__border-radius $checkout-progress-bar-item__border-radius 0); } } - & > span { + > span { display: inline-block; padding-top: 45px; width: 100%; word-wrap: break-word; @include lib-typography( - $_color : $checkout-progress-bar-item__background-color, - $_font-family: inherit, - $_font-size : $checkout-progress-bar__font-size, - $_font-style : inherit, - $_font-weight: $checkout-progress-bar__font-weight, - $_line-height: inherit + $_color: $checkout-progress-bar-item__background-color, + $_font-family: false, + $_font-size: $checkout-progress-bar__font-size, + $_font-style: false, + $_font-weight: $checkout-progress-bar__font-weight, + $_line-height: false ); - &:before, + &:before, // Item element &:after { - background: $checkout-progress-bar-item__background-color; - height: $checkout-progress-bar-item-element__height; - margin-left: -($checkout-progress-bar-item-element__width / 2); - width: $checkout-progress-bar-item-element__width; + @include lib-css(background, $checkout-progress-bar-item__background-color); + @include lib-css(height, $checkout-progress-bar-item-element__height); + @include lib-css(margin-left, -($checkout-progress-bar-item-element__width/2)); + @include lib-css(width, $checkout-progress-bar-item-element__width); border-radius: 50%; content: ''; left: 50%; @@ -96,21 +95,21 @@ $checkout-progress-bar-item-element-inner__active__line-height: 1 !default; top: 0; } - &:after { - background: $checkout-progress-bar-item-element-inner__background-color; - height: $checkout-progress-bar-item-element-inner__height; - margin-left: (-$checkout-progress-bar-item-element-inner__width / 2); - top: $checkout-progress-bar-item-element-outer-radius__width; - width: $checkout-progress-bar-item-element-inner__width; + &:after { // Item element inner + @include lib-css(background, $checkout-progress-bar-item-element-inner__background-color); + @include lib-css(height, $checkout-progress-bar-item-element-inner__height); + @include lib-css(margin-left, -($checkout-progress-bar-item-element-inner__width/2)); + @include lib-css(top, $checkout-progress-bar-item-element-outer-radius__width); + @include lib-css(width, $checkout-progress-bar-item-element-inner__width); content: counter(i); counter-increment: i; @include lib-typography( - $_color : $checkout-progress-bar-item-element-inner__color, - $_font-family: inherit, - $_font-size : $checkout-progress-bar__font-size, - $_font-style : inherit, - $_font-weight: $font-weight__semibold, - $_line-height: inherit + $_color : $checkout-progress-bar-item-element-inner__color, + $_font-family : false, + $_font-size : $checkout-progress-bar__font-size, + $_font-style : false, + $_font-weight : $font-weight__semibold, + $_line-height : false ); } } @@ -120,18 +119,18 @@ $checkout-progress-bar-item-element-inner__active__line-height: 1 !default; background: $checkout-progress-bar-item__active__background-color; } - & > span { - color: $checkout-progress-bar-item__color; + > span { + @include lib-css(color, $checkout-progress-bar-item__color); &:before { - background: $checkout-progress-bar-item__active__background-color; + @include lib-css(background, $checkout-progress-bar-item__active__background-color); } &:after { - content: $checkout-progress-bar-item-element-inner__active__content; - font-family: $icons__font-name; - line-height: $checkout-progress-bar-item-element-inner__active__line-height; - font-size: $checkout-progress-bar-item-element-inner__active__font-size; + @include lib-css(content, $checkout-progress-bar-item-element-inner__active__content); + @include lib-css(font-family, $icons__font-name); + @include lib-css(line-height, $checkout-progress-bar-item-element-inner__active__line-height); + @include lib-font-size($checkout-progress-bar-item-element-inner__active__font-size); } } } @@ -139,14 +138,14 @@ $checkout-progress-bar-item-element-inner__active__line-height: 1 !default; &._complete { cursor: pointer; - & > span { - color: $checkout-progress-bar-item__color; + > span { + @include lib-css(color, $checkout-progress-bar-item__color); &:after { - content: $checkout-progress-bar-item-element-inner__active__content; - font-family: $icons__font-name; - line-height: $checkout-progress-bar-item-element-inner__active__line-height; - font-size: $checkout-progress-bar-item-element-inner__active__font-size; + @include lib-css(content, $checkout-progress-bar-item-element-inner__active__content); + @include lib-css(font-family, $icons__font-name); + @include lib-css(line-height, $checkout-progress-bar-item-element-inner__active__line-height); + @include lib-font-size($checkout-progress-bar-item-element-inner__active__font-size); } } } @@ -158,6 +157,6 @@ $checkout-progress-bar-item-element-inner__active__line-height: 1 !default; @include min-screen($screen__m) { .opc-progress-bar-item { - width: $checkout-progress-bar-item__width; + @include lib-css(width, $checkout-progress-bar-item__width); } } diff --git a/Magento_Checkout/styles/module/checkout/_shipping-policy.scss b/Magento_Checkout/styles/module/checkout/_shipping-policy.scss index a9341ff7..3fe953b3 100644 --- a/Magento_Checkout/styles/module/checkout/_shipping-policy.scss +++ b/Magento_Checkout/styles/module/checkout/_shipping-policy.scss @@ -2,9 +2,9 @@ // Variables // _____________________________________________ -$checkout-shipping-policy-action__color : $link__color !default; -$checkout-shipping-policy-tooltip__width : 420px !default; -$checkout-shipping-policy-tooltip-mobile__width: 300px !default; +$checkout-shipping-policy-action__color : $link__color; +$checkout-shipping-policy-tooltip__width : 420px; +$checkout-shipping-policy-tooltip-mobile__width : 300px; // // Common @@ -19,7 +19,7 @@ $checkout-shipping-policy-tooltip-mobile__width: 300px !default; top: 12px; .field-tooltip-action { - color: $checkout-shipping-policy-action__color; + @include lib-css(color, $checkout-shipping-policy-action__color); cursor: pointer; &:before { @@ -34,7 +34,7 @@ $checkout-shipping-policy-tooltip-mobile__width: 300px !default; .field-tooltip-content { @extend .abs-add-box-sizing; @extend .abs-checkout-tooltip-content-position-top; - width: $checkout-shipping-policy-tooltip__width; + @include lib-css(width, $checkout-shipping-policy-tooltip__width); top: $indent__l; } } @@ -53,7 +53,7 @@ $checkout-shipping-policy-tooltip-mobile__width: 300px !default; top: auto; .field-tooltip-content { - width: $checkout-shipping-policy-tooltip-mobile__width; + @include lib-css(width, $checkout-shipping-policy-tooltip-mobile__width); right: auto; &:before, diff --git a/Magento_Checkout/styles/module/checkout/_shipping.scss b/Magento_Checkout/styles/module/checkout/_shipping.scss index 0afc603b..51200903 100644 --- a/Magento_Checkout/styles/module/checkout/_shipping.scss +++ b/Magento_Checkout/styles/module/checkout/_shipping.scss @@ -2,35 +2,35 @@ // Variables // _____________________________________________ -$checkout-shipping-address__max-width : 600px !default; -$checkout-shipping-address__margin-top : 28px !default; +$checkout-shipping-address__max-width : 600px; +$checkout-shipping-address__margin-top : 28px; -$checkout-shipping-item__border : 2px solid transparent !default; -$checkout-shipping-item__line-height : 30px !default; -$checkout-shipping-item__margin : 0 0 $indent__base !default; -$checkout-shipping-item__padding : $indent__base ($indent__l + 5px) $indent__base $indent__base !default; -$checkout-shipping-item__transition : 0.3s border-color !default; -$checkout-shipping-item__width : 33.3333% !default; -$checkout-shipping-item-tablet__width : 50% !default; -$checkout-shipping-item-mobile__width : 100% !default; -$checkout-shipping-item__active__border-color : $color-orange-red1 !default; +$checkout-shipping-item-icon__color : $color-white; +$checkout-shipping-item-icon__content : $icon-checkmark; -$checkout-shipping-item-icon__background-color : $checkout-shipping-item__active__border-color !default; -$checkout-shipping-item-icon__color : $color-white !default; -$checkout-shipping-item-icon__content : $icon-checkmark !default; +$checkout-shipping-item__border : 2px solid transparent; +$checkout-shipping-item__line-height : 30px; +$checkout-shipping-item__margin : 0 0 $indent__base; +$checkout-shipping-item__padding : $indent__base ($indent__l + 5px) $indent__base $indent__base; +$checkout-shipping-item__transition : 0.3s border-color; +$checkout-shipping-item__width : 100% / 3; +$checkout-shipping-item-tablet__width : 100% / 2; +$checkout-shipping-item-mobile__width : 100%; +$checkout-shipping-item__active__border-color : $color-orange-red1; +$checkout-shipping-item-icon__background-color : $checkout-shipping-item__active__border-color; -$checkout-shipping-item-icon__selected__height : 27px !default; -$checkout-shipping-item-icon__selected__width : 29px !default; +$checkout-shipping-item-icon__selected__height : 27px; +$checkout-shipping-item-icon__selected__width : 29px; -$checkout-shipping-item-mobile__padding : 0 0 15px !default; -$checkout-shipping-item-mobile__margin : $checkout-shipping-item-mobile__padding !default; -$checkout-shipping-item-mobile__active__padding: 15px ($indent__l + 5px) 15px 18px !default; +$checkout-shipping-item-mobile__padding : 0 0 15px; +$checkout-shipping-item-mobile__margin : $checkout-shipping-item-mobile__padding; +$checkout-shipping-item-mobile__active__padding : 15px ($indent__l + 5px) 15px 18px; -$checkout-shipping-item-before__border-color : $color-gray80 !default; -$checkout-shipping-item-before__height : calc(100% - 20px) !default; +$checkout-shipping-item-before__border-color : $color-gray80; +$checkout-shipping-item-before__height : calc(100% - 20px); -$checkout-shipping-method__border : $checkout-step-title__border !default; -$checkout-shipping-method__padding : $indent__base !default; +$checkout-shipping-method__border : $checkout-step-title__border; +$checkout-shipping-method__padding : $indent__base; // // Common @@ -40,11 +40,11 @@ $checkout-shipping-method__padding : $indent__base !default; // // Shipping Address - // _____________________________________________ + // --------------------------------------------- .form-login, .form-shipping-address { - margin-top: $checkout-shipping-address__margin-top; + @include lib-css(margin-top, $checkout-shipping-address__margin-top); margin-bottom: $indent__base; .fieldset { @@ -61,12 +61,12 @@ $checkout-shipping-method__padding : $indent__base !default; .shipping-address-item { @extend .abs-add-box-sizing; - border: $checkout-shipping-item__border; - line-height: $checkout-shipping-item__line-height; - margin: $checkout-shipping-item__margin; - padding: $checkout-shipping-item__padding; - transition: $checkout-shipping-item__transition; - width: $checkout-shipping-item-tablet__width; + @include lib-css(border, $checkout-shipping-item__border); + @include lib-css(line-height, $checkout-shipping-item__line-height); + @include lib-css(margin, $checkout-shipping-item__margin); + @include lib-css(padding, $checkout-shipping-item__padding); + @include lib-css(transition, $checkout-shipping-item__transition); + @include lib-css(width, $checkout-shipping-item-tablet__width); display: inline-block; font-size: $font-size__base; position: relative; @@ -74,15 +74,15 @@ $checkout-shipping-method__padding : $indent__base !default; word-wrap: break-word; &.selected-item { - border-color: $checkout-shipping-item__active__border-color; + @include lib-css(border-color, $checkout-shipping-item__active__border-color); &:after { - background: $checkout-shipping-item-icon__background-color; - color: $checkout-shipping-item-icon__color; - content: $checkout-shipping-item-icon__content; - font-family: $icons__font-name; - height: $checkout-shipping-item-icon__selected__height; - width: $checkout-shipping-item-icon__selected__width; + @include lib-css(background, $checkout-shipping-item-icon__background-color); + @include lib-css(color, $checkout-shipping-item-icon__color); + @include lib-css(content, $checkout-shipping-item-icon__content); + @include lib-css(font-family, $icons__font-name); + @include lib-css(height, $checkout-shipping-item-icon__selected__height); + @include lib-css(width, $checkout-shipping-item-icon__selected__width); font-size: 27px; line-height: 21px; padding-top: 2px; @@ -131,7 +131,7 @@ $checkout-shipping-method__padding : $indent__base !default; // // Shipping Methods -// _____________________________________________ +// --------------------------------------------- .checkout-shipping-method { .step-title { @@ -163,9 +163,9 @@ $checkout-shipping-method__padding : $indent__base !default; tbody { td { - border-top: $checkout-shipping-method__border; - padding-bottom: $checkout-shipping-method__padding; - padding-top: $checkout-shipping-method__padding; + @include lib-css(border-top, $checkout-shipping-method__border); + @include lib-css(padding-bottom, $checkout-shipping-method__padding); + @include lib-css(padding-top, $checkout-shipping-method__padding); &:first-child { padding-left: 0; @@ -198,30 +198,30 @@ $checkout-shipping-method__padding : $indent__base !default; @include max-screen($screen__s) { .opc-wrapper { .form-login { - border-bottom: 1px solid $checkout-shipping-item-before__border-color; - margin: $checkout-shipping-item-mobile__padding; - padding: $checkout-shipping-item-mobile__padding; + @include lib-css(border-bottom, 1px solid $checkout-shipping-item-before__border-color); + @include lib-css(margin, $checkout-shipping-item-mobile__padding); + @include lib-css(padding, $checkout-shipping-item-mobile__padding); } .shipping-address-item { - border-bottom: 1px solid $checkout-shipping-item-before__border-color; - margin: $checkout-shipping-item-mobile__margin; - padding: $checkout-shipping-item-mobile__padding; + @include lib-css(border-bottom, 1px solid $checkout-shipping-item-before__border-color); + @include lib-css(margin, $checkout-shipping-item-mobile__margin); + @include lib-css(padding, $checkout-shipping-item-mobile__padding); width: 100%; &.selected-item { - padding: $checkout-shipping-item-mobile__active__padding; + @include lib-css(padding, $checkout-shipping-item-mobile__active__padding); border-bottom-width: 2px; .edit-address-link { - right: $checkout-shipping-item-icon__selected__width + $indent__s; + @include lib-css(right, $checkout-shipping-item-icon__selected__width + $indent__s); } } } .form-login, .form-shipping-address { - margin-top: $checkout-shipping-address__margin-top; + @include lib-css(margin-top, $checkout-shipping-address__margin-top); } .action-select-shipping-item { @@ -237,12 +237,12 @@ $checkout-shipping-method__padding : $indent__base !default; .edit-address-link { @include lib-icon-font( $icon-settings, - $_icon-font-size : 28px, - $_icon-font-line-height : 28px, - $_icon-font-text-hide : true, - $_icon-font-color : $color-gray19, - $_icon-font-color-hover : $color-gray19, - $_icon-font-color-active: $color-gray19 + $_icon-font-size : 28px, + $_icon-font-line-height : 28px, + $_icon-font-text-hide : true, + $_icon-font-color : $color-gray19, + $_icon-font-color-hover : $color-gray19, + $_icon-font-color-active : $color-gray19 ); margin: 0; position: absolute; @@ -274,7 +274,7 @@ $checkout-shipping-method__padding : $indent__base !default; .opc-wrapper { .form-login, .form-shipping-address { - max-width: $checkout-shipping-address__max-width; + @include lib-css(max-width, $checkout-shipping-address__max-width); } } .table-checkout-shipping-method { @@ -285,11 +285,11 @@ $checkout-shipping-method__padding : $indent__base !default; @include min-screen($screen__l) { .opc-wrapper { .shipping-address-item { - width: $checkout-shipping-item__width; + @include lib-css(width, $checkout-shipping-item__width); &:before { - background: $checkout-shipping-item-before__border-color; - height: $checkout-shipping-item-before__height; + @include lib-css(background, $checkout-shipping-item-before__border-color); + @include lib-css(height, $checkout-shipping-item-before__height); content: ''; left: 0; position: absolute; diff --git a/Magento_Checkout/styles/module/checkout/_sidebar-shipping-information.scss b/Magento_Checkout/styles/module/checkout/_sidebar-shipping-information.scss index 32c1d100..e1101c47 100644 --- a/Magento_Checkout/styles/module/checkout/_sidebar-shipping-information.scss +++ b/Magento_Checkout/styles/module/checkout/_sidebar-shipping-information.scss @@ -2,40 +2,40 @@ // Variables // _____________________________________________ -$checkout-sidebar-shipping-information__padding : $indent__l !default; -$checkout-sidebar-shipping-information__line-height : $checkout-billing-address-details__line-height !default; +$checkout-sidebar-shipping-information__padding : $indent__l; +$checkout-sidebar-shipping-information__line-height : $checkout-billing-address-details__line-height; -$checkout-sidebar-shipping-information-edit-icon__color : $minicart-icons-color !default; -$checkout-sidebar-shipping-information-edit-icon__content : $icon-settings !default; -$checkout-sidebar-shipping-information-edit-icon__font-size : 28px !default; -$checkout-sidebar-shipping-information-edit-icon__line-height : 28px !default; -$checkout-sidebar-shipping-information-edit-icon__top : 2px !default; -$checkout-sidebar-shipping-information-edit-icon__hover__color: $primary__color !default; +$checkout-sidebar-shipping-information-edit-icon__color : $minicart-icons-color; +$checkout-sidebar-shipping-information-edit-icon__content : $icon-settings; +$checkout-sidebar-shipping-information-edit-icon__font-size : 28px; +$checkout-sidebar-shipping-information-edit-icon__line-height : 28px; +$checkout-sidebar-shipping-information-edit-icon__top : 2px; +$checkout-sidebar-shipping-information-edit-icon__hover__color : $primary__color; // // Shipping Information -// _____________________________________________ +// --------------------------------------------- .opc-block-shipping-information { - padding: 0 $checkout-sidebar-shipping-information__padding; + @include lib-css(padding, 0 $checkout-sidebar-shipping-information__padding); .shipping-information-title { @extend .abs-checkout-title; - border-bottom: $checkout-step-title__border; + @include lib-css(border-bottom, $checkout-step-title__border); margin: 0 0 $indent__base; position: relative; .action-edit { @extend .abs-action-button-as-link; - top: $checkout-sidebar-shipping-information-edit-icon__top; + @include lib-css(top, $checkout-sidebar-shipping-information-edit-icon__top); @include lib-icon-font( $checkout-sidebar-shipping-information-edit-icon__content, - $_icon-font-size : $checkout-sidebar-shipping-information-edit-icon__font-size, - $_icon-font-line-height : $checkout-sidebar-shipping-information-edit-icon__line-height, - $_icon-font-text-hide : true, - $_icon-font-color : $checkout-sidebar-shipping-information-edit-icon__color, - $_icon-font-color-hover : $checkout-sidebar-shipping-information-edit-icon__hover__color, - $_icon-font-color-active: $checkout-sidebar-shipping-information-edit-icon__color + $_icon-font-size : $checkout-sidebar-shipping-information-edit-icon__font-size, + $_icon-font-line-height : $checkout-sidebar-shipping-information-edit-icon__line-height, + $_icon-font-text-hide : true, + $_icon-font-color : $checkout-sidebar-shipping-information-edit-icon__color, + $_icon-font-color-hover : $checkout-sidebar-shipping-information-edit-icon__hover__color, + $_icon-font-color-active : $checkout-sidebar-shipping-information-edit-icon__color ); margin: 0; position: absolute; @@ -44,7 +44,7 @@ $checkout-sidebar-shipping-information-edit-icon__hover__color: $primary__color } .shipping-information-content { - line-height: $checkout-sidebar-shipping-information__line-height; + @include lib-css(line-height, $checkout-sidebar-shipping-information__line-height); .actions-toolbar { margin-left: 0; } diff --git a/Magento_Checkout/styles/module/checkout/_sidebar.scss b/Magento_Checkout/styles/module/checkout/_sidebar.scss index a688301a..dc26c1a9 100644 --- a/Magento_Checkout/styles/module/checkout/_sidebar.scss +++ b/Magento_Checkout/styles/module/checkout/_sidebar.scss @@ -2,9 +2,9 @@ // Variables // _____________________________________________ -$checkout-sidebar__margin: $indent__base !default; -$checkout-sidebar__margin__xl: 46px !default; -$checkout-sidebar__columns: 4 !default; +$checkout-sidebar__margin: $indent__base; +$checkout-sidebar__margin__xl: 46px; +$checkout-sidebar__columns: 4; // // Desktop @@ -12,7 +12,7 @@ $checkout-sidebar__columns: 4 !default; @include min-screen($screen__m) { .opc-sidebar { - margin: $checkout-sidebar__margin__xl 0 $checkout-sidebar__margin; + @include lib-css(margin, $checkout-sidebar__margin__xl 0 $checkout-sidebar__margin); @include lib-layout-column(2, 2, $checkout-sidebar__columns); } } diff --git a/Magento_Checkout/styles/module/checkout/_tooltip.scss b/Magento_Checkout/styles/module/checkout/_tooltip.scss index 18ca2aaf..e606fd3f 100644 --- a/Magento_Checkout/styles/module/checkout/_tooltip.scss +++ b/Magento_Checkout/styles/module/checkout/_tooltip.scss @@ -2,28 +2,28 @@ // Variables // _____________________________________________ -$checkout-tooltip__hover__z-index : $tooltip__z-index !default; -$checkout-tooltip-breakpoint__screen-m : $modal-popup-breakpoint-screen__m !default; +$checkout-tooltip__hover__z-index : $tooltip__z-index; +$checkout-tooltip-breakpoint__screen-m : $modal-popup-breakpoint-screen__m; -$checkout-tooltip-icon-arrow__font-size : 10px !default; -$checkout-tooltip-icon-arrow__left : -( $checkout-tooltip-content__padding + $checkout-tooltip-icon-arrow__font-size - $checkout-tooltip-content__border-width) !default; +$checkout-tooltip-icon-arrow__font-size : 10px; +$checkout-tooltip-icon-arrow__left : -( $checkout-tooltip-content__padding + $checkout-tooltip-icon-arrow__font-size - $checkout-tooltip-content__border-width); -$checkout-tooltip-icon__color : $color-gray-light2 !default; -$checkout-tooltip-icon__content : $icon-help !default; -$checkout-tooltip-icon__font-size : 24px !default; -$checkout-tooltip-icon__hover__color : $primary__color !default; +$checkout-tooltip-icon__color : $color-gray-light2; +$checkout-tooltip-icon__content : $icon-help; +$checkout-tooltip-icon__font-size : 24px; +$checkout-tooltip-icon__hover__color : $primary__color; -$checkout-tooltip-content__background-color : $color-gray-light01 !default; -$checkout-tooltip-content__border-color : $color-gray60 !default; -$checkout-tooltip-content__border-width : 1px !default; -$checkout-tooltip-content__font-size : $font-size__base !default; -$checkout-tooltip-content__padding : 12px !default; -$checkout-tooltip-content__width : 270px !default; -$checkout-tooltip-content__active__border-color: darken($checkout-tooltip-content__border-color, 20%) !default; +$checkout-tooltip-content__background-color : $color-gray-light01; +$checkout-tooltip-content__border-color : $color-gray60; +$checkout-tooltip-content__border-width : 1px; +$checkout-tooltip-content__font-size : $font-size__base; +$checkout-tooltip-content__padding : 12px; +$checkout-tooltip-content__width : 270px; +$checkout-tooltip-content__active__border-color : darken($checkout-tooltip-content__border-color, 20%); -$checkout-tooltip-content-mobile-popup__width : 200px !default; -$checkout-tooltip-content-mobile__right : -($indent__s) !default; -$checkout-tooltip-content-mobile__top : 30px + $checkout-tooltip-icon-arrow__font-size !default; +$checkout-tooltip-content-mobile-popup__width : 200px; +$checkout-tooltip-content-mobile__right : -($indent__s); +$checkout-tooltip-content-mobile__top : 30px + $checkout-tooltip-icon-arrow__font-size; // // Common @@ -36,7 +36,7 @@ $checkout-tooltip-content-mobile__top : 30px + $checkout-tooltip-icon-a top: 1px; &._active { - z-index: $checkout-tooltip__hover__z-index; + @include lib-css(z-index, $checkout-tooltip__hover__z-index); .field-tooltip-content { display: block; @@ -44,7 +44,7 @@ $checkout-tooltip-content-mobile__top : 30px + $checkout-tooltip-icon-a .field-tooltip-action { &:before { - color: $checkout-tooltip-icon__hover__color; + @include lib-css(color, $checkout-tooltip-icon__hover__color); } } } @@ -52,35 +52,35 @@ $checkout-tooltip-content-mobile__top : 30px + $checkout-tooltip-icon-a .field-tooltip-action { @include lib-icon-font( $checkout-tooltip-icon__content, - $_icon-font-size : $checkout-tooltip-icon__font-size, - $_icon-font-text-hide : true, - $_icon-font-color : $checkout-tooltip-icon__color, - $_icon-font-color-hover : $checkout-tooltip-icon__hover__color, - $_icon-font-color-active: false + $_icon-font-size : $checkout-tooltip-icon__font-size, + $_icon-font-text-hide : true, + $_icon-font-color : $checkout-tooltip-icon__color, + $_icon-font-color-hover : $checkout-tooltip-icon__hover__color, + $_icon-font-color-active : false ); &:focus { ._keyfocus & { - z-index: $checkout-tooltip__hover__z-index; + @include lib-css(z-index, $checkout-tooltip__hover__z-index); - & + .field-tooltip-content { + + .field-tooltip-content { display: block; } &:before { - color: $checkout-tooltip-icon__hover__color; + @include lib-css(color, $checkout-tooltip-icon__hover__color); } } } } .field-tooltip-content { - background: $checkout-tooltip-content__background-color; - border: $checkout-tooltip-content__border-width solid $checkout-tooltip-content__border-color; - border-radius: $checkout-tooltip-content__border-width; - font-size: $checkout-tooltip-content__font-size; - padding: $checkout-tooltip-content__padding; - width: $checkout-tooltip-content__width; + @include lib-css(background, $checkout-tooltip-content__background-color); + @include lib-css(border, $checkout-tooltip-content__border-width solid $checkout-tooltip-content__border-color); + @include lib-css(border-radius, $checkout-tooltip-content__border-width); + @include lib-css(font-size, $checkout-tooltip-content__font-size); + @include lib-css(padding, $checkout-tooltip-content__padding); + @include lib-css(width, $checkout-tooltip-content__width); display: none; left: 38px; position: absolute; @@ -92,12 +92,12 @@ $checkout-tooltip-content-mobile__top : 30px + $checkout-tooltip-icon-a &:before, &:after { @include lib-arrow( - $_position: left, - $_size : $checkout-tooltip-icon-arrow__font-size, - $_color : $checkout-tooltip-content__background-color + $_position : left, + $_size : $checkout-tooltip-icon-arrow__font-size, + $_color : $checkout-tooltip-content__background-color ); - left: $checkout-tooltip-icon-arrow__left; - top: $checkout-tooltip-content__padding; + @include lib-css(left, $checkout-tooltip-icon-arrow__left); + @include lib-css(top, $checkout-tooltip-content__padding); content: ''; display: block; position: absolute; @@ -105,11 +105,11 @@ $checkout-tooltip-content-mobile__top : 30px + $checkout-tooltip-icon-a } &:before { - border-right-color: $checkout-tooltip-content__active__border-color; + @include lib-css(border-right-color, $checkout-tooltip-content__active__border-color); } &:after { - border-right-color: $checkout-tooltip-content__background-color; + @include lib-css(border-right-color, $checkout-tooltip-content__background-color); width: 1px; z-index: 4; } @@ -124,7 +124,7 @@ $checkout-tooltip-content-mobile__top : 30px + $checkout-tooltip-icon-a .modal-popup { .field-tooltip { .field-tooltip-content { - width: $checkout-tooltip-content-mobile-popup__width; + @include lib-css(width, $checkout-tooltip-content-mobile-popup__width); } } } diff --git a/Magento_Cms/styles/_widgets.scss b/Magento_Cms/styles/_widgets.scss index 70ffd5e1..328db67f 100644 --- a/Magento_Cms/styles/_widgets.scss +++ b/Magento_Cms/styles/_widgets.scss @@ -1,9 +1,9 @@ -$widgets-indent__bottom: $indent__base !default; +$widgets-indent__bottom: $indent__base; .block-static-block, .block-cms-link { &.widget { - margin-bottom: $widgets-indent__bottom; + @include lib-css(margin-bottom, $widgets-indent__bottom); .links & { margin-bottom: 0; } diff --git a/Magento_Customer/styles/_module.scss b/Magento_Customer/styles/_module.scss index 36b4dafb..fc4d3fae 100644 --- a/Magento_Customer/styles/_module.scss +++ b/Magento_Customer/styles/_module.scss @@ -1,2 +1,518 @@ -@import 'variables'; -@import 'module/common'; +// +// Variables +// _____________________________________________ + +$account-nav-background : $sidebar__background-color; +$account-nav-color : false; + +$account-nav-current-border : 3px solid transparent; +$account-nav-current-border-color : $color-orange-red1; +$account-nav-current-color : false; +$account-nav-current-font-weight : $font-weight__semibold; + +$account-nav-delimiter__border-color : $color-gray82; + +$account-nav-item-hover : $color-gray91; + +$_password-default : $color-gray-light01; +$_password-weak : #ffafae; +$_password-medium : #ffd6b3; +$_password-strong : #c5eeac; +$_password-very-strong : #81b562; + +.login-container { + .block { + &-new-customer { + .actions-toolbar { + margin-top: 25px; + } + } + + .block-title { + @extend .abs-login-block-title; + @include lib-font-size(18); + } + } + + .fieldset { + @include lib-form-hasrequired(bottom); + &:after { + margin-top: 35px; + } + } +} + +.block-addresses-list { + .items.addresses { + > .item { + margin-bottom: $indent__base; + + &:last-child { + margin-bottom: 0; + } + } + } +} + +.form-address-edit { + #region_id { + display: none; + } + + .actions-toolbar .action.primary { + @extend .abs-button-l; + } +} + +.form-edit-account { + .fieldset.password { + display: none; + } +} + +.box-billing-address, +.box-shipping-address, +.box-information, +.box-newsletter { + .box-content { + line-height: 26px; + } +} + +// Full name fieldset +.fieldset { + .fullname { + &.field { + > .label { + @extend .abs-visually-hidden; + + + .control { + width: 100%; + } + } + } + + .field { + @extend .abs-add-clearfix; + } + } +} + +// +// My account +// --------------------------------------------- + +.account { + .column.main { + h2 { + margin-top: 0; + } + + .toolbar { + text-align: center; + .limiter-options { + width: auto; + } + } + + .limiter { + >.label { + @extend .abs-visually-hidden; + } + } + + .block:not(.widget) { + @extend .abs-account-blocks; + } + } + + .sidebar-additional { + margin-top: 40px; + } + + .table-wrapper { + &:last-child { + margin-bottom: 0; + } + + .action { + margin-right: 15px; + + &:last-child { + margin-right: 0; + } + } + } + + .table-return-items { + .qty { + .input-text { + @extend .abs-input-qty; + } + } + } +} + +// Checkout address (create shipping address) +.field.street { + .field.additional { + .label { + @extend .abs-visually-hidden; + } + } +} + +// +// Account navigation +// --------------------------------------------- + +.account-nav { + .title { + @extend .abs-visually-hidden; + } + + .content { + @include lib-css(background, $account-nav-background); + padding: 15px 0; + } + + .item { + margin: 3px 0 0; + + &:first-child { + margin-top: 0; + } + + a, + > strong { + @include lib-css(color, $account-nav-color); + border-left: 3px solid transparent; + display: block; + padding: $indent__xs 18px $indent__xs 15px; + } + + a { + text-decoration: none; + + &:hover { + @include lib-css(background, $account-nav-item-hover); + } + } + + &.current { + a, + strong { + @include lib-css(border-color, $account-nav-current-border-color); + @include lib-css(color, $account-nav-current-color); + @include lib-css(font-weight, $account-nav-current-font-weight); + } + + a { + @include lib-css(border-color, $account-nav-current-border-color); + } + } + + .delimiter { + border-top: 1px solid $account-nav-delimiter__border-color; + display: block; + margin: $indent__s 1.8rem; + } + } +} + +// +// Blocks & Widgets +// --------------------------------------------- + +.block { + @extend .abs-margin-for-blocks-and-widgets; + .column.main & { + &:last-child { + margin-bottom: 0; + } + } + + .title { + margin-bottom: $indent__s; + + strong { + @include lib-heading(h4); + .column.main & { + font-size: $h3__font-size; + } + } + } + + p:last-child { + margin: 0; + } + + .box-actions { + margin-top: $indent__xs; + } +} + +// +// Password Strength Meter +// --------------------------------------------- + +.field.password { + .control { + @include lib-vendor-prefix-display(); + @include lib-vendor-prefix-flex-direction(); + + .mage-error { + @include lib-vendor-prefix-order(2); + } + + .input-text { + @include lib-vendor-prefix-order(0); + z-index: 2; + } + } +} + +.password-strength-meter { + background-color: $_password-default; + height: $form-element-input__height; + line-height: $form-element-input__height; + padding: $form-element-input__padding; + position: relative; + z-index: 1; + + &:before { + content: ''; + height: 100%; + left: 0; + position: absolute; + top: 0; + z-index: -1; + } + + .password-none & { + &:before { + background-color: $_password-default; + width: 100%; + } + } + + .password-weak & { + &:before { + background-color: $_password-weak; + width: 25%; + } + } + + .password-medium & { + &:before { + background-color: $_password-medium; + width: 50%; + } + } + + .password-strong & { + &:before { + background-color: $_password-strong; + width: 75%; + } + } + + .password-very-strong & { + &:before { + background-color: $_password-very-strong; + width: 100%; + } + } +} + +.control.captcha-image { + @include lib-css(margin-top, $indent__s); + + .captcha-img { + vertical-align: middle; + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__s) { + .account { + .column.main, + .sidebar-additional { + margin: 0; + } + } +} + +@include max-screen($screen__m) { + .login-container { + .fieldset { + &:after { + text-align: center; + } + } + } + + .account { + .page.messages { + margin-bottom: $indent__xl; + } + + .toolbar { + @extend .abs-pager-toolbar-mobile; + } + } + + .control.captcha-image { + .captcha-img { + @include lib-css(margin-bottom, $indent__s); + display: block; + } + } + + .customer-account-index { + .page-title-wrapper { + position: relative; + } + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .login-container { + @extend .abs-add-clearfix-desktop; + + .block { + @extend .abs-blocks-2columns; + &.login { + .actions-toolbar { + > .primary { + margin-bottom: 0; + margin-right: $indent__l; + } + + > .secondary { + float: left; + } + } + } + } + + .fieldset { + &:after { + @extend .abs-margin-for-forms-desktop; + } + + > .field { + > .control { + width: 55%; + } + } + } + } + + // Full name fieldset + .fieldset { + .fullname { + .field { + .label { + @include lib-css(margin, $form-field-type-label-inline__margin); + @include lib-css(padding, $form-field-type-label-inline__padding); + @include lib-css(text-align, $form-field-type-label-inline__align); + @include lib-css(width, $form-field-type-label-inline__width); + box-sizing: border-box; + float: left; + } + + .control { + @include lib-css(width, $form-field-type-control-inline__width); + float: left; + } + } + } + } + + .form.password.reset, + .form.send.confirmation, + .form.password.forget, + .form.create.account { + min-width: 600px; + width: 50%; + } + + // + // My account + // --------------------------------------------- + + .account.page-layout-2columns-left { + .sidebar-main, + .sidebar-additional { + width: 22.3%; + } + + .column.main { + width: 77.7%; + } + } + + .account { + .column.main { + .block:not(.widget) { + .block-content { + @extend .abs-add-clearfix-desktop; + + .box { + @extend .abs-blocks-2columns; + } + } + } + } + + .toolbar { + @extend .abs-pager-toolbar; + } + } + + .block-addresses-list { + .items.addresses { + @extend .abs-add-clearfix-desktop; + font-size: 0; + + > .item { + display: inline-block; + font-size: $font-size__base; + margin-bottom: $indent__base; + vertical-align: top; + width: 48.8%; + + &:nth-last-child(1), + &:nth-last-child(2) { + margin-bottom: 0; + } + + &:nth-child(even) { + margin-left: 2.4%; + } + } + } + } + + // + // Welcome block + // --------------------------------------------- + + .dashboard-welcome-toggler { + @extend .abs-visually-hidden-desktop; + } + + .control.captcha-image { + .captcha-img { + margin: 0 $indent__s $indent__s 0; + } + } +} diff --git a/Magento_Customer/styles/_variables.scss b/Magento_Customer/styles/_variables.scss deleted file mode 100644 index 2f1bc267..00000000 --- a/Magento_Customer/styles/_variables.scss +++ /dev/null @@ -1,19 +0,0 @@ -// -// Variables -// _____________________________________________ - -$account-nav-background : $sidebar__background-color !default; -$account-nav-color : false !default; - -$account-nav-current-border : 3px solid transparent !default; -$account-nav-current-border-color: $color-orange-red1 !default; -$account-nav-current-color : false !default; -$account-nav-current-font-weight : $font-weight__semibold !default; - -$account-nav-item-hover : $color-gray91 !default; - -$_password-default : $color-gray-light01 !default; -$_password-weak : #ffafae !default; -$_password-medium : #ffd6b3 !default; -$_password-strong : #c5eeac !default; -$_password-very-strong : #81b562 !default; diff --git a/Magento_Customer/styles/module/_common.scss b/Magento_Customer/styles/module/_common.scss deleted file mode 100644 index c51b3744..00000000 --- a/Magento_Customer/styles/module/_common.scss +++ /dev/null @@ -1,459 +0,0 @@ -// -// Common -// _____________________________________________ - -.login-container { - .block { - &-new-customer { - .actions-toolbar { - margin-top: 25px; - } - } - - .block-title { - @extend .abs-login-block-title; - font-size: 18px; - } - } - - .fieldset { - @include lib-form-hasrequired(bottom); - &:after { - margin-top: 35px; - } - } -} - -.block-addresses-list { - .items.addresses { - & > .item { - margin-bottom: $indent__base; - - &:last-child { - margin-bottom: 0; - } - } - } -} - -.form-address-edit { - .region select { - display: none; - } - - .actions-toolbar .action.primary { - @extend .abs-button-l; - } -} - -.form-edit-account { - .fieldset.password { - display: none; - } -} - -.box-billing-address, -.box-shipping-address, -.box-information, -.box-newsletter { - .box-content { - line-height: 26px; - } -} - -// -// My account -// --------------------------------------------- - -.account { - .column.main { - h2 { - margin-top: 0; - } - - .toolbar { - text-align: center; - .limiter-options { - width: auto; - } - } - - .limiter { - >.label { - @extend .abs-visually-hidden; - } - } - - .block:not(.widget) { - @extend .abs-account-blocks; - } - } - - .sidebar-additional { - margin-top: 40px; - } - - .table-wrapper { - &:last-child { - margin-bottom: 0; - } - - .action { - margin-right: 15px; - - &:last-child { - margin-right: 0; - } - } - } - - .table-return-items { - .qty { - .input-text { - @extend .abs-input-qty; - } - } - } -} - -// Checkout address (create shipping address) -.field.street { - .field.additional { - .label { - @extend .abs-visually-hidden; - } - } -} - -// -// Account navigation -// --------------------------------------------- - -.account-nav { - .title { - @extend .abs-visually-hidden; - } - - .content { - background: $account-nav-background; - padding: 15px 0; - } - - .item { - margin: 3px 0 0; - - &:first-child { - margin-top: 0; - } - - a, - & > strong { - color: $account-nav-color; - border-left: 3px solid transparent; - display: block; - padding: $indent__xs 18px $indent__xs 15px; - } - - a { - text-decoration: none; - - &:hover { - background: $account-nav-item-hover; - } - } - - &.current { - a, - strong { - border-color: $account-nav-current-border-color; - color: $account-nav-current-color; - font-weight: $account-nav-current-font-weight; - } - - a { - border-color: $account-nav-current-border-color; - } - } - } -} - -// -// Blocks & Widgets -// --------------------------------------------- - -.block { - @extend .abs-margin-for-blocks-and-widgets; - .column.main & { - &:last-child { - margin-bottom: 0; - } - } - - .title { - margin-bottom: $indent__s; - - strong { - @include lib-heading(h4); - .column.main & { - font-size: $h3__font-size; - } - } - } - - p:last-child { - margin: 0; - } - - .box-actions { - margin-top: $indent__xs; - } -} - -// -// Password Strength Meter -// --------------------------------------------- - -.field.password { - .control { - display: flex; - flex-direction: column; - .mage-error { - order: 2; - } - .input-text { - order: 0; - } - } -} - -.password-strength-meter { - background-color: $_password-default; - height: $form-element-input__height; - line-height: $form-element-input__height; - padding: $form-element-input__padding; - position: relative; - z-index: 1; - - &:before { - content: ''; - height: 100%; - left: 0; - position: absolute; - top: 0; - z-index: -1; - } - - .password-strength-meter-0 & { - &:before { - background-color: $_password-default; - width: 100%; - } - } - - .password-strength-meter-1 & { - &:before { - background-color: $_password-weak; - width: 25%; - } - } - - .password-strength-meter-2 & { - &:before { - background-color: $_password-medium; - width: 50%; - } - } - - .password-strength-meter-3 & { - &:before { - background-color: $_password-strong; - width: 75%; - } - } - - .password-strength-meter-4 & { - &:before { - background-color: $_password-very-strong; - width: 100%; - } - } -} - -.control.captcha-image { - margin-top: $indent__s; - - .captcha-img { - vertical-align: middle; - } -} - -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__s) { - .account { - .column.main, - .sidebar-additional { - margin: 0; - } - } -} - -@include max-screen($screen__m) { - .login-container { - .fieldset { - &:after { - text-align: center; - } - } - } - - .account { - .page.messages { - margin-bottom: $indent__xl; - } - - .toolbar { - @extend .abs-pager-toolbar-mobile; - } - } - - .control.captcha-image { - .captcha-img { - margin-bottom: $indent__s; - display: block; - } - } - - .customer-account-index { - .page-title-wrapper { - position: relative; - } - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .login-container { - @extend .abs-add-clearfix-desktop; - - .block { - @extend .abs-blocks-2columns; - &.login { - .actions-toolbar { - & > .primary { - margin-bottom: 0; - margin-right: $indent__l; - } - - & > .secondary { - float: left; - } - } - } - } - - .fieldset { - &:after { - @extend .abs-margin-for-forms-desktop; - } - - & > .field { - & > .control { - width: 55%; - } - } - } - } - - .form-create-account { - .fieldset-fullname { - .fields { - .field { - float: left; - margin: 0 $indent__s $indent__s 0; - } - } - - .field-name-prefix, - .field-name-suffix { - width: 50px; - } - } - } - - .form.password.reset, - .form.send.confirmation, - .form.password.forget, - .form.create.account { - min-width: 600px; - width: 50%; - } - - // - // My account - // --------------------------------------------- - - .account.page-layout-2columns-left { - .sidebar-main, - .sidebar-additional { - width: 22.3%; - } - - .column.main { - width: 77.7%; - } - } - - .account { - .column.main { - .block:not(.widget) { - .block-content { - @extend .abs-add-clearfix-desktop; - - .box { - @extend .abs-blocks-2columns; - } - } - } - } - - .toolbar { - @extend .abs-pager-toolbar; - } - } - - .block-addresses-list { - .items.addresses { - @extend .abs-add-clearfix-desktop; - - & > .item { - @extend .abs-blocks-2columns; - margin-bottom: $indent__base; - - &:nth-last-child(1), - &:nth-last-child(2) { - margin-bottom: 0; - } - } - } - } - - // - // Welcome block - // --------------------------------------------- - - .dashboard-welcome-toggler { - @extend .abs-visually-hidden-desktop; - } - - .control.captcha-image { - .captcha-img { - margin: 0 $indent__s $indent__s 0; - } - } -} diff --git a/Magento_Downloadable/styles/_module.scss b/Magento_Downloadable/styles/_module.scss index ce86e39b..58959a75 100644 --- a/Magento_Downloadable/styles/_module.scss +++ b/Magento_Downloadable/styles/_module.scss @@ -1 +1,93 @@ -@import 'module/common'; +.downloadable.samples { + margin-bottom: $indent__base; + + dd { + margin: 0 0 $indent__s; + } +} + +.table-downloadable-products { + .product-name { + margin-right: 15px; + } +} + +.field.downloads { + .price-container { + display: inline; + white-space: nowrap; + + &:before { + content: ' + '; + display: inline; + } + } + + .price-excluding-tax { + display: inline; + + &:before { + content: ' ('attr(data-label) ': '; + } + + &:after { + content: ')'; + } + } + + .price-including-tax { + @include lib-font-size(14); + display: inline; + font-weight: $font-weight__semibold; + } + + .sample.link { + float: right; + } +} + +.page-product-downloadable { + .product-add-form { + @extend .abs-add-clearfix; + clear: both; + margin-bottom: $indent__m; + } + + .product-options-bottom { + .field.qty { + display: none !important; + } + } + + .product-options-wrapper { + .fieldset { + .legend.links-title { + @extend .abs-visually-hidden; + } + } + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .page-product-downloadable { + .product-options-wrapper { + float: left; + width: 55%; + } + + .product-options-bottom { + float: right; + width: 40%; + + .field.qty { + & + .actions { + padding-top: 0; + } + } + } + } +} diff --git a/Magento_Downloadable/styles/module/_common.scss b/Magento_Downloadable/styles/module/_common.scss deleted file mode 100644 index c67c856d..00000000 --- a/Magento_Downloadable/styles/module/_common.scss +++ /dev/null @@ -1,92 +0,0 @@ -.downloadable.samples { - margin-bottom: $indent__base; - - dd { - margin: 0 0 $indent__s; - } -} - -.table-downloadable-products { - .product-name { - margin-right: 15px; - } -} - -.field.downloads { - .price-container { - display: inline; - white-space: nowrap; - - &:before { - content: ' + '; - display: inline; - } - } - - .price-excluding-tax { - display: inline; - - &:before { - content: ' ('attr(data-label) ': '; - } - - &:after { - content: ')'; - } - } - - .price-including-tax { - font-size: 14px; - display: inline; - font-weight: $font-weight__semibold; - } - - .sample.link { - float: right; - } -} - -.page-product-downloadable { - .product-add-form { - @extend .abs-add-clearfix; - clear: both; - margin-bottom: $indent__m; - } - - .product-options-bottom { - .field.qty { - display: none !important; - } - } - - .product-options-wrapper { - .fieldset { - .legend.links-title { - @extend .abs-visually-hidden; - } - } - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .page-product-downloadable { - .product-options-wrapper { - float: left; - width: 55%; - } - - .product-options-bottom { - float: right; - width: 40%; - .field.qty { - & + .actions { - padding-top: 0; - } - } - } - } -} diff --git a/Magento_GiftCard/styles/_module.scss b/Magento_GiftCard/styles/_module.scss index ce86e39b..d42e22f1 100644 --- a/Magento_GiftCard/styles/_module.scss +++ b/Magento_GiftCard/styles/_module.scss @@ -1 +1,37 @@ -@import 'module/common'; +.cart { + &-summary { + .block { + &.giftcard { + .action.check { + @include lib-button-s(); + @extend .abs-action-button-as-link; + margin-top: $indent__base; + } + } + } + } +} + +.page-product-giftcard { + .giftcard-amount { + margin-bottom: 0; + text-align: left; + + .field:last-child { + padding-bottom: $form-field__vertical-indent; + } + } + + .product-options-wrapper .field:first-of-type { + margin-top: $form-field__vertical-indent; + } + + .fieldset.giftcard { + > .legend { + @extend .abs-visually-hidden; + + br { + @extend .abs-no-display; + } + } + } +} diff --git a/Magento_GiftCard/styles/module/_common.scss b/Magento_GiftCard/styles/module/_common.scss deleted file mode 100644 index 8d137151..00000000 --- a/Magento_GiftCard/styles/module/_common.scss +++ /dev/null @@ -1,37 +0,0 @@ -.cart { - &-summary { - .block { - &.giftcard { - .action.check { - @extend .abs-action-button-as-link; - @include lib-button-s(); - margin-top: $indent__base; - } - } - } - } -} - -.page-product-giftcard { - .giftcard-amount { - margin-bottom: 0; - text-align: left; - - .field:last-child { - padding-bottom: $form-field__vertical-indent; - } - } - - .product-options-wrapper .field:first-of-type { - margin-top: $form-field__vertical-indent; - } - - .fieldset.giftcard { - & > .legend { - @extend .abs-visually-hidden; - & + br { - @extend .abs-no-display; - } - } - } -} diff --git a/Magento_GiftCardAccount/styles/_module.scss b/Magento_GiftCardAccount/styles/_module.scss index ce86e39b..28511cd8 100644 --- a/Magento_GiftCardAccount/styles/_module.scss +++ b/Magento_GiftCardAccount/styles/_module.scss @@ -1 +1,33 @@ -@import 'module/common'; +.giftcard-account { + .please-wait { + display: none; + } + + .form-giftcard-redeem { + .giftcard.info { + margin-bottom: $indent__l; + } + } +} + +.opc-wrapper { + .form-giftcard-account { + max-width: 500px; + + .field { + margin: 0 0 $indent__base; + + .label { + @extend .abs-visually-hidden; + } + } + } + + .giftcard-account-info { + margin: 0 0 $indent__base; + + .giftcard-account-number { + margin: 0 0 $indent__s; + } + } +} diff --git a/Magento_GiftCardAccount/styles/module/_common.scss b/Magento_GiftCardAccount/styles/module/_common.scss deleted file mode 100644 index 28511cd8..00000000 --- a/Magento_GiftCardAccount/styles/module/_common.scss +++ /dev/null @@ -1,33 +0,0 @@ -.giftcard-account { - .please-wait { - display: none; - } - - .form-giftcard-redeem { - .giftcard.info { - margin-bottom: $indent__l; - } - } -} - -.opc-wrapper { - .form-giftcard-account { - max-width: 500px; - - .field { - margin: 0 0 $indent__base; - - .label { - @extend .abs-visually-hidden; - } - } - } - - .giftcard-account-info { - margin: 0 0 $indent__base; - - .giftcard-account-number { - margin: 0 0 $indent__s; - } - } -} diff --git a/Magento_GiftMessage/styles/_module.scss b/Magento_GiftMessage/styles/_module.scss index 36b4dafb..357f94c0 100644 --- a/Magento_GiftMessage/styles/_module.scss +++ b/Magento_GiftMessage/styles/_module.scss @@ -1,2 +1,350 @@ -@import 'variables'; -@import 'module/common'; +// +// Variables +// _____________________________________________ + +$gift-message-field-label__color : $color-gray40; +$gift-item-block__border-color : $color-gray-light5; +$gift-item-block__border-width : $border-width__base; + +.gift-message { + .field { + margin-bottom: $indent__base; + + .label { + @include lib-css(color, $gift-message-field-label__color); + @include lib-css(font-weight, $font-weight__regular); + } + } +} + +.gift-options { + @extend .abs-add-clearfix; + + .actions-toolbar { + .action-cancel { + @extend .abs-action-button-as-link; + display: none; + } + } +} + +.gift-options-title { + margin: 0 0 $indent__base; +} + +.gift-options-content { + .fieldset { + margin: 0 0 $indent__base; + } +} + +.gift-summary { + .actions-toolbar { + > .secondary { + float: none; + + .action { + margin: $indent__s $indent__base 0 0; + } + } + } +} + +.action-gift { + @extend button; + @include lib-link-as-button(); + margin-bottom: $indent__s; + margin-right: $indent__s; + + &:last-child { + margin-right: 0; + } + + @include lib-button-icon( + $icon-down, + $_icon-font-size : 32px, + $_icon-font-line-height : 16px, + $_icon-font-position : after + ); + + &.active, + &._active { + @include lib-icon-font-symbol( + $icon-up, + $_icon-font-position: after + ); + } +} + +// +// In-table block +// --------------------------------------------- + +.cart { + &.table-wrapper { + .gift-content { + box-sizing: border-box; + clear: left; + display: none; + float: left; + margin: $indent__s 0 $indent__base; + text-align: left; + width: 100%; + + &._active { + display: block; + } + } + } +} + +// +// Collapsible block +// --------------------------------------------- + +.gift-item-block { + margin: 0; + + &._active { + .title { + @include lib-icon-font-symbol( + $icon-up, + $_icon-font-position: after + ); + } + } + + .title { + @include lib-css(font-weight, $font-weight__bold); + border-radius: 3px; + + @include lib-button( + $_button-margin : 20px 0 0, + $_button-padding : 7px 15px, + $_button-icon-use : true, + $_button-font-content : $icon-down, + $_button-icon-font : $button-icon__font, + $_button-icon-font-size : 32px, + $_button-icon-font-line-height : 16px, + $_button-icon-font-position : after + ); + + &:active { + @include lib-css(box-shadow, $button__shadow); + } + } + + .content { + @extend .abs-add-clearfix; + @include lib-css(border-bottom, $gift-item-block__border-width solid $gift-item-block__border-color); + padding: $indent__s $indent__s $indent__base; + position: relative; + } +} + +// +// Account order gift message +// --------------------------------------------- + +.order-details-items { + .order-gift-message, + .block-order-details-gift-message { + .item-options { + dt { + @include lib-css(font-weight, $font-weight__regular); + margin: $indent__s 0; + } + } + + @extend .abs-add-clearfix; + + dt { + &:after { + content: ''; + } + } + + .label { + @extend .abs-colon; + } + + .item-message { + clear: left; + } + } + + .order-items { + .order-gift-message { + &:not(.expanded-content) { + @extend .abs-hidden; + } + + .action.close { + @extend .abs-no-display; + } + } + + .action.show { + @include lib-icon-font( + $_icon-font-content : $icon-down, + $_icon-font-size : 22px, + $_icon-font-text-hide : false, + $_icon-font-position : after, + $_icon-font-display : inline-block + ); + padding-right: $indent__base; + position: relative; + + &:after { + position: absolute; + right: 0; + top: -4px; + } + + &.expanded { + @include lib-icon-font-symbol( + $_icon-font-content : $icon-up, + $_icon-font-position : after + ); + } + } + } +} + +.block-order-details-gift-message { + border-top: $border-width__base solid $border-color__base; + padding-top: $indent__s; +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m) { + .gift-options { + .actions-toolbar { + .action-update { + @include lib-font-size(20); + padding: 15px; + width: 100%; + } + } + } + + .gift-item-block { + @include lib-css(border-top, $gift-item-block__border-width solid $gift-item-block__border-color); + border-bottom: 0; + } + + .cart { + &.table-wrapper { + .gift-content { + margin-right: -$indent__s; + } + } + } +} + +@include max-screen($screen__s) { + .cart { + &.table-wrapper { + .gift-content { + border-bottom: $border-width__base solid $border-color__base; + margin-bottom: $indent__base; + } + } + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .gift-message { + .field { + margin-bottom: $indent__base; + } + } + + .gift-options { + position: relative; + z-index: 1; + + .actions-toolbar { + clear: both; + float: right; + position: static; + + .secondary { + float: right; + + .action { + float: right; + margin-left: $indent__base; + } + + .action-cancel { + display: block; + float: left; + margin-top: 6px; + } + } + + &:nth-child(3) { + &:before { + @include lib-css(border-left, 1px solid $gift-item-block__border-color); + bottom: 5rem; + content: ''; + display: block; + left: 50%; + overflow: hidden; + position: absolute; + top: 0; + width: 0; + } + } + } + } + + .gift-options-title { + @include lib-css(font-weight, $font-weight__light); + @include lib-font-size(18); + } + + .gift-summary, + .cart.table-wrapper .gift-summary { + .actions-toolbar { + @extend .abs-reset-left-margin-desktop; + } + } + + .cart-container { + .cart-gift-item { + @extend .abs-shopping-cart-items-desktop; + } + } + + // + // In-table block + // --------------------------------------------- + + .cart { + &.table-wrapper { + .action-gift { + float: left; + } + } + } + + // + // Multiple Shipping Checkout + // --------------------------------------------- + + .order-options, + .table-order-review { + .gift-wrapping { + max-width: 50%; + } + } +} diff --git a/Magento_GiftMessage/styles/_variables.scss b/Magento_GiftMessage/styles/_variables.scss deleted file mode 100644 index 1edee9e6..00000000 --- a/Magento_GiftMessage/styles/_variables.scss +++ /dev/null @@ -1,7 +0,0 @@ -// -// Variables -// _____________________________________________ - -$gift-message-field-label__color: $color-gray40 !default; -$gift-item-block__border-color : $color-gray-light5 !default; -$gift-item-block__border-width : $border-width__base !default; diff --git a/Magento_GiftMessage/styles/module/_common.scss b/Magento_GiftMessage/styles/module/_common.scss deleted file mode 100644 index 84589ff6..00000000 --- a/Magento_GiftMessage/styles/module/_common.scss +++ /dev/null @@ -1,322 +0,0 @@ -// -// Common -// _____________________________________________ - -.gift-message { - .field { - .label { - color: $gift-message-field-label__color; - font-weight: $font-weight__regular; - } - } -} - -.gift-options { - @extend .abs-add-clearfix; - .actions-toolbar { - .action-cancel { - @extend .abs-action-button-as-link; - display: none; - } - } -} - -.gift-options-title { - margin: 0 0 $indent__base; -} - -.gift-options-content { - .fieldset { - margin: 0 0 $indent__base; - } -} -.gift-summary { - .actions-toolbar { - & > .secondary { - float: none; - - .action { - margin: $indent__s $indent__base 0 0; - } - } - } -} - -// -// In-table block -// --------------------------------------------- - -.cart.table-wrapper { - .gift-content { - clear: left; - display: none; - float: left; - margin: $indent__base 0; - text-align: left; - width: 100%; - - &._active { - display: table; - table-layout: fixed; - } - } - - .action-gift { - @extend button; - @include lib-link-as-button(); - margin-bottom: $indent__s; - margin-right: $indent__s; - &:last-child { - margin-right: 0; - } - @include lib-button-icon( - $icon-down, - $_icon-font-size : 32px, - $_icon-font-line-height: 16px, - $_icon-font-position : after - ); - - &._active { - @include lib-icon-font-symbol( - $icon-up, - $_icon-font-position: after - ); - } - } -} - -// -// Collapsible block -// --------------------------------------------- - -.gift-item-block { - margin: 0; - &._active { - .title { - @include lib-icon-font-symbol( - $icon-up, - $_icon-font-position: after - ); - } - } - - .title { - border-radius: 3px; - @include lib-button( - $_button-margin : 20px 0 0, - $_button-padding : 7px 15px, - $_button-icon-use : true, - $_button-font-content : $icon-down, - $_button-icon-font : $button-icon__font, - $_button-icon-font-size : 32px, - $_button-icon-font-line-height: 16px, - $_button-icon-font-position : after - ); - font-weight: $font-weight__bold; - - &:active { - box-shadow: $button__shadow; - } - } - - .content { - @extend .abs-add-clearfix; - border-bottom: $gift-item-block__border-width solid $gift-item-block__border-color; - padding: $indent__s $indent__s $indent__base; - position: relative; - } -} - -// -// Account order gift message -// --------------------------------------------- - -.order-details-items { - .order-gift-message, - .block-order-details-gift-message { - .item-options { - dt { - font-weight: $font-weight__regular; - margin: $indent__s 0; - } - } - - @extend .abs-add-clearfix; - - dt { - &:after { - content: ''; - } - } - - .label { - @extend .abs-colon; - } - - .item-message { - clear: left; - } - } -} - -.order-details-items .order-items { - .order-gift-message { - &:not(.expanded-content) { - @extend .abs-hidden; - } - - .action.close { - @extend .abs-no-display; - } - } - - .action.show { - @include lib-icon-font( - $_icon-font-content : $icon-down, - $_icon-font-size : 22px, - $_icon-font-text-hide: false, - $_icon-font-position : after, - $_icon-font-display : inline-block - ); - padding-right: $indent__base; - position: relative; - - &:after { - position: absolute; - right: 0; - top: -4px; - } - - &.expanded { - @include lib-icon-font-symbol( - $_icon-font-content : $icon-up, - $_icon-font-position: after - ); - } - } -} - -.block-order-details-gift-message { - border-top: $border-width__base solid $border-color__base; - padding-top: $indent__s; -} - -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__m) { - .gift-options { - .actions-toolbar { - .action-update { - font-size: 20px; - padding: 15px; - width: 100%; - } - } - } - - .gift-item-block { - border-bottom: 0; - border-top: $gift-item-block__border-width solid $gift-item-block__border-color; - } - - .cart.table-wrapper { - .gift-content { - margin-right: -$indent__s; - } - } -} - -@include max-screen($screen__s) { - .cart.table-wrapper { - .gift-content { - border-bottom: $border-width__base solid $border-color__base; - margin-bottom: $indent__base; - } - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .gift-message { - .field { - @include lib-clearfix(); - @include lib-form-field-type-revert( - $_type : inline, - $_type-inline-label-align: left - ); - } - } - - .gift-options { - position: relative; - z-index: 1; - - .actions-toolbar { - clear: both; - float: right; - position: static; - - .secondary { - float: right; - - .action { - float: right; - margin-left: $indent__base; - } - - .action-cancel { - display: block; - float: left; - margin-top: 6px; - } - } - - &:nth-child(3) { - &:before { - border-left: 1px solid $gift-item-block__border-color; - bottom: 5rem; - content: ''; - display: block; - left: 50%; - overflow: hidden; - position: absolute; - top: 0; - width: 0; - } - } - } - } - - .gift-options-title { - font-weight: $font-weight__light; - font-size: 18px; - } - - .gift-summary, - .cart.table-wrapper .gift-summary { - .actions-toolbar { - @extend .abs-reset-left-margin-desktop; - } - } - - .cart-container { - .cart-gift-item { - @extend .abs-shopping-cart-items-desktop; - } - } - - // - // In-table block - // --------------------------------------------- - - .cart.table-wrapper { - .action-gift { - float: left; - } - } -} diff --git a/Magento_GiftRegistry/styles/_module.scss b/Magento_GiftRegistry/styles/_module.scss index ce86e39b..9b451f1f 100644 --- a/Magento_GiftRegistry/styles/_module.scss +++ b/Magento_GiftRegistry/styles/_module.scss @@ -1 +1,260 @@ -@import 'module/common'; +.form-giftregistry-share, +.form-giftregistry-edit { + @extend .abs-add-fields; + .actions-toolbar:not(:last-child) { + margin-bottom: $indent__xl; + } + .fieldset { + .nested { + .field:not(.choice) { + .control { + width: 100%; + } + } + } + } +} + +.form.giftregistry.items { + .actions-toolbar { + @extend .abs-reset-left-margin; + } +} + +.giftregisty-dropdown { + @extend .abs-dropdown-simple; +} + +.table-giftregistry-items { + .field.qty .qty { + @extend .abs-input-qty; + } + + .product-image { + float: left; + @include lib-css(margin-right, $indent__s); + } +} + +.form.giftregistry .fieldset { + .cart-summary & { + margin: 25px 0 $indent__xs; + + .field { + margin: 0 0 $indent__s; + + .control { + float: none; + width: auto; + } + } + + .action.primary { + margin-bottom: 0; + @extend .abs-revert-secondary-color; + @extend .abs-revert-secondary-size; + } + } +} + +.form-giftregistry-search { + margin-bottom: $indent__l*2; + + .fields-specific-options { + .field { + &:nth-last-of-type(1) { + margin-bottom: 0; + } + } + + .datetime-picker { + @extend .abs-field-date-input; + } + } +} + +.block-giftregistry-results { + .block-title { + @extend .abs-block-title; + } + + .toolbar-giftregistry-results { + text-align: center; + } +} + +.block-giftregistry { + .actions-toolbar { + margin: 17px 0 0; + } +} + +.block-giftregistry-shared { + .item-options { + .item-value { + margin: 0 0 $indent__m; + } + } +} + +.block-giftregistry-shared-items { + .block-title { + @extend .abs-block-title; + } + + .product-image-wrapper { + @extend .abs-reset-image-wrapper; + } + + .item { + border-bottom: $border-width__base solid $border-color__base; + } + + .qty { + .qty { + @extend .abs-input-qty; + } + } + + .col { + padding: $indent__base 8px $indent__s; + + .price-box { + display: inline-block; + } + + .price-wrapper { + @include lib-font-size(18); + display: block; + font-weight: $font-weight__bold; + white-space: nowrap; + } + } + + .product { + .item-options { + @extend .abs-product-options-list; + @extend .abs-add-clearfix; + margin-bottom: 0; + } + + &-item-photo { + display: block; + max-width: 65px; + padding: $indent__s 0; + } + + &-item-name { + display: block; + margin: 0 0 $indent__xs; + } + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__s) { + .table-giftregistry-items { + .col.product { + &:before { + @extend .abs-visually-hidden-mobile; + } + @extend .abs-add-clearfix-mobile; + } + + .field.choice, + .field.qty { + display: inline-block; + } + } + + .form-giftregistry-search { + .fieldset { + margin-bottom: 15px; + } + } + + .toolbar-giftregistry-results { + @extend .abs-pager-toolbar-mobile-s; + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .form-giftregistry-share, + .form-giftregistry-edit { + @extend .abs-add-fields-desktop; + } + + .form-giftregistry-search { + .fieldset { + margin-bottom: $form-field__vertical-indent__desktop; + > .fields-specific-options { + > .field { + @include lib-form-field-type-revert(); + } + } + } + } + + .toolbar-giftregistry-results { + @extend .abs-pager-toolbar; + } + + .block-giftregistry-shared { + .item-options { + @extend .abs-product-options-list-desktop; + @extend .abs-add-clearfix-desktop; + } + } + + .block-giftregistry-shared-items { + .column.main & { + .actions-toolbar { + @extend .abs-reset-left-margin-desktop; + } + } + + .product { + &-item-photo { + display: table-cell; + max-width: 100%; + padding: 0 $indent__base 0 0; + vertical-align: top; + width: 1%; + } + + &-item-details { + display: table-cell; + vertical-align: top; + width: 99%; + word-break: normal; + } + } + + .col { + &.product { + width: 48%; + } + + &:not(.product) { + text-align: center; + } + + &.price { + padding-top: 17px; + } + } + + .input-text { + &.qty { + margin-top: -4px; + } + } + } +} diff --git a/Magento_GiftRegistry/styles/module/_common.scss b/Magento_GiftRegistry/styles/module/_common.scss deleted file mode 100644 index 2ca389be..00000000 --- a/Magento_GiftRegistry/styles/module/_common.scss +++ /dev/null @@ -1,259 +0,0 @@ -.form-giftregistry-share, -.form-giftregistry-edit { - @extend .abs-add-fields; - .actions-toolbar:not(:last-child) { - margin-bottom: $indent__xl; - } - .fieldset { - .nested { - .field:not(.choice) { - .control { - width: 100%; - } - } - } - } -} - -.form.giftregistry.items { - .actions-toolbar { - @extend .abs-reset-left-margin; - } -} - -.giftregisty-dropdown { - @extend .abs-dropdown-simple; -} - -.table-giftregistry-items { - .field.qty .qty { - @extend .abs-input-qty; - } - - .product-image { - float: left; - margin-right: $indent__s; - } -} - -.form.giftregistry .fieldset { - .cart-summary & { - margin: 25px 0 $indent__xs; - - .field { - margin: 0 0 $indent__s; - - .control { - float: none; - width: auto; - } - } - - .action.primary { - @extend .abs-revert-secondary-color; - @extend .abs-revert-secondary-size; - margin-bottom: 0; - } - } -} - -.form-giftregistry-search { - margin-bottom: $indent__l * 2; - .fields-specific-options { - .field { - &:nth-last-of-type(1) { - margin-bottom: 0; - } - } - - .datetime-picker { - @extend .abs-field-date-input; - } - } -} - -.block-giftregistry-results { - .block-title { - @extend .abs-block-title; - } - - .toolbar-giftregistry-results { - text-align: center; - } -} - -.block-giftregistry { - .actions-toolbar { - margin: 17px 0 0; - } -} - -.block-giftregistry-shared { - .item-options { - .item-value { - margin: 0 0 $indent__m; - } - } -} - -.block-giftregistry-shared-items { - .block-title { - @extend .abs-block-title; - } - - .product-image-wrapper { - @extend .abs-reset-image-wrapper; - } - - .item { - border-bottom: $border-width__base solid $border-color__base; - } - - .qty { - .qty { - @extend .abs-input-qty; - } - } - - .col { - padding: $indent__base 8px $indent__s; - - .price-box { - display: inline-block; - } - - .price-wrapper { - font-size: 18px; - display: block; - font-weight: $font-weight__bold; - white-space: nowrap; - } - } - - .product { - .item-options { - @extend .abs-product-options-list; - @extend .abs-add-clearfix; - margin-bottom: 0; - } - - &-item-photo { - display: block; - max-width: 65px; - padding: $indent__s 0; - } - - &-item-name { - display: block; - margin: 0 0 $indent__xs; - } - } -} - -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__s) { - .table-giftregistry-items { - .col.product { - &:before { - @extend .abs-visually-hidden-mobile; - } - @extend .abs-add-clearfix-mobile; - } - - .field.choice, - .field.qty { - display: inline-block; - } - } - - .form-giftregistry-search { - .fieldset { - margin-bottom: 15px; - } - } - - .toolbar-giftregistry-results { - @extend .abs-pager-toolbar-mobile-s; - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .form-giftregistry-share, - .form-giftregistry-edit { - @extend .abs-add-fields-desktop; - } - - .form-giftregistry-search { - .fieldset { - margin-bottom: $form-field__vertical-indent__desktop; - > .fields-specific-options { - > .field { - @include lib-form-field-type-revert(); - } - } - } - } - - .toolbar-giftregistry-results { - @extend .abs-pager-toolbar; - } - - .block-giftregistry-shared { - .item-options { - @extend .abs-product-options-list-desktop; - @extend .abs-add-clearfix-desktop; - } - } - - .block-giftregistry-shared-items { - .column.main & { - .actions-toolbar { - @extend .abs-reset-left-margin-desktop; - } - } - - .product { - &-item-photo { - display: table-cell; - max-width: 100%; - padding: 0 $indent__base 0 0; - vertical-align: top; - width: 1%; - } - - &-item-details { - display: table-cell; - vertical-align: top; - width: 99%; - word-break: normal; - } - } - - .col { - &.product { - width: 48%; - } - - &:not(.product) { - text-align: center; - } - - &.price { - padding-top: 17px; - } - } - - .input-text { - &.qty { - margin-top: -4px; - } - } - } -} diff --git a/Magento_GiftWrapping/styles/_module.scss b/Magento_GiftWrapping/styles/_module.scss index 36b4dafb..778a02ee 100644 --- a/Magento_GiftWrapping/styles/_module.scss +++ b/Magento_GiftWrapping/styles/_module.scss @@ -1,2 +1,261 @@ -@import 'variables'; -@import 'module/common'; +// +// Variables +// _____________________________________________ + +$gift-wrapping__border-color : $color-gray-light5; +$gift-wrapping__border-width : $border-width__base; + +$gift-wrapping-preview__active__border-color : $color-gray20; +$gift-wrapping-preview__active__border-width : 3px; + +$gift-wrapping-thumbnail__height : 4rem; +$gift-wrapping-thumbnail__width : $gift-wrapping-thumbnail__height; + +$gift-wrapping-no-image__background : $color-gray95; +$gift-wrapping-no-image-icon__color : $color-gray-darken4; +$gift-wrapping-no-image-icon__font-size : 38px; + +.gift-wrapping { + .label { + @include lib-css(margin, $form-field-type-label-block__margin); + display: inline-block; + } + + .field { + margin-bottom: $indent__s; + } +} + +.gift-wrapping-info { + @include lib-css(font-weight, $font-weight__light); + font-size: $font-size__l; + margin: $indent__base 0; +} + +.gift-wrapping-list { + @extend .abs-add-clearfix; + list-style: none; + margin: $indent__base 0 $indent__s; + padding: 0; + + .no-image { + @include lib-css(background, $gift-wrapping-no-image__background); + @include lib-icon-font( + $icon-present, + $_icon-font-size : $gift-wrapping-no-image-icon__font-size, + $_icon-font-line-height : $gift-wrapping-thumbnail__height, + $_icon-font-color : $gift-wrapping-no-image-icon__color, + $_icon-font-position : after, + $_icon-font-text-hide : true, + $_icon-font-vertical-align : middle + ); + + &:after { + display: block; + } + } +} + +.gift-wrapping-preview, +.gift-wrapping-item > span { + cursor: pointer; + display: block; + overflow: hidden; + position: relative; + z-index: 1; +} + +.gift-wrapping-item { + float: left; + margin: 0 $indent__s $indent__s 0; + + &:last-child { + margin-right: 0; + } + + &._active { + span { + &:before { + @include lib-css(border, $gift-wrapping-preview__active__border-width solid $gift-wrapping-preview__active__border-color); + box-sizing: border-box; + content: ''; + display: block; + height: 100%; + position: absolute; + width: 100%; + z-index: 2; + } + } + } + + > span { + height: $gift-wrapping-thumbnail__height; + width: $gift-wrapping-thumbnail__width; + } +} + +.gift-wrapping-title { + margin: $indent__s 0; + + .action-remove { + margin-left: $indent__xs; + } +} + +.gift-options-content { + .fieldset { + > .field { + margin: 0 0 $indent__xs; + + &:before { + display: none; + } + } + } +} + +.gift-wrapping-summary { + .gift-wrapping-title { + border: 0; + display: inline-block; + padding: 0; + } +} + +.opc-wrapper .data.table, +.table-order-items, +.table-order-review { + .gift-wrapping { + @extend .abs-add-clearfix; + margin: $indent__base 0; + + .title { + float: none; + } + + .content { + margin: 0; + + > img { + float: left; + margin: 0 $indent__s 0 0; + max-height: 50px; + max-width: 50px; + } + } + } +} + +.gift-summary, +.gift-options { + @extend .abs-adjustment-incl-excl-tax; + + .price-box { + margin-left: 22px; + } + + .regular-price { + &:before { + content: attr(data-label)': '; + } + + .price { + font-weight: $font-weight__bold; + } + } +} + +// +// Multiple Shipping Checkout +// --------------------------------------------- + +.order-options { + .item { + padding-bottom: $indent__base; + } + + .product { + @extend .abs-add-clearfix; + margin-bottom: $indent__s; + } + + .product-image-container { + float: left; + padding-right: $indent__s; + } + + .gift-wrapping { + margin-bottom: $indent__s; + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m) { + .gift-wrapping { + @include lib-css(border-bottom, $gift-wrapping__border-width solid $gift-wrapping__border-color); + margin-bottom: $indent__base; + padding-bottom: $indent__s; + } + + .gift-wrapping-list { + width: 100%; + } + + .gift-wrapping-preview { + img { + width: 100%; + } + } + + .item-actions { + .actions-toolbar { + .gift-options { + .gift-wrapping, + .gift-message { + display: block; + } + } + } + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .gift-wrapping { + .nested { + @extend .abs-add-clearfix-desktop; + } + } + + .table { + .gift-wrapping { + .content { + @extend .abs-add-clearfix-desktop; + } + } + } + + .gift-options-cart-item, + .cart-gift-item { + .gift-wrapping { + box-sizing: border-box; + float: left; + padding-right: $indent__base; + width: 50%; + + & + .gift-message { + @include lib-css(border-left, $gift-wrapping__border-width solid $gift-wrapping__border-color); + box-sizing: border-box; + float: left; + padding-left: 4.5rem; + width: 50%; + } + } + } +} diff --git a/Magento_GiftWrapping/styles/_variables.scss b/Magento_GiftWrapping/styles/_variables.scss deleted file mode 100644 index 6c75ac77..00000000 --- a/Magento_GiftWrapping/styles/_variables.scss +++ /dev/null @@ -1,16 +0,0 @@ -// -// Variables -// _____________________________________________ - -$gift-wrapping__border-color : $color-gray-light5 !default; -$gift-wrapping__border-width : $border-width__base !default; - -$gift-wrapping-preview__active__border-color: $color-gray20 !default; -$gift-wrapping-preview__active__border-width: 3px !default; - -$gift-wrapping-thumbnail__height : 4rem !default; -$gift-wrapping-thumbnail__width : $gift-wrapping-thumbnail__height !default; - -$gift-wrapping-no-image__background : $color-gray95 !default; -$gift-wrapping-no-image-icon__color : $color-gray-darken4 !default; -$gift-wrapping-no-image-icon__font-size : 22px !default; diff --git a/Magento_GiftWrapping/styles/module/_common.scss b/Magento_GiftWrapping/styles/module/_common.scss deleted file mode 100644 index 20b603ad..00000000 --- a/Magento_GiftWrapping/styles/module/_common.scss +++ /dev/null @@ -1,200 +0,0 @@ -// -// Common -// _____________________________________________ - -.gift-wrapping-info { - font-weight: $font-weight__light; - font-size: $font-size__l; - margin: $indent__base 0; -} -.gift-wrapping-list { - @extend .abs-add-clearfix; - list-style: none; - margin: $indent__base 0 $indent__s; - padding: 0; - .no-image { - background: $gift-wrapping-no-image__background; - @include lib-icon-font( - $icon-present, - $_icon-font-size : $gift-wrapping-no-image-icon__font-size, - $_icon-font-line-height : $gift-wrapping-thumbnail__height, - $_icon-font-color : $gift-wrapping-no-image-icon__color, - $_icon-font-position : after, - $_icon-font-text-hide : true, - $_icon-font-vertical-align: middle - ); - &:after { - display: block; - } - } -} -.gift-wrapping-item > span, -.gift-wrapping-preview { - cursor: pointer; - display: block; - overflow: hidden; - position: relative; - z-index: 1; -} -.gift-wrapping-item { - float: left; - margin: 0 $indent__s $indent__s 0; - &:last-child { - margin-right: 0; - } - &._active { - span { - &:before { - border: $gift-wrapping-preview__active__border-width solid $gift-wrapping-preview__active__border-color; - box-sizing: border-box; - content: ''; - display: block; - height: 100%; - position: absolute; - width: 100%; - z-index: 2; - } - } - } - & > span { - height: $gift-wrapping-thumbnail__height; - width: $gift-wrapping-thumbnail__width; - } -} -.gift-wrapping-title { - margin: $indent__s 0; - .action-remove { - @extend .abs-action-button-as-link; - margin: (-$indent__xs) 0 0 $indent__xs; - @include lib-icon-font( - $icon-trash, - $_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 - ); - } -} -.gift-options-content { - .fieldset { - .field { - margin: $indent__s 0; - } - } -} -.gift-wrapping-summary { - padding-right: 7rem; - .gift-wrapping-title { - border: 0; - display: inline-block; - padding: 0; - } -} -.opc-wrapper { - .fieldset.gift-message .field.gift-wrapping { - padding: 0; - width: 100%; - } -} -.opc-wrapper .data.table, -.table-order-items { - .gift-wrapping { - margin: $indent__base 0 0; - .title { - float: none; - } - .content { - @extend .abs-add-clearfix; - margin: 0; - & > img { - float: left; - margin: 0 $indent__s 0 0; - max-height: 50px; - max-width: 50px; - } - } - } -} -.gift-options, -.gift-summary { - .price-box { - margin-left: 22px; - } - .regular-price { - &:before { - content: attr(data-label) ": "; - } - .price { - font-weight: $font-weight__bold; - } - } - @extend .abs-adjustment-incl-excl-tax; -} -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__m) { - .gift-wrapping { - border-bottom: $gift-wrapping__border-width solid $gift-wrapping__border-color; - margin-bottom: $indent__base; - padding-bottom: $indent__s; - } - .gift-wrapping-list { - width: 100%; - } - .gift-wrapping-summary { - & + .gift-message-summary { - padding-right: 0; - } - } - .gift-options-cart-item { - float: left; - } - .gift-wrapping-preview { - img { - width: 100%; - } - } - .item-actions { - .actions-toolbar { - .gift-options { - .gift-message, - .gift-wrapping { - display: block; - } - } - } - } -} -@include min-screen($screen__m) { - .data.table { - .gift-wrapping { - .content, - .nested { - @extend .abs-add-clearfix-desktop; - } - } - } -} -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .gift-wrapping { - box-sizing: border-box; - float: left; - padding-right: $indent__base; - width: 50%; - & + .gift-message { - border-left: $gift-wrapping__border-width solid $gift-wrapping__border-color; - box-sizing: border-box; - float: left; - padding-left: 4.5rem; - width: 50%; - } - } -} diff --git a/Magento_GroupedProduct/styles/_module.scss b/Magento_GroupedProduct/styles/_module.scss index ce86e39b..73f29611 100644 --- a/Magento_GroupedProduct/styles/_module.scss +++ b/Magento_GroupedProduct/styles/_module.scss @@ -1 +1,42 @@ -@import 'module/common'; +.table.grouped { + @include lib-table-bordered( + $_table_type: horizontal + ); + + > thead > tr > th { + border-bottom: 0; + } + + .product-item-name { + font-weight: $font-weight__regular; + } + + .price-box { + .price { + font-size: $font-size__base; + } + } + + .control { + .qty { + @extend .abs-input-qty; + } + } + + .stock.unavailable { + font-weight: normal; + margin: 0; + text-transform: none; + white-space: nowrap; + } + + .row-tier-price { + td { + border-top: 0; + } + + .prices-tier { + margin: 0 -10px 10px; + } + } +} diff --git a/Magento_GroupedProduct/styles/module/_common.scss b/Magento_GroupedProduct/styles/module/_common.scss deleted file mode 100644 index d35e528e..00000000 --- a/Magento_GroupedProduct/styles/module/_common.scss +++ /dev/null @@ -1,40 +0,0 @@ -.table.grouped { - @include lib-table-bordered($_table_type: horizontal); - - & > thead > tr > th { - border-bottom: 0; - } - - .product-item-name { - font-weight: $font-weight__regular; - } - - .price-box { - .price { - font-size: $font-size__base; - } - } - - .control { - .qty { - @extend .abs-input-qty; - } - } - - .stock.unavailable { - font-weight: normal; - margin: 0; - text-transform: none; - white-space: nowrap; - } - - .row-tier-price { - td { - border-top: 0; - } - - .prices-tier { - margin: 0 -10px 10px; - } - } -} diff --git a/Magento_Invitation/styles/_module.scss b/Magento_Invitation/styles/_module.scss index ce86e39b..10ae1679 100644 --- a/Magento_Invitation/styles/_module.scss +++ b/Magento_Invitation/styles/_module.scss @@ -1 +1,44 @@ -@import 'module/common'; +.form-add-invitations { + @extend .abs-add-fields; + .action { + &.add { + @include lib-button-icon( + $_icon-font-content : $icon-expand, + $_icon-font-text-hide : true, + $_icon-font-size : 31px + ); + line-height: normal; + padding: 2px 0; + width: auto; + } + } +} + +@include max-screen($screen__m) { + .form-add-invitations { + .additional, + .field.text { + @include lib-css(margin-top, $form-field__vertical-indent); + } + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .form-add-invitations { + @extend .abs-add-fields-desktop; + .additional, + .field.text { + @include lib-css(margin-top, $form-field__vertical-indent__desktop); + } + } + + .table-invitations { + .col { + width: 50%; + } + } +} diff --git a/Magento_Invitation/styles/module/_common.scss b/Magento_Invitation/styles/module/_common.scss deleted file mode 100644 index ffe6b753..00000000 --- a/Magento_Invitation/styles/module/_common.scss +++ /dev/null @@ -1,44 +0,0 @@ -.form-add-invitations { - @extend .abs-add-fields; - .action { - &.add { - @include lib-button-icon( - $_icon-font-content : $icon-expand, - $_icon-font-text-hide: true, - $_icon-font-size : 31px - ); - line-height: normal; - padding: 2px 0; - width: auto; - } - } -} - -@include max-screen($screen__m) { - .form-add-invitations { - .additional, - .field.text { - margin-top: $form-field__vertical-indent; - } - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .form-add-invitations { - @extend .abs-add-fields-desktop; - .additional, - .field.text { - margin-top: $form-field__vertical-indent__desktop; - } - } - - .table-invitations { - .col { - width: 50%; - } - } -} diff --git a/Magento_LayeredNavigation/styles/_module.scss b/Magento_LayeredNavigation/styles/_module.scss index ce86e39b..6e9ed6ec 100644 --- a/Magento_LayeredNavigation/styles/_module.scss +++ b/Magento_LayeredNavigation/styles/_module.scss @@ -1 +1,116 @@ -@import 'module/common'; +.block.filter { + margin-bottom: $indent__xl; + + .filter-title { + margin-bottom: $indent__base; + + strong { + font-size: 18px; + } + } +} + +.block-subtitle { + display: inline-block; + margin-bottom: $indent__s; +} + +.filter-current { + .item { + margin-bottom: $indent__s; + } + + .filter-label { + display: block; + font-weight: $font-weight__bold; + + &:after { + content: ':'; + } + } + + + .filter-actions { + margin-bottom: $indent__l; + } +} + +.filter-options-content { + .filter-count-label { + @extend .abs-visually-hidden; + } +} + +.filter-options { + margin: 0; + + .filter-options-title { + @include lib-heading(h4); + margin: 0 0 $indent__s; + word-break: break-all; + } + + .filter-options-content { + margin: 0 0 $indent__m; + + .item { + margin-bottom: 3px; + } + } + + .count { + @include lib-css(color, $text__color__muted); + + &:before { + content: '('; + } + + &:after { + content: ')'; + } + } +} + +.items { + @extend .abs-reset-list; +} + +.filtered { + .items { + margin: 15px 0; + } + + .item { + margin-bottom: 6px; + padding-left: 22px; + position: relative; + + .label { + font-weight: $font-weight__bold; + } + + .action.remove { + @extend .abs-remove-button-for-blocks; + left: -6px; + position: absolute; + top: 0; + } + } + + & + .actions { + margin-bottom: 35px; + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m) { + .page-with-filter { + .columns { + .sidebar-main { + @include lib-vendor-prefix-order(0); + } + } + } +} diff --git a/Magento_LayeredNavigation/styles/module/_common.scss b/Magento_LayeredNavigation/styles/module/_common.scss deleted file mode 100644 index 70beb4df..00000000 --- a/Magento_LayeredNavigation/styles/module/_common.scss +++ /dev/null @@ -1,116 +0,0 @@ -.block.filter { - margin-bottom: $indent__xl; - - .filter-title { - margin-bottom: $indent__base; - - strong { - font-size: 18px; - } - } -} - -.block-subtitle { - display: inline-block; - margin-bottom: $indent__s; -} - -.filter-current { - .item { - margin-bottom: $indent__s; - } - - .filter-label { - display: block; - font-weight: $font-weight__bold; - - &:after { - content: ':'; - } - } - - + .filter-actions { - margin-bottom: $indent__l; - } -} - -.filter-options-content { - .filter-count-label { - @extend .abs-visually-hidden; - } -} - -.filter-options { - margin: 0; - - .filter-options-title { - @include lib-heading(h4); - margin: 0 0 $indent__s; - word-break: break-all; - } - - .filter-options-content { - margin: 0 0 $indent__m; - - .item { - margin-bottom: 3px; - } - } - - .count { - color: $text__color__muted; - - &:before { - content: '('; - } - - &:after { - content: ')'; - } - } -} - -.items { - @extend .abs-reset-list; -} - -.filtered { - .items { - margin: 15px 0; - } - - .item { - position: relative; - padding-left: 22px; - margin-bottom: 6px; - - .label { - font-weight: $font-weight__bold; - } - - .action.remove { - @extend .abs-remove-button-for-blocks; - position: absolute; - left: -6px; - top: 0; - } - } - - & + .actions { - margin-bottom: 35px; - } -} - -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__m) { - .page-with-filter { - .columns { - .sidebar-main { - order: 0; - } - } - } -} diff --git a/Magento_Msrp/styles/_module.scss b/Magento_Msrp/styles/_module.scss index ce86e39b..9e0ec5e5 100644 --- a/Magento_Msrp/styles/_module.scss +++ b/Magento_Msrp/styles/_module.scss @@ -1 +1,87 @@ -@import 'module/common'; +.map-popup-wrapper.popup { + .action.close { + @include lib-css(top, $popup-button-close__position-top); + } +} + +.map-popup { + @include lib-popup( + $_popup-margin-top : $indent__s, + $_popup-margin-left : false, + $_popup-content-margin : $indent__s 0 0, + $_popup-position-bottom : false, + $_popup-position-right : false, + $_popup-position : absolute + ); + box-sizing: border-box; + + .map-info-price { + @extend .abs-add-clearfix; + margin-bottom: 15px; + + .price-box { + margin: 0 0 $indent__base; + + .label { + &:after { + content: ': '; + } + } + } + } + + .regular-price { + .price-label { + display: none; + } + } +} + +.map-old-price, +.product-info-price .map-show-info { + &:not(:last-child) { + margin-right: $indent__s; + } +} + +.map-old-price { + text-decoration: none; + + .price-wrapper { + text-decoration: line-through; + } +} + +.map-form-addtocart { + display: inline-block; + text-align: center; + + img { + display: block; + margin: 0 auto; + } +} + +button.map-show-info { + @include lib-button-reset(); + @include lib-button-as-link(); +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m) { + .map-popup { + max-width: 100%; + } + + .map-old-price, + .map-show-info { + display: inline-block; + + &:not(:last-child) { + margin-bottom: $indent__s; + } + } +} diff --git a/Magento_Msrp/styles/module/_common.scss b/Magento_Msrp/styles/module/_common.scss deleted file mode 100644 index b79b9716..00000000 --- a/Magento_Msrp/styles/module/_common.scss +++ /dev/null @@ -1,76 +0,0 @@ -.map-popup-wrapper.popup { - .action.close { - top: $popup-button-close__position-top; - } -} - -.map-popup { - @include lib-popup( - $_popup-margin-top : $indent__s, - $_popup-margin-left : false, - $_popup-content-margin : $indent__s 0 0, - $_popup-position-bottom: false, - $_popup-position-right : false, - $_popup-position : absolute - ); - box-sizing: border-box; - - .map-info-price { - @extend .abs-add-clearfix; - margin-bottom: 15px; - - .price-box { - margin: 0 0 $indent__base; - - .label { - &:after { - content: ': '; - } - } - } - } -} - -.map-old-price, -.product-info-price .map-show-info { - &:not(:last-child) { - margin-right: $indent__s; - } -} - -.map-old-price { - text-decoration: none; - - .price-wrapper { - text-decoration: line-through; - } -} - -.map-form-addtocart { - display: inline-block; - text-align: center; - - img { - display: block; - margin: 0 auto; - } -} - -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__m) { - .map-popup { - max-width: 100%; - } - - .map-old-price, - .map-show-info { - display: inline-block; - - &:not(:last-child) { - margin-bottom: $indent__s; - } - } -} diff --git a/Magento_MultipleWishlist/styles/_module.scss b/Magento_MultipleWishlist/styles/_module.scss index 36b4dafb..77c4033b 100644 --- a/Magento_MultipleWishlist/styles/_module.scss +++ b/Magento_MultipleWishlist/styles/_module.scss @@ -1,2 +1,477 @@ -@import 'variables'; -@import 'module/common'; +$desktop-popup-width : 380px; +$desktop-popup-margin-left : -(($desktop-popup-width + ($popup__padding * 2)) / 2); +$desktop-popup-position-left : 50%; +$desktop-popup-position-top : 20%; + +.wishlist { + // Wish list split button + &.split.button { + @include lib-dropdown-split( + $_options-selector : '.items', + $_dropdown-split-button-border-radius-fix : true, + $_dropdown-split-list-item-padding : 5px 5px 5px 23px, + $_dropdown-split-toggle-icon-content : $icon-down, + $_dropdown-split-toggle-active-icon-content : $icon-up, + $_dropdown-split-toggle-actions-padding : false, + $_icon-font-size : 22px, + $_icon-font-color : $addto-color, + $_icon-font-color-hover : $addto-hover-color, + $_dropdown-split-list-pointer-position : left, + $_dropdown-split-list-min-width : 200px + ); + vertical-align: middle; + @extend .abs-dropdown-items-new; + + .items { + text-align: left; + .item { + &:last-child { + &:hover { + @include lib-css(background, $dropdown-list-item__hover); + } + } + } + } + + .table-comparison &, + .product-items & { + > .action { + @extend .abs-action-button-as-link; + &.split { + @extend .abs-actions-addto-gridlist; + @include lib-icon-font-symbol( + $_icon-font-content: $icon-wishlist-empty + ); + } + + &:active, + &:focus, + &:hover { + @include lib-css(color, $addto-hover-color); + } + } + + > .action.toggle { + &:before { + border-left: 1px solid lighten($addto-color, 30%); + content: ''; + float: left; + height: 15px; + margin-top: 3px; + } + } + } + + .product-info-main &, + .block-bundle-summary &, + .product-add-form & { + .action { + &.split, + &.toggle { + @include lib-button-s(); + } + + &.toggle { + padding: 0; + } + } + } + + .cart.table-wrapper & { + margin-bottom: $indent__s; + + > .action { + &.toggle { + padding: 4px $indent__xs; + } + } + } + } + + &.window.popup { + box-sizing: border-box; + @include lib-popup(); + + &.active { + display: block; + } + } + + &.overlay { + @include lib-window-overlay(); + &.active { + display: block; + } + } + + &-dropdown { + @extend .abs-dropdown-simple; + @extend .abs-dropdown-items-new; + } +} + +.block-wishlist-management { + position: relative; + + .wishlist { + // Select wish list + &-select { + .wishlist-name { + &-label { + font-weight: $font-weight__semibold; + @extend .abs-colon; + } + } + + &-items { + @extend .abs-reset-list; + } + } + + // Wish list name + &-title { + margin-bottom: $indent__s; + + strong { + font-weight: $font-weight__light; + margin-right: $indent__s; + } + } + + &-notice { + @include lib-css(color, $text__color__muted); + display: inline-block; + margin-right: $indent__base; + } + + // Wish list toolbar + &-toolbar { + &-select, + &-actions { + display: inline-block; + } + + &-select { + margin-right: $indent__base; + } + } + // Wish list toolbar actions + &-dropdown.move { + margin-right: $indent__base; + } + } +} + +.block-wishlist-search-form { + .form-wishlist-search { + @include lib-css(margin-bottom, $indent__l*2); + max-width: 500px; + + .fieldset { + > .legend { + @extend .abs-visually-hidden; + } + } + } +} + +.block-wishlist-search-results { + .block-title { + @extend .abs-block-title; + } + + .toolbar-wishlist-results { + text-align: center; + } +} + +.page-multiple-wishlist { + .page-title-wrapper { + .page-title { + @extend .abs-visually-hidden; + } + } +} + +.block-wishlist-info-items { + .block-title { + @include lib-css(margin-bottom, $indent__base); + @include lib-font-size(22); + > strong { + font-weight: $font-weight__light; + } + } + + .product-item { + width: 100%; + } + + .product-item-photo { + margin-left: $indent__base; + } + + .product-item-info { + width: auto; + + &:hover { + .split { + visibility: visible; + } + } + } + + .price-wrapper { + display: block; + margin: 0 0 $indent__s; + } + + .split { + clear: both; + padding: $indent__s 0; + } + + .action { + &.towishlist { + padding: $indent__s 0; + } + } + + .input-text { + &.qty { + @extend .abs-input-qty; + margin-right: $indent__s; + } + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m) { + .block-wishlist-management { + clear: both; + margin-top: -21px; + + .wishlist { + // Select wish list + &-select { + margin: 0 -$layout__width-xs-indent 20px; + + .wishlist-name { + @extend .abs-toggling-title-mobile; + } + + &-items { + border-bottom: $border-width__base solid $border-color__base; + @include lib-css(background, $account-nav-background); + display: none; + padding: 15px 0; + + &.active { + display: block; + } + + .item { + margin: 3px 0 0; + + &:first-child { + margin-top: 0; + } + + &.current { + display: none; + } + + a { + display: block; + padding: $indent__xs 18px; + text-decoration: none; + + &:hover { + @include lib-css(background, $account-nav-item-hover); + } + } + } + } + } + + &-add.item { + .add { + @extend .abs-icon-add-mobile; + } + } + + // Wish list name + &-title { + strong { + @include lib-font-size(26); + } + } + + // Wish list info + &-info { + margin-bottom: 15px; + } + + // Wish list toolbar + &-toolbar { + &-select, + &-actions { + margin-bottom: 15px; + } + } + } + } + .products-grid.wishlist { + .product { + &-item { + &-checkbox { + left: 20px; + position: absolute; + top: 20px; + } + + &-photo { + .page-multiple-wishlist & { + margin-left: $indent__m; + } + } + + &-name, + &-description, + .price-box, + &-tooltip { + .page-multiple-wishlist & { + margin-left: 115px; + } + } + } + } + + .wishlist-dropdown { + display: none; + } + } + + .toolbar-wishlist-results { + @extend .abs-pager-toolbar-mobile; + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .wishlist { + &.window.popup { + bottom: auto; + @include lib-css(top, $desktop-popup-position-top); + @include lib-css(left, $desktop-popup-position-left); + @include lib-css(margin-left, $desktop-popup-margin-left); + @include lib-css(width, $desktop-popup-width); + right: auto; + + .field { + @include lib-form-field-type-revert($_type: block); + } + } + } + + .block-wishlist-management { + @extend .abs-add-clearfix-desktop; + margin-bottom: $indent__base; + + .wishlist { + // Select wish list + &-select { + border-bottom: 1px solid $secondary__color; + display: table; + margin-bottom: 15px; + width: 100%; + + .wishlist-name { + display: table-cell; + margin-right: $indent__s; + padding: $indent__xs $indent__s $indent__s; + vertical-align: top; + white-space: nowrap; + width: 5%; + } + + &-items { + display: table-cell; + padding-right: 160px; + vertical-align: top; + + .item { + display: inline-block; + margin-right: $indent__s; + padding: $indent__xs $indent__s $indent__s; + + &:last-child { + margin-right: 0; + } + } + + .current { + border-bottom: 3px solid $active__color; + font-weight: $font-weight__semibold; + } + } + + .wishlist-name-current { + display: none; + } + } + + &-add.item { + position: absolute; + right: 0; + top: 0; + } + + // Wish list name + &-title { + strong { + @include lib-font-size(40); + } + } + + // Wish list info + &-info { + float: left; + } + + // Wish list toolbar + &-toolbar { + float: right; + } + } + } + + .block-wishlist-info-items { + .product-item-photo { + margin-left: 0; + } + } + + .products-grid.wishlist { + .product { + &-item { + &-checkbox { + float: left; + + + .product-item-name { + margin-left: $indent__m; + } + } + } + } + } + + .toolbar-wishlist-results { + @extend .abs-pager-toolbar; + } +} diff --git a/Magento_MultipleWishlist/styles/_variables.scss b/Magento_MultipleWishlist/styles/_variables.scss deleted file mode 100644 index b6321935..00000000 --- a/Magento_MultipleWishlist/styles/_variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -$desktop-popup-width : 380px !default; -$desktop-popup-margin-left : -(($desktop-popup-width + ($popup__padding * 2)) / 2) !default; -$desktop-popup-position-left: 50% !default; -$desktop-popup-position-top : 20% !default; diff --git a/Magento_MultipleWishlist/styles/module/_common.scss b/Magento_MultipleWishlist/styles/module/_common.scss deleted file mode 100644 index 951e01ef..00000000 --- a/Magento_MultipleWishlist/styles/module/_common.scss +++ /dev/null @@ -1,475 +0,0 @@ -// -// Common -// _____________________________________________ - -.wishlist { - // Wish list split button - &.split.button { - @extend .abs-dropdown-items-new; - @include lib-dropdown-split( - $_options-selector : '.items', - $_dropdown-split-button-border-radius-fix : true, - $_dropdown-split-list-item-padding : 5px 5px 5px 23px, - $_dropdown-split-toggle-icon-content : $icon-down, - $_dropdown-split-toggle-active-icon-content: $icon-up, - $_dropdown-split-toggle-actions-padding : false, - $_icon-font-size : 22px, - $_icon-font-color : $addto-color, - $_icon-font-color-hover : $addto-hover-color, - $_dropdown-split-list-pointer-position : left, - $_dropdown-split-list-min-width : 200px - ); - vertical-align: middle; - - .items { - text-align: left; - .item { - &:last-child { - &:hover { - background: $color-gray91; - } - } - } - } - - .table-comparison &, - .product-items & { - & > .action { - @extend .abs-action-button-as-link; - &.split { - @extend .abs-actions-addto-gridlist; - @include lib-icon-font-symbol( - $_icon-font-content: $icon-wishlist-empty - ); - } - - &:active, - &:focus, - &:hover { - color: $addto-hover-color; - } - } - - & > .action.toggle { - &:before { - border-left: 1px solid lighten($addto-color, 30%); - content: ''; - float: left; - height: 15px; - margin-top: 3px; - } - } - } - - .product-info-main &, - .block-bundle-summary &, - .product-add-form & { - .action { - &.split, - &.toggle { - @include lib-button-s(); - } - - &.toggle { - padding: 0; - } - } - } - - .cart.table-wrapper & { - margin-bottom: $indent__s; - - & > .action { - &.toggle { - padding: 4px $indent__xs; - } - } - } - } - - &.window.popup { - box-sizing: border-box; - @include lib-popup(); - - &.active { - display: block; - } - } - - &.overlay { - @include lib-window-overlay(); - &.active { - display: block; - } - } - - &-dropdown { - @extend .abs-dropdown-simple; - @extend .abs-dropdown-items-new; - } -} - -.block-wishlist-management { - position: relative; - - .wishlist { - // Select wish list - &-select { - .wishlist-name { - &-label { - @extend .abs-colon; - font-weight: $font-weight__semibold; - } - } - - &-items { - @extend .abs-reset-list; - } - } - - // Wish list name - &-title { - margin-bottom: $indent__s; - - strong { - font-weight: $font-weight__light; - margin-right: $indent__s; - } - } - - &-notice { - color: $text__color__muted; - display: inline-block; - margin-right: $indent__base; - } - - // Wish list toolbar - &-toolbar { - &-select, - &-actions { - display: inline-block; - } - - &-select { - margin-right: $indent__base; - } - } - // Wish list toolbar actions - &-dropdown.move { - margin-right: $indent__base; - } - } -} - -.block-wishlist-search-form { - .form-wishlist-search { - margin-bottom: $indent__l * 2; - max-width: 500px; - - .fieldset { - & > .legend { - @extend .abs-visually-hidden; - } - } - } -} - -.block-wishlist-search-results { - .block-title { - @extend .abs-block-title; - } - - .toolbar-wishlist-results { - text-align: center; - } -} - -.page-multiple-wishlist { - .page-title-wrapper { - .page-title { - @extend .abs-visually-hidden; - } - } -} - -.block-wishlist-info-items { - .block-title { - margin-bottom: $indent__base; - font-size: 22px; - & > strong { - font-weight: $font-weight__light; - } - } - - .product-item { - width: 100%; - } - - .product-item-photo { - margin-left: $indent__base; - } - - .product-item-info { - width: auto; - - &:hover { - .split { - visibility: visible; - } - } - } - - .price-wrapper { - display: block; - margin: 0 0 $indent__s; - } - - .split { - clear: both; - padding: $indent__s 0; - } - - .action { - &.towishlist { - padding: $indent__s 0; - } - } - - .input-text { - &.qty { - @extend .abs-input-qty; - margin-right: $indent__s; - } - } -} - -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__m) { - .block-wishlist-management { - clear: both; - margin-top: -21px; - - .wishlist { - // Select wish list - &-select { - margin: 0 (-$layout__width-xs-indent) 20px; - - .wishlist-name { - @extend .abs-toggling-title-mobile; - } - - &-items { - border-bottom: $border-width__base solid $border-color__base; - background: $account-nav-background; - display: none; - padding: 15px 0; - - &.active { - display: block; - } - - .item { - margin: 3px 0 0; - - &:first-child { - margin-top: 0; - } - - &.current { - display: none; - } - - a { - display: block; - padding: $indent__xs 18px; - text-decoration: none; - - &:hover { - background: $account-nav-item-hover; - } - } - } - } - } - - &-add.item { - .add { - @extend .abs-icon-add-mobile; - } - } - - // Wish list name - &-title { - strong { - font-size: 26px; - } - } - - // Wish list info - &-info { - margin-bottom: 15px; - } - - // Wish list toolbar - &-toolbar { - &-select, - &-actions { - margin-bottom: 15px; - } - } - } - } - .products-grid.wishlist { - .product { - &-item { - &-checkbox { - left: 20px; - position: absolute; - top: 20px; - } - - &-photo { - .page-multiple-wishlist & { - margin-left: $indent__m; - } - } - - &-name, - &-description, - .price-box, - &-tooltip { - .page-multiple-wishlist & { - margin-left: 115px; - } - } - } - } - - .wishlist-dropdown { - display: none; - } - } - - .toolbar-wishlist-results { - @extend .abs-pager-toolbar-mobile; - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .wishlist { - &.window.popup { - bottom: auto; - top: $desktop-popup-position-top; - left: $desktop-popup-position-left; - right: auto; - width: $desktop-popup-width; - transform: translateX(-$desktop-popup-margin-left); - - .field { - @include lib-form-field-type-revert($_type: block); - } - } - } - - .block-wishlist-management { - @extend .abs-add-clearfix-desktop; - margin-bottom: $indent__base; - - .wishlist { - // Select wish list - &-select { - border-bottom: 1px solid $secondary__color; - display: table; - margin-bottom: 15px; - width: 100%; - - .wishlist-name { - display: table-cell; - padding: $indent__xs $indent__s $indent__s; - vertical-align: top; - white-space: nowrap; - width: 5%; - } - - &-items { - display: table-cell; - padding-right: 160px; - vertical-align: top; - - .item { - display: inline-block; - margin-right: $indent__s; - padding: $indent__xs $indent__s $indent__s; - - &:last-child { - margin-right: 0; - } - } - - .current { - border-bottom: 3px solid $active__color; - font-weight: $font-weight__semibold; - } - } - - .wishlist-name-current { - display: none; - } - } - - &-add.item { - position: absolute; - right: 0; - top: 0; - } - - // Wish list name - &-title { - strong { - font-size: 40px; - } - } - - // Wish list info - &-info { - float: left; - } - - // Wish list toolbar - &-toolbar { - float: right; - } - } - } - - .block-wishlist-info-items { - .product-item-photo { - margin-left: 0; - } - } - - .products-grid.wishlist { - .product { - &-item { - &-checkbox { - float: left; - - + .product-item-name { - margin-left: $indent__m; - } - } - } - } - } - - .toolbar-wishlist-results { - @extend .abs-pager-toolbar; - } -} diff --git a/Magento_Multishipping/styles/_module.scss b/Magento_Multishipping/styles/_module.scss index ce86e39b..35987678 100644 --- a/Magento_Multishipping/styles/_module.scss +++ b/Magento_Multishipping/styles/_module.scss @@ -1 +1,403 @@ -@import 'module/common'; +.multicheckout { + .title { + margin-bottom: $indent__l; + + strong { + font-weight: $font-weight__regular; + } + } + + .table-wrapper { + margin-bottom: 0; + + .action.delete { + display: inline-block; + } + + .col { + .qty { + display: inline-block; + + .input-text { + @extend .abs-input-qty; + } + } + + .label { + @extend .abs-visually-hidden; + } + + &.item { + .action.edit { + font-weight: $font-weight__regular; + margin-left: $indent__s; + } + } + } + } + + &:not(.address) { + .table-wrapper { + .product-item-name { + margin: 0; + } + } + } + + > .actions-toolbar { + margin-top: $indent__xl; + } + + .actions-toolbar { + > .secondary { + display: block; + + .action { + margin-bottom: $indent__m; + + &.back { + display: block; + margin-left: 0; + } + } + } + + > .primary { + margin-right: $indent__s; + } + } + + .action.primary { + @extend .abs-button-l; + } + + .item-options { + margin: $indent__s 0 0; + + @extend .abs-product-options-list; + @extend .abs-add-clearfix; + } + + @extend .abs-account-blocks; + + .block { + @extend .abs-add-clearfix; + + .methods-shipping { + .item-content { + .fieldset { + > .legend { + @extend .abs-visually-hidden; + } + + > .legend + br { + @extend .abs-no-display; + } + + > .field { + &:before { + display: none; + } + + .control { + display: inline-block; + } + } + } + } + } + } + + .block-title, + .block-content .title { + border-bottom: $border-width__base solid $border-color__base; + padding-bottom: $indent__s; + + strong { + font-weight: $font-weight__regular; + + span { + @include lib-css(color, $primary__color__light); + } + } + } + + .block-content { + @extend .abs-add-clearfix; + .title { + border-bottom: none; + padding-bottom: 0; + } + } + + &.order-review { + .block-title > strong { + @include lib-font-size(24); + } + + .block-shipping { + .block-content:not(:last-child) { + margin-bottom: $indent__xl; + } + } + } + + .box-title { + span { + margin-right: $indent__s; + } + + > .action { + margin: 0; + } + } + + .box-shipping-method { + .price { + font-weight: $font-weight__bold; + } + } + + .box-billing-method { + .fieldset { + margin: 0; + + .legend.box-title { + margin: 0 0 $indent__xs; + } + } + } + + .hidden { + @extend .abs-no-display; + } + + .checkout-review .grand.totals { + @include lib-font-size($font-size__xl); + margin-bottom: $indent__xl; + + .mark { + font-weight: $font-weight__regular; + } + } +} + +[class^='multishipping-'] { + .nav-sections, + .nav-toggle { + @extend .abs-no-display; + } + + .logo { + margin-left: 0; + } +} + +.multishipping-checkout-success { + .nav-sections { + display: block; + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__s) { + .multicheckout { + .data.table { + .address { + &:before { + margin-bottom: $indent__xs; + } + } + } + + .product-item-name, + .price-including-tax, + .price-excluding-tax { + display: inline-block; + } + + .block-content .box { + &:not(:last-child) { + margin-bottom: $indent__xl; + } + + &:last-child { + margin-bottom: 0; + } + } + + &.order-review { + .box-items { + .data.table { + thead { + display: block; + + tr { + display: block; + } + + .col.item { + display: block; + padding: 0; + } + } + } + } + + .data.table { + @extend .abs-checkout-order-review; + } + } + + .actions-toolbar { + .action { + margin-bottom: $indent__m; + } + + > .primary { + margin-bottom: $indent__m; + margin-right: 0; + } + } + } +} + +@include min-screen($screen__s) { + .multicheckout { + .actions-toolbar { + .column:not(.sidebar-main) & { + @extend .abs-reset-left-margin-desktop-s; + } + + .secondary { + float: none; + margin-top: 11px; + text-align: right; + + .action { + margin-left: $indent__s; + + &.back { + display: block; + float: left; + } + } + } + } + + .item-options { + margin: $indent__base 0 0; + } + + .block-content .box { + margin-bottom: 0; + } + + .block-shipping { + .box { + @extend .abs-add-box-sizing-desktop-s; + float: left; + width: 25%; + } + + .box-shipping-method { + padding-left: $indent__m; + padding-right: $indent__m; + width: 50%; + + .fieldset { + .legend { + @extend .abs-reset-left-margin-desktop-s; + } + + .field { + &:before { + display: none; + } + } + } + } + } + + .block-billing { + @extend .abs-add-clearfix-desktop-s; + .box-billing-address { + @extend .abs-add-box-sizing-desktop-s; + float: left; + width: 25%; + } + + .box-billing-method { + @extend .abs-add-box-sizing-desktop-s; + float: left; + padding-left: $indent__m; + width: 50%; + } + } + + &.form.address { + .table-wrapper { + .applicable { + margin: 7px 0 0; + } + } + } + + &.order-review { + .box-items { + clear: left; + float: none; + padding-top: $indent__xl; + width: auto; + } + + .col.item { + width: 75%; + } + } + + // Payment methods + .methods-payment { + .item-content > .fieldset { + width: auto; + + .field { + &.cvv { + display: inline-block; + width: auto; + } + } + } + + .fieldset > .field:not(.choice) { + > .label { + float: none; + margin-bottom: 8px; + text-align: left; + width: auto; + } + + &:not(.cvv) { + .control { + width: 100%; + } + } + } + } + } +} + +@include max-screen($screen__m) { + .multishipping-checkout-success { + .nav-toggle { + display: block; + } + + .logo { + margin-left: $indent__xl; + } + } +} diff --git a/Magento_Multishipping/styles/module/_common.scss b/Magento_Multishipping/styles/module/_common.scss deleted file mode 100644 index 37ddfff9..00000000 --- a/Magento_Multishipping/styles/module/_common.scss +++ /dev/null @@ -1,402 +0,0 @@ -.multicheckout { - .title { - margin-bottom: $indent__l; - - strong { - font-weight: $font-weight__regular; - } - } - - .table-wrapper { - margin-bottom: 0; - - .action.delete { - display: inline-block; - } - - .col { - .qty { - display: inline-block; - - .input-text { - @extend .abs-input-qty; - } - } - - .label { - @extend .abs-visually-hidden; - } - - &.item { - .action.edit { - font-weight: $font-weight__regular; - margin-left: $indent__s; - } - } - } - } - - &:not(.address) { - .table-wrapper { - .product-item-name { - margin: 0; - } - } - } - - & > .actions-toolbar { - margin-top: $indent__xl; - } - - .actions-toolbar { - & > .secondary { - display: block; - - .action { - margin-bottom: $indent__m; - - &.back { - display: block; - margin-left: 0; - } - } - } - - & > .primary { - margin-right: $indent__s; - } - } - - .action.primary { - @extend .abs-button-l; - } - - .item-options { - @extend .abs-product-options-list; - @extend .abs-add-clearfix; - margin: $indent__s 0 0; - } - - @extend .abs-account-blocks; - - .block { - @extend .abs-add-clearfix; - - .methods-shipping { - .item-content { - .fieldset { - & > .legend { - @extend .abs-visually-hidden; - } - - & > .legend + br { - @extend .abs-no-display; - } - - & > .field { - &:before { - display: none; - } - - .control { - display: inline-block; - } - } - } - } - } - } - - .block-title, - .block-content .title { - border-bottom: $border-width__base solid $border-color__base; - padding-bottom: $indent__s; - - strong { - font-weight: $font-weight__regular; - - span { - color: $primary__color__light; - } - } - } - - .block-content { - @extend .abs-add-clearfix; - .title { - border-bottom: none; - padding-bottom: 0; - } - } - - &.order-review { - .block-title > strong { - font-size: 24px; - } - - .block-shipping { - .block-content:not(:last-child) { - margin-bottom: $indent__xl; - } - } - } - - .box-title { - span { - margin-right: $indent__s; - } - - & > .action { - margin: 0; - } - } - - .box-shipping-method { - .price { - font-weight: $font-weight__bold; - } - } - - .box-billing-method { - .fieldset { - margin: 0; - - .legend.box-title { - margin: 0 0 $indent__xs; - } - } - } - - .hidden { - @extend .abs-no-display; - } - - .checkout-review .grand.totals { - font-size: $font-size__xl; - margin-bottom: $indent__xl; - - .mark { - font-weight: $font-weight__regular; - } - } -} - -[class^='multishipping-'] { - .nav-sections, - .nav-toggle { - @extend .abs-no-display; - } - - .logo { - margin-left: 0; - } -} - -.multishipping-checkout-success { - .nav-sections { - display: block; - } -} - -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__s) { - .multicheckout { - .data.table { - .address { - &:before { - margin-bottom: $indent__xs; - } - } - } - - .product-item-name, - .price-including-tax, - .price-excluding-tax { - display: inline-block; - } - - .block-content .box { - &:not(:last-child) { - margin-bottom: $indent__xl; - } - - &:last-child { - margin-bottom: 0; - } - } - - &.order-review { - .box-items { - .data.table { - thead { - display: block; - - tr { - display: block; - } - - .col.item { - display: block; - padding: 0; - } - } - } - } - - .data.table { - @extend .abs-checkout-order-review; - } - } - - .actions-toolbar { - .action { - margin-bottom: $indent__m; - } - - & > .primary { - margin-bottom: $indent__m; - margin-right: 0; - } - } - } -} - -@include min-screen($screen__s) { - .multicheckout { - .actions-toolbar { - .column:not(.sidebar-main) & { - @extend .abs-reset-left-margin-desktop-s; - } - - .secondary { - float: none; - margin-top: 11px; - text-align: right; - - .action { - margin-left: $indent__s; - - &.back { - display: block; - float: left; - } - } - } - } - - .item-options { - margin: $indent__base 0 0; - } - - .block-content .box { - margin-bottom: 0; - } - - .block-shipping { - .box { - @extend .abs-add-box-sizing-desktop-s; - float: left; - width: 25%; - } - - .box-shipping-method { - padding-left: $indent__m; - padding-right: $indent__m; - width: 50%; - - .fieldset { - .legend { - @extend .abs-reset-left-margin-desktop-s; - } - - .field { - &:before { - display: none; - } - } - } - } - } - - .block-billing { - @extend .abs-add-clearfix-desktop-s; - .box-billing-address { - @extend .abs-add-box-sizing-desktop-s; - float: left; - width: 25%; - } - - .box-billing-method { - @extend .abs-add-box-sizing-desktop-s; - float: left; - padding-left: $indent__m; - width: 50%; - } - } - - &.form.address { - .table-wrapper { - .applicable { - margin: 7px 0 0; - } - } - } - - &.order-review { - .box-items { - clear: left; - float: none; - padding-top: $indent__xl; - width: auto; - } - - .col.item { - width: 75%; - } - } - - // Payment methods - .methods-payment { - .item-content > .fieldset { - width: auto; - - .field { - &.cvv { - display: inline-block; - width: auto; - } - } - } - - .fieldset > .field:not(.choice) { - & > .label { - float: none; - margin-bottom: 8px; - text-align: left; - width: auto; - } - - &:not(.cvv) { - .control { - width: 100%; - } - } - } - } - } -} - -@include max-screen($screen__m) { - .multishipping-checkout-success { - .nav-toggle { - display: block; - } - - .logo { - margin-left: $indent__xl; - } - } -} diff --git a/Magento_Newsletter/styles/_module.scss b/Magento_Newsletter/styles/_module.scss index ce86e39b..cfb7be8e 100644 --- a/Magento_Newsletter/styles/_module.scss +++ b/Magento_Newsletter/styles/_module.scss @@ -1 +1,80 @@ -@import 'module/common'; +// Newsletter subscription +.block.newsletter { + margin-bottom: $indent__xl; + + .form.subscribe { + display: table; + width: 100%; + } + + .fieldset { + display: table-cell; + margin: 0; + padding: 0; + vertical-align: top; + } + + .field { + margin: 0; + + .control { + @include lib-icon-font( + $icon-envelope, + $_icon-font-size : 35px, + $_icon-font-line-height : 33px, + $_icon-font-color : $form-element-input-placeholder__color + ); + display: block; + + &:before { + position: absolute; + } + } + } + + input { + padding-left: 35px; + } + + .title { + display: none; + } + + .label { + @extend .abs-visually-hidden; + } + + .actions { + display: table-cell; + vertical-align: top; + width: 1%; + } + + .action.subscribe { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + margin-left: -1px; + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .block.newsletter { + width: 32%; + + .field { + margin-right: 5px; + + .control { + width: 100%; + } + } + + .action.subscribe { + border-radius: 3px; + } + } +} diff --git a/Magento_Newsletter/styles/module/_common.scss b/Magento_Newsletter/styles/module/_common.scss deleted file mode 100644 index 014e2842..00000000 --- a/Magento_Newsletter/styles/module/_common.scss +++ /dev/null @@ -1,78 +0,0 @@ -.block.newsletter { - margin-bottom: $indent__xl; - - .form.subscribe { - display: table; - width: 100%; - } - - .fieldset { - display: table-cell; - padding: 0; - vertical-align: top; - } - - .field { - margin: 0; - - .control { - @include lib-icon-font( - $icon-envelope, - $_icon-font-size : 35px, - $_icon-font-line-height: 33px, - $_icon-font-color : $form-element-input-placeholder__color - ); - display: block; - - &:before { - position: absolute; - } - } - } - - input { - padding-left: 35px; - } - - .title { - display: none; - } - - .label { - @extend .abs-visually-hidden; - } - - .actions { - display: table-cell; - vertical-align: top; - width: 1%; - } - - .action.subscribe { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - margin-left: -1px; - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .block.newsletter { - width: 32%; - - .field { - margin-right: 5px; - - .control { - width: 100%; - } - } - - .action.subscribe { - border-radius: 3px; - } - } -} diff --git a/Magento_Paypal/styles/module/_billing.scss b/Magento_Paypal/styles/module/_billing.scss index 7be728a1..746addfa 100644 --- a/Magento_Paypal/styles/module/_billing.scss +++ b/Magento_Paypal/styles/module/_billing.scss @@ -1,4 +1,3 @@ - // Paypal billing agreement .form-new-agreement { .actions-toolbar { diff --git a/Magento_Paypal/styles/module/_review.scss b/Magento_Paypal/styles/module/_review.scss index 176aa2d9..991e9ec5 100644 --- a/Magento_Paypal/styles/module/_review.scss +++ b/Magento_Paypal/styles/module/_review.scss @@ -12,14 +12,13 @@ } .paypa-review-title { - & > strong { + > strong { @include lib-heading(h3); display: inline-block; } } .items-qty { - @extend .abs-reset-list; .item { @@ -34,7 +33,7 @@ } .paypal-review-title { - & > strong { + > strong { @include lib-heading(h3); display: inline-block; } @@ -64,7 +63,6 @@ margin: $indent__base 0; .block { - @extend .abs-discount-block; margin-bottom: 0; @@ -85,7 +83,6 @@ } .block-content { - @extend .abs-add-clearfix-desktop; .box-order-shipping-address, .box-order-shipping-method, @@ -103,7 +100,6 @@ .column.main & { .actions-toolbar { - @extend .abs-reset-left-margin-desktop; } } diff --git a/Magento_ProductVideo/styles/_module.scss b/Magento_ProductVideo/styles/_module.scss index ce86e39b..e256b0f6 100644 --- a/Magento_ProductVideo/styles/_module.scss +++ b/Magento_ProductVideo/styles/_module.scss @@ -1 +1,96 @@ -@import 'module/common'; +.fotorama-video-container { + &:after { + background: url(../Magento_ProductVideo/img/gallery-sprite.png) bottom right; + bottom: 0; + content: ''; + height: 100px; + left: 0; + margin: auto; + position: absolute; + right: 0; + top: 12px; + width: 100px; + } + + .magnify-lens { + display: none !important; + } + + &.video-unplayed { + &:hover { + img { + opacity: .6; + } + + &:after { + transform: scale(1.25); + } + } + } +} + +.video-thumb-icon:after { + background: url(../Magento_ProductVideo/img/gallery-sprite.png) bottom left; + bottom: 0; + content: ''; + height: 40px; + left: 0; + margin: auto; + position: absolute; + right: 0; + top: 10px; + width: 49px; +} + +.product-video { + bottom: 0; + height: 75%; + left: 0; + margin: auto; + position: absolute; + right: 0; + top: 0; + width: 100%; + + iframe { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 9999; + } +} + +.fotorama__stage__shaft:focus .fotorama__stage__frame.fotorama__active:after { + bottom: 0; + content: ''; + height: 100px; + left: 0; + margin: auto; + position: absolute; + right: 0; + top: 12px; + width: 100px; +} + +.fotorama__product-video--loading { + &:after { + visibility: hidden; + } +} + +// +// Mobile +// _____________________________________________ + +// $TODO UI: check possibility to use .media-width() mixin +@media only screen +and (min-device-width: 320px) +and (max-device-width: 780px) +and (orientation: landscape) { + .product-video { + height: 100%; + width: 81%; + } +} diff --git a/Magento_ProductVideo/styles/module/_common.scss b/Magento_ProductVideo/styles/module/_common.scss deleted file mode 100644 index f24e6a56..00000000 --- a/Magento_ProductVideo/styles/module/_common.scss +++ /dev/null @@ -1,85 +0,0 @@ -.fotorama-video-container { - &:after { - background: url('../Magento_ProductVideo/img/gallery-sprite.png') bottom right; - bottom: 0; - content: ''; - height: 100px; - left: 0; - margin: auto; - position: absolute; - right: 0; - top: 12px; - width: 100px; - } - - .magnify-lens { - display: none !important; - } - - &.video-unplayed { - &:hover { - img { - opacity: 0.6; - } - - &:after { - transform: scale(1.25); - } - } - } -} - -.video-thumb-icon:after { - background: url('../Magento_ProductVideo/img/gallery-sprite.png') bottom left; - bottom: 0; - content: ''; - height: 40px; - left: 0; - margin: auto; - position: absolute; - right: 0; - top: 10px; - width: 49px; -} - -.product-video { - height: 75%; - left: 0; - position: absolute; - top: 0; - width: 100%; - right: 0; - bottom: 0; - margin: auto; - - iframe { - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - z-index: 9999; - } -} -.fotorama__stage__shaft:focus .fotorama__stage__frame.fotorama__active:after { - bottom: 0; - content: ''; - height: 100px; - left: 0; - margin: auto; - position: absolute; - right: 0; - top: 12px; - width: 100px; -} - -// -// Mobile -// _____________________________________________ - -@media only screen and (min-device-width: 320px) and (max-device-width: 780px) and (orientation: landscape) { - .product-video { - height: 100%; - width: 81%; - } -} diff --git a/Magento_Review/styles/_module.scss b/Magento_Review/styles/_module.scss index 36b4dafb..a9ff7e8b 100644 --- a/Magento_Review/styles/_module.scss +++ b/Magento_Review/styles/_module.scss @@ -1,2 +1,341 @@ -@import 'variables'; -@import 'module/common'; +// +// Variables +// _____________________________________________ + +$review-ratings-left: 280px; +$reviews-indent-desktop: 30px; + +.rating-summary { + @include lib-rating-summary(); + .rating-result { + margin-left: -5px; + } +} + +.product-reviews-summary, +.table-reviews { + .rating-summary { + @include lib-rating-summary-label-hide(); + } +} + +.review-control-vote { + @include lib-rating-vote(); +} + +// +// Add review block +// --------------------------------------------- + +.block { + &.add.review { + margin-bottom: $indent__xl; + + > .title { + @include lib-heading(h2); + } + + .legend { + @include lib-heading(h3); + margin: 0 0 $indent__base; + } + + .field.rating { + display: table-row; + + .label { + display: table-cell; + padding: $indent__xs 0; + vertical-align: middle; + } + + .control { + display: table-cell; + vertical-align: top; + } + } + } + + &.reviews.list { + > .title { + @include lib-heading(h2); + } + + .review { + &.item { + margin-bottom: $indent__xl; + } + + &.title { + @include lib-heading(h3); + } + } + } +} + +.data.table.reviews { + .rating-summary { + margin-top: -4px; + } +} + +.customer-review.view { + margin-bottom: $indent__base; + + .review.title, + .ratings-summary, + .product-details { + margin-bottom: $indent__base; + } +} + +.product-reviews-summary { + display: table; + margin: $indent__s 0 12px; + + .products.wrapper.list & { + margin: 0 auto; + } + + &.empty { + margin-left: 0; + } + + .rating-summary { + display: table-cell; + left: -$indent__xs; + position: relative; + text-align: left; + vertical-align: middle; + } + + .reviews-actions { + display: table-cell; + line-height: $rating-icon__font-size; + vertical-align: middle; + + a { + margin-right: $indent__xs; + } + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .product-reviews-summary { + .products.wrapper.list & { + margin: 0; + } + } +} + +.customer-review { + .product-details { + @extend .abs-add-clearfix; + margin-bottom: $indent__xl; + } + + .product-media { + float: left; + margin-right: 3%; + max-width: 285px; + width: 30%; + } + + .review-details { + .customer-review-rating { + @include lib-css(margin-bottom, $indent__base); + + .item { + @include lib-css(margin-bottom, $indent__s); + + &:last-child { + margin-bottom: 0; + } + } + } + + .review-title { + @include lib-heading(h3); + @include lib-css(font-weight, $font-weight__semibold); + @include lib-css(margin-bottom, $indent__base); + } + + .review-content { + @include lib-css(margin-bottom, $indent__base); + } + } + + .product-reviews-summary { + .rating-summary, + .reviews-actions { + display: block; + } + } +} + +.review-field-ratings { + .nested { + display: table; + } + + .review-field-rating { + display: table-row; + + .label, + .control { + display: table-cell; + padding-bottom: $indent__s; + vertical-align: top; + } + + .label { + padding-right: $indent__s; + padding-top: 6px; + } + + .control { + padding-top: 2px; + } + } +} + +// +// Review product page +// --------------------------------------------- + +.review { + &-toolbar { + border-top: 1px solid $color-gray79; + margin: 0 0 $indent__base; + text-align: center; + + &:first-child { + display: none; + } + + .pages { + border-bottom: 1px solid $color-gray79; + display: block; + padding: $indent__base 0; + text-align: center; + } + + .limiter { + display: none; + } + } + + &-add { + .block-title { + display: none; + } + } + + &-form { + .action.submit.primary { + @include lib-button-revert-secondary-color(); + } + } + + .fieldset &-legend.legend { + @extend .abs-reset-left-margin; + margin-bottom: $indent__base; + + strong { + display: block; + margin-left: 0; + } + } + + &-field-rating { + .control { + margin-bottom: 1.2*$indent__xl; + margin-top: $indent__s; + } + } + + &-list { + margin-bottom: $indent__l; + + .block-title strong { + @include lib-heading(h2); + } + } + + &-item { + @include lib-clearer(); + border-bottom: 1px solid $color-gray79; + margin: 0; + padding: $indent__base 0; + + &:last-child { + border-width: 0; + } + } + + &-ratings { + display: table; + margin-bottom: $indent__s; + max-width: 100%; + } + + &-author { + display: inline; + } + + &-title { + @include lib-heading(h3); + margin: 0 0 $indent__base; + } + + &-content { + margin-bottom: $indent__base; + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__s) { + .review { + &-form { + max-width: 500px; + } + + &-ratings { + float: left; + margin-bottom: 0; + max-width: $review-ratings-left - $indent__xl; + } + + &-ratings ~ &-content, + &-ratings ~ &-details { + margin-left: $review-ratings-left; + } + + &-toolbar { + margin: 0 0 $reviews-indent-desktop; + + .pages { + padding: $reviews-indent-desktop 0; + } + } + + .fieldset &-legend.legend { + margin-bottom: $reviews-indent-desktop; + } + + &-item { + padding: $reviews-indent-desktop 0; + } + + &-title { + margin: 0 0 $reviews-indent-desktop; + } + } +} diff --git a/Magento_Review/styles/_variables.scss b/Magento_Review/styles/_variables.scss deleted file mode 100644 index cf6ee327..00000000 --- a/Magento_Review/styles/_variables.scss +++ /dev/null @@ -1,6 +0,0 @@ -// -// Variables -// _____________________________________________ - -$review-ratings-left: 280px !default; -$reviews-indent-desktop: 30px !default; diff --git a/Magento_Review/styles/module/_common.scss b/Magento_Review/styles/module/_common.scss deleted file mode 100644 index 77ff18a9..00000000 --- a/Magento_Review/styles/module/_common.scss +++ /dev/null @@ -1,342 +0,0 @@ -// -// Common -// _____________________________________________ - -.rating-summary { - @include lib-rating-summary(); - .rating-result { - margin-left: -5px; - } -} - -.product-reviews-summary, -.table-reviews { - .rating-summary { - @include lib-rating-summary-label-hide(); - } -} - -.review-control-vote { - @include lib-rating-vote(); -} - -// -// Add review block -// --------------------------------------------- - -.block { - &.add.review { - margin-bottom: $indent__xl; - - > .title { - @include lib-heading(h2); - } - - .legend { - @include lib-heading(h3); - margin: 0 0 $indent__base; - } - - .field.rating { - display: table-row; - - .label { - display: table-cell; - padding: $indent__xs 0; - vertical-align: middle; - } - - .control { - display: table-cell; - vertical-align: top; - } - } - } - - &.reviews.list { - > .title { - @include lib-heading(h2); - } - - .review { - &.item { - margin-bottom: $indent__xl; - } - - &.title { - @include lib-heading(h3); - } - } - } -} - -.data.table.reviews { - .rating-summary { - margin-top: -4px; - } -} - -.customer-review.view { - margin-bottom: $indent__base; - - .review.title, - .ratings-summary, - .product-details { - margin-bottom: $indent__base; - } -} - -.product-reviews-summary { - display: table; - margin: $indent__s 0 12px; - - .products.wrapper.list & { - margin: 0 auto; - } - - &.empty { - margin-left: 0; - } - - .rating-summary { - display: table-cell; - left: -$indent__xs; - position: relative; - text-align: left; - vertical-align: middle; - } - - .reviews-actions { - display: table-cell; - line-height: $rating-icon__font-size; - vertical-align: middle; - - a { - margin-right: $indent__xs; - } - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .product-reviews-summary { - .products.wrapper.list & { - margin: 0; - } - } -} - -// -// Common -// _____________________________________________ - -.customer-review { - .product-details { - @extend .abs-add-clearfix; - margin-bottom: $indent__xl; - } - - .product-media { - float: left; - margin-right: 3%; - max-width: 285px; - width: 30%; - } - - .review-details { - .customer-review-rating { - margin-bottom: $indent__base; - - .item { - margin-bottom: $indent__s; - - &:last-child { - margin-bottom: 0; - } - } - } - - .review-title { - @include lib-heading(h3); - font-weight: $font-weight__semibold; - margin-bottom: $indent__base; - } - - .review-content { - margin-bottom: $indent__base; - } - } - - .product-reviews-summary { - .rating-summary, - .reviews-actions { - display: block; - } - } -} - -.review-field-ratings { - .nested { - display: table; - } - - .review-field-rating { - display: table-row; - - .label, - .control { - display: table-cell; - padding-bottom: $indent__s; - vertical-align: top; - } - - .label { - padding-right: $indent__s; - padding-top: 6px; - } - - .control { - padding-top: 2px; - } - } -} - -// -// Review product page -// --------------------------------------------- - -.review { - &-toolbar { - border-top: 1px solid $color-gray79; - margin: 0 0 $indent__base; - text-align: center; - - &:first-child { - display: none; - } - - .pages { - border-bottom: 1px solid $color-gray79; - display: block; - padding: $indent__base 0; - text-align: center; - } - - .limiter { - display: none; - } - } - - &-add { - .block-title { - display: none; - } - } - - &-form { - .action.submit.primary { - @include lib-button-revert-secondary-color(); - } - } - - .fieldset &-legend.legend { - @extend .abs-reset-left-margin; - margin-bottom: $indent__base; - - strong { - display: block; - margin-left: 0; - } - } - - &-field-rating { - .control { - margin-bottom: 1.2 * $indent__xl; - margin-top: $indent__s; - } - } - - &-list { - margin-bottom: $indent__l; - - .block-title strong { - @include lib-heading(h2); - } - } - - &-item { - @include lib-clearer(); - border-bottom: 1px solid $color-gray79; - margin: 0; - padding: $indent__base 0; - - &:last-child { - border-width: 0; - } - } - - &-ratings { - display: table; - margin-bottom: $indent__s; - max-width: 100%; - } - - &-author { - display: inline; - } - - &-title { - @include lib-heading(h3); - margin: 0 0 $indent__base; - } - - &-content { - margin-bottom: $indent__base; - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__s) { - .review { - &-form { - max-width: 500px; - } - - &-ratings { - float: left; - margin-bottom: 0; - max-width: $review-ratings-left - $indent__xl; - } - - &-ratings ~ &-content, - &-ratings ~ &-details { - margin-left: $review-ratings-left; - } - - &-toolbar { - margin: 0 0 $reviews-indent-desktop; - - .pages { - padding: $reviews-indent-desktop 0; - } - } - - .fieldset &-legend.legend { - margin-bottom: $reviews-indent-desktop; - } - - &-item { - padding: $reviews-indent-desktop 0; - } - - &-title { - margin: 0 0 $reviews-indent-desktop; - } - } -} diff --git a/Magento_Reward/styles/_module.scss b/Magento_Reward/styles/_module.scss index ce86e39b..6bacef8b 100644 --- a/Magento_Reward/styles/_module.scss +++ b/Magento_Reward/styles/_module.scss @@ -1 +1,38 @@ -@import 'module/common'; +.block-reward-info { + .reward-rates, + .reward-limit, + .reward-expiring { + &:not(:last-child) { + margin-bottom: $indent__m; + } + + .title { + display: inline-block; + margin-bottom: $indent__s; + } + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m) { + .reward-settings { + + .actions-toolbar { + margin-top: 10px; + } + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .reward-settings { + + .actions-toolbar { + margin-top: -32px; + } + } +} diff --git a/Magento_Reward/styles/module/_common.scss b/Magento_Reward/styles/module/_common.scss deleted file mode 100644 index d9900a92..00000000 --- a/Magento_Reward/styles/module/_common.scss +++ /dev/null @@ -1,37 +0,0 @@ -.block-reward-info { - .reward-rates, - .reward-limit, - .reward-expiring { - &:not(:last-child) { - margin-bottom: $indent__m; - } - - .title { - display: inline-block; - margin-bottom: $indent__s; - } - } -} - -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__m) { - .reward-settings { - + .actions-toolbar { - margin-top: 10px; - } - } -} - -// -// Desktop -// _____________________________________________ -@include min-screen($screen__m) { - .reward-settings { - + .actions-toolbar { - margin-top: -32px; - } - } -} diff --git a/Magento_Rma/styles/_module.scss b/Magento_Rma/styles/_module.scss index ce86e39b..754ff848 100644 --- a/Magento_Rma/styles/_module.scss +++ b/Magento_Rma/styles/_module.scss @@ -1 +1,159 @@ -@import 'module/common'; +.form-create-return { + @extend .abs-add-fields; + + .field { + .control > span, + address { + display: inline-block; + padding-top: $form-field-type-label-inline__padding-top; + } + } + + .additional { + &:first-child { + margin-top: 0; + } + + .field:nth-last-child(2) { + margin-bottom: 0; + } + + .field { + &:last-child { + margin-top: $form-field__vertical-indent; + } + } + } + + .field.comment { + margin-top: 55px; + } +} + +.block-returns-comments { + .returns-comments { + dt, + dd { + margin: 0; + } + + dt { + font-weight: $font-weight__regular; + } + + dd { + margin-bottom: 15px; + + &:last-child { + margin-bottom: 0; + } + } + } + + .fieldset { + margin-bottom: 20px; + } +} + +.return-status { + @extend .abs-status; +} + +.magento-rma-returns-returns, +.magento-rma-guest-returns, +.magento-rma-returns-view { + .page-title-wrapper { + .page-title { + margin-right: 25px; + } + } +} + +// +// Guest return view page +// --------------------------------------------- + +.magento-rma-guest-returns { + .column.main { + .block:not(.widget) { + @extend .abs-account-blocks; + } + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__m) { + .form-create-return { + .fieldset { + > .actions-toolbar { + @extend .abs-add-clearfix-mobile-m; + } + } + } + + .account { + .column.main { + .returns-details-items { + .block-returns-tracking { + .block-title { + > .action.track { + display: block; + float: none; + margin: $indent__s 0 0; + } + } + } + } + } + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .form-create-return { + @extend .abs-add-fields-desktop; + .additional { + .field:last-child { + margin-top: $form-field__vertical-indent__desktop; + } + } + } + + // + // Guest return view page + // --------------------------------------------- + + .magento-rma-guest-returns { + .column.main { + .block:not(.widget) { + .block-content { + @extend .abs-add-clearfix-desktop; + + .box { + @extend .abs-blocks-2columns; + margin-bottom: $indent__base; + } + } + } + } + } + + .block-returns-tracking { + .block-title { + .action { + margin: 0 0 0 30px; + } + + .actions-track { + float: right; + margin-top: 12px; + } + } + } +} diff --git a/Magento_Rma/styles/module/_common.scss b/Magento_Rma/styles/module/_common.scss deleted file mode 100644 index 59805ea2..00000000 --- a/Magento_Rma/styles/module/_common.scss +++ /dev/null @@ -1,158 +0,0 @@ -.form-create-return { - @extend .abs-add-fields; - - .field { - .control > span, - address { - display: inline-block; - padding-top: 6px; - } - } - - .additional { - &:first-child { - margin-top: 0; - } - - .field:nth-last-child(2) { - margin-bottom: 0; - } - - .field { - &:last-child { - margin-top: $form-field__vertical-indent; - } - } - } - - .field.comment { - margin-top: 55px; - } -} - -.block-returns-comments { - .returns-comments { - dt, - dd { - margin: 0; - } - - dt { - font-weight: $font-weight__regular; - } - - dd { - margin-bottom: 15px; - - &:last-child { - margin-bottom: 0; - } - } - } - - .fieldset { - margin-bottom: 20px; - } -} - -.return-status { - @extend .abs-status; -} - -.magento-rma-returns-returns, -.magento-rma-guest-returns, -.magento-rma-returns-view { - .page-title-wrapper { - .page-title { - margin-right: 25px; - } - } -} - -// -// Guest return view page -// --------------------------------------------- - -.magento-rma-guest-returns { - .column.main { - .block:not(.widget) { - @extend .abs-account-blocks; - } - } -} - -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__m) { - .form-create-return { - .fieldset { - > .actions-toolbar { - @extend .abs-add-clearfix-mobile-m; - } - } - } - - .account { - .column.main { - .returns-details-items { - .block-returns-tracking { - .block-title { - > .action.track { - display: block; - float: none; - margin: $indent__s 0 0; - } - } - } - } - } - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .form-create-return { - @extend .abs-add-fields-desktop; - .additional { - .field:last-child { - margin-top: $form-field__vertical-indent__desktop; - } - } - } - - // - // Guest return view page - // --------------------------------------------- - - .magento-rma-guest-returns { - .column.main { - .block:not(.widget) { - .block-content { - @extend .abs-add-clearfix-desktop; - - .box { - @extend .abs-blocks-2columns; - margin-bottom: $indent__base; - } - } - } - } - } - - .block-returns-tracking { - .block-title { - .action { - margin: 12px 0 0 30px; - - &.track { - float: right; - } - } - } - } -} diff --git a/Magento_Sales/styles/_email.scss b/Magento_Sales/styles/_email.scss deleted file mode 100644 index 067aebfb..00000000 --- a/Magento_Sales/styles/_email.scss +++ /dev/null @@ -1,233 +0,0 @@ -// -// Sales Module Styles -// _____________________________________________ - -.email-summary { - h1 { - margin-bottom: $indent__xs; - } -} - -@include max-screen($screen__xs) { - // Shrink order number in order email so it will fit on single line on small screens - .email-summary { - h1 { - font-size: ceil(1.7 * $font-size__base) !important; // 24px - } - } -} - -// -// Order Summary -// ---------------------------------------------- - -.order-details { - width: 100%; - - tr { - > .address-details, - > .method-info { - padding: $email-content__padding__base $email-content__padding__base $email-content__padding__base 0; - width: 50%; - - h3 { - margin-top: 0; - } - } - - // Prevent extra spacing on Payment & Shipping Method row - & + .method-info { - > td { - padding: 0 0 $email-content__padding__base; - } - } - } - - .payment-method { - margin-bottom: $indent__s; - - .title { - font-weight: $font-weight__regular; - } - - .data.table { - > caption { - display: none; - } - - th { - padding-right: $email-content__padding__base; - } - } - } -} - -// Remove address and phone number link color on iOS -.address-details a { - @extend .no-link a; -} - -@include max-screen($screen__xs) { - // Stack columns - .order-details { - .address-details, - .method-info { - display: block; - padding: $email-content__padding__base 0 !important; - width: auto !important; - - h3 { - margin-bottom: $indent__xs !important; - margin-top: 0 !important; - } - } - } -} - -// -// Shipment Tracking -// ---------------------------------------------- - -.shipment-track { - @include lib-table($table__width, 0); - - thead, - tbody { - > tr { - > th, - > td { - background-color: $color-gray95; - padding: $email-content__padding__base; - width: 50%; - } - - & + tr { - th, - td { - padding-top: 0; - } - } - } - } -} - -// -// Items Table -// ---------------------------------------------- - -.email-items { - @include lib-table($table__width, 0); - border: $table__border-width $table__border-style $table__border-color; - - thead, - tfoot { - > tr { - > th, - > td { - background-color: $color-gray95; - } - } - } - - > thead, - > tbody { - > tr { - > th { - padding: $email-content__padding__base; - } - - > td { - padding: $email-content__padding__base; - - &.message-gift { - border-top: none; - padding-top: 0; - } - } - } - } - - > tbody, - > tfoot { - > tr { - > th, - > td { - border-top: $table__border-width $table__border-style $table__border-color; - } - - & + tr { - > th, - > td { - border-top: 0; - } - } - } - } - - p { - margin-bottom: 0; - } - - .product-name { - font-weight: $font-weight__bold; - margin-bottom: $email-content__padding__s; - } - - .has-extra .sku { - margin-bottom: $email-content__padding__base; - } - - .item-info { - dl { - margin-bottom: 0; - padding-left: $email-content__padding__m; - - dt, - dd { - margin-bottom: 0; - padding-bottom: 0; - } - - dd { - padding-left: $email-content__padding__base; - } - } - } - - .item-qty { - text-align: center; - } - - .item-price { - text-align: right; - } - - .item-extra { - padding-top: 0; - } - - .order-totals { - > tr { - > th { - font-weight: $font-weight__regular; - } - - > th, - > td { - padding: $email-content__padding__base; - text-align: right; - } - - & + tr { - th, - td { - padding-top: 0; - } - } - } - - .price { - white-space: nowrap; - } - } -} diff --git a/Magento_Sales/styles/_module.scss b/Magento_Sales/styles/_module.scss index ce86e39b..1521eaf1 100644 --- a/Magento_Sales/styles/_module.scss +++ b/Magento_Sales/styles/_module.scss @@ -1 +1,378 @@ -@import 'module/common'; +.order-links { + border-bottom: $border-width__base solid $border-color__base; + margin-bottom: 10px; + + .item { + display: inline-block; + margin-right: 20px; + } +} + +.order-actions-toolbar { + .action { + margin: 0 20px 0 0; + } +} + +.order-details-items { + border-bottom: $border-width__base solid $border-color__base; + margin-bottom: 20px; + padding-bottom: 10px; + + .order-title { + > strong { + @include lib-heading(h3); + display: inline-block; + } + } + + .items-qty { + @extend .abs-reset-list; + + .item { + white-space: nowrap; + } + + .title { + &:after { + content: ': '; + } + } + } + + .table-order-items { + .product-item-name { + margin-top: 0; + } + + tbody + tbody { + border-top: $border-width__base solid $border-color__base; + } + } + + .item-options { + dt { + margin: 0; + } + + dd { + margin: 0 0 15px; + } + + &.links { + dt { + display: inline-block; + + &:after { + content: ': '; + } + } + + dd { + margin: 0; + } + } + } +} + +.order-pager-wrapper { + .toolbar-amount { + padding-top: 3px; + } + + .pages-items { + .item { + &:first-child, + &:last-child { + margin-right: 0; + } + } + } +} + +.order-actions-toolbar { + margin-bottom: 25px; + + .action { + margin-right: 30px; + + &.print { + margin: 0; + } + } +} + +.order-status { + @extend .abs-status; +} + +.page-title-wrapper { + .order-date { + margin: 0 0 $indent__base; + } +} + +.account, +[class^='sales-guest-'], +.sales-guest-view { + .page-title-wrapper { + .page-title { + margin-right: $indent__m; + } + } +} + +.form-orders-search { + .field { + &.email, + &.zip { + margin-bottom: 0; + } + } +} + +.block-reorder { + .block-title { + @extend .abs-block-title; + } + + .product-item { + .checkbox { + position: relative; + top: 2px; + vertical-align: baseline; + } + + .label { + @extend .abs-visually-hidden; + } + + .field.item { + display: inline-block; + } + } + + .product-item-name { + display: inline-block; + } + + .actions-toolbar { + margin: 17px 0; + max-width: 178px; + } + + .sidebar-main & .subtitle, + .sidebar-additional & .subtitle { + @extend .abs-no-display; + } +} + +.block-order-details { + &-comments { + margin: 0 0 40px; + + .comment-date { + font-weight: $font-weight__semibold; + } + + .comment-content { + line-height: 1.6; + margin: 0 0 20px; + } + } + + &-view { + .box-content { + .payment-method { + .title { + font-weight: $font-weight__regular; + } + + .content { + margin: 0; + + > strong { + font-weight: $font-weight__regular; + + &:after { + content: ': '; + } + } + } + } + } + } +} + +.order-tracking { + border-bottom: $border-width__base solid $border-color__base; + margin: 0; + padding: 20px 0; + + .tracking-title { + display: inline-block; + } + + .tracking-content { + display: inline-block; + margin: 0 0 0 5px; + } +} + +// +// Guest order view page +// --------------------------------------------- + +[class^='sales-guest-'], +.sales-guest-view { + .column.main { + .block:not(.widget) { + @extend .abs-account-blocks; + } + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__s) { + .account { + .order-details-items { + .table-order-items { + .product-item-name, + .price-including-tax, + .price-excluding-tax, + .items-qty { + display: inline-block; + vertical-align: top; + } + } + } + + .toolbar { + @extend .abs-add-clearfix-desktop; + + .pages { + float: right; + } + + .limiter { + clear: both; + } + } + } + + .order-details-items { + thead { + display: block; + + tr, + td { + display: block; + } + } + } + + .table-wrapper { + .table.table-order-items { + tfoot { + td.order-pager-wrapper { + width: 100%; + } + } + } + } +} + +@include max-screen($screen__m) { + .order-pager-wrapper { + .toolbar-amount { + left: inherit; + position: relative; + text-align: center; + top: inherit; + } + + .pages { + text-align: center; + } + + .action.previous, + .action.next { + margin: 0; + } + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .table-order-items { + .subtotal, + .amount { + text-align: right; + } + + &.creditmemo { + .col { + &.qty, + &.discount, + &.subtotal { + text-align: center; + } + + &.total { + text-align: right; + } + } + } + } + + .order-pager-wrapper { + .order-pager-wrapper-top { + padding-left: 0; + padding-right: 0; + } + + .pages { + float: right; + } + } + + .order-actions-toolbar { + .action.print { + display: block; + float: right; + } + } + + .page-title-wrapper { + .order-date { + $order-status-indent: ceil($h1__margin-bottom__desktop/2); + @include lib-css(margin-top, -$order-status-indent); + } + } + + // + // Guest order view page + // --------------------------------------------- + + [class^='sales-guest-'], + .sales-guest-view { + .column.main { + .block:not(.widget) { + .block-content { + @extend .abs-add-clearfix-desktop; + + .box { + @extend .abs-blocks-2columns; + margin-bottom: $indent__base; + } + } + } + } + } +} diff --git a/Magento_Sales/styles/module/_common.scss b/Magento_Sales/styles/module/_common.scss deleted file mode 100644 index 831a344a..00000000 --- a/Magento_Sales/styles/module/_common.scss +++ /dev/null @@ -1,311 +0,0 @@ -.order-links { - border-bottom: $border-width__base solid $border-color__base; - margin-bottom: 10px; - - .item { - display: inline-block; - margin-right: 20px; - } -} - -.order-actions-toolbar { - .action { - margin: 0 20px 0 0; - } -} - -.order-details-items { - border-bottom: $border-width__base solid $border-color__base; - margin-bottom: 20px; - padding-bottom: 10px; - - .order-title { - > strong { - @include lib-heading(h3); - display: inline-block; - } - } - - .items-qty { - @extend .abs-reset-list; - - .item { - white-space: nowrap; - } - - .title { - &:after { - content: ': '; - } - } - } - - .table-order-items { - .product-item-name { - margin-top: 0; - } - - tbody + tbody { - border-top: $border-width__base solid $border-color__base; - } - } - - .item-options { - dt { - margin: 0; - } - - dd { - margin: 0 0 15px; - } - - &.links { - dt { - display: inline-block; - - &:after { - content: ': '; - } - } - - dd { - margin: 0; - } - } - } -} - -.order-actions-toolbar { - margin-bottom: 25px; - - .action { - margin-right: 30px; - - &.print { - margin: 0; - } - } -} - -.order-status { - @extend .abs-status; -} - -.page-title-wrapper { - .order-date { - margin: 0 0 $indent__base; - } -} - -.account, -[class^='sales-guest-'], -.sales-guest-view { - .page-title-wrapper { - .page-title { - margin-right: $indent__m; - } - } -} - -.form-orders-search { - .field { - &.email, - &.zip { - margin-bottom: 0; - } - } -} - -.block-reorder { - .block-title { - @extend .abs-block-title; - } - - .product-item { - .checkbox { - position: relative; - top: 2px; - vertical-align: baseline; - } - - .label { - @extend .abs-visually-hidden; - } - - .field.item { - display: inline-block; - } - } - - .product-item-name { - display: inline-block; - } - - .actions-toolbar { - margin: 17px 0; - max-width: 178px; - } - - .sidebar-main & .subtitle, - .sidebar-additional & .subtitle { - @extend .abs-no-display; - } -} - -.block-order-details { - &-comments { - margin: 0 0 40px; - - .comment-date { - font-weight: $font-weight__semibold; - } - - .comment-content { - line-height: 1.6; - margin: 0 0 20px; - } - } - - &-view { - .box-content { - .payment-method { - .title { - font-weight: $font-weight__regular; - } - - .content { - margin: 0; - - > strong { - font-weight: $font-weight__regular; - - &:after { - content: ': '; - } - } - } - } - } - } -} - -.order-tracking { - border-bottom: $border-width__base solid $border-color__base; - margin: 0; - padding: 20px 0; - - .tracking-title { - display: inline-block; - } - - .tracking-content { - display: inline-block; - margin: 0 0 0 5px; - } -} - -// -// Guest order view page -// --------------------------------------------- - -[class^='sales-guest-'], -.sales-guest-view { - .column.main { - .block:not(.widget) { - @extend .abs-account-blocks; - } - } -} - -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__s) { - .account { - .order-details-items { - .table-order-items { - .product-item-name, - .price-including-tax, - .price-excluding-tax, - .items-qty { - display: inline-block; - vertical-align: top; - } - } - } - - .toolbar { - @extend .abs-add-clearfix-mobile; - - .pages { - float: right; - } - - .limiter { - clear: both; - } - } - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .table-order-items { - .subtotal, - .amount { - text-align: right; - } - - &.creditmemo { - .col { - &.qty, - &.discount, - &.subtotal { - text-align: center; - } - - &.total { - text-align: right; - } - } - } - } - - .order-actions-toolbar { - .action.print { - display: block; - float: right; - } - } - - .page-title-wrapper { - .order-date { - $order-status-indent: ceil($h1__margin-bottom__desktop / 2); - margin-top: -$order-status-indent; - } - } - - // - // Guest order view page - // --------------------------------------------- - - [class^='sales-guest-'], - .sales-guest-view { - .column.main { - .block:not(.widget) { - .block-content { - @extend .abs-add-clearfix-desktop; - - .box { - @extend .abs-blocks-2columns; - margin-bottom: $indent__base; - } - } - } - } - } -} diff --git a/Magento_SalesRule/styles/_module.scss b/Magento_SalesRule/styles/_module.scss index ce86e39b..2d7179de 100644 --- a/Magento_SalesRule/styles/_module.scss +++ b/Magento_SalesRule/styles/_module.scss @@ -1 +1,10 @@ -@import 'module/common'; +.opc-wrapper { + .form-discount { + max-width: 500px; + .field { + .label { + @extend .abs-visually-hidden; + } + } + } +} diff --git a/Magento_SalesRule/styles/module/_common.scss b/Magento_SalesRule/styles/module/_common.scss deleted file mode 100644 index 2d7179de..00000000 --- a/Magento_SalesRule/styles/module/_common.scss +++ /dev/null @@ -1,10 +0,0 @@ -.opc-wrapper { - .form-discount { - max-width: 500px; - .field { - .label { - @extend .abs-visually-hidden; - } - } - } -} diff --git a/Magento_SendFriend/styles/_module.scss b/Magento_SendFriend/styles/_module.scss index ce86e39b..0776b3e7 100644 --- a/Magento_SendFriend/styles/_module.scss +++ b/Magento_SendFriend/styles/_module.scss @@ -1 +1,29 @@ -@import 'module/common'; +.form.send.friend { + @extend .abs-add-fields; +} + +.action.mailto.friend { + margin-left: -7px; + @include lib-icon-font( + $_icon-font-content: $icon-envelope, + $_icon-font-size: 28px, + $_icon-font-line-height: 28px, + $_icon-font-vertical-align: top + ); + + span { + display: inline-block; + line-height: 28px; + vertical-align: top; + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .form.send.friend { + @extend .abs-add-fields-desktop; + } +} diff --git a/Magento_SendFriend/styles/module/_common.scss b/Magento_SendFriend/styles/module/_common.scss deleted file mode 100644 index cf917098..00000000 --- a/Magento_SendFriend/styles/module/_common.scss +++ /dev/null @@ -1,29 +0,0 @@ -.form.send.friend { - @extend .abs-add-fields; -} - -.action.mailto.friend { - margin-left: -7px; - @include lib-icon-font( - $_icon-font-content : $icon-envelope, - $_icon-font-size : 28px, - $_icon-font-line-height : 28px, - $_icon-font-vertical-align: top - ); - - span { - display: inline-block; - line-height: 28px; - vertical-align: top; - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .form.send.friend { - @extend .abs-add-fields-desktop; - } -} diff --git a/Magento_Theme/styles/_module.scss b/Magento_Theme/styles/_module.scss index 36b4dafb..dcd8959a 100644 --- a/Magento_Theme/styles/_module.scss +++ b/Magento_Theme/styles/_module.scss @@ -1,2 +1,395 @@ -@import 'variables'; -@import 'module/common'; +// +// Theme variables +// _____________________________________________ + +// Messages +$message-global-note__background : $color-yellow-light2; +$message-global-note__border-color : $color-yellow-light3; +$message-global-note__color : $text__color; + +$message-global-note-link__color : $link__color; +$message-global-note-link__color-hover : $link__hover__color; +$message-global-note-link__color-active : $link__active__color; + +$message-global-caution__background : $color-red9; +$message-global-caution__border-color : none; +$message-global-caution__color : $color-white; + +$message-global-caution-link__color : $link__color; +$message-global-caution-link__color-hover : $link__hover__color; +$message-global-caution-link__color-active : $link__active__color; + +// Header +$header__background-color : false; +$header-icons-color : $color-gray56; +$header-icons-color-hover : $color-gray20; + +$addto-color : $text__color__muted; +$addto-hover-color : $primary__color; + +$minicart-icons-color : $header-icons-color; +$minicart-icons-color-hover : $header-icons-color-hover; + +$button__shadow : inset 0 2px 1px rgba(0,0,0,.12); + +$h1__margin-bottom__desktop : $indent__xl; + +// Footer +$footer__background-color : false; + + +body { + @include lib-css(background-color, $page__background-color); +} + +// +// Header +// --------------------------------------------- + +.page-header { + @include lib-css(background-color, $header__background-color); + border-bottom: 1px solid $border-color__base; + margin-bottom: $indent__base; +} + +.header { + &.content { + @extend .abs-add-clearfix; + padding-top: $indent__s; + position: relative; + } +} + +.logo { + float: left; + margin: 0 0 $indent__s $indent__xl; + max-width: 50%; + position: relative; + z-index: 5; + + img { + display: block; + } + + .page-print & { + float: none; + } +} + +.page-main { + > .page-title-wrapper { + .page-title + .action { + margin-top: $indent__l; + } + } +} + +.action.skip { + &:not(:focus) { + @extend .abs-visually-hidden; + } + + &:focus { + @include lib-css(background, $color-gray94); + @include lib-css(padding, $indent__s); + box-sizing: border-box; + left: 0; + position: absolute; + text-align: center; + top: 0; + width: 100%; + z-index: 15; + } +} + +.action-skip-wrapper { + height: 0; + position: relative; +} + +// +// Global notice +// --------------------------------------------- + +.message.global { + p { + margin: 0; + } + + &.noscript, + &.cookie { + @include lib-message($_message-type: global-note); + margin: 0; + } + + &.cookie { + bottom: 0; + left: 0; + position: fixed; + right: 0; + z-index: 3; + + .actions { + margin-top: $indent__s; + } + } + + &.demo { + @include lib-message($_message-type: global-caution); + margin-bottom: 0; + text-align: center; + } +} + +// +// Footer +// --------------------------------------------- + +.page-footer { + @include lib-css(background-color, $footer__background-color); + margin-top: auto; +} + +.footer { + &.content { + border-top: 1px solid $border-color__base; + margin-top: 25px; + padding-bottom: 25px; + padding-top: 25px; + + ul { + @extend .abs-reset-list; + } + + .links { + > li { + margin: 0 0 8px; + } + } + + .switcher-store { + margin: 0 0 30px; + } + } + + .copyright, + .bugs { + display: block; + margin: 20px 0 0; + } +} + +.page-header, +.page-footer { + .switcher { + margin-right: 10px; + + .options { + @include lib-dropdown( + $_dropdown-actions-padding : 0, + $_dropdown-list-item-padding : 0, + $_dropdown-toggle-icon-content : $icon-down, + $_dropdown-toggle-active-icon-content : $icon-up, + $_icon-font-text-hide : true, + $_icon-font-size : 22px, + $_icon-font-line-height : 22px, + $_dropdown-list-min-width : 160px + ); + + ul.dropdown { + a { + display: block; + padding: 8px; + + &:hover { + text-decoration: none; + } + } + } + } + + li { + font-size: $font-size__s; + margin: 0; + } + + .label { + @extend .abs-visually-hidden; + } + + strong { + font-weight: $font-weight__regular; + } + } +} + +// +// Widgets +// --------------------------------------------- + +.sidebar { + .widget.block:not(:last-child), + .widget:not(:last-child) { + @extend .abs-margin-for-blocks-and-widgets; + } +} + +.widget { + clear: both; + + .block-title { + @extend .abs-block-title; + } +} + +.page-header, +.page-footer { + .widget.block { + @include lib-css(margin, $indent__base 0); + } +} + +.no-display { + @extend .abs-no-display; +} + +// +// Calendar +// --------------------------------------------- + +.ui-datepicker { + td { + padding: 0; + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + + html, + body { + height: 100%; // Stretch screen area for sticky footer + } + + .page-wrapper { + @include lib-vendor-prefix-display(flex); + @include lib-vendor-prefix-flex-direction(column); + min-height: 100%; // Stretch content area for sticky footer + + > .breadcrumbs, + > .top-container, + > .widget { + box-sizing: border-box; + width: 100%; + } + + .ie10 &, + .ie11 & { + height: 100%; + } + } + + .navigation ul { + padding: 0 8px; + } + + .header { + &.panel { + > .header.links { + float: right; + font-size: 0; + @include lib-list-inline(); + margin-left: auto; + + > li { + font-size: $font-size__base; + margin: 0 0 0 15px; + + &.welcome, + a { + line-height: 1.4; + } + + &.welcome { + a { + @include lib-css(padding-left, $indent__xs); + } + } + } + } + } + + &.content { + @extend .abs-add-clearfix-desktop; + padding: $indent__l $indent__base 0; + } + } + + .page-header { + border: 0; + margin-bottom: 0; + + .panel.wrapper { + border-bottom: 1px solid $secondary__color; + } + + .header.panel { + @extend .abs-add-clearfix-desktop; + padding-bottom: $indent__s; + padding-top: $indent__s; + } + + .switcher { + display: inline-block; + } + } + + .page-main { + > .page-title-wrapper { + .page-title { + display: inline-block; + } + + .page-title + .action { + float: right; + margin-top: $indent__base; + } + } + } + + .logo { + margin: -8px auto 25px 0; + + img { + max-height: inherit; + } + } + + .footer { + &.content { + .block { + float: right; + } + + .links { + display: inline-block; + margin-bottom: 20px; + padding: 0 50px 0 0; + vertical-align: top; + } + + .switcher.store { + display: inline-block; + padding-right: 50px; + vertical-align: top; + } + } + + .copyright { + @extend .abs-add-clearfix-desktop; + } + } +} diff --git a/Magento_Theme/styles/_variables.scss b/Magento_Theme/styles/_variables.scss deleted file mode 100644 index 119d40b3..00000000 --- a/Magento_Theme/styles/_variables.scss +++ /dev/null @@ -1,31 +0,0 @@ -// -// Theme variables -// _____________________________________________ - -// Messages -$message-global-note__background : $color-yellow-light2 !default; -$message-global-note__border-color : $color-yellow-light3 !default; -$message-global-note__color : $text__color !default; - -$message-global-note-link__color : $link__color !default; -$message-global-note-link__color-hover : $link__hover__color !default; -$message-global-note-link__color-active : $link__active__color !default; - -$message-global-caution__background : $color-red9 !default; -$message-global-caution__border-color : none !default; -$message-global-caution__color : $color-white !default; - -$message-global-caution-link__color : $link__color !default; -$message-global-caution-link__color-hover : $link__hover__color !default; -$message-global-caution-link__color-active: $link__active__color !default; - -// Header -$header__background-color : transparent !default; -$header-icons-color : $color-gray56 !default; -$header-icons-color-hover : $color-gray20 !default; - -$addto-color : $text__color__muted !default; -$addto-hover-color : $primary__color !default; - -// Footer -$footer__background-color : transparent !default; diff --git a/Magento_Theme/styles/module/_common.scss b/Magento_Theme/styles/module/_common.scss deleted file mode 100644 index b47da890..00000000 --- a/Magento_Theme/styles/module/_common.scss +++ /dev/null @@ -1,354 +0,0 @@ -// -// Common -// _____________________________________________ - -body { - background-color: $page__background-color; -} - -// -// Header -// --------------------------------------------- - -.page-header { - background-color: $header__background-color; - border-bottom: 1px solid $border-color__base; - margin-bottom: $indent__base; -} - -.header { - &.content { - @extend .abs-add-clearfix; - padding-top: $indent__s; - position: relative; - } -} - -.logo { - float: left; - margin: 0 0 $indent__s $indent__xl; - max-width: 50%; - position: relative; - z-index: 5; - - img { - display: block; - } - - .page-print & { - float: none; - } -} - -.page-main { - & > .page-title-wrapper { - .page-title + .action { - margin-top: $indent__l; - } - } -} - -.action.skip { - &:not(:focus) { - @extend .abs-visually-hidden; - } - - &:focus { - background: $color-gray94; - padding: $indent__s; - box-sizing: border-box; - left: 0; - position: absolute; - text-align: center; - top: 0; - width: 100%; - z-index: 15; - } -} - -// -// Global notice -// --------------------------------------------- - -.message.global { - p { - margin: 0; - } - - &.noscript, - &.cookie { - @include lib-message($_message-type: global-note); - margin: 0; - } - - &.cookie { - bottom: 0; - left: 0; - position: fixed; - right: 0; - z-index: 3; - - .actions { - margin-top: $indent__s; - } - } - - &.demo { - @include lib-message($_message-type: global-caution); - margin-bottom: 0; - text-align: center; - } -} - -// -// Footer -// --------------------------------------------- - -.page-footer { - background-color: $footer__background-color; - margin-top: auto; -} - -.footer { - &.content { - border-top: 1px solid $border-color__base; - margin-top: 25px; - padding-bottom: 25px; - padding-top: 25px; - - ul { - @extend .abs-reset-list; - } - - .links { - & > li { - margin: 0 0 8px; - } - } - - .switcher-store { - margin: 0 0 30px; - } - } - - .copyright, - .bugs { - display: block; - margin: 20px 0 0; - } -} - -.page-header, -.page-footer { - .switcher { - margin-right: 10px; - - .options { - @include lib-dropdown( - $_dropdown-actions-padding : 0, - $_dropdown-list-item-padding : 0, - $_dropdown-toggle-icon-content : $icon-down, - $_dropdown-toggle-active-icon-content: $icon-up, - $_icon-font-text-hide : true, - $_icon-font-size : 22px, - $_icon-font-line-height : 22px, - $_dropdown-list-min-width : 160px - ); - - ul.dropdown { - a { - display: block; - padding: 8px; - - &:hover { - text-decoration: none; - } - } - } - } - - li { - font-size: $font-size__s; - margin: 0; - } - - .label { - @extend .abs-visually-hidden; - } - - strong { - font-weight: $font-weight__regular; - } - } -} - -// -// Widgets -// --------------------------------------------- - -.sidebar { - .widget.block:not(:last-child), - .widget:not(:last-child) { - @extend .abs-margin-for-blocks-and-widgets; - } -} - -.widget { - clear: both; - - .block-title { - @extend .abs-block-title; - } -} - -.page-header, -.page-footer { - .widget.block { - margin: $indent__base 0; - } -} - -.no-display { - @extend .abs-no-display; -} - -// -// Calendar -// --------------------------------------------- - -.ui-datepicker { - td { - padding: 0; - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - - html, - body { - height: 100%; - } - - .page-wrapper { - display: flex; - flex-direction: column; - min-height: 100%; - - & > .breadcrumbs, - & > .top-container, - & > .widget { - box-sizing: border-box; - width: 100%; - } - - .ie10 &, - .ie11 & { - height: 100%; - } - } - - .navigation ul { - padding: 0 8px; - } - - .header { - &.panel { - & > .header.links { - float: right; - font-size: 0; - @include lib-list-inline(); - margin-left: auto; - - & > li { - font-size: $font-size__base; - margin: 0 0 0 15px; - - &.welcome, - a { - line-height: 1.4; - } - - &.welcome { - a { - padding-left: $indent__xs; - } - } - } - } - } - - &.content { - @extend .abs-add-clearfix-desktop; - padding: $indent__l $indent__base 0; - } - } - - .page-header { - border: 0; - margin-bottom: 0; - - .panel.wrapper { - border-bottom: 1px solid $secondary__color; - } - - .header.panel { - @extend .abs-add-clearfix-desktop; - padding-bottom: $indent__s; - padding-top: $indent__s; - } - - .switcher { - display: inline-block; - } - } - - .page-main { - & > .page-title-wrapper { - .page-title { - display: inline-block; - } - - .page-title + .action { - float: right; - margin-top: $indent__base; - } - } - } - - .logo { - margin: -8px auto 25px 0; - - img { - max-height: inherit; - } - } - - .footer { - &.content { - .block { - float: right; - } - - .links { - display: inline-block; - margin-bottom: 20px; - padding: 0 50px 0 0; - vertical-align: top; - } - - .switcher.store { - display: inline-block; - padding-right: 50px; - vertical-align: top; - } - } - - .copyright { - @include lib-clearfix(); - } - } -} diff --git a/Magento_Vault/styles/_module.scss b/Magento_Vault/styles/_module.scss index ce86e39b..7b3d46d7 100644 --- a/Magento_Vault/styles/_module.scss +++ b/Magento_Vault/styles/_module.scss @@ -1 +1,64 @@ -@import 'module/common'; +.my-credit-cards { + .status { + font-style: italic; + } + + .action.delete { + @include lib-button-reset(); + @include lib-button-as-link(); + } +} + +.my-credit-cards-popup { + .modal-footer { + text-align: right; + } + + .action.secondary { + @include lib-button-reset(); + @include lib-button-as-link(); + margin-right: $indent__base; + } +} + +// +// Mobile $screen__s +// _____________________________________________ + +@include max-screen($screen__m) { + .my-credit-cards { + .table:not(.totals):not(.cart):not(.table-comparison) { + .status { + display: none; + + &:before { + display: none; + } + + &._default { + display: block; + } + } + } + + .card-type { + img { + vertical-align: middle; + } + } + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .my-credit-cards { + .card-type { + img { + display: block; + } + } + } +} diff --git a/Magento_Vault/styles/module/_common.scss b/Magento_Vault/styles/module/_common.scss deleted file mode 100644 index 7b3d46d7..00000000 --- a/Magento_Vault/styles/module/_common.scss +++ /dev/null @@ -1,64 +0,0 @@ -.my-credit-cards { - .status { - font-style: italic; - } - - .action.delete { - @include lib-button-reset(); - @include lib-button-as-link(); - } -} - -.my-credit-cards-popup { - .modal-footer { - text-align: right; - } - - .action.secondary { - @include lib-button-reset(); - @include lib-button-as-link(); - margin-right: $indent__base; - } -} - -// -// Mobile $screen__s -// _____________________________________________ - -@include max-screen($screen__m) { - .my-credit-cards { - .table:not(.totals):not(.cart):not(.table-comparison) { - .status { - display: none; - - &:before { - display: none; - } - - &._default { - display: block; - } - } - } - - .card-type { - img { - vertical-align: middle; - } - } - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .my-credit-cards { - .card-type { - img { - display: block; - } - } - } -} diff --git a/Magento_Weee/styles/_module.scss b/Magento_Weee/styles/_module.scss index ce86e39b..3175b8d7 100644 --- a/Magento_Weee/styles/_module.scss +++ b/Magento_Weee/styles/_module.scss @@ -1 +1,16 @@ -@import 'module/common'; +.minilist { + .weee { + display: table-row; + @include lib-font-size(11); + + &:before { + display: none; + } + } +} + +.price-container.weee { + &:before { + display: none; + } +} diff --git a/Magento_Weee/styles/module/_common.scss b/Magento_Weee/styles/module/_common.scss deleted file mode 100644 index 52054b27..00000000 --- a/Magento_Weee/styles/module/_common.scss +++ /dev/null @@ -1,16 +0,0 @@ -.minilist { - .weee { - display: table-row; - font-size: 11px; - - &:before { - display: none; - } - } -} - -.price-container.weee { - &:before { - display: none; - } -} diff --git a/Magento_Wishlist/styles/_module.scss b/Magento_Wishlist/styles/_module.scss index ce86e39b..5f572522 100644 --- a/Magento_Wishlist/styles/_module.scss +++ b/Magento_Wishlist/styles/_module.scss @@ -1 +1,344 @@ -@import 'module/common'; +.form.wishlist.items { + .actions-toolbar { + @extend .abs-reset-left-margin; + } +} + +.product-info-main, +.product-options-bottom, +.block-bundle-summary { + .action.towishlist { + @extend .abs-action-addto-product; + } +} + +.product-items, +.products.list.items, +.table-comparison { + .action { + &.towishlist { + @extend .abs-actions-addto-gridlist; + @include lib-icon-font-symbol( + $icon-wishlist-empty + ); + } + } +} + +.account .table-wrapper .data.table.wishlist { + @include lib-table-bordered( + $_table_type: horizontal + ); + + thead > tr > th { + border-bottom: 0; + } + + tbody > tr:last-child > td { + border-bottom: 1px solid $table__border-color; + } + + .product.name { + display: inline-block; + margin-bottom: $indent__s; + } + + .box-tocart { + margin: $indent__s 0; + + .qty { + vertical-align: middle; + @extend .abs-input-qty; + } + } + + .col { + &.item { + width: 50%; + } + + &.photo { + max-width: 150px; + } + + &.selector { + max-width: 15px; + } + } + + textarea { + margin: $indent__s 0; + } + + .input-text.qty { + margin-bottom: $indent__s; + } + + .action.primary { + vertical-align: top; + } + + .price { + font-weight: $font-weight__bold; + } +} + +.block-wishlist { + .block-title { + @extend .abs-block-title; + } + + .counter { + @extend .abs-block-items-counter; + } + + .product-item-name { + margin-right: $indent__m; + } +} + +.products-grid.wishlist { + .product { + &-item { + &-photo { + display: block; + margin-bottom: $indent__s; + } + + &-name { + margin-top: 0; + } + + .price-box { + margin: 0; + } + + &-tooltip { + } + + .comment-box { + .label { + @extend .abs-visually-hidden; + } + } + + &-comment { + display: block; + height: 42px; + margin: $indent__s 0; + } + + &-actions { + > * { + margin-right: 15px; + + &:last-child { + margin-right: 0; + } + } + } + + .box-tocart { + input.qty { + height: 32px; + @extend .abs-input-qty; + } + } + } + } +} + +// +// Mobile +// _____________________________________________ + +@include max-screen($screen__s) { + .products-grid.wishlist { + .product-item { + border-bottom: 1px solid $secondary__color; + &:first-child { + border-top: 1px solid $secondary__color; + } + } + } +} + +@include max-screen($screen__m) { + .products-grid.wishlist { + margin-bottom: $indent__l; + margin-right: -$indent__s; + .product { + &-item { + padding: $indent__base $indent__s $indent__base $indent__base; + position: relative; + + &-photo { + float: left; + margin-right: $indent__base; + } + + &-name { + @include lib-font-size(16); + } + + &-actions { + display: block; + + .action { + margin-right: 15px; + + &:last-child { + margin-right: 0; + } + + &.edit { + float: left; + } + + &.delete { + float: right; + } + + &.edit, + &.delete { + margin-top: 7px; + } + } + } + + &-name, + &-description, + .price-box, + &-tooltip { + margin-left: 95px; + } + + .box-tocart { + float: left; + margin-right: $indent__base; + + .stock { + margin-top: 7px; + } + } + + .giftregisty-dropdown, + .field.qty { + display: none; + } + } + + &-image-container { + max-width: 80px; + } + } + } + + // + // Grid view for wishlist + // ----------------------------------------- + + .wishlist-index-index { + .product { + &-item { + width: 100%; + &-info { + width: auto; + } + } + } + } +} + +@include min-screen($screen__s) { + .wishlist-index-index { + .products-grid { + .product-item { + margin-bottom: $indent__base; + } + + .product-item-actions { + margin: 0; + } + } + } +} + +// +// Desktop +// _____________________________________________ + +@include min-screen($screen__m) { + .products-grid.wishlist { + .product { + &-item { + &-tooltip { + display: inline-block; + } + + &-actions { + margin: $indent__s 0 0; + } + + .fieldset { + .field.qty { + margin-bottom: $indent__s; + padding-right: $indent__s; + + .label { + width: auto; + } + } + } + + .box-tocart { + .actions-primary { + margin: 0; + } + + .stock { + margin: $indent__base 0 0; + } + } + } + } + } + + .wishlist-index-index { + .product { + &-item { + &-info { + width: 240px; + } + } + } + + .main { + .form-wishlist-items { + .actions-toolbar { + @extend .abs-reset-left-margin-desktop; + } + } + } + } +} + +@include min-screen($screen__l) { + .wishlist-index-index { + .products-grid { + .product-items { + margin: 0; + } + + .product-item { + margin-left: calc((100% - 4 * 24.439%) / 3); + padding: 0; + width: 24.439%; + + &:nth-child(4n + 1) { + margin-left: 0; + } + } + } + } +} diff --git a/Magento_Wishlist/styles/module/_common.scss b/Magento_Wishlist/styles/module/_common.scss deleted file mode 100644 index c8487260..00000000 --- a/Magento_Wishlist/styles/module/_common.scss +++ /dev/null @@ -1,336 +0,0 @@ -.form.wishlist.items { - .actions-toolbar { - @extend .abs-reset-left-margin; - } -} - -.product-info-main, -.product-options-bottom, -.block-bundle-summary { - .action.towishlist { - @extend .abs-action-addto-product; - } -} - -.products.list.items, -.table-comparison { - .action { - &.towishlist { - @extend .abs-actions-addto-gridlist; - @include lib-icon-font-symbol( $icon-wishlist-empty ); - } - } -} - -.account .table-wrapper .data.table.wishlist { - @include lib-table-bordered( $_table_type: horizontal ); - - thead > tr > th { - border-bottom: 0; - } - - tbody > tr:last-child > td { - border-bottom: 1px solid $table__border-color; - } - - .product.name { - display: inline-block; - margin-bottom: $indent__s; - } - - .box-tocart { - margin: $indent__s 0; - - .qty { - @extend .abs-input-qty; - vertical-align: middle; - } - } - - .col { - &.item { - width: 50%; - } - - &.photo { - max-width: 150px; - } - - &.selector { - max-width: 15px; - } - } - - textarea { - margin: $indent__s 0; - } - - .input-text.qty { - margin-bottom: $indent__s; - } - - .action.primary { - vertical-align: top; - } - - .price { - font-weight: $font-weight__bold; - } -} - -.block-wishlist { - .block-title { - @extend .abs-block-title; - } - - .counter { - @extend .abs-block-items-counter; - } - - .product-item-name { - margin-right: $indent__m; - } -} - -.products-grid.wishlist { - .product { - &-item { - &-photo { - display: block; - margin-bottom: $indent__s; - } - - &-name { - margin-top: 0; - } - - .price-box { - margin: 0; - } - - .comment-box { - .label { - @extend .abs-visually-hidden; - } - } - - &-comment { - display: block; - height: 42px; - margin: $indent__s 0; - } - - &-actions { - & > * { - margin-right: 15px; - - &:last-child { - margin-right: 0; - } - } - } - - .box-tocart { - input.qty { - @extend .abs-input-qty; - height: 32px; - } - } - } - } -} - -// -// Mobile -// _____________________________________________ - -@include max-screen($screen__s) { - .products-grid.wishlist { - .product-item { - border-bottom: 1px solid $secondary__color; - &:first-child { - border-top: 1px solid $secondary__color; - } - } - } -} - -@include max-screen($screen__m) { - .products-grid.wishlist { - margin-bottom: $indent__l; - margin-right: -$indent__s; - .product { - &-item { - padding: $indent__base $indent__s $indent__base $indent__base; - position: relative; - - &-photo { - float: left; - margin-right: $indent__base; - } - - &-name { - font-size: 16px; - } - - &-actions { - display: block; - - .action { - margin-right: 15px; - - &:last-child { - margin-right: 0; - } - - &.edit { - float: left; - } - - &.delete { - float: right; - } - - &.edit, - &.delete { - margin-top: 7px; - } - } - } - - &-name, - &-description, - .price-box, - &-tooltip { - margin-left: 95px; - } - - .box-tocart { - float: left; - margin-right: $indent__base; - - .stock { - margin-top: 7px; - } - } - - .giftregisty-dropdown, - .field.qty { - display: none; - } - } - - &-image-container { - max-width: 80px; - } - } - } - - // - // Grid view for wishlist - // ----------------------------------------- - - .wishlist-index-index { - .product { - &-item { - width: 100%; - &-info { - width: auto; - } - } - } - } -} - -@include min-screen($screen__s) { - .wishlist-index-index { - .products-grid { - .product-item { - margin-bottom: $indent__base; - } - - .product-item-actions { - margin: 0; - } - } - } -} - -// -// Desktop -// _____________________________________________ - -@include min-screen($screen__m) { - .products-grid.wishlist { - .product { - &-item { - &-tooltip { - display: inline-block; - } - - &-actions { - margin: $indent__s 0 0; - } - - .fieldset { - .field.qty { - margin-bottom: $indent__s; - padding-right: $indent__s; - - .label { - width: auto; - } - } - } - - .box-tocart { - .actions-primary { - margin: 0; - } - - .stock { - margin: $indent__base 0 0; - } - } - } - } - } - - .wishlist-index-index { - .product { - &-item { - &-info { - width: 240px; - } - } - } - - .main { - .form-wishlist-items { - .actions-toolbar { - @extend .abs-reset-left-margin-desktop; - } - } - } - } -} - -@include min-screen($screen__l) { - .wishlist-index-index { - .products-grid { - .product-items { - margin: 0; - } - - .product-item { - margin-left: calc((100% - 4 * 24.439%) / 3); - padding: 0; - width: 24.439%; - - &:nth-child(4n + 1) { - margin-left: 0; - } - } - } - } -} diff --git a/styles/_variables.scss b/styles/_variables.scss index 41762c0b..2ef0bbfd 100644 --- a/styles/_variables.scss +++ b/styles/_variables.scss @@ -1,246 +1,92 @@ -// -// Media query -// --------------------------------------------- -// two variable used inside magento 2 to set media query 2 features: -// 1 - "common" options, different in emails and style_l -// 2 - "target" all, desktop or mobile devices -$media-common: true !default; // Sets whether to output common styles (true|false) -$media-target: 'all' !default; // Sets target device for styles output (all|desktop|mobile) - // // Typography // --------------------------------------------- - -// Fonts -$icons__font-path: '../fonts/Blank-Theme-Icons/Blank-Theme-Icons' !default; -$icons__font-name: 'icons-blank-theme' !default; - -// Color nesting -$panel__background-color: $color-gray-light0 !default; -$border-color__base: $color-gray80 !default; -$border-color__light: $color-gray82 !default; - // Headings -$h1__margin-bottom__desktop: $indent__xl !default; -$h3__font-size: 18px !default; -$h3__font-weight: $font-weight__semibold !default; -$h3__margin-top: $indent__base !default; +$h1__margin-bottom__desktop : $indent__xl !default; // // Layout grid // --------------------------------------------- -$total-columns: 12 !default; -$grid-width : ($column-width * $total-columns) + ($gutter-width * ($total-columns - 1)) !default; - -// Variables for layout columns -$layout-column__sidebar-width: 5 !default; - -// Checkout columns width -$layout-column-checkout__width-left: 3 !default; - // Header -$header-icons-color: $color-gray56 !default; -$header-icons-color-hover: $color-gray20 !default; - -// -// Navigation -// --------------------------------------------- - -$navigation__background: $color-gray94 !default; - -$navigation-level0-item__color: $color-gray34 !default; -$navigation-level0-item__text-decoration: none !default; - -// Desktop navigation -$navigation-desktop-level0-item__line-height: 47px !default; - -$submenu-desktop__font-weight: $font-weight__regular !default; -$submenu-desktop-item__active__color: $primary__color !default; +$header-icons-color : $color-gray56 !default; +$header-icons-color-hover : $color-gray20 !default; // // Icons // --------------------------------------------- // -$icon-success: '\e60e' !default; -$icon-error: '\e61f' !default; -$icon-edit: '\e606' !default; -$icon-print: '\e624' !default; -$icon-star-empty: '\e625' !default; -$icon-download: '\e626' !default; -$icon-private: '\e629' !default; -$icon-present: '\e62a' !default; -$icon-gift-registry: '\e62b' !default; - -$icon-calendar__font-size: 23px !default; -$icon-wishlist-empty: inherit !default; -$icon-comment-reflected: inherit !default; -$icon-compare-empty: '\e61f' !default; -$icon-arrow-up-thin: inherit !default; -$icon-arrow-right-thin: inherit !default; -$icon-arrow-left-thin: inherit !default; -$icon-arrow-down-thin: inherit !default; -$icon-wishlist-empty: '\e601' !default; - -// -// Messages -// --------------------------------------------- - -$message__padding: 12px $indent__base 12px $indent__m !default; -$message__line-height: inherit !default; -$message-icon__font-size: 24px !default; -$message-icon__inner-padding-left: 45px !default; -$message-icon__top: 22px !default; -$message-error-icon: $icon-error !default; -$message-success-icon: $icon-success !default; - -// -// Loaders -// --------------------------------------------- - -$loader-overlay__background-color: rgba(255, 255, 255, 0.7) !default; -$loader-overlay__z-index: 9999 !default; - -// -// Forms -// --------------------------------------------- - -// Form fieldset -$form-fieldset-legend__font-size: 18px !default; -$form-fieldset-legend__font-weight: $font-weight__light !default; -$form-fieldset-legend__margin: 0 0 $indent__base !default; -$form-fieldset-legend__padding: 0 0 $indent__s !default; -$form-fieldset-legend__width: 100% !default; - -// Form field -$form-field-type-revert: inherit !default; -$form-field__additional-vertical-indent: $indent__s !default; - -// Form field label -$form-field-label__font-weight: $font-weight__semibold !default; -$form-field-type-label-block__margin: 0 0 8px !default; -$form-field-type-label-inline__width: 25.8% !default; - -// Form field note icon -$form-field-note-icon-font__content: inherit !default; -$form-field-note__color: inherit !default; - -$select__background: $color-white !default; -$form-field--vertical-indent: $indent__base !default; - -// -// Pager -// --------------------------------------------- - -$pager-reset-spaces: true !default; // Reset spaces between inline-block elements -$pager-item__display: inline-block !default; - -// Rating -// --------------------------------------------- - -$rating-icon__font-size: 28px !default; -$rating-icon__letter-spacing: -9px !default; -$rating-icon__active__color: $active__color !default; - -// Split dropdown -$dropdown-list__z-index: 100 !default; - - -// Actions-toolbar -$actions-toolbar-actions__position: justify !default; -$actions-toolbar-actions__reverse: false !default; -$actions-toolbar-actions-primary__margin: 0 15px 0 0 !default; +$icon-edit : '\e606' !default; // // Popups // --------------------------------------------- // Checkout tooltip -$checkout-tooltip-icon-arrow__font-size: 10px !default; -$checkout-tooltip-icon__font-size: 21px !default; - -$checkout-tooltip-content-mobile__right: -($indent__s) !default; -$checkout-tooltip-content-mobile__top: 30px + $checkout-tooltip-icon-arrow__font-size !default; -$checkout-tooltip-content__background-color: $color-gray-light01 !default; -$checkout-tooltip-content__padding: 12px !default; -$checkout-tooltip-content__border-width: 1px !default; - -$checkout-tooltip-content__border-color: $color-gray60 !default; -$checkout-tooltip-content__font-size: $font-size__base !default; -$checkout-tooltip-content__width: 270px !default; -$checkout-tooltip-content__active__border-color: darken($checkout-tooltip-content__border-color, 20%) !default; -$checkout-tooltip-icon-arrow__left: -( $checkout-tooltip-content__padding + $checkout-tooltip-icon-arrow__font-size - $checkout-tooltip-content__border-width) !default; -$checkout-billing-address-details__line-height: 27px !default; - -// Checkout Payment Option icon -$checkout-payment-option-title-icon__font-size: 14px !default; -$checkout-payment-option-title-icon__line-height: 16px !default; -$checkout-payment-option-title-icon__margin: 0 0 0 $indent__s !default; - -// Checkout Sidebar Shipping Information -$checkout-sidebar-shipping-information-edit-icon__content: $icon-edit !default; -$checkout-sidebar-shipping-information-edit-icon__font-size: 18px !default; -$checkout-sidebar-shipping-information-edit-icon__line-height: 20px !default; -$checkout-sidebar-shipping-information-edit-icon__top: $indent__s !default; +$checkout-tooltip-icon-arrow__font-size : 10px !default; +$checkout-tooltip-icon__font-size : 21px !default; -// Checkout -$checkout-step-title__padding: $indent__s !default; -$checkout-step-title__border: $border-width__base solid $color-gray80 !default; -$checkout-step-title__font-size: 26px !default; -$checkout-step-title__font-weight: $font-weight__light !default; -$checkout-sidebar__columns: 4 !default; -$checkout-shipping-address__max-width: 500px !default; +$checkout-tooltip-content-mobile__right : -($indent__s) !default; +$checkout-tooltip-content-mobile__top : 30px + $checkout-tooltip-icon-arrow__font-size !default; +$checkout-tooltip-content__background-color : $color-gray-light01 !default; +$checkout-tooltip-content__padding : 12px !default; +$checkout-tooltip-content__border-width : 1px !default; -// Typography -// --------------------------------------------- +$checkout-tooltip-content__border-color : $color-gray60 !default; +$checkout-tooltip-content__font-size : $font-size__base !default; +$checkout-tooltip-content__width : 270px !default; +$checkout-tooltip-content__active__border-color : darken($checkout-tooltip-content__border-color, 20%) !default; +$checkout-tooltip-icon-arrow__left : -( $checkout-tooltip-content__padding + $checkout-tooltip-icon-arrow__font-size - $checkout-tooltip-content__border-width) !default; -// Fonts -$font-family-name__base: 'Open Sans' !default; -$font-family__base: $font-family-name__base, $font-family__sans-serif !default; +$checkout-billing-address-details__line-height : 27px !default; -// Colors nesting -$page__background-color: $color-white !default; +// Checkout +$checkout-step-title__padding : $indent__s !default; +$checkout-step-title__border : $border-width__base solid $color-gray80 !default; +$checkout-step-title__font-size : 26px !default; +$checkout-step-title__font-weight : $font-weight__light !default; +$checkout-sidebar__columns : 4 !default; +$checkout-shipping-address__max-width : 500px !default; // // Sidebar // --------------------------------------------- // Used in cart sidebar, Checkout sidebar, Tier Prices, My account navigation, Rating block background -$sidebar__background-color: $color-white-smoke !default; - +$sidebar__background-color : $color-white-smoke !default; // // Variables missing in extend.scss // --------------------------------------------- -$addto-color: $primary__color !default; -$addto-hover-color: $link__hover__color !default; +$addto-color : $primary__color !default; +$addto-hover-color : $link__hover__color !default; // // Product // --------------------------------------------- -$product-name-link__color : $text__color !default; -$product-name-link__color__active : $text__color !default; -$product-name-link__color__hover : $text__color !default; -$product-name-link__color__visited : $text__color !default; +$product-name-link__color : $text__color !default; +$product-name-link__color__active : $text__color !default; +$product-name-link__color__hover : $text__color !default; +$product-name-link__color__visited : $text__color !default; -$product-name-link__text-decoration : none !default; -$product-name-link__text-decoration__active : $link__hover__text-decoration !default; -$product-name-link__text-decoration__hover : $link__hover__text-decoration !default; -$product-name-link__text-decoration__visited: $link__hover__text-decoration !default; +$product-name-link__text-decoration : none !default; +$product-name-link__text-decoration__active : $link__hover__text-decoration !default; +$product-name-link__text-decoration__hover : $link__hover__text-decoration !default; +$product-name-link__text-decoration__visited : $link__hover__text-decoration !default; // // Button // --------------------------------------------- -$button__shadow : inset 0 2px 1px rgba(0, 0, 0, 0.12) !default; +$button__shadow : inset 0 2px 1px rgba(0, 0, 0, 0.12) !default; // // Minicart // --------------------------------------------- -$minicart-icons-color : $header-icons-color !default; -$minicart-icons-color-hover : $header-icons-color-hover !default; +$minicart-icons-color : $header-icons-color !default; +$minicart-icons-color-hover : $header-icons-color-hover !default; diff --git a/styles/blocks/components/_modals.scss b/styles/blocks/components/_modals.scss index f5499d0a..7972a9bb 100644 --- a/styles/blocks/components/_modals.scss +++ b/styles/blocks/components/_modals.scss @@ -119,7 +119,6 @@ body { // Modals overlay .modals-overlay { - @extend .abs-modal-overlay; @include lib-css(z-index, $overlay__z-index); } diff --git a/styles/styles.scss b/styles/styles.scss index 8db83493..22d57ccd 100644 --- a/styles/styles.scss +++ b/styles/styles.scss @@ -37,9 +37,7 @@ // Modules @import '../Magento_AdvancedCheckout/styles/module'; -@import '../Magento_AdvancedSearch/styles/module'; @import '../Magento_Braintree/styles/module'; -@import '../Magento_BraintreeTwo/styles/module'; @import '../Magento_Bundle/styles/module'; @import '../Magento_Catalog/styles/module'; @import '../Magento_CatalogEvent/styles/module'; diff --git a/styles/vendor/magento-ui/_icons.scss b/styles/vendor/magento-ui/_icons.scss index e0eff8a3..354d8c85 100644 --- a/styles/vendor/magento-ui/_icons.scss +++ b/styles/vendor/magento-ui/_icons.scss @@ -236,6 +236,16 @@ } } +// +// Url existing check +// --------------------------------------------- + +@mixin _lib-icon-image-url($_path) { + @if $_path != false { + @include lib-css(background-image,url($_path)); + } +} + @mixin _lib-icon-image( $_icon-image, $_icon-image-width, @@ -245,9 +255,7 @@ $_icon-image-position-x, $_icon-image-position-y ) { - @include lib-url-check($_icon-image); - - @include lib-css(background-image, $lib-url-check-output); // $lib-url-check-output is a returned variable of .lib-url-check() mixin + @include _lib-icon-image-url($_icon-image); @include lib-css(background-position-x, $_icon-image-position-x); @include lib-css(background-position-y, $_icon-image-position-y); @include lib-css(line-height, $_icon-image-height); diff --git a/styles/vendor/magento-ui/_tooltips.scss b/styles/vendor/magento-ui/_tooltips.scss index f69cf0a3..9e482e3a 100644 --- a/styles/vendor/magento-ui/_tooltips.scss +++ b/styles/vendor/magento-ui/_tooltips.scss @@ -50,8 +50,8 @@ @include _lib-tooltip-border($_tooltip-border-width, $_tooltip-border-color); - $_tooltip-arrow-after-margin: $_tooltip-arrow-size * -1px; - $_tooltip-arrow-before-margin: ($_tooltip-arrow-size + round($_tooltip-border-width * 1.41421356)) * -1px; + $_tooltip-arrow-after-margin: $_tooltip-arrow-size * -1; + $_tooltip-arrow-before-margin: ($_tooltip-arrow-size + round($_tooltip-border-width * 1.41421356)) * -1; &:after, &:before { diff --git a/styles/vendor/magento-ui/_typography.scss b/styles/vendor/magento-ui/_typography.scss index 11152484..33ad1524 100644 --- a/styles/vendor/magento-ui/_typography.scss +++ b/styles/vendor/magento-ui/_typography.scss @@ -23,7 +23,7 @@ // Rem font size @mixin lib-font-size($sizeValue) { - @if type-of($sizeValue) == number and unit($sizeValue) != '%' and $sizeValue == false { + @if type-of($sizeValue) == number and unit($sizeValue) != '%' and $sizeValue != false { @if unit($sizeValue) == $font-size-unit or unit($sizeValue) == 'em' { @include lib-css(font-size, $sizeValue); } diff --git a/styles/vendor/magento-ui/_utilities.scss b/styles/vendor/magento-ui/_utilities.scss index 1d074664..93f4bd16 100644 --- a/styles/vendor/magento-ui/_utilities.scss +++ b/styles/vendor/magento-ui/_utilities.scss @@ -21,7 +21,7 @@ @function lib-font-size-value($_value) { @if $font-size-unit-convert { @if $_value != false and $_value != '' { - @return strip-unit($_value) / ($font-size-unit-ratio / 100%) * 1#{$font-size-unit}; + @return strip-unit($_value) / $font-size-unit-ratio * 1#{$font-size-unit}; } } @else { @@ -234,17 +234,6 @@ $urls-resolved: false; } } -// -// Url existing check -// --------------------------------------------- - -@mixin lib-url-check($_path) { - $lib-url-check-output: $_path; - @if $_path != false { - $lib-url-check-output: url($_path); - } -} - // // Arrow // --------------------------------------------- diff --git a/styles/vendor/magento-ui/variables/_typography.scss b/styles/vendor/magento-ui/variables/_typography.scss index c63c66f6..83d6aa30 100644 --- a/styles/vendor/magento-ui/variables/_typography.scss +++ b/styles/vendor/magento-ui/variables/_typography.scss @@ -14,21 +14,22 @@ $icons__font-path : "../fonts/Blank-Theme-Icons/Blank-Theme-Icons" $icons__font-name : 'icons-blank-theme' !default; // ToDo UI : we need to rename (it shouldn't use blank theme name) or move icon fonts to blank theme // Font families +$font-family-name__base : 'Open Sans' !default; $font-family__sans-serif : 'Helvetica Neue', Helvetica, Arial, sans-serif !default; $font-family__serif : Georgia, 'Times New Roman', Times, serif !default; $font-family__monospace : Menlo, Monaco, Consolas, 'Courier New', monospace !default; -$font-family__base : $font-family__sans-serif !default; +$font-family__base : $font-family-name__base, $font-family__sans-serif !default; // Sizes $root__font-size : 62.5% !default; // Defines ratio between root font size and base font size, 1rem = 10px $font-size-ratio__base : 1.4 !default; // Defines ratio of the root font-size to the base font-size $font-size-unit : rem !default; // The unit to which most typography values will be converted by default -$font-size-unit-ratio : $root__font-size * 16/100 !default; // Ratio of the root font-size to the font-size unit +$font-size-unit-ratio : $root__font-size * 16 / 100 / 1% !default; // Ratio of the root font-size to the font-size unit $font-size-unit-convert : true !default; // Controls whether font-size values are converted to the specified font-size unit -$font-size__base : $font-size-unit-ratio * $font-size-ratio__base * 1px !default; // Base font size value in px +$font-size__base : $font-size-unit-ratio * $font-size-ratio__base * 1px !default; // Base font size value in px $font-size__xl : ceil(1.5 * $font-size__base) !default; // 21px $font-size__l : ceil(1.25 * $font-size__base) !default; // 18px $font-size__s : ceil(0.85 * $font-size__base) !default; // 12px @@ -164,7 +165,7 @@ $h3__font-family : $heading__font-family__base !default; $h3__font-weight : $heading__font-weight__base !default; $h3__font-style : $heading__font-style__base !default; $h3__line-height : $heading__line-height__base !default; -$h3__margin-top : $indent__base * .75 !default; +$h3__margin-top : $indent__base * 0.75 !default; $h3__margin-bottom : $indent__s !default; $h4__font-size : $font-size__base !default; // 14px @@ -176,7 +177,7 @@ $h4__line-height : $heading__line-height__base !default; $h4__margin-top : $heading__margin-top__base !default; $h4__margin-bottom : $heading__margin-bottom__base !default; -$h5__font-size : ceil(($font-size__base * .85)) !default; // 12px +$h5__font-size : ceil(($font-size__base * 0.85)) !default; // 12px $h5__font-color : $heading__color__base !default; $h5__font-family : $heading__font-family__base !default; $h5__font-weight : $font-weight__bold !default; @@ -185,7 +186,7 @@ $h5__line-height : $heading__line-height__base !default; $h5__margin-top : $heading__margin-top__base !default; $h5__margin-bottom : $heading__margin-bottom__base !default; -$h6__font-size : ceil(($font-size__base * .7)) !default; // 10px +$h6__font-size : ceil(($font-size__base * 0.7)) !default; // 10px $h6__font-color : $heading__color__base !default; $h6__font-family : $heading__font-family__base !default; $h6__font-weight : $font-weight__bold !default; @@ -196,7 +197,7 @@ $h6__margin-bottom : $heading__margin-bottom__base !default; $heading__small-color : $primary__color !default; $heading__small-line-height : 1 !default; -$heading__small-size : ($font-size__xs/$font-size__base) * 100% !default; +$heading__small-size : ($font-size__xs / $font-size__base) * 100% !default; // Code blocks $code__background-color : $panel__background-color !default;