Skip to content

Instantly share code, notes, and snippets.

@alexkuc
Last active Jun 29, 2022
Embed
What would you like to do?
RTL utility mixin
@mixin ltr {
html[dir='ltr'] &,
html:not([dir]) & {
@content;
}
}
@mixin rtl {
html[dir='rtl'] & {
@content;
}
}
@mixin left($val) {
@include ltr {
left: $val;
}
@include rtl {
right: $val;
}
}
@mixin right($val) {
@include ltr {
right: $val;
}
@include rtl {
left: $val;
}
}
@mixin text-align($val) {
$rtl: (
'left': right,
'right': left,
);
@include ltr {
text-align: $val;
}
@include rtl {
text-align: map-get($rtl, $val);
}
}
@mixin padding-left($val) {
@include ltr {
padding-left: $val;
}
@include rtl {
padding-right: $val;
}
}
@mixin padding-right($val) {
@include ltr {
padding-right: $val;
}
@include rtl {
padding-left: $val;
}
}
@mixin margin-left($val) {
@include ltr {
margin-left: $val;
}
@include rtl {
margin-right: $val;
}
}
@mixin margin-right($val) {
@include ltr {
margin-right: $val;
}
@include rtl {
margin-left: $val;
}
}
@mixin border-right($val) {
@include ltr {
border-right: $val;
}
@include rtl {
border-left: $val;
}
}
@mixin border-left($val) {
@include ltr {
border-left: $val;
}
@include rtl {
border-right: $val;
}
}
@mixin border-top-left-radius($val) {
@include ltr {
border-top-left-radius: $val;
}
@include rtl {
border-top-right-radius: $val;
}
}
@mixin border-top-right-radius($val) {
@include ltr {
border-top-right-radius: $val;
}
@include rtl {
border-top-left-radius: $val;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment