Last active
March 2, 2016 10:11
-
-
Save hitautodestruct/a5853768bf14ca9c043c to your computer and use it in GitHub Desktop.
mixins for supporting direction independent scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin ltr (){ | |
@content; | |
} | |
@mixin rtl (){ | |
.rtl & { @content; } | |
} | |
@mixin direction-start ($param, $value) { | |
@include ltr { #{$param}-left: $value; } | |
@include rtl { #{$param}-right: $value; } | |
} | |
@mixin direction-end ($param, $value) { | |
@include ltr { #{$param}-right: $value; } | |
@include rtl { #{$param}-left: $value; } | |
} | |
@mixin padding-start ($value) { | |
@include direction-start ('padding', $value); | |
} | |
@mixin padding-end ($value) { | |
@include direction-end ('padding', $value); | |
} | |
@mixin border-start ($value) { | |
@include direction-start ('border', $value); | |
} | |
@mixin border-end ($value) { | |
@include direction-end ('border', $value); | |
} | |
@mixin margin-start ($value) { | |
@include direction-start ('margin', $value); | |
} | |
@mixin margin-end ($value) { | |
@include direction-end ('margin', $value); | |
} | |
@mixin text-align ($value) { | |
@if ( $value = 'start' ){ | |
@include ltr { text-align: left; } | |
@include rtl { text-align: right; } | |
} @else if ( $value = 'end' ) { | |
@include ltr { text-align: right; } | |
@include rtl { text-align: left; } | |
} @else { | |
text-align: $value | |
} | |
} | |
@mixin position-start ($value) { | |
@include ltr { left: $value; } | |
@include rtl { right: $value; } | |
} | |
@mixin position-end ($value) { | |
@include ltr { right: $value; } | |
@include rtl { left: $value; } | |
} | |
// @mixin translateX ($value) { | |
// @include ltr { translateX($value); } | |
// @include rtl { translateX(-1 * $value) } | |
// } | |
/*.component { | |
@include padding-start(10px); | |
}*/ | |
// padding-left = padding-start | |
// padding-right = padding-end | |
// border-left = border-start | |
// border-right = border-end | |
// margin-right = margin-end | |
// margin-left = margin-start | |
// text-align = start/end | |
// left (position) = position-start | |
// right (position) = position-end | |
// translateX = Still need to think how to do this |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment