// Some things copied from WinJS with <3 // LTR mixin definition @mixin LTR { html[dir='ltr'] & { @content; } } // RTL mixin definition @mixin RTL { html[dir='rtl'] & { @content; } } // Use baseRTL for a root element of a control that needs rtl support @mixin baseRtl { @include RTL { direction: rtl; unicode-bidi: bidi-override; } } /* Common CSS property mixins with support for RTL. Use these mixins when you want to automatically create RTL versions of your properties. They are in alphabetical order (a-z). */ @mixin border-color($top, $right, $bottom, $left) { border-color: $top $right $bottom $left; @include RTL { border-color: $top $left $bottom $right; } } @mixin border-left($width, $style, $color) { @include LTR { border-left: $width $style $color; } @include RTL { border-right: $width $style $color; } } @mixin border-left-color($color) { @include LTR { border-left-color: $color; } @include RTL { border-right-color: $color; } } @mixin border-left-style($style) { @include LTR { border-left-style: $style; } @include RTL { border-right-style: $style; } } @mixin border-left-width($width) { @include LTR { border-left-width: $width; } @include RTL { border-right-width: $width; } } @mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) { border-radius: $topLeft $topRight $bottomRight $bottomLeft; @include RTL { border-radius: $topRight $topLeft $bottomLeft $bottomRight; } } @mixin border-right($width, $style, $color) { @include LTR { border-right: $width $style $color; } @include RTL { border-left: $width $style $color; } } @mixin border-right-color($color) { @include LTR { border-right-color: $color; } @include RTL { border-left-color: $color; } } @mixin border-right-style($style) { @include LTR { border-right-style: $style; } @include RTL { border-left-style: $style; } } @mixin border-right-width($width) { @include LTR { border-right-width: $width; } @include RTL { border-left-width: $width; } } @mixin clear($side) { @if $side == left { @include LTR { clear: $side; } @include RTL { clear: right; } } @else if $side == right { @include LTR { clear: $side; } @include RTL { clear: left; } } @else { clear: $side; } } @mixin float($direction) { @if $direction == left { @include LTR { float: left; } @include RTL { float: right; } } @else { @include LTR { float: right; } @include RTL { float: left; } } } @mixin left($distance) { @include LTR { left: $distance; } @include RTL { right: $distance; } } @mixin margin($top, $right, $bottom, $left) { margin: $top $right $bottom $left; @include RTL { margin: $top $left $bottom $right; } } @mixin margin-left($distance) { @include LTR { margin-left: $distance; } @include RTL { margin-right: $distance; } } @mixin margin-right($distance) { @include LTR { margin-right: $distance; } @include RTL { margin-left: $distance; } } @mixin padding($top, $right, $bottom, $left) { padding: $top $right $bottom $left; @include RTL { padding: $top $left $bottom $right; } } @mixin padding-left($distance) { @include LTR { padding-left: $distance; } @include RTL { padding-right: $distance; } } @mixin padding-right($distance) { @include LTR { padding-right: $distance; } @include RTL { padding-left: $distance; } } @mixin right($distance) { @include LTR { right: $distance; } @include RTL { left: $distance; } } @mixin text-align($direction) { @if $direction == left { @include LTR { text-align: left; } @include RTL { text-align: right; } } @else { @include LTR { text-align: right; } @include RTL { text-align: left; } } } @mixin box-shadow($left, $etc) { @include LTR { box-shadow: $left $etc; } @include RTL { box-shadow: -$left $etc; } } @mixin transform-scaleX($scaleX: 1) { @include LTR { transform: scaleX($scaleX); } @include RTL { transform: scaleX(-$scaleX); } } @mixin transform-translateX($distance) { @include LTR { transform: translateX($distance); } @include RTL { transform: translateX(-$distance); } } // only supported when ONLY left/right are declared @mixin transition-property($direction) { @if $direction == left { @include LTR { transition-property: left; } @include RTL { transition-property: right; } } @else { @include LTR { transition-property: right; } @include RTL { transition-property: left; } } } // Disables high contrast color adjusts for Edge/IE11 @mixin highContrastAdjust { @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) { -ms-high-contrast-adjust: none; forced-color-adjust: none; } }