@djb25/digit-ui-css 1.0.0 → 1.0.1

package/src/components/landingpage.scss

@@ -327,17 +327,142 @@ body {
   padding: 30px 0 30px 0; /* extra bottom padding */
   display: flex;
   justify-content: center;
-  background: #f0f0f0;;
+  background: #f0f0f0;
+  position: relative;
 }
 
 .mcd-hero-container {
   width: 96%;
-  background: #fff;
-  border-radius: 22px;
+  background: #0a2f57;;
+  overflow: hidden;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
+  position: relative;
+  border-radius: 28px;
+  overflow: hidden;
+}
+
+.mcd-hero-split {
+  display: flex;
+  height: 380px;
+}
+
+/* LEFT */
+.mcd-hero-left {
+  width: 40%;
+  position: relative;
+  padding: 56px 40px;
+  overflow: hidden;
+  /* Deep Govt Blue Gradient */
+  background:
+    radial-gradient(
+      circle at top,
+      #2f5f8f 0%,
+      #0d3c63 35%,
+      #082947 100%
+    );
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.mcd-hero-left::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -60px;
+  width: 120px;
+  height: 100%;
+
+  background: linear-gradient(
+    to right,
+    #0a2f57 0%,
+    rgba(10, 47, 87, 0.7) 50%,
+    rgba(10, 47, 87, 0) 100%
+  );
+
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+
+
+.mcd-hero-logo {
+  width: 205px;
+  margin-bottom: 20px;
+  background: #ffffff;
+  border-radius: 100px;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+
+}
+
+.mcd-hero-logo:hover {
+  box-shadow:
+    0 0 0 6px rgba(255, 255, 255, 0.35),
+    0 14px 32px rgba(0, 0, 0, 0.35);
+  transform: scale(1.02);
+}
+
+.mcd-hero-welcome-text {
+  font-size: 18px;
+  font-weight: 400;
+  opacity: 0.9;
+  margin: 0 0 6px 0;
+}
+
+.mcd-hero-title {
+  font-size: 40px;
+  font-weight: 700;
+  margin: 0;
+  line-height: 1.2;
+}
+
+
+/* RIGHT */
+.mcd-hero-right {
+  position: relative;
+  overflow: hidden;
+  width: 60%;
+}
+
+.mcd-hero-right::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+
+  background: radial-gradient(
+    ellipse at center,
+    rgba(0, 0, 0, 0) 55%,
+    rgba(0, 0, 0, 0.18) 100%
+  );
+
+  pointer-events: none;
+}
+
+
+/* Main Banner */
+.mcd-hero-container {
+  border-radius: 28px;
   overflow: hidden;
-  box-shadow: 0 4px 25px rgba(0,0,0,0.1);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
+}
+
+
+/* 🔹 Overlap Image */
+.mcd-hero-overlap-img {
+  position: absolute;
+  top: -40px;          /* overlaps ABOVE banner */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 160px;
+  z-index: 10;
+  pointer-events: none;
 }
 
+
 .mcd-hero-main-img {
   width: 100%;
   height: auto;
@@ -345,6 +470,76 @@ body {
   display: block;
 }
 
+@keyframes fadeUpSlow {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+
+.hero-animate .mcd-hero-logo {
+  animation: fadeUpSlow 0.9s ease-out forwards;
+}
+
+.hero-animate .mcd-hero-welcome-text {
+  animation: fadeUpSlow 0.9s ease-out forwards;
+  animation-delay: 0.2s;
+}
+
+.hero-animate .mcd-hero-title {
+  animation: fadeUpSlow 0.9s ease-out forwards;
+  animation-delay: 0.4s;
+}
+
+@keyframes imageFadeSlow {
+  from {
+    opacity: 0;
+    transform: scale(1.04);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.hero-animate .mcd-hero-main-img {
+  animation: imageFadeSlow 1.1s ease-out forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-animate * {
+    animation: none !important;
+  }
+}
+
+
+
+
+@media (max-width: 768px) {
+  .mcd-hero-split {
+    flex-direction: column;
+  }
+
+  .mcd-hero-left,
+  .mcd-hero-right {
+    width: 100%;
+  }
+
+  .mcd-hero-left {
+    padding: 48px 24px;
+  }
+
+  .mcd-hero-main-img {
+    height: 260px;
+  }
+}
+
+
 /* SEARCH BAR FLOATS BELOW HERO */
 .mcd-search-wrapper {
   width: 100%;
@@ -403,36 +598,62 @@ body {
   max-width: 900px;
   margin: 50px auto 0 auto;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 12px;
   padding: 10px 0 10px 0;
 }
 
 .mcd-suggested-label {
-  color: #666;
   font-size: 14px;
   font-weight: 600;
+  color: #6b7280; /* subtle grey */
 }
 
 /* Link Buttons (KSMART pill style) */
 .mcd-suggested-btn {
-  background: #f0f4ff;
-  border: 1px solid #d6ddf7;
-  border-radius: 8px;
-  padding: 8px 20px;
+  background: #ffffff;
+  border: 1px solid #dbe3f0;
+  border-radius: 999px;
+
+  padding: 8px 18px;
   font-size: 14px;
-  color: #38445c;
+  font-weight: 500;
+  color: #0b4fa3;
+
   cursor: pointer;
-  transition: 0.2s ease;
   white-space: nowrap;
+
+  transition:
+    transform 0.25s ease,
+    box-shadow 0.25s ease,
+    border-color 0.25s ease;
 }
 
 .mcd-suggested-btn:hover {
-  background: #e4eaff;
-  border-color: #c2c9f0;
+  transform: translateY(-3px);
+
+  border-color: #0b4fa3;
+
+  box-shadow:
+    0 10px 24px rgba(0, 0, 0, 0.12);
+}
+
+.mcd-suggested-btn:active {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
+.mcd-suggested-btn:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 3px rgba(11, 79, 163, 0.3),
+    0 10px 24px rgba(0, 0, 0, 0.12);
+}
+
+
+
 /* Mobile Responsive */
 @media (max-width: 768px) {
   .mcd-suggested-wrapper {
@@ -2332,8 +2553,7 @@ body {
 
 /* Main wrapper */
 .djb-page-wrapper {
-  max-width: 1200px;
-  margin: 0 auto;
+  margin: 0 35px;
   padding: 24px 16px 60px;
 }
 
@@ -3782,13 +4002,13 @@ svg text {
 /* ===== Skeleton Loader ===== */
 .pdf-skeleton {
   width: 100%;
-  min-height: 720px;
+  min-height: 720px;   /* same as pdf-container */
   padding: 16px;
   background: #f4f6f8;
   border-radius: 6px;
-  margin-bottom: 10px;
 }
 
+
 .skeleton-line {
   height: 14px;
   background: linear-gradient(90deg, #e0e0e0, #f0f0f0, #e0e0e0);
@@ -3858,3 +4078,14 @@ svg text {
   border-radius: 8px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }
+
+.pdf-container {
+  position: relative;
+}
+
+.pdf-loader-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  background: #f9f9f9;
+}

package/src/components/languageSelector.scss

@@ -10,13 +10,14 @@
   height: 2.5rem;
 }
 .bannerCard .customBtn {
-  border-color: theme(colors.text.secondary);
+  border-color: #505a5f;
 }
 .bannerCard .customBtn:focus {
   outline: none;
 }
 .bannerCard .customBtn-selected {
   border-color: transparent;
+  background-color: #5a1166 !important;
 }
 .bannerCard .bannerHeader p {
   font-size: 19px;

package/src/components/loader.scss

@@ -25,7 +25,7 @@
   position: absolute;
   width: 52px;
   height: 52px;
-  border: 12px solid theme(colors.secondary);
+  border: 12px solid #22394d;
   border-top-color: transparent;
   border-radius: 50%;
 }

package/src/components/metricsTable.scss

@@ -16,7 +16,7 @@
 
   .upper_green {
     @apply inline;
-    color: theme(colors.success);
+    color: #00703C;
   }
 }
 
@@ -24,5 +24,4 @@
   display: flex;
     flex-wrap: wrap;
     margin-top: 15px;
-    justify-content: space-evenly;
 }

package/src/components/multiLink.scss

@@ -39,7 +39,7 @@
         top: unset;
         @apply relative text-text-primary !important;
         svg{
-            fill: theme(colors.text.secondary);
+            fill: #505A5F;
         }
         span{
             @apply text-text-primary !important;

package/src/components/multiSelectDropdown.scss

@@ -40,8 +40,6 @@
         @apply absolute min-w-full z-20;
         div{
             @apply flex w-full bg-white;
-            justify-content: flex-start;
-            align-items: center;
             &:hover{
                 @apply bg-grey-mid;
             }
@@ -51,8 +49,6 @@
             }
             p{
                 padding: 12px;
-                margin-top: 5px;
-                margin-bottom: 5px;
                 @apply text-form-field text-text-primary;
             }
             .custom-checkbox{

package/src/components/navbar.scss

@@ -36,7 +36,7 @@
   flex-direction: column;
   align-items: center;
   padding-top: 30px;
-  background-color: theme(colors.white);
+  background-color: #ffffff;
 
   img {
     width: 89px;
@@ -53,12 +53,12 @@
         letter-spacing: 0.6px;
         font-weight: 700;
         font-size: 18px;
-        color: theme(colors.text.primary);
+        color: #0b0c0c;
       }
     }
   }
   .profile-divider {
-    border-top: 1px solid theme(colors.border);
+    border-top: 1px solid #d6d5d4;
     margin-left: 20px;
     margin-right: 20px;
     width: 90%;
@@ -111,12 +111,12 @@
     padding-right: 16px;
     padding-left: 16px;
     &.active {
-      border-left: 5px solid theme(colors.primary.main);
+      border-left: 5px solid #a82227;
       .menu-label {
-        color: theme(colors.primary.main);
+        color: #a82227;
       }
       .icon {
-        fill: theme(colors.primary.main);
+        fill: #a82227;
       }
     }
 
@@ -124,7 +124,6 @@
       cursor: pointer;
       display: flex;
       flex-direction: column;
-      
       .sidebar-link {
         display: flex;
         justify-content: space-between;
@@ -178,7 +177,6 @@
 }
 
 .drawer-desktop {
-  overflow: auto;
   .menu-item {
     border: 10px;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -221,22 +219,20 @@
       padding-right: 16px;
       padding-left: 16px;
       &.active {
-        border-left: 5px solid theme(colors.primary.main);
+        border-left: 5px solid #a82227;
         padding-left: 11px;
         .menu-label {
-          color: theme(colors.primary.main);
+          color: #a82227;
         }
         .icon {
-          fill: theme(colors.primary.main);
+          fill: #a82227;
         }
       }
 
       .submenu-container {
-        margin-left: 1.5rem;
         cursor: pointer;
         display: flex;
         flex-direction: column;
-        
         .sidebar-link {
           display: flex;
           justify-content: space-between;

package/src/components/plusMinus.scss

@@ -5,9 +5,9 @@
   justify-content: center;
 }
 .PlusMinusbutton{
-  border: 1px solid theme(colors.border);
-  background-color: theme(colors.grey.mid);
-  color: theme(colors.text.secondary);
+  border: 1px solid #d6d5d4;
+  background-color: #eeeeee;
+  color: #505a5f;
   font-size: 27px;
   font-weight: 400;
   text-align: center;

package/src/components/radiobtn.scss

@@ -1,10 +1,22 @@
 .radio-wrap {
+  line-height: 1.5rem !important;
   @apply my-sm block leading-10 mb-lg;
 
   div {
     @apply block mb-md;
   }
 
+  .radio-btn-checkmark {
+    height: 1.5rem !important;
+    width: 1.5rem !important;
+  }
+  .radio-btn-wrap input:checked ~ .radio-btn-checkmark:after {
+    top: 0.35rem !important;
+    left: 0.35rem !important;
+    height: 0.8rem !important;
+    width: 0.8rem !important;
+  }
+
   .radio-btn-wrap {
     @apply block float-left relative;
     &:hover {

package/src/components/searchAction.scss

@@ -14,7 +14,7 @@
     width: 18px;
     @apply h-6;
     path{
-      fill: theme(colors.primary.main);
+      fill: #a82227;
     }
   }
 }

package/src/components/selectdropdown.scss

@@ -18,19 +18,22 @@
   }
 }
 */
+.employee-select-wrap:active{
+  background-color: white
+}
 .employee-select-wrap {
-  @apply mb-lg relative rounded-md;
+  @apply mb-lg relative;
 
   .select {
-    @apply relative block w-full h-10 border border-solid border-input-border rounded-md;
+    @apply relative block w-full h-10 border border-solid border-input-border;
     &:hover {
-      @apply border-2 border-solid border-primary-main rounded-md;
+      @apply border-2 border-solid border-primary-main;
     }
     input[type="text"] {
       width: calc(100% - 32px);
       background-color: transparent;
 
-      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm rounded-md;
+      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
     }
 
     p {
@@ -48,13 +51,16 @@
   }
 
   .select-active {
-    @apply relative block w-full h-10 border-2 border-solid border-primary-main rounded-md;
+    @apply relative block w-full h-10 border-2 border-solid border-primary-main;
+    height: 2 rem !important;
+    border: 1px solid black;
+    background-color: white;
 
     input[type="text"] {
       width: calc(100% - 32px);
       background-color: transparent;
 
-      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm rounded-md;
+      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
     }
 
     p {
@@ -77,8 +83,9 @@
   .options-card {
     width: 100% !important;
     box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
-    max-height: 400px;
+    max-height: 250px !important;
     overflow: auto;
+    z-index: 1000 !important;
     @apply absolute z-20 mt-xs bg-white max-w-full;
 
     p {
@@ -91,6 +98,23 @@
     }
   }
 }
+.fsm-registry-dropdown {
+  .select {
+    @apply flex;
+    input {
+      text-align: left;
+    }
+  }
+  .select-active {
+    text-align: left;
+  }
+  .options-card {
+    .profile-dropdown--item {
+      justify-content: left;
+    }
+  }
+  margin-bottom: 0;
+}
 
 .employee-select-wrap--elipses {
   width: 85% !important;
@@ -104,13 +128,13 @@
   max-width: 540px;
 
   .select {
-    @apply relative block w-full h-10 border border-solid border-input-border rounded-md;
+    @apply relative block w-full h-10 border border-solid border-input-border;
 
     input[type="text"] {
       width: calc(100% - 32px);
       background-color: transparent;
 
-      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm rounded-md;
+      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
     }
 
     p {
@@ -128,13 +152,13 @@
   }
 
   .select-active {
-    @apply relative block w-full h-10 border-2 border-solid border-primary-main rounded-md;
+    @apply relative block w-full h-10 border-2 border-solid border-primary-main;
 
     input[type="text"] {
       width: calc(100% - 32px);
       background-color: transparent;
 
-      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm rounded-md;
+      @apply absolute z-10 w-full h-full outline-none text-text-primary text-form-field pl-sm;
     }
 
     p {
@@ -170,5 +194,6 @@
   }
 }
 
-@screen dt {
+.employee-select-wrap .select img, .employee-select-wrap .select svg{
+  margin-top: 2px;
 }