03-09-2019

src/app/cart/cart.page.html

@@ -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
@@ -159,3 +161,9 @@
         </div> -->
     </div>
 </ion-content>
+<!-- <div class="loader">
+    <div class="lds-ripple">
+        <div></div>
+        <div></div>
+    </div>
+</div> -->
\ No newline at end of file

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

src/global.scss

@@ -487,3 +487,50 @@ 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