/** * Deprecated * Fallback for bourbon equivalent */ @mixin clearfix() { *zoom: 1; &::before, &::after { content: " "; display: table; } &::after { clear: both; } } /** * Deprecated * Vendor prefix no longer required. */ @mixin border_radius($radius: 4px) { border-radius: $radius; } /** * Deprecated * Vendor prefix no longer required. */ @mixin border_radius_right($radius: 4px) { border-top-right-radius: $radius; border-bottom-right-radius: $radius; } /** * Deprecated * Vendor prefix no longer required. */ @mixin border_radius_left($radius: 4px) { border-top-left-radius: $radius; border-bottom-left-radius: $radius; } /** * Deprecated * Vendor prefix no longer required. */ @mixin border_radius_bottom($radius: 4px) { border-bottom-left-radius: $radius; border-bottom-right-radius: $radius; } /** * Deprecated * Vendor prefix no longer required. */ @mixin border_radius_top($radius: 4px) { border-top-left-radius: $radius; border-top-right-radius: $radius; } /** * Deprecated * Vendor prefix no longer required. */ @mixin opacity( $opacity: 0.75 ) { opacity: $opacity; } /** * Deprecated * Vendor prefix no longer required. */ @mixin box_shadow($shadow_x: 3px, $shadow_y: 3px, $shadow_rad: 3px, $shadow_in: 3px, $shadow_color: #888) { box-shadow: $shadow_x $shadow_y $shadow_rad $shadow_in $shadow_color; } /** * Deprecated * Vendor prefix no longer required. */ @mixin inset_box_shadow($shadow_x: 3px, $shadow_y: 3px, $shadow_rad: 3px, $shadow_in: 3px, $shadow_color: #888) { box-shadow: inset $shadow_x $shadow_y $shadow_rad $shadow_in $shadow_color; } /** * Deprecated * Vendor prefix no longer required. */ @mixin text_shadow($shadow_x: 3px, $shadow_y: 3px, $shadow_rad: 3px, $shadow_color: #fff) { text-shadow: $shadow_x $shadow_y $shadow_rad $shadow_color; } /** * Deprecated * Vendor prefix no longer required. */ @mixin vertical_gradient($from: #000, $to: #fff) { background-color: $from; background: -webkit-linear-gradient($from, $to); } /** * Deprecated * Vendor prefix no longer required. */ @mixin transition($selector: all, $animation: ease-in-out, $duration: 0.2s) { transition: $selector $animation $duration; } /** * Deprecated * Use bourbon mixin instead `@include transform(scale(1.5));` */ @mixin scale($ratio: 1.5) { -webkit-transform: scale($ratio); transform: scale($ratio); } /** * Deprecated * Use bourbon mixin instead `@include box-sizing(border-box);` */ @mixin borderbox() { box-sizing: border-box; } @mixin darkorlighttextshadow($a, $opacity: 0.8) { @if lightness($a) >= 65% { @include text_shadow(0, -1px, 0, rgba(0, 0, 0, $opacity)); } @else { @include text_shadow(0, 1px, 0, rgba(255, 255, 255, $opacity)); } } /** * Objects */ @mixin menu() { @include clearfix(); li { display: inline-block; } } @mixin mediaright() { @include clearfix(); img { float: right; height: auto; } } @mixin medialeft() { @include clearfix(); img { float: right; height: auto; } } @mixin ir() { display: block; text-indent: -9999px; position: relative; height: 1em; width: 1em; } @mixin icon( $glyph: "\e001" ) { font-family: "WooCommerce"; speak: never; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; margin: 0; text-indent: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; content: $glyph; } @mixin icon_dashicons( $glyph: "\f333" ) { font-family: "Dashicons"; speak: never; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; margin: 0; text-indent: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; content: $glyph; } @mixin iconbefore( $glyph: "\e001" ) { font-family: "WooCommerce"; speak: never; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; margin-right: 0.618em; content: $glyph; text-decoration: none; } @mixin iconbeforedashicons( $glyph: "\f333" ) { font-family: "Dashicons"; speak: never; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: $glyph; text-decoration: none; } @mixin iconafter( $glyph: "\e001" ) { font-family: "WooCommerce"; speak: never; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; margin-left: 0.618em; content: $glyph; text-decoration: none; } @mixin loader() { &::before { height: 1em; width: 1em; display: block; position: absolute; top: 50%; left: 50%; margin-left: -0.5em; margin-top: -0.5em; content: ""; animation: spin 1s ease-in-out infinite; background: url("../images/icons/loader.svg") center center; background-size: cover; line-height: 1; text-align: center; font-size: 2em; color: rgba(#000, 0.75); } } @mixin inversebuttoncolors { background-color: transparent !important; color: var(--button--color-text-hover) !important; &:hover { background-color: var(--button--color-background) !important; color: var(--button--color-text) !important; text-decoration: none !important; } } @mixin table-marks() { mark { background: transparent none; } mark.yes { color: var(--wc-green); } mark.no { color: #999; } } @mixin coupon-error-notice-cart() { clear: left; color: var(--wc-red); flex-basis: 100%; float: none; font-size: 0.75em; margin-bottom: 0; margin-top: 8px; text-align: left; width: auto; } @mixin coupon-error-notice-checkout() { color: var(--wc-red); display: block; font-size: 0.75em; margin-top: 8px; }