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

package/src/digitv2/components/sidenavV2.scss

@@ -0,0 +1,516 @@
+.digit-sidebar {
+    position: fixed;
+    height: 100%;
+    background-color: theme(digitv2.lightTheme.primary-2);
+    overflow-x: hidden;
+    left: 0;
+    top: 0;
+    width: theme(digitv2.spacers.spacer12);
+    display: flex;
+    flex-direction: column;
+    padding-top: 1.563rem;
+    padding-left: theme(digitv2.spacers.spacer3);
+    padding-right: theme(digitv2.spacers.spacer3);
+    transition: width 0.5s ease;
+    z-index: 10000;
+
+    &.hovered {
+        width: auto;
+        min-width: 15rem;
+        padding: theme(digitv2.spacers.spacer0);
+    }
+
+
+    .digit-sidebar-search-container {
+        height: 4.5rem;
+        min-width: 15rem;
+        width: auto;
+        padding: theme(digitv2.spacers.spacer4) !important;
+
+        .digit-sidebar-search {
+            height: theme(digitv2.spacers.spacer10) !important;
+            min-width: 13rem;
+
+            .digit-text-input-customIcon {
+                height: theme(digitv2.spacers.spacer6);
+                width: theme(digitv2.spacers.spacer6);
+                top: theme(digitv2.spacers.spacer2);
+                right: theme(digitv2.spacers.spacer2);
+            }
+
+            .input-container {
+                max-height: 100%;
+            }
+
+            input {
+                max-height: 100%;
+                background-color: transparent;
+                border: 0.063rem solid theme(digitv2.lightTheme.paper-secondary);
+                color: theme(digitv2.lightTheme.generic-background);
+
+                ::placeholder {
+                    color: theme(digitv2.lightTheme.generic-background);
+                }
+            }
+
+            .input-container:focus-within {
+                input {
+                    border: 0.063rem solid theme(digitv2.lightTheme.paper-secondary) !important;
+                }
+            }
+        }
+
+        ::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);
+        }
+    }
+
+    .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);
+                color: theme(digitv2.lightTheme.text-primary);
+
+                ::placeholder {
+                    color: theme(digitv2.lightTheme.text-disabled);
+                }
+            }
+
+            .input-container:focus-within {
+                input {
+                    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
+                }
+            }
+        }
+
+        ::placeholder {
+            color: theme(digitv2.lightTheme.text-disabled);
+        }
+    }
+
+    &.light {
+        background-color: theme(digitv2.lightTheme.paper-secondary);
+        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    }
+
+
+}
+
+.digit-sidebar-items-container {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.digit-sidebar-item {
+    display: flex;
+    align-items: center;
+    padding: theme(digitv2.spacers.spacer4);
+    color: theme(digitv2.lightTheme.paper-primary);
+    text-decoration: none;
+    transition: background-color 0.3s;
+    cursor: pointer;
+    outline: none;
+    position: relative;
+
+    &.collapsed{
+        justify-content: center;
+    }
+}
+
+.digit-sidebar-items-container::-webkit-scrollbar {
+    width: 0.375rem;
+}
+
+.digit-sidebar-items-container.dark::-webkit-scrollbar-track {
+    background: theme(digitv2.lightTheme.primary-2);
+}
+
+.digit-sidebar-items-container.dark::-webkit-scrollbar-thumb {
+    background-color: #89ABBA;
+    border-radius: 0.563rem;
+}
+
+.digit-sidebar-items-container.dark::-webkit-scrollbar-thumb:hover {
+    background-color: #6C98A8;
+}
+
+.digit-sidebar-items-container.dark::-webkit-scrollbar-thumb:active {
+    background-color: #56818E;
+}
+
+.digit-sidebar-items-container.light::-webkit-scrollbar {
+    width: 0.375rem;
+    background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+.digit-sidebar-items-container.light::-webkit-scrollbar-track {
+    background-color: theme(digitv2.lightTheme.generic-background);
+    border-radius: 0.563rem;
+}
+
+.digit-sidebar-items-container.light::-webkit-scrollbar-thumb {
+    background-color: theme(digitv2.lightTheme.generic-divider);
+    border-radius: 0.563rem;
+}
+
+.icon {
+    margin-right: theme(digitv2.spacers.spacer3);
+    width: theme(digitv2.spacers.spacer6);
+    height: theme(digitv2.spacers.spacer6);
+}
+
+.item-label {
+
+    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);
+    }
+
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.expand-icon {
+    width: theme(digitv2.spacers.spacer6);
+    height: theme(digitv2.spacers.spacer6);
+    margin-left: auto !important;
+}
+
+.digit-sidebar-item:hover {
+    background-color: #FFFFFF4D;
+}
+
+.digit-sidebar-item.light:hover {
+    background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+.digit-sidebar-item.light {
+    .item-label {
+        color: theme(digitv2.lightTheme.primary-2);
+    }
+}
+
+.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 {
+        @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);
+    }
+}
+
+.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;
+    left: 0;
+    bottom: 0.063rem;
+    width: theme(digitv2.spacers.spacer2);
+    background: theme(digitv2.lightTheme.paper-primary);
+    border-top-right-radius: theme(digitv2.spacers.spacer1);
+    border-bottom-right-radius: theme(digitv2.spacers.spacer1);
+}
+
+.digit-sidebar-item.secondary:active,
+.digit-sidebar-item.secondary.selected,
+.digit-sidebar-item.secondary:active:hover,
+.digit-sidebar-item.secondary.selected:hover {
+    background: #FFFFFF4D;
+}
+
+.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 {
+        color: theme(digitv2.lightTheme.primary-2);
+    }
+}
+
+.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;
+    left: 0;
+    bottom: 0.063rem;
+    width: theme(digitv2.spacers.spacer2);
+    background: theme(digitv2.lightTheme.primary-1);
+    border-top-right-radius: theme(digitv2.spacers.spacer1);
+    border-bottom-right-radius: theme(digitv2.spacers.spacer1);
+}
+
+.digit-sidebar.hovered .item-label {
+    opacity: 1;
+}
+
+.digit-sidebar-children {
+    margin-left: theme(digitv2.spacers.spacer6);
+    border-left: 0.031rem solid theme(digitv2.lightTheme.text-disabled);
+}
+
+.digit-sidebar-bottom {
+    background-color: #FFFFFF33;
+    z-index: 5;
+    padding: theme(digitv2.spacers.spacer4);
+    display: flex;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer4);
+    padding-right: theme(digitv2.spacers.spacer0);
+    padding-left: theme(digitv2.spacers.spacer0);
+
+    .digit-sidebar-bottom-item {
+        display: flex;
+        align-items: center;
+        gap: theme(digitv2.spacers.spacer2);
+        cursor: pointer;
+        height: theme(digitv2.spacers.spacer10);
+
+        &:hover {
+            background-color: #FFFFFF4D;
+        }
+
+        svg {
+            flex-shrink: 0;
+            margin-left: theme(digitv2.spacers.spacer6);
+        }
+
+        .digit-sidebar-bottom-item-text {
+
+            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);
+            }
+
+            color: theme(digitv2.lightTheme.paper-primary);
+        }
+    }
+
+    &.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);
+
+        .digit-sidebar-bottom-item:hover {
+            background-color: theme(digitv2.lightTheme.generic-background);
+        }
+
+    }
+
+    .divider {
+        width: 80%;
+        height: 0.031rem;
+        background-color: theme(digitv2.lightTheme.generic-divider);
+    }
+}
+
+.digit-sidebar {
+    &.collapsed {
+
+        padding-left: theme(digitv2.spacers.spacer0);
+        padding-right: theme(digitv2.spacers.spacer0);
+
+        .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;
+        }
+
+        &.searchDisabled{
+            padding-top: theme(digitv2.spacers.spacer0);
+        }
+
+        .digit-sidebar-items-container {
+
+            display: flex !important;
+            flex-direction: column;
+            gap: theme(digitv2.spacers.spacer6);
+            margin-top: theme(digitv2.spacers.spacer6);
+
+            .item-child-wrapper {
+                width: 100%;
+                height: theme(digitv2.spacers.spacer10);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .digit-sidebar-item {
+                    padding: theme(digitv2.spacers.spacer0);
+                    width: theme(digitv2.spacers.spacer6);
+                    height: 100%;
+
+
+                    .icon {
+                        margin-right: theme(digitv2.spacers.spacer3);
+                        margin-left: theme(digitv2.spacers.spacer3);
+                    }
+
+                    &.parentLevel {
+                        width: 100%;
+                    }
+                }
+
+                .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;
+                }
+
+                .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;
+                    left: 0;
+                    bottom: 0.063rem;
+                    width: theme(digitv2.spacers.spacer1);
+                    background: theme(digitv2.lightTheme.paper-primary);
+                    border-top-right-radius: theme(digitv2.spacers.spacer1);
+                    border-bottom-right-radius: theme(digitv2.spacers.spacer1);
+                }
+
+                .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;
+                }
+
+                .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 {
+                        color: theme(digitv2.lightTheme.primary-2);
+                    }
+                }
+
+                .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;
+                    left: 0;
+                    bottom: 0.063rem;
+                    width: theme(digitv2.spacers.spacer1);
+                    background: theme(digitv2.lightTheme.primary-1);
+                    border-top-right-radius: theme(digitv2.spacers.spacer1);
+                    border-bottom-right-radius: theme(digitv2.spacers.spacer1);
+                }
+
+            }
+
+            &.searchDisabled{
+                margin-top: theme(digitv2.spacers.spacer0);
+            }
+        }
+    }
+}
+
+.digit-sidebar-footer-img {
+    width: 6.563rem;
+    height: theme(digitv2.spacers.spacer3);
+    margin-left: 25%;
+}

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 {
@@ -24,6 +36,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);
@@ -34,6 +65,25 @@
 
       &.current {
         @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);
+        }
         line-height: 1.37rem;
         color: theme(digitv2.lightTheme.text-primary);
       }
@@ -79,21 +129,30 @@
     height: 0.125rem;
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
-      min-width: 6.313rem;
+      /*min-width: 6.313rem;*/
       max-width: 39.438rem;
     }
 
     @media (max-aspect-ratio: 9/16) {
-      min-width: 4.313rem;
+      /*min-width: 4.313rem;*/
       max-width: 16.875rem;
       top: 0.875rem;
     }
 
     @media (min-aspect-ratio: 3/4) {
-      min-width: 5.313rem;
+      /*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);
@@ -104,7 +163,7 @@
     &.vertical {
       top: calc(50% + (theme(digitv2.spacers.spacer2)));
       bottom: calc(-50% + (theme(digitv2.spacers.spacer2)));
-      left: -(theme(digitv2.spacers.spacer12));
+      left: -3.1rem;
       width: 0.125rem;
       height: auto;
       transform: rotate(90deg);
@@ -113,6 +172,22 @@
         background-color: transparent;
         border-color: theme(digitv2.lightTheme.primary-1);
       }
+      @media (max-aspect-ratio: 9/16) {
+        left: -3.65rem;
+        min-width: 4.313rem;
+        max-width: 16.875rem;
+        top: 0.875rem;
+      }
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        left: -3.5rem;
+        min-width: 6.313rem;
+        max-width: 39.438rem;
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        min-width: 5.313rem;
+        max-width: 82.688rem;
+      }
     }
   }
 
@@ -124,6 +199,25 @@
     .stepper-label {
       &.completed {
         @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);
+        }
         line-height: 1.37rem;
         color: theme(digitv2.lightTheme.text-primary);
       }
@@ -132,8 +226,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);
 }
 
@@ -145,4 +239,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);
 }