sudovanilla-website/public/@shoelace-style/shoelace/cdn/chunks/chunk.YTM7ZJIT.js

169 lines
3.1 KiB
JavaScript
Raw Normal View History

2024-05-13 22:34:06 -05:00
import {
component_styles_default
} from "./chunk.K23QWHWK.js";
import {
i
} from "./chunk.CXZZ2LVK.js";
// src/components/drawer/drawer.styles.ts
var drawer_styles_default = i`
${component_styles_default}
:host {
--size: 25rem;
--header-spacing: var(--sl-spacing-large);
--body-spacing: var(--sl-spacing-large);
--footer-spacing: var(--sl-spacing-large);
display: contents;
}
.drawer {
top: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.drawer--contained {
position: absolute;
z-index: initial;
}
.drawer--fixed {
position: fixed;
z-index: var(--sl-z-index-drawer);
}
.drawer__panel {
position: absolute;
display: flex;
flex-direction: column;
z-index: 2;
max-width: 100%;
max-height: 100%;
background-color: var(--sl-panel-background-color);
box-shadow: var(--sl-shadow-x-large);
overflow: auto;
pointer-events: all;
}
.drawer__panel:focus {
outline: none;
}
.drawer--top .drawer__panel {
top: 0;
inset-inline-end: auto;
bottom: auto;
inset-inline-start: 0;
width: 100%;
height: var(--size);
}
.drawer--end .drawer__panel {
top: 0;
inset-inline-end: 0;
bottom: auto;
inset-inline-start: auto;
width: var(--size);
height: 100%;
}
.drawer--bottom .drawer__panel {
top: auto;
inset-inline-end: auto;
bottom: 0;
inset-inline-start: 0;
width: 100%;
height: var(--size);
}
.drawer--start .drawer__panel {
top: 0;
inset-inline-end: auto;
bottom: auto;
inset-inline-start: 0;
width: var(--size);
height: 100%;
}
.drawer__header {
display: flex;
}
.drawer__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;
}
.drawer__header-actions {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
justify-content: end;
gap: var(--sl-spacing-2x-small);
padding: 0 var(--header-spacing);
}
.drawer__header-actions sl-icon-button,
.drawer__header-actions ::slotted(sl-icon-button) {
flex: 0 0 auto;
display: flex;
align-items: center;
font-size: var(--sl-font-size-medium);
}
.drawer__body {
flex: 1 1 auto;
display: block;
padding: var(--body-spacing);
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.drawer__footer {
text-align: right;
padding: var(--footer-spacing);
}
.drawer__footer ::slotted(sl-button:not(:last-of-type)) {
margin-inline-end: var(--sl-spacing-x-small);
}
.drawer:not(.drawer--has-footer) .drawer__footer {
display: none;
}
.drawer__overlay {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--sl-overlay-background-color);
pointer-events: all;
}
.drawer--contained .drawer__overlay {
display: none;
}
@media (forced-colors: active) {
.drawer__panel {
border: solid 1px var(--sl-color-neutral-0);
}
}
`;
export {
drawer_styles_default
};