39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { css } from "lit";
|
|
import SLDialog from "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
|
|
import dialogStyles from "@shoelace-style/shoelace/dist/components/dialog/dialog.styles.js";
|
|
|
|
/**
|
|
* Customized <sl-dialog>
|
|
*
|
|
* Usage: see https://shoelace.style/components/dialog
|
|
*/
|
|
export class Dialog extends SLDialog {
|
|
static styles = css`
|
|
${dialogStyles} .dialog__panel {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dialog__header {
|
|
background-color: var(--sl-color-neutral-50);
|
|
border-bottom: 1px solid var(--sl-color-neutral-100);
|
|
}
|
|
|
|
.dialog__title {
|
|
padding-top: var(--sl-spacing-small);
|
|
padding-bottom: var(--sl-spacing-small);
|
|
font-size: var(--sl-font-size-medium);
|
|
font-weight: var(--sl-font-weight-medium);
|
|
}
|
|
|
|
.dialog__close {
|
|
--header-spacing: var(--sl-spacing-2x-small);
|
|
}
|
|
|
|
.dialog__footer {
|
|
padding-top: var(--sl-spacing-small);
|
|
padding-bottom: var(--sl-spacing-small);
|
|
border-top: 1px solid var(--sl-color-neutral-100);
|
|
}
|
|
`;
|
|
}
|