@djb25/digit-ui-css 1.0.40 → 1.0.42

package/package.json

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

package/src/components/SearchForm.scss

@@ -68,7 +68,7 @@
 .formcomposer-section-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 8px;
+  gap: 16px;
   column-gap: 24px;
   width: 100%;
   .grid-title {
@@ -123,14 +123,14 @@
   padding: 20px 0;
   -webkit-background-clip: text;
   text-align: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #1f5fa8 0%, #0b2e5b 100%);
   border-radius: 10px;
   margin-left: 72px;
   margin-right: 72px;
 }
 
 .modernFinanceUILoginForm {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #1f5fa8 0%, #0b2e5b 100%);
   min-height: 100vh;
   display: flex;
   align-items: center;
@@ -233,7 +233,7 @@
 
 .modernFinanceUIWelcomeContent {
   flex: 1;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #1f5fa8 0%, #0b2e5b 100%);
   padding: 60px 40px;
   display: flex;
   flex-direction: column;
@@ -282,14 +282,14 @@
 
 .modernLoginForm input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: #1f5fa8;
   box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
 .modernLoginButton {
   width: 100%;
   padding: 12px 24px;
-  background: linear-gradient(45deg, #667eea, #764ba2) !important;
+  background: linear-gradient(45deg, #1f5fa8, #0b2e5b) !important;
   border: none !important;
   border-radius: 8px !important;
   color: white !important;
@@ -417,7 +417,7 @@
 }
 
 .custom-sidebar.open .menu-item.active {
-  background-color: #667eea;
+  background-color: #1f5fa8;
   font-weight: bold;
   margin: 10px;
   border-radius: 6px;
@@ -535,9 +535,7 @@
 
 .collapsible-card {
   border-radius: 6px;
-  margin-bottom: 16px;
   background: #fff;
-  overflow: hidden;
 }
 
 .collapsible-card-header {
@@ -557,7 +555,7 @@
   left: 0;
   width: 4px;
   height: 100%;
-  background: #667eea;
+  background: #1f5fa8;
 }
 
 .collapsible-card-title {
@@ -627,7 +625,7 @@
 }
 
 .finance-header {
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, #1f5fa8, #0b2e5b);
   padding: 16px 24px;
   color: white;
   margin-top: 25px;
@@ -835,16 +833,12 @@
 }
 
 .collapsible-card-tab-button.active {
-  background-color: #667eea;
+  background-color: #1f5fa8;
   color: white;
   box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
   outline: none;
 }
 
-.collapsible-card-tab-content {
-  padding: 20px;
-}
-
 @media screen and (max-width: 1024px) {
   .finance-mainlayout {
     flex-direction: column !important;

package/src/components/TimeLine.scss

@@ -75,7 +75,7 @@
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
   overflow-y: scroll;
   @media (min-width: 768px) {
-    max-width: 25%;
+    max-width: 100%;
   }
 }
 
@@ -104,12 +104,12 @@
 }
 
 .stepper-circle.active {
-  background: #667eea;
+  background: #1f5fa8;
   color: #fff;
 }
 
 .stepper-circle.completed {
-  background: #667eea;
+  background: #1f5fa8;
   color: #fff;
 }
 
@@ -125,7 +125,7 @@
 
 .stepper-label:hover {
   cursor: pointer;
-  color: #667eea;
+  color: #1f5fa8;
 }
 
 .stepper-line {
@@ -136,7 +136,7 @@
 }
 
 .stepper-line.completed {
-  background: #667eea;
+  background: #1f5fa8;
 }
 
 @media (max-width: 768px) {
@@ -180,7 +180,7 @@
   }
 
   .stepper-line.completed {
-    background: #667eea;
+    background: #1f5fa8;
   }
 
   /* hide line on last step */

package/src/components/VerticalTimeline.scss

@@ -44,7 +44,7 @@
 }
 
 .vertical-timeline-connector.completed {
-  background-color: #667eea;
+  background-color: #1f5fa8;
 }
 
 .vertical-timeline-pill {
@@ -68,8 +68,8 @@
 }
 
 .vertical-timeline-step.active .vertical-timeline-pill {
-  background-color: #667eea;
-  border-color: #667eea;
+  background-color: #1f5fa8;
+  border-color: #1f5fa8;
   color: #fff;
   box-shadow: 0 0 0 5px rgba(244, 119, 56, 0.2);
   /* Enhanced glow */
@@ -78,8 +78,8 @@
 }
 
 .vertical-timeline-step.completed .vertical-timeline-pill {
-  background-color: #667eea;
-  border-color: #667eea;
+  background-color: #1f5fa8;
+  border-color: #1f5fa8;
   color: #fff;
 }
 
@@ -121,7 +121,7 @@
     display: flex;
     border-radius: 99999px;
     padding: 0.25rem;
-    background-color: #667eea36;
+    background-color: #1f5fa836;
     overflow-x: scroll;
     max-width: 100%;
   }
@@ -170,7 +170,7 @@
 
   /* active tab */
   .vertical-timeline-step.active .vertical-timeline-pill {
-    background-color: #667eea;
+    background-color: #1f5fa8;
     color: #fff;
     transform: none;
     box-shadow: none;
@@ -178,7 +178,7 @@
 
   /* completed tab */
   .vertical-timeline-step.completed .vertical-timeline-pill {
-    background-color: #667eea;
+    background-color: #1f5fa8;
     color: #fff;
   }
 }

package/src/components/body.scss

@@ -1,9 +1,9 @@
 body {
-  @apply bg-grey-bg;
+  background-color: #e7e7e7;
 }
 
 .body-container {
-  @apply bg-grey-bg h-full min-h-screen overflow-x-hidden;
+  @apply h-full min-h-screen overflow-x-hidden;
 }
 
 .navbar {
@@ -140,10 +140,15 @@ body {
   .form-container {
     display: flex;
     flex-direction: column;
-    padding: 20px;
+    padding: 26px;
     width: 100%;
     gap: 12px;
 
+    @media (min-width: 768px) {
+      padding-right: 75px;
+      padding-top: 33px;
+    }
+
     .header {
       font-size: 18px;
       display: flex;
@@ -157,7 +162,9 @@ body {
     }
 
     .ws-docs-container {
-      padding: 8px 0;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
     }
 
     .ws-doc-card {
@@ -165,7 +172,6 @@ body {
       border: 1px solid #e0e0e0;
       border-radius: 8px;
       padding: 20px;
-      margin-bottom: 20px;
       transition: all 0.2s ease;
     }
 
@@ -204,12 +210,14 @@ body {
 
     .ws-doc-options {
       padding-left: 4px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
     }
 
     .ws-doc-option {
       display: flex;
       align-items: flex-start;
-      margin-bottom: 8px;
       font-size: 15px;
       color: #333;
     }

package/src/components/buttons.scss

@@ -71,8 +71,8 @@
 .jk-digit-primary-btn {
   width: auto;
   height: 40px;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  border: 1px solid linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, #1f5fa8, #0b2e5b);
+  border: 1px solid linear-gradient(135deg, #1f5fa8, #0b2e5b);
   padding: 20px;
   color: theme(colors.white);
   display: flex;
@@ -103,4 +103,4 @@
     flex-flow: column;
     margin-bottom: 15px;
   }
-}
+}

package/src/components/card.scss

@@ -178,7 +178,7 @@
 
 .submit-bar {
   @apply h-10 text-center outline-none;
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, #1f5fa8, #0b2e5b);
   box-shadow: inset 0px -2px 0px theme(colors.text.primary);
   cursor: pointer;
   height: 36px !important;
@@ -195,7 +195,7 @@
 
 .submit-bar-disabled {
   @apply h-10 text-center w-full outline-none opacity-50;
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, #1f5fa8, #0b2e5b);
 
   &:focus {
     @apply outline-none;
@@ -214,6 +214,24 @@
     background: linear-gradient(278deg, rgba(110, 191, 221, 0.925) -24.44%, rgba(97, 119, 236, 0.9) 93.53%);
   }
 }
+
+.label-field-pair .field .text-input .select .select-active .master-active input:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+.label-field-pair .field .text-input .select .master-active .select-active input:focus-within {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.employee-card-input:focus-within {
+  outline: none;
+  border-color: #007bff !important;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
 @screen dt {
   .submit-bar,
   .submit-bar-disabled {
@@ -247,7 +265,9 @@
   }
 
   .label-field-pair {
-    align-items: center;
+    display: flex;
+    gap: 4px;
+    flex-direction: column;
   }
 
   .employeeCard {
@@ -331,7 +351,7 @@
     .label-field-pair {
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      gap: 4px;
       justify-content: flex-start;
       align-items: center;
       /* Adjust spacing between label and field */
@@ -846,7 +866,7 @@
 }
 
 .sidebar-item.active {
-  background-color: #667eea;
+  background-color: #1f5fa8;
   color: #ffffff;
   box-shadow: 0 4px 6px rgba(0, 173, 239, 0.2);
   padding: 6px;
@@ -1050,7 +1070,7 @@
 }
 
 .sidebar-item.active {
-  background-color: #667eea;
+  background-color: #1f5fa8;
   color: #ffffff;
   box-shadow: 0 4px 6px rgba(0, 173, 239, 0.2);
 }

package/src/components/datatable.scss

@@ -33,7 +33,22 @@
 }
 
 .employee-data-table {
+  .employee-role-list-value {
+    max-height: 150px;
+    overflow-y: scroll;
+  }
+  .row-content {
+    display: flex !important;
+    width: 30% !important;
+    @media (max-width: 768px) {
+      width: fit-content !important;
+    }
+  }
+
   .row {
+    @media (max-width: 768px) {
+      justify-content: space-between;
+    }
     @apply flex pb-sm mb-sm;
 
     span {
@@ -51,7 +66,10 @@
       @apply text-heading-s;
       white-space: break-spaces !important;
       word-break: break-all;
-      text-align: center;
+      text-align: start;
+      @media (max-width: 768px) {
+        width: fit-content !important;
+      }
     }
 
     .caption {

package/src/components/financeUi.scss

@@ -10,14 +10,14 @@
   padding: 20px 0;
   -webkit-background-clip: text;
   text-align: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #1f5fa8 0%, #0b2e5b 100%);
   border-radius: 10px;
   margin-left: 72px;
   margin-right: 72px;
 }
 
 .modernFinanceUILoginForm {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #1f5fa8 0%, #0b2e5b 100%);
   min-height: 100vh;
   display: flex;
   align-items: center;
@@ -120,7 +120,7 @@
 
 .modernFinanceUIWelcomeContent {
   flex: 1;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #1f5fa8 0%, #0b2e5b 100%);
   padding: 60px 40px;
   display: flex;
   flex-direction: column;
@@ -169,14 +169,14 @@
 
 .modernLoginForm input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: #1f5fa8;
   box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
 .modernLoginButton {
   width: 100%;
   padding: 12px 24px;
-  background: linear-gradient(45deg, #667eea, #764ba2) !important;
+  background: linear-gradient(45deg, #1f5fa8, #0b2e5b) !important;
   border: none !important;
   border-radius: 8px !important;
   color: white !important;
@@ -306,7 +306,7 @@
 }
 
 .custom-sidebar.open .menu-item.active {
-  background-color: #667eea;
+  background-color: #1f5fa8;
   font-weight: bold;
   margin: 10px;
   border-radius: 6px;
@@ -424,9 +424,7 @@
 
 .collapsible-card {
   border-radius: 6px;
-  margin-bottom: 16px;
   background: #fff;
-  overflow: hidden;
 }
 
 .collapsible-card-header {
@@ -446,7 +444,7 @@
   left: 0;
   width: 4px;
   height: 100%;
-  background: #667eea;
+  background: #1f5fa8;
 }
 
 .collapsible-card-title {
@@ -516,7 +514,7 @@
 }
 
 .finance-header {
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, #1f5fa8, #0b2e5b);
   padding: 16px 24px;
   color: white;
   margin-top: 25px;
@@ -725,15 +723,11 @@
 }
 
 .collapsible-card-tab-button.active {
-  background-color: #667eea;
+  background-color: #1f5fa8;
   color: white;
   box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
 }
 
-.collapsible-card-tab-content {
-  padding: 20px;
-}
-
 /* -------------------------------------------------------------- */
 /*  EXACT RESPONSIVE FIX FOR MODULE PAGE (MATCHES YOUR SCREENSHOT) */
 /* -------------------------------------------------------------- */

package/src/components/inboxv2/InboxLinks.scss

@@ -1,60 +1,60 @@
 @import url("../../digitv2/index.scss");
 
 .inbox-search-links-container {
-    @extend .light-paper-primary;
-    height: 100%;
-    width: 100% !important;
-    display: flex;
-    flex-direction: column;
-    padding: 1rem;
-    .header {
-        @extend .light-text-color-primary;
-        display: grid;
-        grid-template-columns: 20% 1fr;
-        .logo {
-            padding: 0px;
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            .inbox-search-icon--projects {
-                fill : #f47738;
-                height: 2rem;
-                width: 2rem;
-            }
-        }
-        .text {
-            @extend .light-text-color-primary;
-            line-height: 32px;
-            font-weight: 700;
-            color : black;
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-        }
+  @extend .light-paper-primary;
+  height: 100%;
+  width: 100% !important;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  .header {
+    @extend .light-text-color-primary;
+    display: grid;
+    grid-template-columns: 20% 1fr;
+    .logo {
+      padding: 0px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      .inbox-search-icon--projects {
+        fill: #3a8dcc;
+        height: 2rem;
+        width: 2rem;
+      }
+    }
+    .text {
+      @extend .light-text-color-primary;
+      line-height: 32px;
+      font-weight: 700;
+      color: black;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+    }
 
-        @media (min-width: 1024px) {
-            .text {
-                font-size: 24px;
-            }
-        }
+    @media (min-width: 1024px) {
+      .text {
+        font-size: 24px;
+      }
+    }
 
-        @media (max-width: 1024px) {
-            .text {
-                font-size: 20px;
-            }
-        }
+    @media (max-width: 1024px) {
+      .text {
+        font-size: 20px;
+      }
     }
-    .contents {
-        margin-top: 1rem;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        .link {
-            @extend .light-primary;
-            padding: 8px;
-            --text-opacity: 1;
-            color: #f47738;
-            color: rgba(244, 119, 56, var(--text-opacity));
-        }
+  }
+  .contents {
+    margin-top: 1rem;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    .link {
+      @extend .light-primary;
+      padding: 8px;
+      --text-opacity: 1;
+      color: #3a8dcc;
+      color: rgba(244, 119, 56, var(--text-opacity));
     }
-}
+  }
+}