grafana/public/sass/utils/_utils.scss

.clearfix {
  @include clearfix();
}

.highlight-word {
  color: $brand-primary;
}

.emphasis-word {
  font-weight: $font-weight-semi-bold;
  color: $text-color-emphasis;
}

// Close icons
// --------------------------------------------------
.close {
  @include opacity(20);

  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: $line-height-base;
  color: $black;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);

  &:hover,
  &:focus {
    color: $black;
    text-decoration: none;
    cursor: pointer;
    @include opacity(40);
  }
}

// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

//
// Utility classes
// --------------------------------------------------

// Quick floats
.pull-right {
  float: right !important;
}

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

// Toggling content
.hide {
  display: none;
}

.show {
  display: block;
}

// Visibility
.invisible {
  visibility: hidden !important;
}

// For Affix plugin
.affix {
  position: fixed;
}

.d-inline-block {
  display: inline-block;
}

.absolute {
  position: absolute;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-flow-column-nowrap {
  display: flex;
  flex-flow: column nowrap;
}

.center-vh {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-items: center;
}

.align-items-center {
  display: flex;
  flex-direction: row nowrap;
  align-items: center;
}