Skip to content
Permalink
Browse files

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

allows for customization of the disabled button opacity

fixes #16965
  • Loading branch information...
Iván Navarro authored and brandyscarney committed Jun 11, 2019
1 parent 4ad078a commit 320719b904abfa6828943f46f8bfd3aedfedc321
Showing with 6 additions and 1 deletion.
  1. +1 −1 core/src/components/button/button.scss
  2. +5 −0 core/src/components/button/test/basic/index.html
@@ -63,12 +63,12 @@
}

:host(.button-disabled) {
--opacity: .5;
pointer-events: none;
}

:host(.button-disabled) .button-native {
cursor: default;
opacity: .5;
pointer-events: none;
}

@@ -81,9 +81,14 @@
<ion-button class="activated" color="dark">Dark.activated</ion-button>
</p>

<p>
<ion-button style="--opacity: .2">Opacity: 0.2</ion-button>
</p>

<p>
<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="tertiary" style="--opacity: 1" disabled>Disabled opacity: 1</ion-button>
</p>

<p>

0 comments on commit 320719b

Please sign in to comment.
You can’t perform that action at this time.