@egovernments/digit-ui-components-css 0.0.2-beta.9 → 0.2.0-beta.1

package/src/digitv2/components/multiSelectDropdownV2.scss

@@ -9,7 +9,7 @@
 
   @media (max-aspect-ratio: 9/16) {
     /* Media query for mobile */
-    max-width: 20.5rem;
+    max-width: 100%;
     width: 100%;
   }
 
@@ -24,9 +24,36 @@
     @apply relative h-10 w-full bg-white;
     border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
     input[type="text"] {
-      @extend .typography.body-l;
+      @extend .typography.body-s;
+      @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);
+      }
+  
+      @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);
+      }
+  
+      @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);
+      }
       @apply absolute top-0 left-0 p-sm min-h-full min-w-full opacity-0;
       letter-spacing: theme(digitv2.spacers.spacer0);
+      padding-left: 1%;
       &:focus {
         @apply outline-none;
       }
@@ -38,6 +65,23 @@
       }
     }
   }
+
+  .digit-multiselectdropdown-master-active{
+    &.searchable{
+      input[type="text"]{
+        opacity: 1;
+        width: calc(100%-24px);
+      }
+
+      .digit-multiselectdropdown-label {
+        svg {
+          z-index: 1;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
   .digit-multiselectdropdown-master {
     &.disabled {
       pointer-events: none !important;
@@ -69,7 +113,7 @@
   }
   .digit-nested-category {
     @apply flex items-center flex-shrink-0;
-    background: theme(digitv2.lightTheme.background);
+    background: theme(digitv2.lightTheme.generic-background);
     height: 2.4375rem;
     padding: theme(digitv2.spacers.spacer4) 0.625rem;
     gap: 0.625rem;
@@ -83,6 +127,25 @@
   }
   .digit-category-name {
     @extend .typography.heading-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-s.desktop);
+    }
     color: theme(digitv2.lightTheme.text-primary);
   }
   .digit-category-selectAll {
@@ -92,6 +155,25 @@
     align-items: center;
     .category-selectAll-label {
       @extend .typography.body-s;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+      }
       text-align: left;
       color: theme(digitv2.lightTheme.primary-1);
     }
@@ -121,6 +203,11 @@
   }
   .digit-multiselectdropodwn-menuitem {
     @apply flex w-full bg-white justify-start items-center;
+
+    &.frozen{
+      pointer-events: none;
+      opacity: 0.6;
+    }
     min-height: 2.438rem;
     .option-des-container {
       @apply w-full max-w-full overflow-hidden box-border;
@@ -134,7 +221,7 @@
         }
       }
     }
-    &.nestedmultiselect {
+    &.nestedmultiselect:not(.unsuccessfulresults){
       position: relative;
       &:not(.selectAll)::before {
         content: "";
@@ -165,6 +252,25 @@
       border: 0.031rem solid theme(digitv2.lightTheme.primary-1);
       p {
         @extend .typography.heading-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.bold);
+        line-height: theme(digitv2.lineHeight.lineheight1);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.heading-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.heading-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.heading-s.desktop);
+        }
         color: theme(digitv2.lightTheme.paper-primary);
       }
       .digit-label {
@@ -181,6 +287,25 @@
     p {
       @extend .typography.body-s;
       @apply w-full overflow-hidden whitespace-no-wrap max-w-full;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+      }
       color: theme(digitv2.lightTheme.text-primary);
       margin: theme(digitv2.spacers.spacer0);
       text-overflow: ellipsis;
@@ -189,6 +314,25 @@
       background: theme(digitv2.lightTheme.primary-1);
       p {
         @extend .typography.heading-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.bold);
+        line-height: theme(digitv2.lineHeight.lineheight1);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.heading-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.heading-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.heading-s.desktop);
+        }
         color: theme(digitv2.lightTheme.paper-primary);
       }
       .digit-label {
@@ -272,6 +416,25 @@
         .option-des-container {
           p {
             @extend .typography.heading-s;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: theme(digitv2.lineHeight.lineheight1);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.heading-s.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.heading-s.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.heading-s.desktop);
+            }
           }
         }
         .digit-multiselectdropodwn-custom-checkbox {
@@ -296,6 +459,34 @@
         color: theme(digitv2.lightTheme.primary-1);
       }
     }
+    &.unsuccessfulresults {
+      background-color: theme(digitv2.lightTheme.paper-secondary);
+      pointer-events: none;
+      span {
+        @extend .typography.body-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+        padding-left: theme(digitv2.spacers.spacer3);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.body-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.body-s.desktop);
+        }
+        color: theme(digitv2.lightTheme.text-disabled);
+      }
+    }
   }
   .digit-cursorPointer {
     @apply cursor-pointer;
@@ -304,12 +495,37 @@
   .digit-multiselectdropdown-master-active {
     .digit-multiselectdropdown-label {
       p {
+        @extend .typography.body-s;
+        @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);
+        }
+    
+        @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);
+        }
+    
+        @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);
+        }
         white-space: pre;
-        margin: auto;
-        margin-left: theme(digitv2.spacers.spacer0);
-        padding-left: 1%;
-        font-size: theme(digitv2.spacers.spacer4);
-        line-height: theme(digitv2.spacers.spacer6);
+          margin: auto;
+          margin-left: theme(digitv2.spacers.spacer0);
+          text-align: left;
       }
     }
   }

package/src/digitv2/components/otpInputV2.scss

@@ -0,0 +1,99 @@
+.digit-label-otp-wrapper {
+  display: flex !important;
+  align-items: center;
+  flex-direction: column;
+  gap: theme(digitv2.spacers.spacer4);
+  justify-content: flex-start;
+
+  &.inline {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .digit-otp-label {
+    @extend .typography.body-l;
+    color: theme(digitv2.lightTheme.text-primary);
+  }
+
+  .otp-input-container {
+    justify-content: center;
+    gap: theme(digitv2.spacers.spacer3);
+    display: flex !important;
+  }
+
+
+  .otp-error-wrapper{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap:theme(digitv2.spacers.spacer2);
+    flex-direction: column !important;
+
+    .digit-error-icon-message-wrap {
+      width: fit-content;
+    }
+  }
+
+  .otp-input {
+    @extend .typography.heading-m;
+    width: 3.125rem;
+    height: 3.125rem;
+    text-align: center;
+    color: theme(digitv2.lightTheme.text-primary);
+    border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
+    outline: none;
+    transition: border-color 0.3s ease-in-out;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    &.error {
+      border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
+    }
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-m.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-m.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-m.desktop);
+    }
+  }
+
+  .otp-input:focus {
+    border-color: theme(digitv2.lightTheme.primary-1);
+  }
+
+  .otp-input::placeholder {
+    @extend .typography.heading-m;
+    color: theme(digitv2.lightTheme.text-disabled);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-m.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-m.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-m.desktop);
+    }
+  }
+
+}

package/src/digitv2/components/panelCardV2.scss

@@ -84,6 +84,25 @@
 
         .digit-panelcard-description {
             @extend .typography.body-s;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.regular);
+            line-height: theme(digitv2.lineHeight.lineheight2);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.body-s.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.body-s.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.body-s.desktop);
+            }
             color: theme(digitv2.lightTheme.generic-inputborder);
         }
 

package/src/digitv2/components/panelV2.scss

@@ -107,6 +107,25 @@
 
     .digit-panel-response {
       @extend .typography.heading-m;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.bold);
+      line-height: theme(digitv2.lineHeight.lineheight1);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.heading-m.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.heading-m.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.heading-m.desktop);
+      }
       color: theme(digitv2.lightTheme.paper-primary);
       line-height: normal;
     }

package/src/digitv2/components/popUpV2.scss

@@ -21,7 +21,9 @@
     display: flex;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+    animation: scaleIn 300ms ease-in-out forwards;
   
     @media (min-width: 48rem) {
       max-height: 86%;
@@ -141,6 +143,25 @@
   
     .digit-popup-children-wrap {
       @extend .typography.body-s;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+      }
       @apply overflow-hidden overflow-y-auto flex-col;
       display: flex;
       flex: 1;
@@ -148,6 +169,32 @@
 
       .digit-popup-description {
         @extend .typography.body-s;
+        @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);
+        }
+    
+        @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);
+        }
+    
+        @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);
+        }
         color: theme(digitv2.lightTheme.text-primary);
       }
   
@@ -234,6 +281,17 @@
           width: 100%;
         }
       }
+
+      &.equal-buttons{
+        width: 100%;
+
+        @media (min-width: 30.063rem) {
+
+          button {
+            flex: 1;
+          }
+        }
+      }
     }
 
 
@@ -304,6 +362,10 @@
   }
 }
 
+.digit-popup-wrapper.closing{
+  animation: scaleOut 300ms ease-in-out forwards;
+}
+
 .digit-popup-children-wrap::-webkit-scrollbar {
   width: theme(digitv2.spacers.spacer2);
   background-color: theme(digitv2.lightTheme.generic-background);
@@ -317,4 +379,26 @@
 .digit-popup-children-wrap::-webkit-scrollbar-thumb {
   background-color: theme(digitv2.lightTheme.generic-divider);
   border-radius: 0.563rem;
-}
+}
+
+@keyframes popupscaleIn {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes popupscaleOut {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+}

package/src/digitv2/components/radiobtnV2.scss

@@ -12,6 +12,10 @@
     @apply block mb-md;
   }
 
+  &.vertical{
+    flex-direction: column
+  }
+
   .digit-radio-btn-wrap {
     @apply block float-left relative;
 
@@ -51,13 +55,16 @@
       pointer-events: none !important;
     }
 
-    &.disabled,
-    &.preselected {
+    &:not(.preselected):not(.has-preselected).disabled{
       label {
         color: theme(digitv2.lightTheme.text-disabled);
       }
     }
 
+    &.label-first{
+      flex-direction: row-reverse;
+    }
+
   }
 
   .radio-option-container label:only-child {
@@ -76,6 +83,26 @@
 
   label {
     @extend .typography.body-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+    margin-top: 0.065rem;
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     color: theme(digitv2.lightTheme.text-primary);
     overflow-wrap: anywhere;
   }
@@ -89,9 +116,10 @@
   }
 
   .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
-    @apply block h-3 w-3 rounded-full absolute;
+    @apply flex h-3 w-3 rounded-full absolute items-center;
+    left: 50%;
+    transform: translate(-50%);
     top: 25%;
-    left: 25%;
     background-color: theme(digitv2.lightTheme.primary-1);
   }
 
@@ -100,9 +128,10 @@
   }
 
   .preselected .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
-    @apply block h-3 w-3 rounded-full absolute;
+    @apply flex h-3 w-3 rounded-full absolute items-center;
+    left: 50%;
+    transform: translate(-50%);
     top: 25%;
-    left: 25%;
     background-color: theme(digitv2.lightTheme.text-disabled);
   }
 }