hlfcoding/hlf-css

//
// CSS Helpers
// ===========
// Vendor prefixing not included. You're encouraged to use an auto-prefixing solution.

// Border Radius
// -------------

$hlf-default-border-radius: 5px !default;

// To get round corners on tables, the border-radius values should be added to
// the appropriate cells. The custom selectors makes it so this can be applied
// to a variety of tables.
@mixin border-radius-table($radius: $hlf-default-border-radius,
                           $head-selector: 'thead', $foot-selector: 'tfoot')
{
  #{$head-selector} tr:first-child {
    th:first-child { border-top-left-radius: $radius; }
    th:last-child { border-top-right-radius: $radius; }
  }

  #{$foot-selector} tr:last-child {
    td:first-child { border-bottom-left-radius: $radius; }
    td:last-child { border-bottom-right-radius: $radius; }
  }
}
// A shorthand for doing rounded corners for a side. To get the top corners:
// `@include border-side-radius(top);`
@mixin border-side-radius($side,
                          $radius: $hlf-default-border-radius)
{
  @if $side == top or $side == left {
    border-top-left-radius: $radius;
  }
  @if $side == bottom or $side == left {
    border-bottom-left-radius: $radius;
  }
  @if $side == top or $side == right {
    border-top-right-radius: $radius;
  }
  @if $side == bottom or $side == right {
    border-bottom-right-radius: $radius;
  }
}

// Misc.
// -----

@mixin font-face($family-name, $file-name, $path: '../fonts') {
  @font-face {
    font-family: '#{$family-name}';
    src: url('#{$path}/#{$file-name}.eot');
    src: url('#{$path}/#{$file-name}.eot?#iefix') format('embedded-opentype'),
         url('#{$path}/#{$file-name}.woff') format('woff'),
         url('#{$path}/#{$file-name}.ttf') format('truetype'),
         url('#{$path}/#{$file-name}.svg##{file-name}') format('svg');
    font-weight: normal;
    font-style: normal;
  }
}

// Animation
// ---------

// Add animation to a property. In order for multiple properties to be specified,
// the long form of the property declaration is needed, the properties string
// should be comma-separated. The properties should be passed in in list format:
// `@include transition(([prop], [prop], [prop]));`. Normally, we avoid the long form
// b/c it increases file size.
//
// @deprecated Use stock transition api instead.
@mixin transition($properties: all, $time: .3s, $easing: ease-in-out) {
  @if length($properties) > 1 {
    transition-duration: $time;
    transition-property: $properties;
    transition-timing-function: $easing;
  } @else {
    transition: $properties $time $easing;
  }
}

%default-transition {
  @include transition;
}

// Layout
// ------

// Will be redeclared once for each css file, a limitation of importing
// everything for each scss stylesheet and then concatenating them.
@mixin clearfix($with-ie: true) {
  &::before,
  &::after { content: ' '; display: table; }
  &::after { clear: both; }
  *zoom: 1;

  @if $with-ie {
    html.ie6 & {
      display: inline-block;
      height: 1%;
      display: block;
    }
  }
}

%clearfix {
  @include clearfix;
}

// Mostly derived from HTML5 Boilerplate. It's for semantic banners that show an
// image instead of the actual text, etc.
@mixin replaced {
  display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr;
}

// Generic box reset.
@mixin reset-spacing {
  margin: 0;
  padding: 0;
}

// For centering a box within another box. You can center by width, or height, or
// both. Pass `false` to defer that dimension. You can include extras for adding
// the additional required/implied rules.
@mixin centered($width,
                $height: false, $extras: true)
{
  @if $extras {
    display: block;
    position: absolute;
  }
  @if $width != false {
    left: 50%;
    margin-left: -$width / 2;
    @if $extras { width: $width; }
  }
  @if $height != false {
    margin-top: -$height / 2;
    top: 50%;
    @if $extras { height: $height; }
  }
}