Skip to content

Instantly share code, notes, and snippets.

@AdmireNL
Created November 14, 2014 15:06
Show Gist options
  • Save AdmireNL/f1557499d9e42bb05e48 to your computer and use it in GitHub Desktop.
Save AdmireNL/f1557499d9e42bb05e48 to your computer and use it in GitHub Desktop.
RTL text direction function
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
$dir: rtl;
@function shorthand($values) {
@return if($dir != rtl, $values, nth($values,1) nth($values,4) nth($values,3) nth($values,2));
}
@function opposite($value) {
$opposites: (left: right, right: left);
@return if($dir != rtl, $value, map-get($opposites, $value));
}
@mixin if-rtl {
@if $dir == rtl {
@content;
}
}
html {
direction: $dir; unicode-bidi: embed;
}
img {
margin: shorthand(11px 0 0 21px);
max-width: 100%;
}
h1 {
float: opposite(left);
}
h2 {
padding: shorthand(10px 30px 10px 50px);
}
section {
margin-#{opposite(right)}: 50px;
}
#menu li.marker {
width: 10px;
height: 10px;
@include if-rtl {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
html {
direction: rtl;
unicode-bidi: embed;
}
img {
margin: 11px 21px 0 0;
max-width: 100%;
}
h1 {
float: right;
}
h2 {
padding: 10px 50px 10px 30px;
}
section {
margin-left: 50px;
}
#menu li.marker {
width: 10px;
height: 10px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment