From e2405cdb11e1f8c649daac10b2fbfde9ed28395f Mon Sep 17 00:00:00 2001 From: Kenneth Benjamin Date: Sat, 12 Mar 2016 08:41:57 -0500 Subject: [PATCH 1/4] Color [disabled] .toggle-bar --- paper-toggle-button.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/paper-toggle-button.html b/paper-toggle-button.html index a6caaf0..ea6a06a 100644 --- a/paper-toggle-button.html +++ b/paper-toggle-button.html @@ -115,6 +115,8 @@ :host([disabled]) .toggle-bar { background-color: #000; opacity: 0.12; + + @apply(--paper-toggle-button-checked-bar); } :host([checked]) .toggle-button { From f7c0f894c885e494f4c493afc07ad0b929cda34f Mon Sep 17 00:00:00 2001 From: Kenneth Benjamin Date: Sat, 12 Mar 2016 08:59:13 -0500 Subject: [PATCH 2/4] Add mixins and color options for disabled button and bar --- paper-toggle-button.html | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/paper-toggle-button.html b/paper-toggle-button.html index ea6a06a..8680d7d 100644 --- a/paper-toggle-button.html +++ b/paper-toggle-button.html @@ -40,6 +40,8 @@ `--paper-toggle-button-unchecked-button` | Mixin applied to the slider button when the input is not checked | `{}` `--paper-toggle-button-checked-bar` | Mixin applied to the slider when the input is checked | `{}` `--paper-toggle-button-checked-button` | Mixin applied to the slider button when the input is checked | `{}` +`--paper-toggle-button-disabled-bar` | Mixin applied to the slider when the input is disabled | `{}` +`--paper-toggle-button-disabled-button` | Mixin applied to the slider button when the input is disabled | `{}` `--paper-toggle-button-label-color` | Label color | `--primary-text-color` `--paper-toggle-button-label-spacing` | Spacing between the label and the button | `8px` @@ -113,7 +115,14 @@ } :host([disabled]) .toggle-bar { - background-color: #000; + background-color: var(--paper-toggle-button-checked-bar-color, #000); + opacity: 0.12; + + @apply(--paper-toggle-button-disabled-bar); + } + + :host([checked][disabled]) .toggle-bar { + background-color: var(--paper-toggle-button-checked-bar-color, #000); opacity: 0.12; @apply(--paper-toggle-button-checked-bar); @@ -131,8 +140,10 @@ } :host([disabled]) .toggle-button { - background-color: #bdbdbd; + background-color: var(--paper-toggle-button-checked-button-color, #bdbdbd); opacity: 1; + + @apply(--paper-toggle-button-checked-button); } .toggle-ink { From ffd9f60c61fded5633f6ff9097bc98016fd9390e Mon Sep 17 00:00:00 2001 From: Kenneth Benjamin Date: Sat, 12 Mar 2016 09:26:20 -0500 Subject: [PATCH 3/4] Clean up styles and make sure each all scenarios accounted for --- paper-toggle-button.html | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/paper-toggle-button.html b/paper-toggle-button.html index 8680d7d..4a7ada4 100644 --- a/paper-toggle-button.html +++ b/paper-toggle-button.html @@ -40,8 +40,6 @@ `--paper-toggle-button-unchecked-button` | Mixin applied to the slider button when the input is not checked | `{}` `--paper-toggle-button-checked-bar` | Mixin applied to the slider when the input is checked | `{}` `--paper-toggle-button-checked-button` | Mixin applied to the slider button when the input is checked | `{}` -`--paper-toggle-button-disabled-bar` | Mixin applied to the slider when the input is disabled | `{}` -`--paper-toggle-button-disabled-button` | Mixin applied to the slider button when the input is disabled | `{}` `--paper-toggle-button-label-color` | Label color | `--primary-text-color` `--paper-toggle-button-label-spacing` | Spacing between the label and the button | `8px` @@ -115,15 +113,14 @@ } :host([disabled]) .toggle-bar { - background-color: var(--paper-toggle-button-checked-bar-color, #000); + background-color: var(--paper-toggle-button-unchecked-bar-color, #000); opacity: 0.12; - @apply(--paper-toggle-button-disabled-bar); + @apply(--paper-toggle-button-unchecked-bar); } :host([checked][disabled]) .toggle-bar { background-color: var(--paper-toggle-button-checked-bar-color, #000); - opacity: 0.12; @apply(--paper-toggle-button-checked-bar); } @@ -140,9 +137,15 @@ } :host([disabled]) .toggle-button { - background-color: var(--paper-toggle-button-checked-button-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); } From be8e78e81331b570e2116f91497528a4ac40a6bd Mon Sep 17 00:00:00 2001 From: Kenneth Benjamin Date: Sat, 12 Mar 2016 10:18:03 -0500 Subject: [PATCH 4/4] Allow styling when disabled. Recommit with correct CLA user. --- paper-toggle-button.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/paper-toggle-button.html b/paper-toggle-button.html index 4a7ada4..44cd65d 100644 --- a/paper-toggle-button.html +++ b/paper-toggle-button.html @@ -121,7 +121,6 @@ :host([checked][disabled]) .toggle-bar { background-color: var(--paper-toggle-button-checked-bar-color, #000); - @apply(--paper-toggle-button-checked-bar); } @@ -132,7 +131,6 @@ :host([checked]:not([disabled])) .toggle-button { background-color: var(--paper-toggle-button-checked-button-color, --primary-color); - @apply(--paper-toggle-button-checked-button); } @@ -145,7 +143,6 @@ :host([checked][disabled]) .toggle-button { background-color: var(--paper-toggle-button-checked-button-color, #bdbdbd); - @apply(--paper-toggle-button-checked-button); }