@pmidc/upyog-css 1.1.10 → 1.1.12

package/src/pages/citizen/loaderMessage.scss

@@ -1,296 +1,342 @@
-.loader-message {
-   overflow: hidden;
-   position: relative;
-   height: 100vh;
-   width: 100vw;
-   display: flex;
-   justify-content: center;
-   align-items: center;
-   flex-direction: column;
-   font-weight: 600;
-   font-size: 14px;
-   color: #000;
-}
-
-.loader-message .body {
-   position: absolute;
-   left: 44%;
-   top: 50%;
-   animation: speeder .4s linear infinite;
-}
-
-.loader-message .body>span {
-   height: 5px;
-   width: 35px;
-   background: #0d43a7;
-   position: absolute;
-   top: -19px;
-   left: -40px;
-   border-radius: 2px 10px 1px 0;
-}
-
-.loader-message .base span {
-   position: absolute;
-   width: 0;
-   height: 0;
-   border-top: 6px solid transparent;
-   border-right: 100px solid #000;
-   border-bottom: 6px solid transparent;
-}
-
-.loader-message .base span::before {
-   content: "";
-   height: 22px;
-   width: 22px;
-   border-radius: 50%;
-   background: #0d43a7;
-   position: absolute;
-   right: -110px;
-   top: -16px;
-}
-
-.loader-message .base span::after {
-   content: "";
-   position: absolute;
-   width: 0;
-   height: 0;
-   border-top: 0 solid transparent;
-   border-right: 55px solid #000;
-   border-bottom: 16px solid transparent;
-   top: -16px;
-   right: -98px;
-}
-
-.loader-message .face {
-   position: absolute;
-   height: 12px;
-   width: 20px;
-   background: #0d43a7;
-   border-radius: 20px 20px 0 0;
-   transform: rotate(-40deg);
-   right: -125px;
-   top: -15px;
-}
-
-.loader-message .face::after {
-   content: "";
-   height: 12px;
-   width: 12px;
-   background: #0d43a7;
-   right: 4px;
-   top: 7px;
-   position: absolute;
-   transform: rotate(40deg);
-   transform-origin: 50% 50%;
-   border-radius: 0 0 0 2px;
-}
-
-.loader-message .body>span>span {
-   width: 30px;
-   height: 1px;
-   background: #0d43a7;
-   position: absolute;
-}
-
-.loader-message .body>span>span:nth-child(1) {
-   top: 0;
-   animation: fazer1 .2s linear infinite;
-}
-
-.loader-message .body>span>span:nth-child(2) {
-   top: 3px;
-   animation: fazer2 .4s linear infinite;
-}
-
-.loader-message .body>span>span:nth-child(3) {
-   top: 1px;
-   animation: fazer3 .4s linear infinite;
-   animation-delay: -1s;
-}
-
-.loader-message .body>span>span:nth-child(4) {
-   top: 4px;
-   animation: fazer4 1s linear infinite;
-   animation-delay: -1s;
-}
-
-@keyframes fazer1 {
-   0% {
-      left: 0;
-   }
-
-   100% {
-      left: -80px;
-      opacity: 0;
-   }
-}
-
-@keyframes fazer2 {
-   0% {
-      left: 0;
-   }
-
-   100% {
-      left: -100px;
-      opacity: 0;
-   }
-}
-
-@keyframes fazer3 {
-   0% {
-      left: 0;
-   }
-
-   100% {
-      left: -50px;
-      opacity: 0;
-   }
-}
-
-@keyframes fazer4 {
-   0% {
-      left: 0;
-   }
-
-   100% {
-      left: -150px;
-      opacity: 0;
-   }
-}
-
-@keyframes speeder {
-   0% {
-      transform: translate(2px, 1px) rotate(0deg);
-   }
-
-   10% {
-      transform: translate(-1px, -3px) rotate(-1deg);
-   }
-
-   20% {
-      transform: translate(-2px, 0px) rotate(1deg);
-   }
-
-   30% {
-      transform: translate(1px, 2px) rotate(0deg);
-   }
-
-   40% {
-      transform: translate(1px, -1px) rotate(1deg);
-   }
-
-   50% {
-      transform: translate(-1px, 3px) rotate(-1deg);
-   }
-
-   60% {
-      transform: translate(-1px, 1px) rotate(0deg);
-   }
-
-   70% {
-      transform: translate(3px, 1px) rotate(-1deg);
-   }
-
-   80% {
-      transform: translate(-2px, -1px) rotate(1deg);
-   }
-
-   90% {
-      transform: translate(2px, 1px) rotate(0deg);
-   }
-
-   100% {
-      transform: translate(1px, -2px) rotate(-1deg);
-   }
-}
-
-.loader-message .longfazers {
-   position: absolute;
-   width: 100%;
-   height: 100%;
-}
-
-.loader-message .longfazers span {
-   position: absolute;
-   height: 2px;
-   width: 20%;
-   background: #0d43a7;
-}
-
-.loader-message .longfazers span:nth-child(1) {
-   top: 20%;
-   animation: lf .6s linear infinite;
-   animation-delay: -5s;
-}
-
-.loader-message .longfazers span:nth-child(2) {
-   top: 40%;
-   animation: lf2 .8s linear infinite;
-   animation-delay: -1s;
-}
-
-.loader-message .longfazers span:nth-child(3) {
-   top: 60%;
-   animation: lf3 .6s linear infinite;
-}
-
-.loader-message .longfazers span:nth-child(4) {
-   top: 80%;
-   animation: lf4 .5s linear infinite;
-   animation-delay: -3s;
-}
-
-.loader-message .message {
-   position: absolute;
-   font-family: 'Open Sans', sans-serif;
-   font-weight: 600;
-   font-size: 12px;
-   text-transform: uppercase;
-   left: 44%;
-   top: 58%;
-   margin-left: -20px;
-}
-
-@keyframes lf {
-   0% {
-      left: 200%;
-   }
-
-   100% {
-      left: -200%;
-      opacity: 0;
-   }
-}
-
-@keyframes lf2 {
-   0% {
-      left: 200%;
-   }
-
-   100% {
-      left: -200%;
-      opacity: 0;
-   }
-}
-
-@keyframes lf3 {
-   0% {
-      left: 200%;
-   }
-
-   100% {
-      left: -100%;
-      opacity: 0;
-   }
-}
-
-@keyframes lf4 {
-   0% {
-      left: 200%;
-   }
-
-   100% {
-      left: -100%;
-      opacity: 0;
-   }
+/* ============================================
+   SPACESHIP LOADER - Centered & Responsive
+   ============================================ */
+
+.loader-message {
+   overflow: hidden;
+   position: fixed;
+   top: 0;
+   left: 0;
+   height: 100vh;
+   width: 100vw;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   flex-direction: column;
+   font-weight: 600;
+   font-size: 14px;
+   color: #000;
+   background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 50%, #dbeafe 100%);
+   z-index: 9999;
+}
+
+.loader-message .body {
+   position: relative;
+   animation: speeder .4s linear infinite;
+}
+
+.loader-message .body > span {
+   height: 5px;
+   width: 35px;
+   background: #0d43a7;
+   position: absolute;
+   top: -19px;
+   left: -40px;
+   border-radius: 2px 10px 1px 0;
+}
+
+.loader-message .base span {
+   position: absolute;
+   width: 0;
+   height: 0;
+   border-top: 6px solid transparent;
+   border-right: 100px solid #1e3a5f;
+   border-bottom: 6px solid transparent;
+}
+
+.loader-message .base span::before {
+   content: "";
+   height: 22px;
+   width: 22px;
+   border-radius: 50%;
+   background: #0d43a7;
+   position: absolute;
+   right: -110px;
+   top: -16px;
+}
+
+.loader-message .base span::after {
+   content: "";
+   position: absolute;
+   width: 0;
+   height: 0;
+   border-top: 0 solid transparent;
+   border-right: 55px solid #1e3a5f;
+   border-bottom: 16px solid transparent;
+   top: -16px;
+   right: -98px;
+}
+
+.loader-message .face {
+   position: absolute;
+   height: 12px;
+   width: 20px;
+   background: #0d43a7;
+   border-radius: 20px 20px 0 0;
+   transform: rotate(-40deg);
+   right: -125px;
+   top: -15px;
+}
+
+.loader-message .face::after {
+   content: "";
+   height: 12px;
+   width: 12px;
+   background: #0d43a7;
+   right: 4px;
+   top: 7px;
+   position: absolute;
+   transform: rotate(40deg);
+   transform-origin: 50% 50%;
+   border-radius: 0 0 0 2px;
+}
+
+.loader-message .body > span > span {
+   width: 30px;
+   height: 1px;
+   background: #0d43a7;
+   position: absolute;
+}
+
+.loader-message .body > span > span:nth-child(1) {
+   top: 0;
+   animation: fazer1 .2s linear infinite;
+}
+
+.loader-message .body > span > span:nth-child(2) {
+   top: 3px;
+   animation: fazer2 .4s linear infinite;
+}
+
+.loader-message .body > span > span:nth-child(3) {
+   top: 1px;
+   animation: fazer3 .4s linear infinite;
+   animation-delay: -1s;
+}
+
+.loader-message .body > span > span:nth-child(4) {
+   top: 4px;
+   animation: fazer4 1s linear infinite;
+   animation-delay: -1s;
+}
+
+@keyframes fazer1 {
+   0% {
+      left: 0;
+   }
+   100% {
+      left: -80px;
+      opacity: 0;
+   }
+}
+
+@keyframes fazer2 {
+   0% {
+      left: 0;
+   }
+   100% {
+      left: -100px;
+      opacity: 0;
+   }
+}
+
+@keyframes fazer3 {
+   0% {
+      left: 0;
+   }
+   100% {
+      left: -50px;
+      opacity: 0;
+   }
+}
+
+@keyframes fazer4 {
+   0% {
+      left: 0;
+   }
+   100% {
+      left: -150px;
+      opacity: 0;
+   }
+}
+
+@keyframes speeder {
+   0% {
+      transform: translate(2px, 1px) rotate(0deg);
+   }
+   10% {
+      transform: translate(-1px, -3px) rotate(-1deg);
+   }
+   20% {
+      transform: translate(-2px, 0px) rotate(1deg);
+   }
+   30% {
+      transform: translate(1px, 2px) rotate(0deg);
+   }
+   40% {
+      transform: translate(1px, -1px) rotate(1deg);
+   }
+   50% {
+      transform: translate(-1px, 3px) rotate(-1deg);
+   }
+   60% {
+      transform: translate(-1px, 1px) rotate(0deg);
+   }
+   70% {
+      transform: translate(3px, 1px) rotate(-1deg);
+   }
+   80% {
+      transform: translate(-2px, -1px) rotate(1deg);
+   }
+   90% {
+      transform: translate(2px, 1px) rotate(0deg);
+   }
+   100% {
+      transform: translate(1px, -2px) rotate(-1deg);
+   }
+}
+
+.loader-message .longfazers {
+   position: absolute;
+   width: 100%;
+   height: 100%;
+   top: 0;
+   left: 0;
+   pointer-events: none;
+}
+
+.loader-message .longfazers span {
+   position: absolute;
+   height: 2px;
+   width: 20%;
+   background: linear-gradient(90deg, transparent, #0d43a7, transparent);
+}
+
+.loader-message .longfazers span:nth-child(1) {
+   top: 20%;
+   animation: lf .6s linear infinite;
+   animation-delay: -5s;
+}
+
+.loader-message .longfazers span:nth-child(2) {
+   top: 40%;
+   animation: lf2 .8s linear infinite;
+   animation-delay: -1s;
+}
+
+.loader-message .longfazers span:nth-child(3) {
+   top: 60%;
+   animation: lf3 .6s linear infinite;
+}
+
+.loader-message .longfazers span:nth-child(4) {
+   top: 80%;
+   animation: lf4 .5s linear infinite;
+   animation-delay: -3s;
+}
+
+.loader-message .message {
+   position: absolute;
+   font-family: 'Roboto', 'Open Sans', sans-serif;
+   font-weight: 600;
+   font-size: 16px;
+   text-transform: uppercase;
+   letter-spacing: 2px;
+   bottom: 35%;
+   left: 50%;
+   transform: translateX(-50%);
+   color: #0d43a7;
+   text-align: center;
+   white-space: nowrap;
+}
+
+@keyframes lf {
+   0% {
+      left: 200%;
+   }
+   100% {
+      left: -200%;
+      opacity: 0;
+   }
+}
+
+@keyframes lf2 {
+   0% {
+      left: 200%;
+   }
+   100% {
+      left: -200%;
+      opacity: 0;
+   }
+}
+
+@keyframes lf3 {
+   0% {
+      left: 200%;
+   }
+   100% {
+      left: -100%;
+      opacity: 0;
+   }
+}
+
+@keyframes lf4 {
+   0% {
+      left: 200%;
+   }
+   100% {
+      left: -100%;
+      opacity: 0;
+   }
+}
+
+/* ============================================
+   RESPONSIVE STYLES
+   ============================================ */
+
+/* Tablet */
+@media screen and (max-width: 768px) {
+   .loader-message .body {
+      transform: scale(0.85);
+   }
+   
+   .loader-message .message {
+      font-size: 14px;
+      letter-spacing: 1.5px;
+   }
+   
+   .loader-message .longfazers span {
+      height: 1.5px;
+   }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+   .loader-message .body {
+      transform: scale(0.7);
+   }
+   
+   .loader-message .message {
+      font-size: 12px;
+      letter-spacing: 1px;
+      bottom: 38%;
+   }
+   
+   .loader-message .longfazers span {
+      height: 1px;
+      width: 25%;
+   }
+}
+
+/* Small Mobile */
+@media screen and (max-width: 320px) {
+   .loader-message .body {
+      transform: scale(0.6);
+   }
+   
+   .loader-message .message {
+      font-size: 10px;
+      letter-spacing: 0.5px;
+      bottom: 40%;
+   }
 }

package/src/pages/citizen/payment/payment-type.scss

@@ -1,3 +1,3 @@
-.payment-amount-info{
-    @apply flex justify-between;
+.payment-amount-info{
+    @apply flex justify-between;
 }