@djb25/digit-ui-css 1.0.22 → 1.0.23

package/package.json

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

package/src/components/body.scss

@@ -94,9 +94,9 @@ body {
   padding-inline: 24px;
 }
 
- .app-container{
-   height: 100%;
- }
+.app-container {
+  height: 100%;
+}
 
 @screen dt {
   .employee-app-homepage-container {
@@ -231,14 +231,14 @@ body {
     }
   }
 
-  .form-container{
-        gap:12px
-      }
-      
+  .form-container {
+    gap: 12px
+  }
+
   .app-container {
     width: 100%;
 
-      
+
     form {
       .card {
         max-width: 960px;
@@ -296,6 +296,7 @@ body {
   width: 100%;
   padding-bottom: 20px;
 }
+
 .module-carousel-header h3 {
   font-size: 20px;
   font-weight: 600;
@@ -313,12 +314,13 @@ body {
   background: #3B82F6;
   border-radius: 4px;
 }
+
 .module-carousel-header {
   background: linear-gradient(135deg, #3585c4, #6fa0f0 40%, #80b3ff);
   padding: 12px 16px;
   border-radius: 10px;
   align-items: center;
-  margin-top:10px;
+  margin-top: 10px;
 }
 
 .module-carousel-actions {
@@ -335,34 +337,35 @@ body {
 
 .carousel-track {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  grid-auto-flow: row;
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
   gap: 20px;
   overflow-x: auto;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
   width: 100%;
   padding: 10px 0px;
-column-gap: 20px;
+  column-gap: 20px;
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
 
+
 .carousel-track::-webkit-scrollbar {
   display: none;
 }
 
-.carousel-track > div {
+.carousel-track>div {
   scroll-snap-align: start;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  margin: 0 !important; 
+  margin: 0 !important;
 }
 
-.carousel-track {
-grid-template-columns: repeat(4, minmax(0, 1fr));
-}
+
+
 
 @media (min-width: 640px) {
 
@@ -370,6 +373,7 @@ grid-template-columns: repeat(4, minmax(0, 1fr));
     grid-auto-columns: calc((100% - 20px) / 2);
   }
 }
+
 @media (min-width: 1024px) {
   .carousel-track {
     grid-auto-columns: calc((100% - 3 * 20px) / 4);
@@ -416,6 +420,12 @@ grid-template-columns: repeat(4, minmax(0, 1fr));
   box-shadow: none;
 }
 
+@screen dt {
+  .carousel-track {
+    grid-auto-columns: calc((100% - 3 * 20px) / 4);
+  }
+}
+
 @screen dt {
   .carousel-track {
     grid-auto-columns: calc((100% - 3 * 20px) / 4);

package/src/components/card.scss

@@ -162,6 +162,7 @@
   cursor: pointer;
   height: 36px !important;
   border: none !important;
+
   &:focus {
     @apply outline-none;
   }
@@ -185,6 +186,7 @@
 }
 
 @screen dt {
+
   .submit-bar,
   .submit-bar-disabled {
     width: 240px;
@@ -346,7 +348,7 @@
     }
 
     /* Remove any default margins that might interfere */
-    .label-field-pair > * {
+    .label-field-pair>* {
       margin: 0;
       width: 100%;
     }
@@ -378,8 +380,7 @@
       margin-right: auto;
     }
 
-    .header-content {
-    }
+    .header-content {}
 
     .header-end {
       margin-left: auto;
@@ -469,76 +470,152 @@
 
 .new-employee-card {
   position: relative;
-  border: 1px solid #f3f4f6;
-  border-radius: 12px;
-  padding: 15px;
+  background-color: #ffffff;
+  background-image:
+    radial-gradient(circle at 0% 0%, rgba(186, 230, 253, 0.6) 0%, transparent 60%),
+    radial-gradient(circle at 100% 0%, rgba(243, 232, 255, 0.5) 0%, transparent 60%),
+    radial-gradient(circle at 100% 100%, rgba(255, 237, 213, 0.4) 0%, transparent 60%);
+  border: 1px solid #eef1f5;
+  border-radius: 20px;
+  padding: 10px;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 13px;
   width: 100%;
   max-width: 426px;
-  min-height: 210px;
-  box-shadow: 0 14px 10px -6px rgba(0, 0, 0, 0.12), 0 8px 12px -8px rgba(0, 0, 0, 0.08);
-  font-family: "Inter", -apple-system, sans-serif;
+  max-height: 180px;
+  box-shadow:
+    0 10px 25px -5px rgba(0, 0, 0, 0.04),
+    0 8px 10px -6px rgba(0, 0, 0, 0.02);
+  font-family: inherit;
   overflow: hidden;
-  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.new-employee-card:hover {
-  transform: translateY(-6px);
-  box-shadow: 0 24px 36px -8px rgba(0, 0, 0, 0.18), 0 12px 20px -10px rgba(0, 0, 0, 0.12);
+.new-employee-card::after {
+  content: "";
+  position: absolute;
+  top: -10%;
+  right: -5%;
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(circle, rgba(235, 244, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%);
+  filter: blur(40px);
+  border-radius: 50%;
+  z-index: 0;
+  pointer-events: none;
 }
 
 .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.5;
+  bottom: -15%;
+  left: -10%;
+  width: 250px;
+  height: 250px;
+  background: radial-gradient(circle, rgba(245, 243, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
+  filter: blur(50px);
+  border-radius: 50%;
   z-index: 0;
+  pointer-events: none;
+}
+
+.new-employee-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
 }
 
-.new-employee-card > * {
+.new-employee-card>* {
   position: relative;
   z-index: 1;
 }
 
 .card-header-row {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
+  gap: 12px;
   position: relative;
-  padding-bottom: 12px;
-}
-.card-header-row::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg, #1a67a3 0%, rgba(26, 103, 163, 0) 100%);
-  border-radius: 2px;
+  padding-bottom: 16px;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent 0%, #e5e7eb 50%, transparent 100%);
+  }
 }
 
 .module-title {
-  font-size: 1.25rem;
-  font-weight: 700;
+  font-size: 1.15rem;
+  font-weight: 600;
   color: #111827;
   margin: 0;
 }
 
 .module-icon-wrap {
-  width: 36px;
-  height: 36px;
-  background-color: #1a67a3;
-  border-radius: 8px;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #ffffff;
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+  z-index: 1;
+
+  &.icon-blue {
+    background-color: #f0f9ff;
+    color: #0c4a6e;
+  }
+
+  &.icon-purple {
+    background-color: #faf5ff;
+    color: #581c87;
+  }
+
+  &.icon-orange {
+    background-color: #fff7ed;
+    color: #7c2d12;
+  }
+
+  &.icon-green {
+    background-color: #f0fdf4;
+    color: #14532d;
+  }
+
+  &.icon-brown {
+    background-color: #fffbeb;
+    color: #713f12;
+  }
+
+  &.icon-violet {
+    background-color: #f5f3ff;
+    color: #4c1d95;
+  }
+
+  &.icon-teal {
+    background-color: #f0fdfa;
+    color: #134e4a;
+  }
+
+  &.icon-default {
+    background-color: #f8fafc;
+    color: #334155;
+  }
+
+  svg {
+    width: 26px;
+    height: 26px;
+    display: block;
+  }
+}
+
+.new-employee-card:hover .module-icon-wrap {
+  transform: scale(1.05);
 }
 
 .card-body-row {
@@ -554,11 +631,10 @@
 }
 
 .main-kpi-number {
-  font-size: 4.5rem;
+  font-size: 2.5rem;
   font-weight: 700;
-  color: #1a67a3;
-  line-height: 0.8;
-  letter-spacing: -2px;
+  color: #111827;
+  line-height: 1;
 }
 
 .main-kpi-label-wrap {
@@ -581,9 +657,9 @@
 }
 
 .main-kpi-label {
-  color: #1a67a3;
-  font-weight: 500;
-  font-size: 1.1rem;
+  color: #6b7280;
+  font-weight: 400;
+  font-size: 0.9rem;
 }
 
 .secondary-kpi-section {
@@ -649,34 +725,37 @@
 }
 
 .pill-link {
-  background-color: #eff6ff;
-  color: #1a67a3;
-  padding: 6px 12px;
-  border-radius: 6px;
-  font-size: 9px;
-  font-weight: 600;
+  color: #2563eb;
+  padding: 6px 14px;
+  font-size: 13px;
+  font-weight: 500;
   text-decoration: none;
-  transition: background-color 0.2s;
+  transition: all 0.2s;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-align: center;
+  border: 1px solid #dbeafe;
+  border-radius: 20px;
+  background-color: #f8fbff;
 }
 
 .pill-link:hover {
-  background-color: #dbeafe;
+  background-color: #eff6ff;
+  border-color: #bfdbfe;
+  transform: translateY(-1px);
 }
 
 .details-btn {
-  background-color: #1e293b;
-  color: #ffffff;
-  padding: 6px 20px;
+  background-color: transparent;
+  color: #111827;
+  padding: 6px 16px;
   border-radius: 6px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  border: none;
+  font-size: 0.85rem;
+  font-weight: 500;
+  border: 1px solid #e5e7eb;
   cursor: pointer;
-  transition: background-color 0.2s;
+  transition: all 0.2s;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -685,7 +764,8 @@
 }
 
 .details-btn:hover {
-  background-color: #0f172a;
+  background-color: #f9fafb;
+  border-color: #d1d5db;
 }
 
 /* --- NEW: EXPANDED VIEW OVERLAY --- */
@@ -1184,6 +1264,7 @@
   justify-content: center;
   transition: background-color 0.2s, color 0.2s;
   flex-shrink: 0;
+  outline: none !important;
 }
 
 .collapse-toggle:hover {
@@ -1297,4 +1378,4 @@
 .collapsed .nav-item-content {
   justify-content: center;
   padding: 12px 0;
-}
+}