@zonos/elements 1.0.16

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.css

@@ -0,0 +1,207 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host *::-webkit-scrollbar {
+  width: 10px;
+}
+:host *::-webkit-scrollbar-track {
+  background: var(--amino-gray-50);
+}
+:host *::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+:host *::-webkit-scrollbar-thumb:hover {
+  background: #d6d6d6;
+}
+:host .zonos--content {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  border-radius: var(--border-radius, var(--amino-radius-10));
+}
+:host .zonos--content .zonos--left,
+:host .zonos--content .zonos--right {
+  flex: 1;
+  padding: var(--amino-space-48) var(--amino-space-56);
+}
+:host .zonos--content .zonos--left {
+  background-color: var(--primary-color, var(--amino-gray-0));
+  border-right: 1px solid var(--amino-gray-200);
+}
+:host .zonos--content .zonos--right {
+  background-color: var(--amino-gray-0);
+  padding-bottom: var(--amino-space-80);
+}
+:host .zonos--content .zonos--done {
+  width: 100%;
+  max-height: 100%;
+  height: 100%;
+  overflow: auto;
+  flex-direction: column;
+  background-color: var(--amino-gray-0);
+  align-items: center;
+  justify-content: center;
+  padding: var(--amino-space-24);
+  padding-bottom: 50px;
+}
+:host .zonos--content .zonos--done .zonos--header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+:host .zonos--content .zonos--done .zonos--header img {
+  width: 150px;
+  min-width: 150px;
+}
+:host .zonos--content .zonos--done .zonos--logo {
+  margin-bottom: 0;
+}
+:host .zonos--content .zonos--done zonos-checkout-finish {
+  flex: 1;
+}
+:host .zonos--left {
+  display: flex;
+  flex-direction: column;
+}
+:host .zonos--left .zonos--back-button {
+  margin-bottom: var(--amino-space-24);
+}
+:host .zonos--left .zonos--wrapper {
+  padding: 0 var(--amino-space-8) var(--amino-space-8);
+}
+:host .zonos--left .zonos--payment-error-banner {
+  margin-top: var(--amino-space-24);
+}
+:host .zonos--right {
+  position: relative;
+}
+:host .zonos--right .zonos--close-button {
+  position: absolute;
+  right: var(--amino-space-32);
+  top: var(--amino-space-32);
+}
+:host .zonos--footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: absolute;
+  bottom: var(--amino-space-32);
+  right: var(--amino-space-56);
+  gap: var(--amino-space-8);
+}
+:host .zonos--wrapper {
+  overflow: auto;
+  max-height: 100%;
+  position: relative;
+}
+:host .flex--wrapper {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+}
+:host .zonos--logo {
+  display: flex;
+  align-items: center;
+}
+:host .zonos--checkout-default-message {
+  margin-left: var(--amino-space-76);
+  margin-bottom: var(--amino-space-8);
+}
+
+:host(.preview) {
+  min-width: 500px;
+  margin: auto;
+}
+:host(.preview) .zonos--content {
+  border: var(--amino-border);
+}
+:host(.preview) .zonos--content .zonos--done {
+  padding: var(--amino-space-32);
+}
+
+:host(.mobile) {
+  min-width: auto;
+}
+:host(.mobile) .zonos--content {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  border-radius: 0;
+  max-height: 100%;
+  height: 100%;
+  border: 0;
+}
+:host(.mobile) .zonos--content .zonos--left,
+:host(.mobile) .zonos--content .zonos--right {
+  padding: var(--amino-space-12);
+}
+:host(.mobile) .zonos--content .zonos--left {
+  order: 2;
+}
+:host(.mobile) .zonos--content .zonos--right {
+  order: 1;
+  padding-top: var(--amino-space-16);
+}
+:host(.mobile) .zonos--content .zonos--right .zonos--wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--amino-space-16);
+  margin-top: var(--amino-space-24);
+  border: var(--amino-border);
+  border-radius: var(--border-radius, var(--amino-radius-10));
+  background-color: var(--amino-gray-50);
+  padding: var(--amino-space-12);
+  margin-top: var(--amino-space-32);
+}
+:host(.mobile) .zonos--content .zonos--wrapper {
+  max-height: 100%;
+}
+:host(.mobile) .zonos--content .zonos--footer {
+  order: 3;
+}
+:host(.mobile) .zonos--content .zonos--done {
+  width: auto;
+}
+:host(.mobile) .zonos--cart-subtotal {
+  margin: 0;
+}
+:host(.mobile) .zonos--footer {
+  bottom: 0;
+  left: 0;
+  padding: var(--amino-space-12);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--amino-gray-0);
+}