Fix deprecated CSS (#928)
* Fix nested var * Fix deprecated @apply syntax * Hassio
This commit is contained in:
parent
0ab240c678
commit
ff658c86ff
|
@ -15,8 +15,8 @@
|
|||
display: block;
|
||||
}
|
||||
.card-actions {
|
||||
@apply(--layout);
|
||||
@apply(--layout-justified);
|
||||
@apply --layout;
|
||||
@apply --layout-justified;
|
||||
}
|
||||
.errors {
|
||||
color: var(--google-red-500);
|
||||
|
|
|
@ -21,8 +21,8 @@
|
|||
margin-bottom: 16px;
|
||||
}
|
||||
.card-actions {
|
||||
@apply(--layout);
|
||||
@apply(--layout-justified);
|
||||
@apply --layout;
|
||||
@apply --layout-justified;
|
||||
}
|
||||
</style>
|
||||
<paper-card heading='Network'>
|
||||
|
@ -54,7 +54,7 @@
|
|||
</template>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<div class="card-actions">
|
||||
<ha-call-api-button
|
||||
class='warning'
|
||||
hass='[[hass]]'
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
margin-top: 24px;
|
||||
}
|
||||
h1 {
|
||||
@apply(--paper-font-headline);
|
||||
@apply --paper-font-headline;
|
||||
margin: 0;
|
||||
}
|
||||
.error {
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
margin-top: 24px;
|
||||
}
|
||||
h1 {
|
||||
@apply(--paper-font-headline);
|
||||
@apply --paper-font-headline;
|
||||
margin: 0;
|
||||
}
|
||||
.error {
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
margin-top: 24px;
|
||||
}
|
||||
h1 {
|
||||
@apply(--paper-font-headline);
|
||||
@apply --paper-font-headline;
|
||||
margin: 0;
|
||||
}
|
||||
.error {
|
||||
|
|
|
@ -14,8 +14,8 @@
|
|||
<template>
|
||||
<style include="iron-flex ha-style">
|
||||
.validate-container {
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-center);
|
||||
@apply --layout-vertical;
|
||||
@apply --layout-center-center;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
|
|
|
@ -14,9 +14,9 @@
|
|||
<template>
|
||||
<style include="iron-flex ha-style ha-form-style">
|
||||
.entities-header {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-justified);
|
||||
@apply(--layout-center);
|
||||
@apply --layout-horizontal;
|
||||
@apply --layout-justified;
|
||||
@apply --layout-center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
@ -37,8 +37,8 @@
|
|||
}
|
||||
|
||||
.entity-row {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
@apply --layout-horizontal;
|
||||
@apply --layout-center;
|
||||
padding: 4px 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<template>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--layout-horizontal);
|
||||
@apply --layout-horizontal;
|
||||
}
|
||||
.icon-image {
|
||||
border: 1px solid grey;
|
||||
|
|
|
@ -5,10 +5,10 @@
|
|||
<template>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--layout-horizontal);
|
||||
@apply --layout-horizontal;
|
||||
}
|
||||
paper-input {
|
||||
@apply(--layout-flex);
|
||||
@apply --layout-flex;
|
||||
}
|
||||
.key {
|
||||
padding-right: 20px;
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
|
||||
.header {
|
||||
@apply(--paper-font-display1);
|
||||
@apply --paper-font-display1;
|
||||
opacity: var(--dark-primary-opacity);
|
||||
}
|
||||
|
||||
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
.intro {
|
||||
@apply(--paper-font-subhead);
|
||||
@apply --paper-font-subhead;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-right: 40px;
|
||||
|
@ -43,7 +43,7 @@
|
|||
margin-top: 20px;
|
||||
}
|
||||
.narrow .header {
|
||||
@apply(--paper-font-headline);
|
||||
@apply --paper-font-headline;
|
||||
}
|
||||
.narrow .intro {
|
||||
font-size: 14px;
|
||||
|
|
|
@ -7,13 +7,13 @@
|
|||
}
|
||||
|
||||
.device-picker {
|
||||
@apply(--layout-horizontal);
|
||||
@apply --layout-horizontal;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-placeholder {
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-center);
|
||||
@apply --layout-vertical;
|
||||
@apply --layout-center-center;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
|
@ -22,8 +22,8 @@
|
|||
}
|
||||
|
||||
.card-actions {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-justified);
|
||||
@apply --layout-horizontal;
|
||||
@apply --layout-justified;
|
||||
}
|
||||
</style>
|
||||
<paper-card>
|
||||
|
|
|
@ -2,22 +2,22 @@
|
|||
<template>
|
||||
<style>
|
||||
.form-group {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
@apply --layout-horizontal;
|
||||
@apply --layout-center;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
@apply(--layout-flex-2);
|
||||
@apply --layout-flex-2;
|
||||
}
|
||||
|
||||
.form-group .form-control {
|
||||
@apply(--layout-flex);
|
||||
@apply --layout-flex;
|
||||
}
|
||||
|
||||
.form-group.vertical {
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-start);
|
||||
@apply --layout-vertical;
|
||||
@apply --layout-start;
|
||||
}
|
||||
|
||||
paper-dropdown-menu.form-control {
|
||||
|
|
|
@ -49,8 +49,8 @@
|
|||
}
|
||||
|
||||
.device-picker {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center-center);
|
||||
@apply --layout-horizontal;
|
||||
@apply --layout-center-center;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
padding-bottom: 24px;
|
||||
|
|
|
@ -20,8 +20,8 @@
|
|||
}
|
||||
|
||||
.device-picker {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center-center);
|
||||
@apply --layout-horizontal;
|
||||
@apply --layout-center-center;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
padding-bottom: 24px;
|
||||
|
|
|
@ -21,8 +21,8 @@
|
|||
}
|
||||
|
||||
.device-picker {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center-center);
|
||||
@apply --layout-horizontal;
|
||||
@apply --layout-center-center;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
padding-bottom: 24px;
|
||||
|
|
|
@ -21,8 +21,8 @@
|
|||
}
|
||||
|
||||
.device-picker {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center-center);
|
||||
@apply --layout-horizontal;
|
||||
@apply --layout-center-center;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
padding-bottom: 24px;
|
||||
|
|
|
@ -20,8 +20,8 @@
|
|||
}
|
||||
|
||||
.device-picker {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center-center);
|
||||
@apply --layout-horizontal;
|
||||
@apply --layout-center-center;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
padding-bottom: 24px;
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
.entry {
|
||||
@apply(--paper-font-body1);
|
||||
@apply --paper-font-body1;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
line-height: 2.5em;
|
||||
font-size: 1.5em;
|
||||
border-radius: 50%;
|
||||
border: 0.1em solid var(--ha-marker-color, --default-primary-color);
|
||||
border: 0.1em solid var(--ha-marker-color, var(--default-primary-color));
|
||||
color: rgb(76, 76, 76);
|
||||
background-color: white;
|
||||
}
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
border-radius: 2px;
|
||||
}
|
||||
.caption {
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply --paper-font-common-nowrap;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
padding: 4px 0;
|
||||
}
|
||||
.header {
|
||||
@apply(--paper-font-headline);
|
||||
@apply --paper-font-headline;
|
||||
/* overwriting line-height +8 because entity-toggle can be 40px height,
|
||||
compensating this with reduced padding */
|
||||
line-height: 40px;
|
||||
|
@ -26,7 +26,7 @@
|
|||
padding: 4px 0 12px;
|
||||
}
|
||||
.header .name {
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply --paper-font-common-nowrap;
|
||||
}
|
||||
ha-entity-toggle {
|
||||
margin-left: 16px;
|
||||
|
|
|
@ -15,11 +15,11 @@
|
|||
width: 100%;
|
||||
}
|
||||
.header {
|
||||
@apply(--paper-font-headline);
|
||||
@apply --paper-font-headline;
|
||||
line-height: 40px;
|
||||
color: var(--primary-text-color);
|
||||
padding: 20px 16px 12px;
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply --paper-font-common-nowrap;
|
||||
}
|
||||
paper-card[dialog] .header {
|
||||
padding-top: 0;
|
||||
|
|
|
@ -73,7 +73,7 @@
|
|||
}
|
||||
|
||||
.banner > .caption {
|
||||
@apply(--paper-font-caption);
|
||||
@apply --paper-font-caption;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
@ -96,7 +96,7 @@
|
|||
}
|
||||
|
||||
.banner > .caption .title {
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply --paper-font-common-nowrap;
|
||||
font-size: 1.2em;
|
||||
margin: 8px 0 4px;
|
||||
}
|
||||
|
@ -109,7 +109,7 @@
|
|||
|
||||
.controls {
|
||||
position: relative;
|
||||
@apply(--paper-font-body1);
|
||||
@apply --paper-font-body1;
|
||||
padding: 8px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
<template>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--paper-font-body1);
|
||||
@apply --paper-font-body1;
|
||||
}
|
||||
ha-markdown {
|
||||
display: block;
|
||||
|
|
|
@ -31,8 +31,8 @@
|
|||
}
|
||||
|
||||
.progress {
|
||||
@apply(--layout);
|
||||
@apply(--layout-center-center);
|
||||
@apply --layout;
|
||||
@apply --layout-center-center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
}
|
||||
|
||||
.grey {
|
||||
--ha-label-badge-color: var(--label-badge-grey, --paper-grey-500);
|
||||
--ha-label-badge-color: var(--label-badge-grey, var(--paper-grey-500));
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<template>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--paper-font-body1);
|
||||
@apply --paper-font-body1;
|
||||
min-width: 150px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
|
||||
.name {
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply --paper-font-common-nowrap;
|
||||
color: var(--primary-text-color);
|
||||
line-height: 40px;
|
||||
}
|
||||
|
@ -32,7 +32,7 @@
|
|||
}
|
||||
|
||||
.time-ago, ::slotted(*) {
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply --paper-font-common-nowrap;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,8 +12,8 @@
|
|||
background-color: var(--paper-card-background-color, white);
|
||||
}
|
||||
.header {
|
||||
@apply(--paper-font-headline);
|
||||
@apply(--paper-font-common-expensive-kerning);
|
||||
@apply --paper-font-headline;
|
||||
@apply --paper-font-common-expensive-kerning;
|
||||
opacity: var(--dark-primary-opacity);
|
||||
padding: 24px 16px 16px;
|
||||
text-transform: capitalize;
|
||||
|
|
|
@ -10,15 +10,15 @@
|
|||
<style>
|
||||
/* local DOM styles go here */
|
||||
:host {
|
||||
@apply(--layout-flex);
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-justified);
|
||||
@apply --layout-flex;
|
||||
@apply --layout-horizontal;
|
||||
@apply --layout-justified;
|
||||
}
|
||||
.in-flux#target_temperature {
|
||||
color: var(--google-red-500);
|
||||
}
|
||||
#target_temperature {
|
||||
@apply(--layout-self-center);
|
||||
@apply --layout-self-center;
|
||||
font-size: 200%;
|
||||
}
|
||||
.control-buttons {
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
line-height: var(--ha-label-badge-size, 2.5em);
|
||||
font-size: var(--ha-label-badge-font-size, 1.5em);
|
||||
border-radius: 50%;
|
||||
border: 0.1em solid var(--ha-label-badge-color, --primary-color);
|
||||
border: 0.1em solid var(--ha-label-badge-color, var(--primary-color));
|
||||
color: var(--label-badge-text-color, rgb(76, 76, 76));
|
||||
|
||||
white-space: nowrap;
|
||||
|
@ -47,7 +47,7 @@
|
|||
.label-badge .label span {
|
||||
max-width: 68%; /* Parent width minus two times 16% padding */
|
||||
display: inline-block;
|
||||
background-color: var(--ha-label-badge-color, --primary-color);
|
||||
background-color: var(--ha-label-badge-color, var(--primary-color));
|
||||
color: white;
|
||||
border-radius: 1em;
|
||||
padding: 8% 16%;
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
border-right: 1px solid var(--divider-color);
|
||||
background: var(--paper-listbox-background-color,var(--primary-background-color));
|
||||
background: var(--paper-listbox-background-color, var(--primary-background-color));
|
||||
}
|
||||
|
||||
app-toolbar {
|
||||
|
@ -64,7 +64,7 @@
|
|||
}
|
||||
|
||||
paper-icon-item .item-text {
|
||||
@apply(--sidebar-text);
|
||||
@apply --sidebar-text;
|
||||
}
|
||||
paper-icon-item.iron-selected .item-text {
|
||||
opacity: 1;
|
||||
|
@ -82,11 +82,11 @@
|
|||
}
|
||||
|
||||
.setting {
|
||||
@apply(--sidebar-text);
|
||||
@apply --sidebar-text;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
@apply(--sidebar-text);
|
||||
@apply --sidebar-text;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--paper-font-body1);
|
||||
@apply --paper-font-body1;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
|
|
@ -82,7 +82,7 @@
|
|||
<template>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--paper-font-body1);
|
||||
@apply --paper-font-body1;
|
||||
}
|
||||
|
||||
app-header-layout, ha-app-layout {
|
||||
|
@ -101,7 +101,7 @@
|
|||
}
|
||||
|
||||
h1 {
|
||||
@apply(--paper-font-title);
|
||||
@apply --paper-font-title;
|
||||
}
|
||||
|
||||
button.link {
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--paper-font-body1);
|
||||
@apply --paper-font-body1;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
<style>
|
||||
.state {
|
||||
@apply(--paper-font-body1);
|
||||
@apply --paper-font-body1;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
margin-left: 16px;
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
margin-left: auto;
|
||||
}
|
||||
.state {
|
||||
@apply(--paper-font-body1);
|
||||
@apply --paper-font-body1;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
text-align: right;
|
||||
|
|
|
@ -13,14 +13,14 @@
|
|||
}
|
||||
|
||||
.state {
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply(--paper-font-body1);
|
||||
@apply --paper-font-common-nowrap;
|
||||
@apply --paper-font-body1;
|
||||
margin-left: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.main-text {
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply --paper-font-common-nowrap;
|
||||
color: var(--primary-text-color);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
.secondary-text {
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply --paper-font-common-nowrap;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
<style>
|
||||
.state {
|
||||
@apply(--paper-font-body1);
|
||||
@apply --paper-font-body1;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
margin-left: 16px;
|
||||
|
|
|
@ -9,8 +9,8 @@
|
|||
display: block;
|
||||
}
|
||||
.name {
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply(--paper-font-body1);
|
||||
@apply --paper-font-common-nowrap;
|
||||
@apply --paper-font-body1;
|
||||
color: var(--primary-color);
|
||||
|
||||
text-transform: capitalize;
|
||||
|
|
Loading…
Reference in New Issue