kopia lustrzana https://github.com/shoelace-style/shoelace
157 wiersze
2.9 KiB
TypeScript
157 wiersze
2.9 KiB
TypeScript
import { css } from 'lit';
|
|
|
|
export default css`
|
|
: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);
|
|
}
|
|
}
|
|
`;
|