fix(border): border & border-width mixins for rtl

.scss-lint.yml

@@ -71,31 +71,6 @@ linters:
       - column-count
       - column-width
 
-      # Border
-
-      - border
-      - border-top
-      - border-right
-      - border-bottom
-      - border-left
-      - border-width
-      - border-top-width
-      - border-right-width
-      - border-bottom-width
-      - border-left-width
-
-      - border-style
-      - border-top-style
-      - border-right-style
-      - border-bottom-style
-      - border-left-style
-
-      - border-color
-      - border-top-color
-      - border-right-color
-      - border-bottom-color
-      - border-left-color
-
       - outline
       - outline-color
       - outline-offset
@@ -190,24 +165,56 @@ linters:
       - contain
     disabled_properties:
       - background-position
+
       - direction
+
       - right
       - left
+
       - float
+
       - padding
       - padding-left
       - padding-right
       - padding-top
       - padding-bottom
+
       - margin
       - margin-left
       - margin-right
       - margin-top
       - margin-bottom
+
       - border-radius
       - border-top-left-radius
       - border-top-right-radius
       - border-bottom-right-radius
       - border-bottom-left-radius
+
+      - border
+      - border-top
+      - border-right
+      - border-bottom
+      - border-left
+
+      - border-style
+      - border-top-style
+      - border-right-style
+      - border-bottom-style
+      - border-left-style
+
+      - border-color
+      - border-top-color
+      - border-right-color
+      - border-bottom-color
+      - border-left-color
+
+      - border-width
+      - border-top-width
+      - border-right-width
+      - border-bottom-width
+      - border-left-width
+
       - text-align
+
       - transform-origin

scripts/demos/demos.shared.css

@@ -105,45 +105,45 @@ page-api-radio-popover ion-col {
 */
 
 .ios .popover-text-smaller {
-  border-right: 1px solid #c8c7cc;
+  @include border(null, 1px solid #c8c7cc, null, null);
 }
 
 .ios .popover-row-dots {
-  border-bottom: 1px solid #c8c7cc;
+  @include border(null, null, 1px solid #c8c7cc, null);
 }
 
 .ios .popover-dot {
-  border: 1px solid #c8c7cc;
+  @include border(1px solid #c8c7cc);
 }
 
 .hairlines .popover-text-smaller,
 .hairlines .popover-row-dots,
 .hairlines .popover-dot {
-  border-width: 0.55px;
+  @include border-width(0.55px);
 }
 
 /*
   Material Design Popover
 */
 
 .md .popover-text-smaller {
-  border-right: 1px solid #dedede;
+  @include border(null, 1px solid #dedede, null, null);
 }
 
 .md .popover-row-dots {
-  border-bottom: 1px solid #dedede;
+  @include border(null, null, 1px solid #dedede, null);
 }
 
 .md .popover-dot {
-  border: 1px solid #dedede;
+  @include border(1px solid #dedede);
 }
 
 /*
   Windows Popover
 */
 
 .wp .popover-dot {
-  border: 2px solid #ccc;
+  @include border(2px solid #ccc);
 }
 
 /*
@@ -196,12 +196,12 @@ page-api-radio-popover ion-col {
 
 @-webkit-keyframes pulse {
   50% {
-    border-width: 20px;
+    @include border-width(20px);
   }
 }
 @keyframes pulse {
   50% {
-    border-width: 20px;
+    @include border-width(20px);
   }
 }
 

scripts/e2e/e2e.shared.css

@@ -162,11 +162,11 @@ e2e-popover-basic .text-smaller {
 }
 
 .popover-ios e2e-popover-basic .text-smaller {
-  border-right: 1px solid #c8c7cc;
+  @include border(null, 1px solid #c8c7cc, null, null);
 }
 
 .popover-md e2e-popover-basic  .text-smaller {
-  border-right: 1px solid #dedede;
+  @include border(null, 1px solid #dedede, null, null);
 }
 
 e2e-popover-basic .text-larger {

scripts/gulp/tasks/demos.dev.ts

@@ -11,14 +11,14 @@ task('demos.watch', ['demos.prepare'], (done: Function) => {
     done(new Error(`Usage: gulp e2e.watch --folder modal`));
   }
 
-  serveDemo(folderInfo.componentName).then(() => {
+  serveDemo(folderInfo.componentName, folderInfo.devApp).then(() => {
     done();
   }).catch((err: Error) => {
     done(err);
   });
 });
 
-function serveDemo(folderName: any) {
+function serveDemo(folderName: any, devApp: boolean) {
 
   const ionicAngularDir = join(PROJECT_ROOT, 'src');
   const srcTestRoot = join(DEMOS_ROOT, 'src', folderName);
@@ -40,5 +40,5 @@ function serveDemo(folderName: any) {
   const appNgModulePath = join(srcTestRoot, 'app', 'app.module.ts');
   const distDir = join(distDemoRoot, 'www');
 
-  return runAppScriptsServe(folderName, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, watchConfigPath);
+  return runAppScriptsServe(folderName, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, watchConfigPath, devApp);
 }

scripts/gulp/tasks/e2e.dev.ts

@@ -13,14 +13,14 @@ task('e2e.watch', ['e2e.prepare'], (done: Function) => {
     return;
   }
 
-  serveTest(folderInfo).then(() => {
+  serveTest(folderInfo, folderInfo.devApp).then(() => {
     done();
   }).catch((err: Error) => {
     done(err);
   });
 });
 
-function serveTest(folderInfo: any) {
+function serveTest(folderInfo: any, devApp: boolean) {
 
   const ionicAngularDir = join(PROJECT_ROOT, 'src');
   const srcTestRoot = join(PROJECT_ROOT, 'src', 'components', folderInfo.componentName, 'test', folderInfo.componentTest);
@@ -47,5 +47,5 @@ function serveTest(folderInfo: any) {
   const appNgModulePath = join(dirname(appEntryPoint), 'app.module.ts');
   const distDir = join(distTestRoot, 'www');
 
-  return runAppScriptsServe(join(folderInfo.componentName, folderInfo.componentTest), appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, null);
+  return runAppScriptsServe(join(folderInfo.componentName, folderInfo.componentTest), appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, null, devApp);
 }

scripts/gulp/util.ts

@@ -190,7 +190,7 @@ export function runWebpack(pathToWebpackConfig: string, done: Function) {
   });
 }
 
-export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string, appNgModulePath: string, srcDir: string, distDir: string, tsConfig: string, ionicAngularDir: string, sassConfigPath: string, copyConfigPath: string, watchConfigPath: string) {
+export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string, appNgModulePath: string, srcDir: string, distDir: string, tsConfig: string, ionicAngularDir: string, sassConfigPath: string, copyConfigPath: string, watchConfigPath: string, devApp: boolean) {
   console.log('Running ionic-app-scripts serve with', testOrDemoName);
   const deepLinksDir = dirname(dirname(appNgModulePath));
   let scriptArgs = [
@@ -207,6 +207,9 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string
     '--copy', copyConfigPath,
     '--enableLint', 'false'
   ];
+  if (devApp) {
+    scriptArgs.push('--bonjour');
+  }
 
   if (watchConfigPath) {
     scriptArgs.push('--watch');
@@ -349,9 +352,11 @@ export function getFolderInfo() {
     componentName = folderSplit[0];
     componentTest = (folderSplit.length > 1 ? folderSplit[1] : 'basic');
   }
+  const devApp = argv.devapp !== undefined;
   return {
     componentName: componentName,
-    componentTest: componentTest
+    componentTest: componentTest,
+    devApp: devApp
   };
 }
 

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

@@ -112,8 +112,8 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
   @include padding($action-sheet-ios-title-padding);
   @include text-align($action-sheet-ios-text-align);
   @include border-radius($action-sheet-ios-title-border-radius);
+  @include border(null, null, $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color, null);
 
-  border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
   font-size: $action-sheet-ios-title-font-size;
   font-weight: $action-sheet-ios-title-font-weight;
   color: $action-sheet-ios-title-color;
@@ -122,24 +122,24 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 .action-sheet-ios .action-sheet-button {
   @include margin(0);
   @include padding($action-sheet-ios-button-padding);
+  @include border(null, null, $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color, null);
 
   min-height: $action-sheet-ios-button-min-height;
 
-  border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
   font-size: $action-sheet-ios-button-font-size;
   color: $action-sheet-ios-button-text-color;
   background: $action-sheet-ios-button-background;
 }
 
 .action-sheet-ios .action-sheet-button:last-child {
-  border-bottom-color: transparent;
+  @include border-color(null, null, transparent, null);
 }
 
 .action-sheet-ios .action-sheet-button.activated {
   @include margin(-$action-sheet-ios-button-border-width, null, null, null);
+  @include border($action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated, null, null, null);
+  @include border-color(null, null, $action-sheet-ios-button-background-activated, null);
 
-  border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
-  border-bottom-color: $action-sheet-ios-button-background-activated;
   background: $action-sheet-ios-button-background-activated;
 }
 

src/components/alert/alert-component.ts

@@ -84,6 +84,7 @@ export class AlertCmp {
   msgId: string;
   subHdrId: string;
   mode: string;
+  keyboardResizes: boolean;
   gestureBlocker: BlockerDelegate;
 
   constructor(
@@ -99,6 +100,7 @@ export class AlertCmp {
     this.gestureBlocker = gestureCtrl.createBlocker(BLOCK_ALL);
     this.d = params.data;
     this.mode = this.d.mode || config.get('mode');
+    this.keyboardResizes = config.getBoolean('keyboardResizes', false);
     _renderer.setElementClass(_elementRef.nativeElement, `alert-${this.mode}`, true);
 
     if (this.d.cssClass) {
@@ -178,7 +180,7 @@ export class AlertCmp {
     }
 
     const hasTextInput = (this.d.inputs.length && this.d.inputs.some(i => !(NON_TEXT_INPUT_REGEX.test(i.type))));
-    if (hasTextInput && this._plt.is('mobile')) {
+    if (!this.keyboardResizes && hasTextInput && this._plt.is('mobile')) {
       // this alert has a text input and it's on a mobile device so we should align
       // the alert up high because we need to leave space for the virtual keboard
       // this also helps prevent the layout getting all messed up from