@licklist/design 0.58.6-dev.1 → 0.58.6-dev.10

package/src/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -1,10 +1,52 @@
 .payment_link {
+  padding: 0 0 1rem 0;
+
+  .button-wrapper {
+    top: 2rem;
+    right: 2rem;
+    position: absolute;
+    z-index: 100;
+  }
+
   .page-body {
+    padding: 0;
+    height: calc(100vh - 2rem) !important;
+
+    .navigation {
+      display: block;
+      @include media-breakpoint-down(sm) {
+        padding: 0;
+      }
+    }
+
+    .right-block {
+      margin-left: 0;
+      height: calc(100vh - 2rem);
+      max-height: calc(100vh - 1rem);
+      @include media-breakpoint-down(sm) {
+        width: calc(100% - 2rem);
+        max-width: unset;
+        position: inherit;
+        overflow: visible;
+        margin: 0 1rem 1rem;
+        height: unset;
+        min-height: unset;
+        max-height: 100%;
+      }
+    }
+
     .left-block {
       .left-block-container {
         position: relative;
         max-height: 100%;
 
+        .payment-title {
+          font-size: 0.875rem;
+          font-weight: 600;
+          align-items: center;
+          margin-left: 0.5rem;
+        }
+
         .ryft-payment-form {
           .submit-button-wrapper {
             margin: -1rem 0 1rem;
@@ -13,7 +55,55 @@
               width: 100%;
             }
           }
+          #mobile-pay-divider-container {
+            display: flex;
+            position: relative;
+            margin-bottom: 1rem;
+            #mobile-pay-divider-text {
+              margin-right: 1rem;
+              font-size: 0.875rem;
+              font-weight: 600;
+            }
+            #mobile-pay-divider {
+              width: 100%;
+              border-bottom: 1px #dfdfdf solid;
+              margin-bottom: 0.6rem;
+            }
+          }
 
+          #card-title-container {
+            height: auto;
+            border: none;
+            margin-bottom: 0.5rem;
+            text-align: left;
+            :first-child {
+              font-size: 1rem;
+              font-weight: 600;
+              margin-bottom: 1rem;
+            }
+
+            .form-label {
+              margin-bottom: 0.5rem;
+            }
+          }
+          .mobile-pay-title {
+            display: block;
+            font-weight: 600;
+            font-size: 1rem;
+            color: black;
+            padding: 0;
+            font-style: normal;
+            font-family: inherit;
+            margin-bottom: 1rem;
+          }
+        }
+        .form {
+          .input {
+            border: 2px solid #525252 !important;
+          }
+        }
+
+        .ryft-payment-form {
           @include media-breakpoint-up(md) {
             .submit-button-wrapper {
               max-width: 15.5rem;
@@ -22,10 +112,9 @@
 
           // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
           .ryft-pay-grid {
-            position: absolute !important;
-            top: 10rem;
             width: 100%;
             max-width: 15.5rem;
+            margin-bottom: 1rem;
           }
           .ryft-pay-apple-pay-button {
             border-radius: 0.25rem;
@@ -36,6 +125,36 @@
           display: none !important;
         }
       }
+      @include media-breakpoint-down(sm) {
+        .left-block-container {
+          max-height: 100%;
+          overflow: visible;
+        }
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      flex-direction: column-reverse;
+      overflow: scroll;
+
+      @include media-breakpoint-down(sm) {
+        .left-block {
+          min-height: 100%;
+        }
+        .right-block {
+          margin: 0 auto;
+          width: 100%;
+          .children-wrapper {
+            .accordion {
+              .collapse {
+                overflow: visible;
+                overflow-x: unset;
+                scrollbar-width: unset;
+              }
+            }
+          }
+        }
+      }
     }
   }
   ::-webkit-scrollbar {
@@ -62,3 +181,7 @@
     }
   }
 }
+
+#ryft-threeDSMethodIframe {
+  display: none;
+}