mirror of
https://github.com/home-assistant/frontend.git
synced 2026-04-03 01:13:45 +00:00
Compare commits
1 Commits
keyboard-i
...
adjust_box
| Author | SHA1 | Date | |
|---|---|---|---|
|
7f8e4d0711 |
3
gallery/src/pages/misc/box-shadow.markdown
Normal file
3
gallery/src/pages/misc/box-shadow.markdown
Normal file
@@ -0,0 +1,3 @@
|
||||
---
|
||||
title: Box shadow
|
||||
---
|
||||
98
gallery/src/pages/misc/box-shadow.ts
Normal file
98
gallery/src/pages/misc/box-shadow.ts
Normal file
@@ -0,0 +1,98 @@
|
||||
import { css, html, LitElement } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
|
||||
|
||||
const SHADOWS = ["s", "m", "l", "xl"] as const;
|
||||
|
||||
@customElement("demo-misc-box-shadow")
|
||||
export class DemoMiscBoxShadow extends LitElement {
|
||||
protected render() {
|
||||
return html`
|
||||
${["light", "dark"].map(
|
||||
(mode) => html`
|
||||
<div class=${mode}>
|
||||
<h2>${mode}</h2>
|
||||
<div class="grid">
|
||||
${SHADOWS.map(
|
||||
(size) => html`
|
||||
<div
|
||||
class="box"
|
||||
style="box-shadow: var(--ha-box-shadow-${size})"
|
||||
>
|
||||
${size}
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
`;
|
||||
}
|
||||
|
||||
firstUpdated(changedProps) {
|
||||
super.firstUpdated(changedProps);
|
||||
applyThemesOnElement(
|
||||
this.shadowRoot!.querySelector(".dark"),
|
||||
{
|
||||
default_theme: "default",
|
||||
default_dark_theme: "default",
|
||||
themes: {},
|
||||
darkMode: true,
|
||||
theme: "default",
|
||||
},
|
||||
undefined,
|
||||
undefined,
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 48px;
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
.light,
|
||||
.dark {
|
||||
flex: 1;
|
||||
background-color: var(--primary-background-color);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: var(--primary-text-color);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 120px;
|
||||
border-radius: 12px;
|
||||
background-color: var(--card-background-color);
|
||||
color: var(--primary-text-color);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"demo-misc-box-shadow": DemoMiscBoxShadow;
|
||||
}
|
||||
}
|
||||
@@ -1504,9 +1504,7 @@ export default class HaAutomationAddFromTarget extends LitElement {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding-bottom: var(--ha-space-2);
|
||||
box-shadow: inset var(--ha-shadow-offset-x-lg)
|
||||
calc(var(--ha-shadow-offset-y-lg) * -1) var(--ha-shadow-blur-lg)
|
||||
var(--ha-shadow-spread-lg) var(--ha-color-shadow-light);
|
||||
box-shadow: inset 0 -8px 12px 0 rgba(0, 0, 0, 0.06);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
@@ -322,7 +322,7 @@ class ConfigAnalytics extends SubscribeMixin(LitElement) {
|
||||
0% {
|
||||
box-shadow:
|
||||
0 0 0 var(--ha-border-width-md) var(--primary-color),
|
||||
0 0 var(--ha-shadow-blur-lg) rgba(var(--rgb-primary-color), 0.4);
|
||||
0 0 12px rgba(var(--rgb-primary-color), 0.4);
|
||||
}
|
||||
100% {
|
||||
box-shadow:
|
||||
|
||||
@@ -426,7 +426,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
|
||||
0% {
|
||||
box-shadow:
|
||||
0 0 0 var(--ha-border-width-md) var(--primary-color),
|
||||
0 0 var(--ha-shadow-blur-lg) rgba(var(--rgb-primary-color), 0.4);
|
||||
0 0 12px rgba(var(--rgb-primary-color), 0.4);
|
||||
}
|
||||
100% {
|
||||
box-shadow:
|
||||
|
||||
@@ -236,7 +236,10 @@ export class HuiViewFooter extends LitElement {
|
||||
}
|
||||
|
||||
.wrapper:not(.edit-mode) {
|
||||
--ha-card-box-shadow: var(--ha-box-shadow-l);
|
||||
--ha-card-box-shadow: var(
|
||||
--ha-view-footer-box-shadow,
|
||||
var(--ha-box-shadow-xl)
|
||||
);
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
@@ -74,10 +74,6 @@ export const coreColorStyles = css`
|
||||
--ha-color-green-80: #93da98;
|
||||
--ha-color-green-90: #c2f2c1;
|
||||
--ha-color-green-95: #e3f9e3;
|
||||
|
||||
/* shadow */
|
||||
--ha-color-shadow-light: #00000014;
|
||||
--ha-color-shadow-dark: #00000046;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@@ -42,19 +42,6 @@ export const coreStyles = css`
|
||||
--ha-space-19: 76px;
|
||||
--ha-space-20: 80px;
|
||||
|
||||
--ha-shadow-offset-x-sm: 0;
|
||||
--ha-shadow-offset-x-md: 0;
|
||||
--ha-shadow-offset-x-lg: 0;
|
||||
--ha-shadow-offset-y-sm: 2px;
|
||||
--ha-shadow-offset-y-md: 4px;
|
||||
--ha-shadow-offset-y-lg: 8px;
|
||||
--ha-shadow-blur-sm: 4px;
|
||||
--ha-shadow-blur-md: 8px;
|
||||
--ha-shadow-blur-lg: 12px;
|
||||
--ha-shadow-spread-sm: 0;
|
||||
--ha-shadow-spread-md: 0;
|
||||
--ha-shadow-spread-lg: 0;
|
||||
|
||||
--ha-animation-duration-none: 1ms;
|
||||
--ha-animation-duration-instant: 75ms;
|
||||
--ha-animation-duration-fast: 150ms;
|
||||
|
||||
@@ -7,17 +7,19 @@ import { extractVars } from "../../common/style/derived-css-vars";
|
||||
*/
|
||||
export const semanticStyles = css`
|
||||
html {
|
||||
--ha-box-shadow-s: var(--ha-shadow-offset-x-sm) var(--ha-shadow-offset-y-sm) var(--ha-shadow-blur-sm) var(--ha-shadow-spread-sm) var(--ha-color-shadow-light);
|
||||
--ha-box-shadow-m: var(--ha-shadow-offset-x-md) var(--ha-shadow-offset-y-md) var(--ha-shadow-blur-md) var(--ha-shadow-spread-md) var(--ha-color-shadow-light);
|
||||
--ha-box-shadow-l: var(--ha-shadow-offset-x-lg) var(--ha-shadow-offset-y-lg) var(--ha-shadow-blur-lg) var(--ha-shadow-spread-lg) var(--ha-color-shadow-light);
|
||||
--ha-box-shadow-s: 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
--ha-box-shadow-m: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.14);
|
||||
--ha-box-shadow-l: 0 4px 8px -2px rgba(0, 0, 0, 0.12), 0 12px 24px -4px rgba(0, 0, 0, 0.18);
|
||||
--ha-box-shadow-xl: 0 8px 16px -4px rgba(0, 0, 0, 0.15), 0 24px 48px -8px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
`;
|
||||
|
||||
export const darkSemanticStyles = css`
|
||||
html {
|
||||
--ha-box-shadow-s: var(--ha-shadow-offset-x-sm) var(--ha-shadow-offset-y-sm) var(--ha-shadow-blur-sm) var(--ha-shadow-spread-sm) var(--ha-color-shadow-dark);
|
||||
--ha-box-shadow-m: var(--ha-shadow-offset-x-md) var(--ha-shadow-offset-y-md) var(--ha-shadow-blur-md) var(--ha-shadow-spread-md) var(--ha-color-shadow-dark);
|
||||
--ha-box-shadow-l: var(--ha-shadow-offset-x-lg) var(--ha-shadow-offset-y-lg) var(--ha-shadow-blur-lg) var(--ha-shadow-spread-lg) var(--ha-color-shadow-dark);
|
||||
--ha-box-shadow-s: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 1px 3px 0 rgba(0, 0, 0, 0.5);
|
||||
--ha-box-shadow-m: 0 2px 4px -1px rgba(0, 0, 0, 0.4), 0 4px 8px 0 rgba(0, 0, 0, 0.5);
|
||||
--ha-box-shadow-l: 0 4px 8px -2px rgba(0, 0, 0, 0.4), 0 12px 24px -4px rgba(0, 0, 0, 0.55);
|
||||
--ha-box-shadow-xl: 0 8px 16px -4px rgba(0, 0, 0, 0.45), 0 24px 48px -8px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@@ -37,6 +37,7 @@ export const waMainStyles = css`
|
||||
--wa-shadow-s: var(--ha-box-shadow-s);
|
||||
--wa-shadow-m: var(--ha-box-shadow-m);
|
||||
--wa-shadow-l: var(--ha-box-shadow-l);
|
||||
--wa-shadow-xl: var(--ha-box-shadow-xl);
|
||||
|
||||
--wa-form-control-padding-block: 0.75em;
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
Reference in New Issue
Block a user