(add) Support for Modular Checkout

modules/gateways/blockonomics/assets/css/order.css

@@ -1,34 +1,4 @@
 /* ----- Checkout Page Styles ------*/
-[ng\:cloak],
-[ng-cloak],
-[data-ng-cloak],
-[x-ng-cloak],
-.ng-cloak,
-.x-ng-cloak {
-  display: none !important;
-}
-
-.bnomics-order-container {
-  margin: 5vh auto;
-  padding: 8px;
-  max-width: 700px;
-}
-
-.bnomics-progress-bar-container {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 4px;
-  background: #ddd;
-}
-
-.bnomics-progress-bar-container .bnomics-progress-bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 4px;
-  background: #B9B9B9;
-}
 
 .bnomics-order-info {
   display: flex;
@@ -57,33 +27,23 @@
   flex: 2;
 }
 
-.bnomics-powered-by {
-  text-align: center;
-  margin-top: 2.6em;
-  font-size: 0.6em;
-  padding: 0;
+.bnomics-qr-code {
+  display: none;
+}
+
+.no-js .bnomics-qr-code {
+  display: block;
 }
 
 .bnomics-qr-code-hint {
   text-align: center;
-  margin-bottom: 1em;
-  font-size: 0.8em;
-  padding: 0 20px;
+  display: block;
 }
 
 .bnomics-order-number {
   text-transform: uppercase;
 }
 
-.bnomics-time-left {
-  line-height: 3;
-  font-size: 0.8em;
-}
-
-.bnomics-order-id {
-  text-align:right;
-}
-
 .bnomics-bg {
   min-height: 180px;
   padding-top: 5px;
@@ -97,10 +57,6 @@
   text-align: left;
 }
 
-.bnomics-order-expired-wrapper, .bnomics-order-error-wrapper {
-  text-align: center;
-}
-
 .bnomics-amount-input, .bnomics-address-input {
   padding: 2px 4px;
   font-weight: 600;
@@ -142,7 +98,11 @@
 @keyframes errorAnimation {
   to   { width:auto;height: auto; }
 }
-
+/* Style for QR Code in NoJS mode */
+svg {
+  width: 160px;
+  margin: auto;
+}
 /* Mobile */
 @media screen and (max-width: 800px) {
   .bnomics-btc-info {
@@ -208,6 +168,7 @@
 }
 
 .bnomics-select-container {
+/*padding-top is the space above crypto options on the select crypto page*/
   padding-top: 10vh;
   text-align:center;
   max-width:400px;
@@ -233,6 +194,8 @@
   width: 100%;
   text-align: center;
   padding: 20px;
+  animation: errorAnimationSync 0s 3s forwards;
+  -webkit-animation: errorAnimationSync 0s 3s forwards;
 }
 
 .bnomics-spinner {
@@ -251,4 +214,180 @@
 }
 @-webkit-keyframes spin {
   to { -webkit-transform: rotate(360deg); }
-}
+}
+@keyframes errorAnimationSync {
+  to { height: 0; width: 0; overflow: hidden; padding: 0; }
+}
+@-webkit-keyframes errorAnimationSync {
+  to { height: 0; width: 0; overflow: hidden; padding: 0; }
+}
+/** Hide Panels by Default **/
+
+#blockonomics_checkout:not(.no-js) .bnomics-order-container .bnomics-order-panel,
+#blockonomics_checkout:not(.no-js) .bnomics-order-container .bnomics-copy-amount-text,
+#blockonomics_checkout:not(.no-js) .bnomics-order-container .bnomics-copy-address-text {
+  display: none;
+}
+
+/* ----- Blockonomics Font Icons ----*/
+
+@font-face {
+  font-family: 'blockonomics-icons';
+  src: url('../fonts/blockonomics-icons.woff?6m1shn') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="blockonomics-icon-"], [class*=" blockonomics-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'blockonomics-icons' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  margin-left: 2px;
+  margin-right: 2px;
+  font-size: 1.5em;
+}
+
+[class^="blockonomics-icon-"].spin::before, [class*=" blockonomics-icon-"].spin::before {
+  display: inline-block;
+  animation-name: rotate;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.blockonomics-icon-cart::before {
+  content: "\e900";
+}
+
+.blockonomics-icon-qr::before {
+  content: "\e901";
+}
+
+.blockonomics-icon-copy::before {
+  content: "\e902";
+}
+
+.blockonomics-icon-refresh::before {
+  content: "\e903";
+}
+
+.blockonomics-icon-copy,
+.blockonomics-icon-qr,
+.blockonomics-icon-refresh {
+  cursor: pointer;
+}
+
+/* - Blockonomics Font Icons Ends -- */
+
+#bnomics-amount-copy, #bnomics-address-copy {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+#bnomics-show-qr, #bnomics-refresh {
+  padding-left: 5px;
+}
+
+#blockonomics_checkout,
+#blockonomics_checkout h5,
+#blockonomics_checkout table {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#blockonomics_checkout h5,
+#blockonomics_checkout table {
+  width: 100%;
+  max-width: 400px;
+}
+
+#blockonomics_checkout h5 {
+  text-align: left;
+}
+
+#blockonomics_checkout table {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border-collapse: separate;
+  border-spacing: 0 0.5em;
+}
+
+#bnomics-refresh {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.bnomics-copy-container {
+  display:flex;
+  align-items: center;
+  position: relative;
+}
+
+.bnomics-copy-container input {
+  flex-grow: 1;
+}
+
+.bnomics-copy-container-animation-rectangle {
+  position: absolute;
+  width: 100%;
+  transition: width 300ms ease-in-out, left 300ms ease-in-out;
+  content: '';
+  background-color: #fff;
+}
+
+#blockonomics_checkout button {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}
+
+#blockonomics_checkout button img {
+  margin-right: 5px;
+  height: 1rem;
+  width: auto;
+}
+
+#blockonomics_checkout .blockonomics-icon {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+#blockonomics_checkout .bnomics-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bnomics-header div {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.bnomics-crypto-price-timer {
+  display: block;
+  text-align: center;
+  transition: 300ms all ease-in-out;
+}