@design-factory/styles 21.0.3 → 21.1.0-next.0

package/scss/components/sidenav/_sidenav.scss

@@ -1,253 +0,0 @@
-.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);
-    }
-  }
-
-  .df-sidenav-search-empty {
-    visibility: hidden;
-  }
-
-  // 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;
-    transition: none;
-
-    &.inline-start {
-      transform: translateX(0);
-      &.show {
-        transform: translateX(0);
-      }
-    }
-
-    &.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;
-
-    // Avoid layout shift when an item changed from unselected/selected
-    &::before {
-      content: attr(title);
-      font-weight: var(--df-typo-weight-bold);
-      visibility: hidden;
-      height: 0;
-      overflow: hidden;
-      display: block;
-    }
-  }
-
-  // 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);
-
-      &:hover {
-        background-color: var(--df-color-primary-alt-activeHovered-background);
-      }
-    }
-  }
-
-  .input-group.df-input-prepend {
-    .input-group-prepend {
-      padding-inline-start: 15px;
-    }
-  }
-}