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

package/src/digitv2/components/labelFieldPairV2.scss

@@ -3,40 +3,66 @@
 
 
    @media (min-aspect-ratio: 9/16) {
-    @apply items-start;
+     @apply items-start;
+   }
+
+   @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+     gap: theme(digitv2.spacers.spacer5);
    }
 
    @media (max-aspect-ratio: 9/16) {
-    @apply flex-col items-start;
+     @apply flex-col items-start;
+     gap: theme(digitv2.spacers.spacer4);
+   }
+
+   @media (min-aspect-ratio: 3/4) {
+     gap: theme(digitv2.spacers.spacer6);
    }
 
-   &.vertical{
-    @apply flex-col items-start;
+   .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,
    & header {
-     margin-right: theme(digitv2.spacers.spacer6);
      width: 33%;
 
      @media (max-aspect-ratio: 9/16) {
-      @apply w-full;
-    }
+       @apply w-full;
+     }
    }
 
    & .digit-field {
      width: 60%;
 
      @media (max-aspect-ratio: 9/16) {
-      width: 100%;
-    }
+       width: 100%;
+     }
    }
  }
 
-@screen dt {
+ @screen dt {
    .digit-employee-card {
      .digit-label-field-pair {
-       @apply mb-lg flex ;
+       @apply mb-lg flex;
 
        h2 {
          width: 30%;

package/src/digitv2/components/landingpagecardV2.scss

@@ -0,0 +1,278 @@
+.digit-landing-page-card {
+    width: fit-content;
+    background-color: theme(digitv2.lightTheme.paper-primary);
+    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);
+
+    .icon-module-header {
+        display: flex !important;
+        align-items: center !important;
+        gap: theme(digitv2.spacers.spacer2);
+
+        .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);  
+                border-radius: 0.125rem;
+            }
+        }
+
+        &.right{
+            &.iconBg {
+            gap:theme(digitv2.spacers.spacer4);
+        }
+    }
+
+        svg {
+            flex-shrink: 0;
+        }
+
+        .ladingcard-moduleName {
+            @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.primary-2);
+            overflow: hidden;
+            word-wrap: break-word;
+            word-break: break-word;
+            white-space: nowrap;
+            line-height: normal;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &.left {
+            justify-content: space-between;
+        }
+    }
+
+    .metric-container {
+        display: flex !important;
+        align-items: flex-start;
+        justify-content: space-evenly;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-wrap: wrap;
+
+
+        &.left {
+            justify-content: unset;
+        }
+
+        .metric-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            cursor: pointer;
+            flex: 1;
+
+            &.left {
+                align-items: flex-start;
+            }
+
+            .metric-count {
+                @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.text-primary);
+            }
+
+            .metric-label {
+                @extend .typography.body-xs;
+                overflow: hidden;
+                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);
+                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);
+                }
+            }
+        }
+    }
+
+    .digit-button-teritiary {
+        justify-content: flex-start;
+    }
+
+    @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        width: 100%;
+    }
+
+}
+
+.digit-landingpage-divider {
+    width: 100%;
+    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;
+        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);
+    }
+}

package/src/digitv2/components/loaderV2.scss

@@ -0,0 +1,47 @@
+.digit-animation{
+    width: fit-content;
+}
+
+.digit-loader-new {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: fit-content;
+    align-items: center; 
+
+    .digit-loader-text {
+        @extend .typography.caption-s;
+        color: theme(digitv2.lightTheme.primary-2);
+    }
+
+    &.PageLoader {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    &.OverlayLoader {
+
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(11, 12, 12, 0.7);
+        z-index: 9999;
+        backdrop-filter: blur(0.125rem);
+        -webkit-backdrop-filter: blur(0.125rem);
+    
+        .digit-loader-text{
+            color: theme(digitv2.lightTheme.paper-primary);
+        }
+    }
+}
+
+.custom-loader-example{
+    .digit-loader-text{
+        color: theme(digitv2.lightTheme.primary-1);
+    }
+}

package/src/digitv2/components/menuCardV2.scss

@@ -0,0 +1,116 @@
+.digit-menu-card {
+
+    display: flex;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer3);
+    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;
+        align-items: center;
+        gap: theme(digitv2.spacers.spacer2);
+
+        .digit-menucard-icon {
+
+            @media (max-aspect-ratio: 9/16) {
+                /* Media query for mobile */
+                width: theme(digitv2.spacers.spacer6);
+                height: theme(digitv2.spacers.spacer6);
+            }
+
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+                /* Media query for tablets */
+                width: theme(digitv2.spacers.spacer8);
+                height: theme(digitv2.spacers.spacer8);
+            }
+
+            @media (min-aspect-ratio: 3/4) {
+                /* Media query for desktop */
+                width: theme(digitv2.spacers.spacer10);
+                height: theme(digitv2.spacers.spacer10);
+            }
+        }
+
+        svg {
+            flex-shrink: 0;
+        }
+
+        .digit-menuacard-menuName {
+            @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);
+            }
+            line-height: normal;
+            color: theme(digitv2.lightTheme.primary-2);
+        }
+    }
+
+    .digit-menucard-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.text-primary);
+    }
+}
+
+.digit-menu-card-wrapper{
+    display: flex !important;
+    flex-direction: column;
+
+    @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);
+    }
+
+}

package/src/digitv2/components/metricCardV2.scss

@@ -0,0 +1,151 @@
+.digit-metric-card {
+    position: relative;
+    @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);
+    }
+
+    .metric-divider{
+        margin: theme(digitv2.spacers.spacer0);
+    }
+
+    .vertical-metric-divider{
+        position: absolute;
+
+        @media (max-aspect-ratio: 9/16) {
+            /* Media query for mobile */
+            top: theme(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);
+            height: calc(100% - 2.5rem);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+            /* Media query for desktop */
+            top: theme(digitv2.spacers.spacer6);
+            height: calc(100% - 3rem);
+        }
+        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+        z-index: 1;
+    }
+}
+
+.metric-item {
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer1);
+    padding: theme(digitv2.spacers.spacer4);
+
+    .metric-value {
+        @extend .typography.heading-l;
+        color: theme(digitv2.lightTheme.primary-2);
+        line-height: normal;
+    }
+
+    .metric-description {
+        @extend .typography.body-s;
+        text-align: center;
+        color: theme(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);
+        }
+
+        @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);
+        }
+    }
+
+    .metric-status {
+        @extend .typography.body-xs;
+        display: flex;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+        gap: theme(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);
+        }
+
+        @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);
+        }
+
+
+        svg {
+            flex-shrink: 0;
+            width: theme(digitv2.spacers.spacer4);
+            height: theme(digitv2.spacers.spacer4);
+        }
+
+        color: theme(digitv2.lightTheme.primary-1);
+
+        &.Increased {
+            color: theme(digitv2.lightTheme.alert-success);
+        }
+
+        &.Decreased {
+            color: theme(digitv2.lightTheme.alert-error);
+        }
+
+        &.Nochange {
+            color: theme(digitv2.lightTheme.alert-info);
+        }
+    }
+}

package/src/digitv2/components/mobileNumberV2.scss

@@ -13,7 +13,7 @@
 
   @media (max-aspect-ratio: 9/16) {
     /* Media query for mobile */
-    max-width: 20.5rem;
+    max-width:100%;
     min-width: 9.75rem;
     width: 100%;
   }