picocss/scss/components/_popover-toast.scss
github-actions[bot] 951aae3801 Build CSS
2024-12-31 05:18:39 +00:00

37 lines
908 B
SCSS

@use "sass:map";
@use "../settings" as *;
// TODO: Complete this
// https://mdn.github.io/dom-examples/popover-api/toast-popovers/
// --pico-ins-color // success
// --pico-del-color // error
@if map.get($modules, "components/popover-toast") {
#{$parent-selector} [popover] {
border-color: var(#{$css-var-prefix}primary);
&[data-status="success"] {
border-color: var(--pico-ins-color);
}
&[data-status="failure"] {
border-color: var(--pico-del-color);
}
&:popover-open {
position: absolute;
right: 5px;
bottom: 5px;
inset: unset;
}
&::backdrop {
background: rgba(0, 0, 0, 0.7);
}
button {
margin-top: -10px;
padding: 0;
border: 0 none;
background: transparent;
color: var(#{$css-var-prefix}primary);
font-size: 1.5em;
opacity: 0.8;
}
}
}