fix(backdrop): remove click cursor when the backdrop is not tappable

ionic-team · Nov 20, 2016 · 06938b6 · 06938b6
1 parent 6f96ede
commit 06938b6
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/src/components/action-sheet/action-sheet-component.ts b/src/components/action-sheet/action-sheet-component.ts
@@ -14,7 +14,7 @@ import { assert } from '../../util/util';
 @Component({
   selector: 'ion-action-sheet',
   template:
-    '<ion-backdrop (click)="bdClick()"></ion-backdrop>' +
+    '<ion-backdrop (click)="bdClick()" [class.backdrop-no-tappable]="!d.enableBackdropDismiss"></ion-backdrop>' +
     '<div class="action-sheet-wrapper">' +
       '<div class="action-sheet-container">' +
         '<div class="action-sheet-group">' +

diff --git a/src/components/alert/alert-component.ts b/src/components/alert/alert-component.ts
@@ -13,7 +13,7 @@ import { GestureController, BlockerDelegate, BLOCK_ALL } from '../../gestures/ge
 @Component({
   selector: 'ion-alert',
   template:
-    '<ion-backdrop (click)="bdClick()"></ion-backdrop>' +
+    '<ion-backdrop (click)="bdClick()" [class.backdrop-no-tappable]="!d.enableBackdropDismiss"></ion-backdrop>' +
     '<div class="alert-wrapper">' +
       '<div class="alert-head">' +
         '<h2 id="{{hdrId}}" class="alert-title" *ngIf="d.title" [innerHTML]="d.title"></h2>' +

diff --git a/src/components/backdrop/backdrop.scss b/src/components/backdrop/backdrop.scss
@@ -19,3 +19,7 @@ ion-backdrop {
   opacity: .01;
   transform: translateZ(0);
 }
+
+ion-backdrop.backdrop-no-tappable {
+  cursor: auto;
+}
diff --git a/src/components/modal/modal-component.ts b/src/components/modal/modal-component.ts
@@ -12,7 +12,7 @@ import { assert } from '../../util/util';
 @Component({
   selector: 'ion-modal',
   template:
-    '<ion-backdrop (click)="_bdClick()"></ion-backdrop>' +
+    '<ion-backdrop (click)="_bdClick()" [class.backdrop-no-tappable]="!_bdDismiss"></ion-backdrop>' +
     '<div class="modal-wrapper">' +
       '<div #viewport nav-viewport></div>' +
     '</div>'