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;
  background-color: $chrome-color;
  box-shadow: 0 0 1px rgba(0,0,0,.85);

  // 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;
  }

  // Flip border position to top for footer bars
  &.bar-footer.bar-standard,
  &.bar-footer-secondary.bar-standard {
    box-shadow: 0 0 1px rgba(0,0,0,.85);
  }
}


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

// Bar docked to top of viewport for showing page title and actions
.bar-nav {
  top: 0;
  display: -webkit-box;
  display: box;
  -webkit-box-orient: horizontal;
          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;
  box-shadow: 0 0px 1px rgba(0,0,0,.85);
}

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

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

  .icon {
    width: 24px;
    height: 24px;
    margin-top: -2px;
  }
}

// Label for tab
.tab-label {
  margin-top: -2px;
  font-size: 11px;
  font-weight: 400;
  color: $default-color;
}
.tab-item.active .tab-label {
  color: $primary-color;
}

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

.popover .bar-nav {
  padding-right: 15px;
  padding-left: 15px;
  border-bottom: 1px solid rgba(0,0,0,.15);
  border-radius: 12px 12px 0 0;
  box-shadow: none;

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