@djb25/digit-ui-css 1.0.31 → 1.0.33

package/src/components/staticSideBar.scss

@@ -44,10 +44,12 @@
   flex-direction: column;
   gap: 8px;
   padding: 10px 8px 14px;
-  transition: width 0.3s ease, box-shadow 0.3s ease;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
- 
+  position: relative;
+  z-index: 101;
   padding-top: 56px;
+  height: 100vh;
 }
 
 .citizen-static-sidebar.expanded {
@@ -129,6 +131,7 @@
   border: 1px solid #eef2f7;
   flex: 1;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .citizen-static-sidebar .drawer-desktop .sidebar-list {
@@ -137,7 +140,7 @@
 
 .citizen-static-sidebar .drawer-desktop .sidebar-list.active {
   border-left: none;
-  background: #eef6ff;
+
   border-radius: 12px;
   padding-left: 4px;
 }
@@ -156,7 +159,7 @@
   float: none;
 }
 
-.citizen-static-sidebar .drawer-desktop .menu-item .icon + .menu-label {
+.citizen-static-sidebar .drawer-desktop .menu-item .icon+.menu-label {
   margin-left: 0;
 }
 
@@ -194,10 +197,10 @@
   align-items: center;
   width: 100%;
   padding: 10px 0;
+  margin-left: 7px;
 }
 
 .citizen-static-sidebar.collapsed .drawer-desktop .sidebar-list.active {
-  background: #e0efff;
   padding: 6px 4px;
 }
 
@@ -226,8 +229,109 @@
   display: none;
 }
 
+.citizen-mobile-toggle {
+  display: none;
+}
+
+.citizen-sidebar-backdrop {
+  display: none;
+}
+
 @media (max-width: 780px) {
   .citizen-sidebar-toggle {
     display: none;
   }
-}
+
+  .citizen-mobile-toggle {
+    display: flex;
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 50;
+    height: 48px;
+    padding: 0 24px;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    border-radius: 999px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    box-shadow: 0 8px 32px rgba(30, 58, 138, 0.15), 0 2px 8px rgba(30, 58, 138, 0.1);
+    color: #1e3a8a;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    .toggle-label {
+      font-size: 14px;
+      font-weight: 700;
+      letter-spacing: 0.5px;
+    }
+
+    &:active {
+      transform: translateX(-50%) scale(0.95);
+    }
+  }
+
+  .citizen-mobile-toggle.hidden {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(-50%) translateY(20px) scale(0.9);
+  }
+
+  .citizen-sidebar-backdrop {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    z-index: 99;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.4s ease;
+  }
+
+  .citizen-sidebar-backdrop.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .citizen-static-sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 280px !important;
+    transform: translateX(-100%);
+    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
+  }
+
+  .citizen-static-sidebar.mobile-open {
+    transform: translateX(0);
+    margin-top: 40px;
+  }
+
+  /* When on mobile, drawer is always expanded visually inside */
+  .citizen-static-sidebar .citizen-sidebar-brand-text,
+  .citizen-static-sidebar .drawer-desktop .menu-label {
+    opacity: 1 !important;
+    width: auto !important;
+    margin-left: 0 !important;
+    pointer-events: auto !important;
+  }
+
+  .citizen-static-sidebar .drawer-desktop .menu-item {
+    justify-content: flex-start !important;
+    padding: 8px 10px !important;
+  }
+
+  .citizen-static-sidebar .profile-section .label-container {
+    display: flex !important;
+  }
+}

package/src/index.scss

@@ -731,12 +731,11 @@ input[type="number"] {
   width: 100%;
   flex: 1;
   min-width: 0;
-  
 }
 
 .employee-app-wrapper {
   min-height: calc(100vh - 8em);
-  height: calc(100vh - 105px);
+  height: calc(100vh - 110px);
 }
 
 .ws-custom-wrapper {

package/src/pages/citizen/HomePageWrapper.scss

@@ -323,8 +323,17 @@
 }
 
 @media (max-width: 780px) {
+
+  /* On mobile, SideBarStatic shouldn't prevent the drawer from appearing. */
   .SideBarStatic {
-    display: none;
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    width: 0;
+    /* No physical width so it doesn't push map content */
+    height: 100vh;
   }
 }
 
@@ -342,7 +351,6 @@
     top: -5%;
     width: 50vw;
     height: 50vw;
-    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 70%);
     border-radius: 50%;
     opacity: 0.8;
     z-index: 0;
@@ -368,36 +376,71 @@
   flex: 1;
   min-width: 0;
   margin-top: -25px;
+  position: relative;
 
   img {
     height: 33vw;
-    filter: grayscale(100%);
-    @apply w-full object-cover;
+    min-height: 220px;
+    filter: brightness(0.65) contrast(1.1);
+    @apply w-full object-cover rounded-b-2xl;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    transition: filter 0.3s ease;
   }
 
   h1 {
     position: absolute;
     top: 100px;
+    /* Base position */
     left: 21px;
-    @apply text-heading-xl text-white font-bold;
+    @apply text-heading-xl;
+    /* Kept this as it's likely a custom framework class */
+    color: #ffffff;
+    /* text-white equivalent */
+    font-weight: 800;
+    /* font-extrabold equivalent */
+    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    letter-spacing: 0.5px;
   }
 
   .moduleLinkHomePageBackButton {
     border: none;
-    top: 76px;
+    position: absolute;
+    top: 80px;
+    /* Align nicer */
+    left: 16px;
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background 0.2s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.4);
+    }
 
     svg {
-      fill: theme(colors.white);
+      fill: #ffffff !important;
     }
 
-    @apply absolute text-white text-heading-s ml-md;
+    /* remove ml-md inside so it centers */
   }
 }
 
 .moduleLinkHomePageModuleLinks {
-  @apply mt-md;
+  @apply mt-md mx-sm;
 
   .CitizenHomeCard {
+    background: rgba(255, 255, 255, 0.8) !important;
+    backdrop-filter: blur(12px);
+    border-radius: 16px !important;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
+    border: 1px solid rgba(255, 255, 255, 0.9);
+
     .header {
       @apply hidden;
     }
@@ -438,21 +481,26 @@
     img {
       min-width: 100vw;
       height: 20vw;
+      border-radius: 0 0 24px 24px;
+      /* Smoother curve on desktop */
     }
 
     h1 {
-      top: calc(10vw + 40px);
-      left: 15.8rem;
+      top: calc(10vw + 60px);
+      left: calc(15.8rem + 40px);
+      /* Align slightly right of back button */
+      font-size: 38px;
     }
 
     .moduleLinkHomePageBackButton {
       top: calc(10vw + 16px);
-      @apply ml-md;
+      left: 15.8rem;
     }
   }
 
   .moduleLinkHomePageModuleLinks {
     width: 100%;
+    padding: 0 2rem;
   }
 }
 

package/src/pages/employee/hrms.scss

@@ -2,18 +2,18 @@
   display: flex;
   width: 100%;
   height: 100%;
-  gap: 24px;
+  gap: 16px;
   overflow-y: auto;
 }
 
 .mobile-view {
-    flex-direction: column !important;
-    gap: 0 !important;
+  flex-direction: column !important;
+  gap: 0 !important;
 }
 
 @media (max-width: 768px) {
   .employee-form {
     flex-direction: column;
-    gap: 24px;
+    gap: 16px;
   }
-}
+}

package/src/pages/employee/inbox.scss

@@ -108,7 +108,7 @@
     padding: 10px;
 
     .heading {
-      justify-content: unset;
+      justify-content: space-between;
       @apply flex;
 
       .clearAll {

package/src/pages/employee/index.scss

@@ -14,14 +14,10 @@
       display: flex;
       flex-direction: column;
       gap: 12px;
-      padding: 20px 20px 0;
     }
 
     /* @apply flex flex-col; */
-  }
-
-  @media (min-width: 325px) and (max-width: 768px) {
-    .ground-container {
+    @media (min-width: 325px) and (max-width: 768px) {
       padding-top: 11px;
       padding-inline: 10px;
     }
@@ -101,9 +97,8 @@
 }
 
 .employee-form-content {
-  flex: 1 1 0%;
+  flex: 1;
   overflow-y: auto;
-  height: 100%;
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -113,7 +108,34 @@
   margin-bottom: 62px;
 }
 
-.citizen {
+.employee-form-section-wrapper {
+  flex: 1 1 0%;
+  overflow-y: auto;
+  height: 100%;
+  display: flex;
+  gap: 16px;
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+}
+
+.employee-form-section {
+  display: flex;
+  gap: 16px;
+  width: 100%;
+  overflow-y: scroll;
+  @media (max-width: 768px) {
+    flex-direction: column;
+    flex: 1 1 0%;
+    overflow-y: auto;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+}
+
+.employee-form .citizen {
   .main {
     padding-top: 82px;
     min-height: calc(100vh - 90px);