sass mixins, utility classes, and functions

_muf.scss

// 
// --- MIXINS
// 

@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin horizontal-nav($margin: 0, $padding: 0) {
  list-style-type: none;
  overflow: hidden;
  > ul > li {
    display: block;
    float: left;
    margin: $margin;
    padding: $padding;
    &:last-child {
      margin-right: 0px;
    }
  }
}

@mixin emboss($radius: 0, $top-opacity: 0.3, $bottom-opacity: 0.25, $bg-opacity: 0.2) {
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, $bottom-opacity);
  box-shadow: inset 0 3px 3px rgba(0, 0, 0, $top-opacity);
  border-radius: $radius;
}

@mixin minimal-box-shadow($color) {
  box-shadow: 1px 1px 1px 1px $color;
}

@mixin underline-text-on-hover($color) {
  display: inline-block;
  position: relative;
  text-decoration: none;
  // hide underline
  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: $color;
    visibility: hidden; // fallback unsupport anim
    transform: scaleX(0);
    transition: all 0.2s ease-in-out 0s;
  }
  // show underline
  &:hover:before {
    visibility: visible;
    transform: scaleX(1);
  }
}

// http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
@mixin respond-to($media) {
  
  // adjust to taste
  $break-small: 320px; $break-large: 1024px;

  @if $media == handhelds {
    @media only screen and (max-width: $break-small) { 
      @content; 
    }
  }
  @else if $media == medium-screens {
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { 
      @content; 
    }
  }
  @else if $media == wide-screens {
    @media only screen and (min-width: $break-large) { 
      @content; 
    }
  }
}

// 
// --- FUNCTIONS
// 

// Create a gray rgba color. Both $value and $alpha arguments 
// are optional. Defaults to rgba(127, 127, 127, 1);
@function gray-scale($val: 127, $alpha: 1) {
  @return rgba($val, $val, $val, $alpha);
}

@function adjust-alpha($color, $alpha: 1) {
  @return rgba($color, $alpha);
}

// 
// --- UTILITY CLASSES
// 

.hidden {
  display: none;
}

.opaque {
  opacity: 1;
}

.nopaque {
  opacity: 0;
}

// @extend me
.clearfix {
  @include clearfix;
}

// TODO: test me
// container for centering child input elements, probably others
// child must have vertical-align: middle; to comply
.center-parent {
  display: table-cell;
  vertical-align: middle;
}

.center-child {
  vertical-align: middle;
}