From 2b05ea0736396c932b040bd48e240a5ea13d6d04 Mon Sep 17 00:00:00 2001 From: Kakabay <2kakabayashyrberdyew@gmail.com> Date: Fri, 19 Jul 2024 17:52:32 +0500 Subject: [PATCH] add product to cart popup --- .../Shop/publishable/assets/styles/style.css | 172 ++++++-------- .../TPS/Shop/publishable/pages/index.html | 213 ++++-------------- 2 files changed, 115 insertions(+), 270 deletions(-) diff --git a/packages/TPS/Shop/publishable/assets/styles/style.css b/packages/TPS/Shop/publishable/assets/styles/style.css index dfb64fe17..bfe0b097c 100644 --- a/packages/TPS/Shop/publishable/assets/styles/style.css +++ b/packages/TPS/Shop/publishable/assets/styles/style.css @@ -2011,7 +2011,10 @@ body.no-scroll { color: #c3000e; } -.popup-cart-overlay { +.add-product-overlay { + display: flex; + justify-content: center; + align-items: center; position: fixed; top: 0; left: 0; @@ -2024,159 +2027,105 @@ body.no-scroll { transition: all 0.3s ease-out; } -.popup-cart-overlay.active { +.add-product-overlay.active { pointer-events: all; opacity: 1; } -.popup-cart-content { +.add-product-content { position: relative; + z-index: 30; width: 100%; - max-width: 635px; display: flex; + max-width: 585px; flex-direction: column; - padding: 40px 0 0 40px; + padding: 40px 80px; position: fixed; - top: 0; - right: 0; - height: 100%; - transform: translateX(100%); - transition: all 0.3s ease; + top: 20%; + transition: opacity 0.3s ease; box-shadow: 0 4px 16px 8px rgba(0, 0, 0, 0.3); + background-color: white; + border-radius: 6px; } -.popup-cart-item-list { +.add-product-item-wrapper { + display: flex; + justify-content: flex-start; +} + +.add-product-item { flex: 1 1 auto; - overflow-y: auto; display: flex; flex-direction: column; gap: 20px; - padding-right: 40px; transition: all 0.3s ease-out; } -.popup-cart-item-list::-webkit-scrollbar { - width: 14px; - border-radius: 0; - background-color: transparent; - border: 1px #e6e6e6 solid; -} - -.popup-cart-item-list::-webkit-scrollbar-track-piece { - margin-right: -100px; -} - -.popup-cart-close-btn { +.add-product-close-btn { position: absolute; - top: 10px; - right: 10px; + top: 8px; + right: 8px; cursor: pointer; } -.popup-item-trash { - cursor: pointer; - padding: 6px; -} - -.popup-cart-item-list::-webkit-scrollbar-track { - margin-left: -100px; - border-radius: 0; - background-color: transparent; -} - -.popup-cart-item-list::-webkit-scrollbar-thumb { - position: absolute; - top: 0; - right: 0; - transition: all 0.3s ease-out; - background-color: #e6e6e6; - border-radius: 0; -} - -.popup-cart-item-img { +.add-product-item-img { background-color: #f2f2f2; padding: 10px; border-radius: 6px; margin-right: 20px; + width: 80px; + height: 80px; } -.popup-cart-item-block { +.add-product-item-img img { + width: 60px; + height: 60px; +} + +.add-product-item-block { width: 100%; display: flex; flex-direction: column; gap: 16px; } -.popup-cart-item { +.add-product-item { + width: 100%; display: flex; align-items: center; transition: all 0.3s ease-out; } -.delete-cart-item { - opacity: 0; - height: 0; - pointer-events: none; - transition: all 0.3s ease-out; -} - -.popup-cart-item-header h4 { - font-size: 18px; -} - -.popup-cart-item-header { +.add-product-item-header h4 { + width: 100%; + font-size: 18px; + margin-bottom: 8px; + letter-spacing: -2%; +} + +.add-product-item-header { width: 100%; - display: flex; justify-content: space-between; align-items: center; } -.popup-cart-footer { - padding: 20px 0; +.add-product-item-price { + font-size: 14px; + letter-spacing: -2%; } -.popup-cart-item-price { - font-size: 18px; - font-weight: 700; -} - -.popup-cart-item-counter { - display: flex; - gap: 10px; - padding: 5px 10px; - font-weight: 600; - border-radius: 6px; - background-color: #f2f2f2; -} - -.popup-cart-item-counter div { - padding: 5px 10px; -} - -.popup-cart-item-plus { - cursor: pointer; -} - -.popup-cart-item-minus { - cursor: pointer; -} - -.popup-cart-item-footer { +.add-product-item-footer { font-size: 12px; } -.popup-cart-footer { - padding-right: 40px; -} - -.popup-cart-footer-line { +.add-product-footer-line { width: 100%; height: 1px; background-color: #f2f2f2; - margin: 20px 0; + margin: 16px 0; } -.popup-cart-btn { +.add-product-btn { background-color: #c3000e; font-size: 16px; padding: 20px; @@ -2188,7 +2137,7 @@ body.no-scroll { transition: all 0.3s ease-out; } -.popup-cart-btn:hover { +.add-product-btn:hover { background-color: #a5000b; font-size: 16px; padding: 20px; @@ -2199,17 +2148,32 @@ body.no-scroll { cursor: pointer; } -.popup-cart-overlay.active .popup-cart-content { +.add-product-overlay.active .add-product-content { background-color: #fff; transform: translateX(0%); } -.popup-cart-title { + +.add-product-title { font-size: 28px; + line-height: 120%; font-weight: 700; margin-bottom: 50px; + text-align: center; } -.popup-cart-footer-results { +.add-product-footer { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +} + +.add-product-link { + cursor: pointer; + color: #4e4e4e; +} + +.add-product-footer-results { display: flex; align-items: center; justify-content: space-between; @@ -2217,7 +2181,7 @@ body.no-scroll { font-size: 14px; } -.popup-cart-footer-results div { +.add-product-footer-results div { font-size: 14px; } diff --git a/packages/TPS/Shop/publishable/pages/index.html b/packages/TPS/Shop/publishable/pages/index.html index c8f45d97b..f7501daf3 100644 --- a/packages/TPS/Shop/publishable/pages/index.html +++ b/packages/TPS/Shop/publishable/pages/index.html @@ -2224,145 +2224,49 @@ + + +
+
-