_mixin.scss

_mixins.scss

//MIXINS

//1==FONTS
//2==REM
//3==appereance
//4==flexbox
//5==inline block wrapper
//6==clearfix
//7==triangle
//8==currency (usd,euro)
//9==placeholder
//10==scrollbar
//11==hidden / visible
//12==retina











//===========//
//MIXIN FONTS
//===========//
@mixin font-face($file_name,$font_name:$file_name,$path:$font_path,$weight:normal,$style:normal) {
	@font-face {
		font-family: quote($font_name);
		src: url($path + $file-name + ".eot");
		src: url($path + $file-name + ".eot?#iefix") format("embedded-opentype"), url($path + $file-name + ".woff") format("woff"), url($path + $file-name + ".ttf") format("truetype"), url($path + $file-name + ".svg##{$font_name}") format("svg");
		font-weight: $weight;
		font-style: $style;
	}
}
// @include font-face("Roboto", "Roboto", '../fonts/', 'normal', 'normal');

//===========//
//REM
//===========//

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}
//REM FZ
// @mixin font-size($sizeValue: 1.6) {
//   font-size: ($sizeValue * 10) + px;
//   font-size: $sizeValue + rem;
// }
//USE
// p {
//   @include font-size(14px)
// }
// RESULT
// p {
//   font-size: 14px; //Will be overridden if browser supports rem
//   font-size: 0.8rem;
// }

//===========//
//APPEREANCE
//===========//

@mixin appearance($value: button) {
	-moz-appearance: $value;
	-webkit-appearance: $value;
	appearance: $value;
}

//===========//
//FLEXBOX
//===========//
@mixin flex_block($flex-direction : row, $flex-wrap: wrap, $content : space-between, $align-items : flex-start,$align-content : flex-start) {

	display: flex;
	flex-direction: $flex-direction;
	flex-wrap: $flex-wrap;
	justify-content: $content;
	align-content: $align-content;
	align-items: $align-items;
}



//===========//
//INLINE BLOCK WRAPPER
//===========//
@mixin inline_block_wrapper {
	font-size: 0;
	line-height: 0;
	letter-spacing: -1px;
}

//===========//
//CLEARFIX
//===========//

@mixin clearfix {
	clear: both;
	&:after {
		content: "";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
}

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

//USE
.container-with-floated-children {
  @extend %clearfix;
}

/*
## Triangle
* @include triangle within a pseudo element and add positioning properties (ie. top, left)
* $direction: up, down, left, right
*/
@mixin triangle($direction, $size: 8px, $color: #222) {
	content: '';
	display: block;
	position: absolute;
	height: 0;
	width: 0;
	@if ($direction == 'up') {
		border-bottom: $size solid $color;
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-top: none;
	} @else if ($direction == 'down') {
		border-top: $size solid $color;
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-bottom: none;
	} @else if ($direction == 'left') {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-right: $size solid $color;
		border-left: none;
	} @else if ($direction == 'right') {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-left: $size solid $color;
		border-right: none;
	}
}

/*
* Currency
*/
%currency {
	position: relative;
	&:before {
		content: '$';
		position: relative;
		left: 0;
	}
}

.USD %currency:before {
	content: '$';
}

.EUR %currency:before {
	content: '\20AC';
}

// must escape the html entities for each currency symbol
.ILS %currency:before {
	content: '\20AA';
}

.GBP %currency:before {
	content: '\00A3';
}

/*
## Placeholder Color - for styling input placeholders in every browser
*/
@mixin placeholderColor($color) {
	&::-webkit-input-placeholder {
		-webkit-transition: color 200ms;
		color: $color;
	}
	&:-moz-placeholder {
		//Firefox 18-
		-moz-transition: color 200ms;
		color: $color;
	}
	&::-moz-placeholder {
		-moz-transition: color 200ms;
		color: $color;
	}
	&:-ms-input-placeholder {
		color: $color;
	}
}

@mixin placeholder {
	&::-webkit-input-placeholder {
		@content;
	}

	&:-moz-placeholder { /* Firefox 18- */
		@content;
	}

	&::-moz-placeholder {  /* Firefox 19+ */
		@content;
	}

	&:-ms-input-placeholder {
		@content;
	}
}

// input { @include placeholder {
//     font-family: $base-font-family;
//     color: red;
// }}

%customScrollBar {
	&::-webkit-scrollbar {
		width: 11px;
	}

	&::-webkit-scrollbar-button {
		display: none;
	}

	&::-webkit-scrollbar-track {

	}

	&::-webkit-scrollbar-thumb {
		border-left: 8px solid;
		border-color: #7A8CA2;
	}
}



//===========//
//HIDDEN / VISIBLE
//===========//
@mixin hidden {
	display: none;
	visibility: hidden;
}

@mixin visible($state: 'block') {
	display: unquote($state);
	visibility: visible;
}


@mixin retina {
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3 / 2),
	only screen and (min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx) {
		@content;
	}
}
// Font-face mixin use: @include font-face("font-name", "file-name")
@mixin font-face($style-name, $file, $category:"") {
    $filepath: "../fonts/" + $file;
    @font-face {
        font-family: "#{$style-name}";
        src: url($filepath + ".eot");
        src: url($filepath + ".eot?#iefix") format('embedded-opentype'), 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;
            }
        }
    }
}