@djb25/digit-ui-css 1.0.26 → 1.0.28

package/package.json

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

package/src/components/SearchForm.scss

@@ -68,13 +68,27 @@
 .formcomposer-section-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 16px;
+  gap: 8px;
+  column-gap: 24px;
   width: 100%;
   .grid-title {
     grid-column: span 2;
   }
 }
 
+.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%;
@@ -418,7 +410,7 @@ body {
 
 .header-right-area {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 10px;
@@ -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 {
@@ -479,7 +490,6 @@
   flex-direction: column;
   gap: 13px;
   width: 100%;
-  max-width: 426px;
   max-height: 180px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
   font-family: inherit;
@@ -492,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;
 }
@@ -836,7 +846,6 @@
   stroke: #ffffff;
 }
 
-/* --- RIGHT CONTENT --- */
 .expanded-content {
   flex: 1;
   background-color: #ffffff;
@@ -867,7 +876,6 @@
   display: flex;
   flex-direction: column;
   gap: 0;
-  /* Items touch borders */
 }
 
 .content-link-row {
@@ -900,17 +908,30 @@
   padding: 20px 0;
 }
 
-/* --- EXPANDED VIEW OVERLAY --- */
 .expanded-page-container {
   display: flex;
+  flex-direction: column;
   width: 100%;
-
-  min-height: calc(100vh - 100px);
-  overflow: hidden;
-  gap: 20px;
   padding-bottom: 40px;
 }
-
+.mobile-sidebar-toggle {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  cursor: pointer;
+  font-weight: 600;
+  color: #1a365d;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
+}
+.hamburger-icon {
+  width: 22px;
+  height: 22px;
+}
 .expanded-overlay {
   position: fixed;
   top: 0;
@@ -936,16 +957,35 @@
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }
 
-/* --- LEFT SIDEBAR --- */
 .expanded-sidebar {
-  width: 20%;
+  position: fixed;
+  top: 0;
+  left: -100%;
+  width: 80%;
+  max-width: 320px;
+  height: 100vh;
   background-color: #ffffff;
+  z-index: 1000;
   display: flex;
   flex-direction: column;
-  padding: 20px;
-  flex-shrink: 0;
+  padding: 24px 20px;
+  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  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;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  backdrop-filter: blur(2px);
 }
-
 .sidebar-title {
   font-size: 1.2rem;
   font-weight: 600;
@@ -998,7 +1038,6 @@
   margin-right: 12px;
 }
 
-/* Make SVG white when active */
 .sidebar-item.active .sidebar-icon-placeholder svg {
   stroke: #ffffff !important;
   fill: none;
@@ -1018,7 +1057,6 @@
   opacity: 1;
 }
 
-/* --- RIGHT CONTENT --- */
 .expanded-content {
   flex: 1;
   background-color: #ffffff;
@@ -1139,11 +1177,9 @@
 }
 
 :root {
-  /* Dimensions */
   --sidebar-expanded: 280px;
   --sidebar-collapsed: 80px;
 
-  /* Colors */
   --bg-color: #ffffff;
   --border-color: #f1f5f9;
   --text-main: #0f172a;
@@ -1152,13 +1188,10 @@
   --active-bg: #eff6ff;
   --active-text: #1a67a3;
 
-  /* Animations */
   --transition-slow: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
-  /* Slow, elegant easing curve */
   --transition-fast: 0.3s ease;
 }
 
-/* --- Base Sidebar --- */
 .premium-sidebar {
   height: 100%;
   display: flex;
@@ -1184,12 +1217,20 @@
 /* --- Header & Brand --- */
 .sidebar-header {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  padding: 24px 20px;
-  margin-bottom: 12px;
-  position: relative;
-  white-space: nowrap;
+  align-items: center;
+  margin-bottom: 24px;
+}
+.mobile-close-btn {
+  background: none;
+  border: none;
+  font-size: 1.2rem;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 4px;
+}
+.expanded-content-area {
+  flex: 1;
 }
 
 .brand-container {
@@ -1290,7 +1331,6 @@
   font-weight: 500;
   white-space: nowrap;
   margin-left: 16px;
-  /* Spacing applied here */
   opacity: 1;
   transition: opacity 0.2s ease, width 0.3s ease, margin 0.3s ease;
   overflow: hidden;
@@ -1315,8 +1355,6 @@
   color: #ffffff;
 }
 
-/* --- COLLAPSED STATE STYLES --- */
-
 .collapsed .brand-name,
 .collapsed .nav-text {
   opacity: 0;
@@ -1325,7 +1363,6 @@
   pointer-events: none;
 }
 
-/* Re-stack header elements to center */
 .collapsed .sidebar-header {
   padding: 24px 0;
   flex-direction: column;
@@ -1337,7 +1374,6 @@
   justify-content: center;
 }
 
-/* Re-center navigation icons */
 .collapsed .sidebar-nav {
   padding: 0 12px;
 }
@@ -1345,4 +1381,30 @@
 .collapsed .nav-item-content {
   justify-content: center;
   padding: 12px 0;
-}
+}
+@media (min-width: 768px) {
+  .mobile-sidebar-toggle,
+  .mobile-close-btn,
+  .sidebar-backdrop {
+    display: none;
+  }
+
+  .expanded-page-container {
+    flex-direction: row;
+    gap: 24px;
+  }
+
+  .expanded-sidebar {
+    position: static;
+    left: 0;
+    width: 25%;
+    max-width: 300px;
+    height: auto;
+    z-index: auto;
+    box-shadow: none;
+    border-right: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 20px;
+    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/multiSelectDropdown.scss

@@ -1,77 +1,76 @@
-.multi-select-dropdown-wrap{
-    @apply relative text-form-field text-text-primary w-full;
-    .master, .master-active{
-        @apply relative border border-solid border-input-border h-10 w-full;
-        input[type=text]{
-            @apply absolute top-0 left-0 p-sm pl-sm min-h-full min-w-full opacity-0;
-            &:focus{
-                @apply outline-none;
-            }
-        }
-        .label{
-            @apply flex justify-between p-sm w-full h-full;
-            svg{
-                @apply h-6 w-6;
-            }
-        }
-
-        &:hover{
-            @apply border-2 border-solid border-primary-main;
-        }
+.multi-select-dropdown-wrap {
+  @apply relative text-form-field text-text-primary w-full;
+  .master,
+  .master-active {
+    @apply relative border border-solid border-input-border h-10 w-full;
+    input[type="text"] {
+      @apply absolute top-0 left-0 min-h-full opacity-0;
+      &:focus {
+        @apply outline-none;
+      }
     }
-
-    .master-active{
-        @apply border-2 border-primary-main;
-        input[type=text]{
-            @apply opacity-100;
-        }
-        .label{
-            @apply hidden;
-        }
+    .label {
+      @apply flex justify-between p-sm w-full h-full;
+      svg {
+        @apply h-6 w-6;
+      }
     }
 
-    .server{
-
-        box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
-        top:40px;
-
-        max-height:20vmax;
-        overflow: scroll;
-        @apply absolute min-w-full z-20;
-        div{
-            @apply flex w-full bg-white;
-            justify-content: flex-start;
-            align-items: center;
-            &:hover{
-                @apply bg-grey-mid;
-            }
-            input{
-                height: 44px;
-                @apply absolute min-w-full opacity-0 z-20 cursor-pointer;
-            }
-            p{
-                padding: 12px;
-                margin-top: 5px;
-                margin-bottom: 5px;
-                @apply text-form-field text-text-primary;
-            }
-            .custom-checkbox{
-                height: 28px;
-                width: 28px;
-                @apply border border-solid border-input-border m-sm;
-                svg{
-                    @apply opacity-0 z-10;
-                }
-            }
-            input:checked ~ .custom-checkbox,
-            input:hover ~ .custom-checkbox {
-                @apply border-2 border-primary-main;
-            }
+    &:hover {
+      @apply border-2 border-solid border-primary-main;
+    }
+  }
 
-            input:checked ~ .custom-checkbox svg {
-                @apply opacity-100;
-            }
+  .master-active {
+    @apply border-2 border-primary-main;
+    input[type="text"] {
+      @apply opacity-100;
+    }
+    .label {
+      @apply hidden;
+    }
+  }
 
+  .server {
+    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+    top: 100%;
+    width: 100% !important;
+    max-height: 20vmax;
+    overflow: scroll;
+    @apply absolute z-20;
+    div {
+      @apply flex w-full bg-white;
+      justify-content: flex-start;
+      align-items: center;
+      &:hover {
+        @apply bg-grey-mid;
+      }
+      input {
+        height: 44px;
+        @apply absolute min-w-full opacity-0 z-20 cursor-pointer;
+      }
+      p {
+        padding: 12px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        @apply text-form-field text-text-primary;
+      }
+      .custom-checkbox {
+        height: 28px;
+        width: 28px;
+        @apply border border-solid border-input-border m-sm;
+        svg {
+          @apply opacity-0 z-10;
         }
+      }
+      input:checked ~ .custom-checkbox,
+      input:hover ~ .custom-checkbox {
+        border: 2px solid #a1a1aa;
+      }
+
+      input:checked ~ .custom-checkbox svg {
+        @apply opacity-100;
+      }
     }
-}
+  }
+}

package/src/components/selectdropdown.scss

@@ -22,9 +22,11 @@
   @apply relative rounded-md;
 
   .select {
-    @apply relative block w-full h-10 border border-solid border-input-border rounded-md;
+    border: 2px solid #e5e5e7;
+    @apply relative block w-full h-10 rounded-md;
     &:hover {
-      @apply border-2 border-solid border-primary-main rounded-md;
+      border: 2px solid #a1a1aa;
+      @apply rounded-md;
     }
     input[type="text"] {
       width: calc(100% - 32px);

package/src/components/textfields.scss

@@ -7,7 +7,8 @@
 }
 
 .employee-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 rounded-md;
+  border: 2px solid #e5e5e7;
+  @apply pl-sm outline-none block w-full h-10 bg-white leading-10 text-form-field text-text-primary rounded-md;
 }
 
 .employee-card-input:disabled {
@@ -22,6 +23,7 @@
   border-right: 0;
   padding-right: 5px;
   border-radius: 6px 0 0 6px;
+  color: #e5e5e7;
 }
 .employee-card-input-error {
   @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary;
@@ -29,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 {