@pmidc/upyog-css 1.1.4 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pmidc/upyog-css",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "license": "MIT",
   "main": "dist/index.css",
   "engines": {

package/src/components/CardBasedOptions.scss

@@ -1,110 +1,110 @@
-.CardBasedOptions {
-  box-shadow: #32325d14 0px 50px 100px -20px, rgb(0 0 0 / 18%) 0px 30px 60px -30px, #0a254038 0px -2px 6px 0px inset;
-  border-radius: 12px;
-  padding: 0px !important;
-  @apply bg-white mb-md px-sm py-md mx-sm rounded w-full;
-  .headContent {
-    @apply flex justify-between mb-lg;
-    h2 {
-      @apply text-heading-s font-bold text-text-primary;
-    }
-    p {
-      @apply text-link text-primary-main font-medium cursor-pointer;
-    }
-  }
-
-  .mainContent {
-    @apply flex justify-evenly;
-
-    .CardBasedOptionsMainChildOption {
-      width: 25%;
-
-      @apply text-center;
-      margin: auto;
-      .ChildOptionImageWrapper {
-        margin: auto !important;
-        background: #f5fbff;
-        mix-blend-mode: normal;
-        padding-top: 14px;
-        @apply h-12 w-12 rounded-full cursor-pointer;
-        svg {
-          height: 20px;
-          width: 20px;
-          fill: #1359c8;
-          margin: auto;
-        }
-      }
-      .ChildOptionName {
-        font-size: 12px;
-        line-height: 14px;
-        color: #2947a3;
-      }
-    }
-  }
-}
-
-@screen dt {
-  .CardBasedOptions {
-    width: calc(100% - 16px);
-    padding: 0px !important;
-    height: 250px !important;
-  }
-}
-.citizen .ServicesSection .CardBasedOptions:nth-child(odd) {
-  .employeeCustomCard {
-    background-image: url("https://raw.githubusercontent.com/anujkit/msevaImages/refs/heads/main/citizenDashboardImage1.png");
-    background-size: cover;
-  }
-}
-.citizen .ServicesSection .CardBasedOptions:nth-child(even) {
-  .employeeCustomCard {
-    background-image: url("https://raw.githubusercontent.com/anujkit/msevaImages/refs/heads/main/citizenDashBoardImage2.png");
-    background-size: cover;
-  }
-}
-.citizen .employeeCustomCard {
-  border-radius: 10px;
-  background-image: url("https://raw.githubusercontent.com/anujkit/msevaImages/refs/heads/main/citizenDashboardImage1.png");
-  background-size: cover;
-  .employeeCustomCard {
-    border-radius: 10px;
-    background-image: url("https://raw.githubusercontent.com/anujkit/msevaImages/refs/heads/main/citizenDashboardImage1.png");
-    background-size: cover;
-  }
-}
-.employee-card-banner {
-  background-color: white;
-  width: 88%;
-  height: 60%;
-  bottom: 0px;
-  position: absolute;
-  margin-bottom: -10%;
-  left: 6%;
-  box-shadow: 1px 5px 6px 0px #e3e4e3;
-  border-radius: 10px;
-}
-.citizen .employee-card-banner {
-  margin-bottom: -5% !important;
-  height: 65% !important;
-}
-.text-employee-card {
-  font-size: 1.5rem;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  position: absolute;
-  top: 10%;
-  padding-left: 10%;
-  color: white !important;
-}
-.citizen .employee-card-banner .citizenAllServiceGrid {
-  display: flex-root !important;
-  height: 100% !important;
-}
-
-@media screen and (min-width: 300px) {
-  .CardBasedOptions {
-    height: 200px;
-  }
-  .employeeCustomCard {
-    font-size: 1rem;
-  }
-}
+.CardBasedOptions {
+  box-shadow: #32325d14 0px 50px 100px -20px, rgb(0 0 0 / 18%) 0px 30px 60px -30px, #0a254038 0px -2px 6px 0px inset;
+  border-radius: 12px;
+  padding: 0px !important;
+  @apply bg-white mb-md px-sm py-md mx-sm rounded w-full;
+  .headContent {
+    @apply flex justify-between mb-lg;
+    h2 {
+      @apply text-heading-s font-bold text-text-primary;
+    }
+    p {
+      @apply text-link text-primary-main font-medium cursor-pointer;
+    }
+  }
+
+  .mainContent {
+    @apply flex justify-evenly;
+
+    .CardBasedOptionsMainChildOption {
+      width: 25%;
+
+      @apply text-center;
+      margin: auto;
+      .ChildOptionImageWrapper {
+        margin: auto !important;
+        background: #f5fbff;
+        mix-blend-mode: normal;
+        padding-top: 14px;
+        @apply h-12 w-12 rounded-full cursor-pointer;
+        svg {
+          height: 20px;
+          width: 20px;
+          fill: #1359c8;
+          margin: auto;
+        }
+      }
+      .ChildOptionName {
+        font-size: 12px;
+        line-height: 14px;
+        color: #2947a3;
+      }
+    }
+  }
+}
+
+@screen dt {
+  .CardBasedOptions {
+    width: calc(100% - 16px);
+    padding: 0px !important;
+    height: 250px !important;
+  }
+}
+.citizen .ServicesSection .CardBasedOptions:nth-child(odd) {
+  .employeeCustomCard {
+    background-image: url("https://raw.githubusercontent.com/anujkit/msevaImages/refs/heads/main/citizenDashboardImage1.png");
+    background-size: cover;
+  }
+}
+.citizen .ServicesSection .CardBasedOptions:nth-child(even) {
+  .employeeCustomCard {
+    background-image: url("https://raw.githubusercontent.com/anujkit/msevaImages/refs/heads/main/citizenDashBoardImage2.png");
+    background-size: cover;
+  }
+}
+.citizen .employeeCustomCard {
+  border-radius: 10px;
+  background-image: url("https://raw.githubusercontent.com/anujkit/msevaImages/refs/heads/main/citizenDashboardImage1.png");
+  background-size: cover;
+  .employeeCustomCard {
+    border-radius: 10px;
+    background-image: url("https://raw.githubusercontent.com/anujkit/msevaImages/refs/heads/main/citizenDashboardImage1.png");
+    background-size: cover;
+  }
+}
+.employee-card-banner {
+  background-color: white;
+  width: 88%;
+  height: 60%;
+  bottom: 0px;
+  position: absolute;
+  margin-bottom: -10%;
+  left: 6%;
+  box-shadow: 1px 5px 6px 0px #e3e4e3;
+  border-radius: 10px;
+}
+.citizen .employee-card-banner {
+  margin-bottom: -5% !important;
+  height: 65% !important;
+}
+.text-employee-card {
+  font-size: 1.5rem;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  position: absolute;
+  top: 10%;
+  padding-left: 10%;
+  color: white !important;
+}
+.citizen .employee-card-banner .citizenAllServiceGrid {
+  display: flex-root !important;
+  height: 100% !important;
+}
+
+@media screen and (min-width: 300px) {
+  .CardBasedOptions {
+    height: 200px;
+  }
+  .employeeCustomCard {
+    font-size: 1rem;
+  }
+}

package/src/components/CitizenHomeCard.scss

@@ -1,228 +1,228 @@
-.CitizenHomeCard {
-  @apply bg-white mx-md p-md mb-lg shadow-card;
-  border-radius: 8px;
-
-  .header {
-    @apply flex font-bold text-heading-l text-text-primary justify-between pb-sm;
-
-    svg {
-      width: 33px;
-      height: 33px;
-    }
-  }
-
-  .links {
-    @apply text-heading-s text-primary-main;
-
-    a {
-      @apply block pb-sm;
-    }
-  }
-}
-
-@screen dt {
-  .citizenAllServiceGrid {
-    display: flex-root !important;
-    /* @apply grid grid-cols-2 gap-4; */
-  }
-  .links {
-    /* display: grid;
-            grid-template-columns: repeat(4, minmax(0, 1fr));
-            grid-gap: 1px;
-            gap: 1px; */
-  }
-
-  .CitizenHomeCard {
-    padding: 16px !important;
-    margin-right: 16px !important;
-    display: block !important;
-
-    @apply inline-block mr-lg p-lg align-top;
-    .header {
-      @apply pb-lg text-heading-l-dt;
-      svg {
-        @apply w-12 h-12;
-      }
-    }
-
-    .links {
-      a {
-        @apply pb-md;
-      }
-    }
-  }
-}
-
-/* From Uiverse.io by Pradeepsaranbishnoi */
-.wallet {
-  --bg-color: #323c57;
-  --bg-color-light: #94a8df;
-  --text-color-hover: #fff;
-  --box-shadow-color: rgba(206, 178, 252, 0.48);
-
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 1rem;
-  padding: 1rem;
-}
-
-.cardService {
-  width: 100%;
-  max-width: 268px; /* or 250px depending on design */
-  height: 400px; /* let it grow with content if needed */
-  aspect-ratio: 3 / 4; /* Optional: maintain shape */
-  margin: 1rem;
-  background: #fff;
-  border-top-right-radius: 10px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
-  transition: all 0.3s ease-out;
-  text-decoration: none;
-}
-.cardService:hover {
-  transform: translateY(-5px) scale(1.005) translateZ(0);
-  box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11), 0 24px 46px var(--box-shadow-color);
-}
-
-.cardService:hover .overlayService {
-  opacity: 1;
-  transform: scale(4) translateZ(0);
-}
-
-.cardService:hover .circleService {
-  border-color: var(--bg-color-light);
-  background: var(--bg-color);
-}
-
-.cardService:hover .circleService:after {
-  background: var(--bg-color-light);
-}
-
-.cardService:hover p {
-  color: var(--text-color-hover);
-}
-
-.cardService p {
-  font-size: 17px;
-  color: #4c5656;
-  margin-top: 30px;
-  z-index: 1000;
-  transition: color 0.3s ease-out;
-}
-
-.circleService {
-  width: 131px;
-  height: 131px;
-  border-radius: 50%;
-  background: #fff;
-  border: 2px solid var(--bg-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  z-index: 1;
-  transition: all 0.3s ease-out;
-}
-
-.circleService:after {
-  content: "";
-  width: 118px;
-  height: 118px;
-  display: block;
-  position: absolute;
-  background: var(--bg-color);
-  border-radius: 50%;
-  top: 7px;
-  left: 7px;
-  transition: opacity 0.3s ease-out;
-}
-
-.circleService svg {
-  z-index: 10000;
-  transform: translateZ(0);
-}
-
-.overlayService {
-  width: 120px;
-  position: absolute;
-  height: 118px;
-  border-radius: 50%;
-  background: var(--bg-color);
-  top: 70px;
-  left: 50px;
-  z-index: 0;
-  opacity: 0;
-  transition: transform 0.3s ease-out;
-}
-@media (max-width: 1024px) {
-  .cardService {
-    width: 45%;
-  }
-}
-@media (max-width: 768px) {
-  .cardService {
-    width: 90%;
-  }
-
-  .overlayService {
-    top: 60px;
-    left: 40px;
-  }
-
-  .circleService {
-    width: 100px;
-    height: 100px;
-  }
-
-  .circleService:after {
-    width: 88px;
-    height: 88px;
-    top: 6px;
-    left: 6px;
-  }
-}
-
-.card-header {
-  text-align: center;
-  padding-bottom: 5px;
-}
-.card-header h1 {
-  position: relative;
-  padding: 0;
-  margin: 0;
-  font-family: "Raleway", sans-serif;
-  font-weight: 300;
-  font-size: 40px;
-  color: #080808;
-  -webkit-transition: all 0.4s ease 0s;
-  -o-transition: all 0.4s ease 0s;
-  transition: all 0.4s ease 0s;
-}
-.card-header h1:before {
-  width: 28px;
-  height: 5px;
-  display: block;
-  content: "";
-  position: absolute;
-  bottom: 3px;
-  left: 50%;
-  margin-left: -14px;
-  background-color: #b80000;
-}
-.card-header h1:after {
-  width: 100px;
-  height: 1px;
-  display: block;
-  content: "";
-  position: relative;
-  margin-top: 25px;
-  left: 50%;
-  margin-left: -50px;
-  background-color: #b80000;
-}
+.CitizenHomeCard {
+  @apply bg-white mx-md p-md mb-lg shadow-card;
+  border-radius: 8px;
+
+  .header {
+    @apply flex font-bold text-heading-l text-text-primary justify-between pb-sm;
+
+    svg {
+      width: 33px;
+      height: 33px;
+    }
+  }
+
+  .links {
+    @apply text-heading-s text-primary-main;
+
+    a {
+      @apply block pb-sm;
+    }
+  }
+}
+
+@screen dt {
+  .citizenAllServiceGrid {
+    display: flex-root !important;
+    /* @apply grid grid-cols-2 gap-4; */
+  }
+  .links {
+    /* display: grid;
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+            grid-gap: 1px;
+            gap: 1px; */
+  }
+
+  .CitizenHomeCard {
+    padding: 16px !important;
+    margin-right: 16px !important;
+    display: block !important;
+
+    @apply inline-block mr-lg p-lg align-top;
+    .header {
+      @apply pb-lg text-heading-l-dt;
+      svg {
+        @apply w-12 h-12;
+      }
+    }
+
+    .links {
+      a {
+        @apply pb-md;
+      }
+    }
+  }
+}
+
+/* From Uiverse.io by Pradeepsaranbishnoi */
+.wallet {
+  --bg-color: #323c57;
+  --bg-color-light: #94a8df;
+  --text-color-hover: #fff;
+  --box-shadow-color: rgba(206, 178, 252, 0.48);
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.cardService {
+  width: 100%;
+  max-width: 268px; /* or 250px depending on design */
+  height: 400px; /* let it grow with content if needed */
+  aspect-ratio: 3 / 4; /* Optional: maintain shape */
+  margin: 1rem;
+  background: #fff;
+  border-top-right-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s ease-out;
+  text-decoration: none;
+}
+.cardService:hover {
+  transform: translateY(-5px) scale(1.005) translateZ(0);
+  box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11), 0 24px 46px var(--box-shadow-color);
+}
+
+.cardService:hover .overlayService {
+  opacity: 1;
+  transform: scale(4) translateZ(0);
+}
+
+.cardService:hover .circleService {
+  border-color: var(--bg-color-light);
+  background: var(--bg-color);
+}
+
+.cardService:hover .circleService:after {
+  background: var(--bg-color-light);
+}
+
+.cardService:hover p {
+  color: var(--text-color-hover);
+}
+
+.cardService p {
+  font-size: 17px;
+  color: #4c5656;
+  margin-top: 30px;
+  z-index: 1000;
+  transition: color 0.3s ease-out;
+}
+
+.circleService {
+  width: 131px;
+  height: 131px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid var(--bg-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+  transition: all 0.3s ease-out;
+}
+
+.circleService:after {
+  content: "";
+  width: 118px;
+  height: 118px;
+  display: block;
+  position: absolute;
+  background: var(--bg-color);
+  border-radius: 50%;
+  top: 7px;
+  left: 7px;
+  transition: opacity 0.3s ease-out;
+}
+
+.circleService svg {
+  z-index: 10000;
+  transform: translateZ(0);
+}
+
+.overlayService {
+  width: 120px;
+  position: absolute;
+  height: 118px;
+  border-radius: 50%;
+  background: var(--bg-color);
+  top: 70px;
+  left: 50px;
+  z-index: 0;
+  opacity: 0;
+  transition: transform 0.3s ease-out;
+}
+@media (max-width: 1024px) {
+  .cardService {
+    width: 45%;
+  }
+}
+@media (max-width: 768px) {
+  .cardService {
+    width: 90%;
+  }
+
+  .overlayService {
+    top: 60px;
+    left: 40px;
+  }
+
+  .circleService {
+    width: 100px;
+    height: 100px;
+  }
+
+  .circleService:after {
+    width: 88px;
+    height: 88px;
+    top: 6px;
+    left: 6px;
+  }
+}
+
+.card-header {
+  text-align: center;
+  padding-bottom: 5px;
+}
+.card-header h1 {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  font-family: "Raleway", sans-serif;
+  font-weight: 300;
+  font-size: 40px;
+  color: #080808;
+  -webkit-transition: all 0.4s ease 0s;
+  -o-transition: all 0.4s ease 0s;
+  transition: all 0.4s ease 0s;
+}
+.card-header h1:before {
+  width: 28px;
+  height: 5px;
+  display: block;
+  content: "";
+  position: absolute;
+  bottom: 3px;
+  left: 50%;
+  margin-left: -14px;
+  background-color: #b80000;
+}
+.card-header h1:after {
+  width: 100px;
+  height: 1px;
+  display: block;
+  content: "";
+  position: relative;
+  margin-top: 25px;
+  left: 50%;
+  margin-left: -50px;
+  background-color: #b80000;
+}