diff --git a/src/themes/ionic.functions.scss b/src/themes/ionic.functions.scss
index b25acc66fd..682ea4734b 100644
--- a/src/themes/ionic.functions.scss
+++ b/src/themes/ionic.functions.scss
@@ -2,6 +2,41 @@
 // Color Functions
 // --------------------------------------------------
 
+@function color-error($color-value, $color-name: null) {
+  $error-msg: "
+
+  The value `#{$color-value}` must be a color.
+  If you are setting the value as a map make sure
+  both the base and contrast are defined as colors.
+
+  For example:
+
+  $colors: (
+    primary:    #327eff,
+    secondary:  (base: #32db64, contrast: #000),
+  );";
+
+  // If there was a name passed it means the value doesn't exist
+  // so error that the value isn't defined
+  @if ($color-name) {
+    $error-msg: "
+
+    The map color `#{$color-name}` is not defined.
+    Please make sure the color exists in your
+    `$colors` map.
+
+    For example:
+
+    $colors: (
+      #{$color-name}:    #327eff
+    );";
+  }
+
+  @error $error-msg;
+
+  @return null;
+}
+
 @function color-brightness($color-value) {
   @if (type-of($color-value) != color) {
     @return color-error($color-value);
@@ -76,41 +111,6 @@
   @return mix($shade, $color-value, $amount);
 }
 
-@function color-error($color-value, $color-name: null) {
-  $error-msg: "
-
-  The value `#{$color-value}` must be a color.
-  If you are setting the value as a map make sure
-  both the base and contrast are defined as colors.
-
-  For example:
-
-  $colors: (
-    primary:    #327eff,
-    secondary:  (base: #32db64, contrast: #000),
-  );";
-
-  // If there was a name passed it means the value doesn't exist
-  // so error that the value isn't defined
-  @if ($color-name) {
-    $error-msg: "
-
-    The map color `#{$color-name}` is not defined.
-    Please make sure the color exists in your
-    `$colors` map.
-
-    For example:
-
-    $colors: (
-      #{$color-name}:    #327eff
-    );";
-  }
-
-  @error $error-msg;
-
-  @return null;
-}
-
 // Copy Colors Map
 // --------------------------------------------------
 
@@ -291,19 +291,3 @@
 
   @return $colors-list;
 }
-
-// Sets correct text align with support for old browsers
-// @param {string} $direction - text direction
-// @param {string} $decorator - !important
-// ----------------------------------------------------------
-@mixin text-align($direction, $decorator: null) {
-  @if $direction == start {
-    text-align: left;
-    text-align: start $decorator;
-  } @else if $direction == end {
-    text-align: right;
-    text-align: end $decorator;
-  } @else {
-    text-align: $direction $decorator;
-  }
-}
diff --git a/src/themes/ionic.mixins.scss b/src/themes/ionic.mixins.scss
index 03e5e38e61..218f1ea99a 100644
--- a/src/themes/ionic.mixins.scss
+++ b/src/themes/ionic.mixins.scss
@@ -156,3 +156,239 @@
     @content;
   }
 }
+
+$include-rtl: true !default;
+
+@mixin rtl() {
+  @if $include-rtl {
+    $root: #{&};
+    @at-root [dir="rtl"] {
+      #{$root} {
+        @content;
+      }
+    }
+  }
+}
+
+// If deprecated variable exists, use it, otherwise, use alternative
+// @param {string} $property - property to default
+// @param {string} $variable - the deprecated variable
+// ----------------------------------------------------------
+@mixin deprecated-variable($property, $variable) {
+  @if $variable == null {
+    @content;
+  } @else {
+    // TODO find variable name
+    @warn "you are using a deprecated variable";
+    #{$property}: $variable;
+  }
+}
+
+// Add padding horizontal
+// @param {string} $start - amount to pad start
+// @param {string} $end - amount to pad end
+// ----------------------------------------------------------
+@mixin padding-horizontal($start, $end: $start) {
+  @if $start != null {
+    padding-left: $start;
+  }
+
+  @if $end != null {
+    padding-right: $end;
+  }
+
+  @if $start != $end {
+    @include rtl() {
+      @if $start != null {
+        padding-right: $start;
+      } @else if $end != null {
+        padding-right: initial;
+      }
+
+      @if $end != null {
+        padding-left: $end;
+      } @else if $start != null {
+        padding-left: initial;
+      }
+    }
+  }
+}
+
+// Add padding for all sides
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
+  @if ($top == $end and $top == $bottom and $top == $start) {
+    padding: $top;
+  } @else {
+    @include padding-horizontal($start, $end);
+    padding-top: $top;
+    padding-bottom: $bottom;
+  }
+}
+
+// Add margin horizontal
+// @param {string} $start - amount to margin start
+// @param {string} $end - amount to margin end
+// ----------------------------------------------------------
+@mixin margin-horizontal($start, $end: $start) {
+  @if $start != null {
+    margin-left: $start;
+  }
+
+  @if $end != null {
+    margin-right: $end;
+  }
+
+  @if $start != $end {
+    @include rtl() {
+      @if $start != null {
+        margin-right: $start;
+      } @else if $end != null {
+        margin-right: initial;
+      }
+
+      @if $end != null {
+        margin-left: $end;
+      } @else if $start != null {
+        margin-left: initial;
+      }
+    }
+  }
+}
+
+// Add margin for all sides
+// @param {string} $top
+// @param {string} $end
+// @param {string} $bottom
+// @param {string} $start
+// ----------------------------------------------------------
+@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
+  @if ($top == $end and $top == $bottom and $top == $start) {
+    margin: $top;
+  } @else {
+    @include margin-horizontal($start, $end);
+    margin-top: $top;
+    margin-bottom: $bottom;
+  }
+}
+
+// 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 != null {
+    left: $start;
+  }
+
+  @if $end != null {
+    right: $end;
+  }
+
+  @if $start != $end {
+    @include rtl() {
+      @if $start != null {
+        right: $start;
+      } @else if $end != null {
+        right: auto;
+      }
+
+      @if $end != null {
+        left: $end;
+      } @else if $start != null {
+        left: auto;
+      }
+    }
+  }
+}
+
+// Add position for all sides
+// @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);
+  @if $top != null {
+    top: $top;
+  }
+  @if $bottom != null {
+    bottom: $bottom;
+  }
+}
+
+// Add correct border radius for ltr and rtl
+// @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) {
+    border-radius: $top-start;
+  } @else {
+    @if $top-start != null {
+      border-top-left-radius: $top-start;
+    }
+
+    @if $top-end != null {
+      border-top-right-radius: $top-end;
+    }
+
+    @if $bottom-end != null {
+      border-bottom-right-radius: $bottom-end;
+    }
+
+    @if $bottom-start != null {
+      border-bottom-left-radius: $bottom-start;
+    }
+
+    @include rtl() {
+      @if $top-start != null {
+        border-top-right-radius: $top-start;
+      } @else if $top-end != null {
+        border-top-right-radius: 0;
+      }
+
+      @if $top-end != null {
+        border-top-left-radius: $top-end;
+      } @else if $top-start != null {
+        border-top-left-radius: 0;
+      }
+
+      @if $bottom-end != null {
+        border-bottom-left-radius: $bottom-end;
+      } @else if $bottom-start != null {
+        border-bottom-left-radius: 0;
+      }
+
+      @if $bottom-start != null {
+        border-bottom-right-radius: $bottom-start;
+      } @else if $bottom-end != null {
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}
+
+
+// Sets correct text align with support for old browsers
+// @param {string} $direction - text direction
+// @param {string} $decorator - !important
+// ----------------------------------------------------------
+@mixin text-align($direction, $decorator: null) {
+  @if $direction == start {
+    text-align: left;
+    text-align: start $decorator;
+  } @else if $direction == end {
+    text-align: right;
+    text-align: end $decorator;
+  } @else {
+    text-align: $direction $decorator;
+  }
+}
\ No newline at end of file
diff --git a/src/themes/ionic.theme.default.ios.scss b/src/themes/ionic.theme.default.ios.scss
index be748e992b..af9cc1d8fa 100644
--- a/src/themes/ionic.theme.default.ios.scss
+++ b/src/themes/ionic.theme.default.ios.scss
@@ -51,9 +51,13 @@ $list-ios-activated-background-color:  #d9d9d9 !default;
 // --------------------------------------------------
 
 $item-ios-padding-top:                11px !default;
+// deprecated
 $item-ios-padding-right:              16px !default;
+$item-ios-padding-end:                $item-ios-padding-right;
 $item-ios-padding-bottom:             11px !default;
+// deprecated
 $item-ios-padding-left:               16px !default;
+$item-ios-padding-start:              $item-ios-padding-left;
 $item-ios-padding-media-top:          8px !default;
 $item-ios-padding-media-bottom:       8px !default;
 $item-ios-padding-icon-top:           9px !default;
diff --git a/src/themes/ionic.theme.default.md.scss b/src/themes/ionic.theme.default.md.scss
index f0696efc06..3a839202a7 100644
--- a/src/themes/ionic.theme.default.md.scss
+++ b/src/themes/ionic.theme.default.md.scss
@@ -50,9 +50,13 @@ $list-md-activated-background-color:  #f1f1f1 !default;
 // --------------------------------------------------
 
 $item-md-padding-top:                 13px !default;
+// deprecated
 $item-md-padding-right:               16px !default;
+$item-md-padding-end:                 $item-md-padding-right;
 $item-md-padding-bottom:              13px !default;
+// deprecated
 $item-md-padding-left:                16px !default;
+$item-md-padding-start:               $item-md-padding-left;
 $item-md-padding-media-top:           9px !default;
 $item-md-padding-media-bottom:        9px !default;
 $item-md-padding-icon-top:            11px !default;
diff --git a/src/themes/ionic.theme.default.wp.scss b/src/themes/ionic.theme.default.wp.scss
index fa2daefcb0..8cf8ac7254 100644
--- a/src/themes/ionic.theme.default.wp.scss
+++ b/src/themes/ionic.theme.default.wp.scss
@@ -51,9 +51,13 @@ $list-wp-activated-background-color:  #aaa !default;
 // --------------------------------------------------
 
 $item-wp-padding-top:                 13px !default;
+// deprecated
 $item-wp-padding-right:               16px !default;
+$item-wp-padding-end:                 $item-wp-padding-right;
 $item-wp-padding-bottom:              13px !default;
+// deprecated
 $item-wp-padding-left:                16px !default;
+$item-wp-padding-start:               $item-wp-padding-left;
 $item-wp-padding-media-top:           9px !default;
 $item-wp-padding-media-bottom:        9px !default;
 $item-wp-padding-icon-top:            11px !default;
diff --git a/src/themes/util.scss b/src/themes/util.scss
index 79ef88ed27..c0a79391d9 100755
--- a/src/themes/util.scss
+++ b/src/themes/util.scss
@@ -52,11 +52,10 @@ ion-input :focus {
 }
 
 .click-block-enabled {
+  @include position(0, 0, 0, 0);
+
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+
   z-index: $z-index-click-block;
   display: block;