@dabapps/roe/src/less/nav-bar.less

A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.

.nav-bar {
  .clearfix();
  padding: @padding-base 0;
  background-color: @nav-bar-background;
  border-bottom: @nav-bar-border;
  box-shadow: @shadow-hard;
  height: @nav-bar-height;
  transition: ease-in-out 0.2s transform, ease-in-out 0.2s box-shadow;
  color: @nav-bar-text-color;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: inherit; // lesshint variableValue: false
  }

  a {
    color: @nav-bar-link-color;
    text-decoration: @nav-bar-link-text-decoration;

    &:hover:not([disabled]):not(.disabled) {
      color: @nav-bar-link-color-hover;
      text-decoration: @nav-bar-link-text-decoration-hover;
    }
  }

  &.no-shadow {
    box-shadow: @shadow-none;
  }

  &.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: @nav-bar-z-index;
  }

  &.shy.hidden {
    transform: translate(0, -100%);
    box-shadow: @shadow-none;
  }
}