@djb25/digit-ui-css 1.0.29 → 1.0.31

package/package.json

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

package/src/components/card.scss

@@ -200,6 +200,7 @@
 }
 
 @screen dt {
+
   .submit-bar,
   .submit-bar-disabled {
     width: 240px;
@@ -231,6 +232,10 @@
     }
   }
 
+  .label-field-pair {
+    align-items: center;
+  }
+
   .employeeCard {
     /*  TODO need to revisit that we need mx-md NABEEL/ANIL
      @apply mb-md mx-md !important;
@@ -361,7 +366,7 @@
     }
 
     /* Remove any default margins that might interfere */
-    .label-field-pair > * {
+    .label-field-pair>* {
       margin: 0;
       width: 100%;
     }
@@ -502,7 +507,7 @@
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
 }
 
-.new-employee-card > * {
+.new-employee-card>* {
   position: relative;
   z-index: 1;
 }
@@ -1400,122 +1405,146 @@
 }
 
 @media (max-width: 768px) {
-  .collapsible-sidebar-container + .app-wrapper {
-    padding-top: 60px;
+
+  /* Wrapper becomes a sticky top bar, not a flex column member */
+  .module-sidebar-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 200;
+    width: 100%;
+    height: auto;
+    flex-shrink: 0;
   }
 
-  .collapsible-sidebar-container {
-    width: 0;
-    border-right: none;
-    background: transparent;
+  /* Hide desktop sidebar — zero dimensions so flex row is unaffected */
+  .premium-sidebar {
+    display: none !important;
+    width: 0 !important;
+    min-width: 0 !important;
+    height: 0 !important;
+    overflow: hidden !important;
+    border: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  /* Hide old toggle + backdrop */
+  .module-sidebar-toggle,
+  .module-sidebar-backdrop,
+  .collapse-toggle {
+    display: none !important;
   }
 
-  .module-sidebar-toggle {
+  /* Show the horizontal scrollable tab bar */
+  .mobile-tab-bar {
     display: flex;
-    position: fixed;
-    top: 97px;
-    left: 52px;
-    z-index: 1002;
-    margin: 0;
-    padding: 10px;
-    gap: 10px;
-    max-width: calc(100vw - 32px);
-    border-radius: 999px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    gap: 6px;
+    padding: 8px 12px;
+    background-color: #ffffff;
+    border-bottom: 1px solid #e5e7eb;
+    width: 100%;
+    box-sizing: border-box;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+  }
+
+  .mobile-tab-bar::-webkit-scrollbar {
+    display: none;
   }
 
-  .module-sidebar-toggle-icon {
-    width: 20px;
-    height: 20px;
-    transition: transform 0.2s ease;
+  .mobile-tab-wrapper {
+    flex-shrink: 0;
   }
 
-  .module-sidebar-toggle.open .module-sidebar-toggle-icon {
-    transform: rotate(180deg);
+  .mobile-tab-wrapper a {
+    text-decoration: none;
+    color: inherit;
+    display: block;
   }
 
-  .module-sidebar-toggle-label {
-    display: none;
-    max-width: 60vw;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .mobile-tab-wrapper.disabled {
+    opacity: 0.5;
+    pointer-events: none;
   }
 
-  .module-sidebar-toggle.open .module-sidebar-toggle-label {
-    display: inline;
+  .mobile-tab-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 14px;
+    border-radius: 999px;
+    border: 1px solid #e5e7eb;
+    background-color: #f9fafb;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: all 0.2s ease;
   }
 
-  .module-sidebar-backdrop {
-    display: block;
-    position: fixed;
-    inset: 0;
-    background: rgba(15, 23, 42, 0.35);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-    z-index: 1000;
+  .mobile-tab-item.active {
+    background-color: #eff6ff;
+    border-color: #bfdbfe;
+    color: #1a67a3;
   }
 
-  .module-sidebar-backdrop.open {
-    opacity: 1;
-    pointer-events: auto;
+  .mobile-tab-icon {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
   }
 
-  .premium-sidebar {
-    position: fixed;
-    top: 0;
-    left: -100%;
-    height: 100vh;
-    width: 85vw;
-    max-width: 320px;
-    z-index: 1001;
-    transition: left 0.3s ease;
-    overflow-y: auto;
-    border-right: none;
+  .mobile-tab-icon svg {
+    width: 16px;
+    height: 16px;
   }
 
-  .premium-sidebar.mobile-open {
-    left: 0;
+  .mobile-tab-initial {
+    font-size: 11px;
+    font-weight: 700;
+    color: #6b7280;
   }
 
-  .premium-sidebar .sidebar-header {
-    padding: 16px 20px;
+  .mobile-tab-item.active .mobile-tab-initial {
+    color: #1a67a3;
   }
 
-  .premium-sidebar.collapsed .brand-name,
-  .premium-sidebar.collapsed .nav-text {
-    opacity: 1;
-    width: auto;
-    margin-left: 16px;
-    pointer-events: auto;
+  .mobile-tab-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: #374151;
+    line-height: 1;
   }
 
-  .premium-sidebar.collapsed .sidebar-header {
-    padding: 16px 20px;
-    flex-direction: row;
-    gap: 12px;
-    justify-content: space-between;
+  .mobile-tab-item.active .mobile-tab-label {
+    color: #1a67a3;
+    font-weight: 600;
   }
 
-  .premium-sidebar.collapsed .brand-container {
-    justify-content: flex-start;
+  /* expanded page container stacks vertically */
+  .expanded-page-container {
+    flex-direction: column !important;
+    gap: 0 !important;
+    width: 100% !important;
   }
 
-  .premium-sidebar.collapsed .nav-item-content {
-    justify-content: flex-start;
-    padding: 12px;
-  }
 
-  .collapse-toggle {
-    display: none;
-  }
-  .sidebar-nav {
-    margin-top: 37px;
+  /* expanded sidebar NOT hidden on mobile to allow hamburger menu */
+
+  /* expanded content full width */
+  .expanded-content {
+    width: 100% !important;
+    padding: 16px !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
   }
 }
 
 @media (min-width: 768px) {
-
   .mobile-sidebar-toggle,
   .mobile-close-btn,
   .sidebar-backdrop {
@@ -1540,4 +1569,4 @@
     padding: 20px;
     transition: none;
   }
-}
+}

package/src/index.scss

@@ -117,6 +117,7 @@
 @import "./components/VerticalTimeline.scss";
 @import "./components/juridictions.scss";
 @import "./pages/employee/hrms.scss";
+@import "./pages/employee/userProfile.scss";
 
 .display-none {
   display: none;
@@ -730,6 +731,7 @@ input[type="number"] {
   width: 100%;
   flex: 1;
   min-width: 0;
+  
 }
 
 .employee-app-wrapper {

package/src/pages/employee/login.scss

@@ -1,12 +1,12 @@
 .loginFormStyleEmployee {
   .employeeCard {
-     background-color: transparent !important;
+    background-color: transparent !important;
     .submit-bar {
       @apply w-full;
     }
   }
 }
-.banner .bannerCard{
+.banner .bannerCard {
   min-width: 420px !important;
 }
 .employeeForgotPassword .employeeCard .field .field-container .component-in-front {
@@ -19,10 +19,12 @@
   .employeeForgotPassword .employeeCard .field .field-container .component-in-front {
     padding: 7px;
   }
- .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
+  .loginFormStyleEmployee .employeeCard,
+  .banner .bannerCard {
     min-width: 420px !important;
   }
-  .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
+  .employeeForgotPassword .employeeCard,
+  .employeeChangePassword .employeeCard {
     max-width: 420px !important;
     min-width: 420px !important;
   }
@@ -63,7 +65,8 @@
 .employeeCard .card-sub-header {
   font-size: 24px;
 }
-.loginFormStyleEmployee .employeeCard .card-label, .employeeForgotPassword .employeeCard .card-label{
+.loginFormStyleEmployee .employeeCard .card-label,
+.employeeForgotPassword .employeeCard .card-label {
   font-weight: normal;
   font-size: 16px;
   line-height: 19px;
@@ -73,15 +76,12 @@
 .banner .bannerHeader {
   margin-bottom: 20px;
 }
-.employeeCard .card-label{
+.employeeCard .card-label {
   font-weight: normal;
   font-size: 16px;
   line-height: 19px;
   color: theme(colors.text.primary);
 }
-.profile-label-margin{
-   margin-top: 10px;
-}
 
 .employeeForgotPassword .employeeCard .card-label-desc {
   font-weight: normal;
@@ -114,78 +114,82 @@
   padding-top: 0px !important;
 }
 .banner {
-  height: calc(100vh ) !important;
+  height: calc(100vh) !important;
 }
 
-.employeeChangePassword .employeeCard .field .field-container{
+.employeeChangePassword .employeeCard .field .field-container {
   margin-bottom: 24px;
 }
 
-.employeeForgotPassword .employeeCard  .employee-card-sub-header, .employeeChangePassword .employeeCard  .employee-card-sub-header, .loginFormStyleEmployee .employeeCard .employee-card-sub-header{
+.employeeForgotPassword .employeeCard .employee-card-sub-header,
+.employeeChangePassword .employeeCard .employee-card-sub-header,
+.loginFormStyleEmployee .employeeCard .employee-card-sub-header {
   font-size: 24px !important;
   line-height: 28px !important;
   margin-bottom: 0px !important;
 }
-@media screen and (max-width : 768px){
-  .employeeForgotPassword .employeeCard  .employee-card-sub-header, .employeeChangePassword .employeeCard  .employee-card-sub-header, .loginFormStyleEmployee .employeeCard .employee-card-sub-header{
+@media screen and (max-width: 768px) {
+  .employeeForgotPassword .employeeCard .employee-card-sub-header,
+  .employeeChangePassword .employeeCard .employee-card-sub-header,
+  .loginFormStyleEmployee .employeeCard .employee-card-sub-header {
     font-size: 18px !important;
     line-height: 21px !important;
     margin-bottom: 0px !important;
   }
-  .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
+  .loginFormStyleEmployee .employeeCard,
+  .banner .bannerCard {
     min-width: 340px !important;
     margin: 10px !important;
   }
-  .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
+  .employeeForgotPassword .employeeCard,
+  .employeeChangePassword .employeeCard {
     max-width: 360px !important;
     min-width: 340px !important;
     margin: 10px !important;
   }
 }
-.employeeChangePassword .employeeCard .card-text{
+.employeeChangePassword .employeeCard .card-text {
   margin-top: 18px !important;
   margin-bottom: 20px !important;
 }
-.employeeBackbuttonAlign{
+.employeeBackbuttonAlign {
   display: none;
 }
-.resend-otp{
+.resend-otp {
   cursor: pointer;
 }
 
 .employee-select-wrap.login-city-dd {
-  .options-card{
-  max-height: 200px;
+  .options-card {
+    max-height: 200px;
   }
 }
-@media screen and (max-width: 768px){
-  .employeeBackbuttonAlign{
+@media screen and (max-width: 768px) {
+  .employeeBackbuttonAlign {
     display: block;
     position: absolute;
     top: 20px;
     left: 20px;
   }
-  .banner{
+  .banner {
     align-items: flex-end;
     padding-bottom: 40px;
     height: 100vh !important;
   }
-  
-  .employee .loginContainer{
+
+  .employee .loginContainer {
     padding-top: 0px !important;
   }
-  .removeBottomMargin{
+  .removeBottomMargin {
     margin-bottom: 0px !important;
   }
   .employee-select-wrap.login-city-dd {
-    .options-card{
-    max-height: 160px;
+    .options-card {
+      max-height: 160px;
     }
   }
 }
 
-
-
 @media (max-width: 768px) {
   .modernFinanceUIWelcomeContainer,
   .modernFinanceUIWelcomeContent,
@@ -207,22 +211,21 @@
 }
 
 .loginFormStyleEmployee {
-
   .loginCardSubHeaderClassName {
     text-align: center !important;
   }
   .loginCardClassName {
-     background-color: transparent !important;
-    margin: auto !important; 
+    background-color: transparent !important;
+    margin: auto !important;
     min-width: 408px !important;
-    header.employee-card-sub-header{
+    header.employee-card-sub-header {
       text-align: center;
       margin-top: 10px;
     }
   }
   .buttonClassName {
     max-width: 100% !important;
-    width: 100% !important
+    width: 100% !important;
   }
   .field .field-container .text-input input {
     margin-bottom: 5px !important;
@@ -245,7 +248,7 @@
     margin-right: 10px;
     border-right: 1px solid #0b0c0c;
   }
-  
+
   .primary-label-btn {
     margin: 20px auto 0 auto !important;
   }
@@ -255,7 +258,6 @@
   }
 }
 @media screen and (max-width: 768px) {
-  
   /* remove ALL fixed/min widths */
   .loginCardClassName,
   .employeeCard,