@djb25/digit-ui-css 1.0.14 → 1.0.16

package/package.json

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

package/src/components/card.scss

@@ -180,7 +180,6 @@
 }
 
 @screen dt {
-
   .submit-bar,
   .submit-bar-disabled {
     width: 240px;
@@ -298,7 +297,6 @@
       flex-direction: column;
       gap: 8px;
       /* Adjust spacing between label and field */
-      margin-bottom: 16px;
       /* Space between form groups */
     }
 
@@ -308,6 +306,7 @@
       color: #333;
       font-size: 14px;
       line-height: 1.4;
+      width: 100%;
     }
 
     .label-field-pair .field {
@@ -343,8 +342,9 @@
     }
 
     /* Remove any default margins that might interfere */
-    .label-field-pair>* {
+    .label-field-pair > * {
       margin: 0;
+      width: 100%;
     }
 
     /* Ensure proper spacing for the mandatory asterisk */
@@ -374,7 +374,8 @@
       margin-right: auto;
     }
 
-    .header-content {}
+    .header-content {
+    }
 
     .header-end {
       margin-left: auto;
@@ -415,8 +416,6 @@
     margin-bottom: 24px;
   }
 
-  .info-banner-wrap-citizen-override {}
-
   .oc-aknowledgement-screen {
     width: auto;
     min-width: 240px;
@@ -474,7 +473,7 @@
   gap: 24px;
   width: 100%;
   max-width: 426px;
-  min-height: 270px;
+  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;
   overflow: hidden;
@@ -497,7 +496,7 @@
   z-index: 0;
 }
 
-.new-employee-card>* {
+.new-employee-card > * {
   position: relative;
   z-index: 1;
 }
@@ -506,6 +505,18 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  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;
 }
 
 .module-title {
@@ -518,7 +529,7 @@
 .module-icon-wrap {
   width: 36px;
   height: 36px;
-  background-color: #2563eb;
+  background-color: #1a67a3;
   border-radius: 8px;
   display: flex;
   justify-content: center;
@@ -541,7 +552,7 @@
 .main-kpi-number {
   font-size: 4.5rem;
   font-weight: 700;
-  color: #1d4ed8;
+  color: #1a67a3;
   line-height: 0.8;
   letter-spacing: -2px;
 }
@@ -566,7 +577,7 @@
 }
 
 .main-kpi-label {
-  color: #1d4ed8;
+  color: #1a67a3;
   font-weight: 500;
   font-size: 1.1rem;
 }
@@ -635,7 +646,7 @@
 
 .pill-link {
   background-color: #eff6ff;
-  color: #2563eb;
+  color: #1a67a3;
   padding: 6px 12px;
   border-radius: 6px;
   font-size: 0.75rem;
@@ -673,9 +684,6 @@
   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;
@@ -684,7 +692,6 @@
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.5);
-  /* Dim background */
   z-index: 9999;
   display: flex;
   justify-content: center;
@@ -703,7 +710,6 @@
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }
 
-/* --- LEFT SIDEBAR --- */
 .expanded-sidebar {
   width: 20%;
   background-color: #ffffff;
@@ -759,10 +765,8 @@
   background-color: #f3f4f6;
 }
 
-/* Active State matches the screenshot (Blue bg, White text) */
 .sidebar-item.active {
   background-color: #00adef;
-  /* Match the Property Tax highlight */
   color: #ffffff;
   box-shadow: 0 4px 6px rgba(0, 173, 239, 0.2);
   padding: 6px;
@@ -779,7 +783,6 @@
 
 .sidebar-item.active .sidebar-icon-placeholder svg {
   stroke: #ffffff;
-  /* Make icon white when active */
 }
 
 /* --- RIGHT CONTENT --- */
@@ -809,13 +812,6 @@
   gap: 12px;
 }
 
-.content-section-title {
-  font-size: 1rem;
-  font-weight: 700;
-  color: #1a365d;
-  margin-bottom: 16px;
-}
-
 .content-links-list {
   display: flex;
   flex-direction: column;
@@ -857,12 +853,8 @@
 .expanded-page-container {
   display: flex;
   width: 100%;
-  /* Adjust height to fit within the layout minus header/footer if needed, 
-     or just let it flow. 
-     For a "page" feel similar to the modal, let's give it min-height.
-  */
+
   min-height: calc(100vh - 100px);
-  /* border-radius: 8px; */
   overflow: hidden;
   gap: 20px;
 }
@@ -887,7 +879,6 @@
   max-width: 1200px;
   height: 80vh;
   background-color: #f7f8fa;
-  /* Light grey background like screenshot */
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
@@ -903,13 +894,6 @@
   flex-shrink: 0;
 }
 
-.sidebar-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-}
-
 .sidebar-title {
   font-size: 1.2rem;
   font-weight: 600;
@@ -947,7 +931,6 @@
   background-color: #f3f4f6;
 }
 
-/* Active State: Blue Background, White Text */
 .sidebar-item.active {
   background-color: #00adef;
   color: #ffffff;
@@ -972,15 +955,13 @@
 .sidebar-icon {
   width: 18px;
   height: 18px;
-  color: #2563eb;
-  /* Professional blue */
+  color: #1a67a3;
   transition: all 0.25s ease;
   opacity: 0.75;
 }
 
 .sidebar-item.active .sidebar-icon {
-  color: #1d4ed8;
-  /* Slightly deeper blue when active */
+  color: #1a67a3;
   transform: scale(1.1);
   opacity: 1;
 }
@@ -991,24 +972,10 @@
   background-color: #ffffff;
   padding: 30px;
   overflow-y: auto;
-  /* Gap between sidebar and content */
   border-radius: 8px;
   box-shadow: -2px 0 10px rgba(0, 0, 0, 0.02);
 }
 
-.content-header {
-  border-bottom: 1px solid #e5e7eb;
-  padding-bottom: 16px;
-  margin-bottom: 24px;
-}
-
-.content-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #1a365d;
-  margin: 0;
-}
-
 .content-section-title {
   font-size: 1rem;
   font-weight: 700;
@@ -1023,7 +990,6 @@
   margin-top: 16px;
 }
 
-/* Link Wrapper to handle <a> or <Link> tags */
 .link-wrapper a {
   text-decoration: none;
   color: inherit;
@@ -1052,7 +1018,7 @@
   top: 0;
   bottom: 0;
   width: 4px;
-  background: linear-gradient(135deg, #00adef, #2563eb);
+  background: linear-gradient(135deg, #00adef, #1a67a3);
   opacity: 0;
   transition: opacity 0.3s ease;
 }
@@ -1080,7 +1046,7 @@
 }
 
 .module-link-card:hover .link-card-label {
-  color: #2563eb;
+  color: #1a67a3;
 }
 
 .link-card-count {
@@ -1088,7 +1054,7 @@
   align-items: center;
   justify-content: center;
   background-color: #eff6ff;
-  color: #2563eb;
+  color: #1a67a3;
   font-size: 0.8rem;
   font-weight: 700;
   padding: 2px 8px;
@@ -1110,7 +1076,7 @@
 
 .module-link-card:hover .link-card-arrow {
   background-color: #dbeafe;
-  color: #2563eb;
+  color: #1a67a3;
   transform: translateX(4px);
 }
 
@@ -1132,7 +1098,7 @@
   --text-muted: #64748b;
   --hover-bg: #f8fafc;
   --active-bg: #eff6ff;
-  --active-text: #2563eb;
+  --active-text: #1a67a3;
 
   /* Animations */
   --transition-slow: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1177,14 +1143,13 @@
 .brand-container {
   display: flex;
   align-items: center;
-  /* Gap removed to allow for smooth width reduction */
 }
 
 .brand-icon {
   width: 36px;
   height: 36px;
   border-radius: 10px;
-  background: linear-gradient(135deg, #2563eb, #3b82f6);
+  background: linear-gradient(135deg, #1a67a3, #3b82f6);
   color: white;
   display: flex;
   justify-content: center;
@@ -1198,10 +1163,8 @@
   font-weight: 700;
   color: var(--text-main);
   margin: 0 0 0 16px;
-  /* Spacing applied here instead of flex gap */
   transition: opacity var(--transition-fast), width var(--transition-fast), margin var(--transition-fast);
   overflow: hidden;
-  /* Prevents text squishing */
 }
 
 .collapse-toggle {
@@ -1223,7 +1186,6 @@
   color: var(--text-main);
 }
 
-/* --- Navigation --- */
 .sidebar-nav {
   display: flex;
   flex-direction: column;
@@ -1244,7 +1206,6 @@
   display: flex;
   align-items: center;
   padding: 12px;
-  /* Gap removed here as well */
 }
 
 .nav-icon-wrapper {
@@ -1261,7 +1222,6 @@
   font-weight: 700;
   letter-spacing: 0.5px;
   background-color: var(--border-color);
-  /* Added a subtle background circle for initials */
   color: var(--text-muted);
   width: 100%;
   height: 100%;
@@ -1283,7 +1243,6 @@
   overflow: hidden;
 }
 
-/* Hover & Active States */
 .nav-link:hover {
   background-color: var(--hover-bg);
   color: var(--text-main);
@@ -1305,7 +1264,6 @@
 
 /* --- COLLAPSED STATE STYLES --- */
 
-/* Smoothly shrink and hide text */
 .collapsed .brand-name,
 .collapsed .nav-text {
   opacity: 0;
@@ -1334,4 +1292,4 @@
 .collapsed .nav-item-content {
   justify-content: center;
   padding: 12px 0;
-}
+}

package/src/components/juridictions.scss

@@ -0,0 +1,23 @@
+.juridictions-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.juridictions {
+  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;
+  }
+}