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

Center ha-toast (#22412)

Browse Source 
* Center ha-toast

* Improve margin
This commit is contained in:
Paul Bottein 2024-10-21 09:09:31 +02:00 committed by GitHub
parent 4669decfd0
commit 4509661652
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 43 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/ha-toast.ts
View File

@ -1,8 +1,49 @@
import { customElement } from "lit/decorators";
import { Snackbar } from "@material/mwc-snackbar/mwc-snackbar"; import { Snackbar } from "@material/mwc-snackbar/mwc-snackbar";
import { styles } from "@material/mwc-snackbar/mwc-snackbar.css";
import { css } from "lit";
import { customElement } from "lit/decorators";
@customElement("ha-toast") @customElement("ha-toast")
export class HaToast extends Snackbar {} export class HaToast extends Snackbar {
static override styles = [
styles,
css`
.mdc-snackbar--leading {
justify-content: center;
}
.mdc-snackbar {
margin: 8px;
right: calc(8px + env(safe-area-inset-right));
bottom: calc(8px + env(safe-area-inset-bottom));
left: calc(8px + env(safe-area-inset-left));
}
.mdc-snackbar__surface {
min-width: 350px;
max-width: 650px;
}
// Revert the default styles set by mwc-snackbar
@media (max-width: 480px), (max-width: 344px) {
.mdc-snackbar__surface {
min-width: inherit;
}
}
@media all and (max-width: 450px), all and (max-height: 500px) {
.mdc-snackbar {
right: env(safe-area-inset-right);
bottom: env(safe-area-inset-bottom);
left: env(safe-area-inset-left);
}
.mdc-snackbar__surface {
min-width: 100%;
}
}
`,
];
}
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {