kopia lustrzana https://github.com/shoelace-style/shoelace
59 wiersze
1.3 KiB
TypeScript
59 wiersze
1.3 KiB
TypeScript
import { css } from 'lit';
|
|
import componentStyles from '~/styles/component.styles';
|
|
|
|
export default css`
|
|
${componentStyles}
|
|
|
|
:host {
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown__trigger {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown__positioner {
|
|
position: absolute;
|
|
z-index: var(--sl-z-index-dropdown);
|
|
}
|
|
|
|
.dropdown__panel {
|
|
max-height: 75vh;
|
|
font-family: var(--sl-font-sans);
|
|
font-size: var(--sl-font-size-medium);
|
|
font-weight: var(--sl-font-weight-normal);
|
|
color: var(--color);
|
|
background-color: var(--sl-panel-background-color);
|
|
border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
|
|
border-radius: var(--sl-border-radius-medium);
|
|
box-shadow: var(--sl-shadow-large);
|
|
overflow: auto;
|
|
overscroll-behavior: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dropdown--open .dropdown__panel {
|
|
pointer-events: all;
|
|
}
|
|
|
|
.dropdown__positioner[data-popper-placement^='top'] .dropdown__panel {
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
.dropdown__positioner[data-popper-placement^='bottom'] .dropdown__panel {
|
|
transform-origin: top;
|
|
}
|
|
|
|
.dropdown__positioner[data-popper-placement^='left'] .dropdown__panel {
|
|
transform-origin: right;
|
|
}
|
|
|
|
.dropdown__positioner[data-popper-placement^='right'] .dropdown__panel {
|
|
transform-origin: left;
|
|
}
|
|
`;
|