core/scss/layout/_navbar.scss - dev - githubmirror/tabler

core/scss/layout/_navbar.scss
408 строк9 KB
Paweł Kuna
Add screenshots package and fix `card-gradient` minify bug (#2793)
07 авг 2026, 01:48
07 авг 2026, 01:48b38cd32
@use 'sass:map';

@use '../config' as *;

@mixin navbar-vertical-nav {
  .navbar-collapse {
    flex-direction: column;

    [class^='container'] {
      flex-direction: column;
      align-items: stretch;
      padding: 0;
    }

    .navbar-nav {
      margin-inline-start: 0;
      margin-inline-end: 0;

      .nav-link {
        justify-content: start;
        padding: 0.5rem calc(#{$container-padding-x} / 2);
      }
    }

    .dropdown-menu-columns {
      flex-direction: column;
    }

    .dropdown-menu {
      position: static;
      min-width: 0;
      padding: 0;
      margin: 0;
      color: inherit;
      background: transparent;
      border: none;
      box-shadow: none;

      .dropdown-item {
        display: flex;
        width: auto;
        min-width: 0;
        padding-inline-start: add(calc(#{$container-padding-x} / 2), 1.75rem);
        color: inherit;

        &.disabled {
          color: var(--disabled-color);
          pointer-events: none;
          background-color: transparent;
        }

        &.active,
        &:active {
          background: var(--navbar-active-bg);
        }
      }

      .dropdown-menu .dropdown-item {
        padding-inline-start: add(calc(#{$container-padding-x} / 2), 3.25rem);
      }

      // Third-level submenu in the mobile vertical navbar — genuinely nested two
      // dropdown-menu levels deep.
      // stylelint-disable-next-line selector-max-class, selector-max-compound-selectors
      .dropdown-menu .dropdown-menu .dropdown-item {
        padding-inline-start: add(calc(#{$container-padding-x} / 2), 4.75rem);
      }
    }

    .dropdown-toggle::after {
      margin-inline-start: auto;
    }

    .nav-item.active::after {
      inset-inline-end: auto;
      top: 0;
      bottom: 0;
      border-inline-start-width: 3px;
      border-bottom-width: 0;
    }
  }
}

/**
Navbar
 */
.navbar {
  --navbar-bg: var(--bg-surface);
  --navbar-border-width: #{$navbar-border-width};
  --navbar-active-border-color: #{$navbar-active-border-color};
  --navbar-active-bg: #{$navbar-light-active-bg};
  --navbar-border-color: #{$navbar-border-color};
  --navbar-hover-color: #{$navbar-hover-color};
  align-items: stretch;
  min-height: $navbar-height;
  color: var(--navbar-color);
  background: var(--navbar-bg);
  box-shadow: inset 0 calc(-1 * var(--navbar-border-width)) 0 0 var(--navbar-border-color);

  .navbar-collapse & {
    flex-grow: 1;
  }

  &.collapsing {
    min-height: 0;
  }

  .dropdown-menu {
    position: absolute;
    z-index: $zindex-fixed;
  }

  .navbar-nav {
    --nav-link-icon-margin-end: #{$nav-link-icon-margin-end};
    min-height: subtract($navbar-height, 2 * $navbar-padding-y);

    .nav-link {
      position: relative;
      justify-content: center;
      min-width: 2.5rem;
      min-height: 2.5rem;
      @include border-radius(var(--border-radius));

      .badge {
        position: absolute;
        inset-inline-end: 0.5rem;
        top: 0.5rem;

        /* rtl:ignore */
        transform: translate(calc(var(--dir) * 50%), -50%);
      }
    }
  }
}

.navbar-expand {
  @each $breakpoint in map.keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {
      @include media-breakpoint-down(breakpoint-next($breakpoint)) {
        @include navbar-vertical-nav();
      }

      @include media-breakpoint-up($next) {
        .navbar-collapse {
          flex: 1 1 auto;
          width: auto;
        }

        .nav-item.active {
          position: relative;

          .nav-link {
            color: var(--navbar-active-color);
          }

          &::after {
            position: absolute;
            inset-inline-start: 0;
            inset-inline-end: 0;
            bottom: -0.25rem;
            content: '';
            border: 0 var(--border-style) var(--navbar-active-border-color);
            border-bottom-width: 2px;
          }
        }

        &.navbar-vertical {
          box-shadow: inset calc(-1 * var(--navbar-border-width)) 0 0 0 var(--navbar-border-color);

          &.navbar-right,
          &.navbar-end {
            box-shadow: inset calc(1 * var(--navbar-border-width)) 0 0 0 var(--navbar-border-color);
          }
        }

        &.navbar-vertical {
          ~ .navbar,
          ~ .page-wrapper {
            margin-inline-start: $sidebar-width;
          }
        }

        &.navbar-vertical.navbar-right,
        &.navbar-vertical.navbar-end {
          ~ .navbar,
          ~ .page-wrapper {
            margin-inline-start: 0;
            margin-inline-end: $sidebar-width;
          }
        }
      }
    }
  }
}

/**
Navbar brand
 */
.navbar-brand {
  display: inline-flex;
  gap: $spacer-2;
  align-items: center;
  margin: 0;
  font-weight: $navbar-brand-font-weight;
  line-height: 1;
}

.navbar-brand-image {
  width: auto;
  height: $navbar-brand-image-height;
}

.navbar-brand-gray {
  --navbar-logo-color: var(--tertiary);
  opacity: 0.5;
}

/**
Navbar toggler
 */
.navbar-toggler {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: $navbar-brand-image-height;
  height: $navbar-brand-image-height;
  border: 0;
}

.navbar-toggler-icon {
  position: relative;
  width: 1.25em;
  height: 2px;
  background: currentColor;
  @include border-radius(var(--border-radius-pill));
  @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);

  &::before,
  &::after {
    position: absolute;
    inset-inline-start: 0;
    display: block;
    width: inherit;
    height: inherit;
    content: '';
    background: inherit;
    border-radius: inherit;
    @include transition(inherit);
  }

  &::before {
    top: -0.45em;
  }

  &::after {
    bottom: -0.45em;
  }

  .navbar-toggler[aria-expanded='true'] & {
    transform: rotate(45deg);
    @include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);

    &::before {
      top: 0;
      transform: rotate(-90deg);
    }

    &::after {
      bottom: 0;
      opacity: 0;
    }
  }
}

/**
Navbar transparent
 */
.navbar-transparent {
  --navbar-border-color: transparent !important;
  background: transparent !important;
}

/**
Navbar nav
 */
.navbar-nav {
  --nav-link-hover-bg: #{$navbar-nav-link-hover-bg};
  --nav-link-icon-color: #{$nav-link-icon-color};
  --nav-link-hover-icon-color: #{$nav-link-hover-icon-color};
  align-items: stretch;
  padding: 0;
  margin: 0;

  .nav-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/**
Navbar side
 */
.navbar-side {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin: 0;
}

/**
Navbar vertical
 */
@if $enable-navbar-vertical {
  .navbar-vertical {
    &.navbar-expand {
      @each $breakpoint in map.keys($grid-breakpoints) {
        $next: breakpoint-next($breakpoint, $grid-breakpoints);
        $infix: breakpoint-infix($next, $grid-breakpoints);

        &#{$infix} {
          @include media-breakpoint-up($next) {
            position: fixed;
            inset-inline-start: 0;
            top: 0;
            bottom: 0;
            z-index: $zindex-fixed;
            align-items: start;
            width: $sidebar-width;
            padding: 0;
            overflow-y: scroll;
            @include transition(transform $transition-time);

            &.navbar-right,
            &.navbar-end {
              inset-inline-start: auto;
              inset-inline-end: 0;
            }

            .navbar-brand {
              justify-content: center;
              padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0;
            }

            .navbar-collapse {
              align-items: stretch;
            }

            .navbar-nav {
              flex-grow: 1;
              flex-direction: column;
              min-height: auto;

              .nav-link {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
              }
            }

            > [class^='container'] {
              flex-direction: column;
              align-items: stretch;
              justify-content: start;
              min-height: 100%;
              padding: 0;
            }

            ~ .page {
              padding-inline-start: $sidebar-width;

              [class^='container'] {
                padding-inline-start: 1.5rem;
                padding-inline-end: 1.5rem;
              }
            }

            &.navbar-right ~ .page,
            &.navbar-end ~ .page {
              padding-inline-start: 0;
              padding-inline-end: $sidebar-width;
            }

            @include navbar-vertical-nav();
          }
        }
      }
    }
  }
}

.navbar-overlap {
  &::after {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: 100%;
    z-index: -1;
    height: $navbar-overlap-height;
    content: '';
    background: inherit;
    box-shadow: inherit;
  }
}