added cart-footer
This commit is contained in:
JSriwongsa
parent
4f79580501
commit
4dd5e9db1c
2 changed files with 353 additions and 8 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue