@djb25/digit-ui-css 1.0.45 → 1.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djb25/digit-ui-css",
-  "version": "1.0.45",
+  "version": "1.0.46",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "satyam",

package/src/components/body.scss

@@ -145,7 +145,7 @@ body {
     gap: 12px;
 
     @media (min-width: 768px) {
-      padding-right: 55px;
+      /* padding-right: 55px; // commented by avinash as it was giving padding right in user */
     }
 
     .header {

package/src/components/card.scss

@@ -529,10 +529,8 @@
   flex-direction: column;
   gap: 13px;
   width: 100%;
-  max-height: 180px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
   font-family: inherit;
-  overflow: hidden;
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
 }
 
@@ -735,13 +733,13 @@
 
 .footer-links {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 8px;
   flex: 1;
 }
 
 .pill-link {
-  color: #2563eb;
+  color: rgb(0, 51, 102);
   padding: 6px 14px;
   font-size: 13px;
   font-weight: 500;

package/src/components/topbar.scss

@@ -15,7 +15,6 @@
     width: 100%;
   }
 
-
   .btx {
     display: flex;
     flex-direction: column;
@@ -128,6 +127,28 @@
     }
   }
 
+  @media (max-width: 1280px) {
+    padding: 10px 30px;
+
+    .brand {
+      gap: 8px !important;
+    }
+
+    .brand-mark {
+      width: 42px !important;
+      height: 42px !important;
+    }
+
+    .btx {
+      h1 {
+        font-size: 22px !important;
+      }
+      p {
+        font-size: 9px !important;
+      }
+    }
+  }
+
   @media (max-width: 780px) {
     padding: 10px 16px; // Reduce padding for mobile
 
@@ -281,6 +302,10 @@ video::-webkit-media-controls-panel {
   flex: 1;
   gap: 15px;
 
+  @media (max-width: 1280px) {
+    gap: 10px;
+  }
+
   @media (max-width: 1024px) {
     gap: 8px;
     margin-right: 0px !important;
@@ -371,6 +396,33 @@ video::-webkit-media-controls-panel {
   }
 }
 
+@media (max-width: 1280px) {
+  .user-profile-pill {
+    padding: 4px 12px 4px 4px !important;
+    gap: 8px !important;
+
+    .user-profile-avatar,
+    .user-profile-img {
+      width: 36px !important;
+      height: 36px !important;
+      font-size: 15px !important;
+    }
+
+    .user-profile-info {
+      .user-profile-name {
+        font-size: 13px !important;
+      }
+      .user-profile-details {
+        font-size: 11px !important;
+      }
+    }
+  }
+
+  .topbar img.spect-icon {
+    max-height: 42px !important;
+  }
+}
+
 @media (max-width: 1024px) {
   .user-profile-pill {
     padding: 4px !important;

package/src/pages/citizen/Register.scss

@@ -7,6 +7,9 @@
     padding: 40px 20px;
     font-family: "Roboto", sans-serif;
     width: 100%;
+    @media (max-width: 640px) {
+      padding-top: 86px;
+    }
 
     /* Global overrides for this page */
     .digit-button,
@@ -327,12 +330,16 @@
 .registration__step {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 32px;
   position: relative;
 }
 
-.registration__step:last-child {
-  margin-bottom: 0;
+@media (min-width: 768px) {
+  .registration__step {
+    margin-bottom: 32px;
+  }
+  .registration__step:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .registration__step-line {
@@ -453,6 +460,15 @@
   background: #fff;
 }
 
+.registration__input-group {
+  & select {
+    width: fit-content !important;
+  }
+  & input {
+    width: fit-content !important;
+  }
+}
+
 .registration__select:focus {
   border-color: #3b82f6;
   outline: none;
@@ -710,3 +726,103 @@
 .registration__change-phone-btn:hover {
   text-decoration: underline;
 }
+
+@media (max-width: 768px) {
+  /* WRAPPER */
+  .registration__wrapper {
+    flex-direction: column;
+    border-radius: 12px;
+  }
+
+  /* SIDEBAR */
+  .registration__sidebar {
+    width: 100%;
+    padding: 16px;
+    border-radius: 0;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .registration__sidebar__content {
+    padding: 8px;
+  }
+
+  .registration__sidebar-title {
+    display: none;
+    font-size: 11px;
+    margin-bottom: 16px;
+    text-align: center;
+  }
+
+  /* STEPS CONTAINER */
+  .registration__step {
+    align-items: center;
+  }
+
+  /* LINE (shorter for mobile) */
+  .registration__step-line {
+    left: 14px;
+    height: 32px;
+    top: 28px;
+  }
+
+  /* CIRCLE (smaller) */
+  .registration__step-circle {
+    width: 26px;
+    height: 26px;
+    font-size: 12px;
+  }
+
+  /* TEXT CONTENT */
+  .registration__step-content {
+    margin-left: 12px;
+  }
+
+  .registration__step-label {
+    font-size: 10px;
+  }
+
+  .registration__step-title {
+    font-size: 12px;
+    line-height: 1.3;
+  }
+
+  /* OPTIONAL: make steps scrollable horizontally (premium feel) */
+  .registration__sidebar > div > div:first-child {
+    display: flex;
+    overflow-x: auto;
+    gap: 16px;
+    padding-bottom: 10px;
+  }
+
+  .registration__step {
+    flex: 0 0 auto;
+    min-width: 140px;
+  }
+
+  /* Hide vertical line for horizontal layout */
+  .registration__step-line {
+    display: none;
+  }
+
+  /* FOOTER */
+  .sidebar-footer {
+    display: none;
+    text-align: center;
+    font-size: 9px;
+    margin-top: 12px;
+  }
+
+  /* CONTENT */
+  .registration__content {
+    padding: 20px 16px;
+  }
+
+  .registration__title {
+    font-size: 20px;
+  }
+
+  .registration__description {
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+}

package/src/pages/employee/index.scss

@@ -1002,7 +1002,7 @@
 }
 
 .custom-tab-btn.active {
-  color: #2563eb;
+  color: rgb(0, 51, 102);
   border-bottom-color: #2563eb;
 }
 
@@ -1221,7 +1221,7 @@
   gap: 6px;
   background: transparent;
   border: none;
-  color: #3b82f6;
+  color: rgb(0, 51, 102);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;

package/src/pages/employee/userProfile.scss

@@ -32,7 +32,7 @@
 .profile-image-wrapper {
   &.employee {
     padding: 16px;
-    height: 100%;
+    position: relative;
     width: 100%;
     max-width: 450px;
     aspect-ratio: 1/1;
@@ -120,6 +120,7 @@
 
 @media (min-width: 768px) {
   .login {
+    height: 100%;
     padding-inline: 58px;
   }
 }
@@ -131,10 +132,17 @@
 
 .login {
   .user-profile-wrapper {
-    padding-bottom: 16px;
-    @media (max-width: 768px) {
+    padding-bottom: 24px;
+    @media (min-width: 768px) {
       padding-bottom: 76px;
     }
+    .user-form {
+      flex: 1;
+      width: 100%;
+      @media (min-width: 768px) {
+        overflow-y: scroll;
+      }
+    }
   }
 }
 
@@ -145,10 +153,10 @@
 
   @media (min-width: 768px) {
     flex-direction: row;
-    overflow-y: scroll;
   }
   @media (max-width: 768px) {
     align-items: center;
+    overflow-y: scroll;
   }
 
   .save-btn {
@@ -163,16 +171,18 @@
     border-radius: 0;
     width: 100%;
 
-    @media (max-width: 767px) {
+    @media (max-width: 768px) {
       margin: 24px;
+      margin-top: 0;
       flex-direction: column;
       min-width: unset;
     }
   }
 
   &.citizen {
-    @media (max-width: 767px) {
+    @media (max-width: 768px) {
       margin: 24px;
+      margin-top: 0;
       flex-direction: column;
       min-width: unset;
     }
@@ -203,7 +213,6 @@
   gap: 8px;
 
   &.employee {
-    overflow-y: scroll;
     padding: 24px;
     box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
   }