//
// Variables
//
$start: left;
$end: right;
@if ($direction == rtl) {
$start: right;
$end: left;
}
//
// Internal Mixins
//
@mixin _dimension($dimension, $top, $right, $bottom, $left){
@if ($direction == rtl) {
#{$dimension}: $top $left $bottom $right;
} @else {
#{$dimension}: $top $right $bottom $left;
}
}
@mixin _dimension_side($dimension, $side, $value) {
@if ($direction == rtl and $side == start) or ($direction == ltr and $side == end) {
#{$dimension}-right: $value;
} @else {
#{$dimension}-left: $value;
}
}
@mixin _dimension_side_property($dimension, $side, $property, $value) {
@if ($direction == rtl and $side == start) or ($direction == ltr and $side == end) {
#{$dimension}-right-#{$property}: $value;
} @else {
#{$dimension}-left-#{$property}: $value;
}
}
//
// Mixins
//
@mixin start($value) {
@if $direction == rtl {
right: $value;
} @else {
left: $value;
}
}
@mixin end($value) {
@if $direction == rtl {
left: $value;
} @else {
right: $value;
}
}
// Padding Mixins
@mixin padding($top, $right, $bottom, $left) {
@include _dimension(padding, $top, $right, $bottom, $left);
}
@mixin padding-start($value) {
@include _dimension_side(padding, start, $value);
}
@mixin padding-end($value) {
@include _dimension_side(padding, end, $value);
}
// Margin Mixins
@mixin margin($top, $right, $bottom, $left) {
@include _dimension(margin, $top, $right, $bottom, $left);
}
@mixin margin-start($value) {
@include _dimension_side(margin, start, $value);
}
@mixin margin-end($value) {
@include _dimension_side(margin, end, $value);
}
// Border Mixins
@mixin border-width($top, $right, $bottom, $left) {
@include _dimension(border-width, $top, $right, $bottom, $left);
}
@mixin border-start($value) {
@include _dimension_side(border, start, $value);
}
@mixin border-end($value) {
@include _dimension_side(border, end, $value);
}
@mixin border-start-property($property, $value){
@include _dimension_side_property(border, start, $property, $value);
}
@mixin border-end-property($property, $value){
@include _dimension_side_property(border, end, $property, $value);
}
// Box-Shadow Mixins
@mixin direction-box-shadow($x, $extra-values) {
@if $direction == rtl {
$x: -$x;
}
box-shadow: $x $extra-values;
}
// Translate3d Mixins
@mixin translate-3d($x, $y, $z) {
@if $direction == rtl {
$x: -$x;
}
transform: translate3d($x, $y, $z);
}
//
// Functions
//
@function getValueByDirection($value-for-left, $value-for-right) {
@if ($direction == rtl) {
@return $value-for-right;
}
@return $value-for-left;
}
@mixin getInverseDirection() {
@if $direction == rtl {
direction: ltr;
}
}