From e62370636c9d2eacf3405d9cf3b4f6618def32b8 Mon Sep 17 00:00:00 2001 From: Pranav Pandey Date: Fri, 18 Oct 2019 14:51:37 +0530 Subject: [PATCH 1/2] Add style support for disabled state --- paper-toggle-button.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/paper-toggle-button.js b/paper-toggle-button.js index a75462f..eefc436 100644 --- a/paper-toggle-button.js +++ b/paper-toggle-button.js @@ -129,8 +129,16 @@ Polymer({ } :host([disabled]) .toggle-bar { - background-color: #000; + background-color: var(--paper-toggle-button-unchecked-bar-color, #000); opacity: 0.12; + + @apply(--paper-toggle-button-unchecked-bar); + } + + :host([checked][disabled]) .toggle-bar { + background-color: var(--paper-toggle-button-checked-bar-color, #000); + + @apply(--paper-toggle-button-checked-bar); } :host([checked]) .toggle-button { @@ -152,8 +160,16 @@ Polymer({ } :host([disabled]) .toggle-button { - background-color: #bdbdbd; + background-color: var(--paper-toggle-button-unchecked-button-color, #bdbdbd); opacity: 1; + + @apply(--paper-toggle-button-unchecked-button); + } + + :host([checked][disabled]) .toggle-button { + background-color: var(--paper-toggle-button-checked-button-color, #bdbdbd); + + @apply(--paper-toggle-button-checked-button); } .toggle-ink { From cc7d21ad2c92187fe1acc8e5ba71139f5fa2c8e1 Mon Sep 17 00:00:00 2001 From: Pranav Pandey Date: Fri, 18 Oct 2019 14:53:23 +0530 Subject: [PATCH 2/2] Reduce opacity for toggle button to 0.5 Make toggle button distinguishable in disabled state. --- paper-toggle-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/paper-toggle-button.js b/paper-toggle-button.js index eefc436..b339d81 100644 --- a/paper-toggle-button.js +++ b/paper-toggle-button.js @@ -161,7 +161,7 @@ Polymer({ :host([disabled]) .toggle-button { background-color: var(--paper-toggle-button-unchecked-button-color, #bdbdbd); - opacity: 1; + opacity: 0.5; @apply(--paper-toggle-button-unchecked-button); }