jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-02 14:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update hui-gauge-card.ts (#5241)

Browse Source
This commit is contained in:
Bram Kragten 2020-03-18 12:48:16 +01:00 committed by GitHub
parent 1d3aeec0de
commit 205b7451fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/panels/lovelace/cards/hui-gauge-card.ts
View File

@ -136,7 +136,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
> >
<div class="container"> <div class="container">
<div class="gauge-a"></div> <div class="gauge-a"></div>
<div class="gauge-b"></div>
<div <div
class="gauge-c" class="gauge-c"
style=${styleMap({ style=${styleMap({
@ -144,6 +143,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
"background-color": this._computeSeverity(state), "background-color": this._computeSeverity(state),
})} })}
></div> ></div>
<div class="gauge-b"></div>
</div>
<div class="gauge-data"> <div class="gauge-data">
<div id="percent"> <div id="percent">
${stateObj.state} ${stateObj.state}
@ -155,7 +156,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
${this._config.name || computeStateName(stateObj)} ${this._config.name || computeStateName(stateObj)}
</div> </div>
</div> </div>
</div>
</ha-card> </ha-card>
`; `;
} }
@ -250,9 +250,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
ha-card { ha-card {
height: calc(var(--base-unit) * 3);
position: relative;
cursor: pointer; cursor: pointer;
padding: 16px 16px 0 16px;
} }
ha-card:focus { ha-card:focus {
outline: none; outline: none;
@ -261,15 +260,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
.container { .container {
width: calc(var(--base-unit) * 4); width: calc(var(--base-unit) * 4);
height: calc(var(--base-unit) * 2); height: calc(var(--base-unit) * 2);
position: absolute;
top: calc(var(--base-unit) * 1.5);
left: 50%;
overflow: hidden; overflow: hidden;
position: relative;
text-align: center; text-align: center;
transform: translate(-50%, -50%); margin: auto;
} }
.gauge-a { .gauge-a {
z-index: 1;
position: absolute; position: absolute;
background-color: var(--primary-background-color); background-color: var(--primary-background-color);
width: calc(var(--base-unit) * 4); width: calc(var(--base-unit) * 4);
@ -279,7 +275,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
0px 0px; 0px 0px;
} }
.gauge-b { .gauge-b {
z-index: 3;
position: absolute; position: absolute;
background-color: var(--paper-card-background-color); background-color: var(--paper-card-background-color);
width: calc(var(--base-unit) * 2.5); width: calc(var(--base-unit) * 2.5);
@ -291,7 +286,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
0px 0px; 0px 0px;
} }
.gauge-c { .gauge-c {
z-index: 2;
position: absolute; position: absolute;
background-color: var(--label-badge-blue); background-color: var(--label-badge-blue);
width: calc(var(--base-unit) * 4); width: calc(var(--base-unit) * 4);
@ -307,15 +301,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
transition: all 1.3s ease-in-out; transition: all 1.3s ease-in-out;
} }
.gauge-data { .gauge-data {
z-index: 4; text-align: center;
color: var(--primary-text-color); color: var(--primary-text-color);
line-height: calc(var(--base-unit) * 0.3); line-height: calc(var(--base-unit) * 0.3);
position: absolute; width: 100%;
width: calc(var(--base-unit) * 4); position: relative;
height: var(--base-unit); top: calc(var(--base-unit) * -0.5);
top: var(--base-unit);
margin-left: auto;
margin-right: auto;
} }
.init .gauge-data { .init .gauge-data {
transition: all 1s ease-out; transition: all 1s ease-out;