@egovernments/digit-ui-components-css 0.0.2-beta.36 → 0.0.2-beta.38

package/package.json

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

package/src/digitv2/components/bottomSheetV2.scss

@@ -24,7 +24,6 @@
 
 .digit-bottom-sheet-header {
     display: flex;
-    align-items: center;
     justify-content: center;
     height: theme(digitv2.spacers.spacer10);
 
@@ -95,6 +94,14 @@
             flex: 1;
         }
     }
+
+    @media (max-aspect-ratio: 9/16) {
+        justify-content: flex-start;
+
+        button {
+            flex: 1;
+        }
+    }
 }
 
 .digit-bottom-sheet-content::-webkit-scrollbar {

package/src/digitv2/components/buttonsV2.scss

@@ -144,6 +144,9 @@
     @apply bg-white;
     box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset, theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #C84C0E33;
 
+    h2 {
+      font-weight: theme(digitv2.fontWeight.bold);
+    }
   }
 
   h2 {

package/src/digitv2/components/chipV2.scss

@@ -46,6 +46,10 @@
     }
   
 
+    svg{
+      flex-shrink: 0;
+    }
+
     .digit-text {
       @extend .typography.body-xs;
       @apply overflow-hidden items-center whitespace-no-wrap;
@@ -141,7 +145,13 @@
 
 .digit-tag{
   &.noClose{
-    display: inline;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.noIcon{
+      display: unset;
+    }
   }
 }
 

package/src/digitv2/components/dividerV2.scss

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

package/src/digitv2/components/fieldV1.scss

@@ -1,5 +1,12 @@
 @import url("../index.scss");
 
+.label-field-wrapper{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: theme(digitv2.spacers.spacer1);
+}
+
 .digit-header-content {
 
     &.label {

package/src/digitv2/components/filterCardV2.scss

@@ -0,0 +1,417 @@
+.digit-filter-card-popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(11, 12, 12, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  backdrop-filter: blur(0.125rem);
+  -webkit-backdrop-filter: blur(0.125rem);
+
+  .digit-filter-card-popup-wrapper {
+    @apply w-full h-auto flex-col fixed;
+    z-index: 10000;
+    background-color: theme(digitv2.lightTheme.paper-primary);
+    border-radius: theme(digitv2.spacers.spacer1);
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
+    display: flex;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+    animation: scaleIn 300ms ease-in-out forwards;
+
+    @media (min-aspect-ratio: 3/4) {
+      max-height: 86%;
+      max-width: 51%;
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      max-height: 82%;
+      max-width: 74%;
+    }
+
+    @media (max-aspect-ratio: 9/16) {
+      max-height: 80%;
+      max-width: 91%;
+    }
+
+    .digit-radio-options-wrap {
+      margin-bottom: theme(digitv2.spacers.spacer0);
+    }
+  }
+}
+
+
+.digit-filter-card-popup-wrapper.closing {
+  animation: scaleOut 300ms ease-in-out forwards;
+}
+
+@keyframes scaleIn {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleOut {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+}
+
+
+.filter-card {
+  width: 100%;
+  height: auto;
+  background-color: theme(digitv2.lightTheme.paper-primary);
+  border-radius: theme(digitv2.spacers.spacer1);
+  box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .digit-radio-options-wrap {
+    margin-bottom: theme(digitv2.spacers.spacer0);
+  }
+}
+
+.filter-card-horizontal {
+  display: grid;
+  flex-direction: column;
+}
+
+.filter-card-vertical {
+  display: flex;
+  flex-direction: column;
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
+    /* Media query for tablets */
+    max-width: 27.5rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    max-width: 100%;
+    width: 100%;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    max-width: 37.5rem;
+  }
+}
+
+
+.filter-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .title-container {
+    display: flex !important;
+    gap: 0.5rem;
+    align-items: center;
+
+    .close-icon {
+      cursor: pointer;
+      position: absolute;
+      top: theme(digitv2.spacers.spacer2);
+      right: theme(digitv2.spacers.spacer2);
+      width: theme(digitv2.spacers.spacer8);
+      height: theme(digitv2.spacers.spacer8);
+    }
+  }
+
+  &.with-shadow {
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+  }
+
+  &.with-shadow {
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    padding: theme(digitv2.spacers.spacer6);
+    padding-bottom: theme(digitv2.spacers.spacer0);
+
+    &.with-shadow {
+      padding-bottom: theme(digitv2.spacers.spacer6);
+    }
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    padding: theme(digitv2.spacers.spacer5);
+    padding-bottom: theme(digitv2.spacers.spacer0);
+
+    &.with-shadow {
+      padding-bottom: theme(digitv2.spacers.spacer5);
+    }
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    padding: theme(digitv2.spacers.spacer4);
+    padding-bottom: theme(digitv2.spacers.spacer0);
+
+    &.with-shadow {
+      padding-bottom: theme(digitv2.spacers.spacer4);
+    }
+  }
+}
+
+.filter-header .filter-title {
+  @extend .typography.caption-l;
+  color: theme(digitv2.lightTheme.primary-2);
+}
+
+.content-container {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+
+
+  @media (min-aspect-ratio: 3/4) {
+    gap: theme(digitv2.spacers.spacer6);
+    padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6);
+
+    &.with-shadow,
+    &.without-footer {
+      padding: theme(digitv2.spacers.spacer6);
+    }
+
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    gap: theme(digitv2.spacers.spacer5);
+    padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5);
+
+    &.with-shadow,
+    &.without-footer {
+      padding: theme(digitv2.spacers.spacer5);
+    }
+
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    gap: theme(digitv2.spacers.spacer4);
+    padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4);
+
+    &.with-shadow,
+    &.without-footer {
+      padding: theme(digitv2.spacers.spacer4);
+    }
+  }
+
+  .digit-label-field-pair {
+    margin-bottom: unset;
+  }
+}
+
+.content-item {
+  display: flex;
+  justify-content: space-between;
+}
+
+.content-item:last-child {
+  border-bottom: none;
+}
+
+
+.button-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1.5rem;
+  /*grid-column: span 3 ;*/
+
+  &.equal-buttons {
+    justify-content: flex-start;
+    width: 100%;
+
+    button {
+      flex: 1
+    }
+  }
+
+  &.vertical{
+    flex-direction: column !important;
+
+    button {
+      width: 100%;
+    }
+
+    &.equal-buttons {
+      justify-content: flex-start;
+      width: 100%;
+
+      button {
+        flex: unset;
+        width: 100%;
+      }
+    }
+  }
+
+  @media (max-aspect-ratio: 9/16){
+
+    flex-direction: column !important;
+
+    button {
+      width: 100%;
+    }
+
+    &.equal-buttons {
+      justify-content: flex-start;
+      width: 100%;
+
+      button {
+        flex: unset;
+        width: 100%;
+      }
+    }
+  }
+
+  &.with-shadow {
+    box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    padding: theme(digitv2.spacers.spacer6);
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    @apply w-full;
+    padding: theme(digitv2.spacers.spacer5);
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    padding: theme(digitv2.spacers.spacer4);
+  }
+}
+
+.content-action-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: auto;
+
+  @media (min-aspect-ratio: 3/4) {
+    gap: theme(digitv2.spacers.spacer6);
+    padding: theme(digitv2.spacers.spacer6);
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    padding: theme(digitv2.spacers.spacer5);
+    gap: theme(digitv2.spacers.spacer5);
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    padding: theme(digitv2.spacers.spacer4);
+    gap: theme(digitv2.spacers.spacer4);
+  }
+
+  .content-container {
+    flex-direction: row;
+    padding: 0rem;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
+
+
+    @media (max-aspect-ratio: 9/16) {
+      flex-direction: column;
+      .digit-label-field-pair{
+        width: 100%;
+      }
+    }
+
+    .digit-label-field-pair{
+      flex: 1;
+    }
+  }
+
+  .button-container {
+    padding: 0rem;
+    display: flex;
+    flex-direction: row;
+    flex:1;
+    align-items: center;
+    justify-content: flex-end;
+    grid-column: span 2 / -1;
+    justify-self: end;
+
+    @media (min-aspect-ratio: 3/4) {
+      button{
+        margin-top: 1.875rem;
+      }
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4){
+      button{
+        margin-top: 1.875rem;
+      }
+    }
+
+    @media (max-aspect-ratio: 9/16) {
+      button{
+        margin-top: 0rem;
+      }
+    }
+
+    &.equal-buttons {
+      justify-content: flex-end;
+      width: 100%;
+  
+      button {
+        flex: unset
+      }
+    }
+  
+  }
+}
+
+.content-container::-webkit-scrollbar {
+  width: theme(digitv2.spacers.spacer2);
+  height: 0rem;
+  background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+.content-container::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
+}
+
+.content-container::-webkit-scrollbar-thumb {
+  background-color: theme(digitv2.lightTheme.generic-divider);
+  border-radius: 0.563rem;
+}
+
+.content-action-wrapper::-webkit-scrollbar {
+  width: theme(digitv2.spacers.spacer2);
+  background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+
+.content-action-wrapper::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
+}
+
+.content-action-wrapper::-webkit-scrollbar-thumb {
+  background-color: theme(digitv2.lightTheme.generic-divider);
+  border-radius: 0.563rem;
+}

package/src/digitv2/components/formCardV2.scss

@@ -107,6 +107,20 @@
           }
         }
 
+        &.with-divider{
+          @media (min-width: 48rem) {
+            grid-column-gap: theme(digitv2.spacers.spacer12);
+          }
+      
+          @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+            grid-column-gap: theme(digitv2.spacers.spacer10);
+          }
+      
+          @media (max-width: 30rem) {
+            grid-column-gap: theme(digitv2.spacers.spacer8);
+          }
+        }
+
         .digit-label-field-pair {
             margin-bottom: unset;
         }
@@ -178,25 +192,41 @@
 
       .vertical-formcard-divider{
         position: absolute;
+        height: 100%;
 
         @media (max-aspect-ratio: 9/16) {
             /* Media query for mobile */
             top: theme(digitv2.spacers.spacer4);
-            height: calc(100% - 2rem);
+            /*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);
-            height: calc(100% - 2.5rem);
+            /*height: calc(100% - 2.5rem);*/
         }
     
         @media (min-aspect-ratio: 3/4) {
             /* Media query for desktop */
             top: theme(digitv2.spacers.spacer6);
-            height: calc(100% - 3rem);
+            /*height: calc(100% - 3rem);*/
         }
         border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
         z-index: 1;
       }
+}
+
+
+.digit-form-card-content::-webkit-scrollbar {
+  width: theme(digitv2.spacers.spacer2);
+  background-color: theme(digitv2.lightTheme.generic-background);
+}
+.digit-form-card-content::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
+}
+
+.digit-form-card-content::-webkit-scrollbar-thumb {
+  background-color: theme(digitv2.lightTheme.generic-divider);
+  border-radius: 0.563rem;
 }

package/src/digitv2/components/headerdropdownV2.scss

@@ -195,6 +195,26 @@
     @extend .typography.heading-s;
     background: theme(digitv2.lightTheme.primary-1) !important;
     color: theme(digitv2.lightTheme.paper-primary);
+
+    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);
+    }
   }
   
   .header-dropdown-options::-webkit-scrollbar {

package/src/digitv2/components/labelFieldPairV2.scss

@@ -19,9 +19,26 @@
      gap: theme(digitv2.spacers.spacer6);
    }
 
+   .digit-text-block-wrap {
+     margin-top: 0.565rem;
+   }
+
+   .digit-radio-options-wrap {
+     margin-top: 0.565rem;
+   }
+
    &.vertical {
      @apply flex-col items-start;
      gap: theme(digitv2.spacers.spacer2);
+
+     .digit-text-block-wrap {
+       margin-top: theme(digitv2.spacers.spacer0);
+     }
+
+     .digit-radio-options-wrap {
+       margin-top: theme(digitv2.spacers.spacer0);
+     }
+
    }
 
    & .label,

package/src/digitv2/components/multiSelectDropdownV2.scss

@@ -24,7 +24,33 @@
     @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%;
@@ -463,7 +489,33 @@
   .digit-multiselectdropdown-master-active {
     .digit-multiselectdropdown-label {
       p {
-        @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);
+        }
         white-space: pre;
           margin: auto;
           margin-left: theme(digitv2.spacers.spacer0);