whitesports/app/wp-content/themes/twentynineteen/sass/mixins/_mixins-mast...

// 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: .8;
		z-index: 3;

		/* Browsers supporting mix-blend-mode don't need opacity < 1 */
		@supports (mix-blend-mode: multiply) {
			opacity: 1;
		}
	}
}

@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;
	}

	&.has-text-align-center:before {
		margin-left: auto;
		margin-right: auto;
	}

	&.has-text-align-right:before {
		margin-left: auto;
	}
}

/* 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.
}

/* Calculates maximum width for post content */
@mixin postContentMaxWidth() {

	@include media(tablet) {
		max-width: $size__site-tablet-content;
	}

	@include media(desktop) {
		max-width: $size__site-desktop-content;
	}
}

/* Nested sub-menu padding: 10 levels deep */
@mixin nestedSubMenuPadding() {

	ul {
		counter-reset: submenu;
	}

	ul > li > a::before {
		font-family: $font__body;
		font-weight: normal;
		content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
		counter-increment: submenu
	}
}

/* Ensure all font family declarations come with non-latin fallbacks */
@mixin font-family( $font_family: $font__body ) {
	font-family: $font_family;
	@extend %non-latin-fonts;
}

/* Build our non-latin font styles */
%non-latin-fonts {
	@each $lang, $font__fallback in $font__fallbacks {
		&:lang(#{$lang}) {
			font-family: unquote( $font__fallback );
		}
	}
}

@import "utilities";