297 lines
5.6 KiB
SCSS
297 lines
5.6 KiB
SCSS
// 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;
|
|
}
|
|
}
|