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

package/src/digitv2/components/tagV2.scss

@@ -0,0 +1,108 @@
+.digit-tag-wrapper {
+
+    border-radius: theme(digitv2.spacers.spacer1);
+    padding: theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer3);
+    gap: 0.625rem;
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    justify-content: center;
+
+    &.left {
+        justify-content: flex-start;
+    }
+
+    &.right {
+        justify-content: flex-end;
+    }
+
+    svg {
+        flex-shrink: 0;
+    }
+
+    &.success {
+        background-color: theme(digitv2.lightTheme.alert-successbg);
+
+        .digit-tag-text {
+            color: theme(digitv2.lightTheme.alert-success);
+        }
+    }
+
+    &.error {
+        background-color: theme(digitv2.lightTheme.alert-errorbg);
+
+        .digit-tag-text {
+            color: theme(digitv2.lightTheme.alert-error);
+        }
+    }
+
+    &.warning {
+        background-color: theme(digitv2.lightTheme.alert-warning-bg);
+
+        .digit-tag-text {
+            color: theme(digitv2.lightTheme.alert-warning);
+        }
+    }
+
+    &.monochrome {
+        background-color: theme(digitv2.lightTheme.paper-secondary);
+
+        .digit-tag-text {
+            color: theme(digitv2.lightTheme.primary-2);
+        }
+    }
+
+
+    &.stroke {
+        &.success {
+            border: 0.031rem solid theme(digitv2.lightTheme.alert-success);
+        }
+
+        &.error {
+            border: 0.031rem solid theme(digitv2.lightTheme.alert-error);
+        }
+
+        &.warning {
+            border: 0.031rem solid theme(digitv2.lightTheme.alert-warning);
+        }
+
+        &.monochrome {
+            border: 0.031rem solid theme(digitv2.lightTheme.primary-2);
+        }
+    }
+
+    .digit-tag-customIcon {
+        width: theme(digitv2.spacers.spacer4);
+        height: theme(digitv2.spacers.spacer4);
+    }
+
+    .digit-tag-text {
+        @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);
+        }
+    }
+
+    &.cp {
+        &:hover {
+            box-shadow: 0rem 0.063rem 0.188rem 0.063rem #00000026;
+            box-shadow: 0rem 0.063rem 0.125rem 0rem #0000004D;
+        }
+    }
+}

package/src/digitv2/components/textInputV2.scss

@@ -102,6 +102,8 @@
   input[type="time"]:disabled::-webkit-calendar-picker-indicator {
     @apply absolute cursor-pointer w-6 h-6;
     right: theme(digitv2.spacers.spacer3);
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   input[type="date"]:disabled::-webkit-calendar-picker-indicator,
@@ -139,13 +141,13 @@
       pointer-events: none !important;
       border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
       background: theme(digitv2.lightTheme.generic-background);
-      color: theme(digitv2.lightTheme.text-disabled);
+      color: theme(digitv2.lightTheme.text-secondary);
     }
 
     input {
       border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
       background: theme(digitv2.lightTheme.generic-background);
-      color: theme(digitv2.lightTheme.text-disabled);
+      color: theme(digitv2.lightTheme.text-secondary);
     }
 
     .digit-numeric-button-prefix,
@@ -380,7 +382,7 @@
 
   @media (max-aspect-ratio: 9/16) {
     /* Media query for mobile */
-    max-width: 20.5rem;
+    max-width: 100%;
     width: 100%;
   }
 

package/src/digitv2/components/textareaV2.scss

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

package/src/digitv2/components/textblockV2.scss

@@ -35,6 +35,25 @@
 
         .digit-text-block-subheader {
             @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-secondary);
             line-height: normal;
         }
@@ -42,6 +61,25 @@
 
     .digit-text-block-body {
         @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/timelineV2.scss

@@ -56,6 +56,25 @@
 
 .timeline-label {
   @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);
+  }
   @apply whitespace-normal h-auto text-left;
   color: theme(digitv2.lightTheme.text-primary);
   word-break: break-word;
@@ -65,10 +84,33 @@
     /* Media query for mobile */
     padding-top: 0.164rem;
   }
+
+  &.upcoming{
+    color:theme(digitv2.lightTheme.text-secondary);
+  }
 }
 
 .timeline-date {
   @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 text-left;
   color: theme(digitv2.lightTheme.text-secondary);
 }
@@ -82,15 +124,59 @@
 .timeline-additional-elements-inline {
   @apply flex flex-wrap items-start;
   gap: theme(digitv2.spacers.spacer4);
+  @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);
+  }
 }
 
 .timeline-additional-elements-column {
   @apply flex flex-col items-start;
+  @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);
+  }
   gap: theme(digitv2.spacers.spacer4);
 
   .timeline-individual-element {
     @apply w-full max-w-full;
 
+    &.hidden{
+      display: none;
+    }
+
   }
 }
 
@@ -98,15 +184,6 @@ img {
   @apply max-w-full;
 }
 
-.details-btn {
-  @extend .typography.link;
-  @apply text-left;
-  background-color: transparent;
-  border: none;
-  color: theme(digitv2.lightTheme.primary-1);
-  padding: theme(digitv2.spacers.spacer0);
-}
-
 /* Circle Variants */
 .timeline-circle,
 .timeline-circle.upcoming {
@@ -118,7 +195,7 @@ img {
   border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
 }
 
-.timeline-circle.inprogress::after {
+.timeline-circle.inprogress:not(.error)::after {
   @apply absolute w-4 h-4;
   content: '';
   top: 50%;
@@ -133,9 +210,7 @@ img {
   }
 }
 
-.timeline-circle.completed {
-  background-color: theme(digitv2.lightTheme.primary-1);
-
+.timeline-circle{
   .check-icon {
     @apply w-6 h-6 absolute;
     top: 50%;
@@ -150,10 +225,65 @@ img {
   }
 }
 
+.timeline-circle.completed {
+  background-color: theme(digitv2.lightTheme.primary-1);
+}
+
 .digit-timeline-molecule{
   @apply max-h-full;
+
+  .timeline-content:not(.lastTimeline){
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      margin-bottom: theme(digitv2.spacers.spacer6);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      margin-bottom: theme(digitv2.spacers.spacer5);
+    }
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      margin-bottom: theme(digitv2.spacers.spacer4);
+    }
+  }
 }
 
-.view-more-container {
+.view-more-past-container {
   margin-top: theme(digitv2.spacers.spacer4);
 }
+
+.view-more-future-container {
+  margin-bottom: theme(digitv2.spacers.spacer4);
+}
+
+.digit-timeline-item {
+  &.error{
+
+    .timeline-circle{
+      background-color: theme(digitv2.lightTheme.alert-error);
+    }
+
+    .timeline-content{
+      background-color: theme(digitv2.lightTheme.alert-errorbg);
+      border-radius: theme(digitv2.spacers.spacer1);
+      padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);
+
+
+      .timeline-info{
+        .timeline-label{
+          color: theme(digitv2.lightTheme.alert-error);
+          padding-top: 0rem;
+        }
+        .timeline-date{
+          color: theme(digitv2.lightTheme.alert-error);
+        }
+
+        .timeline-divider {
+          border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
+        }
+      }
+    }
+  }
+}

package/src/digitv2/components/toastV2.scss

@@ -1,4 +1,4 @@
-.digit-toast-success {
+/*.digit-toast-success {
   @apply fixed flex z-20 w-full max-w-full left-0 items-center;
   bottom: -(theme(digitv2.spacers.spacer12));
   gap: theme(digitv2.spacers.spacer2);
@@ -76,6 +76,84 @@
   }
 }
 
+.digit-toast-success.animate {
+  animation: slideInFromBottom 0.5s ease forwards;
+}*/
+
+.digit-toast-success {
+  max-width: 100%;
+  width: auto;
+  gap: theme(digitv2.spacers.spacer2);
+  height: theme(digitv2.spacers.spacer12);
+  padding: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer3) !important;
+  @apply fixed flex z-20 items-center;
+  background-color: theme(digitv2.lightTheme.alert-success);
+  transition: bottom 0.5s ease;
+  left: 0;
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    min-width: 30rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    @apply w-full min-w-full;
+  }
+
+  @media (min-aspect-ratio: 3/4){
+    min-width: 50rem;
+  }
+
+  &.digit-info {
+    background-color: theme(digitv2.lightTheme.alert-info);
+  }
+
+  &.digit-error {
+    background-color: theme(digitv2.lightTheme.alert-error);
+  }
+
+  &.digit-warning {
+    background-color: theme(digitv2.lightTheme.alert-warning);
+
+    &.digit-warning-buttons {
+      @apply block;
+    }
+  }
+
+  .digit-warning-button-container {
+    @apply w-full flex justify-end;
+
+    button {
+      margin-left: 0.625rem;
+    }
+  }
+
+  .digit-toast-sub-container {
+    @apply flex;
+  }
+
+  svg {
+    @apply flex-shrink-0;
+  }
+
+  .toast-label {
+    @extend .typography.caption-s;
+    @apply text-left overflow-hidden whitespace-no-wrap flex-grow flex items-center h-6;
+    letter-spacing: theme(digitv2.spacers.spacer0);
+    color: theme(digitv2.lightTheme.paper-primary);
+    margin: theme(digitv2.spacers.spacer0);
+    text-overflow: ellipsis;
+  }
+}
+
+@keyframes slideInFromBottom {
+  from {
+    bottom: -100%;
+  }
+  to {
+    bottom: 4rem;
+  }
+}
+
 .digit-toast-success.animate {
   animation: slideInFromBottom 0.5s ease forwards;
 }

package/src/digitv2/components/toggleV2.scss

@@ -46,6 +46,25 @@
 
   input:checked+.digit-toggle-label {
     @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);
+    }
     background-color: theme(digitv2.lightTheme.primary-1);
     color: theme(digitv2.lightTheme.paper-primary) !important;
   }
@@ -57,6 +76,25 @@
 
     .digit-toggle-label {
       @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);
     }
   }