From 70e6abc7886586cea3422488ede0d3d2112dca27 Mon Sep 17 00:00:00 2001 From: Evgeniy Kolesov <ikolesov@ebay.com> Date: Fri, 26 Jun 2015 11:54:35 +0300 Subject: [PATCH] MAGETWO-38645: Add Sliding Panel for Order Summary block on Checkout - CR changes - IE and webkit fixes --- .../web/css/source/components/_modals_extend.less | 1 + .../source/module/checkout/_estimated-total.less | 1 + .../source/module/checkout/_order-summary.less | 5 +++-- lib/web/css/source/components/_modals.less | 15 +++++++++++++++ 4 files changed, 20 insertions(+), 2 deletions(-) diff --git a/app/design/frontend/Magento/blank/web/css/source/components/_modals_extend.less b/app/design/frontend/Magento/blank/web/css/source/components/_modals_extend.less index b123c6cc0e4..e4b01ecd0df 100644 --- a/app/design/frontend/Magento/blank/web/css/source/components/_modals_extend.less +++ b/app/design/frontend/Magento/blank/web/css/source/components/_modals_extend.less @@ -125,6 +125,7 @@ &._show { -webkit-overflow-scrolling: touch; overflow-y: auto; + overflow-x: hidden; } .modal-inner-wrap { .css(background-color, @modal-slide-mobile__background-color); diff --git a/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_estimated-total.less b/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_estimated-total.less index ef38e6bf14b..ccef519f1cb 100644 --- a/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_estimated-total.less +++ b/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_estimated-total.less @@ -35,6 +35,7 @@ .minicart-wrapper { button { + // todo ui: Change .action.showcart to .action-showcart &.action.showcart { .button-reset(); &:before { diff --git a/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_order-summary.less b/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_order-summary.less index b3bf8f87a77..b77969ddddd 100644 --- a/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_order-summary.less +++ b/app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_order-summary.less @@ -174,8 +174,9 @@ } // -// Desktop -//-------------------------------------- +// Desktop +// _____________________________________________ + .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .opc-summary-wrapper { .modal-header { diff --git a/lib/web/css/source/components/_modals.less b/lib/web/css/source/components/_modals.less index c19a66131c9..a57580c8872 100644 --- a/lib/web/css/source/components/_modals.less +++ b/lib/web/css/source/components/_modals.less @@ -46,6 +46,7 @@ &._show { visibility: visible; .modal-inner-wrap { + -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @@ -62,6 +63,7 @@ z-index: @modal-slide__z-index; &._show { .modal-inner-wrap { + -webkit-transform: translateX(0); transform: translateX(0); } } @@ -69,9 +71,11 @@ height: 100%; overflow-y: auto; position: static; + -webkit-transform: translateX(100%); transform: translateX(100%); transition-duration: .3s; transition-timing-function: ease-in-out; + -webkit-transition-property: -webkit-transform, visibility; transition-property: transform, visibility; width: auto; } @@ -83,6 +87,7 @@ z-index: @modal-popup__z-index; &._show { .modal-inner-wrap { + -webkit-transform: translateY(0); transform: translateY(0); } } @@ -95,9 +100,11 @@ right: 0; margin: @modal-popup__indent-vertical auto; position: absolute; + -webkit-transform: translateY(-200%); transform: translateY(-200%); transition-duration: .2s; transition-timing-function: ease; + -webkit-transition-property: -webkit-transform, visibility; transition-property: transform, visibility; width: @modal-popup__width; } @@ -161,8 +168,16 @@ body { // If applied, switching outer popup scroll to inner &._inner-scroll { overflow-y: visible; + .ie10 &, + .ie9 & { + overflow-y: auto; + } .modal-inner-wrap { max-height: 90%; + .ie10 &, + .ie9 & { + max-height: none; + } } .modal-content { overflow-y: auto; -- GitLab