_mixins-master.scss

// Rem output with px fallback
@mixin font-size($sizeValue: 1) {
	font-size: ($sizeValue * 16) * 1px;
	font-size: $sizeValue * 1rem;
}

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

// Clearfix
@mixin clearfix() {
	content: "";
	display: table;
	table-layout: fixed;
}

// Clear after (not all clearfix need this also)
@mixin clearfix-after() {
	clear: both;
}

// Column width with margin
@mixin column-width($numberColumns: 3) {
	width: map-get($columns, $numberColumns) - (($columns__margin * ($numberColumns - 1)) / $numberColumns);
}

@mixin filter-duotone {

	&:before {
		background: $color__link;
		mix-blend-mode: screen;
		opacity: 0.1;
		z-index: 2;
	}

	&:after {
		background: $color__link;
		mix-blend-mode: multiply;
		opacity: 1;
		z-index: 3;
	}
}

@mixin filter-grayscale {

	position: relative;
	filter: grayscale(100%);
	z-index: 1;

	&:after {
		display: block;
		width: 100%;
		height: 100%;
		z-index: 10;
	}
}

@mixin post-section-dash {

	&:before {
		background: $color__text-light;
		content: "\020";
		display: block;
		height: 2px;
		margin: $size__spacing-unit 0;
		width: 1em;
	}
}

/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
 * since its edges can look jagged due to lack of antialiasing. In this case, we are several
 * layers of box-shadow to add the border visually, which will render the border smoother. */

@mixin box-shadow( $size ) {
	box-shadow:
		0 0 0 $size $color__text-light inset,         	// Original border.
		0 0 0 ($size + 1px) $color__text-light inset, 	// Antialiasing, inner edge.
		0 0 1px 0 rgba( $color__text-light, 0.7 );  	// Antialiasing, outer edge.
}

@import "utilities";