zaufane.pl/layout/style-scss/_mixins.scss

$breakpoints: (
	xxxs: 430px,
	xxs: 540px,
	xs: 576px,
	sm: 768px,
	md: 992px,
	lg: 1200px,
	xl: 1360px,
	xxl: 1460px,
	xxxl: 1650px,
	xxxxl: 2000px,
);

@mixin respond-above($breakpoint) {
	@if map-has-key($breakpoints, $breakpoint) {
		$breakpoint-value: map-get($breakpoints, $breakpoint);

		@media (min-width: $breakpoint-value) {
			@content;
		}
	} @else {
		@warn 'Invalid breakpoint: #{$breakpoint}.';
	}
}

@mixin respond-below($breakpoint) {
	@if map-has-key($breakpoints, $breakpoint) {
		$breakpoint-value: map-get($breakpoints, $breakpoint);

		@media (max-width: ($breakpoint-value - 1)) {
			@content;
		}
	} @else {
		@warn 'Invalid breakpoint: #{$breakpoint}.';
	}
}

@mixin respond-between($lower, $upper) {
	@if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
		$lower-breakpoint: map-get($breakpoints, $lower);
		$upper-breakpoint: map-get($breakpoints, $upper);

		@media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
			@content;
		}
	} @else {
		@if (map-has-key($breakpoints, $lower) ==false) {
			@warn 'Your lower breakpoint was invalid: #{$lower}.';
		}

		@if (map-has-key($breakpoints, $upper) ==false) {
			@warn 'Your upper breakpoint was invalid: #{$upper}.';
		}
	}
}

@mixin border-radius($px: 0) {
	-webkit-border-radius: $px;
	-moz-border-radius: $px;
	border-radius: $px;
}

@mixin box-shadow($value) {
	-webkit-box-shadow: $value;
	-moz-box-shadow: $value;
	box-shadow: $value;
}

@mixin transition($element: all, $time: 0.5s, $option: ease) {
	-webkit-transition: $element $time $option;
	transition: $element $time $option;
}

@mixin opacity($value) {
	$IEValue: $value * 100;
	opacity: $value;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + $IEValue +
		')';
	filter: alpha(opacity=$IEValue);
}

@mixin flexbox() {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

@mixin flex($values) {
	-webkit-box-flex: $values;
	-moz-box-flex: $values;
	-webkit-flex: $values;
	-ms-flex: $values;
	flex: $values;
}

@mixin flex-direction($direction) {
	-webkit-flex-direction: $direction;
	-moz-flex-direction: $direction;
	-ms-flex-direction: $direction;
	flex-direction: $direction;
}

@mixin flex-wrap($wrap) {
	-webkit-flex-wrap: $wrap;
	-moz-flex-wrap: $wrap;
	-ms-flex-wrap: $wrap;
	flex-wrap: $wrap;
}

@mixin flex-flow($flow) {
	-webkit-flex-flow: $flow;
	-moz-flex-flow: $flow;
	-ms-flex-flow: $flow;
	flex-flow: $flow;
}

@mixin order($val) {
	-webkit-box-ordinal-group: $val;
	-moz-box-ordinal-group: $val;
	-ms-flex-order: $val;
	-webkit-order: $val;
	order: $val;
}

@mixin flex-grow($grow) {
	-webkit-flex-grow: $grow;
	-moz-flex-grow: $grow;
	-ms-flex-grow: $grow;
	flex-grow: $grow;
}

@mixin flex-shrink($shrink) {
	-webkit-flex-shrink: $shrink;
	-moz-flex-shrink: $shrink;
	-ms-flex-shrink: $shrink;
	flex-shrink: $shrink;
}

@mixin flex-basis($width) {
	-webkit-flex-basis: $width;
	-moz-flex-basis: $width;
	-ms-flex-basis: $width;
	flex-basis: $width;
}

@mixin justify-content($justify) {
	-webkit-justify-content: $justify;
	-moz-justify-content: $justify;
	-ms-justify-content: $justify;
	justify-content: $justify;
	-ms-flex-pack: $justify;
}

@mixin align-content($align) {
	-webkit-align-content: $align;
	-moz-align-content: $align;
	-ms-align-content: $align;
	align-content: $align;
}

@mixin align-items($align) {
	-webkit-align-items: $align;
	-moz-align-items: $align;
	-ms-align-items: $align;
	align-items: $align;
}

@mixin align-self($align) {
	-webkit-align-self: $align;
	-moz-align-self: $align;
	-ms-align-self: $align;
	align-self: $align;
}

//* Fonts

@font-face {
	font-family: 'Proxima Nova Bl';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Black.eot');
	src: local('Proxima Nova Black'), local('ProximaNova-Black'),
		url('/layout/fonts/ProximaNova/ProximaNova-Black.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Black.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Black.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.eot');
	src: local('Proxima Nova Extrabold'), local('ProximaNova-Extrabld'),
		url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.eot');
	src: local('Proxima Nova Semibold Italic'), local('ProximaNova-SemiboldIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.woff2')
			format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.ttf')
			format('truetype');
	font-weight: 600;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.eot');
	src: local('Proxima Nova Thin'), local('ProximaNovaT-Thin'),
		url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Light.eot');
	src: local('Proxima Nova Light'), local('ProximaNova-Light'),
		url('/layout/fonts/ProximaNova/ProximaNova-Light.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Light.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Light.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.eot');
	src: local('Proxima Nova Black Italic'), local('ProximaNova-BlackIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.ttf') format('truetype');
	font-weight: 900;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.eot');
	src: local('Proxima Nova Bold Italic'), local('ProximaNova-BoldIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.eot');
	src: local('Proxima Nova Thin Italic'), local('ProximaNova-ThinIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.ttf') format('truetype');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Bold.eot');
	src: local('Proxima Nova Bold'), local('ProximaNova-Bold'),
		url('/layout/fonts/ProximaNova/ProximaNova-Bold.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Bold.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Bold.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.eot');
	src: local('Proxima Nova Regular Italic'), local('ProximaNova-RegularIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.ttf')
			format('truetype');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.eot');
	src: local('Proxima Nova Extrabold Italic'), local('ProximaNova-ExtrabldIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.woff2')
			format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.ttf')
			format('truetype');
	font-weight: 800;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Regular.eot');
	src: local('Proxima Nova Regular'), local('ProximaNova-Regular'),
		url('/layout/fonts/ProximaNova/ProximaNova-Regular.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Regular.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Regular.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-LightIt.eot');
	src: local('Proxima Nova Light Italic'), local('ProximaNova-LightIt'),
		url('/layout/fonts/ProximaNova/ProximaNova-LightIt.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-LightIt.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-LightIt.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-LightIt.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('/layout/fonts/ProximaNova/ProximaNova-Semibold.eot');
	src: local('Proxima Nova Semibold'), local('ProximaNova-Semibold'),
		url('/layout/fonts/ProximaNova/ProximaNova-Semibold.eot?#iefix')
			format('embedded-opentype'),
		url('/layout/fonts/ProximaNova/ProximaNova-Semibold.woff2') format('woff2'),
		url('/layout/fonts/ProximaNova/ProximaNova-Semibold.woff') format('woff'),
		url('/layout/fonts/ProximaNova/ProximaNova-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}