@egovernments/digit-ui-components-css 2.0.0-dev-11 → 2.0.0-dev-12

package/src/digitv2/components/metricCardV2.scss

@@ -5,21 +5,21 @@
     position: relative;
     @media (max-aspect-ratio: 9/16) {
         /* Media query for mobile */
-        gap: theme("digitv2.spacers.spacer4");
+        gap: var(--digitv2-spacers-spacer4);
     }
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
         /* Media query for tablets */
-        gap: theme("digitv2.spacers.spacer5");
+        gap: var(--digitv2-spacers-spacer5);
     }
 
     @media (min-aspect-ratio: 3/4) {
         /* Media query for desktop */
-        gap: theme("digitv2.spacers.spacer6");
+        gap: var(--digitv2-spacers-spacer6);
     }
 
     .metric-divider{
-        margin: theme("digitv2.spacers.spacer0");
+        margin: var(--digitv2-spacers-spacer0);
     }
 
     .vertical-metric-divider{
@@ -27,22 +27,22 @@
 
         @media (max-aspect-ratio: 9/16) {
             /* Media query for mobile */
-            top: theme("digitv2.spacers.spacer4");
+            top: var(--digitv2-spacers-spacer4);
             height: calc(100% - 2rem);
         }
     
         @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
             /* Media query for tablets */
-            top: theme("digitv2.spacers.spacer5");
+            top: var(--digitv2-spacers-spacer5);
             height: calc(100% - 2.5rem);
         }
     
         @media (min-aspect-ratio: 3/4) {
             /* Media query for desktop */
-            top: theme("digitv2.spacers.spacer6");
+            top: var(--digitv2-spacers-spacer6);
             height: calc(100% - 3rem);
         }
-        border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
+        border: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
         z-index: 1;
     }
 }
@@ -53,45 +53,45 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    gap: theme("digitv2.spacers.spacer1");
-    padding: theme("digitv2.spacers.spacer4");
+    gap: var(--digitv2-spacers-spacer1);
+    padding: var(--digitv2-spacers-spacer4);
 
     .metric-value {
         @include typography-heading-l;
-        color: theme("digitv2.lightTheme.primary-2");
+        color: var(--digitv2-lightTheme-primary-2);
         line-height: normal;
     }
 
     .metric-description {
         @include typography-body-s;
         text-align: center;
-        color: theme("digitv2.lightTheme.text-primary");
+        color: var(--digitv2-lightTheme-text-primary);
 
         @media (max-aspect-ratio: 9/16) {
             /* Media query for mobile */
-            font-size: theme("digitv2.fontSize.body-s.mobile");
-            font-family: theme("digitv2.fontFamily.sans");
-            font-style: theme("digitv2.fontStyle.normal");
-            font-weight: theme("digitv2.fontWeight.regular");
-            line-height: theme("digitv2.lineHeight.lineheight2");
+            font-size: var( --digitv2-fontSize-body-s-mobile);
+            font-family: var(--digitv2-fontFamily-sans);
+            font-style: var(--digitv2-fontStyle-normal);
+            font-weight: var(--digitv2-fontWeight-regular);
+            line-height: var(--digitv2-lineHeight-lineheight2);
         }
 
         @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
             /* Media query for tablets */
-            font-size: theme("digitv2.fontSize.body-s.tablet");
-            font-family: theme("digitv2.fontFamily.sans");
-            font-style: theme("digitv2.fontStyle.normal");
-            font-weight: theme("digitv2.fontWeight.regular");
-            line-height: theme("digitv2.lineHeight.lineheight2");
+            font-size: var( --digitv2-fontSize-body-s-tablet);
+            font-family: var(--digitv2-fontFamily-sans);
+            font-style: var(--digitv2-fontStyle-normal);
+            font-weight: var(--digitv2-fontWeight-regular);
+            line-height: var(--digitv2-lineHeight-lineheight2);
         }
 
         @media (min-aspect-ratio: 3/4) {
             /* Media query for desktop */
-            font-size: theme("digitv2.fontSize.body-s.desktop");
-            font-family: theme("digitv2.fontFamily.sans");
-            font-style: theme("digitv2.fontStyle.normal");
-            font-weight: theme("digitv2.fontWeight.regular");
-            line-height: theme("digitv2.lineHeight.lineheight2");
+            font-size: var( --digitv2-fontSize-body-s-desktop);
+            font-family: var(--digitv2-fontFamily-sans);
+            font-style: var(--digitv2-fontStyle-normal);
+            font-weight: var(--digitv2-fontWeight-regular);
+            line-height: var(--digitv2-lineHeight-lineheight2);
         }
     }
 
@@ -101,54 +101,54 @@
         text-align: center;
         align-items: center;
         justify-content: center;
-        gap: theme("digitv2.spacers.spacer1");
+        gap: var(--digitv2-spacers-spacer1);
 
         @media (max-aspect-ratio: 9/16) {
             /* Media query for mobile */
-            font-size: theme("digitv2.fontSize.body-xs.mobile");
-            font-family: theme("digitv2.fontFamily.sans");
-            font-style: theme("digitv2.fontStyle.normal");
-            font-weight: theme("digitv2.fontWeight.regular");
-            line-height: theme("digitv2.lineHeight.lineheight2");
+            font-size: var(--digitv2-fontSize-body-xs-mobile);
+            font-family: var(--digitv2-fontFamily-sans);
+            font-style: var(--digitv2-fontStyle-normal);
+            font-weight: var(--digitv2-fontWeight-regular);
+            line-height: var(--digitv2-lineHeight-lineheight2);
         }
 
         @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
             /* Media query for tablets */
-            font-size: theme("digitv2.fontSize.body-xs.tablet");
-            font-family: theme("digitv2.fontFamily.sans");
-            font-style: theme("digitv2.fontStyle.normal");
-            font-weight: theme("digitv2.fontWeight.regular");
-            line-height: theme("digitv2.lineHeight.lineheight2");
+            font-size: var(--digitv2-fontSize-body-xs-tablet);
+            font-family: var(--digitv2-fontFamily-sans);
+            font-style: var(--digitv2-fontStyle-normal);
+            font-weight: var(--digitv2-fontWeight-regular);
+            line-height: var(--digitv2-lineHeight-lineheight2);
         }
 
         @media (min-aspect-ratio: 3/4) {
             /* Media query for desktop */
-            font-size: theme("digitv2.fontSize.body-xs.desktop");
-            font-family: theme("digitv2.fontFamily.sans");
-            font-style: theme("digitv2.fontStyle.normal");
-            font-weight: theme("digitv2.fontWeight.regular");
-            line-height: theme("digitv2.lineHeight.lineheight2");
+            font-size: var(--digitv2-fontSize-body-xs-desktop);
+            font-family: var(--digitv2-fontFamily-sans);
+            font-style: var(--digitv2-fontStyle-normal);
+            font-weight: var(--digitv2-fontWeight-regular);
+            line-height: var(--digitv2-lineHeight-lineheight2);
         }
 
 
         svg {
             flex-shrink: 0;
-            width: theme("digitv2.spacers.spacer4");
-            height: theme("digitv2.spacers.spacer4");
+            width: var(--digitv2-spacers-spacer4);
+            height: var(--digitv2-spacers-spacer4);
         }
 
-        color: theme("digitv2.lightTheme.primary-1");
+        color: var(--digitv2-lightTheme-primary-1);
 
         &.Increased {
-            color: theme("digitv2.lightTheme.alert-success");
+            color: var(--digitv2-lightTheme-alert-success);
         }
 
         &.Decreased {
-            color: theme("digitv2.lightTheme.alert-error");
+            color: var(--digitv2-lightTheme-alert-error);
         }
 
         &.Nochange {
-            color: theme("digitv2.lightTheme.alert-info");
+            color: var(--digitv2-lightTheme-alert-info);
         }
     }
 }

package/src/digitv2/components/mobileNumberV2.scss

@@ -23,7 +23,7 @@
     max-width: 37.5rem;
     min-width: 12.5rem;
   }
-  
+
   .digit-text-mobile-input-width {
     .digit-text-input-width {
       width: calc(540px - 41px);
@@ -43,8 +43,8 @@
   .digit-citizen-card-input {
     @include typography-text-body-s;
     @apply pl-sm outline-none block w-full h-10 bg-white leading-10 text-form-field;
-    border: 1px solid theme("digitv2.lightTheme.text-secondary");
-    color: theme("digitv2.lightTheme.text-primary");
+    border: 1px solid var(--digitv2-lightTheme-text-secondary);
+    color: var(--digitv2-lightTheme-text-primary);
   }
 
   .digit-citizen-card-input--front {
@@ -62,4 +62,94 @@
     @extend .alert-error;
     @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-solid bg-white leading-10 text-form-field text-text-primary;
   }
+
+  // Country code dropdown styles
+  .digit-country-code-dropdown {
+    flex-shrink: 0;
+    width: 7.5rem;
+    position: relative;
+    overflow: visible;
+    height: 40px;
+
+    .digit-dropdown-employee-select-wrap,
+    .digit-dropdown-select-wrap {
+      width: 100%;
+      min-width: unset;
+      max-width: unset;
+      overflow: visible;
+    }
+
+    .digit-dropdown-select,
+    .digit-dropdown-select-active {
+      height: var(--digitv2-spacers-spacer10);
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+      border-right: none !important;
+      border-top-left-radius: var(--digitv2-borderRadius-radius2);
+      border-bottom-left-radius: var(--digitv2-borderRadius-radius2);
+    }
+
+    .digit-dropdown-employee-select-wrap--elipses {
+      @apply font-bold;
+      font-size: var(--digitv2-spacers-spacer4);
+      color: var(--digitv2-lightTheme-text-secondary);
+    }
+  }
+
+  &.has-country-dropdown {
+    // The text input field should take remaining width
+    > .digit-text-input-field {
+      flex: 1;
+      min-width: 0;
+    }
+
+    // Remove left border-radius from inputs so they merge with dropdown
+    .digit-text-input-field {
+      .digit-employeeCard-input,
+      .digit-citizenCard-input,
+      .digit-employeeCard-inputError,
+      .digit-card-inputError {
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+      }
+    }
+
+    .digit-dropdown-select {
+      border-color: #787878;
+    }
+
+    .digit-country-code-dropdown {
+        .digit-dropdown-select,
+        .digit-dropdown-select-active {
+          border-right: none !important;
+
+          &.disabled{
+            input{
+                color: #787878;
+            }
+          }
+        }
+    }
+
+    // Unified focus state — highlight both dropdown and input as one unit
+    &:focus-within {
+      .digit-country-code-dropdown {
+        .digit-dropdown-select,
+        .digit-dropdown-select-active {
+          border-color: var(--digitv2-lightTheme-primary-1) !important;
+          border-right: none !important;
+        }
+      }
+
+      .digit-text-input-field {
+        .digit-employeeCard-input,
+        .digit-citizenCard-input,
+        .digit-employeeCard-inputError,
+        .digit-card-inputError {
+          border-color: var(--digitv2-lightTheme-primary-1) !important;
+        }
+      }
+    }
+  }
 }
+