@design-factory/styles 21.0.0-next.0

package/scss/components/sidenav/_sidenav-deprecated.scss

@@ -0,0 +1,165 @@
+@use '../../new-brand-common.variables.scss' as df;
+
+.df-sidenav-toggler {
+  @extend .navbar-toggler;
+}
+
+.df-sidenav-toggler-icon {
+  line-height: 1.5rem;
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.df-sidenav-light {
+  width: 16.875rem;
+  background-color: var(--df-color-inert-neutral-main-background);
+  overflow-x: hidden;
+  border-inline-end: 1px solid var(--df-color-inert-neutral-main-border);
+
+  & > .df-scroll-content {
+    padding-top: var(--df-spacing-5);
+    padding-inline: var(--df-spacing-3);
+  }
+
+  // Three level of sidenav setup
+  .df-sidenav-list {
+    padding-inline: 0;
+
+    li {
+      list-style-type: none;
+    }
+
+    > .df-sidenav-list-withactivated > :is(button, a) {
+      font-weight: var(--df-typo-weight-bold);
+    }
+
+    .df-sidenav-list {
+      .df-sidenav-item {
+        // Second level override
+        padding-inline-start: calc(var(--df-spacing-5) + 0.5rem);
+      }
+
+      .df-sidenav-list {
+        font-size: var(--df-typo-sizing-small);
+
+        .df-sidenav-item {
+          // Third level override
+          padding-inline-start: calc(var(--df-spacing-5) + 1.25rem);
+        }
+      }
+    }
+
+    .df-sidenav-item {
+      .df-sidenav-collapse-icon {
+        color: var(--df-color-primary-alt-default-foreground);
+      }
+
+      width: 100%;
+      color: var(--df-color-inert-neutral-main-foreground);
+      position: relative; // mandatory for the focus shadow
+      border: none; // reset the default border
+      margin: 0 0 1px 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      text-align: start;
+      padding-inline: var(--df-spacing-5);
+      background-color: var(--df-color-inert-neutral-main-background);
+      height: 2.5rem;
+      border-radius: var(--df-borderRadius-main-medium);
+
+      &:hover {
+        .df-sidenav-collapse-icon {
+          color: var(--df-color-primary-alt-hovered-foreground);
+        }
+      }
+      &:active {
+        .df-sidenav-collapse-icon {
+          color: var(--df-color-primary-alt-pressed-foreground);
+        }
+      }
+
+      &:not(.df-sidenav-title):hover {
+        background-color: var(--df-color-primary-alt-hovered-background);
+        &:active {
+          background-color: var(--df-color-primary-alt-pressed-background);
+        }
+      }
+
+      &:is(:focus-visible, .focus) {
+        // Title can never be focus
+        --df-box-shadow-color: var(--df-color-focus-main-border);
+        box-shadow: df.$df-focus-box-shadow;
+        outline: none;
+        z-index: 2;
+      }
+
+      &.active {
+        // Title are never active
+        background-color: var(--df-color-primary-alt-active-background);
+        color: var(--df-color-primary-alt-active-foreground);
+        font-weight: var(--df-typo-weight-bold);
+      }
+
+      &.df-sidenav-title {
+        height: 2.75rem;
+        font-size: var(--df-typo-sizing-small);
+      }
+    }
+  }
+
+  &.df-collapsing {
+    position: absolute;
+    height: 100%;
+    width: 0;
+    overflow: hidden;
+    @include transition(width 0.5s ease);
+  }
+
+  &.df-minimizing {
+    position: absolute;
+    width: 50px;
+    overflow: hidden;
+    @include transition(width 0.5s ease);
+  }
+
+  &.df-sidenav-menu-overlay {
+    position: absolute;
+    height: 100%;
+    z-index: $zindex-fixed + 7;
+  }
+
+  .df-sidenav-icon {
+    font-size: 1.25rem;
+    width: 1.5rem;
+    padding: 2px 2px 2px 2px;
+    margin-inline: -0.28125rem 0.5rem;
+  }
+}
+
+.df-main-content {
+  width: calc(100vw - 16.875rem);
+}
+
+.df-sidenav-wrapper {
+  position: relative;
+  max-width: 100%;
+  overflow: hidden; // in case the content can not be reduced more than the screen.
+}
+
+df-sidenav.df-collapse:not(.df-show) {
+  display: none !important;
+}
+
+.df-sidenav-overlay {
+  position: absolute;
+  background-color: var(--df-color-backdrop-background);
+  opacity: 0.5;
+  width: 100%;
+  height: 100%;
+  z-index: $zindex-fixed + 6;
+}
+
+.df-minimized:not(.df-show) {
+  width: 50px;
+}

package/scss/components/sidenav/_sidenav.scss

@@ -0,0 +1,227 @@
+.df-sidenav {
+  position: relative;
+  --sidenav-minWidth: 44px;
+  // Ensure that the content of the main panel is completely visible on md screens
+  width: var(--sidenav-minWidth);
+
+  &.df-sidenav-withicon {
+    --sidenav-minWidth: 90px;
+  }
+
+  &.df-sidenav-lg {
+    width: auto;
+
+    .df-drawer {
+      --df-drawer-size: max-content;
+    }
+  }
+
+  &.df-sidenav-light-sky {
+    .sidenav-body {
+      scrollbar-color: var(--df-color-primary-soft-default-foreground) var(--df-color-primary-subtle-background);
+    }
+    .df-drawer {
+      background-color: var(--df-color-primary-subtle-background);
+    }
+
+    .df-sidenav-button {
+      background-color: var(--df-color-primary-subtle-background);
+    }
+  }
+
+  // TODO: rework when the topnav is implemented
+  .df-sidenav-mobile-drawer {
+    top: var(--df-navbar-height, 56px) !important;
+    height: calc(100vh - var(--df-navbar-height, 56px)) !important;
+  }
+
+  nav {
+    border-inline-end: 1px solid var(--df-color-inert-neutral-main-border);
+  }
+
+  // TODO: not needed when we have inline drawer
+  &.df-sidenav-drawer {
+    .df-drawer {
+      z-index: 2010;
+    }
+  }
+
+  .df-drawer {
+    background-color: var(--df-color-inert-neutral-main-background);
+    height: 100%;
+    --df-drawer-size: 0;
+    --df-drawer-min-size: var(--sidenav-minWidth);
+    --df-drawer-max-size: max-content;
+    // TODO: not needed when we have inline drawer
+    z-index: 10;
+
+    &.show {
+      --df-drawer-size: max-content;
+    }
+
+    &.df-sidenav-mobile-drawer {
+      --df-drawer-size: 100vw;
+      --df-drawer-max-size: 100vw;
+    }
+  }
+
+  .df-sidenav-active {
+    font-weight: var(--df-typo-weight-bold);
+  }
+
+  .sidenav-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Mobile header with back button
+  .df-sidenav-mobile-header {
+    padding-block-end: var(--df-spacing-2);
+    border-block-end: 1px solid var(--df-color-neutral-alt-default-border);
+
+    font-weight: var(--df-typo-weight-regular);
+
+    .df-sidenav-mobile-header-back-arrow {
+      color: var(--df-color-primary-alt-default-foreground);
+    }
+    .df-sidenav-active {
+      .df-sidenav-mobile-header-back-arrow {
+        color: var(--df-color-primary-alt-active-foreground);
+      }
+    }
+  }
+
+  // Add padding to sidenav-body to prevent box-shadow clipping
+  .sidenav-body {
+    padding: var(--df-spacing-2);
+    scrollbar-color: var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background);
+  }
+
+  .df-sidenav-search-minimized {
+    min-width: 36px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .df-sidenav-toggle-minimized {
+    min-width: 36px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .df-sidenav-header {
+    padding-inline: var(--df-spacing-2);
+    overflow: visible;
+    position: relative;
+
+    &.df-sidenav-header-minimized {
+      padding-inline: 0;
+    }
+  }
+
+  .sidenav-footer {
+    overflow: visible;
+    position: relative;
+  }
+
+  [role='list'] {
+    [role='listitem'] {
+      padding-inline-start: 0;
+
+      [role='listitem']:not(.mobile) {
+        padding-inline-start: var(--df-spacing-6);
+        position: relative;
+
+        // Vertical line for nested items
+        &::before {
+          content: '';
+          position: absolute;
+          left: var(--df-spacing-5);
+          top: 0;
+          bottom: 0;
+          width: 1px;
+          background-color: var(--df-color-neutral-soft-default-background);
+        }
+
+        [role='listitem']:not(.mobile) {
+          padding-inline-start: var(--df-spacing-6);
+        }
+      }
+    }
+  }
+
+  .df-drawer-splitter {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: -4px; // half outside for visual separation
+    width: 1rem; // larger hit area
+    cursor: ew-resize;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: none;
+
+    .df-drawer-splitter-handle {
+      --df-btn-bg: transparent;
+      flex-shrink: 0;
+      transform: translateX(40%);
+      border: none;
+      cursor: ew-resize;
+    }
+  }
+
+  .df-sidenav-button {
+    --df-box-shadow-color: var(--df-color-focus-main-border);
+    --df-btn-font-weight: var(--df-typo-weight-regular);
+    background-color: var(--df-color-inert-neutral-main-background);
+    padding-inline: var(--df-spacing-5);
+    margin-block-end: 1px;
+    height: 40px;
+    border: none;
+    position: relative;
+
+    &:focus-visible {
+      z-index: 1;
+    }
+
+    &.df-sidenav-breadcrumb-button {
+      height: 3rem;
+    }
+
+    .df-sidenav-collapse-toggle {
+      transition: transform 0.3s;
+      color: var(--df-color-primary-alt-default-foreground);
+      &.expanded {
+        transform: rotate(180deg);
+      }
+    }
+
+    &:hover {
+      background-color: var(--df-color-primary-alt-hovered-background);
+
+      .df-sidenav-collapse-toggle {
+        color: var(--df-color-primary-alt-hovered-foreground);
+      }
+    }
+
+    &:active {
+      background-color: var(--df-color-primary-alt-active-background);
+      .df-sidenav-collapse-toggle {
+        color: var(--df-color-primary-alt-active-foreground);
+      }
+    }
+
+    &.df-sidenav-active-level {
+      font-weight: var(--df-typo-weight-bold);
+      background-color: var(--df-color-primary-alt-active-background);
+    }
+  }
+
+  .input-group.df-input-prepend {
+    .input-group-prepend {
+      padding-inline-start: 15px;
+    }
+  }
+}

package/scss/components/slider/_slider.mixins.scss

@@ -0,0 +1,82 @@
+@use 'sass:math';
+
+@mixin setSliderSize($barSize, $pointerSize, $fontSize, $df-slider-tick-height, $df-slider-tick-width) {
+  $midPointerSize: math.div($pointerSize, 2);
+  $midBarSize: math.div($barSize, 2);
+
+  height: $barSize;
+
+  .ngx-slider-bar-wrapper {
+    // override
+    margin-top: -$midPointerSize;
+    padding-top: $midPointerSize;
+    height: $pointerSize;
+  }
+
+  .ngx-slider-bar {
+    // override
+    height: $barSize;
+    border-radius: $midBarSize;
+  }
+
+  .ngx-slider-selection {
+    // override
+    border-radius: $midBarSize;
+  }
+
+  .ngx-slider-pointer {
+    // override
+    width: $pointerSize;
+    height: $pointerSize;
+    top: -$midPointerSize + $midBarSize;
+    border-radius: $midPointerSize;
+  }
+
+  .ngx-slider-bubble {
+    // override
+    bottom: $midPointerSize;
+    font-size: $fontSize;
+  }
+
+  .ngx-slider-ticks {
+    // override
+    top: -(math.div($df-slider-tick-height - $barSize, 2));
+  }
+
+  .ngx-slider-tick {
+    // override
+    margin-left: $midPointerSize - math.div($df-slider-tick-width, 2); // for centering
+  }
+
+  &.vertical {
+    // override
+    width: $barSize;
+
+    .ngx-slider-bar-wrapper {
+      margin: 0 0 0 (-$midPointerSize);
+      padding: 0 0 0 $midPointerSize;
+      width: $barSize;
+    }
+
+    .ngx-slider-bar {
+      width: $barSize;
+    }
+
+    .ngx-slider-pointer {
+      left: 0;
+      inset-inline-start: -$midPointerSize + $midBarSize !important;
+    }
+
+    .ngx-slider-bubble {
+      inset-inline-start: $midPointerSize + 0.125rem;
+    }
+
+    .ngx-slider-ticks {
+      inset-inline-start: - math.div($df-slider-tick-height, 2) + $midBarSize;
+    }
+
+    .ngx-slider-tick {
+      margin-top: $midPointerSize - math.div($df-slider-tick-width, 2); // for centering
+    }
+  }
+}