diff --git a/src/app/cart/cart.page.html b/src/app/cart/cart.page.html index 35a7e65..8693452 100644 --- a/src/app/cart/cart.page.html +++ b/src/app/cart/cart.page.html @@ -44,7 +44,7 @@ <div class="remove" (click)="removeCount()">-</div> </div> <div class="clear"></div> - </li> + </li> </ul> <div class="total_div" *ngIf="cartService.cartTotal"> <ion-row> @@ -76,7 +76,7 @@ <ion-col size="4" class="p0"> <h6 class="textRight"><strong>A$ {{carts.price}}</strong></h6> </ion-col> - </ion-row> + </ion-row> </ion-grid> <hr> <h5> @@ -99,12 +99,13 @@ <span class="floatRight">CHANGE</span> <div class="clear"></div> </h5> + <p>AfterPay</p> <div class="card_div"> <input class="card_no" placeholder="**** **** **** 1458"> <input class="cv_number" placeholder="CVV"> </div> <div class="after_pay"> - <input class="" placeholder="After Pay"> + Pay Pal </div> <div class="delivery_time"> <ul> @@ -148,8 +149,9 @@ </ion-slides> </div> </div> - <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0" (click)="next(1)"> - CHECKOUT + <div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0"> + <div class="continue" (click)="goToPage('storelist')">CONTINUE SHOPING</div> + <div class="checkout" (click)="next(1)">CHECKOUT</div> </div> <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);"> PAY @@ -158,4 +160,10 @@ FINISH </div> --> </div> -</ion-content> \ No newline at end of file +</ion-content> +<!-- <div class="loader"> + <div class="lds-ripple"> + <div></div> + <div></div> + </div> +</div> --> \ No newline at end of file diff --git a/src/app/cart/cart.page.scss b/src/app/cart/cart.page.scss index b7b2a6d..613939a 100644 --- a/src/app/cart/cart.page.scss +++ b/src/app/cart/cart.page.scss @@ -66,6 +66,13 @@ padding-bottom: 15px; padding-top: 10px; } + p { + margin: 0px; + text-align: left; + color: rgba(41, 40, 91, 1); + padding-bottom: 15px; + padding-top: 15px; + } h6 { margin: 0px; padding: 0px; @@ -109,14 +116,13 @@ } } .after_pay { - height: 50px; - border-bottom: 1px solid rgba(176, 174, 199, 1); - input { - width: 100%; - height: 100%; - padding-left: 20px; - border: none; - } + height: 60px; + border-top: 1px solid #b0aec7; + border-bottom: 1px solid #b0aec7; + color: #b0aec7; + text-align: left; + padding-top: 17px; + margin-top: 25px; } .delivery_time { width: 100%; @@ -216,6 +222,7 @@ height: 100%; object-fit: cover; object-position: center; + border-radius: 8px; } } .cart_detail { @@ -340,6 +347,7 @@ z-index: 999; left: 0px; right: 0px; + box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34); background-color: rgba(41, 40, 91, 1); text-align: center; color: #fff; @@ -349,4 +357,37 @@ border-top-left-radius: 15px; border-top-right-radius: 15px; } + .footer_btnbay { + width: 100%; + box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34); + position: fixed; + bottom: 0px; + z-index: 999; + left: 0px; + right: 0px; + border-radius: 15px; + .continue { + width: 50%; + border-top-left-radius: 15px; + text-align: center; + font-size: 18px; + padding: 15px; + font-weight: 300; + float: left; + border-top: 1px solid #d7d5e4; + border-left: 1px solid #d7d5e4; + } + .checkout { + width: 50%; + border-top-right-radius: 15px; + background-color: rgba(41, 40, 91, 1); + border: 1px solid rgba(41, 40, 91, 1); + text-align: center; + color: #fff; + font-size: 18px; + padding: 15px; + font-weight: 300; + float: right; + } + } } \ No newline at end of file diff --git a/src/global.scss b/src/global.scss index 4534b40..f5d13ea 100644 --- a/src/global.scss +++ b/src/global.scss @@ -486,4 +486,51 @@ app-ordercancelled { ion-header { z-index: 9999 !important; order: 0 !important; +} + +.lds-ripple { + display: inline-block; + position: relative; + width: 64px; + height: 64px; +} + +.lds-ripple div { + position: absolute; + border: 5px solid #29285b; + opacity: 1; + border-radius: 50%; + animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; +} + +.lds-ripple div:nth-child(2) { + animation-delay: -0.5s; +} + +@keyframes lds-ripple { + 0% { + top: 30px; + left: 30px; + width: 0; + height: 0; + opacity: 1; + } + 100% { + top: -1px; + left: -1px; + width: 60px; + height: 60px; + opacity: 0; + } +} + +.loader { + position: fixed; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + padding-top: 50%; + background-color: rgba(273, 273, 273, 0.9); + text-align: center; } \ No newline at end of file