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

package/package.json

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

package/src/digitv2/components/bottomSheetV2.scss

@@ -52,6 +52,14 @@
     margin: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
 }
 
+.digit-bottom-sheet-header{
+    &.full {
+        .digit-bottom-sheet-handle-indicator{
+            display: none;
+        }
+    }
+}
+
 .digit-bottom-sheet-content {
     padding: theme(digitv2.spacers.spacer4);
     overflow-y: scroll;

package/src/digitv2/components/buttonsV2.scss

@@ -4,8 +4,7 @@
   @apply flex max-w-full items-center;
   gap: theme(digitv2.spacers.spacer2);
 
-  &.small,
-  &.medium {
+  &.small{
     gap: theme(digitv2.spacers.spacer1);
   }
 

package/src/digitv2/components/chipV2.scss

@@ -49,6 +49,25 @@
     .digit-text {
       @extend .typography.body-xs;
       @apply overflow-hidden items-center whitespace-no-wrap;
+      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-xs.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-xs.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-xs.desktop);
+      }
       max-width: calc(100% - (theme(digitv2.spacers.spacer7)));
       width: calc(100% - (theme(digitv2.spacers.spacer7)));
       text-overflow: clip;

package/src/digitv2/components/dividerV2.scss

@@ -1,5 +1,6 @@
 .digit-divider {
     border: theme(digitv2.divider.dividerS);
+    width: 100%;
 
     &.medium {
         border: theme(digitv2.divider.dividerM);

package/src/digitv2/components/landingpagecardV2.scss

@@ -31,10 +31,17 @@
             align-items: center;
 
             &.iconBg {
-                background-color: theme(digitv2.lightTheme.primary-1);
+                background-color: theme(digitv2.lightTheme.primary-1);  
+                border-radius: 0.125rem;
             }
         }
 
+        &.right{
+            &.iconBg {
+            gap:theme(digitv2.spacers.spacer4);
+        }
+    }
+
         svg {
             flex-shrink: 0;
         }

package/src/digitv2/components/menuCardV2.scss

@@ -6,6 +6,11 @@
     justify-content: flex-start;
     cursor: pointer;
 
+    &.clickable:hover{
+        border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
+        box-shadow: 0.063rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #00000029;
+    }
+
     .icon-menu-header {
 
         display: flex !important;

package/src/digitv2/components/multiSelectDropdownV2.scss

@@ -38,6 +38,23 @@
       }
     }
   }
+
+  .digit-multiselectdropdown-master-active{
+    &.serachable{
+      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;
@@ -153,7 +170,7 @@
         }
       }
     }
-    &.nestedmultiselect {
+    &.nestedmultiselect:not(.unsuccessfulresults){
       position: relative;
       &:not(.selectAll)::before {
         content: "";
@@ -334,6 +351,33 @@
         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);
+    
+        @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;
@@ -343,11 +387,14 @@
     .digit-multiselectdropdown-label {
       p {
         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);
+          padding-left: 1%;
+          font-size: theme(digitv2.spacers.spacer4);
+          line-height: theme(digitv2.spacers.spacer6);
+          font-family: theme(digitv2.fontFamily.sans);
+          font-weight: theme(digitv2.fontWeight.regular);
+          text-align: left;
       }
     }
   }

package/src/digitv2/components/radiobtnV2.scss

@@ -51,8 +51,7 @@
       pointer-events: none !important;
     }
 
-    &.disabled,
-    &.preselected {
+    &:not(.preselected):not(.has-preselected).disabled{
       label {
         color: theme(digitv2.lightTheme.text-disabled);
       }
@@ -80,6 +79,7 @@
     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 */

package/src/digitv2/components/selectDropdownV2.scss

@@ -49,7 +49,7 @@
     }
   }
   .digit-dropdown-select-active {
-    @apply relative block w-full h-10;
+    @apply relative block w-full h-10 bg-white;
     border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
     input[type="text"] {
       @extend .typography.body-l;
@@ -189,7 +189,7 @@
   &:not(.nesteddropdown, .treedropdown):not(:active):nth-of-type(even) {
     background: theme(digitv2.lightTheme.paper-secondary);
   }
-  &.nesteddropdown {
+  &:not(.unsuccessfulresults).nesteddropdown {
     position: relative;
     height: 2.4375rem;
     &::before {

package/src/digitv2/components/selectionCardV2.scss

@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    gap:theme(digitv2.spacers.spacer1);
   }
   
   .selection-card {

package/src/digitv2/components/stepperV2.scss

@@ -10,6 +10,18 @@
     @apply relative flex-1;
     min-height: 4rem;
     z-index: 1;
+
+    @media (max-aspect-ratio: 9/16) {
+      min-width: 3.75rem;
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      min-width: 5rem;
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      min-width: 6.25rem;
+    }
   }
 
   .digit-stepper-content {
@@ -98,18 +110,30 @@
     height: 0.125rem;
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      min-width: 6.313rem;
       max-width: 39.438rem;
     }
 
     @media (max-aspect-ratio: 9/16) {
+      min-width: 4.313rem;
       max-width: 16.875rem;
       top: 0.875rem;
     }
 
     @media (min-aspect-ratio: 3/4) {
+      min-width: 5.313rem;
       max-width: 82.688rem;
     }
 
+    &.lastbutone{
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        min-width: unset;
+      }
+  
+      @media (max-aspect-ratio: 9/16) {
+        min-width: unset;
+      }
+    }
     &.active {
       background-color: theme(digitv2.lightTheme.primary-1);
       border-color: theme(digitv2.lightTheme.primary-1);
@@ -129,6 +153,12 @@
         background-color: transparent;
         border-color: theme(digitv2.lightTheme.primary-1);
       }
+      @media (max-aspect-ratio: 9/16) {
+        left: -2.75rem;
+      }
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        left: -3.5rem;
+      }
     }
   }
 
@@ -148,8 +178,8 @@
 }
 
 .digit-stepper-container::-webkit-scrollbar {
-  width: theme(digitv2.spacers.spacer2);
-  height: theme(digitv2.spacers.spacer2);
+  width: theme(digitv2.spacers.spacer0);
+  height: theme(digitv2.spacers.spacer0);
   background-color: theme(digitv2.lightTheme.generic-background);
 }
 
@@ -161,4 +191,10 @@
 .digit-stepper-container::-webkit-scrollbar-thumb {
   background-color: theme(digitv2.lightTheme.generic-divider);
   border-radius: 0.563rem;
+}
+
+.stepper-vertical-divider{
+  position: absolute;
+  left: theme(digitv2.spacers.spacer10);
+  margin: theme(digitv2.spacers.spacer0);
 }

package/src/digitv2/components/tabV2.scss

@@ -0,0 +1,107 @@
+.digit-tab {
+    display: flex;
+    height: fit-content;
+    overflow: auto;
+    align-items: flex-end;
+
+    .digit-tab-list {
+
+        height: 3.75rem;
+
+        .digit-tab-item {
+            display: flex;
+            width: 100%;
+            min-height: 3.75rem;
+            padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer6);
+            height: 3.75rem;
+            align-items: center;
+            justify-content: center;
+            background-color: theme(digitv2.lightTheme.paper-secondary);
+            border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
+            border-radius: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
+            cursor: pointer;
+            gap: theme(digitv2.spacers.spacer1);
+
+            .digit-tab-icon {
+                display: flex;
+                align-items: center;
+
+                svg {
+                    flex-shrink: 0;
+                }
+            }
+
+
+            justify-content: center;
+
+
+            .digit-tab-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);
+                }
+
+                color: theme(digitv2.lightTheme.text-secondary);
+                white-space: noWrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                line-height: normal;
+            }
+        }
+
+        &.active {
+            height: 4rem;
+
+            .digit-tab-item {
+                border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+                border-bottom: theme(digitv2.spacers.spacer1) solid theme(digitv2.lightTheme.primary-1);
+                background-color: theme(digitv2.lightTheme.paper-primary);
+                height: 4rem;
+                min-height: 4rem;
+
+                .digit-tab-label {
+                    @extend .typography.heading-s;
+                    color: theme(digitv2.lightTheme.primary-1);
+                    white-space: noWrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    line-height: normal;
+                }
+            }
+        }
+    }
+}
+
+.digit-tab::-webkit-scrollbar {
+    height: 0.375rem;
+    background-color: transparent;
+}
+
+.digit-tab::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 0.563rem;
+}
+
+.digit--tab::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 0.563rem;
+}

package/src/digitv2/index.scss

@@ -38,6 +38,7 @@
 @import url("./components/actionbarV2.scss");
 @import url("./components/headerdropdownV2.scss");
 @import url("./components/topbarV2.scss");
+@import url("./components/tabV2.scss");
 @import url("./components/sidebarV2.scss");
 @import url("./components/mobilesidebarV2.scss");
 @import url("./components/tooltipwrapperV2.scss");
@@ -177,4 +178,65 @@
   &-item-5 {
     color: theme(digitv2.chart.chart-5);
   }
+}
+
+.color-constants-story{
+
+  &.primary-1{
+    background-color: theme(digitv2.lightTheme.primary-1);
+  }
+  &.primary-bg{
+    background-color: theme(digitv2.lightTheme.primary-bg);
+  }
+  &.primary-2{
+    background-color: theme(digitv2.lightTheme.primary-2);
+  }
+  &.text-primary{
+    background-color: theme(digitv2.lightTheme.text-primary);
+  }
+  &.text-secondary{
+    background-color: theme(digitv2.lightTheme.text-secondary);
+  }
+  &.text-disabled{
+    background-color: theme(digitv2.lightTheme.text-disabled);
+  }
+  &.alert-error{
+    background-color: theme(digitv2.lightTheme.alert-error);
+  }
+  &.alert-errorbg{
+    background-color: theme(digitv2.lightTheme.alert-errorbg);
+  }
+  &.alert-success{
+    background-color: theme(digitv2.lightTheme.alert-success);
+  }
+  &.alert-successbg{
+    background-color: theme(digitv2.lightTheme.alert-successbg);
+  }
+  &.alert-info{
+    background-color: theme(digitv2.lightTheme.alert-info);
+  }
+  &.alert-infobg{
+    background-color: theme(digitv2.lightTheme.alert-infobg);
+  }
+  &.alert-warning{
+    background-color: theme(digitv2.lightTheme.alert-warning);
+  }
+  &.alert-warningbg{
+    background-color: theme(digitv2.lightTheme.alert-warning-bg);
+  }
+  &.generic-background{
+    background-color: theme(digitv2.lightTheme.generic-background);
+  }
+  &.generic-divider{
+    background-color: theme(digitv2.lightTheme.generic-divider);
+  }
+  &.generic-inputborder{
+    background-color: theme(digitv2.lightTheme.generic-inputborder);
+  }
+  &.paper-primary{
+    background-color: theme(digitv2.lightTheme.paper-primary);
+  }
+  &.paper-secondary{
+    background-color: theme(digitv2.lightTheme.paper-secondary);
+  }
 }

package/src/digitv2/typography.scss

@@ -443,46 +443,61 @@
   }
 
   &.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);
+      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);
     }
   }
 
   &.body-xs {
-    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-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);
     }
 
     @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);
     }
 
     @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);
     }
   }