@synergy-design-system/components
Version:
125 lines (107 loc) • 3.2 kB
JavaScript
// 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