ionic-framework/scss/ionic/theme/_bar.scss

.bar {
  background-color: $bar-bg;
  border-style: solid;
  border-width: 0;

  &.bar-header {
    border-bottom-width: 1px;
  }
  &.bar-footer {
    border-top-width: 1px;
  }

  &.bar-default {
    background-color: $bar-default-bg;
    border-color: $bar-default-border-color;
    color: $gray-dark;
    .tab-item a {
      color: $gray-dark;
    }
  }

  &.bar-secondary {
    background-color: $bar-secondary-bg;
    border-color: $bar-secondary-border-color;
    color: $gray-dark;
    .tab-item a {
      color: $gray-dark;
    }
  }
  &.bar-primary {
    background-color: $bar-primary-bg;
    border-color: $bar-primary-border-color;
    color: $gray-light;
    .tab-item a {
      color: $gray-light;
    }
  }
  &.bar-info {
    background-color: $bar-info-bg;
    border-color: $bar-info-border-color;
    color: $gray-light;
    .tab-item a {
      color: $gray-light;
    }
  }
  &.bar-success {
    background-color: $bar-success-bg;
    border-color: $bar-success-border-color;
    color: $gray-light;
    .tab-item a {
      color: $gray-light;
    }
  }
  &.bar-warning {
    background-color: $bar-warning-bg;
    border-color: $bar-warning-border-color;
    color: $gray-light;
    .tab-item a {
      color: $gray-light;
    }
  }
  &.bar-danger {
    background-color: $bar-danger-bg;
    border-color: $bar-danger-border-color;
    color: $gray-light;

    .tab-item a {
      color: $gray-light;
    }
  }
  &.bar-dark {
    background-color: $bar-dark-bg;
    border-color: $bar-dark-border-color;
    color: $gray-light;

    .tab-item a {
      color: $gray-light;
    }
  }

  //
  //Disabled temporarily because it's annoying for testing.
  //@media screen and (orientation : landscape) {
  //padding: $barPaddingLandscape;
  //}
}

// Default styles for buttons inside of styled bars

.bar-default {
  .button {
    @include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark);
  }
}

.bar-secondary {
  .button {
    @include button-style($button-secondary-bg, $button-secondary-border, $gray-dark);
  }
}

.bar-primary {
  .button {
    @include button-style($button-primary-bg, $button-primary-border, $gray-light);
  }
}
.bar-info {
  .button {
    @include button-style($button-info-bg, $button-info-border, $gray-light);
  }
}
.bar-success {
  .button {
    @include button-style($button-success-bg, $button-success-border, $gray-light);
  }
}
.bar-warning {
  .button {
    @include button-style($button-warning-bg, $button-warning-border, $gray-light);
  }
}
.bar-danger {
  .button {
    @include button-style($button-danger-bg, $buttonDangerBorder, $gray-light);
  }
}
.bar-dark {
  // A default style for buttons
  .button {
    @include button-style($button-dark-bg, $button-dark-border, $gray-light);
  }
}

.bar .button-icon {
  background-color: transparent;
  border: 1px solid transparent;
}