@djb25/digit-ui-css 1.0.27 → 1.0.29

package/package.json

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

package/src/components/SearchForm.scss

@@ -76,6 +76,19 @@
   }
 }
 
+.formcomposer-grid-container-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.no-grid {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 16px !important;
+  grid-template-columns: unset !important;
+}
+
 @media (max-width: 768px) {
   .formcomposer-section-grid {
     grid-template-columns: 1fr;

package/src/components/TimeLine.scss

@@ -33,7 +33,7 @@
   .circle {
     width: 24px;
     height: 24px;
-    background-color: #B1B4B6;
+    background-color: #b1b4b6;
     border-radius: 50%;
     text-align: center;
   }
@@ -42,38 +42,38 @@
     background-color: theme(colors.primary.main);
     border-color: theme(colors.primary.main);
   }
-} 
+}
 
-.TLComments{
+.TLComments {
   max-width: 360px;
   @apply mb-sm p-sm bg-grey-light;
-  h3{
+  h3 {
     @apply font-bold text-caption-m;
   }
-  p{
+  p {
     @apply text-body-l;
   }
 }
 
-@screen dt{
-  .TLComments{
+@screen dt {
+  .TLComments {
     width: 360px;
-    h3{
+    h3 {
       @apply text-caption-m-dt;
     }
-    p{
+    p {
       @apply text-body-l-dt;
     }
   }
 }
 
-
 .stepper-container {
   width: 240px;
   background: #fff;
   padding: 24px 0;
   border-radius: 8px;
-  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+  overflow-y: scroll;
 }
 
 .stepper-item {
@@ -135,11 +135,7 @@
   background: #667eea;
 }
 
-
-
-
 @media (max-width: 768px) {
-
   .stepper-container {
     width: 100%;
     display: flex;
@@ -201,4 +197,4 @@
 
 .stepper-circle.active {
   transform: scale(1.05);
-}
+}

package/src/components/body.scss

@@ -133,8 +133,8 @@ body {
     display: flex;
     flex-direction: column;
     padding: 20px;
-    padding-bottom: 0px;
     width: 100%;
+    gap: 12px;
 
     .header {
       font-size: 18px;
@@ -231,14 +231,9 @@ body {
     }
   }
 
-  .form-container {
-    gap: 12px
-  }
-
   .app-container {
     width: 100%;
 
-
     form {
       .card {
         max-width: 960px;
@@ -289,7 +284,6 @@ body {
   margin-top: 90px;
 }
 
-
 .module-carousel-section {
   display: flex;
   flex-direction: column;
@@ -311,7 +305,7 @@ body {
   top: 4px;
   height: 16px;
   width: 4px;
-  background: #3B82F6;
+  background: #3b82f6;
   border-radius: 4px;
 }
 
@@ -366,7 +360,7 @@ body {
   display: none;
 }
 
-.carousel-track>div {
+.carousel-track > div {
   scroll-snap-align: start;
   box-sizing: border-box;
   width: 100%;
@@ -374,8 +368,6 @@ body {
   margin: 0 !important;
 }
 
-
-
 .carousel-track .new-employee-card {
   width: 100%;
   height: 100%;
@@ -562,4 +554,4 @@ body {
   svg {
     fill: #ffffff !important;
   }
-}
+}

package/src/components/card.scss

@@ -36,7 +36,7 @@
   }
 
   .card-label-error {
-    @apply block text-body-s text-error mb-md;
+    @apply block text-body-s text-error;
   }
 
   .card-label-desc {
@@ -111,7 +111,7 @@
   }
 
   .card-label-error {
-    @apply block text-body-s text-error mb-md;
+    @apply block text-body-s text-error;
   }
 
   .card-label-desc {
@@ -131,6 +131,15 @@
   }
 }
 
+.vehicle-details-card {
+  width: 100%;
+  height: fit-content;
+}
+
+.no-shadow {
+  box-shadow: none !important;
+}
+
 .header-wrap {
   @apply flex mb-md;
 
@@ -147,6 +156,11 @@
   }
 }
 
+.header-content {
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
 .card-emp {
   @extend .card;
   padding-right: 0;
@@ -186,7 +200,6 @@
 }
 
 @screen dt {
-
   .submit-bar,
   .submit-bar-disabled {
     width: 240px;
@@ -348,7 +361,7 @@
     }
 
     /* Remove any default margins that might interfere */
-    .label-field-pair>* {
+    .label-field-pair > * {
       margin: 0;
       width: 100%;
     }
@@ -380,8 +393,6 @@
       margin-right: auto;
     }
 
-    .header-content {}
-
     .header-end {
       margin-left: auto;
     }
@@ -430,7 +441,7 @@
 }
 
 .card-label-error {
-  @apply block text-body-s text-error mb-md;
+  @apply block text-body-s text-error;
 }
 
 .employeeCard-override {
@@ -491,7 +502,7 @@
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
 }
 
-.new-employee-card>* {
+.new-employee-card > * {
   position: relative;
   z-index: 1;
 }
@@ -903,6 +914,7 @@
   width: 100%;
   padding-bottom: 40px;
 }
+
 .mobile-sidebar-toggle {
   display: flex;
   align-items: center;
@@ -915,12 +927,14 @@
   cursor: pointer;
   font-weight: 600;
   color: #1a365d;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
 }
+
 .hamburger-icon {
   width: 22px;
   height: 22px;
 }
+
 .expanded-overlay {
   position: fixed;
   top: 0;
@@ -950,7 +964,7 @@
   position: fixed;
   top: 0;
   left: -100%;
-  width: 80%; 
+  width: 80%;
   max-width: 320px;
   height: 100vh;
   background-color: #ffffff;
@@ -962,9 +976,11 @@
   box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
   overflow-y: auto;
 }
+
 .expanded-sidebar.open {
   left: 0;
 }
+
 .sidebar-backdrop {
   position: fixed;
   top: 0;
@@ -975,6 +991,7 @@
   z-index: 999;
   backdrop-filter: blur(2px);
 }
+
 .sidebar-title {
   font-size: 1.2rem;
   font-weight: 600;
@@ -1210,6 +1227,7 @@
   align-items: center;
   margin-bottom: 24px;
 }
+
 .mobile-close-btn {
   background: none;
   border: none;
@@ -1218,6 +1236,7 @@
   cursor: pointer;
   padding: 4px;
 }
+
 .expanded-content-area {
   flex: 1;
 }
@@ -1344,7 +1363,6 @@
   color: #ffffff;
 }
 
-
 .collapsed .brand-name,
 .collapsed .nav-text {
   opacity: 0;
@@ -1372,7 +1390,132 @@
   justify-content: center;
   padding: 12px 0;
 }
+
+.module-sidebar-toggle {
+  display: none;
+}
+
+.module-sidebar-backdrop {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .collapsible-sidebar-container + .app-wrapper {
+    padding-top: 60px;
+  }
+
+  .collapsible-sidebar-container {
+    width: 0;
+    border-right: none;
+    background: transparent;
+  }
+
+  .module-sidebar-toggle {
+    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;
+  }
+
+  .module-sidebar-toggle-icon {
+    width: 20px;
+    height: 20px;
+    transition: transform 0.2s ease;
+  }
+
+  .module-sidebar-toggle.open .module-sidebar-toggle-icon {
+    transform: rotate(180deg);
+  }
+
+  .module-sidebar-toggle-label {
+    display: none;
+    max-width: 60vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .module-sidebar-toggle.open .module-sidebar-toggle-label {
+    display: inline;
+  }
+
+  .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;
+  }
+
+  .module-sidebar-backdrop.open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .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;
+  }
+
+  .premium-sidebar.mobile-open {
+    left: 0;
+  }
+
+  .premium-sidebar .sidebar-header {
+    padding: 16px 20px;
+  }
+
+  .premium-sidebar.collapsed .brand-name,
+  .premium-sidebar.collapsed .nav-text {
+    opacity: 1;
+    width: auto;
+    margin-left: 16px;
+    pointer-events: auto;
+  }
+
+  .premium-sidebar.collapsed .sidebar-header {
+    padding: 16px 20px;
+    flex-direction: row;
+    gap: 12px;
+    justify-content: space-between;
+  }
+
+  .premium-sidebar.collapsed .brand-container {
+    justify-content: flex-start;
+  }
+
+  .premium-sidebar.collapsed .nav-item-content {
+    justify-content: flex-start;
+    padding: 12px;
+  }
+
+  .collapse-toggle {
+    display: none;
+  }
+  .sidebar-nav {
+    margin-top: 37px;
+  }
+}
+
 @media (min-width: 768px) {
+
   .mobile-sidebar-toggle,
   .mobile-close-btn,
   .sidebar-backdrop {
@@ -1395,6 +1538,6 @@
     border-right: 1px solid #e5e7eb;
     border-radius: 8px;
     padding: 20px;
-    transition: none; 
+    transition: none;
   }
 }

package/src/components/financeUi.scss

@@ -920,7 +920,8 @@
   font-size: 14px;
   color: #4b5563;
   font-weight: 500;
-  margin-top: 8px;
+  word-break: break-word;
+  white-space: normal;
 }
 
 .step-label.active-text {
@@ -941,7 +942,6 @@
   border-radius: 6px;
 }
 
-
 .additional-grid {
   display: grid;
   grid-template-columns: 180px 1fr 180px 1fr;
@@ -965,4 +965,4 @@
   .additional-grid {
     grid-template-columns: 160px 1fr;
   }
-}
+}

package/src/components/textfields.scss

@@ -31,7 +31,7 @@
 
 .card-textarea,
 .employee-card-textarea {
-  @apply block outline-none mt-md mb-lg border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm rounded-md;
+  @apply block outline-none border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm rounded-md;
 }
 
 .inputWrapper {

package/src/digitv2/components/FormComposerV2.scss

@@ -75,12 +75,9 @@
 
 .card-textarea,
 .employee-card-textarea {
-  @apply block outline-none mt-md mb-lg border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm;
+  @apply block outline-none border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm;
   @extend .light-input-border;
 }
-.employee-card-textarea {
-  @apply w-full;
-}
 
 .citizen-card-input {
   @apply pl-sm outline-none block border w-full h-10 border-input-border border-solid bg-white leading-10 text-form-field text-text-primary;

package/src/digitv2/components/cardV2.scss

@@ -131,7 +131,7 @@
 
   .card-label-error {
     @extend .alert-error;
-    @apply block text-body-s text-error mb-md;
+    @apply block text-body-s text-error;
   }
 
   .card-label-desc {

package/src/index.scss

@@ -101,6 +101,7 @@
 @import "./pages/citizen/payment/payment-type.scss";
 @import "./pages/citizen/container.scss";
 @import "./pages/citizen/HomePageWrapper.scss";
+@import "./pages/citizen/Register.scss";
 @import "./pages/citizen/CitizenEngagementNotificationWrapper.scss";
 @import "./pages/citizen/Events.scss";
 @import "./pages/citizen/DocumentList.scss";
@@ -729,7 +730,6 @@ input[type="number"] {
   width: 100%;
   flex: 1;
   min-width: 0;
-  margin-bottom: 68px;
 }
 
 .employee-app-wrapper {