@egovernments/digit-ui-components-css 0.0.2-beta.23 → 0.0.2-beta.25

package/src/digitv2/components/sidebarV2.scss

@@ -1,4 +1,4 @@
-.sidebar {
+.digit-sidebar {
     position: fixed;
     height: 100%;
     background-color: theme(digitv2.lightTheme.primary-2);
@@ -19,13 +19,13 @@
     }
 
 
-    .sidebar-search-container {
+    .digit-sidebar-search-container {
         height: 4.5rem;
         min-width: 15rem;
         width: auto;
         padding: theme(digitv2.spacers.spacer4) !important;
 
-        .sidebar-search {
+        .digit-sidebar-search {
             height: theme(digitv2.spacers.spacer10) !important;
             min-width: 13rem;
 
@@ -61,12 +61,31 @@
         ::placeholder {
             content: attr(placeholder);
             @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-background);
         }
     }
 
-    .sidebar-search-container.light {
-        .sidebar-search {
+    .digit-sidebar-search-container.light {
+        .digit-sidebar-search {
             input {
                 background-color: theme(digitv2.lightTheme.paper-primary);
                 border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
@@ -97,13 +116,13 @@
 
 }
 
-.sidebar-items-container {
+.digit-sidebar-items-container {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
 }
 
-.sidebar-item {
+.digit-sidebar-item {
     display: flex;
     align-items: center;
     padding: theme(digitv2.spacers.spacer4);
@@ -113,40 +132,44 @@
     cursor: pointer;
     outline: none;
     position: relative;
+
+    &.collapsed{
+        justify-content: center;
+    }
 }
 
-.sidebar-items-container::-webkit-scrollbar {
+.digit-sidebar-items-container::-webkit-scrollbar {
     width: 0.375rem;
 }
 
-.sidebar-items-container.dark::-webkit-scrollbar-track {
+.digit-sidebar-items-container.dark::-webkit-scrollbar-track {
     background: theme(digitv2.lightTheme.primary-2);
 }
 
-.sidebar-items-container.dark::-webkit-scrollbar-thumb {
+.digit-sidebar-items-container.dark::-webkit-scrollbar-thumb {
     background-color: #89ABBA;
     border-radius: 0.563rem;
 }
 
-.sidebar-items-container.dark::-webkit-scrollbar-thumb:hover {
+.digit-sidebar-items-container.dark::-webkit-scrollbar-thumb:hover {
     background-color: #6C98A8;
 }
 
-.sidebar-items-container.dark::-webkit-scrollbar-thumb:active {
+.digit-sidebar-items-container.dark::-webkit-scrollbar-thumb:active {
     background-color: #56818E;
 }
 
-.sidebar-items-container.light::-webkit-scrollbar {
+.digit-sidebar-items-container.light::-webkit-scrollbar {
     width: 0.375rem;
     background-color: theme(digitv2.lightTheme.generic-background);
 }
 
-.sidebar-items-container.light::-webkit-scrollbar-track {
+.digit-sidebar-items-container.light::-webkit-scrollbar-track {
     background-color: theme(digitv2.lightTheme.generic-background);
     border-radius: 0.563rem;
 }
 
-.sidebar-items-container.light::-webkit-scrollbar-thumb {
+.digit-sidebar-items-container.light::-webkit-scrollbar-thumb {
     background-color: theme(digitv2.lightTheme.generic-divider);
     border-radius: 0.563rem;
 }
@@ -189,24 +212,24 @@
     margin-left: auto !important;
 }
 
-.sidebar-item:hover {
+.digit-sidebar-item:hover {
     background-color: #FFFFFF4D;
 }
 
-.sidebar-item.light:hover {
+.digit-sidebar-item.light:hover {
     background-color: theme(digitv2.lightTheme.generic-background);
 }
 
-.sidebar-item.light {
+.digit-sidebar-item.light {
     .item-label {
         color: theme(digitv2.lightTheme.primary-2);
     }
 }
 
-.sidebar-item:active,
-.sidebar-item.selected,
-.sidebar-item:active:hover,
-.sidebar-item.selected:hover {
+.digit-sidebar-item:active,
+.digit-sidebar-item.selected,
+.digit-sidebar-item:active:hover,
+.digit-sidebar-item.selected:hover {
     background: theme(digitv2.lightTheme.primary-1);
 
     .item-label {
@@ -215,10 +238,10 @@
     }
 }
 
-.sidebar-item.selected::before,
-.sidebar-item:active::before,
-.sidebar-item:active:hover::before,
-.sidebar-item.selected:hover::before {
+.digit-sidebar-item.selected::before,
+.digit-sidebar-item:active::before,
+.digit-sidebar-item:active:hover::before,
+.digit-sidebar-item.selected:hover::before {
     content: '';
     position: absolute;
     top: 0.062rem;
@@ -230,17 +253,17 @@
     border-bottom-right-radius: theme(digitv2.spacers.spacer1);
 }
 
-.sidebar-item.secondary:active,
-.sidebar-item.secondary.selected,
-.sidebar-item.secondary:active:hover,
-.sidebar-item.secondary.selected:hover {
+.digit-sidebar-item.secondary:active,
+.digit-sidebar-item.secondary.selected,
+.digit-sidebar-item.secondary:active:hover,
+.digit-sidebar-item.secondary.selected:hover {
     background: #FFFFFF4D;
 }
 
-.sidebar-item.light.secondary:active,
-.sidebar-item.light.secondary.selected,
-.sidebar-item.light.secondary:active:hover,
-.sidebar-item.light.secondary.selected:hover {
+.digit-sidebar-item.light.secondary:active,
+.digit-sidebar-item.light.secondary.selected,
+.digit-sidebar-item.light.secondary:active:hover,
+.digit-sidebar-item.light.secondary.selected:hover {
     background: #c84c0e1a;
 
     .item-label {
@@ -248,10 +271,10 @@
     }
 }
 
-.sidebar-item.light.secondary.selected::before,
-.sidebar-item.light.secondary:active::before,
-.sidebar-item.light.secondary:active:hover::before,
-.sidebar-item.light.secondary.selected:hover::before {
+.digit-sidebar-item.light.secondary.selected::before,
+.digit-sidebar-item.light.secondary:active::before,
+.digit-sidebar-item.light.secondary:active:hover::before,
+.digit-sidebar-item.light.secondary.selected:hover::before {
     content: '';
     position: absolute;
     top: 0.063rem;
@@ -263,16 +286,16 @@
     border-bottom-right-radius: theme(digitv2.spacers.spacer1);
 }
 
-.sidebar.hovered .item-label {
+.digit-sidebar.hovered .item-label {
     opacity: 1;
 }
 
-.sidebar-children {
+.digit-sidebar-children {
     margin-left: theme(digitv2.spacers.spacer6);
     border-left: 0.031rem solid theme(digitv2.lightTheme.text-disabled);
 }
 
-.sidebar-bottom {
+.digit-sidebar-bottom {
     background-color: #FFFFFF33;
     z-index: 5;
     padding: theme(digitv2.spacers.spacer4);
@@ -282,7 +305,7 @@
     padding-right: theme(digitv2.spacers.spacer0);
     padding-left: theme(digitv2.spacers.spacer0);
 
-    .sidebar-bottom-item {
+    .digit-sidebar-bottom-item {
         display: flex;
         align-items: center;
         gap: theme(digitv2.spacers.spacer2);
@@ -298,7 +321,7 @@
             margin-left: theme(digitv2.spacers.spacer6);
         }
 
-        .sidebar-bottom-item-text {
+        .digit-sidebar-bottom-item-text {
 
             font-family: theme(digitv2.fontFamily.sans);
             font-style: theme(digitv2.fontStyle.normal);
@@ -324,14 +347,14 @@
         }
     }
 
-    &.light .sidebar-bottom-item .sidebar-bottom-item-text {
+    &.light .digit-sidebar-bottom-item .digit-sidebar-bottom-item-text {
         color: theme(digitv2.lightTheme.primary-2);
     }
 
     &.light {
         border-top: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
 
-        .sidebar-bottom-item:hover {
+        .digit-sidebar-bottom-item:hover {
             background-color: theme(digitv2.lightTheme.generic-background);
         }
 
@@ -344,18 +367,21 @@
     }
 }
 
-.sidebar {
+.digit-sidebar {
     &.collapsed {
 
         padding-left: theme(digitv2.spacers.spacer0);
         padding-right: theme(digitv2.spacers.spacer0);
 
-        .sidebar-search-container-collapsed {
+        .digit-sidebar-search-container-collapsed {
             padding-left: theme(digitv2.spacers.spacer3);
             padding-right: theme(digitv2.spacers.spacer3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
-        .sidebar-items-container {
+        .digit-sidebar-items-container {
 
             display: flex !important;
             flex-direction: column;
@@ -369,7 +395,7 @@
                 align-items: center;
                 justify-content: center;
 
-                .sidebar-item {
+                .digit-sidebar-item {
                     padding: theme(digitv2.spacers.spacer0);
                     width: theme(digitv2.spacers.spacer6);
                     height: 100%;
@@ -385,20 +411,20 @@
                     }
                 }
 
-                .sidebar-item:active,
-                .sidebar-item.selected,
-                .sidebar-item.selectedAsParent {
+                .digit-sidebar-item:active,
+                .digit-sidebar-item.selected,
+                .digit-sidebar-item.selectedAsParent {
                     background: theme(digitv2.lightTheme.primary-1);
                     display: flex;
                     align-items: center;
                     justify-content: center;
                 }
 
-                .sidebar-item.selected::before,
-                .sidebar-item:active::before,
-                .sidebar-item.selectedAsParent::before,
-                .sidebar-item:active:hover::before,
-                .sidebar-item.selected:hover::before {
+                .digit-sidebar-item.selected::before,
+                .digit-sidebar-item:active::before,
+                .digit-sidebar-item.selectedAsParent::before,
+                .digit-sidebar-item:active:hover::before,
+                .digit-sidebar-item.selected:hover::before {
                     content: '';
                     position: absolute;
                     top: 0.062rem;
@@ -410,21 +436,21 @@
                     border-bottom-right-radius: theme(digitv2.spacers.spacer1);
                 }
 
-                .sidebar-item.secondary:active,
-                .sidebar-item.secondary.selected,
-                .sidebar-item.secondary:active:hover,
-                .sidebar-item.secondary.selected:hover ,
-                .sidebar-item.secondary.selectedAsParent,
-                .sidebar-item.secondary.selectedAsParent:hover{
+                .digit-sidebar-item.secondary:active,
+                .digit-sidebar-item.secondary.selected,
+                .digit-sidebar-item.secondary:active:hover,
+                .digit-sidebar-item.secondary.selected:hover ,
+                .digit-sidebar-item.secondary.selectedAsParent,
+                .digit-sidebar-item.secondary.selectedAsParent:hover{
                     background: #FFFFFF4D;
                 }
 
-                .sidebar-item.light.secondary:active,
-                .sidebar-item.light.secondary.selected,
-                .sidebar-item.light.secondary:active:hover,
-                .sidebar-item.light.secondary.selected:hover,
-                .sidebar-item.light.secondary.selectedAsParent,
-                .sidebar-item.light.secondary.selectedAsParent:hover {
+                .digit-sidebar-item.light.secondary:active,
+                .digit-sidebar-item.light.secondary.selected,
+                .digit-sidebar-item.light.secondary:active:hover,
+                .digit-sidebar-item.light.secondary.selected:hover,
+                .digit-sidebar-item.light.secondary.selectedAsParent,
+                .digit-sidebar-item.light.secondary.selectedAsParent:hover {
                     background: #c84c0e1a;
 
                     .item-label {
@@ -432,12 +458,12 @@
                     }
                 }
 
-                .sidebar-item.light.secondary.selected::before,
-                .sidebar-item.light.secondary:active::before,
-                .sidebar-item.light.secondary:active:hover::before,
-                .sidebar-item.light.secondary.selected:hover::before,
-                .sidebar-item.light.secondary.selectedAsParent::before,
-                .sidebar-item.light.secondary.selectedAsParent:hover::before{
+                .digit-sidebar-item.light.secondary.selected::before,
+                .digit-sidebar-item.light.secondary:active::before,
+                .digit-sidebar-item.light.secondary:active:hover::before,
+                .digit-sidebar-item.light.secondary.selected:hover::before,
+                .digit-sidebar-item.light.secondary.selectedAsParent::before,
+                .digit-sidebar-item.light.secondary.selectedAsParent:hover::before{
                     content: '';
                     position: absolute;
                     top: 0.063rem;

package/src/digitv2/components/stepperV2.scss

@@ -24,6 +24,25 @@
 
     .stepper-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);
+      }
       @apply text-center;
       color: theme(digitv2.lightTheme.text-secondary);
       letter-spacing: theme(digitv2.spacers.spacer0);

package/src/digitv2/components/switchV2.scss

@@ -21,6 +21,10 @@
   &:focus-within{
     outline: none;
   }
+
+  &.switch-disabled{
+    background-color: theme(digitv2.lightTheme.text-disabled);
+  }
 }
 
 .digit-switch.checked {
@@ -66,7 +70,7 @@
   @apply text-left;
   word-break: break-word;
   letter-spacing: theme(digitv2.spacers.spacer0);
-  color: theme(digitv2.lightTheme.text-secondary);
+  color: theme(digitv2.lightTheme.text-primary);
 
   &.labelFirst{
     margin:theme(digitv2.spacers.spacer0);

package/src/digitv2/components/textblockV2.scss

@@ -42,6 +42,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

@@ -73,6 +73,25 @@
 
 .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);
 }

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/topbarV2.scss

@@ -376,6 +376,25 @@
       .digit-topbar-ulb-mobileview {
         @apply overflow-hidden whitespace-no-wrap;
         @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);
+        }
         text-overflow: ellipsis;
         color: theme(digitv2.lightTheme.text-primary);
   

package/src/digitv2/components/treeSelectV2.scss

@@ -125,6 +125,25 @@
 }
 .digit-option-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);
+    }
     @apply overflow-hidden w-full;
     flex: 1;
     color: theme(digitv2.lightTheme.text-primary);}