Fix deprecated CSS (#928)

* Fix nested var

* Fix deprecated @apply syntax

* Hassio

hassio/addon-view/hassio-addon-config.html

@@ -15,8 +15,8 @@
         display: block;
       }
       .card-actions {
-        @apply(--layout);
+        @apply --layout;
-        @apply(--layout-justified);
+        @apply --layout-justified;
       }
       .errors {
         color: var(--google-red-500);

hassio/addon-view/hassio-addon-network.html

@@ -21,8 +21,8 @@
         margin-bottom: 16px;
       }
       .card-actions {
-        @apply(--layout);
+        @apply --layout;
-        @apply(--layout-justified);
+        @apply --layout-justified;
       }
     </style>
     <paper-card heading='Network'>

panels/config/cloud/ha-config-cloud-forgot-password.html

@@ -22,7 +22,7 @@
         margin-top: 24px;
       }
       h1 {
-        @apply(--paper-font-headline);
+        @apply --paper-font-headline;
         margin: 0;
       }
       .error {

panels/config/cloud/ha-config-cloud-login.html

@@ -27,7 +27,7 @@
         margin-top: 24px;
       }
       h1 {
-        @apply(--paper-font-headline);
+        @apply --paper-font-headline;
         margin: 0;
       }
       .error {

panels/config/cloud/ha-config-cloud-register.html

@@ -24,7 +24,7 @@
         margin-top: 24px;
       }
       h1 {
-        @apply(--paper-font-headline);
+        @apply --paper-font-headline;
         margin: 0;
       }
       .error {

panels/config/core/ha-config-section-core.html

@@ -14,8 +14,8 @@
   <template>
     <style include="iron-flex ha-style">
       .validate-container {
-        @apply(--layout-vertical);
+        @apply --layout-vertical;
-        @apply(--layout-center-center);
+        @apply --layout-center-center;
         height: 140px;
       }
 

panels/config/core/ha-form-group.html

@@ -14,9 +14,9 @@
   <template>
     <style include="iron-flex ha-style ha-form-style">
       .entities-header {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
-        @apply(--layout-justified);
+        @apply --layout-justified;
-        @apply(--layout-center);
+        @apply --layout-center;
         width: 100%;
       }
 
@@ -37,8 +37,8 @@
       }
 
       .entity-row {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
-        @apply(--layout-center);
+        @apply --layout-center;
         padding: 4px 0;
         border-top: 1px solid rgba(0, 0, 0, .12);
       }

panels/config/customize/types/ha-customize-icon.html

@@ -6,7 +6,7 @@
   <template>
     <style>
       :host {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
       }
       .icon-image {
         border: 1px solid grey;

panels/config/customize/types/ha-customize-key-value.html

@@ -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;

panels/config/ha-config-section.html

@@ -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;

panels/config/ha-entity-config.html

@@ -7,13 +7,13 @@
       }
 
       .device-picker {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
         padding-bottom: 24px;
       }
 
       .form-placeholder {
-        @apply(--layout-vertical);
+        @apply --layout-vertical;
-        @apply(--layout-center-center);
+        @apply --layout-center-center;
         height: 96px;
       }
 
@@ -22,8 +22,8 @@
       }
 
       .card-actions {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
-        @apply(--layout-justified);
+        @apply --layout-justified;
       }
     </style>
     <paper-card>

panels/config/ha-form-style.html

@@ -2,22 +2,22 @@
   <template>
     <style>
       .form-group {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
-        @apply(--layout-center);
+        @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-vertical;
-        @apply(--layout-start);
+        @apply --layout-start;
       }
 
       paper-dropdown-menu.form-control {

panels/config/zwave/ha-config-zwave.html

@@ -49,8 +49,8 @@
       }
 
       .device-picker {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
-        @apply(--layout-center-center);
+        @apply --layout-center-center;
         padding-left: 24px;
         padding-right: 24px;
         padding-bottom: 24px;

panels/config/zwave/zwave-groups.html

@@ -20,8 +20,8 @@
       }
 
       .device-picker {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
-        @apply(--layout-center-center);
+        @apply --layout-center-center;
         padding-left: 24px;
         padding-right: 24px;
         padding-bottom: 24px;

panels/config/zwave/zwave-node-config.html

@@ -21,8 +21,8 @@
       }
 
       .device-picker {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
-        @apply(--layout-center-center);
+        @apply --layout-center-center;
         padding-left: 24px;
         padding-right: 24px;
         padding-bottom: 24px;

panels/config/zwave/zwave-usercodes.html

@@ -21,8 +21,8 @@
       }
 
       .device-picker {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
-        @apply(--layout-center-center);
+        @apply --layout-center-center;
         padding-left: 24px;
         padding-right: 24px;
         padding-bottom: 24px;

panels/config/zwave/zwave-values.html

@@ -20,8 +20,8 @@
       }
 
       .device-picker {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
-        @apply(--layout-center-center);
+        @apply --layout-center-center;
         padding-left: 24px;
         padding-right: 24px;
         padding-bottom: 24px;

panels/logbook/ha-logbook.html

@@ -14,7 +14,7 @@
       }
 
       .entry {
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
         line-height: 2em;
       }
 

panels/map/ha-entity-marker.html

@@ -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;
     }

src/cards/ha-camera-card.html

@@ -21,7 +21,7 @@
         border-radius: 2px;
       }
       .caption {
-        @apply(--paper-font-common-nowrap);
+        @apply --paper-font-common-nowrap;
         position: absolute;
         left: 0px;
         right: 0px;

src/cards/ha-entities-card.html

@@ -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;

src/cards/ha-history_graph-card.html

@@ -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;

src/cards/ha-media_player-card.html

@@ -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;

src/cards/ha-persistent_notification-card.html

@@ -10,7 +10,7 @@
   <template>
     <style>
       :host {
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
       }
       ha-markdown {
         display: block;

src/components/buttons/ha-progress-button.html

@@ -31,8 +31,8 @@
       }
 
       .progress {
-        @apply(--layout);
+        @apply --layout;
-        @apply(--layout-center-center);
+        @apply --layout-center-center;
         position: absolute;
         top: 0;
         left: 0;

src/components/entity/ha-state-label-badge.html

@@ -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>
 

src/components/entity/state-info.html

@@ -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>

src/components/ha-card.html

@@ -12,8 +12,8 @@
         background-color: var(--paper-card-background-color, white);
       }
       .header {
-        @apply(--paper-font-headline);
+        @apply --paper-font-headline;
-        @apply(--paper-font-common-expensive-kerning);
+        @apply --paper-font-common-expensive-kerning;
         opacity: var(--dark-primary-opacity);
         padding: 24px 16px 16px;
         text-transform: capitalize;

src/components/ha-climate-control.html

@@ -10,15 +10,15 @@
     <style>
       /* local DOM styles go here */
       :host {
-        @apply(--layout-flex);
+        @apply --layout-flex;
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
-        @apply(--layout-justified);
+        @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 {

src/components/ha-label-badge.html

@@ -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%;

src/components/ha-sidebar.html

@@ -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;
       }
 

src/more-infos/more-info-vacuum.html

@@ -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;
       }
 

src/resources/ha-style.html

@@ -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 {

src/state-summary/state-card-climate.html

@@ -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;
       }
 

src/state-summary/state-card-display.html

@@ -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;

src/state-summary/state-card-input_number.html

@@ -20,7 +20,7 @@
         margin-left: auto;
       }
       .state {
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
         color: var(--primary-text-color);
 
         text-align: right;

src/state-summary/state-card-media_player.html

@@ -13,14 +13,14 @@
       }
 
       .state {
-        @apply(--paper-font-common-nowrap);
+        @apply --paper-font-common-nowrap;
-        @apply(--paper-font-body1);
+        @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>

src/state-summary/state-card-timer.html

@@ -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;

src/state-summary/state-card-weblink.html

@@ -9,8 +9,8 @@
         display: block;
       }
       .name {
-        @apply(--paper-font-common-nowrap);
+        @apply --paper-font-common-nowrap;
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
         color: var(--primary-color);
 
         text-transform: capitalize;