javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): set opacity on the host for disabled button (#18509)

Browse Source 
allows for customization of the disabled button opacity

fixes #16965
This commit is contained in:
Iván Navarro
2019-06-11 23:56:13 +02:00
committed by Brandy Carney
parent 4ad078a975
commit 320719b904
2 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/button/button.scss
View File

@ -63,12 +63,12 @@
} }
:host(.button-disabled) { :host(.button-disabled) {
--opacity: .5;
pointer-events: none; pointer-events: none;
} }
:host(.button-disabled) .button-native { :host(.button-disabled) .button-native {
cursor: default; cursor: default;
opacity: .5;
pointer-events: none; pointer-events: none;
} }

5
core/src/components/button/test/basic/index.html
View File

@ -81,9 +81,14 @@
<ion-button class="activated" color="dark">Dark.activated</ion-button> <ion-button class="activated" color="dark">Dark.activated</ion-button>
</p> </p>
<p>
<ion-button style="--opacity: .2">Opacity: 0.2</ion-button>
</p>
<p> <p>
<ion-button expand="block" id="disabledButton" disabled onclick="clickedButton(event)">Button Disabled</ion-button> <ion-button expand="block" id="disabledButton" disabled onclick="clickedButton(event)">Button Disabled</ion-button>
<ion-button expand="block" color="secondary" disabled>Secondary Disabled</ion-button> <ion-button expand="block" color="secondary" disabled>Secondary Disabled</ion-button>
<ion-button expand="block" color="tertiary" style="--opacity: 1" disabled>Disabled opacity: 1</ion-button>
</p> </p>
<p> <p>