From 320719b904abfa6828943f46f8bfd3aedfedc321 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Navarro?= <ivnosing@hotmail.com>
Date: Tue, 11 Jun 2019 23:56:13 +0200
Subject: [PATCH] fix(button): set opacity on the host for disabled button
 (#18509)

allows for customization of the disabled button opacity

fixes #16965
---
 core/src/components/button/button.scss           | 2 +-
 core/src/components/button/test/basic/index.html | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
index 1f7bc23d0b..9ca426ba73 100644
--- a/core/src/components/button/button.scss
+++ b/core/src/components/button/button.scss
@@ -63,12 +63,12 @@
 }
 
 :host(.button-disabled) {
+  --opacity: .5;
   pointer-events: none;
 }
 
 :host(.button-disabled) .button-native {
   cursor: default;
-  opacity: .5;
   pointer-events: none;
 }
 
diff --git a/core/src/components/button/test/basic/index.html b/core/src/components/button/test/basic/index.html
index 4ad9f443e3..1fb5ecdbab 100644
--- a/core/src/components/button/test/basic/index.html
+++ b/core/src/components/button/test/basic/index.html
@@ -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>