ricardozea

//Add/remove a class to labels with checkboxes and radio buttons and style them
$('label input[type=radio], label input[type=checkbox]').click(function() {
  $('label:has(input:checked)').addClass('active');
  $('label:has(input:not(:checked))').removeClass('active');
});

ricardozea

//@font-face
// Bourbon Mixin for top notch webfont support: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_font-face.scss
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
  @font-face {
      font-family: $font-family;
      src: url('#{$file-path}.eot'); //IE9 Compat Modes
      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), //IE6-IE8
           url('#{$file-path}.woff') format('woff'), //Modern Browsers
           url('#{$file-path}.ttf') format('truetype'), //Safari, Android, iOS
           url('#{$file-path}.svg##{$font-family}') format('svg'); //Old iOS devices

ricardozea

/*
CSS Utility Rules
Date = February 2013
By = Ricardo Zea
*/

.abs-right { position:absolute; right:0; }
.abs-left { position:absolute; left:0; }
.divider { border-bottom:#ccc 1px dotted; }
.dn, .nojs { display:none; }

ricardozea

$(function() {  
  //If JavaScript is available, remove class '.nojs' and add class '.js'
  $('.nojs').removeClass('nojs').addClass('js');

  //Prevents default action of links
  $('.noclick').click(function(e) {
  	e.preventDefault();
  });
  
  //Add a class to all the last <li>'s

ricardozea

@import "compass/reset"; //Eric Meyer's reset
@import "compass/css3/box-sizing"; //@include box-sizing(border-box);
@import "compass/css3/transition"; //@include transition(.3s); - http://compass-style.org/reference/compass/css3/transition/
@import "compass/css3/transform";// @include rotate( -45deg ); - http://compass-style.org/reference/compass/css3/transform/
@import "compass/css3/images"; //@include background(linear/radial-gradient($black, #ccc));
@import "compass/css3/columns"; //@include columns(3 auto); //@include column-gap(0);
@import "bourbon/bourbon"; //Bourbon Mixins - http://bourbon.io/
@import "mixins"; //Personal mixins
@import "utilities-zea"; //Personal utility rules

ricardozea

/*Grayscale*/
img {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") /* Firefox 10+, Firefox on Android */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

/*Grayscale Disable*/
img {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");

ricardozea

IE6 Only
==================
_selector {...}

IE6 & IE7
==================
*html or { _property: }

IE7 Only
==================

ricardozea

//Sticky items
var $stickyItem = $('.sticky-item'); //Element that will get stuck
var $stickyTarget = $('.sticky-target'); //Element that when scrolled over will trigger the above element to stick

$(window).scroll(function() {
	if ($(this).scrollTop() > $header.offset().top + $header.height()) {
		$sticky.addClass('stuck').removeClass('unstuck');
		//$('#main-container').addClass('top-space');
	} else {
		$sticky.removeClass('stuck').addClass('unstuck');

ricardozea

//Long Shadow
//http://codepen.io/awesomephant/pen/mAxHz
//Usage: @include long-shadow(box/text, #000, 200, false, false, left);

@mixin long-shadow($type, $color, $length, $fadeout: true, $skew: false, $direction: right){
  $shadow: '';
  @if $skew == false or $type == text{
    @if $direction == right {
      @for $i from 0 to $length - 1 {
        $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + $color + ',';

ricardozea

/**
  * Utility mixin to easily set the width and height of an element.
  * Makes perfect squares easier to create and maintain.
  *
  * http://codepen.io/jackiebackwards/pen/vlrsq
  */

@mixin size( $width, $height: false ) {
  width: $width;