ionic-framework/scss/_util.scss

/**
 * Utility Classes
 * --------------------------------------------------
 */

.hidden, 
.hide { 
  display: none !important; 
}
.show {
  display: block !important;
}

.inline {
  display: inline-block;
}

.block {
  display: block;
  clear: both;
  &:after { 
    display: block; 
    visibility: hidden; 
    clear: both; 
    height: 0;
    content: ".";
  }
}

.full-image {
  width: 100%;
}


/**
 * Content Padding
 * --------------------------------------------------
 */

.padding {
  padding: $content-padding;
}

.padding-top,
.padding-vertical {
  padding-top: $content-padding;
}

.padding-right,
.padding-horizontal {
  padding-right: $content-padding;
}

.padding-bottom,
.padding-vertical {
  padding-bottom: $content-padding;
}

.padding-left,
.padding-horizontal {
  padding-left: $content-padding;
}


/**
 * Rounded
 * --------------------------------------------------
 */

.rounded {
  border-radius: $border-radius-base;
}


/**
 * Utility Colors
 * --------------------------------------------------
 * Utility colors are added to help set a naming convention. You'll 
 * notice we purposely do not use words like "red" or "blue", but 
 * instead have colors which represent an emotion or generic theme.
 */

.positive {
  color: $positive;
}
.positive-bg {
  background-color: $positive;
}

.calm {
  color: $calm;
}
.calm-bg {
  background-color: $calm;
}

.assertive {
  color: $assertive;
}
.assertive-bg {
  background-color: $assertive;
}

.balanced {
  color: $balanced;
}
.balanced-bg {
  background-color: $balanced;
}

.energized {
  color: $energized;
}
.energized-bg {
  background-color: $energized;
}

.royle {
  color: $royle;
}
.royle-bg {
  background-color: $royle;
}

.pure {
  color: $pure;
}
.pure-bg {
  background-color: $pure;
}

.subdued-light {
  color: $subdued-light;
}
.subdued-light-bg {
  background-color: $subdued-light;
}

.subdued {
  color: $subdued;
}
.subdued-bg {
  background-color: $subdued;
}

.subdued-dark {
  color: $subdued-dark;
}
.subdued-dark-bg {
  background-color: $subdued-dark;
}

.dark {
  color: $dark;
}
.dark-bg {
  background-color: $dark;
}


/**
 * Brand Colors
 * --------------------------------------------------
 * Brand colors are your brand's colors...override the defaults to 
 * your app's theme! Throughout Ionic's CSS we use brand-primary, 
 * brand-secondary and brand-tertiary (ter·tia·ry: of third rank, importance, or value).
 */

.brand-primary {
  color: $brand-primary;
}
.brand-primary-bg {
  background-color: $brand-primary;
}

.brand-secondary {
  color: $brand-secondary;
}
.brand-secondary-bg {
  background-color: $brand-secondary;
}

.brand-tertiary {
  color: $brand-tertiary;
}
.brand-tertiary-bg {
  background-color: $brand-tertiary;
}