feat(rtl): add rtl margin, padding, position and border-radius

.scss-lint.yml

@@ -37,13 +37,10 @@ linters:
 
       - position
       - top
-      - right
       - bottom
-      - left
       - z-index
       - display
       - overflow
-      - float
       - clear
       -
       - flex
@@ -59,16 +56,10 @@ linters:
       - justify-content
       - order
       -
-      - margin
       - margin-top
-      - margin-right
       - margin-bottom
-      - margin-left
-      - padding
       - padding-top
-      - padding-right
       - padding-bottom
-      - padding-left
       -
       - width
       - min-width
@@ -104,12 +95,6 @@ linters:
       - border-bottom-style
       - border-left-style
 
-      - border-radius
-      - border-top-left-radius
-      - border-top-right-radius
-      - border-bottom-left-radius
-      - border-bottom-right-radius
-
       - border-color
       - border-top-color
       - border-right-color
@@ -135,7 +120,6 @@ linters:
       - letter-spacing
       - line-height
       - list-style
-      - text-align
       - text-decoration
       - text-indent
       - text-overflow
@@ -207,3 +191,24 @@ linters:
   PropertySpelling:
     extra_properties:
       - contain
+    disabled_properties:
+      - right
+      - left
+
+      - float
+
+      - padding
+      - padding-left
+      - padding-right
+
+      - margin
+      - margin-left
+      - margin-right
+
+      - border-radius
+      - border-top-left-radius
+      - border-top-right-radius
+      - border-bottom-right-radius
+      - border-bottom-left-radius
+
+      - text-align

scripts/gulp/tasks/lint.ts

@@ -17,7 +17,8 @@ task('lint.sass', function() {
   return src([
       'src/**/*.scss',
       '!src/components/*/test/**/*',
-      '!src/util/test/*'
+      '!src/util/test/*',
+      '!src/themes/normalize.scss',
     ])
     .pipe(scsslint())
     .pipe(scsslint.failReporter());

src/components/action-sheet/action-sheet.ios.scss

@@ -6,8 +6,20 @@
 /// @prop - Text align of the action sheet
 $action-sheet-ios-text-align:                           center !default;
 
-/// @prop - Padding of the action sheet
-$action-sheet-ios-padding:                              0 10px !default;
+// deprecated
+$action-sheet-ios-padding:                              null !default;
+
+/// @prop - Padding top of the action sheet
+$action-sheet-ios-padding-top:                          0 !default;
+
+/// @prop - Padding end of the action sheet
+$action-sheet-ios-padding-end:                          10px !default;
+
+/// @prop - Padding bottom of the action sheet
+$action-sheet-ios-padding-bottom:                       $action-sheet-ios-padding-top !default;
+
+/// @prop - Padding start of the action sheet
+$action-sheet-ios-padding-start:                        $action-sheet-ios-padding-end !default;
 
 /// @prop - Bottom margin of the action sheet button group
 $action-sheet-ios-group-margin-bottom:                  10px !default;
@@ -78,15 +90,18 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 }
 
 .action-sheet-ios .action-sheet-container {
-  padding: $action-sheet-ios-padding;
+  @include deprecated-variable(padding, $action-sheet-ios-padding) {
+    @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start);
+  }
 }
 
 .action-sheet-ios .action-sheet-group {
+  @include border-radius($action-sheet-ios-border-radius);
+
   overflow: hidden;
 
   margin-bottom: $action-sheet-ios-group-margin-bottom - 2;
 
-  border-radius: $action-sheet-ios-border-radius;
   background: $action-sheet-ios-background;
 }
 
@@ -95,20 +110,19 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 }
 
 .action-sheet-ios .action-sheet-title {
+  @include padding($action-sheet-ios-title-padding);
   @include text-align($action-sheet-ios-text-align);
-
-  padding: $action-sheet-ios-title-padding;
+  @include border-radius($action-sheet-ios-title-border-radius);
 
   border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
-  border-radius: $action-sheet-ios-title-border-radius;
   font-size: $action-sheet-ios-title-font-size;
   font-weight: $action-sheet-ios-title-font-weight;
   color: $action-sheet-ios-title-color;
 }
 
 .action-sheet-ios .action-sheet-button {
-  margin: 0;
-  padding: $action-sheet-ios-button-padding;
+  @include margin(0);
+  @include padding($action-sheet-ios-button-padding);
 
   min-height: $action-sheet-ios-button-min-height;
 

src/components/action-sheet/action-sheet.md.scss

@@ -18,8 +18,20 @@ $action-sheet-md-title-color:                           #757575 !default;
 /// @prop - Font size of the action sheet title
 $action-sheet-md-title-font-size:                       1.6rem !default;
 
-/// @prop - Padding of the action sheet title
-$action-sheet-md-title-padding:                         11px 16px 17px !default;
+// deprecated
+$action-sheet-md-title-padding:                         null !default;
+
+/// @prop - Padding top of the action sheet title
+$action-sheet-md-title-padding-top:                     11px !default;
+
+/// @prop - Padding end of the action sheet title
+$action-sheet-md-title-padding-end:                     16px !default;
+
+/// @prop - Padding bottom of the action sheet title
+$action-sheet-md-title-padding-bottom:                  17px !default;
+
+/// @prop - Padding start of the action sheet title
+$action-sheet-md-title-padding-start:                   $action-sheet-md-title-padding-end !default;
 
 /// @prop - Minimum height of the action sheet button
 $action-sheet-md-button-min-height:                     4.8rem !default;
@@ -30,8 +42,20 @@ $action-sheet-md-button-text-color:                     #222 !default;
 /// @prop - Font size of the action sheet button
 $action-sheet-md-button-font-size:                      1.6rem !default;
 
-/// @prop - Padding of the action sheet button
-$action-sheet-md-button-padding:                        0 16px !default;
+// deprecated
+$action-sheet-md-button-padding:                        null !default;
+
+/// @prop - Padding top of the action sheet button
+$action-sheet-md-button-padding-top:                    0 !default;
+
+/// @prop - Padding end of the action sheet button
+$action-sheet-md-button-padding-end:                    16px !default;
+
+/// @prop - Padding bottom of the action sheet button
+$action-sheet-md-button-padding-bottom:                 $action-sheet-md-button-padding-top !default;
+
+/// @prop - Padding start of the action sheet button
+$action-sheet-md-button-padding-start:                  $action-sheet-md-button-padding-end !default;
 
 /// @prop - Background color of the action sheet button
 $action-sheet-md-button-background:                     transparent !default;
@@ -51,22 +75,36 @@ $action-sheet-md-icon-text-align:                       center !default;
 /// @prop - Vertical align of the icon in the action sheet button
 $action-sheet-md-icon-vertical-align:                   middle !default;
 
-/// @prop - Margin of the icon in the action sheet button
-$action-sheet-md-icon-margin:                           0 32px 0 0 !default;
+// deprecated
+$action-sheet-md-icon-margin:                           null !default;
+
+/// @prop - Margin top of the icon in the action sheet button
+$action-sheet-md-icon-margin-top:                       0 !default;
+
+/// @prop - Margin end of the icon in the action sheet button
+$action-sheet-md-icon-margin-end:                       32px !default;
+
+/// @prop - Margin bottom of the icon in the action sheet button
+$action-sheet-md-icon-margin-bottom:                    0 !default;
+
+/// @prop - Margin start of the icon in the action sheet button
+$action-sheet-md-icon-margin-start:                     0 !default;
 
 .action-sheet-md .action-sheet-container {
-  padding: .8rem 0;
+  @include padding(.8rem, 0);
 
   background: $action-sheet-md-background;
 }
 
 .action-sheet-md .action-sheet-title {
   @include text-align($action-sheet-md-text-align);
 
-  padding: $action-sheet-md-title-padding;
-
   font-size: $action-sheet-md-title-font-size;
   color: $action-sheet-md-title-color;
+
+  @include deprecated-variable(padding, $action-sheet-md-title-padding) {
+    @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start);
+  }
 }
 
 .action-sheet-md .action-sheet-button {
@@ -75,29 +113,34 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
   position: relative;
   overflow: hidden;
 
-  padding: $action-sheet-md-button-padding;
-
   min-height: $action-sheet-md-button-min-height;
 
   font-size: $action-sheet-md-button-font-size;
   color: $action-sheet-md-button-text-color;
   background: $action-sheet-md-button-background;
+
+
+  @include deprecated-variable(padding, $action-sheet-md-button-padding) {
+    @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start);
+  }
 }
 
 .action-sheet-md .action-sheet-button.activated {
   background: $action-sheet-md-button-background-activated;
 }
 
 .action-sheet-md .action-sheet-icon {
+  @include padding(0);
   @include text-align($action-sheet-md-icon-text-align);
 
-  margin: $action-sheet-md-icon-margin;
-  padding: 0;
-
   width: $action-sheet-md-icon-width;
 
   font-size: $action-sheet-md-icon-font-size;
   vertical-align: $action-sheet-md-icon-vertical-align;
+
+  @include deprecated-variable(margin, $action-sheet-md-icon-margin) {
+    @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
+  }
 }
 
 .action-sheet-md .action-sheet-group {

src/components/action-sheet/action-sheet.scss

@@ -11,9 +11,9 @@ $action-sheet-max-width:                         500px !default;
 
 
 ion-action-sheet {
+  @include position(0, null, null, 0);
+
   position: absolute;
-  top: 0;
-  left: 0;
   z-index: $z-index-overlay;
   display: block;
 
@@ -22,15 +22,13 @@ ion-action-sheet {
 }
 
 .action-sheet-wrapper {
+  @include position(null, 0, 0, 0);
+  @include margin(auto);
+
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
   z-index: $z-index-overlay-wrapper;
   display: block;
 
-  margin: auto;
-
   width: $action-sheet-width;
   max-width: $action-sheet-max-width;