added cart-footer

This commit is contained in:
JSriwongsa 2023-07-05 18:55:47 -05:00
parent 4f79580501
commit 4dd5e9db1c
2 changed files with 353 additions and 8 deletions

View file

@ -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;
}

View file

@ -177,7 +177,7 @@
<div class="list-inline">
<ul>
<li><a href="#0" trigger-button data-target="search-float"><i class='bx bx-search' ></i></a></li>
<li><a href=""><span class="item-floating">0</span><i class='bx bx-shopping-bag' ></i></a></li>
<li><a href="#0" trigger-button data-target="data-cart"><span class="item-floating">2</span><i class='bx bx-shopping-bag' ></i></a></li>
</ul>
</div>
</div>
@ -750,6 +750,138 @@
</div>
</div>
<div id="data-cart" class="cart-menu">
<div class="wrap">
<a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
<div class="scrollto cart-outer">
<div class="wrapper">
<div class="cart-list">
<div class="wrapper">
<div class="cart-header">
<h2>Shopping cart</h2>
</div>
<div class="cart-body scrollto">
<div class="product-list">
<div class="wrapper">
<ul>
<li>
<div class="grouping">
<div class="quantity">
<div class="control">
<button>-</button>
<input type="text" value="1">
<button>+</button>
</div>
</div>
<div class="thumbnail">
<a href="">
<img src="images/on4.jpg" alt="">
</a>
</div>
</div>
<div class="variants">
<h4 class="dot-title"><a href="">Canary Dress</a></h4>
<div class="colcor grey-color">
<span>Color:</span>
<span>Canary yellow</span>
</div>
<div class="size grey-color">
<span>Size:</span>
<span>S</span>
</div>
<div class="price">$103.00</div>
<a href="" class="item-remove">
<i class='bx bx-x'></i>
</a>
</div>
</li>
<li>
<div class="grouping">
<div class="quantity">
<div class="control">
<button>-</button>
<input type="text" value="1">
<button>+</button>
</div>
</div>
<div class="thumbnail">
<a href="">
<img src="images/new4.jpg" alt="">
</a>
</div>
</div>
<div class="variants">
<h4 class="dot-title"><a href="">Sequin-fringer Skirt</a></h4>
<div class="colcor grey-color">
<span>Color:</span>
<span>Buttermilk</span>
</div>
<div class="size grey-color">
<span>Size:</span>
<span>M</span>
</div>
<div class="price">$109.00</div>
<a href="" class="item-remove">
<i class='bx bx-x'></i>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="cart-footer">
<div class="discount">
<form action="">
<input type="text" class="input" placeholder="Discount code">
<input type="submit" value="Apply" class="submit">
</form>
</div>
<div class="pricing">
<ul>
<li>
<span>Subtotal</span>
<span class="value"></span>
</li>
<ul>
<li><span>Shipping</span></li>
<li>
<div>
<input type="radio" class="checking" name="shipping">
<label for="">Free</label>
</div>
<span class="value">$0.00</span>
</li>
<li>
<div>
<input type="radio" class="checking" name="shipping">
<label for="">Flat Rate</label>
</div>
<span class="value">$9.99</span>
</li>
</ul>
<li>
<span>Promotion Discount</span>
<span class="value">-$0.00</span>
</li>
<li class="total">
<span>Total</span>
<span class="value">$212.00</span>
</li>
</ul>
</div>
<div class="button">
<a href="" class="secondary-btn">Checkout</a>
<a href="" class="grey-link">View cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script src="page.js"></script>