ui/app/styles/base/_helpers.scss

// -----------------------------------------------------------------------------
// This file contains CSS helper classes.
// -----------------------------------------------------------------------------

/**
 * Clear inner floats
 */
@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

.clearfix {
  @include clearfix;
}

.affix {
  position: fixed;
}

.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}

/**
 * Main content containers
 * 1. Make the container full-width with a maximum width
 * 2. Center it in the viewport
 * 3. Leave some space on the edges, especially valuable on small screens
 */
.container {
  max-width: $max-width; /* 1 */
  min-width: $min-width;
  margin-left: auto; /* 2 */
  margin-right: auto; /* 2 */
  padding-left: 20px; /* 3 */
  padding-right: 20px; /* 3 */
  width: 100%; /* 1 */
 }

/**
 * Hide text while making it readable for screen readers
 * 1. Needed in WebKit-based browsers because of an implementation bug;
 *    See: https://code.google.com/p/chromium/issues/detail?id=457146
 */
.hide-text {
  overflow: hidden;
  padding: 0; /* 1 */
  text-indent: 101%;
  white-space: nowrap;
}

/**
 * Hide element while making it readable for screen readers
 * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
 */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-small {
  font-size: .8em;
}

.text-normal {
  font-weight: normal;
}

.text-italic {
  font-style: italic;
}

.text-bold {
  font-weight: $bold-weight;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.protip {
  font-size: .8em;
  color: $info;
  font-style: italic;
}

.hide {
  display: none !important;
}

.block {
  display: block !important;
}


.inline-block {
  display: inline-block !important;
}

.table-cell {
  display: table-cell !important;
}

.vertical-middle {
  display: inline-block;
  vertical-align: middle;
}

.invisible {
  visibility: hidden;
}

@mixin list-unstyled {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

@mixin no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin no-resize {
  resize : none;
}

@mixin hand {
  cursor : pointer;
  cursor : hand;
}

@mixin fixed {
  table-layout : fixed;
}

@mixin clip {
  text-overflow : ellipsis;
  overflow      : hidden;
  white-space   : nowrap;
  word-wrap     : break-word;
}

@mixin force-wrap {
  word-wrap : break-word;
  white-space: normal;
}

.list-unstyled { @include list-unstyled }
.no-select { @include no-select }
.no-resize { @include no-resize }
.hand { @include hand }
.fixed { @include fixed }
.clip { @include clip }
.force-wrap { @include force-wrap }

// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate
.sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

[role="button"] {
  cursor: pointer;
}

.eased {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.no-ease {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.full-height {
  height: 100%;
}
.full-width {
  width: 100%;
}

.align-top {
  vertical-align: top !important;
}


.border {
  border: 1px solid $border;
  background: lighten($border, 2%);
}

.border-dash {
  border: 1px dashed $border;
  background: lighten($border, 2%);
}

.round {
  border-radius: 50%;
}


.comma-list {
  span:after {
    content: ','
  }
  span:last-of-type:after {
    content: ''

  }
}

.link[disabled] {
  pointer-events: none;
}