mixins.scss

// Custom mixins
// Do not put anything other than mixins into this file, since it is included from many other stylesheets.

@import 'settings';

@mixin font-heading {
  font-family: $header-font-family;
  font-weight: bold;
  letter-spacing: .05em;
  text-transform: uppercase;
}

@mixin font-subheading {
  font-family: $header-font-family;
  font-weight: bold;
  color: scale-color($color: $subheader-color, $lightness: -10%);
  letter-spacing: .05em;
  text-transform: uppercase;
}

@mixin font-subsubheading {
  font-family: $body-font-family;
  font-weight: normal;
  color: scale-color($color: $subsubheader-color, $lightness: -10%);
  letter-spacing: .05em;
  text-transform: uppercase;
}

@mixin font-body {
  font-family: $body-font-family;
}

@mixin full-height {
  min-height: calc(100vh - #{$topbar-height});
}

@mixin hover-color($property, $color) {
  #{$property}: $color;
  transition: $property 200ms ease-out;

  &:hover,
  &:focus,
  &.disabled,
  &[disabled] {
    #{$property}: scale-color($color, $lightness: -20%);
  }
}

@mixin animate-fade($property) {
  transition: $property 0.25s ease-out;
}

@mixin floating-panel {
  background-color: $hp-black;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
  position: fixed;
  white-space: nowrap;
  z-index: 1001;
}

@mixin style-placeholder {
  // http://css-tricks.com/snippets/css/style-placeholder-text/
  &::-webkit-input-placeholder {
    @content;
  }
  &:-moz-placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
}

// Force element to have the correct top bar height
@mixin topbar-height {
  line-height: $topbar-height;
  padding-bottom: 0;
  padding-top: 0;
}

@mixin fa-button {
  // .fa
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  // adjust positioning
  letter-spacing: normal;
  margin-right: 10px;
}