MOBILE-3670 styles: Reindent mixin file
Pau Ferrer Ocaña
parent
c8899dde03
commit
4925e47ab9
|
|
@ -287,353 +287,353 @@
|
||||||
|
|
||||||
// $root: #{&};
|
// $root: #{&};
|
||||||
// @at-root [dir] {
|
// @at-root [dir] {
|
||||||
// #{$root} {
|
// #{$root} {
|
||||||
// @content;
|
// @content;
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin rtl() {
|
@mixin rtl() {
|
||||||
$root: #{&};
|
$root: #{&};
|
||||||
|
|
||||||
@at-root [dir=rtl] {
|
@at-root [dir=rtl] {
|
||||||
#{$root} {
|
#{$root} {
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin ltr() {
|
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin ltr() {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// SVG Background Image Mixin
|
// SVG Background Image Mixin
|
||||||
// @param {string} $svg
|
// @param {string} $svg
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
@mixin svg-background-image($svg, $flip-rtl: false) {
|
@mixin svg-background-image($svg, $flip-rtl: false) {
|
||||||
$url: url-encode($svg);
|
$url: url-encode($svg);
|
||||||
$viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
|
$viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
|
||||||
|
|
||||||
@if $flip-rtl != true or $viewBox == null {
|
@if $flip-rtl != true or $viewBox == null {
|
||||||
@include multi-dir() {
|
@include multi-dir() {
|
||||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||||
}
|
|
||||||
} @else {
|
|
||||||
$transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
|
|
||||||
$flipped-url: $svg;
|
|
||||||
$flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
|
|
||||||
$flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
|
|
||||||
$flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
|
|
||||||
$flipped-url: url-encode($flipped-url);
|
|
||||||
|
|
||||||
@include ltr () {
|
|
||||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
|
||||||
}
|
|
||||||
@include rtl() {
|
|
||||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
} @else {
|
||||||
|
$transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
|
||||||
|
$flipped-url: $svg;
|
||||||
|
$flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
|
||||||
|
$flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
|
||||||
|
$flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
|
||||||
|
$flipped-url: url-encode($flipped-url);
|
||||||
|
|
||||||
// Add property horizontal
|
@include ltr () {
|
||||||
// @param {string} $start
|
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||||
// @param {string} $end
|
}
|
||||||
// ----------------------------------------------------------
|
@include rtl() {
|
||||||
@mixin property-horizontal($prop, $start, $end: $start) {
|
background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
|
||||||
@if $start == 0 and $end == 0 {
|
}
|
||||||
#{$prop}-left: $start;
|
}
|
||||||
#{$prop}-right: $end;
|
}
|
||||||
|
|
||||||
} @else {
|
// Add property horizontal
|
||||||
#{$prop}-left: $start;
|
// @param {string} $start
|
||||||
#{$prop}-right: $end;
|
// @param {string} $end
|
||||||
|
// ----------------------------------------------------------
|
||||||
|
@mixin property-horizontal($prop, $start, $end: $start) {
|
||||||
|
@if $start == 0 and $end == 0 {
|
||||||
|
#{$prop}-left: $start;
|
||||||
|
#{$prop}-right: $end;
|
||||||
|
|
||||||
@at-root {
|
} @else {
|
||||||
@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
|
#{$prop}-left: $start;
|
||||||
& {
|
#{$prop}-right: $end;
|
||||||
@if $start != null {
|
|
||||||
#{$prop}-left: unset;
|
|
||||||
}
|
|
||||||
@if $end != null {
|
|
||||||
#{$prop}-right: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
-webkit-#{$prop}-start: $start;
|
@at-root {
|
||||||
#{$prop}-inline-start: $start;
|
@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
|
||||||
-webkit-#{$prop}-end: $end;
|
& {
|
||||||
#{$prop}-inline-end: $end;
|
@if $start != null {
|
||||||
}
|
#{$prop}-left: unset;
|
||||||
}
|
}
|
||||||
}
|
@if $end != null {
|
||||||
}
|
#{$prop}-right: unset;
|
||||||
}
|
|
||||||
|
|
||||||
// Add property for all directions
|
|
||||||
// @param {string} $prop
|
|
||||||
// @param {string} $top
|
|
||||||
// @param {string} $end
|
|
||||||
// @param {string} $bottom
|
|
||||||
// @param {string} $start
|
|
||||||
// @param {boolean} $content include content or use default
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
|
|
||||||
@include property-horizontal($prop, $start, $end);
|
|
||||||
#{$prop}-top: $top;
|
|
||||||
#{$prop}-bottom: $bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add padding horizontal
|
|
||||||
// @param {string} $start
|
|
||||||
// @param {string} $end
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
@mixin padding-horizontal($start, $end: $start) {
|
|
||||||
@include property-horizontal(padding, $start, $end);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add padding for all directions
|
|
||||||
// @param {string} $top
|
|
||||||
// @param {string} $end
|
|
||||||
// @param {string} $bottom
|
|
||||||
// @param {string} $start
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
|
|
||||||
@include property(padding, $top, $end, $bottom, $start);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add margin horizontal
|
|
||||||
// @param {string} $start
|
|
||||||
// @param {string} $end
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
@mixin margin-horizontal($start, $end: $start) {
|
|
||||||
@include property-horizontal(margin, $start, $end);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add margin for all directions
|
|
||||||
// @param {string} $top
|
|
||||||
// @param {string} $end
|
|
||||||
// @param {string} $bottom
|
|
||||||
// @param {string} $start
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
|
|
||||||
@include property(margin, $top, $end, $bottom, $start);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add position horizontal
|
|
||||||
// @param {string} $start - amount to position start
|
|
||||||
// @param {string} $end - amount to left: 0; end
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
@mixin position-horizontal($start: null, $end: null) {
|
|
||||||
@if $start == $end {
|
|
||||||
@include multi-dir() {
|
|
||||||
left: $start;
|
|
||||||
right: $end;
|
|
||||||
}
|
|
||||||
} @else {
|
|
||||||
@include ltr() {
|
|
||||||
left: $start;
|
|
||||||
right: $end;
|
|
||||||
}
|
|
||||||
@include rtl() {
|
|
||||||
left: unset;
|
|
||||||
right: unset;
|
|
||||||
|
|
||||||
left: $end;
|
|
||||||
right: $start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add position for all directions
|
|
||||||
// @param {string} $top
|
|
||||||
// @param {string} $end
|
|
||||||
// @param {string} $bottom
|
|
||||||
// @param {string} $start
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
@mixin position($top: null, $end: null, $bottom: null, $start: null) {
|
|
||||||
@include position-horizontal($start, $end);
|
|
||||||
top: $top;
|
|
||||||
bottom: $bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add border for all directions
|
|
||||||
// @param {string} $top
|
|
||||||
// @param {string} $end
|
|
||||||
// @param {string} $bottom
|
|
||||||
// @param {string} $start
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
|
|
||||||
@include property(border, $top, $end, $bottom, $start);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add border radius for all directions
|
|
||||||
// @param {string} $top-start
|
|
||||||
// @param {string} $top-end
|
|
||||||
// @param {string} $bottom-end
|
|
||||||
// @param {string} $bottom-start
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
|
|
||||||
@if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
|
|
||||||
@include multi-dir() {
|
|
||||||
border-radius: $top-start;
|
|
||||||
}
|
|
||||||
} @else {
|
|
||||||
@include ltr() {
|
|
||||||
border-top-left-radius: $top-start;
|
|
||||||
border-top-right-radius: $top-end;
|
|
||||||
border-bottom-right-radius: $bottom-end;
|
|
||||||
border-bottom-left-radius: $bottom-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include rtl() {
|
|
||||||
border-top-left-radius: $top-end;
|
|
||||||
border-top-right-radius: $top-start;
|
|
||||||
border-bottom-right-radius: $bottom-start;
|
|
||||||
border-bottom-left-radius: $bottom-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add direction for all directions
|
|
||||||
// @param {string} $dir - Direction on LTR
|
|
||||||
@mixin direction($dir) {
|
|
||||||
$other-dir: null;
|
|
||||||
|
|
||||||
@if $dir == ltr {
|
|
||||||
$other-dir: rtl;
|
|
||||||
} @else {
|
|
||||||
$other-dir: ltr;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include ltr() {
|
|
||||||
direction: $dir;
|
|
||||||
}
|
|
||||||
@include rtl() {
|
|
||||||
direction: $other-dir;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add float for all directions
|
|
||||||
// @param {string} $side
|
|
||||||
// @param {string} $decorator - !important
|
|
||||||
@mixin float($side, $decorator: null) {
|
|
||||||
@if $side == start {
|
|
||||||
@include ltr() {
|
|
||||||
float: left $decorator;
|
|
||||||
}
|
|
||||||
@include rtl() {
|
|
||||||
float: right $decorator;
|
|
||||||
}
|
|
||||||
} @else if $side == end {
|
|
||||||
@include ltr() {
|
|
||||||
float: right $decorator;
|
|
||||||
}
|
|
||||||
@include rtl() {
|
|
||||||
float: left $decorator;
|
|
||||||
}
|
|
||||||
} @else {
|
|
||||||
@include multi-dir() {
|
|
||||||
float: $side $decorator;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
|
|
||||||
@if $horizontal == start or $horizontal == end {
|
|
||||||
$horizontal-ltr: null;
|
|
||||||
$horizontal-rtl: null;
|
|
||||||
@if $horizontal == start {
|
|
||||||
$horizontal-ltr: left;
|
|
||||||
$horizontal-rtl: right;
|
|
||||||
} @else {
|
|
||||||
$horizontal-ltr: right;
|
|
||||||
$horizontal-rtl: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include ltr() {
|
|
||||||
background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
|
|
||||||
}
|
|
||||||
@include rtl() {
|
|
||||||
background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
|
|
||||||
}
|
|
||||||
} @else {
|
|
||||||
@include multi-dir() {
|
|
||||||
background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin transform-origin($x-axis, $y-axis: null) {
|
|
||||||
@if $x-axis == start {
|
|
||||||
@include ltr() {
|
|
||||||
transform-origin: left $y-axis;
|
|
||||||
}
|
|
||||||
@include rtl() {
|
|
||||||
transform-origin: right $y-axis;
|
|
||||||
}
|
|
||||||
} @else if $x-axis == end {
|
|
||||||
@include ltr() {
|
|
||||||
transform-origin: right $y-axis;
|
|
||||||
}
|
|
||||||
@include rtl() {
|
|
||||||
transform-origin: left $y-axis;
|
|
||||||
}
|
|
||||||
} @else if $x-axis == left or $x-axis == right {
|
|
||||||
@include multi-dir() {
|
|
||||||
transform-origin: $x-axis $y-axis;
|
|
||||||
}
|
|
||||||
} @else {
|
|
||||||
@include ltr() {
|
|
||||||
transform-origin: $x-axis $y-axis;
|
|
||||||
}
|
|
||||||
@include rtl() {
|
|
||||||
transform-origin: calc(100% - #{$x-axis}) $y-axis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add transform for all directions
|
|
||||||
// @param {string} $transforms - comma separated list of transforms
|
|
||||||
@mixin transform($transforms...) {
|
|
||||||
$extra: null;
|
|
||||||
|
|
||||||
$x: null;
|
|
||||||
$ltr-translate: null;
|
|
||||||
$rtl-translate: null;
|
|
||||||
|
|
||||||
@each $transform in $transforms {
|
|
||||||
@if (str-index($transform, translate3d)) {
|
|
||||||
$transform: str-replace($transform, 'translate3d(');
|
|
||||||
$transform: str-replace($transform, ')');
|
|
||||||
|
|
||||||
$coordinates: str-split($transform, ',');
|
|
||||||
|
|
||||||
$x: nth($coordinates, 1);
|
|
||||||
$y: nth($coordinates, 2);
|
|
||||||
$z: nth($coordinates, 3);
|
|
||||||
|
|
||||||
$ltr-translate: translate3d($x, $y, $z);
|
|
||||||
$rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
|
|
||||||
} @else {
|
|
||||||
@if $extra == null {
|
|
||||||
$extra: $transform;
|
|
||||||
} @else {
|
|
||||||
$extra: $extra $transform;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $x == '0' or $x == null {
|
-webkit-#{$prop}-start: $start;
|
||||||
@include multi-dir() {
|
#{$prop}-inline-start: $start;
|
||||||
transform: $ltr-translate $extra;
|
-webkit-#{$prop}-end: $end;
|
||||||
}
|
#{$prop}-inline-end: $end;
|
||||||
} @else {
|
|
||||||
@include ltr() {
|
|
||||||
transform: $ltr-translate $extra;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include rtl() {
|
|
||||||
transform: $rtl-translate $extra;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add property for all directions
|
||||||
|
// @param {string} $prop
|
||||||
|
// @param {string} $top
|
||||||
|
// @param {string} $end
|
||||||
|
// @param {string} $bottom
|
||||||
|
// @param {string} $start
|
||||||
|
// @param {boolean} $content include content or use default
|
||||||
|
// ----------------------------------------------------------
|
||||||
|
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
|
||||||
|
@include property-horizontal($prop, $start, $end);
|
||||||
|
#{$prop}-top: $top;
|
||||||
|
#{$prop}-bottom: $bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add padding horizontal
|
||||||
|
// @param {string} $start
|
||||||
|
// @param {string} $end
|
||||||
|
// ----------------------------------------------------------
|
||||||
|
@mixin padding-horizontal($start, $end: $start) {
|
||||||
|
@include property-horizontal(padding, $start, $end);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add padding for all directions
|
||||||
|
// @param {string} $top
|
||||||
|
// @param {string} $end
|
||||||
|
// @param {string} $bottom
|
||||||
|
// @param {string} $start
|
||||||
|
// ----------------------------------------------------------
|
||||||
|
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
|
||||||
|
@include property(padding, $top, $end, $bottom, $start);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add margin horizontal
|
||||||
|
// @param {string} $start
|
||||||
|
// @param {string} $end
|
||||||
|
// ----------------------------------------------------------
|
||||||
|
@mixin margin-horizontal($start, $end: $start) {
|
||||||
|
@include property-horizontal(margin, $start, $end);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add margin for all directions
|
||||||
|
// @param {string} $top
|
||||||
|
// @param {string} $end
|
||||||
|
// @param {string} $bottom
|
||||||
|
// @param {string} $start
|
||||||
|
// ----------------------------------------------------------
|
||||||
|
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
|
||||||
|
@include property(margin, $top, $end, $bottom, $start);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add position horizontal
|
||||||
|
// @param {string} $start - amount to position start
|
||||||
|
// @param {string} $end - amount to left: 0; end
|
||||||
|
// ----------------------------------------------------------
|
||||||
|
@mixin position-horizontal($start: null, $end: null) {
|
||||||
|
@if $start == $end {
|
||||||
|
@include multi-dir() {
|
||||||
|
left: $start;
|
||||||
|
right: $end;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
@include ltr() {
|
||||||
|
left: $start;
|
||||||
|
right: $end;
|
||||||
|
}
|
||||||
|
@include rtl() {
|
||||||
|
left: unset;
|
||||||
|
right: unset;
|
||||||
|
|
||||||
|
left: $end;
|
||||||
|
right: $start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add position for all directions
|
||||||
|
// @param {string} $top
|
||||||
|
// @param {string} $end
|
||||||
|
// @param {string} $bottom
|
||||||
|
// @param {string} $start
|
||||||
|
// ----------------------------------------------------------
|
||||||
|
@mixin position($top: null, $end: null, $bottom: null, $start: null) {
|
||||||
|
@include position-horizontal($start, $end);
|
||||||
|
top: $top;
|
||||||
|
bottom: $bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add border for all directions
|
||||||
|
// @param {string} $top
|
||||||
|
// @param {string} $end
|
||||||
|
// @param {string} $bottom
|
||||||
|
// @param {string} $start
|
||||||
|
// ----------------------------------------------------------
|
||||||
|
@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
|
||||||
|
@include property(border, $top, $end, $bottom, $start);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add border radius for all directions
|
||||||
|
// @param {string} $top-start
|
||||||
|
// @param {string} $top-end
|
||||||
|
// @param {string} $bottom-end
|
||||||
|
// @param {string} $bottom-start
|
||||||
|
// ----------------------------------------------------------
|
||||||
|
@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
|
||||||
|
@if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
|
||||||
|
@include multi-dir() {
|
||||||
|
border-radius: $top-start;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
@include ltr() {
|
||||||
|
border-top-left-radius: $top-start;
|
||||||
|
border-top-right-radius: $top-end;
|
||||||
|
border-bottom-right-radius: $bottom-end;
|
||||||
|
border-bottom-left-radius: $bottom-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include rtl() {
|
||||||
|
border-top-left-radius: $top-end;
|
||||||
|
border-top-right-radius: $top-start;
|
||||||
|
border-bottom-right-radius: $bottom-start;
|
||||||
|
border-bottom-left-radius: $bottom-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add direction for all directions
|
||||||
|
// @param {string} $dir - Direction on LTR
|
||||||
|
@mixin direction($dir) {
|
||||||
|
$other-dir: null;
|
||||||
|
|
||||||
|
@if $dir == ltr {
|
||||||
|
$other-dir: rtl;
|
||||||
|
} @else {
|
||||||
|
$other-dir: ltr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ltr() {
|
||||||
|
direction: $dir;
|
||||||
|
}
|
||||||
|
@include rtl() {
|
||||||
|
direction: $other-dir;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add float for all directions
|
||||||
|
// @param {string} $side
|
||||||
|
// @param {string} $decorator - !important
|
||||||
|
@mixin float($side, $decorator: null) {
|
||||||
|
@if $side == start {
|
||||||
|
@include ltr() {
|
||||||
|
float: left $decorator;
|
||||||
|
}
|
||||||
|
@include rtl() {
|
||||||
|
float: right $decorator;
|
||||||
|
}
|
||||||
|
} @else if $side == end {
|
||||||
|
@include ltr() {
|
||||||
|
float: right $decorator;
|
||||||
|
}
|
||||||
|
@include rtl() {
|
||||||
|
float: left $decorator;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
@include multi-dir() {
|
||||||
|
float: $side $decorator;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
|
||||||
|
@if $horizontal == start or $horizontal == end {
|
||||||
|
$horizontal-ltr: null;
|
||||||
|
$horizontal-rtl: null;
|
||||||
|
@if $horizontal == start {
|
||||||
|
$horizontal-ltr: left;
|
||||||
|
$horizontal-rtl: right;
|
||||||
|
} @else {
|
||||||
|
$horizontal-ltr: right;
|
||||||
|
$horizontal-rtl: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include ltr() {
|
||||||
|
background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
|
||||||
|
}
|
||||||
|
@include rtl() {
|
||||||
|
background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
@include multi-dir() {
|
||||||
|
background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin transform-origin($x-axis, $y-axis: null) {
|
||||||
|
@if $x-axis == start {
|
||||||
|
@include ltr() {
|
||||||
|
transform-origin: left $y-axis;
|
||||||
|
}
|
||||||
|
@include rtl() {
|
||||||
|
transform-origin: right $y-axis;
|
||||||
|
}
|
||||||
|
} @else if $x-axis == end {
|
||||||
|
@include ltr() {
|
||||||
|
transform-origin: right $y-axis;
|
||||||
|
}
|
||||||
|
@include rtl() {
|
||||||
|
transform-origin: left $y-axis;
|
||||||
|
}
|
||||||
|
} @else if $x-axis == left or $x-axis == right {
|
||||||
|
@include multi-dir() {
|
||||||
|
transform-origin: $x-axis $y-axis;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
@include ltr() {
|
||||||
|
transform-origin: $x-axis $y-axis;
|
||||||
|
}
|
||||||
|
@include rtl() {
|
||||||
|
transform-origin: calc(100% - #{$x-axis}) $y-axis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add transform for all directions
|
||||||
|
// @param {string} $transforms - comma separated list of transforms
|
||||||
|
@mixin transform($transforms...) {
|
||||||
|
$extra: null;
|
||||||
|
|
||||||
|
$x: null;
|
||||||
|
$ltr-translate: null;
|
||||||
|
$rtl-translate: null;
|
||||||
|
|
||||||
|
@each $transform in $transforms {
|
||||||
|
@if (str-index($transform, translate3d)) {
|
||||||
|
$transform: str-replace($transform, 'translate3d(');
|
||||||
|
$transform: str-replace($transform, ')');
|
||||||
|
|
||||||
|
$coordinates: str-split($transform, ',');
|
||||||
|
|
||||||
|
$x: nth($coordinates, 1);
|
||||||
|
$y: nth($coordinates, 2);
|
||||||
|
$z: nth($coordinates, 3);
|
||||||
|
|
||||||
|
$ltr-translate: translate3d($x, $y, $z);
|
||||||
|
$rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
|
||||||
|
} @else {
|
||||||
|
@if $extra == null {
|
||||||
|
$extra: $transform;
|
||||||
|
} @else {
|
||||||
|
$extra: $extra $transform;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $x == '0' or $x == null {
|
||||||
|
@include multi-dir() {
|
||||||
|
transform: $ltr-translate $extra;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
@include ltr() {
|
||||||
|
transform: $ltr-translate $extra;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include rtl() {
|
||||||
|
transform: $rtl-translate $extra;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue