diff --git a/packages/TPS/Shop/publishable/assets/icons/red-trash.svg b/packages/TPS/Shop/publishable/assets/icons/red-trash.svg new file mode 100644 index 000000000..096bc34d7 --- /dev/null +++ b/packages/TPS/Shop/publishable/assets/icons/red-trash.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/packages/TPS/Shop/publishable/assets/images/popup-cart-item-img.png b/packages/TPS/Shop/publishable/assets/images/popup-cart-item-img.png new file mode 100644 index 000000000..dde6462c9 Binary files /dev/null and b/packages/TPS/Shop/publishable/assets/images/popup-cart-item-img.png differ diff --git a/packages/TPS/Shop/publishable/assets/styles/style.css b/packages/TPS/Shop/publishable/assets/styles/style.css index 9bf5a14cb..cfa0ea929 100644 --- a/packages/TPS/Shop/publishable/assets/styles/style.css +++ b/packages/TPS/Shop/publishable/assets/styles/style.css @@ -2010,6 +2010,155 @@ body.no-scroll { color: #c3000e; } +.popup-cart-overlay { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.3); + z-index: 20; + pointer-events: none; + opacity: 0; + transition: all 0.3s ease-out; +} + +.popup-cart-overlay.active { + pointer-events: all; + opacity: 1; +} + +.popup-cart-content { + width: 100%; + max-width: 635px; + display: flex; + flex-direction: column; + padding: 40px 40px 0; + position: fixed; + top: 0; + right: 0; + height: 100%; + transform: translateX(100%); + transition: all 0.3s ease; + box-shadow: 0 4px 16px 8px rgba(0, 0, 0, 0.3); +} + +.popup-cart-item-list { + flex: 1 1 auto; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 20px; +} + +.popup-cart-item-img { + background-color: #f2f2f2; + padding: 10px; + border-radius: 6px; + margin-right: 20px; +} + +.popup-cart-item-block { + width: 100%; + display: flex; + flex-direction: column; + gap: 16px; +} + +.popup-cart-item { + display: flex; + align-items: center; +} + +.popup-cart-item-header h4 { + font-size: 18px; +} + +.popup-cart-item-header { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.popup-cart-footer { + padding: 20px 0; +} + +.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-footer { + font-size: 12px; +} + +.popup-cart-footer-line { + width: 100%; + height: 1px; + background-color: #f2f2f2; + margin: 20px 0; +} + +.popup-cart-btn { + background-color: #c3000e; + font-size: 16px; + padding: 20px; + border-radius: 6px; + color: #fff; + border: 0; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease-out; +} + +.popup-cart-btn:hover { + background-color: #a5000b; + font-size: 16px; + padding: 20px; + border-radius: 6px; + color: #fff; + border: 0; + font-weight: 600; + cursor: pointer; +} + +.popup-cart-overlay.active .popup-cart-content { + background-color: #fff; + transform: translateX(0%); +} +.popup-cart-title { + font-size: 28px; + font-weight: 700; + margin-bottom: 50px; +} + +.popup-cart-footer-results { + display: flex; + align-items: center; + justify-content: space-between; + color: #4e4e4e; + font-size: 14px; +} + +.popup-cart-footer-results div { + font-size: 14px; +} + .review-details { width: 100%; display: flex; diff --git a/packages/TPS/Shop/publishable/pages/index.html b/packages/TPS/Shop/publishable/pages/index.html index 7d2acde3f..9400ace9f 100644 --- a/packages/TPS/Shop/publishable/pages/index.html +++ b/packages/TPS/Shop/publishable/pages/index.html @@ -2096,9 +2096,6 @@

Закрыть окно

- - - @@ -2228,6 +2225,57 @@ + + + + @@ -2236,7 +2284,7 @@