Change styling of active mode button and make it more skinnable

nervetattoo · May 23, 2019 · bde17ac · bde17ac
1 parent a1d0727
commit bde17ac
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -103,14 +103,16 @@ cards:
 
 The card uses the following CSS variables:
 
-| Var name               | Default value                           | Usage                                                |
-| ---------------------- | --------------------------------------- | ---------------------------------------------------- |
-| --st-font-size-xl      | var(--paper-font-display3\_-_font-size) | Used for target temperature                          |
-| --st-font-size-l       | var(--paper-font-display2\_-_font-size) | Unused at the moment                                 |
-| --st-font-size-m       | var(--paper-font-title\_-_font-size)    | Used for target temperature unit                     |
-| --st-font-size-title   | var(--ha-card-header-font-size, 24      | Font size for card heading                           |
-| --st-font-size-sensors | var(--paper-font-subhead\_-_font-siz    | Font size for sensors                                |
-| --st-spacing           | 4px                                     | Base unit for spacing. Used in multiples many places |
+| Var name                    | Default value                           | Usage                                                |
+| --------------------------- | --------------------------------------- | ---------------------------------------------------- |
+| --st-font-size-xl           | var(--paper-font-display3\_-_font-size) | Used for target temperature                          |
+| --st-font-size-l            | var(--paper-font-display2\_-_font-size) | Unused at the moment                                 |
+| --st-font-size-m            | var(--paper-font-title\_-_font-size)    | Used for target temperature unit                     |
+| --st-font-size-title        | var(--ha-card-header-font-size, 24      | Font size for card heading                           |
+| --st-font-size-sensors      | var(--paper-font-subhead\_-_font-size)  | Font size for sensors                                |
+| --st-spacing                | 4px                                     | Base unit for spacing. Used in multiples many places |
+| --st-mode-active-background | var(--primary-color)                    | Background color for active mode button              |
+| --st-mode-active-color      | var(--text-primary-color, #fff)         | Text color for active mode button                    |
 
 ### Example tweaking with card-modder
 

diff --git a/src/index.js b/src/index.js
@@ -374,8 +374,8 @@ class SimpleThermostat extends LitElement {
         ${entries.map(
           ([mode, config]) => html`
             <mwc-button
-              ?disabled=${mode === currentMode}
-              ?outlined=${mode === currentMode}
+              ?unelevated=${mode === currentMode}
+              class="${mode === currentMode ? 'active' : ''}"
               ?dense=${true}
               @click=${() => this.setMode(mode)}
             >

diff --git a/src/styles.js b/src/styles.js
@@ -9,6 +9,8 @@ export default css`
     --st-font-size-title: var(--ha-card-header-font-size, 24px);
     --st-font-size-sensors: var(--paper-font-subhead_-_font-size, 16px);
     --st-spacing: 4px;
+    --st-mode-active-background: var(--primary-color);
+    --st-mode-active-color: var(--text-primary-color, #fff);
   }
 
   ha-card {
@@ -116,4 +118,9 @@ export default css`
   .mode__icon {
     padding-right: var(--st-spacing);
   }
+
+  mwc-button.active {
+    background: var(--st-mode-active-background);
+    color: var(--st-mode-active-color);
+  }
 `