MIxins Collection

SASS Mixins

// @include font-face($style-name, $file, $family, $category);
// $style-name being the name of the font e.g. Helvetica
// $file meaning the file name, without the file extensions
// $family being the folder inside the fonts folder where the font files are
// $category is serif or sans-serif or monospace etc. as a fall back in CSS
// Here with real values:
// 
// @include font-face('Ashbury', 'AshburyLig-webfont', 'Ashbury', 'serif');

// use with iconmoon: https://icomoon.io/app/#/select/font

// Map icon names to font unicode characters
$icons: (
	office     :	"\e600",
	newspaper  :	"\e601",
	pencil     :	"\e602",
	pencil2    :	"\e603",
	camera     :    "\e604",
	music      :    "\e605",
	headphones :    "\e606"
);

@mixin font-face($style-name, $file, $family, $category:"") {
    $filepath: "fonts/" + $family + "/" + $file;
    @font-face {
        font-family: "#{$style-name}";
        src: url($filepath + ".eot");
        src: url($filepath + ".eot?#iefix") format('embedded-opentype'), 
        	 url($filepath + ".woff2") format('woff2'), 
        	 url($filepath + ".woff") format('woff'), 
        	 url($filepath + ".ttf")  format('truetype'), 
        	 url($filepath + ".svg#" + $style-name + "") format('svg');
    }
    %#{$style-name} {
        font: {
            @if $category != "" {
                family: "#{$style-name}", #{$category};
            }
            @else {
                family: "#{$style-name}";
                weight: normal;
            }
        }
    }
}

@mixin icon($position: before, $icon: false, $styles: true) {
    @if $position == both {
        $position: 'before, &:after';
    }
    // Either a :before or :after pseudo-element, or both, defaulting to :before
    &:#{$position} {
        @if $icon {
            // A particular icon has been specified
            content: "#{map-get($icons, $icon)}";
        }
        @if $styles {
            // Supportive icon styles required
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-family: 'icomoon';
        }
        // Include any extra rules supplied for the pseudo-element
        @content;
    }
}

// USAGE

//@include font-face('icomoon', 'icomoon', 'icomoon', 'serif');

//a[href^="mailto"] {
//	 @include icon(before, office);
//}

//Mixins
@mixin clearfix {
  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }
}

@mixin box-sizing($box-model) {
  -webkit-box-sizing: $box-model;
     -moz-box-sizing: $box-model;
          box-sizing: $box-model;
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100; 
  filter: alpha(opacity=$opacity-ie); //IE8
}

@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@mixin abs-pos($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: absolute;
}

@mixin fixed-pos($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: fixed;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}

@mixin font-size($sizeValue: 12 ){
  font-size: $sizeValue + px; //fallback for old browsers
  font-size: (0.125 * $sizeValue) + rem;
}

@mixin brand-strip-maker($brand){
   .#{$brand} .logo-name-label  {
    background-image: url(bg/brands/#{$brand}/logo.png);
    background-repeat: no-repeat;
    background-position: center;}
}

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow:$top $left $blur $color #{$inset};
  -moz-box-shadow:$top $left $blur $color #{$inset};
  box-shadow:$top $left $blur $color #{$inset};
}

@mixin transition-background-color($speed) {
    -webkit-transition: background $speed;
    -moz-transition: background $speed;
    -o-transition: background $speed;
    -ms-transition: background $speed;
    transition: background $speed;
}

@mixin transition-opacity($speed) {
    -webkit-transition: opacity $speed;
    -moz-transition: opacity $speed;
    -o-transition: opacity $speed;
    -ms-transition: opacity $speed;
    transition: opacity $speed;
}

@mixin transition-all($speed) {
    -webkit-transition: all $speed ease;                  
    -moz-transition: all $speed ease;                 
    -o-transition: all $speed ease;   
    -ms-transition: all $speed ease;          
    transition: all $speed ease;
}

@mixin visuallyhidden {
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute;
  line-height: 1px;
}

@mixin pulsate-animation-keyframe {
  @-webkit-keyframes pulsate {
      0% {
        -ms-transform: scale(0.1, 0.1); /* IE 9 */
        -webkit-transform: scale(0.1, 0.1);/* Safari and Chrome */
        -o-transform: scale(0.1, 0.1); /* Opera */
        -moz-transform: scale(0.1, 0.1); /* Firefox */
        transform: scale(0.1, 0.1);

        opacity: 0;
      }
      50% {
        opacity: .8;
      } 
      100% {
        -ms-transform: scale(1.2, 1.2); /* IE 9 */
        -webkit-transform: scale(1.2, 1.2);/* Safari and Chrome */
        -o-transform: scale(1.2, 1.2); /* Opera */
        -moz-transform: scale(1.2, 1.2); /* Firefox */
        transform: scale(1.2, 1.2);

        opacity: 0;
      }
  }
  @-moz-keyframes pulsate {
      0% {
        -ms-transform: scale(0.1, 0.1); /* IE 9 */
        -webkit-transform: scale(0.1, 0.1);/* Safari and Chrome */
        -o-transform: scale(0.1, 0.1); /* Opera */
        -moz-transform: scale(0.1, 0.1); /* Firefox */
        transform: scale(0.1, 0.1);

        opacity: 0;
      }
      50% {
        opacity: .8;
      } 
      100% {
        -ms-transform: scale(1.2, 1.2); /* IE 9 */
        -webkit-transform: scale(1.2, 1.2);/* Safari and Chrome */
        -o-transform: scale(1.2, 1.2); /* Opera */
        -moz-transform: scale(1.2, 1.2); /* Firefox */
        transform: scale(1.2, 1.2);

        opacity: 0;
      }
  }
  @keyframes pulsate {
      0% {
        -ms-transform: scale(0.1, 0.1); /* IE 9 */
        -webkit-transform: scale(0.1, 0.1);/* Safari and Chrome */
        -o-transform: scale(0.1, 0.1); /* Opera */
        -moz-transform: scale(0.1, 0.1); /* Firefox */
        transform: scale(0.1, 0.1);
        
        opacity: 0;
      }
      50% {
        opacity: .8;
      } 
      100% {
        -ms-transform: scale(1.2, 1.2); /* IE 9 */
        -webkit-transform: scale(1.2, 1.2);/* Safari and Chrome */
        -o-transform: scale(1.2, 1.2); /* Opera */
        -moz-transform: scale(1.2, 1.2); /* Firefox */
        transform: scale(1.2, 1.2);

        opacity: 0;
      }
  }
}

@mixin pulsate-animation {  
  -webkit-animation: pulsate 1.5s ease-out;
  -webkit-animation-iteration-count: infinite; 
  -moz-animation: pulsate 1.5s ease-out;
  -moz-animation-iteration-count: infinite;
  animation: pulsate 1.5s ease-out;
  animation-iteration-count: infinite; 
}