SASS: Mixins

mixins.scss

// Mixin navigation-list 
// For this mixin we need 
//	<nav> 
//		<ul id="nav">
//			<li>
//				<a href="#">Uno</a>
//			<li>
//				<a href="#">Dos</a>
//			</li>
//		</ul>
//	</nav>
// Mixin border-radius 
// Mixin box-shadow 
// Mixin custom-button 
// Mixin custom-dropdown 
// Mixin image-2x 
// Mixin clearfix 
// Mixin box-sizing 
// Mixin opacity 
// Mixin center-block 
// Mixin vertical-align-text 
// Mixin menu-mobile 
// Mixin vertical-align-element 
// Mixin circle 
// Mixin restina sprite 
 
@mixin navigation-list($color,$background-color,$padding) {
    list-style-type:none;
    margin:0;
    > li{
        display:block;
        float:left;
        &:last-child{
            margin-right:0px;
        }
 
        > a{
        	display: block;
        	padding: $padding;
        	background-color: $background-color;
        	color: $color;
        	text-decoration: none;
        }
    }
}
 
@mixin border-radius($radius:  5px){
	border-radius: $radius;
	-moz-border-radius: $radius;
	-webkit-border-radius: $radius;
	-o-border-radius: $radius;
}
 
@mixin box-shadow($shadow1, $shadow2:false, $shadow3:false, $shadow4:false, $shadow5:false) {
 $params: $shadow1;
  @if $shadow2 
    { $params: $shadow1, $shadow2; }
    @if $shadow3 != false
      { $params: $shadow1, $shadow2, $shadow3; }
      @if $shadow4 != false
        { $params: $shadow1, $shadow2, $shadow3, $shadow4; }
        @if $shadow5 != false
          { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5; }
 
  -webkit-box-shadow: $params;
  -moz-box-shadow: $params;
  box-shadow: $params;
 
}
 
@mixin custom-button($width, $height, $background-color, $color){
	outline: none;
	border: none;
	width: $width;
	height: $height;
	background-color: $background-color;
	color: $color;
	text-align: center;
}
 
// For this mixin we need 
 
//<div class="styled-select-content">
//	<div class="styled-select">
//		<div class="styled-select-name">
//			<select class="styled-select-state pointer">
//				<option>Selecciona...</option>
//			</select>
//		</div>
//	</div>
// </div>
 
 
//.custom-dropdown{
//	.styled-select{
//		background-image: url("../images/new_arrow.png");
//	}
//	
//	@include custom-dropdown(320px,50px,13px,#000,#FFF,18px,10px,260px);
//}
 
 
@mixin custom-dropdown($width,$height,$padding,$background-color,$color,$font-size,$border_radius,$arrow-position){
	.styled-select{
	    width: $width;
	    height: $height; //50px;
	    overflow: hidden;
	    background-repeat: no-repeat;
	    background-position: $arrow-position;
	    background-color: $background-color;
	    border-radius: $border-radius;
	    position: relative;
		select {
		   background: transparent;
		   width: $width + 40;
		   padding: $padding;
		   font-size: $font-size;
		   color: $color;
		   line-height: 1;
		   border: 0;
		   border-radius: 0;
		   height: $height;
		   -webkit-appearance: none;
 
		}
	}
	
}
 
@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}
 
@mixin clearfix() {
    & {
        *zoom: 1;
    }
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}
 
@mixin box-sizing($box-model: border-box) {
		-webkit-box-sizing: $box-model; // Safari <= 5
		-moz-box-sizing: $box-model; // Firefox <= 19
		box-sizing: $box-model;
}
 
@mixin opacity($opacity) {
	opacity: $opacity;
	$opacity-ie: $opacity * 100;
	filter: alpha(opacity=$opacity-ie); //IE8
}
 
@mixin center-block($margin-top, $margin-bottom) {
	 display: block;
	 margin: $margin-top auto $margin-bottom auto;
}
 
 
@mixin vertical-align-text($height){
	display: table-cell;
	vertical-align: middle;
	height: $height;
}
 
@mixin menu-mobile($width: 50px, $padding: 5px, $background-color:#262626 , $lines-background-color: #FFF, $lines-height: 5px, $lines-margin: 5px auto, $lines-radius: 5px ){
	padding: $padding;
	background-color: $background-color;
	width: $width;
 
	> .lines{
		width: 90%;
		background-color: $lines-background-color;
		height: $lines-height;
		margin: $lines-margin;
		@include border-radius ($lines-radius);
	}
}
 
@mixin vertical-align-element(){
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	
}
 
 
//@mixin font-size($size: 1, $line: $size * 1.5){
// font-size     : ($size * 16) + px;
//  line-height   : ($line * 16) + px;
//  font-size     : $size + rem;
//  line-height   : $line + rem;
//}
 
@mixin circle($size, $background-color){
	width: $size;
	height: $size;
	background-color: $background-color;
	border-radius: 50%;
}
 
 
//https://github.com/pierreburel

// Default pixel ratio
$pixel-ratio-hdpi: 1.5 !default;

// Disable HDPI
$disable-hdpi: false !default;

// Force HDPI
$force-hdpi: false !default;

// This must be set to generated images folder relative to images set in
// config.rb if using a generated images folder. E.g 'generated'.
// This is a workaround for a compass 0.12.2 bug.
// @see https://github.com/chriseppstein/compass/issues/1077
$generated-image-folder: false !default;

// Set background-size property based on an image size
@mixin image-background-size($image) {
  @include background-size(image-width($image) image-height($image));
}

// Set element dimensions based on an image size
@mixin image-dimensions($image) {
  height: image-height($image);
  width: image-width($image);
}

// Media query block
@mixin media-hdpi($pixel-ratio: $pixel-ratio-hdpi) {

  // Default media query
  // http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/
  $media-hdpi: "(-webkit-min-device-pixel-ratio: #{$pixel-ratio}), (min-resolution: #{$pixel-ratio*96}dpi)" !default;

  @if not $disable-hdpi {
    @if $force-hdpi {
      @content;
    } @else {
      @media #{$media-hdpi} {
        @content;
      }
    }
  }
}


// Check and fix the possible different `$sprite` position between the normal and the HDPI map
// @private
@mixin sprite-background-position-hdpi($map, $map-hdpi, $sprite, $offset-x: 0, $offset-y: 0) {
  $x: round(nth(sprite-position($map-hdpi, $sprite, $offset-x*2, $offset-y*2), 1) / 2);
  $y: round(nth(sprite-position($map-hdpi, $sprite, $offset-x*2, $offset-y*2), 2) / 2);
  @if $x != nth(sprite-position($map, $sprite, $offset-x, $offset-y), 1) or $y != nth(sprite-position($map, $sprite, $offset-x, $offset-y), 2) {
    background-position: $x $y;
  }
}

// Sprite selectors position fix
// @private
@mixin sprite-selectors-hdpi($map, $map-hdpi, $sprite-name, $full-sprite-name, $offset-x: 0, $offset-y: 0) {
  @each $selector in $sprite-selectors {
    @if sprite_has_selector($map, $sprite-name, $selector) {
      &:#{$selector}, &.#{$full-sprite-name}#{$default-sprite-separator}#{$selector}, &.#{$full-sprite-name}-#{$selector} {
          @include sprite-background-position-hdpi($map, $map-hdpi, "#{$sprite-name}#{$default-sprite-separator}#{$selector}", $offset-x, $offset-y);
      }
    }
  }
}


// Include the position and (optionally) dimensions of this `$sprite`
// in the given sprite `$map` and `$map-hdpi`. The sprite url should come from either a base
// class or you can specify the `sprite-url` explicitly like this:
//
//     background: $map no-repeat;
@mixin sprite-hdpi($map, $map-hdpi, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0, $set-background: false) {
  @if $set-background {
    background-image: sprite-url($map);
    background-repeat: no-repeat;
  }
  background-position: sprite-position($map, $sprite, $offset-x, $offset-y);
  @if $dimensions {
    @include sprite-dimensions($map, $sprite);
  }
  @if not $disable-magic-sprite-selectors {
    @include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y);
  }
  @include media-hdpi {
    background-image: sprite-url($map-hdpi);
    // Workaround for compass 0.12.2 bug. See above.
    @if $generated-image-folder {
      @include image-background-size($generated-image-folder + "/" + sprite-path($map));
    }
    @else {
      @include image-background-size(sprite-path($map));
    }
    @include sprite-background-position-hdpi($map, $map-hdpi, $sprite, $offset-x, $offset-y);
    @if not $disable-magic-sprite-selectors {
      @include sprite-selectors-hdpi($map, $map-hdpi, $sprite, $sprite, $offset-x, $offset-y);
    }
  }
}

// Generates a class for each space separated name in `$sprite-names`.
// The class will be of the form .<map-name>-<sprite-name>.
//
// If a base class is provided, then each class will extend it.
//
// If `$dimensions` is `true`, the sprite dimensions will specified.
@mixin sprites-hdpi($map, $map-hdpi, $sprites: sprite-names($map), $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0, $set-background: false) {
  @if $set-background {
    .#{$prefix} {
      background-image: sprite-url($map);
      background-repeat: no-repeat;
    }
  }
  @each $sprite in $sprites {
    .#{$prefix}-#{$sprite} {
      @if $base-class {
        @extend #{$base-class};
      }
      background-position: sprite-position($map, $sprite, $offset-x, $offset-y);
      @if $dimensions {
        @include sprite-dimensions($map, $sprite);
      }
      @if not $disable-magic-sprite-selectors {
        @include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y);
      }
    }
  }
  @include media-hdpi {
    .#{$prefix} {
      background-image: sprite-url($map-hdpi);
      // Workaround for compass 0.12.2 bug. See above.
      @if $generated-image-folder {
        @include image-background-size($generated-image-folder + "/" + sprite-path($map));
      }
      @else {
        @include image-background-size(sprite-path($map));
      }
    }
    @each $sprite in $sprites {
      .#{$prefix}-#{$sprite} {
        @include sprite-background-position-hdpi($map, $map-hdpi, $sprite, $offset-x, $offset-y);
        @if not $disable-magic-sprite-selectors {
          @include sprite-selectors-hdpi($map, $map-hdpi, $sprite, $sprite, $offset-x, $offset-y);
        }
      }
    }
  }
}

// Set a normal and HDPI background-image and (optionally) its dimensions
@mixin background-image-hdpi($image, $image-hdpi, $dimensions: false) {
  background-image: image-url($image);
  @if $dimensions {
    @include image-dimensions($image);
  }
  @include media-hdpi {
    background-image: image-url($image-hdpi);
    @include image-background-size($image);
  }
}

// Same as `background-image-hdpi` but inline
@mixin inline-background-image-hdpi($image, $image-hdpi, $dimensions: false) {
  background-image: inline-image($image);
  @if $dimensions {
    @include image-dimensions($image);
  }
  @include media-hdpi {
    background-image: inline-image($image-hdpi);
    @include image-background-size($image);
  }
}