fix(rtl): add icon-start and icon-end notations

.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

demos/src/button/pages/page-one/page-one.html

@@ -39,12 +39,12 @@ <h4>Outlines</h4>
 
   <h4>Icons</h4>
 
-  <button ion-button icon-left color="dark">
+  <button ion-button icon-start color="dark">
     <ion-icon name="star"></ion-icon>
     Left Icon
   </button>
 
-  <button ion-button icon-right color="dark">
+  <button ion-button icon-end color="dark">
     Right Icon
     <ion-icon name="star"></ion-icon>
   </button>

demos/src/item-sliding/pages/page-one/page-one.html

@@ -67,7 +67,7 @@ <h2>{{login.name}}</h2>
           <ion-icon name="trash"></ion-icon>
         </button>
       </ion-item-options>
-      <ion-item-options (ionSwipe)="download(item)" icon-left>
+      <ion-item-options (ionSwipe)="download(item)" icon-start>
         <button ion-button color="dark" (click)="more(item)">
           <ion-icon name="volume-off"></ion-icon>
           Mute

demos/src/loading/pages/page-one/page-one.html

@@ -58,7 +58,7 @@
 
   <ion-toolbar>
     <ion-buttons end>
-      <button ion-button icon-right (click)="goToPage2()">
+      <button ion-button icon-end (click)="goToPage2()">
         Show Loading and Navigate
         <ion-icon name="arrow-forward"></ion-icon>
       </button>

demos/src/navbar/pages/page-one/page-one.html

@@ -55,7 +55,7 @@
     </ion-buttons>
     <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button  ion-button icon-right solid color="secondary">
+      <button  ion-button icon-end solid color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -69,7 +69,7 @@
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button  ion-button icon-right outline color="secondary">
+      <button  ion-button icon-end outline color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>

demos/src/tabs/pages/page-one/page-one.html

@@ -41,15 +41,15 @@
 
 
   <!-- Icons right of text -->
-  <ion-tabs tabs-only tabsLayout="icon-right" selectedIndex="0" color="light">
+  <ion-tabs tabs-only tabsLayout="icon-end" selectedIndex="0" color="light">
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
   </ion-tabs>
 
 
   <!-- Icons left of text -->
-  <ion-tabs tabs-only tabsLayout="icon-left" color="dark">
+  <ion-tabs tabs-only tabsLayout="icon-start" color="dark">
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>

demos/src/title/pages/page-one/page-one.html

@@ -55,7 +55,7 @@
     </ion-buttons>
     <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button  ion-button icon-right solid color="secondary">
+      <button  ion-button icon-end solid color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -69,7 +69,7 @@
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button  ion-button icon-right outline color="secondary">
+      <button  ion-button icon-end outline color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>

demos/src/toolbar/pages/page-one/page-one.html

@@ -55,7 +55,7 @@
     </ion-buttons>
     <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button  ion-button icon-right solid color="secondary">
+      <button  ion-button icon-end solid color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -69,7 +69,7 @@
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button  ion-button icon-right outline color="secondary">
+      <button  ion-button icon-end outline color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>

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-component.ts

@@ -22,13 +22,13 @@ import { ViewController } from '../../navigation/view-controller';
         '<div class="action-sheet-group">' +
           '<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
           '<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
-          '<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-left]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
+          '<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-start]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
             '<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>' +
             '{{b.text}}' +
           '</button>' +
         '</div>' +
         '<div class="action-sheet-group" *ngIf="cancelButton">' +
-          '<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-left]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
+          '<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-start]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
             '<ion-icon [name]="cancelButton.icon" *ngIf="cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
             '{{cancelButton.text}}' +
           '</button>' +

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;