ha-card migration. Step #0: improvements to ha-card. (#3144)

* Improvements to ha-card. Better paper-card compatibility

* Remove named slots

* Tweak distance between header and contents

* Further css tweaking

src/components/ha-card.ts

@@ -27,9 +27,11 @@ class HaCard extends LitElement {
         color: var(--primary-text-color);
         display: block;
         transition: all 0.3s ease-out;
+        position: relative;
       }
-      .header:not(:empty),
-      .header::slotted(*) {
+
+      .card-header,
+      :host ::slotted(.card-header) {
         color: var(--ha-card-header-color, --primary-text-color);
         font-family: var(--ha-card-header-font-family, inherit);
         font-size: var(--ha-card-header-font-size, 24px);
@@ -38,12 +40,31 @@ class HaCard extends LitElement {
         padding: 24px 16px 16px;
         display: block;
       }
+
+      :host ::slotted(.card-content:not(:first-child)),
+      slot:not(:first-child)::slotted(.card-content) {
+        padding-top: 0px;
+        margin-top: -8px;
+      }
+
+      :host ::slotted(.card-content) {
+        padding: 16px;
+      }
+
+      :host ::slotted(.card-actions) {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 16px;
+      }
     `;
   }
 
   protected render(): TemplateResult {
     return html`
-      <slot class="header" name="header">${this.header}</slot>
+      ${this.header
+        ? html`
+            <div class="card-header">${this.header}</div>
+          `
+        : html``}
       <slot></slot>
     `;
   }