@djb25/digit-ui-css 1.0.18 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djb25/digit-ui-css",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "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%;
@@ -228,9 +231,14 @@ body {
     }
   }
 
+  .form-container{
+        gap:12px
+      }
+      
   .app-container {
     width: 100%;
 
+      
     form {
       .card {
         max-width: 960px;

package/src/components/card.scss

@@ -61,9 +61,13 @@
   /*@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-md;
+  border-radius: 6px;
 
   .card-header {
     @apply text-text-primary text-heading-xl font-bold font-rc align-middle text-left mb-md;
@@ -215,7 +219,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 +239,6 @@
     }
 
     .card-section-header {
-      margin-bottom: 40px;
       @apply text-heading-m-dt;
     }
 
@@ -287,8 +289,7 @@
           margin-right: unset;
         }
       }
-    }
-*/
+    }*/
 
     /* CSS for vertical label-field layout */
 
@@ -296,6 +297,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

@@ -886,7 +886,7 @@
 
 .stepper-row {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   position: relative;
 }
 

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/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/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/employee/container.scss

@@ -56,7 +56,6 @@
   border-right: 1px solid #e0e0e0;
   background: #f8f9fa;
   transition: width 0.3s ease;
-  width: 100%;
 }
 
 .employee-app-wrapper {
@@ -84,11 +83,6 @@
     flex-direction: row;
   }
 
-  .ground-container {
-    margin-bottom: 56px;
-    /* @apply p-md; */
-  }
-
   .collapsible-sidebar-container {
     width: auto;
   }

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

@@ -14,6 +14,24 @@
 
 .stepper-form-wrapper {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 20px;
+  gap: 20px 48px;
+  height: max-content;
+  .employee-select-wrap{
+    margin-bottom: 0;
+  }
+  @media (min-width:768px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media (max-width:768px){
+    
+      @media (max-width:480px){
+        display: flex;
+        flex-direction: column;
+      }
+    gap: 20px 10px;
+  }
+
+  .card-label-smaller{
+    width: 100%;
+  }
 }

package/src/pages/employee/hrms.scss

@@ -0,0 +1,19 @@
+.employee-form {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 24px;
+  overflow-y: auto;
+}
+
+.mobile-view {
+    flex-direction: column !important;
+    gap: 0 !important;
+}
+
+@media (max-width: 768px) {
+  .employee-form {
+    flex-direction: column;
+    gap: 24px;
+  }
+}

package/src/pages/employee/inbox.scss

@@ -139,6 +139,7 @@
 
 .inbox-container {
   gap: 16px;
+
   .filters-container {
     .filter {
       .filter-card {
@@ -294,10 +295,13 @@
 
   .inbox-container {
     @apply flex;
+    height: inherit;
+    padding-bottom: 24px;
 
     .filters-container {
       width: 270px;
-
+      overflow-y: scroll;
+      
       .filter {
         @apply mt-md;