kopia lustrzana https://github.com/shoelace-style/shoelace
109 wiersze
2.2 KiB
TypeScript
109 wiersze
2.2 KiB
TypeScript
import { css } from 'lit';
|
|
import componentStyles from '~/styles/component.styles';
|
|
|
|
export default css`
|
|
${componentStyles}
|
|
|
|
:host {
|
|
--width: 31rem;
|
|
--header-spacing: var(--sl-spacing-large);
|
|
--body-spacing: var(--sl-spacing-large);
|
|
--footer-spacing: var(--sl-spacing-large);
|
|
|
|
display: contents;
|
|
}
|
|
|
|
.dialog {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: var(--sl-z-index-dialog);
|
|
}
|
|
|
|
.dialog__panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 2;
|
|
width: var(--width);
|
|
max-width: calc(100% - var(--sl-spacing-2x-large));
|
|
max-height: calc(100% - var(--sl-spacing-2x-large));
|
|
background-color: var(--sl-panel-background-color);
|
|
border-radius: var(--sl-border-radius-medium);
|
|
box-shadow: var(--sl-shadow-x-large);
|
|
}
|
|
|
|
.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 (max-width: 420px) {
|
|
.dialog__panel {
|
|
max-height: 80vh;
|
|
}
|
|
}
|
|
|
|
.dialog--open .dialog__panel {
|
|
display: flex;
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
.dialog__header {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
}
|
|
|
|
.dialog__title {
|
|
flex: 1 1 auto;
|
|
font: inherit;
|
|
font-size: var(--sl-font-size-large);
|
|
line-height: var(--sl-line-height-dense);
|
|
padding: var(--header-spacing);
|
|
margin: 0;
|
|
}
|
|
|
|
.dialog__close {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: var(--sl-font-size-x-large);
|
|
padding: 0 var(--header-spacing);
|
|
}
|
|
|
|
.dialog__body {
|
|
flex: 1 1 auto;
|
|
padding: var(--body-spacing);
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.dialog__footer {
|
|
flex: 0 0 auto;
|
|
text-align: right;
|
|
padding: var(--footer-spacing);
|
|
}
|
|
|
|
.dialog__footer ::slotted(sl-button:not(:first-of-type)) {
|
|
margin-left: var(--sl-spacing-x-small);
|
|
}
|
|
|
|
.dialog:not(.dialog--has-footer) .dialog__footer {
|
|
display: none;
|
|
}
|
|
|
|
.dialog__overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: var(--sl-overlay-background-color);
|
|
}
|
|
`;
|