energylink/public/sass/components/_navbar.scss

.navbar {
  position: relative;
  z-index: $zindex-navbar-fixed;
  height: $navbarHeight;
  padding: 0 20px 0 50px;
  display: flex;
  flex-grow: 1;
  border-bottom: 1px solid transparent;
  transition-duration: 350ms;
  transition-timing-function: ease-in-out;
  transition-property: box-shadow, border-bottom;
}

@mixin navbar-alt-look() {
  background: $page-header-bg;
  box-shadow: $search-shadow;
  border-bottom: $navbarBorder;
}

.dashboard-page--settings-open {
  .navbar {
    @include navbar-alt-look();
  }

  .navbar-buttons--tv,
  .navbar-button--add-panel,
  .navbar-button--star,
  .navbar-button--save,
  .navbar-button--share,
  .navbar-button--settings,
  .navbar-page-btn .fa-caret-down,
  .refresh-picker,
  .gf-timepicker-nav {
    display: none;
  }

  .navbar-buttons--close {
    display: flex;
  }
}

.panel-in-fullscreen {
  .navbar {
    padding-left: 20px;
  }

  .navbar-button--add-panel,
  .navbar-button--star,
  .navbar-button--tv {
    display: none;
  }
}

.navbar-page-btn {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  margin: 0;
  color: $headings-color;
  font-size: $font-size-lg;
  min-height: $navbarHeight;
  line-height: $navbarHeight;

  .fa-caret-down {
    font-size: 60%;
    padding-left: 6px;
  }

  .gicon {
    top: -2px;
    position: relative;
    font-size: 17px;
    line-height: 8px;
    opacity: 0.75;
    margin-right: 10px;
    display: none;
  }

  &--folder {
    color: $text-color-weak;

    @include media-breakpoint-down(md) {
      display: none;
    }
  }
}

.navbar-buttons {
  // height: $navbarHeight;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 10px;

  &--close {
    display: none;
    margin-right: 0;
  }

  &--zoom {
    margin-right: 0;
  }
}

.navbar__spacer {
  flex-grow: 1;
}

.navbar-button {
  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);

  display: flex;
  align-items: center;
  font-weight: $btn-font-weight;
  padding: 6px $space-sm;
  line-height: 16px;
  color: $text-muted;
  border: 1px solid $navbar-button-border;
  margin-left: $space-xs;
  white-space: nowrap;

  .gicon {
    font-size: 16px;
  }

  .fa {
    font-size: 16px;
  }

  &--add-panel {
    padding: 2px 10px;

    .gicon {
      font-size: 22px;
    }
  }

  &--refresh {
    padding-left: 8px;
    padding-right: 8px;
  }

  &--attached {
    margin-left: 0;
    border-radius: 0 2px 2px 0;
  }

  &--settings {
    .gicon {
      filter: $navbar-btn-gicon-brightness;
    }
    &:hover {
      .gicon {
        filter: brightness(0.8);
      }
    }
  }

  &--tight {
    padding: 7px 4px;

    .fa {
      font-size: 14px;
      position: relative;
      top: 1px;
    }
  }

  &--secondary {
    @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
  }
}

@include media-breakpoint-up(sm) {
  .navbar {
    padding-left: 20px;
    margin-left: 0;
  }

  .navbar-page-btn {
    .gicon {
      display: inline-block;
    }
  }
}

.navbar-edit {
  display: flex;
  height: $navbarHeight;
  align-items: center;
  padding-right: 13px;
}

.navbar-edit__back-btn {
  background: transparent;
  border: 2px solid $text-color;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  transition: transform 0.1s ease 0.1s;
  color: $text-color;

  i {
    font-size: $font-size-lg;
    position: relative;
    top: 2px;
  }

  &:hover {
    color: $text-color-strong;
    border-color: $text-color-strong;
  }
}

.navbar-settings-title {
  display: block;
  margin: 0;
  color: $headings-color;
  font-size: $font-size-lg;
  min-height: $navbarHeight;
  line-height: $navbarHeight;
}