mirror of
https://github.com/CharaChorder/DeviceManager.git
synced 2026-01-19 00:13:01 +00:00
52 lines
956 B
SCSS
52 lines
956 B
SCSS
$animation-duration: 150ms;
|
|
$translate: translateY(8px);
|
|
|
|
[popover] {
|
|
position: absolute;
|
|
inset: unset;
|
|
transform: $translate;
|
|
|
|
margin: 0;
|
|
padding: 8px;
|
|
border: 1px solid var(--md-sys-color-outline);
|
|
border-radius: 8px;
|
|
|
|
color: var(--md-sys-color-on-surface);
|
|
|
|
opacity: 0;
|
|
background: var(--md-sys-color-surface);
|
|
|
|
transition:
|
|
transform $animation-duration ease,
|
|
opacity $animation-duration ease,
|
|
overlay $animation-duration allow-discrete,
|
|
display $animation-duration allow-discrete;
|
|
|
|
position-area: bottom span-right;
|
|
position-try-fallbacks:
|
|
top span-right,
|
|
bottom span-left,
|
|
top span-left;
|
|
|
|
position-visibility: no-overflow;
|
|
|
|
&:popover-open {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
> h1:first-child,
|
|
h2:first-child,
|
|
h3:first-child {
|
|
margin-top: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@starting-style {
|
|
[popover]:popover-open {
|
|
transform: $translate;
|
|
opacity: 0;
|
|
}
|
|
}
|