CSR-1390 style PayPal modal.

public/css/README.md

@@ -3,11 +3,11 @@
 This public/css folder uses a standalone .scss > .css setup.
 ## Usage
 
-From a Terminal window, run the Sass Watch command on this folder only:
+From a Terminal window, run the Sass Watch command from the public folder only:
 
 ```bash
-sass --no-source-map --watch public/css/hop-styling.scss:public/css/hop-styling.css
+sass --no-source-map --watch scss:css
 ```
-This will output a CSS file that can be consumed by the Payment page.
+This will compile and output .css files (into the public/css folder) that can be consumed by the Payment page.
 
-# Do not use the .css file on its own. You must use the .scss file and have Sass compile it to the .css file.
+# Do not use the .css files on their own. You must use the .scss files and have Sass compile them to .css files.

public/css/site-2020Styling.css

@@ -0,0 +1,87 @@
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* Style the modal when PayPal button is selected */
+#pageLoadingModal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.35);
+  display: flex;
+}
+#pageLoadingModal .modal-content {
+  margin: auto auto;
+}
+#pageLoadingModal p {
+  margin: 0;
+  text-transform: uppercase;
+  font-size: 14px;
+}
+#pageLoadingModal .modal {
+  display: none;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+}
+#pageLoadingModal .modal-content {
+  position: relative;
+  background-color: #fff;
+  border-radius: 8px;
+  background-clip: padding-box;
+  outline: 0;
+  width: 168px;
+  height: 168px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#pageLoadingModal .modal-content:before, #pageLoadingModal .modal-content:after {
+  content: "";
+  border-radius: 50%;
+  position: absolute;
+  inset: 0;
+  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.25) inset;
+  top: 24px;
+  bottom: 24px;
+  right: 24px;
+  left: 24px;
+}
+#pageLoadingModal .modal-content:after {
+  box-shadow: 0 3px 0 #da291c inset;
+  animation: rotate 1s linear infinite;
+}
+#pageLoadingModal .modal-backdrop {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  background-color: #000000;
+}
+#pageLoadingModal .modal-backdrop.fade {
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.creditCardSpecific {
+  display: none;
+}

public/scss/site-2020Styling.scss

@@ -0,0 +1,91 @@
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
+
+/* Style the modal when PayPal button is selected */
+#pageLoadingModal {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1040;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.35);
+    display: flex;
+
+    .modal-content {
+        margin: auto auto;
+    }
+
+    p {
+        margin: 0;
+        text-transform: uppercase;
+        font-size: 14px;
+    }
+
+    .modal {
+        display: none;
+        overflow: hidden;
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1040;
+        -webkit-overflow-scrolling: touch;
+        outline: 0;
+    }
+
+    .modal-content {
+        position: relative;
+        background-color: #fff;
+        border-radius: 8px;
+        background-clip: padding-box;
+        outline: 0;
+        width: 168px;
+        height: 168px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &:before,
+        &:after {
+            content: '';
+            border-radius: 50%;
+            position: absolute;
+            inset: 0;
+            box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.25) inset;
+            top: 24px;
+            bottom: 24px;
+            right: 24px;
+            left: 24px;
+        }
+        &:after {
+            box-shadow: 0 3px 0 #da291c inset;
+            animation: rotate 1s linear infinite;
+        }
+    }
+
+    .modal-backdrop {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        background-color: #000000;
+        &.fade {
+            opacity: 0;
+            filter: alpha(opacity=0);
+        }
+    }
+}
+
+@keyframes rotate {
+    0% {  transform: rotate(0)}
+    100% { transform: rotate(360deg)}
+}
+
+.creditCardSpecific {
+    display: none;
+}

src/layouts/payment/payment.vue

@@ -85,6 +85,7 @@
         <input type="hidden" name="sgNoKeystrokeProcessing" value="false" />
 
         <input type="hidden" name="maskCharacter" value="*" />
+        <input type="hidden" name="styleSheetCode" :value="dynamicCSSUrl" />
         <input type="hidden" name="styleSheetCode2" :value="dynamicHopCSSUrl" />
 
         <input type="hidden" name="sgReceiptResponseURL" :value="piaResponseUrl" />
@@ -266,6 +267,10 @@ export default {
         });
     },
     computed: {
+        dynamicCSSUrl() {
+            const { protocol, hostname, port } = window.location;
+            return `${protocol}//${hostname}:${port}/fmg/css/site-2020Styling.css`;
+        },
         dynamicHopCSSUrl() {
             const { protocol, hostname, port } = window.location;
             return `${protocol}//${hostname}:${port}/fmg/css/hop-styling.css`;
@@ -488,4 +493,7 @@ export default {
     width: 100%;
     border: 0 none;
 }
+#pageLoadingModal {
+    background-color: red;
+}
 </style>