@egovernments/digit-ui-components-css 0.0.2-beta.33 → 0.0.2-beta.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.0.2-beta.33",
+  "version": "0.0.2-beta.35",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egovernments.org>",

package/src/digitv2/components/accordionV2.scss

@@ -1,9 +1,9 @@
 .digit-accordion-title {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     cursor: pointer;
     background-color: transparent;
-    gap: theme(digitv2.spacers.spacer5);
+    gap: theme(digitv2.spacers.spacer3);
 
     @media (max-aspect-ratio: 9/16) {
         padding: theme(digitv2.spacers.spacer4);
@@ -31,11 +31,13 @@
     height: theme(digitv2.spacers.spacer6);
     display: flex;
     align-items: center;
+    justify-content: center
 }
 
 .digit-accordion-header-title {
     @extend .typography.heading-s;
     color: theme(digitv2.lightTheme.text-primary);
+    margin-top: 0.18rem;
     flex-grow: 1;
 }
 
@@ -96,7 +98,7 @@
         border-radius: theme(digitv2.spacers.spacer1);
     }
 
-    &.divider {
+    &.withDivider {
         .digit-accordion-content {
             border-top: 1px solid theme(digitv2.lightTheme.generic-divider);
         }
@@ -133,6 +135,13 @@
     }
 }
 
+.digit-accordion-toggle{
+    display: flex;
+    align-items: center;
+    width: theme(digitv2.spacers.spacer6);
+    height: theme(digitv2.spacers.spacer6);
+}
+
 .digit-accordion-toggle.animate-open svg {
     animation: rotateOpen 0.5s ease forwards;
 }

package/src/digitv2/components/buttonsV2.scss

@@ -188,8 +188,8 @@
   @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
   background: none;
   width: fit-content;
-  padding-left:  theme(digitv2.spacers.spacer2);
-  padding-right: theme(digitv2.spacers.spacer2);
+  padding-left:  theme(digitv2.spacers.spacer0);
+  padding-right: theme(digitv2.spacers.spacer0);
   gap:  theme(digitv2.spacers.spacer2);
   min-width: 6.5625rem;
 
@@ -247,8 +247,8 @@
   background: none;
   width: fit-content;
   height: fit-content;
-  padding-left:  theme(digitv2.spacers.spacer2);
-  padding-right: theme(digitv2.spacers.spacer2);
+  padding-left:  theme(digitv2.spacers.spacer0);
+  padding-right: theme(digitv2.spacers.spacer0);
   gap: theme(digitv2.spacers.spacer2);
   min-width: 4.875rem;
 

package/src/digitv2/components/cardV2.scss

@@ -388,7 +388,7 @@
 
     width: 100%;
     height: auto;
-    background-color: #ffffff;
+    background-color: theme(digitv2.lightTheme.paper-primary);
     border-radius: theme(digitv2.spacers.spacer1);
     box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
     display: flex;
@@ -396,8 +396,8 @@
     flex-direction: column;
 
     &.secondary {
-        background-color: #FAFAFA;
-        border: 0.063em solid #d6d5d4;
+        background-color: theme(digitv2.lightTheme.paper-secondary);
+        border: 0.063em solid theme(digitv2.lightTheme.generic-divider);
     }
 
     &.secondary.search,
@@ -422,7 +422,7 @@
         }
 
 
-        @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
             flex-direction: row;
 
             .digit-buttons-group {
@@ -436,11 +436,11 @@
             }
         }
 
-        @media (min-width: 48rem) {
+        @media (min-aspect-ratio: 3/4) {
             flex-direction: row;
         }
 
-        @media (max-width: 30rem) {
+        @media (max-aspect-ratio: 9/16){
             flex-direction: column;
 
             .digit-buttons-group {
@@ -458,15 +458,15 @@
         }
     }
 
-    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
         padding: theme(digitv2.spacers.spacer5);
     }
 
-    @media (min-width: 48rem) {
+    @media (min-aspect-ratio: 3/4) {
         padding: theme(digitv2.spacers.spacer6);
     }
 
-    @media (max-width: 30rem) {
+    @media (max-aspect-ratio: 9/16) {
         padding: theme(digitv2.spacers.spacer4);
     }
 

package/src/digitv2/components/checkboxV2.scss

@@ -84,14 +84,12 @@
     @apply text-left;
     word-break: break-word;
     letter-spacing: theme(digitv2.spacers.spacer0);
-    color: theme(digitv2.lightTheme.text-primary);
+    color: theme(digitv2.lightTheme.text-primary) !important;
+    display: flex;
+    align-items: center;
   }
 
   &.disabled {
-    .label {
-      color: theme(digitv2.lightTheme.text-disabled);
-    }
-
     .digit-custom-checkbox {
       border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
     }

package/src/digitv2/components/chipV2.scss

@@ -139,6 +139,12 @@
   }
 }
 
+.digit-tag{
+  &.noClose{
+    display: inline;
+  }
+}
+
 .cp{
   cursor: pointer;
 }

package/src/digitv2/components/errorMessageV2.scss

@@ -14,6 +14,7 @@
   }
 
   .digit-error-message {
+    @extend .typography.body-s;
     @apply w-full;
     font-family: theme(digitv2.fontFamily.sans);
     font-style: theme(digitv2.fontStyle.normal);

package/src/digitv2/components/fieldV1.scss

@@ -3,7 +3,7 @@
 .digit-header-content {
 
     &.label {
-        @extend .typography.body-l;
+        @extend .typography.label;
         @apply flex ;
         color: theme(digitv2.lightTheme.text-primary);
         gap: theme(digitv2.spacers.spacer1);

package/src/digitv2/components/landingpagecardV2.scss

@@ -1,26 +1,12 @@
 .digit-landing-page-card {
     background-color: theme(digitv2.lightTheme.paper-primary);
-    box-shadow: theme(digitv2.spacers.spacer0) 1px 2px theme(digitv2.spacers.spacer0) #00000029;
-    max-width: 30%;
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
     min-width: 15%;
+    display: flex;
+    flex-direction: column;
     gap: theme(digitv2.spacers.spacer4);
     border-radius: theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
 
-    @media (max-aspect-ratio: 9/16) {
-        /* Media query for mobile */
-        max-width: 90%
-    }
-
-    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
-        /* Media query for tablets */
-        max-width: 60%;
-    }
-
-    @media (min-aspect-ratio: 3/4) {
-        /* Media query for desktop */
-        max-width: 30%;
-    }
-
     .icon-module-header {
         display: flex !important;
         align-items: center !important;
@@ -29,6 +15,40 @@
         .digit-landingpagecard-icon {
             display: flex;
             align-items: center;
+            justify-content: center;
+
+            @media (max-aspect-ratio: 9/16) {
+                /* Media query for mobile */
+                width: theme(digitv2.spacers.spacer11);
+                height:theme(digitv2.spacers.spacer11);
+
+                svg {
+                    width: theme(digitv2.spacers.spacer7);
+                    height:theme(digitv2.spacers.spacer7);
+                }
+            }
+
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+                /* Media query for tablets */
+                width: theme(digitv2.spacers.spacer12);
+                height:theme(digitv2.spacers.spacer12);
+
+                svg {
+                    width: theme(digitv2.spacers.spacer8);
+                    height:theme(digitv2.spacers.spacer8);
+                }
+            }
+
+            @media (min-aspect-ratio: 3/4) {
+                /* Media query for desktop */
+                width: theme(digitv2.spacers.spacer13);
+                height:theme(digitv2.spacers.spacer13);
+
+                svg {
+                    width: theme(digitv2.spacers.spacer10);
+                    height:theme(digitv2.spacers.spacer10);
+                }
+            }
 
             &.iconBg {
                 background-color: theme(digitv2.lightTheme.primary-1);  
@@ -52,7 +72,10 @@
             overflow: hidden;
             word-wrap: break-word;
             word-break: break-word;
+            white-space: nowrap;
             line-height: normal;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         &.left {
@@ -64,11 +87,13 @@
         display: flex !important;
         align-items: flex-start;
         justify-content: space-evenly;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-wrap: wrap;
 
 
         &.left {
             justify-content: unset;
-            /*gap: 7.5rem;*/
         }
 
         .metric-item {
@@ -93,6 +118,9 @@
                 word-wrap: break-word;
                 word-break: break-word;
                 line-height: normal;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
                 color: theme(digitv2.lightTheme.generic-inputborder);
                 font-family: theme(digitv2.fontFamily.sans);
                 font-style: theme(digitv2.fontStyle.normal);
@@ -128,11 +156,66 @@
     margin: theme(digitv2.spacers.spacer0);
 }
 
+.landingpagecard-section{
+    display: flex;
+    flex-direction: column;
+    color: theme(digitv2.lightTheme.text-primary);
+    @extend .typography.body-s;
+    text-align: left;
+    justify-content: flex-start;
+    @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);
+      }
+
+    @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        gap: theme(digitv2.spacers.spacer4);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        gap: theme(digitv2.spacers.spacer5);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        gap: theme(digitv2.spacers.spacer6);
+    }
+}
+
 .digit-landing-page-wrapper {
     display: flex;
     justify-content: flex-start;
     flex-wrap: wrap;
 
+    &.mobile{
+        flex-direction: column;
+        align-items: center;
+    }
+
     @media (max-aspect-ratio: 9/16) {
         /* Media query for mobile */
         flex-direction: column;

package/src/digitv2/components/otpInputV2.scss

@@ -0,0 +1,99 @@
+.digit-label-otp-wrapper {
+  display: flex;
+  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 {
+    display: flex;
+    justify-content: center;
+    gap: theme(digitv2.spacers.spacer3);
+  }
+
+
+  .otp-error-wrapper{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap:theme(digitv2.spacers.spacer2);
+    flex-direction: column;
+
+    .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.input-border);
+    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/index.scss

@@ -45,6 +45,7 @@
 @import url("./components/tagV2.scss");
 @import url("./components/landingpagecardV2.scss");
 @import url("./components/menuCardV2.scss");
+@import url("./components/otpInputV2.scss");
 
 /* pages */
 @import url("./pages/employee/index.scss");