themes-wordpress/calm-business/sass/mixins/_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: .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-dark {
	z-index: 1;
	align-self: start;
	> :first-child {
		&:before {
			border-width: 1px;
			border-style: solid;
			border-color: inherit;
			content: "";
			display: block;
			height: 2px;
			margin: 1.46rem 0 1rem;
			width: 20px;
		}
	}
}

@mixin post-section-dash {
	z-index: 1;
	align-self: start;
	> :first-child {
		&:before {
			border-width: 1px;
			border-style: solid;
			border-color: inherit;
			content: "";
			display: block;
			height: 2px;
			margin: 1.46rem 0 1rem;
			width: 20px;
		}
	}
}

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

/* Fallback for non-latin fonts */

@mixin non-latin-fonts( $wrapper_classname: '.site' ) {

	/* Arabic */
	html[lang="ar"] #{$wrapper_classname} *,
	html[lang="ary"] #{$wrapper_classname} *,
	html[lang="azb"] #{$wrapper_classname} *,
	html[lang="ckb"] #{$wrapper_classname} *,
	html[lang="fa-IR"] #{$wrapper_classname} *,
	html[lang="haz"] #{$wrapper_classname} *,
	html[lang="ps"] #{$wrapper_classname} * {
	  font-family: Tahoma, Arial, sans-serif !important;
	}

	/* Cyrillic */
	html[lang="be"] #{$wrapper_classname} *,
	html[lang="bg-BG"] #{$wrapper_classname} *,
	html[lang="kk"] #{$wrapper_classname} *,
	html[lang="mk-MK"] #{$wrapper_classname} *,
	html[lang="mn"] #{$wrapper_classname} *,
	html[lang="ru-RU"] #{$wrapper_classname} *,
	html[lang="sah"] #{$wrapper_classname} *,
	html[lang="sr-RS"] #{$wrapper_classname} *,
	html[lang="tt-RU"] #{$wrapper_classname} *,
	html[lang="uk"] #{$wrapper_classname} * {
	  font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif !important;
	}

	/* Chinese (Hong Kong) */
	html[lang="zh-HK"] #{$wrapper_classname} * {
		font-family: -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important;
	}

	/* Chinese (Taiwan) */
	html[lang="zh-TW"] #{$wrapper_classname} * {
		font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important;
	}

	/* Chinese (China) */
	html[lang="zh-CN"] #{$wrapper_classname} * {
		font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important;
	}

	/* Devanagari */
	html[lang="bn-BD"] #{$wrapper_classname} *,
	html[lang="hi-IN"] #{$wrapper_classname} *,
	html[lang="mr"] #{$wrapper_classname} *,
	html[lang="ne-NP"] #{$wrapper_classname} * {
	  font-family: Arial, sans-serif !important;
	}

	/* Greek */
	html[lang="el"] #{$wrapper_classname} * {
	  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	}

	/* Gujarati */
	html[lang="gu"] #{$wrapper_classname} * {
	  font-family: Arial, sans-serif !important;
	}

	/* Hebrew */
	html[lang="he-IL"] #{$wrapper_classname} * {
	  font-family: 'Arial Hebrew', Arial, sans-serif !important;
	}

	/* Japanese */
	html[lang="ja"] #{$wrapper_classname} * {
	  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif !important;
	}

	/* Korean */
	html[lang="ko-KR"] #{$wrapper_classname} * {
	  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', Dotum, sans-serif !important;
	}

	/* Thai */
	html[lang="th"] #{$wrapper_classname} * {
	  font-family: 'Sukhumvit Set', 'Helvetica Neue', helvetica, arial, sans-serif !important;
	}

	/* Vietnamese */
	html[lang="vi"] #{$wrapper_classname} * {
	  font-family: 'Libre Franklin', sans-serif !important;
	}
}

/* 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-size: $font__size-sm;
		font-weight: $font__weight_semi_bold;
		line-height: $font__line-height-heading;
		content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
		counter-increment: submenu
	}
}

@import "utilities";