From 4dd5e9db1cf355e9cf7022e1f9d5e36f5d0af3c0 Mon Sep 17 00:00:00 2001 From: JSriwongsa Date: Wed, 5 Jul 2023 18:55:47 -0500 Subject: [PATCH] added cart-footer --- ecommerce/fashion_website/pages/page.css | 227 +++++++++++++++++++++- ecommerce/fashion_website/pages/page.html | 134 ++++++++++++- 2 files changed, 353 insertions(+), 8 deletions(-) diff --git a/ecommerce/fashion_website/pages/page.css b/ecommerce/fashion_website/pages/page.css index a00d63d..7f94992 100644 --- a/ecommerce/fashion_website/pages/page.css +++ b/ecommerce/fashion_website/pages/page.css @@ -22,6 +22,9 @@ --shadow: 0px 10px 20px 0px rgb(0 0 0 /20%); --fade: fade-bottom 0.3s cubic-bezier(0.3, 0.5, 0.5, 1) both; } +.grey-color{ + color: grey; +} html{ scroll-behavior: smooth; overflow-x: hidden; @@ -342,7 +345,7 @@ form :where(input, textarea, select)::placeholder{ .search-float.active{ display: block; } -.overlay, .mobile-menu{ +.overlay, .mobile-menu, .cart-menu{ position: fixed; top: 0; left: 0; @@ -363,17 +366,17 @@ form :where(input, textarea, select)::placeholder{ pointer-events: all; } /*---------- mobile navbar ----------*/ -.mobile-menu{ +.mobile-menu, .cart-menu{ pointer-events: none; z-index: 1001; visibility: hidden; opacity: 0; } -.mobile-menu.active{ +.mobile-menu.active, .cart-menu.active{ visibility: visible; opacity: 1; } -.mobile-menu .wrap{ +.mobile-menu .wrap, .cart-menu .wrap{ position: relative; max-width: calc(100% - 40px); width: 360px; @@ -382,10 +385,10 @@ form :where(input, textarea, select)::placeholder{ pointer-events: auto; transition: var(--trabsition-transform); } -.mobile-menu.active .wrap{ +.mobile-menu.active .wrap, .cart-menu.active .wrap{ transform: translateX(0); } -.mobile-menu .close-trigger, .mobile-menu .child-trigger{ +.mobile-menu .close-trigger, .mobile-menu .child-trigger, .cart-menu .close-trigger{ display: flex; position: absolute; top: 0; @@ -397,7 +400,7 @@ form :where(input, textarea, select)::placeholder{ justify-content: center; font-size: 30px; } -.mobile-menu .main-menu{ +.mobile-menu .main-menu, .cart-menu .cart-list{ display: flex; height: 100%; padding: 0 20px; @@ -1043,6 +1046,216 @@ form .button .secondary-btn{ .data-popup.active{ display: block; } +/*---------- cart ----------*/ +.cart-menu .wrap{ + --transX: 100%; + float: right; +} +.cart-menu .close-trigger{ + right: auto; + left: -40px; +} +.cart-menu .wrapper{ + height: 100%; + display: flex; + flex-direction: column; +} +.cart-menu .cart-header{ + padding: 30px 0; +} +.product-list .thumbnail{ + width: 70px; + margin-right: 20px; +} +.product-list li{ + margin-bottom: 30px; +} +.product-list .grouping{ + position: relative; + float: left; + padding-left: 45px; +} +.product-list .quantity{ + position: absolute; + left: 0; + top: 0; + max-width: 30px; +} +.product-list .quantity .control{ + background-color: whitesmoke; +} +.product-list .quantity .control > *{ + border: 0; + outline: 0; + height: 30px; + text-align: center; + background-color: transparent; +} +.product-list .quantity button{ + font-size: 20px; + line-height: initial; + width: 100%; + cursor: pointer; +} +.product-list .variants{ + display: flex; + position: relative; + flex-direction: column; + gap: 2px; +} +.product-list .variants h4{ + line-height: initial; + margin-bottom: 5px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.product-list .variants > div{ + font-size: 14px; + line-height: 1.4; +} +.product-list .variants .item-remove{ + position: absolute; + right: 0; + bottom: 0; +} +.product-list .item-remove{ + color: var(--dark-color); + background-color: var(--based-color); + display: flex; + width: 20px; + height: 20px; + align-items: center; + justify-content: center; +} +.product-list .item-remove:hover{ + color: var(--white-color); + background-color: var(--main-color); +} +.cart-menu .cart-outer > .wrapper{ + height: 100vh; + padding: 0; +} +.cart-menu .cart-footer{ + margin: 0 -20px; + padding: 20px; + background-color: whitesmoke; + margin-top: auto; +} +.cart-footer form{ + position: relative; + margin-bottom: 20px; +} +.cart-footer form .input{ + line-height: 34px; + border: 0; + background-color: var(--white-color); +} +.cart-footer form .submit{ + position: absolute; + top: 10px; + right: 10px; + max-width: 90px; + height: 34px; + line-height: 1; + background-color: var(--main-color); + color: var(--white-color); + padding: 0; + cursor: pointer; +} +.cart-footer form .submit:hover{ + background-color: transparent; + border-color: var(--main-color); + color: var(--dark-color); +} +.cart-footer .button{ + text-align: center; +} +.cart-footer .button .secondary-btn{ + border-radius: 0; + display: block; + margin: 20px 0 10px; + line-height: 50px; + min-width: 240px; +} +.cart-footer .button .secondary-btn:hover{ + background-color: var(--based-color); + color: var(--white-color); + border-color:var(--based-color) ; +} +.cart-footer .pricing ul li{ + position: relative; + display: flex; + justify-content: space-between; +} +.cart-footer .pricing ul ul{ + width: 100%; +} +.cart-footer .pricing ul li span:not(.value), .cart-footer .pricing ul li label{ + color: grey; +} +.cart-footer .pricing ul ul li:not(:first-child){ + padding-left: 20px; +} +.cart-footer .pricing .total{ + font-size: 16px; + font-weight: 600; + margin-top: 10px; + padding-top: 10px; + border-top: 1px solid var(--main-color); +} +.greylink{ + color: inherit; + transition: var(--transition-color); +} +.grey-link:hover{ + color: grey; +} +input.checking{ + position: relative; + padding: 5px; + margin: 0 5px 0 2px; + cursor: pointer; +} +input.checking::after, input.checking::before{ + content: ''; + position: absolute; + display: block; + top: 50%; + left: 50%; +} +input.checking:checked::before{ + border-color: var(--dark-color); +} +input.checking:checked::after{ + transform: translate(-50%, -50%) scale(1); +} +.cart-menu .product-list >.wrapper{ + max-height: 400px; +} + + + +/*--------- scroll --------*/ +.scrollto > .wrapper{ + overflow-x: auto; + overscroll-behavior-inline: contain; + scroll-snap-type: inline mandatory; + overflow-y: hidden; +} +.scrollto .wrapper::-webkit-scrollbar{ + width: 12px; + height: 12px; +} +.scrollto .wrapper::-webkit-scrollbar-thumb{ + --border-color: var(var(--white-color)); + background-color: lightgray; + border: 3px solid var(--border-color); + border-radius: 20px; +} +.scrollto .wrapper::-webkit-scrollbar-thumb{ + background-color: lightgray; +} diff --git a/ecommerce/fashion_website/pages/page.html b/ecommerce/fashion_website/pages/page.html index a32db95..685ef66 100644 --- a/ecommerce/fashion_website/pages/page.html +++ b/ecommerce/fashion_website/pages/page.html @@ -177,7 +177,7 @@
@@ -750,6 +750,138 @@ +
+
+ +
+
+
+
+
+

Shopping cart

+
+
+
+
+ +
+
+
+
+
+
+ + +
+
+
+
    +
  • + Subtotal + +
    • +
      +
    • Shipping
      • +
    • +
      + + +
      + $0.00 +
      • +
    • +
      + + +
      + $9.99 +
      • +
    +
  • + Promotion Discount + -$0.00 +
    • +
  • + Total + $212.00 +
    • +
+
+
+ Checkout + View cart +
+
+
+
+
+
+
+
+