@tattvafoundation/upyog-css 1.0.12

package/src/components/bannercomponents.scss

@@ -0,0 +1,137 @@
+.success-wrap,
+.emp-success-wrap {
+  @apply block bg-success w-full text-center text-white pt-md pb-sm mb-md;
+
+  header {
+    @apply block mb-sm font-rc font-bold text-heading-xl;
+  }
+
+  div {
+    img {
+      padding: 13.67px;
+      margin-left: auto;
+      margin-right: auto;
+      @apply border border-solid border-white rounded-full h-16 w-16 bg-white mb-md;
+    }
+
+    svg {
+      padding: 13.67px;
+      margin-left: auto;
+      margin-right: auto;
+      @apply border border-solid border-white rounded-full h-16 w-16 bg-white mb-md;
+    }
+
+    svg.payment-svg {
+      border: unset;
+      background-color: unset;
+      @apply rounded-full;
+    }
+
+    h2 {
+      @apply font-bold text-caption-m mb-sm;
+    }
+
+    p {
+      @apply font-bold text-caption-l;
+    }
+  }
+}
+
+.error-wrap,
+.emp-error-wrap {
+  @apply block bg-error w-full text-center text-white pt-md pb-sm mb-md;
+
+  header {
+    @apply block mb-sm font-rc font-bold text-heading-xl;
+  }
+
+  img {
+    margin-left: auto;
+    margin-right: auto;
+    padding: 13.67px;
+    @apply border border-solid border-white rounded-full bg-white h-16 w-16 mb-md;
+  }
+
+  svg {
+    margin-left: auto;
+    margin-right: auto;
+    padding: 13.67px;
+    @apply border border-solid border-white rounded-full bg-white h-16 w-16 mb-md;
+  }
+}
+
+@screen dt {
+  .success-wrap {
+    width: calc(100%);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+  .emp-success-wrap {
+    width: calc(100%);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+
+  .error-wrap {
+    width: calc(100%);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+
+  .emp-error-wrap {
+    width: calc(100%);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+}
+
+.photos-wrap {
+  max-width: 640px;
+  @apply flex pt-md;
+
+  img {
+    width: calc(33% - 9.333px);
+    margin-right: 14px;
+  }
+
+  svg {
+    width: calc(33% - 9.333px);
+    margin-right: 14px;
+  }
+
+  .last {
+    width: calc(33% - 9.333px);
+  }
+}
+
+.banner {
+  @apply flex justify-center items-center;
+  height: calc(100vh - 80px);
+  position: relative;
+
+  .bannerCard {
+    min-width: 400px;
+  }
+  .bannerLogo {
+    width: 80px;
+    height: 40px;
+    object-fit: contain;
+    padding-right: 10px;
+    margin-right: 10px;
+    border-right: 1px solid #0b0c0c;
+  }
+  .bannerHeader {
+    @apply flex justify-center items-center;
+    margin-bottom: 24px;
+  }
+}
+
+.banner-container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center !important;
+}