@djb25/digit-ui-css 1.0.26 → 1.0.27

package/package.json

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

package/src/components/SearchForm.scss

@@ -68,7 +68,8 @@
 .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;

package/src/components/body.scss

@@ -418,7 +418,7 @@ body {
 
 .header-right-area {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 10px;

package/src/components/card.scss

@@ -479,7 +479,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;
@@ -836,7 +835,6 @@
   stroke: #ffffff;
 }
 
-/* --- RIGHT CONTENT --- */
 .expanded-content {
   flex: 1;
   background-color: #ffffff;
@@ -867,7 +865,6 @@
   display: flex;
   flex-direction: column;
   gap: 0;
-  /* Items touch borders */
 }
 
 .content-link-row {
@@ -900,17 +897,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 +946,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 +1027,6 @@
   margin-right: 12px;
 }
 
-/* Make SVG white when active */
 .sidebar-item.active .sidebar-icon-placeholder svg {
   stroke: #ffffff !important;
   fill: none;
@@ -1018,7 +1046,6 @@
   opacity: 1;
 }
 
-/* --- RIGHT CONTENT --- */
 .expanded-content {
   flex: 1;
   background-color: #ffffff;
@@ -1139,11 +1166,9 @@
 }
 
 :root {
-  /* Dimensions */
   --sidebar-expanded: 280px;
   --sidebar-collapsed: 80px;
 
-  /* Colors */
   --bg-color: #ffffff;
   --border-color: #f1f5f9;
   --text-main: #0f172a;
@@ -1152,13 +1177,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 +1206,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 +1320,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,7 +1344,6 @@
   color: #ffffff;
 }
 
-/* --- COLLAPSED STATE STYLES --- */
 
 .collapsed .brand-name,
 .collapsed .nav-text {
@@ -1325,7 +1353,6 @@
   pointer-events: none;
 }
 
-/* Re-stack header elements to center */
 .collapsed .sidebar-header {
   padding: 24px 0;
   flex-direction: column;
@@ -1337,7 +1364,6 @@
   justify-content: center;
 }
 
-/* Re-center navigation icons */
 .collapsed .sidebar-nav {
   padding: 0 12px;
 }
@@ -1345,4 +1371,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/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;

package/src/components/uploadcomponents.scss

@@ -142,8 +142,12 @@
 
 .upload-file {
   min-height: 40px;
-  @apply relative border border-input-border w-full rounded-md;
-
+  border: 2px solid #e5e5e7;
+  @apply relative w-full rounded-md;
+  &:hover {
+    border: 2px solid #a1a1aa;
+    @apply rounded-md;
+  }
   div {
     @apply flex flex-row h-full items-center pl-md mt-sm flex-wrap;
 

package/src/digitv2/components/FormComposerV2.scss

@@ -48,8 +48,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;
-  @extend .light-input-border;
+  border: 2px solid #e5e5e7;
+  @apply pl-sm outline-none block w-full h-10 bg-white leading-10 text-form-field text-text-primary;
 }
 .employee-card-input:disabled {
   @apply border-grey-dark text-grey-dark !important;
@@ -61,6 +61,7 @@
   width: fit-content !important;
   display: flex;
   align-items: center;
+  color: #98989c;
   /* background: theme(colors.grey.mid); */
   @extend .light-background;
   border-right: 0;
@@ -114,6 +115,6 @@
   width: fit-content;
 }
 
-.digit-form-composer-header{
-   font-size:theme(digitv2.fontSize.heading-l-dt);
-}
+.digit-form-composer-header {
+  font-size: theme(digitv2.fontSize.heading-l-dt);
+}

package/src/digitv2/components/checkboxV2.scss

@@ -39,8 +39,7 @@
 
   input:checked ~ .digit-custom-checkbox,
   input:hover ~ .digit-custom-checkbox {
-    @apply border-2 border-primary-main;
-    @extend .light-input-border;
+    border: 2px solid #a1a1aa;
   }
 
   input:checked ~ .digit-custom-checkbox img {

package/src/digitv2/components/multiSelectDropdownV2.scss

@@ -68,7 +68,7 @@
       }
       input:checked ~ .digit-custom-checkbox,
       input:hover ~ .digit-custom-checkbox {
-        @apply border-2 border-primary-main;
+        border: 2px solid #a1a1aa;
       }
 
       input:checked ~ .digit-custom-checkbox svg {

package/src/digitv2/pages/employee/workbench.scss

@@ -227,8 +227,7 @@
 
                   input:checked,
                   input:hover {
-                    @apply border-2;
-                    @extend .light-input-border;
+                    border: 2px solid #a1a1aa;
                   }
                 }
               }

package/src/index.scss

@@ -474,12 +474,13 @@ input[type="number"] {
 }
 .phone-input-wrapper:hover {
   .employee-card-input--front {
-    border: 1px solid #667eea;
+    border: 2px solid #a1a1aa;
     border-right: 0;
+    color: #a1a1aa;
   }
 
   input {
-    border: 1px solid #667eea;
+    border: 1px solid #e5e5e7;
   }
 }
 
@@ -488,8 +489,7 @@ input[type="number"] {
 
   input {
     &:hover {
-      --border-opacity: 1;
-      border: 1px solid #667eea;
+      border: 2px solid #a1a1aa;
     }
   }
 }

package/src/pages/employee/index.scss

@@ -1042,7 +1042,7 @@
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
-  z-index: 100000;
+  z-index: 9999999;
   display: flex;
   justify-content: center;
   align-items: center;