bulma/sass/components/navbar.scss

@import "../utilities/mixins";

$navbar-background-color: getVar("scheme-main") !default;
$navbar-box-shadow-size: 0 2px 0 0 !default;
$navbar-box-shadow-color: getVar("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: getVar("text") !default;
$navbar-item-hover-color: getVar("link") !default;
$navbar-item-hover-background-color: getVar("scheme-main-bis") !default;
$navbar-item-active-color: getVar("scheme-invert") !default;
$navbar-item-active-background-color: transparent !default;
$navbar-item-img-max-height: 1.75rem !default;

$navbar-burger-color: getVar("navbar-item-color") !default;

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

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

$navbar-dropdown-boxed-radius: getVar("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: getVar("scheme-invert") !default;
$navbar-dropdown-item-hover-background-color: getVar("background") !default;
$navbar-dropdown-item-active-color: getVar("link") !default;
$navbar-dropdown-item-active-background-color: getVar("background") !default;

$navbar-divider-background-color: getVar("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;

:root {
  @include register-vars(
    (
      navbar-background-color: #{$navbar-background-color},
      navbar-box-shadow-size: #{$navbar-box-shadow-size},
      navbar-box-shadow-color: #{$navbar-box-shadow-color},
      navbar-height: #{$navbar-height},
      navbar-padding-vertical: #{$navbar-padding-vertical},
      navbar-padding-horizontal: #{$navbar-padding-horizontal},
      navbar-z: #{$navbar-z},
      navbar-fixed-z: #{$navbar-fixed-z},
      navbar-item-color: #{$navbar-item-color},
      navbar-item-hover-color: #{$navbar-item-hover-color},
      navbar-item-hover-background-color: #{$navbar-item-hover-background-color},
      navbar-item-active-color: #{$navbar-item-active-color},
      navbar-item-active-background-color: #{$navbar-item-active-background-color},
      navbar-item-img-max-height: #{$navbar-item-img-max-height},
      navbar-burger-color: #{$navbar-burger-color},
      navbar-tab-hover-background-color: #{$navbar-tab-hover-background-color},
      navbar-tab-hover-border-bottom-color: #{$navbar-tab-hover-border-bottom-color},
      navbar-tab-active-color: #{$navbar-tab-active-color},
      navbar-tab-active-background-color: #{$navbar-tab-active-background-color},
      navbar-tab-active-border-bottom-color: #{$navbar-tab-active-border-bottom-color},
      navbar-tab-active-border-bottom-style: #{$navbar-tab-active-border-bottom-style},
      navbar-tab-active-border-bottom-width: #{$navbar-tab-active-border-bottom-width},
      navbar-dropdown-background-color: #{$navbar-dropdown-background-color},
      navbar-dropdown-border-top: #{$navbar-dropdown-border-top},
      navbar-dropdown-offset: #{$navbar-dropdown-offset},
      navbar-dropdown-arrow: #{$navbar-dropdown-arrow},
      navbar-dropdown-radius: #{$navbar-dropdown-radius},
      navbar-dropdown-z: #{$navbar-dropdown-z},
      navbar-dropdown-boxed-radius: #{$navbar-dropdown-boxed-radius},
      navbar-dropdown-boxed-shadow: #{$navbar-dropdown-boxed-shadow},
      navbar-dropdown-item-hover-color: #{$navbar-dropdown-item-hover-color},
      navbar-dropdown-item-hover-background-color: #{$navbar-dropdown-item-hover-background-color},
      navbar-dropdown-item-active-color: #{$navbar-dropdown-item-active-color},
      navbar-dropdown-item-active-background-color: #{$navbar-dropdown-item-active-background-color},
      navbar-divider-background-color: #{$navbar-divider-background-color},
      navbar-divider-height: #{$navbar-divider-height},
      navbar-bottom-box-shadow-size: #{$navbar-bottom-box-shadow-size},
    )
  );
}

@mixin navbar-fixed {
  left: 0;
  position: fixed;
  right: 0;
  z-index: getVar("navbar-fixed-z");
}

.#{$class-prefix}navbar {
  background-color: getVar("navbar-background-color");
  min-height: getVar("navbar-height");
  position: relative;
  z-index: getVar("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: getVar("navbar-height");
    width: 100%;
  }

  &.has-shadow {
    box-shadow: getVar("navbar-box-shadow-size")
      getVar("navbar-box-shadow-color");
  }

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

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

    &.has-shadow {
      box-shadow: getVar("navbar-bottom-box-shadow-size")
        getVar("navbar-box-shadow-color");
    }
  }

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

html,
body {
  &.has-navbar-fixed-top {
    padding-top: getVar("navbar-height");
  }

  &.has-navbar-fixed-bottom {
    padding-bottom: getVar("navbar-height");
  }
}

.#{$class-prefix}navbar-brand,
.#{$class-prefix}navbar-tabs {
  align-items: stretch;
  display: flex;
  flex-shrink: 0;
  min-height: getVar("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: getVar("navbar-burger-color");

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

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

.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
  color: getVar("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: getVar("navbar-item-hover-background-color");
    color: getVar("navbar-item-hover-color");
  }
}

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

  img {
    max-height: getVar("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: getVar("navbar-height");
    padding-bottom: calc(0.5rem - 1px);

    &:focus,
    &:hover {
      background-color: getVar("navbar-tab-hover-background-color");
      border-bottom-color: getVar("navbar-tab-hover-border-bottom-color");
    }

    &.is-active {
      background-color: getVar("navbar-tab-active-background-color");
      border-bottom-color: getVar("navbar-tab-active-border-bottom-color");
      border-bottom-style: getVar("navbar-tab-active-border-bottom-style");
      border-bottom-width: getVar("navbar-tab-active-border-bottom-width");
      color: getVar("navbar-tab-active-color");
      padding-bottom: calc(
        0.5rem - #{getVar("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: getVar("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: getVar("navbar-divider-background-color");
  border: none;
  display: none;
  height: getVar("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: getVar("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 - #{getVar("navbar-height")});
        overflow: auto;
      }
    }
  }

  html,
  body {
    &.has-navbar-fixed-top-touch {
      padding-top: getVar("navbar-height");
    }

    &.has-navbar-fixed-bottom-touch {
      padding-bottom: getVar("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: getVar("navbar-height");

    &.is-spaced {
      padding: getVar("navbar-padding-vertical")
        getVar("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: getVar("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: getVar(
              "navbar-dropdown-item-hover-background-color"
            );
            color: getVar("navbar-dropdown-item-hover-color");
          }

          &.is-active {
            background-color: getVar(
              "navbar-dropdown-item-active-background-color"
            );
            color: getVar("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: getVar("navbar-dropdown-border-top");
        border-radius: getVar("navbar-dropdown-radius")
          getVar("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: getVar("navbar-dropdown-background-color");
    border-bottom-left-radius: getVar("navbar-dropdown-radius");
    border-bottom-right-radius: getVar("navbar-dropdown-radius");
    border-top: getVar("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: getVar("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: getVar("navbar-dropdown-item-hover-background-color");
        color: getVar("navbar-dropdown-item-hover-color");
      }

      &.is-active {
        background-color: getVar(
          "navbar-dropdown-item-active-background-color"
        );
        color: getVar("navbar-dropdown-item-active-color");
      }
    }

    .#{$class-prefix}navbar.is-spaced &,
    &.is-boxed {
      border-radius: getVar("navbar-dropdown-boxed-radius");
      border-top: none;
      box-shadow: getVar("navbar-dropdown-boxed-shadow");
      display: block;
      opacity: 0;
      pointer-events: none;
      top: calc(100% + (#{getVar("navbar-dropdown-offset")}));
      transform: translateY(-5px);
      transition-duration: getVar("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: getVar("navbar-height");
    }

    &.has-navbar-fixed-bottom-desktop {
      padding-bottom: getVar("navbar-height");
    }

    &.has-spaced-navbar-fixed-top {
      padding-top: calc(
        #{getVar("navbar-height")} + calc(#{getVar("navbar-padding-vertical")} *
              2)
      );
    }

    &.has-spaced-navbar-fixed-bottom {
      padding-bottom: calc(
        #{getVar("navbar-height")} + calc(#{getVar("navbar-padding-vertical")} *
              2)
      );
    }
  }

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

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

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

// Combination

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