_proximity.scss

/*
  WET-BOEW
  @title: Proximity CSS
 */

@import "../../_variables";

@mixin pstn {
	position: absolute;
	margin: 0;
}

@mixin pstn-lft {
	left: 0;
}

@mixin pstn-rght {
	right: 0;
}

@mixin pstn-tp {
	top: 0;
}

@mixin pstn-bttm {
	bottom: 0;
}

@mixin pstn-lft-rst {
	left: auto;
}

@mixin pstn-rght-rst {
	right: auto;
}

@mixin pstn-tp-rst {
	top: auto;
}

@mixin pstn-bttm-rst {
	bottom: auto;
}

.opct-100 {
	opacity: 1;
}

.opct-90 {
	opacity: .9;
}

.opct-80 {
	opacity: .8;
}

.opct-70 {
	opacity: .7;
}

.opct-60 {
	opacity: .6;
}

.opct-50 {
	opacity: .5;
}

.opct-40 {
	opacity: .4;
}

.opct-30 {
	opacity: .3;
}

.opct-20 {
	opacity: .2;
}

.opct-10 {
	opacity: .1;
}

.clmn-2 {
	column-count: 2;
}

.clmn-3 {
	column-count: 3;
}

.clmn-4 {
	column-count: 4;
}

.pstn-lft-xxs {
	@include pstn;
	@include pstn-lft;
	@include pstn-rght-rst;
}

.pstn-rght-xxs {
	@include pstn;
	@include pstn-rght;
	@include pstn-lft-rst;
}

.pstn-tp-xxs {
	@include pstn;
	@include pstn-tp;
	@include pstn-bttm-rst;
}

.pstn-bttm-xxs {
	@include pstn;
	@include pstn-bttm;
	@include pstn-tp-rst;
}

@media screen and (min-width: $xSmallViewMin) {
	.pstn-lft-xs {
		@include pstn;
		@include pstn-lft;
		@include pstn-rght-rst;
	}

	.pstn-rght-xs {
		@include pstn;
		@include pstn-rght;
		@include pstn-lft-rst;
	}

	.pstn-tp-xs {
		@include pstn;
		@include pstn-tp;
		@include pstn-bttm-rst;
	}

	.pstn-bttm-xs {
		@include pstn;
		@include pstn-bttm;
		@include pstn-tp-rst;
	}
}

@media screen and (min-width: $smallViewMin) {
	.pstn-lft-sm {
		@include pstn;
		@include pstn-lft;
		@include pstn-rght-rst;
	}

	.pstn-rght-sm {
		@include pstn;
		@include pstn-rght;
		@include pstn-lft-rst;
	}

	.pstn-tp-sm {
		@include pstn;
		@include pstn-tp;
		@include pstn-bttm-rst;
	}

	.pstn-bttm-sm {
		@include pstn;
		@include pstn-bttm;
		@include pstn-tp-rst;
	}
}

@media screen and (min-width: $mediumViewMin) {
	.pstn-lft-md {
		@include pstn;
		@include pstn-lft;
		@include pstn-rght-rst;
	}

	.pstn-rght-md {
		@include pstn;
		@include pstn-rght;
		@include pstn-lft-rst;
	}

	.pstn-tp-md {
		@include pstn;
		@include pstn-tp;
		@include pstn-bttm-rst;
	}

	.pstn-bttm-md {
		@include pstn;
		@include pstn-bttm;
		@include pstn-tp-rst;
	}
}

@media screen and (min-width: $largeViewMin) {
	.pstn-lft-lg {
		@include pstn;
		@include pstn-lft;
		@include pstn-rght-rst;
	}

	.pstn-rght-lg {
		@include pstn;
		@include pstn-rght;
		@include pstn-lft-rst;
	}

	.pstn-tp-lg {
		@include pstn;
		@include pstn-tp;
		@include pstn-bttm-rst;
	}

	.pstn-bttm-lg {
		@include pstn;
		@include pstn-bttm;
		@include pstn-tp-rst;
	}
}

@media screen and (min-width: $xLargeViewMin) {
	.pstn-lft-xl {
		@include pstn;
		@include pstn-lft;
		@include pstn-rght-rst;
	}

	.pstn-rght-xl {
		@include pstn;
		@include pstn-rght;
		@include pstn-lft-rst;
	}

	.pstn-tp-xl {
		@include pstn;
		@include pstn-tp;
		@include pstn-bttm-rst;
	}

	.pstn-bttm-xl {
		@include pstn;
		@include pstn-bttm;
		@include pstn-tp-rst;
	}
}

.mrgn-lft-0 {
	margin-left: 0;
}

.mrgn-lft-sm {
	margin-left: 5px;
}

.mrgn-lft-md {
	margin-left: 15px;
}

.mrgn-lft-lg {
	margin-left: 25px;
}

.mrgn-lft-xl {
	margin-left: 50px;
}

.mrgn-bttm-0 {
	margin-bottom: 0;
}

.mrgn-bttm-sm {
	margin-bottom: 5px;
}

.mrgn-bttm-md {
	margin-bottom: 15px;
}

.mrgn-bttm-lg {
	margin-bottom: 25px;
}

.mrgn-bttm-xl {
	margin-bottom: 50px;
}

.mrgn-tp-0 {
	margin-top: 0;
}

.mrgn-tp-sm {
	margin-top: 5px;
}

.mrgn-tp-md {
	margin-top: 15px;
}

.mrgn-tp-lg {
	margin-top: 25px;
}

.mrgn-tp-xl {
	margin-top: 50px;
}

.mrgn-rght-0 {
	margin-right: 0;
}

.mrgn-rght-sm {
	margin-right: 5px;
}

.mrgn-rght-md {
	margin-right: 15px;
}

.mrgn-rght-lg {
	margin-right: 25px;
}

.mrgn-rght-xl {
	margin-right: 50px;
}

%proximity-border-base {
	border: solid 0 #ccc;
}

.brdr-lft {
	@extend %proximity-border-base;
	border-left-width: 1px;
}

.brdr-rght {
	@extend %proximity-border-base;
	border-right-width: 1px;
}

.brdr-tp {
	@extend %proximity-border-base;
	border-top-width: 1px;
}

.brdr-bttm {
	@extend %proximity-border-base;
	border-bottom-width: 1px;
}