jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +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 {
left: 0px !important;
top: auto;
box-shadow: var(--ha-card-box-shadow, none);
background-color: var(--card-background-color);
border: none;
border-radius: var(--ha-card-border-radius, 4px);
box-shadow: var(
--ha-card-box-shadow,
0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12)
border-radius: var(--ha-card-border-radius, 16px);
border-width: var(--ha-card-border-width, 1px);
border-style: solid;
border-color: var(
--ha-card-border-color,
var(--divider-color, #e0e0e0)
);
color: var(--primary-text-color);
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 {
@property() public header?: string;
@property({ type: Boolean, reflect: true }) public outlined = false;
@property({ type: Boolean, reflect: true }) public raised = false;
static get styles(): CSSResultGroup {
return css`
@ -14,12 +14,14 @@ export class HaCard extends LitElement {
--ha-card-background,
var(--card-background-color, white)
);
border-radius: var(--ha-card-border-radius, 4px);
box-shadow: var(
--ha-card-box-shadow,
0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12)
box-shadow: var(--ha-card-box-shadow, none);
box-sizing: border-box;
border-radius: var(--ha-card-border-radius, 16px);
border-width: var(--ha-card-border-width, 1px);
border-style: solid;
border-color: var(
--ha-card-border-color,
var(--divider-color, #e0e0e0)
);
color: var(--primary-text-color);
display: block;
@ -27,13 +29,13 @@ export class HaCard extends LitElement {
position: relative;
}
:host([outlined]) {
box-shadow: none;
border-width: var(--ha-card-border-width, 1px);
border-style: solid;
border-color: var(
--ha-card-border-color,
var(--divider-color, #e0e0e0)
:host([raised]) {
border: none;
box-shadow: var(
--ha-card-box-shadow,
0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12)
);
}

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

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