Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-20 02:38:53 +00:00
Code Activity

Remove ha-space-0 (#28635)

Browse Source 
* Remove ha-space-0

* Update src/components/ha-sidebar.ts

Co-authored-by: Aidan Timson <aidan@timmo.dev>

* Fix variable inside calc

* Replace for variables

---------

Co-authored-by: Aidan Timson <aidan@timmo.dev>
This commit is contained in:
Paul Bottein
2025-12-19 17:12:28 +01:00
committed by GitHub
parent 86cd0e81ad
commit cdcbd00a92
24 changed files with 73 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/copilot-instructions.md vendored
View File

@@ -154,7 +154,7 @@ try {
- **Use CSS custom properties**: Leverage the theme system - **Use CSS custom properties**: Leverage the theme system
- **Use spacing tokens**: Prefer `--ha-space-*` tokens over hardcoded values for consistent spacing - **Use spacing tokens**: Prefer `--ha-space-*` tokens over hardcoded values for consistent spacing
- Spacing scale: `--ha-space-0` (0px) through `--ha-space-20` (80px) in 4px increments - Spacing scale: `--ha-space-1` (4px) through `--ha-space-20` (80px) in 4px increments
- Defined in `src/resources/theme/core.globals.ts` - Defined in `src/resources/theme/core.globals.ts`
- Common values: `--ha-space-2` (8px), `--ha-space-4` (16px), `--ha-space-8` (32px) - Common values: `--ha-space-2` (8px), `--ha-space-4` (16px), `--ha-space-8` (32px)
- **Mobile-first responsive**: Design for mobile, enhance for desktop - **Mobile-first responsive**: Design for mobile, enhance for desktop

2
src/components/ha-automation-row.ts
View File

@@ -175,7 +175,7 @@ export class HaAutomationRow extends LitElement {
::slotted([slot="header"]) { ::slotted([slot="header"]) {
flex: 1; flex: 1;
overflow-wrap: anywhere; overflow-wrap: anywhere;
margin: var(--ha-space-0) var(--ha-space-3); margin: 0 var(--ha-space-3);
} }
.icons { .icons {
display: flex; display: flex;

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

@@ -241,7 +241,7 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
} }
slot[name="footer"] { slot[name="footer"] {
display: block; display: block;
padding: var(--ha-space-0); padding: 0;
} }
::slotted([slot="footer"]) { ::slotted([slot="footer"]) {
display: flex; display: flex;

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

@@ -46,14 +46,14 @@ export class HaCard extends LitElement {
line-height: var(--ha-line-height-expanded); line-height: var(--ha-line-height-expanded);
padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4); padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4);
display: block; display: block;
margin-block-start: var(--ha-space-0); margin-block-start: 0;
margin-block-end: var(--ha-space-0); margin-block-end: 0;
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
} }
:host ::slotted(.card-content:not(:first-child)), :host ::slotted(.card-content:not(:first-child)),
slot:not(:first-child)::slotted(.card-content) { slot:not(:first-child)::slotted(.card-content) {
padding-top: var(--ha-space-0); padding-top: 0;
margin-top: calc(var(--ha-space-2) * -1); margin-top: calc(var(--ha-space-2) * -1);
} }

11
src/components/ha-dialog.ts
View File

@@ -101,14 +101,13 @@ export class HaDialog extends DialogBase {
} }
.mdc-dialog__container { .mdc-dialog__container {
align-items: var(--vertical-align-dialog, center); align-items: var(--vertical-align-dialog, center);
padding: var(--dialog-container-padding, var(--ha-space-0)); padding: var(--dialog-container-padding, 0);
} }
.mdc-dialog__title { .mdc-dialog__title {
padding: var(--ha-space-4) var(--ha-space-4) var(--ha-space-0) padding: var(--ha-space-4) var(--ha-space-4) 0 var(--ha-space-4);
var(--ha-space-4);
} }
.mdc-dialog__title:has(span) { .mdc-dialog__title:has(span) {
padding: var(--ha-space-3) var(--ha-space-3) var(--ha-space-0); padding: var(--ha-space-3) var(--ha-space-3) 0;
} }
.mdc-dialog__title::before { .mdc-dialog__title::before {
content: unset; content: unset;
@@ -136,7 +135,7 @@ export class HaDialog extends DialogBase {
--ha-dialog-surface-background, --ha-dialog-surface-background,
var(--mdc-theme-surface, #fff) var(--mdc-theme-surface, #fff)
); );
padding: var(--dialog-surface-padding, var(--ha-space-0)); padding: var(--dialog-surface-padding, 0);
} }
:host([flexContent]) .mdc-dialog .mdc-dialog__content { :host([flexContent]) .mdc-dialog .mdc-dialog__content {
display: flex; display: flex;
@@ -168,7 +167,7 @@ export class HaDialog extends DialogBase {
} }
.dialog-actions { .dialog-actions {
inset-inline-start: initial !important; inset-inline-start: initial !important;
inset-inline-end: var(--ha-space-0) !important; inset-inline-end: 0 !important;
direction: var(--direction); direction: var(--direction);
} }
`, `,

4
src/components/ha-generic-picker.ts
View File

@@ -393,7 +393,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
} }
wa-popover { wa-popover {
--wa-space-l: var(--ha-space-0); --wa-space-l: 0;
} }
wa-popover::part(body) { wa-popover::part(body) {
@@ -418,7 +418,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
--ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12)); --ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12));
--ha-bottom-sheet-max-height: var(--ha-bottom-sheet-height); --ha-bottom-sheet-max-height: var(--ha-bottom-sheet-height);
--ha-bottom-sheet-max-width: 600px; --ha-bottom-sheet-max-width: 600px;
--ha-bottom-sheet-padding: var(--ha-space-0); --ha-bottom-sheet-padding: 0;
--ha-bottom-sheet-surface-background: var(--card-background-color); --ha-bottom-sheet-surface-background: var(--card-background-color);
--ha-bottom-sheet-border-radius: var(--ha-border-radius-2xl); --ha-bottom-sheet-border-radius: var(--ha-border-radius-2xl);
} }

8
src/components/ha-md-dialog.ts
View File

@@ -175,10 +175,10 @@ export class HaMdDialog extends Dialog {
} }
.container { .container {
margin-top: var(--safe-area-inset-top, var(--ha-space-0)); margin-top: var(--safe-area-inset-top, 0);
margin-bottom: var(--safe-area-inset-bottom, var(--ha-space-0)); margin-bottom: var(--safe-area-inset-bottom, 0);
margin-left: var(--safe-area-inset-left, var(--ha-space-0)); margin-left: var(--safe-area-inset-left, 0);
margin-right: var(--safe-area-inset-right, var(--ha-space-0)); margin-right: var(--safe-area-inset-right, 0);
} }
} }

35
src/components/ha-sidebar.ts
View File

@@ -681,7 +681,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
tooltip.style.display = "block"; tooltip.style.display = "block";
tooltip.style.position = "fixed"; tooltip.style.position = "fixed";
tooltip.style.top = `${top}px`; tooltip.style.top = `${top}px`;
tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, var(--ha-space-0)))`; tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, 0px))`;
} }
private _hideTooltip() { private _hideTooltip() {
@@ -720,14 +720,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
background-color: var(--sidebar-background-color); background-color: var(--sidebar-background-color);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding-bottom: calc( padding-bottom: calc(14px + var(--safe-area-inset-bottom, 0px));
14px + var(--safe-area-inset-bottom, var(--ha-space-0))
);
} }
.menu { .menu {
height: calc( height: calc(var(--header-height) + var(--safe-area-inset-top, 0px));
var(--header-height) + var(--safe-area-inset-top, var(--ha-space-0))
);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
padding: 0 var(--ha-space-1); padding: 0 var(--ha-space-1);
@@ -746,16 +742,16 @@ class HaSidebar extends SubscribeMixin(LitElement) {
font-size: var(--ha-font-size-xl); font-size: var(--ha-font-size-xl);
align-items: center; align-items: center;
padding-left: calc( padding-left: calc(
var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0)) var(--ha-space-1) + var(--safe-area-inset-left, 0px)
); );
padding-inline-start: calc( padding-inline-start: calc(
var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0)) var(--ha-space-1) + var(--safe-area-inset-left, 0px)
); );
padding-inline-end: initial; padding-inline-end: initial;
padding-top: var(--safe-area-inset-top, var(--ha-space-0)); padding-top: var(--safe-area-inset-top, 0px);
} }
:host([expanded]) .menu { :host([expanded]) .menu {
width: calc(256px + var(--safe-area-inset-left, var(--ha-space-0))); width: calc(256px + var(--safe-area-inset-left, 0px));
} }
:host([narrow][expanded]) .menu { :host([narrow][expanded]) .menu {
width: 100%; width: 100%;
@@ -771,8 +767,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
display: none; display: none;
} }
:host([narrow]) .title { :host([narrow]) .title {
margin: var(--ha-space-0); margin: 0;
padding: var(--ha-space-0) var(--ha-space-4); padding: 0 var(--ha-space-4);
} }
:host([expanded]) .title { :host([expanded]) .title {
display: initial; display: initial;
@@ -784,16 +780,13 @@ class HaSidebar extends SubscribeMixin(LitElement) {
ha-fade-in, ha-fade-in,
ha-md-list { ha-md-list {
height: calc( height: calc(
100% - var(--header-height) - var( 100% - var(--header-height) - var(--safe-area-inset-top, 0px) -
--safe-area-inset-top,
var(--ha-space-0)
) -
132px 132px
); );
} }
ha-fade-in { ha-fade-in {
padding: var(--ha-space-1) var(--ha-space-0); padding: var(--ha-space-1) 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -803,7 +796,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
ha-md-list { ha-md-list {
overflow-x: hidden; overflow-x: hidden;
background: none; background: none;
margin-left: var(--safe-area-inset-left, var(--ha-space-0)); margin-left: var(--safe-area-inset-left, 0px);
} }
ha-md-list-item { ha-md-list-item {
@@ -825,7 +818,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
width: 248px; width: 248px;
} }
:host([narrow][expanded]) ha-md-list-item { :host([narrow][expanded]) ha-md-list-item {
width: calc(240px - var(--safe-area-inset-left, var(--ha-space-0))); width: calc(240px - var(--safe-area-inset-left, 0px));
} }
ha-md-list-item.selected { ha-md-list-item.selected {
@@ -898,7 +891,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
border-radius: var(--ha-border-radius-md); border-radius: var(--ha-border-radius-md);
font-size: 0.65em; font-size: 0.65em;
line-height: var(--ha-line-height-expanded); line-height: var(--ha-line-height-expanded);
padding: var(--ha-space-0) var(--ha-space-1); padding: 0 var(--ha-space-1);
} }
ha-md-list-item.user { ha-md-list-item.user {

4
src/components/ha-target-picker.ts
View File

@@ -988,7 +988,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
style=${styleMap({ style=${styleMap({
width: "var(--ha-space-12)", width: "var(--ha-space-12)",
position: "absolute", position: "absolute",
top: "var(--ha-space-0)", top: "0",
left: rtl ? undefined : "var(--ha-space-1)", left: rtl ? undefined : "var(--ha-space-1)",
right: rtl ? "var(--ha-space-1)" : undefined, right: rtl ? "var(--ha-space-1)" : undefined,
transform: rtl ? "scaleX(-1)" : "", transform: rtl ? "scaleX(-1)" : "",
@@ -1092,7 +1092,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
z-index: 2; z-index: 2;
} }
.mdc-chip-set { .mdc-chip-set {
padding: var(--ha-space-1) var(--ha-space-0); padding: var(--ha-space-1) 0;
gap: var(--ha-space-2); gap: var(--ha-space-2);
} }

12
src/components/ha-wa-dialog.ts
View File

@@ -266,15 +266,15 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
/* Used to offset the dialog from the safe areas when space is limited */ /* Used to offset the dialog from the safe areas when space is limited */
transform: translate( transform: translate(
calc( calc(
var(--safe-area-offset-left, var(--ha-space-0)) - var( var(--safe-area-offset-left, 0px) - var(
--safe-area-offset-right, --safe-area-offset-right,
var(--ha-space-0) 0px
) )
), ),
calc( calc(
var(--safe-area-offset-top, var(--ha-space-0)) - var( var(--safe-area-offset-top, 0px) - var(
--safe-area-offset-bottom, --safe-area-offset-bottom,
var(--ha-space-0) 0px
) )
) )
); );
@@ -285,7 +285,7 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
@media all and (max-width: 450px), all and (max-height: 500px) { @media all and (max-width: 450px), all and (max-height: 500px) {
:host([type="standard"]) { :host([type="standard"]) {
--ha-dialog-border-radius: var(--ha-space-0); --ha-dialog-border-radius: 0;
wa-dialog { wa-dialog {
/* Make the container fill the whole screen width and not the safe width */ /* Make the container fill the whole screen width and not the safe width */
@@ -372,7 +372,7 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
} }
wa-dialog::part(footer) { wa-dialog::part(footer) {
padding: var(--ha-space-0); padding: 0;
} }
::slotted([slot="footer"]) { ::slotted([slot="footer"]) {

4
src/components/target-picker/ha-target-picker-item-group.ts
View File

@@ -89,7 +89,7 @@ export class HaTargetPickerItemGroup extends LitElement {
static styles = css` static styles = css`
:host { :host {
display: block; display: block;
--expansion-panel-content-padding: var(--ha-space-0); --expansion-panel-content-padding: 0;
} }
ha-expansion-panel::part(summary) { ha-expansion-panel::part(summary) {
background-color: var(--ha-color-fill-neutral-quiet-resting); background-color: var(--ha-color-fill-neutral-quiet-resting);
@@ -101,7 +101,7 @@ export class HaTargetPickerItemGroup extends LitElement {
min-height: unset; min-height: unset;
} }
ha-md-list { ha-md-list {
padding: var(--ha-space-0); padding: 0;
} }
`; `;
} }

4
src/components/target-picker/ha-target-picker-item-row.ts
View File

@@ -605,8 +605,8 @@ export class HaTargetPickerItemRow extends LitElement {
buttonLinkStyle, buttonLinkStyle,
css` css`
:host { :host {
--md-list-item-top-space: var(--ha-space-0); --md-list-item-top-space: 0;
--md-list-item-bottom-space: var(--ha-space-0); --md-list-item-bottom-space: 0;
--md-list-item-leading-space: var(--ha-space-2); --md-list-item-leading-space: var(--ha-space-2);
--md-list-item-trailing-space: var(--ha-space-2); --md-list-item-trailing-space: var(--ha-space-2);
--md-list-item-two-line-container-height: 56px; --md-list-item-two-line-container-height: 56px;

4
src/components/target-picker/ha-target-picker-value-chip.ts
View File

@@ -278,8 +278,8 @@ export class HaTargetPickerValueChip extends LitElement {
direction: var(--direction); direction: var(--direction);
} }
.expand-btn { .expand-btn {
margin-right: var(--ha-space-0); margin-right: 0;
margin-inline-end: var(--ha-space-0); margin-inline-end: 0;
margin-inline-start: initial; margin-inline-start: initial;
} }
.mdc-chip.area:not(.add), .mdc-chip.area:not(.add),

3
src/dialogs/more-info/ha-more-info-dialog.ts
View File

@@ -802,8 +802,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
margin: var(--ha-space-0) var(--ha-space-0) margin: 0 0 calc(var(--ha-space-2) * -1) 0;
calc(var(--ha-space-2) * -1) var(--ha-space-0);
} }
.title p { .title p {

2
src/dialogs/quick-bar/ha-quick-bar.ts
View File

@@ -1120,7 +1120,7 @@ export class QuickBar extends LitElement {
} }
.nothing-found { .nothing-found {
padding: var(--ha-space-4) var(--ha-space-0); padding: var(--ha-space-4) 0;
text-align: center; text-align: center;
} }

8
src/mixins/scrollable-fade-mixin.ts
View File

@@ -123,8 +123,8 @@ export const ScrollableFadeMixin = <T extends Constructor<LitElement>>(
.fade-top, .fade-top,
.fade-bottom { .fade-bottom {
position: absolute; position: absolute;
left: var(--ha-space-0); left: 0;
right: var(--ha-space-0); right: 0;
height: var(--ha-space-4); height: var(--ha-space-4);
pointer-events: none; pointer-events: none;
transition: opacity 180ms ease-in-out; transition: opacity 180ms ease-in-out;
@@ -137,10 +137,10 @@ export const ScrollableFadeMixin = <T extends Constructor<LitElement>>(
opacity: 0; opacity: 0;
} }
.fade-top { .fade-top {
top: var(--ha-space-0); top: 0;
} }
.fade-bottom { .fade-bottom {
bottom: var(--ha-space-0); bottom: 0;
transform: rotate(180deg); transform: rotate(180deg);
} }

8
src/panels/config/automation/add-automation-element-dialog.ts
View File

@@ -2016,12 +2016,12 @@ class DialogAddAutomationElement
--ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12)); --ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12));
--ha-bottom-sheet-max-height: var(--ha-bottom-sheet-height); --ha-bottom-sheet-max-height: var(--ha-bottom-sheet-height);
--ha-bottom-sheet-max-width: 888px; --ha-bottom-sheet-max-width: 888px;
--ha-bottom-sheet-padding: var(--ha-space-0); --ha-bottom-sheet-padding: 0;
--ha-bottom-sheet-surface-background: var(--card-background-color); --ha-bottom-sheet-surface-background: var(--card-background-color);
} }
ha-wa-dialog { ha-wa-dialog {
--dialog-content-padding: var(--ha-space-0); --dialog-content-padding: 0;
--ha-dialog-min-height: min( --ha-dialog-min-height: min(
800px, 800px,
calc( calc(
@@ -2045,7 +2045,7 @@ class DialogAddAutomationElement
search-input { search-input {
display: block; display: block;
margin: var(--ha-space-0) var(--ha-space-4); margin: 0 var(--ha-space-4);
} }
ha-button-toggle-group { ha-button-toggle-group {
@@ -2079,7 +2079,7 @@ class DialogAddAutomationElement
.groups { .groups {
overflow: auto; overflow: auto;
flex: 4; flex: 4;
margin-inline-end: var(--ha-space-0); margin-inline-end: 0;
} }
ha-automation-add-from-target.hidden { ha-automation-add-from-target.hidden {

6
src/panels/config/automation/add-automation-element/ha-automation-add-items.ts
View File

@@ -213,8 +213,8 @@ export class HaAutomationAddItems extends LitElement {
background-color: var(--ha-color-surface-default); background-color: var(--ha-color-surface-default);
align-items: center; align-items: center;
color: var(--ha-color-text-secondary); color: var(--ha-color-text-secondary);
padding: var(--ha-space-0); padding: 0;
margin: var(--ha-space-0) var(--ha-space-4) margin: 0 var(--ha-space-4)
max(var(--safe-area-inset-bottom), var(--ha-space-3)); max(var(--safe-area-inset-bottom), var(--ha-space-3));
line-height: var(--ha-line-height-expanded); line-height: var(--ha-line-height-expanded);
justify-content: center; justify-content: center;
@@ -233,7 +233,7 @@ export class HaAutomationAddItems extends LitElement {
--md-list-item-supporting-text-font: var(--ha-font-family-body); --md-list-item-supporting-text-font: var(--ha-font-family-body);
--ha-md-list-item-gap: var(--ha-space-3); --ha-md-list-item-gap: var(--ha-space-3);
gap: var(--ha-space-2); gap: var(--ha-space-2);
padding: var(--ha-space-0) var(--ha-space-4); padding: 0 var(--ha-space-4);
} }
.items ha-md-list ha-md-list-item { .items ha-md-list ha-md-list-item {
border-radius: var(--ha-border-radius-lg); border-radius: var(--ha-border-radius-lg);

2
src/panels/config/automation/add-automation-element/ha-automation-add-search.ts
View File

@@ -327,7 +327,7 @@ export class HaAutomationAddSearch extends LitElement {
style=${styleMap({ style=${styleMap({
width: "var(--ha-space-12)", width: "var(--ha-space-12)",
position: "absolute", position: "absolute",
top: "var(--ha-space-0)", top: "0",
left: rtl ? undefined : "var(--ha-space-1)", left: rtl ? undefined : "var(--ha-space-1)",
right: rtl ? "var(--ha-space-1)" : undefined, right: rtl ? "var(--ha-space-1)" : undefined,
transform: rtl ? "scaleX(-1)" : "", transform: rtl ? "scaleX(-1)" : "",

2
src/panels/config/integrations/dialog-add-integration.ts
View File

@@ -462,7 +462,7 @@ class AddIntegrationDialog extends LitElement {
style=${styleMap({ style=${styleMap({
width: `${this._width}px`, width: `${this._width}px`,
height: this._narrow height: this._narrow
? "calc(100vh - 184px - var(--safe-area-inset-top, var(--ha-space-0)) - var(--safe-area-inset-bottom, var(--ha-space-0)))" ? "calc(100vh - 184px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))"
: "500px", : "500px",
})} })}
@click=${this._integrationPicked} @click=${this._integrationPicked}

2
src/panels/config/labs/dialog-labs-preview-feature-enable.ts
View File

@@ -199,7 +199,7 @@ export class DialogLabsPreviewFeatureEnable
static readonly styles = css` static readonly styles = css`
ha-wa-dialog { ha-wa-dialog {
--dialog-content-padding: var(--ha-space-0); --dialog-content-padding: 0;
} }
p { p {

4
src/panels/lovelace/cards/hui-area-card.ts
View File

@@ -732,9 +732,7 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
padding: 0 var(--ha-space-3) var(--ha-space-3) var(--ha-space-3); padding: 0 var(--ha-space-3) var(--ha-space-3) var(--ha-space-3);
} }
.container.horizontal hui-card-features { .container.horizontal hui-card-features {
width: calc( width: calc(50% - var(--column-gap, 0px) / 2 - var(--ha-space-3));
50% - var(--column-gap, var(--ha-space-0)) / 2 - var(--ha-space-3)
);
flex: none; flex: none;
--feature-height: var(--ha-space-9); --feature-height: var(--ha-space-9);
padding: 0 var(--ha-space-3); padding: 0 var(--ha-space-3);

24
src/resources/styles.ts
View File

@@ -142,11 +142,10 @@ export const haStyleDialog = css`
--mdc-dialog-max-width: 600px; --mdc-dialog-max-width: 600px;
--mdc-dialog-max-width: min(600px, 95vw); --mdc-dialog-max-width: min(600px, 95vw);
--justify-action-buttons: space-between; --justify-action-buttons: space-between;
--dialog-container-padding: var(--safe-area-inset-top, var(--ha-space-0)) --dialog-container-padding: var(--safe-area-inset-top, 0)
var(--safe-area-inset-right, var(--ha-space-0)) var(--safe-area-inset-right, 0) var(--safe-area-inset-bottom, 0)
var(--safe-area-inset-bottom, var(--ha-space-0)) var(--safe-area-inset-left, 0);
var(--safe-area-inset-left, var(--ha-space-0)); --dialog-surface-padding: 0px;
--dialog-surface-padding: var(--ha-space-0);
} }
ha-dialog .form { ha-dialog .form {
@@ -166,11 +165,10 @@ export const haStyleDialog = css`
--mdc-dialog-min-height: 100svh; --mdc-dialog-min-height: 100svh;
--mdc-dialog-max-height: 100vh; --mdc-dialog-max-height: 100vh;
--mdc-dialog-max-height: 100svh; --mdc-dialog-max-height: 100svh;
--dialog-container-padding: var(--ha-space-0); --dialog-container-padding: 0px;
--dialog-surface-padding: var(--safe-area-inset-top, var(--ha-space-0)) --dialog-surface-padding: var(--safe-area-inset-top, 0)
var(--safe-area-inset-right, var(--ha-space-0)) var(--safe-area-inset-right, 0) var(--safe-area-inset-bottom, 0)
var(--safe-area-inset-bottom, var(--ha-space-0)) var(--safe-area-inset-left, 0);
var(--safe-area-inset-left, var(--ha-space-0));
--vertical-align-dialog: flex-end; --vertical-align-dialog: flex-end;
--ha-dialog-border-radius: var(--ha-border-radius-square); --ha-dialog-border-radius: var(--ha-border-radius-square);
} }
@@ -188,13 +186,13 @@ export const haStyleDialogFixedTop = css`
--mdc-dialog-max-height: calc( --mdc-dialog-max-height: calc(
100vh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var( 100vh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var(
--safe-area-inset-y, --safe-area-inset-y,
var(--ha-space-0) 0px
) )
); );
--mdc-dialog-max-height: calc( --mdc-dialog-max-height: calc(
100svh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var( 100svh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var(
--safe-area-inset-y, --safe-area-inset-y,
var(--ha-space-0) 0px
) )
); );
} }
@@ -202,7 +200,7 @@ export const haStyleDialogFixedTop = css`
@media all and (max-width: 450px), all and (max-height: 500px) { @media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog { ha-dialog {
/* When in fullscreen, dialog should be attached to top */ /* When in fullscreen, dialog should be attached to top */
--dialog-surface-margin-top: var(--ha-space-0); --dialog-surface-margin-top: 0px;
--mdc-dialog-min-height: 100vh; --mdc-dialog-min-height: 100vh;
--mdc-dialog-min-height: 100svh; --mdc-dialog-min-height: 100svh;
--mdc-dialog-max-height: 100vh; --mdc-dialog-max-height: 100vh;

1
src/resources/theme/core.globals.ts
View File

@@ -21,7 +21,6 @@ export const coreStyles = css`
--ha-border-radius-square: 0; --ha-border-radius-square: 0;
/* Spacing */ /* Spacing */
--ha-space-0: 0px;
--ha-space-1: 4px; --ha-space-1: 4px;
--ha-space-2: 8px; --ha-space-2: 8px;
--ha-space-3: 12px; --ha-space-3: 12px;