jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-06-06 10:16:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

For consistency align close button to the left in ha-dialog (#23284)

Browse Source
This commit is contained in:
Jan-Philipp Benecke 2024-12-16 14:35:06 +01:00 committed by GitHub
parent 3aaf08ac03
commit ee292f900f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,13 +15,13 @@ export const createCloseHeading = (
title: string | TemplateResult
) => html`
<div class="header_title">
<span>${title}</span>
<ha-icon-button
.label=${hass?.localize("ui.dialogs.generic.close") ?? "Close"}
.path=${mdiClose}
dialogAction="close"
class="header_button"
></ha-icon-button>
<span>${title}</span>
</div>
`;
@ -102,7 +102,10 @@ export class HaDialog extends DialogBase {
align-items: var(--vertical-align-dialog, center);
}
.mdc-dialog__title {
padding: 24px 24px 0 24px;
padding: 12px 12px 0;
}
.mdc-dialog--scrollable .mdc-dialog__title {
padding: 12px;
}
.mdc-dialog__actions {
padding: 12px 24px 12px 24px;
@ -138,10 +141,8 @@ export class HaDialog extends DialogBase {
flex-direction: column;
}
.header_title {
position: relative;
padding-right: 40px;
padding-inline-end: 40px;
padding-inline-start: initial;
display: flex;
align-items: center;
direction: var(--direction);
}
.header_title span {
@ -149,11 +150,9 @@ export class HaDialog extends DialogBase {
text-overflow: ellipsis;
white-space: nowrap;
display: block;
padding-left: 4px;
}
.header_button {
position: absolute;
right: -12px;
top: -12px;
text-decoration: none;
color: inherit;
inset-inline-start: initial;