osem_dash/app/assets/styles/_mixins.scss

/* ==========================================================================
   Media queries
   ========================================================================== */

@mixin media($arg) {
  @if $arg == screen {
    @media #{$screen} { @content; }
  }
  @if $arg == landscape {
    @media #{$screen} and (orientation: landscape) { @content; }
  }
  @if $arg == portrait {
    @media #{$screen} and (orientation: portrait) { @content; }
  }
  @if $arg == xsmall-up {
    @media #{$screen} and (min-width: lower-bound($xsmall-range)) { @content; }
  }
  @if $arg == xsmall-only {
    @media #{$screen} and (max-width: upper-bound($xsmall-range)) { @content; }
  }
  @if $arg == small-up {
    @media #{$screen} and (min-width: lower-bound($small-range)) { @content; }
  }
  @if $arg == small-only {
    @media #{$screen} and (min-width: lower-bound($small-range)) and (max-width: upper-bound($small-range)) { @content; }
  }
  @if $arg == medium-up {
    @media #{$screen} and (min-width: lower-bound($medium-range)) { @content; }
  }
  @if $arg == medium-down {
    @media #{$screen} and (max-width: upper-bound($medium-range)) { @content; }
  }
  @if $arg == medium-only {
    @media #{$screen} and (min-width: lower-bound($medium-range)) and (max-width: upper-bound($medium-range)) { @content; }
  }
  @if $arg == large-up {
    @media #{$screen} and (min-width: lower-bound($large-range)) { @content; }
  }
  @if $arg == large-only {
    @media #{$screen} and (min-width: lower-bound($large-range)) and (max-width: upper-bound($large-range)) { @content; }
  }
  @if $arg == xlarge-up {
    @media #{$screen} and (min-width: lower-bound($xlarge-range)) { @content; }
  }
  @if $arg == xlarge-only {
    @media #{$screen} and (min-width: lower-bound($xlarge-range)) and (max-width: upper-bound($xlarge-range)) { @content; }
  }
  @if $arg == xxlarge-up {
    @media #{$screen} and (min-width: lower-bound($xxlarge-range)) { @content; }
  }
}


/* ==========================================================================
   Typography
   ========================================================================== */

@mixin heading($font-size, $max-media: small-up) {
  font-size: $font-size;
  line-height: $font-size + 0.5;

  @if $max-media == medium-up or $max-media == large-up or $max-media == xlarge-up {
    @include media(medium-up) {
      $font-size: $font-size + 0.25;
      font-size: $font-size;
      line-height: $font-size + 0.5;
    }
  }

  @if $max-media == large-up or $max-media == xlarge-up {
    @include media(large-up) {
      $font-size: $font-size + 0.25;
      font-size: $font-size;
      line-height: $font-size +  0.5;
    }
  }

  @if $max-media == xlarge-up {
    @include media(xlarge-up) {
      $font-size: $font-size + 0.25;
      font-size: $font-size;
      line-height: $font-size + 0.5;
    }
  }
}


/* ==========================================================================
   Buttons
   ========================================================================== */

@mixin button-variation($style, $color) {
  @if $style == "filled" {
    background-color: $color;
    box-shadow: inset 0 0 0 1px rgba($base-color, 0.16);
    &, &:visited {
      color: #fff;
    }
    &:hover {
      background-color: shade($color, 8%);
    }
    .drop--open > &,
    &.button--active,
    &.button--active:hover,
    &:active {
      background-color: shade($color, 16%);
    }
  }
  @else if $style == "outline" {
    background-color: rgba($color, 0);
    box-shadow: inset 0 0 0 1px $color;
    &, &:visited {
      color: $color;
    }
    &:hover {
      background-color: rgba($color, 0.08);
    }
    .open > &,
    &.active,
    &.active:hover,
    &:active {
      background-color: rgba($color, 0.16);
    }
  }
  @else if $style == "unbounded" {
    background-color: rgba($color, 0);
    &, &:visited {
      color: $color;
    }
    &:hover {
      background-color: rgba($color, 0.08);
    }
    .open > &,
    &.active,
    &.active:hover,
    &:active {
      color: shade($color, 48%);
    }
  }
  @else {
    @error "Invalid style property for button variation.";
  }
}