jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 03:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix styling of vaadin elements (#4276)

Browse Source
This commit is contained in:
Bram Kragten 2019-11-26 16:57:29 +01:00 committed by GitHub
parent fe93b993db
commit 60efe00a1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/device/ha-device-picker.ts
View File

@ -1,7 +1,7 @@
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-item/paper-item-body";
import "@vaadin/vaadin-combo-box/vaadin-combo-box-light"; import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
import "@polymer/paper-listbox/paper-listbox"; import "@polymer/paper-listbox/paper-listbox";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { import {

30
src/resources/ha-date-picker-style.js
View File

@ -12,12 +12,27 @@ documentContainer.innerHTML = `
[part~="label"] { [part~="label"] {
top: 6px; top: 6px;
font-size: var(--paper-font-subhead_-_font-size); font-size: var(--paper-font-subhead_-_font-size);
color: var(--paper-input-container-color, var(--secondary-text-color));
}
:host([focused]) [part~="label"] {
color: var(--paper-input-container-focus-color, var(--primary-color));
} }
[part~="input-field"] { [part~="input-field"] {
color: var(--primary-text-color);
top: 3px; top: 3px;
} }
[part~="input-field"]::before, [part~="input-field"]::after {
background-color: var(--paper-input-container-color, var(--secondary-text-color));
opacity: 1;
}
:host([focused]) [part~="input-field"]::before, :host([focused]) [part~="input-field"]::after {
background-color: var(--paper-input-container-focus-color, var(--primary-color));
}
[part~="value"] { [part~="value"] {
font-size: var(--paper-font-subhead_-_font-size); font-size: var(--paper-font-subhead_-_font-size);
} }
@ -52,17 +67,19 @@ documentContainer.innerHTML = `
<dom-module id="ha-date-picker-overlay-styles" theme-for="vaadin-date-picker-overlay"> <dom-module id="ha-date-picker-overlay-styles" theme-for="vaadin-date-picker-overlay">
<template> <template>
<style include="vaadin-date-picker-overlay-default-theme"> <style include="vaadin-date-picker-overlay-default-theme">
:host {
background-color: var(--paper-card-background-color, var(--primary-background-color));
}
[part~="toolbar"] { [part~="toolbar"] {
padding: 0.3em; padding: 0.3em;
background-color: var(--secondary-background-color); background-color: var(--secondary-background-color);
} }
[part="years"] { [part="years"] {
background-color: var(--paper-grey-200); background-color: var(--secondary-text-color);
--material-body-text-color: var(--primary-background-color);
}
[part="overlay"] {
background-color: var(--primary-background-color);
--material-body-text-color: var(--secondary-text-color);
} }
</style> </style>
@ -76,6 +93,7 @@ documentContainer.innerHTML = `
} }
</style> </style>
</template> </template>
</dom-module>`; </dom-module>
`;
document.head.appendChild(documentContainer.content); document.head.appendChild(documentContainer.content);