core/scss/ui/_nav.scss - dev - githubmirror/tabler

core/scss/ui/_nav.scss
120 строк2 KB
Bartosz-Do
Wire stylelint into the SCSS lint pipeline (#2794)
06 авг 2026, 01:46
06 авг 2026, 01:469cc9a36
@use '../config' as *;

.nav {
  --nav-link-hover-bg: #{color-transparent(var(--nav-link-color), 0.04)};
  --nav-vertical-nested-margin-start: #{$nav-vertical-nested-margin-start};
  --nav-vertical-nested-padding-start: #{$nav-vertical-nested-padding-start};
  --nav-link-toggle-padding-x: #{$nav-link-toggle-padding-x};
  --nav-link-icon-margin-end: #{$nav-link-icon-margin-end};
}

.nav-vertical {
  &,
  .nav {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .nav {
    padding-inline-start: var(--nav-vertical-nested-padding-start);
    margin-inline-start: var(--nav-vertical-nested-margin-start);
    border-inline-start: var(--border-width) var(--border-style) var(--border-color);
  }

  .nav-link.active,
  .nav-item.show .nav-link {
    font-weight: var(--font-weight-semibold);
    color: var(--nav-link-active-color);
  }

  &.nav-pills {
    margin: 0 calc(-1 * $nav-link-padding-x);
  }
}

//
// Nav bordered
//
.nav-bordered {
  border-bottom: $nav-bordered-border-width var(--border-style) $nav-bordered-border-color;

  .nav-item {
    + .nav-item {
      margin-inline-start: $nav-bordered-margin-x;
    }
  }

  .nav-link {
    padding-inline-start: 0;
    padding-inline-end: 0;
    margin: 0 0 calc(-1 * #{$nav-bordered-border-width});
    border: 0;
    border-bottom: $nav-bordered-link-active-border-width var(--border-style) transparent;

    &:hover {
      background-color: transparent;
    }
  }

  .nav-link.active,
  .nav-item.show .nav-link {
    color: $nav-bordered-link-active-color;
    border-color: $nav-bordered-link-active-border-color;
  }
}

.nav-underline {
  .nav-link {
    border-radius: 0;
  }
}

.nav-link {
  display: flex;
  align-items: center;
  @include transition(color $transition-time, background-color $transition-time);

  &:hover,
  &:focus {
    background-color: var(--nav-link-hover-bg);
  }
}

.nav-link-toggle {
  padding: 0 var(--nav-link-toggle-padding-x);
  margin-inline-start: auto;
  @include transition(transform $transition-time);
  @include caret();

  &::after {
    margin: 0;
  }

  @at-root .nav-link[aria-expanded='true'] & {
    transform: rotate(180deg);
  }
}

.nav-link-icon {
  width: $nav-link-icon-size;
  height: $nav-link-icon-size;
  margin-inline-end: var(--nav-link-icon-margin-end);
  color: $nav-link-icon-color;

  svg {
    display: block;
    height: 100%;
  }

  .nav-link:hover & {
    color: var(--nav-link-hover-icon-color);
  }
}

.nav-fill {
  .nav-item {
    .nav-link {
      justify-content: center;
    }
  }
}