@djb25/digit-ui-css 1.0.17 → 1.0.19

package/package.json

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

package/src/components/TimeLine.scss

@@ -65,4 +65,140 @@
       @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);
+}
+
+.stepper-item {
+  padding: 0 24px;
+}
+
+.stepper-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.stepper-circle {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: #f1f1f1;
+  color: #555;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+}
+
+.stepper-circle.active {
+  background: #667eea;
+  color: #fff;
+}
+
+.stepper-circle.completed {
+  background: #667eea;
+  color: #fff;
+}
+
+.stepper-label {
+  font-size: 14px;
+  color: #505a5f;
+}
+
+.stepper-label.active {
+  font-weight: 600;
+}
+
+.stepper-label:hover {
+  cursor: pointer;
+  color: #667eea;
+}
+
+.stepper-line {
+  height: 40px;
+  width: 2px;
+  background: #eee;
+  margin-left: 17px;
+}
+
+.stepper-line.completed {
+  background: #667eea;
+}
+
+
+
+
+@media (max-width: 768px) {
+
+  .stepper-container {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 20px;
+    box-shadow: none;
+    gap: 0;
+  }
+
+  .stepper-item {
+    flex: 1;
+    padding: 0;
+    position: relative;
+    text-align: center;
+  }
+
+  .stepper-row {
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .stepper-circle {
+    margin: 0 auto;
+  }
+
+  /* horizontal line */
+  .stepper-line {
+    position: absolute;
+    top: 17px;
+    left: 50%;
+    width: 100%;
+    height: 2px;
+    background: #eee;
+    z-index: -1;
+  }
+
+  .stepper-line.completed {
+    background: #667eea;
+  }
+
+  /* hide line on last step */
+  .stepper-item:last-child .stepper-line {
+    display: none;
+  }
+
+  .stepper-label {
+    font-size: 12px;
+    text-align: center;
+    width: 100%;
+  }
+}
+
+.stepper-circle {
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.stepper-circle.active {
+  transform: scale(1.05);
 }

package/src/components/actionbar.scss

@@ -25,6 +25,21 @@
   }
 }
 
+.action-bar-wrap{
+  box-shadow: 0 -2px 8px rgba(0,0,0,.16);
+  left: 0;
+  max-width: none;
+  z-index: 999;
+  position: fixed;
+  bottom: 0;
+  --bg-opacity: 1;
+  background-color: #fff;
+  background-color: rgba(255,255,255,var(--bg-opacity));
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-right: 24px;
+  text-align: right;
+}
 @screen dt {
   .action-bar-wrap {
     box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;

package/src/components/body.scss

@@ -94,6 +94,10 @@ body {
   padding-inline: 24px;
 }
 
+ .app-container{
+   height: 100%;
+ }
+
 @screen dt {
   .employee-app-homepage-container {
     @apply w-full;
@@ -128,7 +132,6 @@ body {
   .form-container {
     display: flex;
     flex-direction: column;
-    gap: 12px;
     padding: 20px;
     padding-bottom: 0px;
     width: 100%;
@@ -207,6 +210,7 @@ body {
       font-weight: 600;
       margin-right: 8px;
     }
+
     form {
       .card {
         max-width: 960px;
@@ -226,9 +230,15 @@ body {
       }
     }
   }
+
+  .form-container{
+        gap:12px
+      }
+      
   .app-container {
     width: 100%;
 
+      
     form {
       .card {
         max-width: 960px;
@@ -278,3 +288,124 @@ body {
   max-height: 120px;
   margin-top: 90px;
 }
+
+/* --- MODULE CAROUSEL STYLES --- */
+
+.module-carousel-section {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: 20px;
+}
+
+.module-carousel-header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  padding: 0 10px 15px;
+}
+
+.module-carousel-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.module-carousel-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.carousel-track {
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  grid-auto-flow: column;
+  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 */
+  -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 {
+  scroll-snap-align: start;
+  box-sizing: border-box;
+}
+
+/* 1 Column / 2 Rows on Mobile slightly overflowing for affordance */
+.carousel-track {
+  grid-auto-columns: calc(100% - 20px);
+}
+
+@media (min-width: 640px) {
+
+  /* 2 Columns / 2 Rows on Tablets */
+  .carousel-track {
+    grid-auto-columns: calc((100% - 20px) / 2);
+  }
+}
+
+/* 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;
+  border: 1px solid #e0e0e0;
+  border-radius: 50%;
+  width: 38px;
+  height: 38px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
+}
+
+.carousel-arrow:hover:not(:disabled) {
+  background-color: #1a67a3;
+  color: white;
+  border-color: #1a67a3;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(244, 119, 56, 0.3);
+}
+
+.carousel-arrow:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.carousel-arrow:disabled {
+  opacity: 0.3;
+  cursor: default;
+  background-color: #fafafa;
+  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);
+  }
+}

package/src/components/card.scss

@@ -61,9 +61,14 @@
   /*@apply flex  justify-center items-center;*/
 }
 
+.form-composer-card{
+    min-height: 100%;
+}
+
 .employeeCard {
-  @apply bg-white shadow-card p-md mb-xl;
-  border-radius: 4px;
+  @apply bg-white shadow-card p-xl;
+  padding-inline: 48px;
+  border-radius: 6px;
 
   .card-header {
     @apply text-text-primary text-heading-xl font-bold font-rc align-middle text-left mb-md;
@@ -215,7 +220,6 @@
     /*  TODO need to revisit that we need mx-md NABEEL/ANIL
      @apply mb-md mx-md !important;
     */
-    @apply mb-md !important;
 
     &.filter {
       margin-left: auto;
@@ -236,7 +240,6 @@
     }
 
     .card-section-header {
-      margin-bottom: 40px;
       @apply text-heading-m-dt;
     }
 
@@ -287,8 +290,7 @@
           margin-right: unset;
         }
       }
-    }
-*/
+    }*/
 
     /* CSS for vertical label-field layout */
 
@@ -296,6 +298,7 @@
       display: flex;
       flex-direction: column;
       gap: 8px;
+      justify-content: center;
       /* Adjust spacing between label and field */
       /* Space between form groups */
     }

package/src/components/financeUi.scss

@@ -877,9 +877,9 @@
 
 
 .custom-stepper-card {
-  width: 280px;
-  background: #f3f3f3;
-  padding: 30px 24px;
+  width: 20%;
+  background: #FFFFFF;
+  padding: 25px 25px;
   border-radius: 10px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.08);
 }
@@ -933,4 +933,12 @@
 .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

@@ -23,7 +23,7 @@
 @screen dt {
   .InboxComposerWrapper {
     grid-template-columns: calc(25% - 32px) 75%;
-    @apply grid gap-x-8 gap-y-6;
+    @apply grid gap-x-4 gap-y-4;
   }
 
   .wns-inbox-composer {

package/src/components/juridictions.scss

@@ -4,20 +4,11 @@
   gap: 8px;
 }
 
-.juridictions {
+.juridiction-form {
+  padding: 16px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  width: 100%;
-  grid-column: span 2;
   gap: 16px;
-
-  .juridiction-form {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  .label-field-pair {
-    display: flex;
-    flex-direction: row;
-  }
 }
+
+

package/src/components/moduleHeader.scss

@@ -45,7 +45,8 @@
     background: linear-gradient(278deg, rgba(110, 192, 221, 0.71) -24.44%, rgba(97, 119, 236, 0.9) 93.53%);
     padding: 5px 20px;
     border-radius: 11px;
-
+    position: relative;
+    z-index: 99999;
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -85,6 +86,10 @@
       align-items: center;
       justify-content: center;
       padding-left: 20px;
+
+      @media (max-width:768px){
+        display: none !important;
+      }
     }
 
     .breadcrumbs {
@@ -108,6 +113,72 @@
       justify-content: center;
       border-right: 1px solid #fff;
       padding-right: 20px;
+      @media (max-width:768px){
+        display: none;
+      }
     }
+      @media (max-width:768px){
+    justify-content: space-between;
+  }
+  }
+}
+
+.hamburger-btn{
+  display:none;
+  background:none;
+  border:none;
+  font-size:22px;
+  color:white;
+  cursor:pointer;
+}
+
+.mobile-menu{
+  display:none;
+}
+
+@media (max-width:768px){
+
+  .hamburger-btn{
+    display:block;
+  }
+
+  .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;
+    opacity: 1;
+  }
+
+  .mobile-menu.open{
+    display:flex;
+    position: absolute;
+    z-index: 999;
+  }
+
+  .mobile-back{
+    font-weight:600;
+    padding-bottom:10px;
+    border-bottom:1px solid #eee;
+    cursor: pointer;
+  }
+
+  .crumbs {
+    width: max-content;
+     cursor: pointer;
+  }
+
 }

package/src/components/radiobtn.scss

@@ -1,9 +1,10 @@
 .radio-wrap {
-  @apply my-sm block leading-10 mb-lg;
-
-  div {
-    @apply block mb-md;
+  flex-wrap: wrap;
+  .radio-btn-outer-wrap {
+  display: flex;
+  align-items: center;
   }
+  @apply my-sm block leading-10 mb-lg;
 
   .radio-btn-wrap {
     @apply block float-left relative;
@@ -15,15 +16,15 @@
   }
 
   .radio-btn {
-    @apply opacity-0 absolute cursor-pointer h-10 w-10;
+    @apply opacity-0 absolute cursor-pointer h-10 w-4;
   }
 
   .radio-btn-checkmark {
-    @apply h-10 w-10 border border-input-border border-solid rounded-full block;
+    @apply h-4 w-4 border border-input-border border-solid rounded-full block;
   }
 
   label {
-    @apply text-text-primary text-form-field ml-md;
+    @apply text-text-primary text-form-field ml-sm;
   }
 
   .radio-btn-checkmark:after {
@@ -34,9 +35,13 @@
     @apply border-2 border-primary-main;
   }
 
-  .radio-btn-wrap input:checked ~ .radio-btn-checkmark:after {
-    @apply block bg-primary-main h-5 w-5 rounded-full absolute top-10 left-10;
-  }
+.radio-btn-wrap input:checked ~ .radio-btn-checkmark:after {
+  @apply block bg-primary-main h-3 w-3 rounded-full absolute;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 }
 .reverse-radio-selection-wrapper{
   div{

package/src/components/textfields.scss

@@ -56,14 +56,6 @@
     width: 240px;
   }
 
-  .card-input-error {
-    width: 480px;
-  }
-
-  .employee-card-input-error {
-    @apply w-full;
-  }
-
   .card-textarea {
     /* //width: 480px; */
     @apply w-full;
@@ -80,7 +72,7 @@
 }
 
 .citizen-card-input {
-  @apply mb-lg 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;
+  @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;
 }
 
 .citizen-card-input--front {

package/src/digitv2/components/FormComposerV2.scss

@@ -48,7 +48,7 @@
 }
 
 .employee-card-input {
-  @apply mb-lg 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;
+  @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;
 }
 .employee-card-input:disabled {
@@ -82,7 +82,7 @@
 }
 
 .citizen-card-input {
-  @apply mb-lg 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;
+  @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;
 }
 .citizen-card-input--front {

package/src/digitv2/components/radiobtnV2.scss

@@ -41,7 +41,10 @@
 
   .digit-radio-btn-wrap input:checked ~ .digit-radio-btn-checkmark:after {
     /* @extend .light-background; */
-    @apply block bg-primary-main h-5 w-5 rounded-full absolute top-10 left-10;
+    @apply block bg-primary-main h-5 w-5 rounded-full absolute;
+    top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   }
 }
 .digit-reverse-radio-selection-wrapper {

package/src/index.scss

@@ -115,6 +115,7 @@
 @import "./components/moduleHeader.scss";
 @import "./components/VerticalTimeline.scss";
 @import "./components/juridictions.scss";
+@import "./pages/employee/hrms.scss";
 
 .display-none {
   display: none;
@@ -468,6 +469,20 @@ input[type="number"] {
   }
 }
 
+.phone-input-wrapper{
+  display: flex;
+}
+.phone-input-wrapper:hover {
+  .employee-card-input--front {
+    border: 1px solid #667eea;
+    border-right: 0;
+  }
+
+  input {
+    border: 1px solid #667eea;
+  }
+}
+    
 .text-input {
   @apply relative w-full;
 
@@ -537,6 +552,8 @@ input[type="number"] {
 .form-search-wrapper {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .result {
@@ -544,6 +561,8 @@ input[type="number"] {
   flex-direction: column;
   overflow-x: scroll;
   border-radius: 6px;
+  flex:1 1 0%;
+
 }
 .inbox-search-container {
   .result {
@@ -704,7 +723,7 @@ input[type="number"] {
   width: 100%;
   flex: 1;
   min-width: 0;
-  overflow-y: scroll;
+  margin-bottom: 56px;
 }
 
 .employee-app-wrapper {

package/src/pages/citizen/DocumentList.scss

@@ -191,7 +191,7 @@
 }
 
 .documentDetails_pdf {
-  @apply flex gap-10 cursor-pointer;
+  @apply  cursor-pointer;
 }
 .grid_section {
   @apply grid grid-cols-4 gap-4;