ratchet/lib/sass/bars.scss

//
// Bars
// --------------------------------------------------

[class*="bar-"] {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  height: $bar-base-height;
  padding: 5px $bar-side-spacing;
  border-bottom: $border-default;
  background-color: $chrome-color;


  // Modifier class to dock any bar below .bar-nav
  &.bar-header-secondary {
    top: $bar-base-height;
  }

  // Modifier class to dock any bar to bottom of viewport
  &.bar-footer {
    bottom: 0;
  }

  // Modifier class to dock any bar above a standard bar
  &.bar-footer-secondary {
    bottom: $bar-base-height;
  }

  // Modifier class to dock any bar above a .bar-tab
  &.bar-footer-secondary-tab {
    bottom: $bar-tab-height;
  }
}


// Nav bar
// --------------------------------------------------

// Bar docked to top of viewport for showing page title and actions
.bar-nav {
  top: 0;
  display: -webkit-box;
  display: box;
  @include box-orient(horizontal);
}

// Centered text in the .bar-nav 
.title {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: $font-size-default;
  font-weight: $font-weight;
  line-height: $bar-base-height;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

> a:not([class*="button"]) {
  display: block;
  width: 100%;
  height: 100%;
}

//Retain specified title color
.title a {
  color: inherit;
}


// Tab bar
// --------------------------------------------------

// Bar docked to bottom used for primary app navigation
.bar-tab {
  bottom: 0;
  height: $bar-tab-height;
  padding: 0;
}

// Wrapper for individual tab
.tab-inner {
  display: -webkit-box;
  display: box;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  @include box-orient(horizontal);
}

// Navigational tab
.tab-item {
  height: 100%;
  padding-top: 9px;
  text-align: center;
  @include box-flex(1);

  .tab-label,
  .icon {
    color: $default-color;
  }

  // Label for tab
  .tab-label {
    margin-top: -2px;
    font-size: 11px;
    font-weight: 400;
  }
  
  .icon {
    width: 24px;
    height: 24px;
    margin-top: -2px;
  }

  // Active states for the tab bar
  &.active,
  &:active {
    .tab-label,
    .icon {
      color: $primary-color;
    }
  }
}


// Nav bar in popovers
// --------------------------------------------------

.popover .bar-nav {
  padding-right: 15px;
  padding-left: 15px;
  border-bottom: $border-default;
  border-radius: 12px 12px 0 0;
  @include box-shadow(none);

  .title + [class*="button"]:last-child {
    right: 15px;
  }
}