brianmcallister

/*jslint devel: true, browser: true, indent: 2, nomen: true */
/*global jQuery, Modernizr */

// Load a polyfil for placeholder support
(function ($, Modernizr) {
  'use strict';

  if (!Modernizr.input.placeholder) {
    var Actions = {
      focusInput: function () {

brianmcallister

/*
  Apply pointer mixin. Uses a CSS3 pseudo element to apply a triangle.
  https://gist.github.com/brianmcallister/2932442
  
  @param {String} [$side] Which side the pointer should stick out from. Defaults to top.
  @param {String} [$size] Size of the pointer. Expects units, ex: 5px. Defaults to 5px.
  @param {String} [$color] Color of the pointer. Defaults to white.
  @param {String} [$type] Which kind of triange to make. Defaults to equilateral.
  @param {Boolean} [$clockwise] If using a right triange, the direction the triange should be rotated.
  @param {String} [$element] Which type of psuedo element to be used. Defaults to :after.

brianmcallister

// Maintain ratio mixin. Great for responsive grids, or videos.
// https://gist.github.com/brianmcallister/2932463
// 
// $ratio - Ratio the element needs to maintain.
// 
// Examples
// 
//   // A 16:9 ratio would look like this:
//   .element {
//     @include maintain-ratio(16 9);

brianmcallister

@mixin replace-text-with-inline($img) {
  @include hide-text;
  
  width: image-width($img);
  height: image-height($img);
  background: center center no-repeat inline-image($img);
}

brianmcallister

/*
  Set a background image sized for retina screens, with an option to use the image url or an inline image.
  @param {String} $image Image to use.
  @param {String} [$type] Type of image url to use. Default to an inline image.
*/
@mixin retina-image($image, $type: 'inline') {
  @include hide-text;

  @if $type != 'inline' and $type != 'url' {
    @warn 'Unknown usage type. Falling back to "url"';

brianmcallister

/*
This pretty much doesn't work at all right now.
*/
@mixin retina-general-sprite($name, $set-dimensions: true) {
  $sprite-width: image-width('general.png');
  $sprite-height: image-height('general.png');
  
  $sprite-file-url: sprite-file($general-sprite, $name);
  $sprite-file-width: image-width($sprite-file-url) / 2;
  $sprite-file-height: image-height($sprite-file-url) / 2;

brianmcallister

// Print position coords only.
// https://gist.github.com/brianmcallister/3641867
// 
// $values - Position values. Null values get skipped over.
@mixin pos-coords($values: null null null null) {
  $position-list: top right bottom left;
  $count: 1;
  
  @if length($values) == 1 and $values == 'reset' {
    $values: auto auto auto auto;

brianmcallister

// Size mixin.
// https://gist.github.com/brianmcallister/3659524
// 
// $width  - Element width, with units.
// $height - Optional height of the element. Expects units, ex: 5px.
//           Defaults to null.
@mixin size($width, $height: null) {
  width: $width;
  
  @if $height {

brianmcallister

/*
  Set a background image at 1x and 2x.
  https://gist.github.com/3895807
  @param {String} $name Image name.
  @param {String} $ext File extension, e.g.: '.png'.
*/
@mixin retina-bg($name, $ext) {
  @include squish-text;
  
  $image: '#{$name}#{$ext}';

brianmcallister

/*
  I like to set up some extendable classes to keep the bulk of my sprite setup outside of my generated CSS.
*/
/*
  Button sprite extendable.
*/
%button-sprite {
  background-image: $button-sprite;
  
  @include retina {