bulma/sass/components/navbar.scss

@import "../utilities/mixins";

$navbar-background-color: $scheme-main !default;
$navbar-box-shadow-size: 0 2px 0 0 !default;
$navbar-box-shadow-color: $background !default;
$navbar-height: 3.25rem !default;
$navbar-padding-vertical: 1rem !default;
$navbar-padding-horizontal: 2rem !default;
$navbar-z: 30 !default;
$navbar-fixed-z: 30 !default;

$navbar-item-color: $text !default;
$navbar-item-hover-color: $link !default;
$navbar-item-hover-background-color: $scheme-main-bis !default;
$navbar-item-active-color: $scheme-invert !default;
$navbar-item-active-background-color: transparent !default;
$navbar-item-img-max-height: 1.75rem !default;

$navbar-burger-color: $navbar-item-color !default;

$navbar-tab-hover-background-color: transparent !default;
$navbar-tab-hover-border-bottom-color: $link !default;
$navbar-tab-active-color: $link !default;
$navbar-tab-active-background-color: transparent !default;
$navbar-tab-active-border-bottom-color: $link !default;
$navbar-tab-active-border-bottom-style: solid !default;
$navbar-tab-active-border-bottom-width: 3px !default;

$navbar-dropdown-background-color: $scheme-main !default;
$navbar-dropdown-border-top: 2px solid $border !default;
$navbar-dropdown-offset: -4px !default;
$navbar-dropdown-arrow: $link !default;
$navbar-dropdown-radius: $radius-large !default;
$navbar-dropdown-z: 20 !default;

$navbar-dropdown-boxed-radius: $radius-large !default;
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1),
  0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default;

$navbar-dropdown-item-hover-color: $scheme-invert !default;
$navbar-dropdown-item-hover-background-color: $background !default;
$navbar-dropdown-item-active-color: $link !default;
$navbar-dropdown-item-active-background-color: $background !default;

$navbar-divider-background-color: $background !default;
$navbar-divider-height: 2px !default;

$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default;

$navbar-breakpoint: $desktop !default;

$navbar-colors: $colors !default;

@mixin navbar-fixed {
  left: 0;
  position: fixed;
  right: 0;
  z-index: $navbar-fixed-z;
}

.#{$class-prefix}navbar {
  background-color: $navbar-background-color;
  min-height: $navbar-height;
  position: relative;
  z-index: $navbar-z;

  @each $name, $pair in $navbar-colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      background-color: $color;
      color: $color-invert;

      .#{$class-prefix}navbar-brand {
        & > .#{$class-prefix}navbar-item,
        .#{$class-prefix}navbar-link {
          color: $color-invert;
        }

        & > a.#{$class-prefix}navbar-item,
        .#{$class-prefix}navbar-link {
          &:focus,
          &:hover,
          &.is-active {
            background-color: bulmaDarken($color, 5%);
            color: $color-invert;
          }
        }

        .#{$class-prefix}navbar-link {
          &::after {
            border-color: $color-invert;
          }
        }
      }

      .#{$class-prefix}navbar-burger {
        color: $color-invert;
      }

      @include from($navbar-breakpoint) {
        .#{$class-prefix}navbar-start,
        .#{$class-prefix}navbar-end {
          & > .#{$class-prefix}navbar-item,
          .#{$class-prefix}navbar-link {
            color: $color-invert;
          }

          & > a.#{$class-prefix}navbar-item,
          .#{$class-prefix}navbar-link {
            &:focus,
            &:hover,
            &.is-active {
              background-color: bulmaDarken($color, 5%);
              color: $color-invert;
            }
          }

          .#{$class-prefix}navbar-link {
            &::after {
              border-color: $color-invert;
            }
          }
        }

        .#{$class-prefix}navbar-item.has-dropdown:focus
          .#{$class-prefix}navbar-link,
        .#{$class-prefix}navbar-item.has-dropdown:hover
          .#{$class-prefix}navbar-link,
        .#{$class-prefix}navbar-item.has-dropdown.is-active
          .#{$class-prefix}navbar-link {
          background-color: bulmaDarken($color, 5%);
          color: $color-invert;
        }

        .#{$class-prefix}navbar-dropdown {
          a.#{$class-prefix}navbar-item {
            &.is-active {
              background-color: $color;
              color: $color-invert;
            }
          }
        }
      }
    }
  }

  & > .#{$class-prefix}container {
    align-items: stretch;
    display: flex;
    min-height: $navbar-height;
    width: 100%;
  }

  &.has-shadow {
    box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color;
  }

  &.is-fixed-bottom,
  &.is-fixed-top {
    @include navbar-fixed;
  }

  &.is-fixed-bottom {
    bottom: 0;

    &.has-shadow {
      box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color;
    }
  }

  &.is-fixed-top {
    top: 0;
  }
}

html,
body {
  &.has-navbar-fixed-top {
    padding-top: $navbar-height;
  }

  &.has-navbar-fixed-bottom {
    padding-bottom: $navbar-height;
  }
}

.#{$class-prefix}navbar-brand,
.#{$class-prefix}navbar-tabs {
  align-items: stretch;
  display: flex;
  flex-shrink: 0;
  min-height: $navbar-height;
}

.#{$class-prefix}navbar-brand {
  a.#{$class-prefix}navbar-item {
    &:focus,
    &:hover {
      background-color: transparent;
    }
  }
}

.#{$class-prefix}navbar-tabs {
  @include overflow-touch;

  max-width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
}

.#{$class-prefix}navbar-burger {
  @extend %reset;

  color: $navbar-burger-color;

  @include hamburger($navbar-height);
  @include ltr-property("margin", auto, false);
}

.#{$class-prefix}navbar-menu {
  display: none;
}

.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
  color: $navbar-item-color;
  display: block;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  position: relative;

  .#{$class-prefix}icon {
    &:only-child {
      margin-left: -0.25rem;
      margin-right: -0.25rem;
    }
  }
}

a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
  cursor: pointer;

  &:focus,
  &:focus-within,
  &:hover,
  &.is-active {
    background-color: $navbar-item-hover-background-color;
    color: $navbar-item-hover-color;
  }
}

.#{$class-prefix}navbar-item {
  flex-grow: 0;
  flex-shrink: 0;

  img {
    max-height: $navbar-item-img-max-height;
  }

  &.has-dropdown {
    padding: 0;
  }

  &.is-expanded {
    flex-grow: 1;
    flex-shrink: 1;
  }

  &.is-tab {
    border-bottom: 1px solid transparent;
    min-height: $navbar-height;
    padding-bottom: calc(0.5rem - 1px);

    &:focus,
    &:hover {
      background-color: $navbar-tab-hover-background-color;
      border-bottom-color: $navbar-tab-hover-border-bottom-color;
    }

    &.is-active {
      background-color: $navbar-tab-active-background-color;
      border-bottom-color: $navbar-tab-active-border-bottom-color;
      border-bottom-style: $navbar-tab-active-border-bottom-style;
      border-bottom-width: $navbar-tab-active-border-bottom-width;
      color: $navbar-tab-active-color;
      padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width});
    }
  }
}

.#{$class-prefix}navbar-content {
  flex-grow: 1;
  flex-shrink: 1;
}

.#{$class-prefix}navbar-link:not(.is-arrowless) {
  @include ltr-property("padding", 2.5em);

  &::after {
    @extend %arrow;

    border-color: $navbar-dropdown-arrow;
    margin-top: -0.375em;

    @include ltr-position(1.125em);
  }
}

.#{$class-prefix}navbar-dropdown {
  font-size: 0.875rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;

  .#{$class-prefix}navbar-item {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.#{$class-prefix}navbar-divider {
  background-color: $navbar-divider-background-color;
  border: none;
  display: none;
  height: $navbar-divider-height;
  margin: 0.5rem 0;
}

@include until($navbar-breakpoint) {
  .#{$class-prefix}navbar > .#{$class-prefix}container {
    display: block;
  }

  .#{$class-prefix}navbar-brand,
  .#{$class-prefix}navbar-tabs {
    .#{$class-prefix}navbar-item {
      align-items: center;
      display: flex;
    }
  }

  .#{$class-prefix}navbar-link {
    &::after {
      display: none;
    }
  }

  .#{$class-prefix}navbar-menu {
    background-color: $navbar-background-color;
    box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1);
    padding: 0.5rem 0;

    &.is-active {
      display: block;
    }
  }

  // Fixed navbar
  .#{$class-prefix}navbar {
    &.is-fixed-bottom-touch,
    &.is-fixed-top-touch {
      @include navbar-fixed;
    }

    &.is-fixed-bottom-touch {
      bottom: 0;

      &.has-shadow {
        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1);
      }
    }

    &.is-fixed-top-touch {
      top: 0;
    }

    &.is-fixed-top,
    &.is-fixed-top-touch {
      .#{$class-prefix}navbar-menu {
        @include overflow-touch;

        max-height: calc(100vh - #{$navbar-height});
        overflow: auto;
      }
    }
  }

  html,
  body {
    &.has-navbar-fixed-top-touch {
      padding-top: $navbar-height;
    }

    &.has-navbar-fixed-bottom-touch {
      padding-bottom: $navbar-height;
    }
  }
}

@include from($navbar-breakpoint) {
  .#{$class-prefix}navbar,
  .#{$class-prefix}navbar-menu,
  .#{$class-prefix}navbar-start,
  .#{$class-prefix}navbar-end {
    align-items: stretch;
    display: flex;
  }

  .#{$class-prefix}navbar {
    min-height: $navbar-height;

    &.is-spaced {
      padding: $navbar-padding-vertical $navbar-padding-horizontal;

      .#{$class-prefix}navbar-start,
      .#{$class-prefix}navbar-end {
        align-items: center;
      }

      a.#{$class-prefix}navbar-item,
      .#{$class-prefix}navbar-link {
        border-radius: $radius;
      }
    }

    &.is-transparent {
      a.#{$class-prefix}navbar-item,
      .#{$class-prefix}navbar-link {
        &:focus,
        &:hover,
        &.is-active {
          background-color: transparent !important;
        }
      }

      .#{$class-prefix}navbar-item.has-dropdown {
        &.is-active,
        &.is-hoverable:focus,
        &.is-hoverable:focus-within,
        &.is-hoverable:hover {
          .#{$class-prefix}navbar-link {
            background-color: transparent !important;
          }
        }
      }

      .#{$class-prefix}navbar-dropdown {
        a.#{$class-prefix}navbar-item {
          &:focus,
          &:hover {
            background-color: $navbar-dropdown-item-hover-background-color;
            color: $navbar-dropdown-item-hover-color;
          }

          &.is-active {
            background-color: $navbar-dropdown-item-active-background-color;
            color: $navbar-dropdown-item-active-color;
          }
        }
      }
    }
  }

  .#{$class-prefix}navbar-burger {
    display: none;
  }

  .#{$class-prefix}navbar-item,
  .#{$class-prefix}navbar-link {
    align-items: center;
    display: flex;
  }

  .#{$class-prefix}navbar-item {
    &.has-dropdown {
      align-items: stretch;
    }

    &.has-dropdown-up {
      .#{$class-prefix}navbar-link::after {
        transform: rotate(135deg) translate(0.25em, -0.25em);
      }

      .#{$class-prefix}navbar-dropdown {
        border-bottom: $navbar-dropdown-border-top;
        border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0;
        border-top: none;
        bottom: 100%;
        box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1);
        top: auto;
      }
    }

    &.is-active,
    &.is-hoverable:focus,
    &.is-hoverable:focus-within,
    &.is-hoverable:hover {
      .#{$class-prefix}navbar-dropdown {
        display: block;

        .#{$class-prefix}navbar.is-spaced &,
        &.is-boxed {
          opacity: 1;
          pointer-events: auto;
          transform: translateY(0);
        }
      }
    }
  }

  .#{$class-prefix}navbar-menu {
    flex-grow: 1;
    flex-shrink: 0;
  }

  .#{$class-prefix}navbar-start {
    justify-content: flex-start;

    @include ltr-property("margin", auto);
  }

  .#{$class-prefix}navbar-end {
    justify-content: flex-end;

    @include ltr-property("margin", auto, false);
  }

  .#{$class-prefix}navbar-dropdown {
    background-color: $navbar-dropdown-background-color;
    border-bottom-left-radius: $navbar-dropdown-radius;
    border-bottom-right-radius: $navbar-dropdown-radius;
    border-top: $navbar-dropdown-border-top;
    box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1);
    display: none;
    font-size: 0.875rem;

    @include ltr-position(0, false);

    min-width: 100%;
    position: absolute;
    top: 100%;
    z-index: $navbar-dropdown-z;

    .#{$class-prefix}navbar-item {
      padding: 0.375rem 1rem;
      white-space: nowrap;
    }

    a.#{$class-prefix}navbar-item {
      @include ltr-property("padding", 3rem);

      &:focus,
      &:hover {
        background-color: $navbar-dropdown-item-hover-background-color;
        color: $navbar-dropdown-item-hover-color;
      }

      &.is-active {
        background-color: $navbar-dropdown-item-active-background-color;
        color: $navbar-dropdown-item-active-color;
      }
    }

    .#{$class-prefix}navbar.is-spaced &,
    &.is-boxed {
      border-radius: $navbar-dropdown-boxed-radius;
      border-top: none;
      box-shadow: $navbar-dropdown-boxed-shadow;
      display: block;
      opacity: 0;
      pointer-events: none;
      top: calc(100% + (#{$navbar-dropdown-offset}));
      transform: translateY(-5px);
      transition-duration: $speed;
      transition-property: opacity, transform;
    }

    &.is-right {
      left: auto;
      right: 0;
    }
  }

  .#{$class-prefix}navbar-divider {
    display: block;
  }

  .#{$class-prefix}navbar > .#{$class-prefix}container,
  .#{$class-prefix}container > .#{$class-prefix}navbar {
    .#{$class-prefix}navbar-brand {
      @include ltr-property("margin", -0.75rem, false);
    }

    .#{$class-prefix}navbar-menu {
      @include ltr-property("margin", -0.75rem);
    }
  }

  // Fixed navbar
  .#{$class-prefix}navbar {
    &.is-fixed-bottom-desktop,
    &.is-fixed-top-desktop {
      @include navbar-fixed;
    }

    &.is-fixed-bottom-desktop {
      bottom: 0;

      &.has-shadow {
        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1);
      }
    }

    &.is-fixed-top-desktop {
      top: 0;
    }
  }

  html,
  body {
    &.has-navbar-fixed-top-desktop {
      padding-top: $navbar-height;
    }

    &.has-navbar-fixed-bottom-desktop {
      padding-bottom: $navbar-height;
    }

    &.has-spaced-navbar-fixed-top {
      padding-top: $navbar-height + $navbar-padding-vertical * 2;
    }

    &.has-spaced-navbar-fixed-bottom {
      padding-bottom: $navbar-height + $navbar-padding-vertical * 2;
    }
  }

  // Hover/Active states
  a.#{$class-prefix}navbar-item,
  .#{$class-prefix}navbar-link {
    &.is-active {
      color: $navbar-item-active-color;
    }

    &.is-active:not(:focus):not(:hover) {
      background-color: $navbar-item-active-background-color;
    }
  }

  .#{$class-prefix}navbar-item.has-dropdown {
    &:focus,
    &:hover,
    &.is-active {
      .#{$class-prefix}navbar-link {
        background-color: $navbar-item-hover-background-color;
      }
    }
  }
}

// Combination

.#{$class-prefix}hero {
  &.is-fullheight-with-navbar {
    min-height: calc(100vh - #{$navbar-height});
  }
}