codeforamerica/ohana-web-search

// Mixins are custom functions that abbreviate generating CSS rules.

// Type size mixin provides mapping from human-readable font sizing labeling
// to base font size values.
// $size - The human readable font size value.
@mixin type-size($size) {
  @if $size == "tiny" {
    @include adjust-font-size-to($font_size_80);
  }
  @if $size == "small" {
    @include adjust-font-size-to($font_size_90);
  }
  @if $size == "base-small" {
    @include adjust-font-size-to($font_size_95);
  }
  @if $size == "baseline" {
    @include adjust-font-size-to($font_size_100);
  }
  @if $size == "base-medium" {
    @include adjust-font-size-to($font_size_105);
  }
  @if $size == "medium" {
    @include adjust-font-size-to($font_size_110);
  }
  @if $size == "large" {
    @include adjust-font-size-to($font_size_120);
  }
  @if $size == "xlarge" {
    @include adjust-font-size-to($font_size_130);
  }
}

// Styles the input placeholder text, including
// necessary browser prefixes.
// $color - Font color of the placeholder text.
// $font-style - Font style of the placeholder text.
@mixin input-placeholder($color, $font-style) {
  input::input-placeholder {
    color: $color;
    font-style: $font-style;
  }

  input::-webkit-input-placeholder {
    color: $color;
    font-style: $font-style;
  }

  input:-moz-placeholder {
    color: $color;
    font-style: $font-style;
  }

  input::-moz-placeholder {
    color: $color;
    font-style: $font-style;
  }

  input:-ms-input-placeholder {
    color: $color;
    font-style: $font-style;
  }
}

// Turns off proprietary default webkit styling of search input fields.
@mixin reset-input-webkit() {
  // Turns off iOS input rounding.
  input[type=search]::-webkit-search-cancel-button,
  input[type=search]::-webkit-search-decoration,
  input[type=search]::-webkit-search-results-button,
  input[type=search]::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }
  input[type=search] {
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-box-sizing: content-box;
  }
}

// Turns off proprietary default IE10 styling of search input fields.
@mixin reset-input-ie() {
  // Turns off (x) that's added to inputs when the input has the
  // clearable class added—meaning it already has a custom clear button.
  .clearable {
    input[type=search]::-ms-clear {
      display: none;
    }
  }
}

// This mixin applies rounding to one or more corners.
// The "except" set will square off (non-round) the corners specified.
// They are intended for UI components that are positioned adjacent to another
// component.
// $corner - The corner or side to ignore rounding on.
@mixin rounded-except($corner) {
  @if $corner == "none" {
    @include border-radius($border-radius-base);
  }
  @if $corner == "left" {
    @include border-radius(0 $border-radius-base $border-radius-base 0);
  }
  @if $corner == "top" {
    @include border-radius(0 0 $border-radius-base $border-radius-base);
  }
  @if $corner == "right" {
    @include border-radius($border-radius-base 0 0 $border-radius-base);
  }
  @if $corner == "bottom" {
    @include border-radius($border-radius-base $border-radius-base 0 0);
  }
  @if $corner == "upper-left" {
    @include border-radius(0 $border-radius-base $border-radius-base $border-radius-base);
  }
  @if $corner == "upper-right" {
    @include border-radius($border-radius-base 0 $border-radius-base $border-radius-base);
  }
  @if $corner == "lower-right" {
    @include border-radius($border-radius-base $border-radius-base 0 $border-radius-base);
  }
  @if $corner == "lower-left" {
    @include border-radius($border-radius-base $border-radius-base $border-radius-base 0);
  }
}

// Site-wide link behavior of highlighting link when hovering over parent
// container element.
// $container - The parent container selector that the link appears inside of.
// $background-color - The background color of the container.
@mixin site-link($container, $background-color) {
  #{$container} {
    a {
      text-decoration: none;
      color: $greyscale_midtone; // IE fallback
      color: rgba($black, .6);
      cursor: pointer;
      border-bottom: 1px solid $greyscale_light; // IE fallback
      border-bottom: 1px solid $background-color;
    }

    a:hover {
      color: $primary-dark;
      border-bottom: 1px solid $greyscale_midtone; // IE fallback
      border-bottom: 1px solid rgba($black, .4);
    }
  }

  #{$container}:hover {
    a {
      color: $primary-dark;
    }
  }
}