jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 19:09:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Align bottom sheet border radius with resizable bottom sheet (#27280)

Browse Source
This commit is contained in:
Paul Bottein
2025-10-02 11:44:54 +02:00
committed by GitHub
parent 23a3ca3ed7
commit c18de97b32
2 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ha-bottom-sheet.ts
View File

@@ -42,8 +42,8 @@ export class HaBottomSheet extends LitElement {
static styles = css` static styles = css`
wa-drawer { wa-drawer {
--wa-color-surface-raised: var( --wa-color-surface-raised: var(
--ha-dialog-surface-background, --ha-bottom-sheet-surface-background,
var(--mdc-theme-surface, #fff) var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
); );
--spacing: 0; --spacing: 0;
--size: auto; --size: auto;
@@ -51,8 +51,14 @@ export class HaBottomSheet extends LitElement {
--hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms; --hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
} }
wa-drawer::part(dialog) { wa-drawer::part(dialog) {
border-top-left-radius: var(--ha-border-radius-lg); border-top-left-radius: var(
border-top-right-radius: var(--ha-border-radius-lg); --ha-bottom-sheet-border-radius,
var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
);
border-top-right-radius: var(
--ha-bottom-sheet-border-radius,
var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
);
max-height: 90vh; max-height: 90vh;
padding-bottom: var(--safe-area-inset-bottom); padding-bottom: var(--safe-area-inset-bottom);
padding-left: var(--safe-area-inset-left); padding-left: var(--safe-area-inset-left);

12
src/components/ha-resizable-bottom-sheet.ts
View File

@@ -217,8 +217,8 @@ export class HaResizableBottomSheet extends LitElement {
max-height: 70vh; max-height: 70vh;
min-height: 30vh; min-height: 30vh;
background-color: var( background-color: var(
--ha-dialog-surface-background, --ha-bottom-sheet-surface-background,
var(--mdc-theme-surface, #fff) var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
); );
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -239,12 +239,12 @@ export class HaResizableBottomSheet extends LitElement {
inset-inline-start: 0; inset-inline-start: 0;
box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.2); box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.2);
border-top-left-radius: var( border-top-left-radius: var(
--ha-dialog-border-radius, --ha-bottom-sheet-border-radius,
var(--ha-border-radius-2xl) var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
); );
border-top-right-radius: var( border-top-right-radius: var(
--ha-dialog-border-radius, --ha-bottom-sheet-border-radius,
var(--ha-border-radius-2xl) var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
); );
transform: translateY(100%); transform: translateY(100%);
transition: transform ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms ease; transition: transform ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms ease;