@djb25/digit-ui-css 1.0.10 → 1.0.12

package/src/components/body.scss

@@ -90,15 +90,141 @@ body {
   }
 }
 
+.module-container {
+  padding-inline: 24px;
+}
+
 @screen dt {
+  .employee-app-homepage-container {
+    @apply w-full;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding-top: 12px;
+    padding-inline: 58px;
+  }
+
   .employee-app-container {
     @apply w-full;
     display: flex;
     flex-direction: column;
     gap: 12px;
-    padding: 12px 24px;
+    padding-top: 12px;
   }
 
+  .wt-inbox {
+    .header {
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: #fff;
+      border-radius: 11px;
+      padding: 5px 20px;
+      font-weight: 500;
+    }
+  }
+
+  .form-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 20px;
+    width: 100%;
+
+    .header {
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: #fff;
+      border-radius: 11px;
+      padding: 5px 20px;
+      font-weight: 500;
+      border-bottom: 2px solid #000;
+    }
+
+    .ws-docs-container {
+      padding: 8px 0;
+    }
+
+    .ws-doc-card {
+      background: #ffffff;
+      border: 1px solid #e0e0e0;
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 20px;
+      transition: all 0.2s ease;
+    }
+
+    .ws-doc-card:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    }
+
+    .ws-doc-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    .ws-doc-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: #0b0c0c;
+    }
+
+    .ws-doc-required {
+      background-color: #ffe8e8;
+      color: #d32f2f;
+      padding: 4px 10px;
+      font-size: 12px;
+      border-radius: 20px;
+      font-weight: 600;
+    }
+
+    .ws-doc-description {
+      font-size: 15px;
+      color: #555;
+      margin-bottom: 16px;
+      line-height: 22px;
+    }
+
+    .ws-doc-options {
+      padding-left: 4px;
+    }
+
+    .ws-doc-option {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 8px;
+      font-size: 15px;
+      color: #333;
+    }
+
+    .ws-doc-bullet {
+      font-weight: 600;
+      margin-right: 8px;
+    }
+    form {
+      .card {
+        max-width: 960px;
+
+        h2 {
+          text-align: left;
+        }
+
+        button {
+          max-width: 240px;
+        }
+
+        .input-otp-wrap,
+        .card-text-button {
+          text-align: left;
+        }
+      }
+    }
+  }
   .app-container {
     width: 100%;
 
@@ -150,4 +276,4 @@ body {
   margin-right: -27%;
   max-height: 120px;
   margin-top: 90px;
-}
+}

package/src/components/card.scss

@@ -180,7 +180,6 @@
 }
 
 @screen dt {
-
   .submit-bar,
   .submit-bar-disabled {
     width: 240px;
@@ -343,7 +342,7 @@
     }
 
     /* Remove any default margins that might interfere */
-    .label-field-pair>* {
+    .label-field-pair > * {
       margin: 0;
     }
 
@@ -374,7 +373,8 @@
       margin-right: auto;
     }
 
-    .header-content {}
+    .header-content {
+    }
 
     .header-end {
       margin-left: auto;
@@ -415,7 +415,8 @@
     margin-bottom: 24px;
   }
 
-  .info-banner-wrap-citizen-override {}
+  .info-banner-wrap-citizen-override {
+  }
 
   .oc-aknowledgement-screen {
     width: auto;
@@ -468,13 +469,8 @@
   width: 100% !important;
 }
 
-
-
-
 .new-employee-card {
-  background-image: url("https://objectstorage.ap-hyderabad-1.oraclecloud.com/n/axn3czn1s06y/b/djb-dev-asset-bucket/o/dashboard_card_img.png");
-  background-size: cover;
-  background-position: center;
+  position: relative;
   border: 1px solid #f3f4f6;
   border-radius: 12px;
   padding: 15px;
@@ -484,7 +480,24 @@
   width: 100%;
   max-width: 426px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  font-family: 'Inter', -apple-system, sans-serif;
+  font-family: "Inter", -apple-system, sans-serif;
+  overflow: hidden;
+}
+
+.new-employee-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url("https://objectstorage.ap-hyderabad-1.oraclecloud.com/n/axn3czn1s06y/b/djb-dev-asset-bucket/o/dashboard_card_img.png");
+  background-size: cover;
+  background-position: center;
+  opacity: 0.2;
+  z-index: 0;
+}
+
+.new-employee-card>* {
+  position: relative;
+  z-index: 1;
 }
 
 .card-header-row {
@@ -631,7 +644,6 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-
 }
 
 .pill-link:hover {
@@ -655,14 +667,9 @@
   background-color: #0f172a;
 }
 
-
-
-
-
 /* --- EXISTING CARD STYLES (Keep your existing styles) --- */
 /* Ensure .new-employee-card, .card-header-row, etc. remain as they were */
 
-
 /* --- NEW: EXPANDED VIEW OVERLAY --- */
 .expanded-overlay {
   position: fixed;
@@ -840,9 +847,6 @@
   padding: 20px 0;
 }
 
-
-
-
 /* --- EXPANDED VIEW OVERLAY --- */
 .expanded-page-container {
   display: flex;
@@ -975,7 +979,6 @@
   opacity: 1;
 }
 
-
 /* --- RIGHT CONTENT --- */
 .expanded-content {
   flex: 1;
@@ -1037,7 +1040,7 @@
 }
 
 .module-link-card::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   top: 0;
@@ -1111,10 +1114,6 @@
   padding: 20px 0;
 }
 
-
-
-
-
 :root {
   /* Dimensions */
   --sidebar-expanded: 280px;
@@ -1137,28 +1136,25 @@
 
 /* --- Base Sidebar --- */
 .premium-sidebar {
+  height: 100%;
   display: flex;
   flex-direction: column;
-  height: stretch;
   background-color: var(--bg-color);
   border-right: 1px solid var(--border-color);
   transition: width var(--transition-slow);
   overflow-x: hidden;
   box-sizing: border-box;
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-family: "Inter", system-ui, -apple-system, sans-serif;
   box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02);
 }
 
 /* Width Control */
 .premium-sidebar.expanded {
   width: var(--sidebar-expanded);
-  margin-left: -29px;
 }
 
 .premium-sidebar.collapsed {
   width: var(--sidebar-collapsed);
-  margin-left: -29px;
-
 }
 
 /* --- Header & Brand --- */
@@ -1331,4 +1327,4 @@
 .collapsed .nav-item-content {
   justify-content: center;
   padding: 12px 0;
-}
+}

package/src/components/checkbox.scss

@@ -1,84 +1,93 @@
 .checkbox-wrap {
-  @apply flex mb-md relative items-baseline;
-
-  input {
-    width: 38px;
-    height: 38px;
-    @apply opacity-0 absolute top-0 left-0 z-10;
-  }
-
-  .input-emp {
-    @extend input;
-    width: 24px;
-    height: 24px;
-  }
-
-  .custom-checkbox {
-    width: 25px;
-    height: 25px;
-    @apply absolute top-0 left-0 border border-solid border-input-border z-0;
-
-    img {
-      @apply opacity-0;
-    }
-
-    svg {
-      @apply opacity-0;
-    }
-  }
-
-  .custom-checkbox-emp {
-    @extend .custom-checkbox;
-    width: 24px;
-    height: 24px;
-  }
-
-  input:checked ~ .custom-checkbox,
-  input:hover ~ .custom-checkbox {
-    @apply border-2 border-primary-main;
-  }
-
-  input:checked ~ .custom-checkbox img {
-    @apply opacity-100;
-  }
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-bottom: 16px;
+  gap: 8px;
+}
 
-  input:checked ~ .custom-checkbox svg {
-    @apply opacity-100;
-  }
+/* Hide default checkbox */
+.checkbox-wrap input {
+  width: 38px;
+  height: 38px;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  cursor: pointer;
+}
 
-  .label {
-    margin-left: 32px;
-    top: 3px !important;
-    @apply text-form-field text-text-primary relative top-10;
-  }
+/* Employee size */
+.checkbox-wrap input.input-emp {
+  width: 24px;
+  height: 24px;
 }
 
-.fsm-citizen-rating-wrapper {
-  .card-label:last-of-type {
-    margin-top: 24px;
-  }
+/* Custom checkbox box */
+.checkbox-wrap .custom-checkbox {
+  width: 38px;
+  height: 38px;
+  border: 2px solid #ccc;
+  background-color: #fff;
+  border-radius: 2px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s ease;
+}
 
-  .card-label {
-    margin-bottom: 24px;
-  }
+/* Employee checkbox size */
+.checkbox-wrap .custom-checkbox-emp {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #ccc;
+  background-color: #fff;
+  border-radius: 2px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s ease;
 }
 
-.fsm-citizen-rating-wrapper {
-  .card-label:last-of-type {
-    margin-top: 24px;
-  }
+/* SVG tick */
+.checkbox-wrap .custom-checkbox svg,
+.checkbox-wrap .custom-checkbox-emp svg {
+  opacity: 0;
+  color: #e84335;
+  transition: opacity 0.15s ease;
+  pointer-events: none;
+}
 
-  .card-label {
-    margin-bottom: 24px;
-  }
+/* Checked state */
+.checkbox-wrap input:checked + .custom-checkbox,
+.checkbox-wrap input:checked + .custom-checkbox-emp {
+  border-color: #e84335;
 }
 
-.fsm-citizen-rating-wrapper {
-  .card-label:last-of-type {
-    margin-top: 24px;
-  }
+.checkbox-wrap input:checked + .custom-checkbox svg,
+.checkbox-wrap input:checked + .custom-checkbox-emp svg {
+  opacity: 1;
+}
 
-  .card-label {
-    margin-bottom: 24px;
-  }
+/* Disabled */
+.checkbox-wrap input:disabled + .custom-checkbox,
+.checkbox-wrap input:disabled + .custom-checkbox-emp {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
+
+/* Label */
+.checkbox-wrap .label {
+  margin-left: 48px;
+  font-size: 14px;
+  color: #333;
+}

package/src/components/financeUi.scss

@@ -872,4 +872,65 @@
 
 .main-home {
     padding-top: 80px !important;
+}
+
+
+
+.custom-stepper-card {
+  width: 280px;
+  background: #f3f3f3;
+  padding: 30px 24px;
+  border-radius: 10px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+}
+
+.stepper-row {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+}
+
+.stepper-left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 18px;
+}
+
+.step-circle {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2px solid #d6d9de;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  color: #5c6670;
+  font-size: 16px;
+}
+
+.step-circle.active {
+  background: #5a6ee1;
+  color: white;
+  border: 6px solid #f5d9c8;   /* peach outer ring */
+}
+
+.step-line {
+  width: 2px;
+  height: 50px;
+  background: #d6d9de;
+}
+
+.step-label {
+  margin-top: 10px;
+  font-size: 15px;
+  color: #4b5563;
+  font-weight: 500;
+}
+
+.step-label.active-text {
+  color: #5a6ee1;
+  font-weight: 600;
 }

package/src/components/hoc/InboxComposer.scss

@@ -43,7 +43,7 @@
     .SubmitAndClearAllContainer {
       width: 100%;
       display: flex;
-      justify-content: end;
+      justify-content: flex-end;
       align-items: center;
       .clear-search {
         width: 30%;
@@ -82,10 +82,13 @@
 
     .filter-form {
       height: fit-content;
+      border-radius: 6px;
+      background-color: #ffff;
     }
 
     .search-complaint-container {
       flex-direction: column;
+      border-radius: 6px;
       align-items: flex-start;
       --bg-opacity: 1;
       background-color: #fff;

package/src/components/moduleHeader.scss

@@ -32,7 +32,7 @@
 
     display: flex;
     align-items: center;
-    justify-content: start;
+    justify-content: flex-start;
     color: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
     font-size: 14px;
@@ -65,6 +65,20 @@
       padding-left: 20px;
     }
 
+    .breadcrumbs {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .right-section-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      width: 100%;
+    }
+
     .left-section {
       display: flex;
       gap: 10px;

package/src/components/topbar.scss

@@ -22,8 +22,15 @@
       height: 60px;
     }
 
+    &.spect-icon {
+      width: auto;
+      padding-right: 20px;
+      max-height: 50px;
+    }
+
     &.state {
       height: 50px;
+      max-height: 20px;
       width: auto;
     }
   }
@@ -49,6 +56,7 @@
       height: 43px;
       width: 43px;
       font-weight: 700;
+      text-align: center;
     }
   }
 

package/src/digitv2/components/appContainerV2.scss

@@ -13,7 +13,8 @@
         text-align: left;
       }
 
-      .field-container {}
+      .field-container {
+      }
 
       button {
         @extend .light-primary-button;
@@ -32,7 +33,6 @@
 @screen dt {
   .employee-app-container {
     @apply w-full;
-    padding-inline: 0px;
   }
 
   .app-container {
@@ -61,4 +61,4 @@
       }
     }
   }
-}
+}