SCSS: Base CSS document

SCSS: Base CSS document

/* BASE CSS DOCUMENT */
// @import "utils/retina-sprites";
// @import "utils/retina";

// $sprites: sprite-map("sprites/*.png", $spacing: 5px);            // import 1x sprites
// $sprites2x: sprite-map("sprites-retina/*.png", $spacing: 5px);   // import 2x sprites

/* GLOBAL */
$baseurl 						: "/";

/* IMPORTS */


/* COLORS */



/* FONTS */



/* EXTENDS */
%clearfix:before
%clearfix:after 				{ content: " "; display: table; }
%clearfix:after 				{ clear: both; }
%clearfix 						{ *zoom: 1; }

.no-bullets,
%no-bullets 					{ list-style: none; margin: 0; padding: 0; }

%left,
.left 							{ float: left; }
.text--left,
%text--left 					{ text-align: left; }

%right,
.right 							{ float: right; }
.text--right,
%text--right 					{ text-align: right; }

%center,
.center 						{ width: 100%; text-align: center; }
.text--center,
%text--center 					{ text-align: center; }

%image,
.image 							{ float: left; margin: 0 45px 20px 0; }
%thumb,
.thumb 							{ float: left; margin: 0 20px 20px 0; }

.no-margin-padding,
%no-margin-padding 				{ padding: 0; margin: 0; }

/* FUNCTIONS */
@function darkest( $color ) 	{ @return darken($color,20%); }
@function darker( $color ) 		{ @return darken($color,13.333%); }
@function dark( $color ) 		{ @return darken($color,6.667%); }
@function light( $color ) 		{ @return lighten($color,16.667%); }
@function lighter( $color ) 	{ @return lighten($color,33.333%); }
@function lightest( $color ) 	{ @return lighten($color,50%); }

/* MIXINS */
@mixin columns($columns: 2) 	{ column-count: $columns; }

@mixin font-size($font-size, $line-height: inherit) {
	font-size: emCalc($font-size);
	@if $line-height != inherit {
		line-height: emCalc($line-height);
		@debug "line height is #{$line-height}"
	}
}

@mixin breakpoint($point) 		{
	@if $point == large-screen {
		@media (max-width: 1600px) { @content; }
	}
	@else if $point == retina {
		@media (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) { @content; }
	}
    @else if $point == regular-screen {
	    @media (max-width: 1250px) { @content; }
  	}
	@else if $point ==  ipad-landscape {
	    @media (max-width: 1024px)  { @content; }
  	}
    @else if $point ==  smaller-screen {
	    @media (max-width: 800px)  { @content; }
  	}
	@else if $point ==  ipad-portrait {
		@media (max-width: 768px)  { @content; }
	}
	@else if $point ==  iphone-four {
		@media (max-width: 360px)  { @content; }
	}
	@else if $point ==  iphone {
	    @media (max-width: 320px)  { @content; }
	}
}

// REFERENCE http://css-tricks.com/snippets/css/css-triangle/
@mixin arrow ($direction, $size, $color) {
	@if $direction == up {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-bottom: $size solid $color;
	} @else if $direction == down {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-top: $size solid $color;
	} @else if $direction == right {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-left: $size solid $color;
	} @else if $direction == left {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-right:$size solid $color;
	}
}

/* ZURB OVER RIDES */
.row.full-width 				{ width: 100% !important; max-width: 100% !important; }
.columns.no-margin 				{ margin: 0 !important; padding: 0 !important; }
.no-margin-block-grid 			{
	li 							{ margin: 0 !important; padding: 0 !important; }
}