@djb25/digit-ui-css 1.0.19 → 1.0.21

package/package.json

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

package/src/components/SearchForm.scss

@@ -1,11 +1,10 @@
 .search-form-wrapper {
-  @apply flex flex-wrap justify-between bg-white;
+  @apply flex flex-wrap gap-5 justify-between bg-white;
 
   padding: 20px;
   border-radius: 11px;
   .form-field {
-    width: calc(25% - 16px);
-    @apply inline-block mr-md align-middle;
+    @apply align-middle;
   }
 
   .SubmitAndClearAllContainer {
@@ -66,6 +65,34 @@
   }
 }
 
+.formcomposer-section-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  width: 100%;
+  .grid-title {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 768px) {
+  .formcomposer-section-grid {
+    grid-template-columns: 1fr;
+
+    .grid-title {
+      grid-column: span 1;
+    }
+  }
+}
+
+.formcomposer-section-button {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  gap: 24px;
+  width: 100%;
+}
+
 .finance-heading {
   display: flex;
   justify-content: center;

package/src/components/body.scss

@@ -289,7 +289,6 @@ body {
   margin-top: 90px;
 }
 
-/* --- MODULE CAROUSEL STYLES --- */
 
 .module-carousel-section {
   display: flex;
@@ -297,13 +296,29 @@ body {
   width: 100%;
   padding-bottom: 20px;
 }
+.module-carousel-header h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #ffffff;
+  margin: 0;
+}
 
+.module-carousel-header h3::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 4px;
+  height: 16px;
+  width: 4px;
+  background: #3B82F6;
+  border-radius: 4px;
+}
 .module-carousel-header {
-  display: flex;
-  justify-content: flex-end;
+  background: linear-gradient(135deg, #3585c4, #6fa0f0 40%, #80b3ff);
+  padding: 12px 16px;
+  border-radius: 10px;
   align-items: center;
-  width: 100%;
-  padding: 0 10px 15px;
+  margin-top:10px;
 }
 
 .module-carousel-actions {
@@ -320,54 +335,53 @@ body {
 
 .carousel-track {
   display: grid;
-  grid-template-rows: repeat(2, 1fr);
-  grid-auto-flow: column;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-auto-flow: row;
   gap: 20px;
   overflow-x: auto;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
   width: 100%;
   padding: 10px 0px;
-
-  /* Hide standard scrollbars for a clean look */
+column-gap: 20px;
   -ms-overflow-style: none;
-  /* IE and Edge */
   scrollbar-width: none;
-  /* Firefox */
 }
 
 .carousel-track::-webkit-scrollbar {
   display: none;
-  /* Chrome, Safari, Opera */
 }
 
-/* Default mobile width */
-.carousel-track>div {
+.carousel-track > div {
   scroll-snap-align: start;
   box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0 !important; 
 }
 
-/* 1 Column / 2 Rows on Mobile slightly overflowing for affordance */
 .carousel-track {
-  grid-auto-columns: calc(100% - 20px);
+grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
 @media (min-width: 640px) {
 
-  /* 2 Columns / 2 Rows on Tablets */
   .carousel-track {
     grid-auto-columns: calc((100% - 20px) / 2);
   }
 }
+@media (min-width: 1024px) {
+  .carousel-track {
+    grid-auto-columns: calc((100% - 3 * 20px) / 4);
+  }
+}
 
-/* Ensure the child card fills this wrapper without extraneous margins */
 .carousel-track .new-employee-card {
   width: 100%;
   height: 100%;
   margin: 0 !important;
 }
 
-/* Modern Minimalist Arrow Button Styles */
 .carousel-arrow {
   background-color: transparent;
   color: #555;
@@ -402,10 +416,8 @@ body {
   box-shadow: none;
 }
 
-/* Desktop sizing: exactly 4 columns width */
 @screen dt {
   .carousel-track {
-    /* 25% width minus the gap offset to perfectly fit 4 per row */
-    grid-auto-columns: calc((100% - 60px) / 4);
+    grid-auto-columns: calc((100% - 3 * 20px) / 4);
   }
 }

package/src/components/card.scss

@@ -66,8 +66,7 @@
 }
 
 .employeeCard {
-  @apply bg-white shadow-card p-xl;
-  padding-inline: 48px;
+  @apply bg-white shadow-card p-md;
   border-radius: 6px;
 
   .card-header {
@@ -157,11 +156,12 @@
 }
 
 .submit-bar {
-  @apply h-10 text-center w-full outline-none;
+  @apply h-10 text-center outline-none;
   background: linear-gradient(135deg, #667eea, #764ba2);
   box-shadow: inset 0px -2px 0px theme(colors.text.primary);
   cursor: pointer;
-
+  height: 36px !important;
+  border: none !important;
   &:focus {
     @apply outline-none;
   }
@@ -298,7 +298,8 @@
       display: flex;
       flex-direction: column;
       gap: 8px;
-      justify-content: center;
+      justify-content: flex-start;
+      align-items: center;
       /* Adjust spacing between label and field */
       /* Space between form groups */
     }
@@ -652,7 +653,7 @@
   color: #1a67a3;
   padding: 6px 12px;
   border-radius: 6px;
-  font-size: 0.75rem;
+  font-size: 9px;
   font-weight: 600;
   text-decoration: none;
   transition: background-color 0.2s;

package/src/components/financeUi.scss

@@ -886,7 +886,7 @@
 
 .stepper-row {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   position: relative;
 }
 
@@ -933,12 +933,4 @@
 .step-label.active-text {
   color: #5a6ee1;
   font-weight: 600;
-}
-
-
-.formcomposer-section-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  width: 100%;
 }

package/src/components/hoc/InboxComposer.scss

@@ -20,6 +20,12 @@
   }
 }
 
+@media (max-width: 768px) {
+  .search-form-wns-inbox {
+    grid-template-columns: 1fr;
+  }
+}
+
 @screen dt {
   .InboxComposerWrapper {
     grid-template-columns: calc(25% - 32px) 75%;
@@ -68,6 +74,10 @@
   }
 
   .search-form-wns-inbox {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+
     .clear-search-container {
       grid-column: 2/3;
       text-align: right;
@@ -116,3 +126,20 @@
     }
   }
 }
+
+.side-panel-item {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: scroll;
+
+  @media (min-width: 768px) {
+    width: 240px;
+  }
+
+  .inboxLinks {
+    @media (max-width: 768px) {
+      display: none;
+    }
+  }
+}

package/src/components/moduleHeader.scss

@@ -2,6 +2,10 @@
   justify-content: center;
   align-items: center;
 
+  @media (max-width: 768px) {
+    display: none;
+  }
+
   .header-top-section {
     width: 100%;
     background: linear-gradient(98deg, rgba(110, 192, 221, 0.71) -24.44%, rgba(97, 119, 236, 0.9) 93.53%);
@@ -9,14 +13,11 @@
     border-radius: 11px;
     margin-inline: 42px;
 
-
     align-items: center;
     justify-content: center;
 
     /* 3D Box Shadow with Bevel Highlight */
-    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4),
-      0 8px 16px -4px rgba(0, 0, 0, 0.15),
-      0 4px 8px -4px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), 0 8px 16px -4px rgba(0, 0, 0, 0.15), 0 4px 8px -4px rgba(0, 0, 0, 0.1);
     /* Modern Glass Effect */
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
@@ -26,9 +27,7 @@
 
     &:hover {
       transform: translateY(-2px);
-      box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5),
-        0 12px 20px -4px rgba(0, 0, 0, 0.2),
-        0 6px 10px -4px rgba(0, 0, 0, 0.15);
+      box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), 0 12px 20px -4px rgba(0, 0, 0, 0.2), 0 6px 10px -4px rgba(0, 0, 0, 0.15);
     }
 
     .title {
@@ -52,8 +51,7 @@
     justify-content: flex-start;
     color: #fff;
     /* Matching 3D Shadow and Bevel for Bottom Section */
-    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3),
-      0 4px 8px -2px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 4px 8px -2px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
@@ -87,7 +85,7 @@
       justify-content: center;
       padding-left: 20px;
 
-      @media (max-width:768px){
+      @media (max-width: 768px) {
         display: none !important;
       }
     }
@@ -113,72 +111,70 @@
       justify-content: center;
       border-right: 1px solid #fff;
       padding-right: 20px;
-      @media (max-width:768px){
+      @media (max-width: 768px) {
         display: none;
       }
     }
-      @media (max-width:768px){
-    justify-content: space-between;
-  }
+    @media (max-width: 768px) {
+      justify-content: space-between;
+    }
   }
 }
 
-.hamburger-btn{
-  display:none;
-  background:none;
-  border:none;
-  font-size:22px;
-  color:white;
-  cursor:pointer;
+.hamburger-btn {
+  display: none;
+  background: none;
+  border: none;
+  font-size: 22px;
+  color: white;
+  cursor: pointer;
 }
 
-.mobile-menu{
-  display:none;
+.mobile-menu {
+  display: none;
 }
 
-@media (max-width:768px){
-
-  .hamburger-btn{
-    display:block;
+@media (max-width: 768px) {
+  .hamburger-btn {
+    display: block;
   }
 
-  .desktop-back{
-    display:none;
+  .desktop-back {
+    display: none;
   }
 
-  .mobile-menu{
-    display:none;
-    position:absolute;
-    top:55px;
-    left:0;
-    width:100%;
-   background: #667eea;
-    color:#fff;
-    flex-direction:column;
-    padding:16px;
-    border-radius:8px;
-    box-shadow:0 8px 20px rgba(0,0,0,0.15);
-    z-index:999999;
-    gap:12px;
+  .mobile-menu {
+    display: none;
+    position: absolute;
+    top: 55px;
+    left: 0;
+    width: 100%;
+    background: #667eea;
+    color: #fff;
+    flex-direction: column;
+    padding: 16px;
+    border-radius: 8px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+    z-index: 999999;
+    gap: 12px;
     opacity: 1;
   }
 
-  .mobile-menu.open{
-    display:flex;
+  .mobile-menu.open {
+    display: flex;
     position: absolute;
     z-index: 999;
   }
 
-  .mobile-back{
-    font-weight:600;
-    padding-bottom:10px;
-    border-bottom:1px solid #eee;
+  .mobile-back {
+    font-weight: 600;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
     cursor: pointer;
   }
 
   .crumbs {
     width: max-content;
-     cursor: pointer;
+    cursor: pointer;
   }
-
-}
+}

package/src/components/popup.scss

@@ -7,6 +7,7 @@
 @screen dt {
   .popup-wrap {
     background: rgba(0, 0, 0, 0.7);
+    z-index: 99999;
     @apply min-h-screen;
   }
 }

package/src/components/selectdropdown.scss

@@ -19,7 +19,7 @@
 }
 */
 .employee-select-wrap {
-  @apply mb-lg relative rounded-md;
+  @apply relative rounded-md;
 
   .select {
     @apply relative block w-full h-10 border border-solid border-input-border rounded-md;

package/src/components/tag.scss

@@ -1,4 +1,6 @@
 .tag-container {
+  max-height: 120px;
+  overflow: scroll;
   @apply flex flex-wrap mb-md;
   .tag {
     @apply bg-grey-mid rounded-2xl pt-sm pb-sm flex justify-between items-center;

package/src/components/textfields.scss

@@ -21,6 +21,7 @@
   background: theme(colors.grey.mid);
   border-right: 0;
   padding-right: 5px;
+  border-radius: 6px 0 0 6px;
 }
 .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/pages/employee/ekyc.scss

@@ -2,14 +2,12 @@
     .inbox-main-container {
         flex: 1;
         padding-right: -24px;
-        background-color: #ffffff;
         border-radius: 12px;
     }
 
     .inbox-wrapper {
         min-width: 100%;
         padding: 24px;
-        background-color: rgb(241 241 241);
         border-radius: 12px;
     }
 
@@ -29,10 +27,12 @@
     .ekyc-status-card {
         flex: 1;
         text-align: center;
-        padding: 24px;
-        border: 1px solid #EAECF0;
-        border-radius: 12px;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        padding: 8px 24px;
+        border-right: 1px solid #EAECF0;
+
+        &:last-child {
+            border-right: none;
+        }
 
         .count {
             font-size: 32px;

package/src/pages/employee/form-fields.scss

@@ -3,10 +3,6 @@
 }
 
 @screen dt {
-  .form-field {
-    @apply w-1/2;
-  }
-
   .desktop-w-full {
     @apply w-full !important;
   }

package/src/pages/employee/inbox.scss

@@ -137,10 +137,21 @@
   }
 }
 
+@media (max-width: 768px) {
+  .inbox-container {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 .inbox-container {
   gap: 16px;
 
   .filters-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
     .filter {
       .filter-card {
         border-radius: 6px;
@@ -203,14 +214,38 @@
   }
 }
 
+.generic-button {
+  height: 32px;
+  border-radius: 9999999px;
+  color: #e2e8f0;
+  border: 2px solid #e2e8f0;
+  padding: 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: #e2e8f0;
+    color: #5d6774;
+  }
+}
+
+@media (max-width: 480px) {
+  .generic-button {
+    padding: 0 12px;
+  }
+}
+
 .clear-search,
 .clear-search .link-label {
-  @apply text-focus;
-  @apply block;
+  @apply border-focus text-focus;
   cursor: pointer;
 
   &:hover {
-    color: #000;
+    color: #3b59df;
+    background-color: #bdc7f3;
   }
 }
 
@@ -257,15 +292,22 @@
     padding: 8px !important;
     background: #fff;
     border-radius: 6px;
+
+    @media (max-width: 768px) {
+      display: none !important;
+    }
+
     .header {
       display: flex;
       border: none;
       @apply justify-start;
       align-items: center;
+
       .logo {
         @apply bg-white;
         display: flex;
         align-items: center;
+
         svg {
           path {
             fill: theme(colors.primary.main);
@@ -296,15 +338,12 @@
   .inbox-container {
     @apply flex;
     height: inherit;
-    padding-bottom: 24px;
 
     .filters-container {
       width: 270px;
       overflow-y: scroll;
-      
-      .filter {
-        @apply mt-md;
 
+      .filter {
         .filter-card {
           @apply p-md bg-white;
 
@@ -467,7 +506,8 @@
 .inbox-action-container {
   display: flex;
   justify-content: flex-end;
-  align-items: flex-start;
+  align-items: center;
+  width: 100%;
 }
 
 /*