patternlibrary/agaric/sass/agaric/_component.navbar.scss

// Navbar
//
// Customize Bulma navbar. Uses [ScrollMagic](http://scrollmagic.io) to change
// background colors for optimal legibility against various backgrounds.
//
// Styleguide: Component.Navbar

// Fixed container

.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: +400;
  //
  #logo .logo-color {
    fill: currentColor;
  }
  & + div[data-drupal-messages-fallback] + section,
  & + div[data-drupal-messages-fallback] + .floating-tabs + #main-content + section,
  & + div[data-drupal-messages-fallback] + .floating-tabs + #main-content + article > section:first-child,
  & + div[data-drupal-messages-fallback] + .floating-tabs + #main-content + .node > section:first-child {
    padding-top: 3.3125em;
    @include desktop {
      padding-top: 5.875em;
    }
  }
}

// If the toolbar is present, the is-fixed block must be displayed below the tool bar:
.toolbar-tray-open.toolbar-horizontal {
  .is-fixed {
    padding-top: 79px;
  }
}

// Attempt to keep anchor targets below the fixed header rather than having its
// associated content hidden behind the header; hence the height and negative
// margin here match the fixed header height at different breakpoints.
:target::before {
  content: "";
  display: block;
  height: 3.3125em;
  margin: -3.3125em 0 0;
  @include desktop {
    height: 5.875em;
    margin: -5.875em 0 0;
  }
}

a:target,
a:target:hover {
  padding: 0;
  margin: 0;
}

// Keep status messages out from under the fixed navbar.
.message {
  margin-top: 3.3125rem;
  @include desktop {
    margin-top: 5.875rem;
  }
}

.navbar {
  color: $white;
  background-color: $dark;
  @include desktop {
    padding: 1.25em 0;
  }
  z-index: +9;
}

.navbar-transition {
  @include tablet {
    transition-property: color, background-color;
    transition-timing-function: ease-out;
    transition-duration: 500ms;
  }
}

// Header colors

.transparent-header {
  @include tablet {
    color: $white;
    background-color: transparent;
  }
}

.dark-header {
  @include tablet {
    color: $white;
    background-color: $dark;
  }
}

.light-header {
  @include tablet {
    color: $dark;
    background-color: $white;
  }
}

// Navbar child elements

.navbar-brand #logo {
  width: 95px;
  height: 37px;
}

.navbar-burger {
  color: currentColor;
  span {
    margin-left: -11px;
    width: 22px;
    height: 3.6px;
    transition-property: top, left, width, transform;
  }
  span:nth-child(1) {
    margin-top: -11px;
  }
  span:nth-child(2) {
    margin-top: -2px;
  }
  span:nth-child(3) {
    margin-top: 7px;
  }
  &.burger.is-active span:nth-child(1) {
    margin-top: -11px;
    margin-left: -8.5px;
    width: 28px;
  }
  &.is-active span:nth-child(3) {
    margin-top: 7.5px;
    margin-left: -8.5px;
    width: 28px;
  }
}

.navbar-menu {
  @include mobile {
    background-color: $dark;
  }
}

.navbar-dropdown {
  border: 0;
  padding: 0 1em;
  border-radius: 0;
  @include tablet {
    border-top: 3px solid $dark;
    padding-left: 0;
    padding-right: 0;
  }
}

.navbar-dropdown a.navbar-item {
  padding: 1em;
  &:first-child {}
  &:last-child {}
  @include tablet {
    color: $dark;
  }
}

.navbar-dropdown a:hover.navbar-item,
.navbar-dropdown a:focus.navbar-item {
  border-color: $white;
  @include tablet {
    color: $white;
    background-color: $dark;
  }
}

.navbar-dropdown .navbar-item:first-child {
  border-top: 3px solid $white;
  @include tablet {
    border-top: 0;
  }
}

.navbar-dropdown .navbar-item:last-child {
  border-bottom: 3px solid $white;
  @include tablet {
    border-bottom: 0;
  }
}

.navbar-dropdown .navbar-item {
  padding-left: 3em;
  @include tablet {
    padding-left: 1em;
  }
}

.navbar-link {
  padding-right: 1rem;
  color: currentColor;
  &::after {
    display: none;
  }
}

.navbar-item {
  color: currentColor;
  font-weight: bold;
}

a.navbar-item.is-active,
a.navbar-link.is-active {
  color: $blue-light;
  background-color: transparent;
  @include tablet {
    color: currentColor;
    &::before {
      display: block;
      content: '' !important;
      position: absolute;
      left: 1em;
      right: 1em;
      bottom: 6px;
      border-top: 3px solid currentColor;
    }
    &:hover,
    &:focus {
      color: $white;
      background-color: $dark;
      &::before {
        display: none;
      }
    }
  }
}

.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown:focus .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link {
  @include tablet {
    color: $white;
    background-color: $dark;
  }
}

a.navbar-item:hover,
a.navbar-link:hover,
a.navbar-item:focus,
a.navbar-link:focus,
.hero.is-dark a.navbar-item:not(.button):not(.dropdown-item):not(.tag):hover,
.hero.is-dark a.navbar-item:not(.button):not(.dropdown-item):not(.tag):focus
{
  color: $dark;
  background-color: $white;
}

.light-header {
  a.navbar-item:hover,
  a.navbar-link:hover,
  a.navbar-item:focus,
  a.navbar-link:focus {
    color: $white;
    background-color: $dark;
  }
}

.navbar-link, .navbar-item {
  .navbar-item.is-active::before {
    display: none;
  }
}

// Navbar search

.navbar .ion-search {
  font-size: 1.25em;
}

.navbar-search {
  position: relative;
  .navbar-search-swap form {
    position: absolute;
    top: -9rem;
    transition-property: top;
    transition-duration: 0.4s;
    right: -0.5rem;
    padding: 3.5rem 1rem 0.666rem 1rem;
    background-color: $dark;
  }
  .navbar-search-swap:hover form,
  form:focus-within {
    top: -3rem;
  }
  .navbar-search-swap form .form-item .control .form-text.input {
    width: 18rem;
  }
}