jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove box shadow for ha-card (#14063)

Browse Source 
* Remove box shadow for ha-card

* add raised style in case of raised card needed

* add box-sizing: border-box

* Allow box-shadow theming

* Restore box-shadow theme in date range picker

* Restore hui unused entities card box shadow none

* Apply suggestions from code review

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Paul Bottein 2022-10-17 10:20:11 +02:00 committed by GitHub
parent f627e98902
commit 7e6a9f1653
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/date-range-picker.ts
View File

@ -111,14 +111,14 @@ class DateRangePickerElement extends WrappedElement {
.daterangepicker { .daterangepicker {
left: 0px !important; left: 0px !important;
top: auto; top: auto;
box-shadow: var(--ha-card-box-shadow, none);
background-color: var(--card-background-color); background-color: var(--card-background-color);
border: none; border-radius: var(--ha-card-border-radius, 16px);
border-radius: var(--ha-card-border-radius, 4px); border-width: var(--ha-card-border-width, 1px);
box-shadow: var( border-style: solid;
--ha-card-box-shadow, border-color: var(
0px 2px 1px -1px rgba(0, 0, 0, 0.2), --ha-card-border-color,
0px 1px 1px 0px rgba(0, 0, 0, 0.14), var(--divider-color, #e0e0e0)
0px 1px 3px 0px rgba(0, 0, 0, 0.12)
); );
color: var(--primary-text-color); color: var(--primary-text-color);
min-width: initial !important; min-width: initial !important;

30
src/components/ha-card.ts
View File

@ -5,7 +5,7 @@ import { customElement, property } from "lit/decorators";
export class HaCard extends LitElement { export class HaCard extends LitElement {
@property() public header?: string; @property() public header?: string;
@property({ type: Boolean, reflect: true }) public outlined = false; @property({ type: Boolean, reflect: true }) public raised = false;
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
@ -14,12 +14,14 @@ export class HaCard extends LitElement {
--ha-card-background, --ha-card-background,
var(--card-background-color, white) var(--card-background-color, white)
); );
border-radius: var(--ha-card-border-radius, 4px); box-shadow: var(--ha-card-box-shadow, none);
box-shadow: var( box-sizing: border-box;
--ha-card-box-shadow, border-radius: var(--ha-card-border-radius, 16px);
0px 2px 1px -1px rgba(0, 0, 0, 0.2), border-width: var(--ha-card-border-width, 1px);
0px 1px 1px 0px rgba(0, 0, 0, 0.14), border-style: solid;
0px 1px 3px 0px rgba(0, 0, 0, 0.12) border-color: var(
--ha-card-border-color,
var(--divider-color, #e0e0e0)
); );
color: var(--primary-text-color); color: var(--primary-text-color);
display: block; display: block;
@ -27,13 +29,13 @@ export class HaCard extends LitElement {
position: relative; position: relative;
} }
:host([outlined]) { :host([raised]) {
box-shadow: none; border: none;
border-width: var(--ha-card-border-width, 1px); box-shadow: var(
border-style: solid; --ha-card-box-shadow,
border-color: var( 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
--ha-card-border-color, 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
var(--divider-color, #e0e0e0) 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
); );
} }

2
src/html/onboarding.html.template
View File

@ -16,7 +16,7 @@
.content { .content {
box-sizing: border-box; box-sizing: border-box;
padding: 20px 16px; padding: 20px 16px;
border-radius: 4px; border-radius: var(--ha-card-border-radius, 16px);
max-width: 432px; max-width: 432px;
margin: 64px auto 0; margin: 64px auto 0;
box-shadow: var( box-shadow: var(