UNPKG

@synergy-design-system/components

Version:
125 lines (107 loc) 3.2 kB
// src/components/dialog/dialog.styles.ts import { css } from "lit"; var dialog_styles_default = css` :host { --width: 31rem; --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large); --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large); --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium); display: contents; } .dialog { align-items: center; display: flex; inset: 0; justify-content: center; position: fixed; z-index: var(--syn-z-index-dialog); } .dialog__panel { background-color: var(--syn-panel-background-color); border: var(--syn-spacing-4x-small) solid var(--syn-panel-border-color); border-radius: var(--syn-border-radius-none); box-shadow: var(--syn-shadow-large); display: flex; flex-direction: column; max-height: calc(100% - var(--syn-spacing-2x-large)); max-width: calc(100% - var(--syn-spacing-2x-large)); width: var(--width); z-index: 2; } .dialog__panel:focus { outline: none; } /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */ @media screen and (width <= 420px) { .dialog__panel { max-height: 80vh; } } .dialog--open .dialog__panel { display: flex; opacity: 1; } .dialog__header { display: flex; flex: 0 0 auto; } .dialog__title { align-items: center; display: flex; flex: 1 1 auto; font: var(--syn-heading-x-large); margin: 0; padding: var(--header-spacing); } .dialog__header-actions { align-items: flex-start; display: flex; flex-shrink: 0; flex-wrap: wrap; gap: var(--syn-spacing-x-small); justify-content: end; padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0; } .dialog__header-actions syn-icon-button, .dialog__header-actions ::slotted(syn-icon-button) { align-items: center; color: var(--syn-color-neutral-950); display: flex; flex: 0 0 auto; font-size: var(--syn-font-size-x-large); } .dialog__body { display: block; flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; padding: var(--body-spacing); will-change: transform; /* #1249: Fixes Chrome scroll issues when using multiple scrollable items as content */ } .dialog__footer { flex: 0 0 auto; padding: var(--footer-spacing); text-align: right; } .dialog__footer ::slotted(syn-button:not(:first-of-type)) { margin-inline-start: var(--syn-spacing-x-small); } .dialog:not(.dialog--has-footer) .dialog__footer { display: none; } .dialog__overlay { backdrop-filter: blur(var(--syn-overlay-background-blur)); /* #946: Add background blur for sick 2025 */ background-color: var(--syn-overlay-background-color); inset: 0; position: fixed; } @media (forced-colors: active) { .dialog__panel { border: solid 1px var(--syn-color-neutral-0); } } `; export { dialog_styles_default }; //# sourceMappingURL=chunk.MQFQLLZE.js.map