woocommerce/plugins/woocommerce-admin/client/stylesheets/abstracts/_mixins.scss

/** @format */

// Rem output with px fallback
@mixin font-size($sizeValue: 16, $lineHeight: false ) {
	font-size: $sizeValue + px;
	font-size: ($sizeValue / 16) + rem;
	@if ($lineHeight) {
		line-height: $lineHeight;
	}
}

@mixin hover-state {
	&:hover,
	&:active,
	&:focus {
		@content;
	}
}

// Adds animation to placeholder section
@mixin placeholder( $lighten-percentage: 30% ) {
	animation: loading-fade 1.6s ease-in-out infinite;
	background-color: $core-grey-light-500;
	color: transparent;

	&::after {
		content: '\00a0';
	}
}

// Adds animation to transforms
@mixin animate-transform( $duration: 0.2s ) {
	transition: transform ease $duration;

	@media screen and (prefers-reduced-motion: reduce) {
		transition: none;
	}
}

// Gutenberg Button variables. These are temporary until Gutenberg's variables are exposed.
@mixin button-style__focus-active() {
	background-color: $white;
	color: $dark-gray-900;
	box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white;

	// Windows High Contrast mode will show this outline, but not the box-shadow
	outline: 2px solid transparent;
	outline-offset: -2px;
}

// Sets positions for children of grid elements
@mixin set-grid-item-position( $wrap-after, $number-of-items ) {
	@for $i from 1 through $number-of-items {
		&:nth-child(#{$i}) {
			grid-column-start: #{($i - 1) % $wrap-after + 1};
			grid-column-end: #{($i - 1) % $wrap-after + 2};
			grid-row-start: #{floor(($i - 1) / $wrap-after) + 1};
			grid-row-end: #{floor(($i - 1) / $wrap-after) + 2};
		}
	}
}