mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 01:46:14 -04:00
44 lines
1.3 KiB
SCSS
44 lines
1.3 KiB
SCSS
|
@use "sass:map";
|
||
|
|
@use "../settings" as *;
|
||
|
|
|
||
|
|
@if map.get($modules, "components/notification") {
|
||
|
|
/**
|
||
|
|
* Notification (<dialog>)
|
||
|
|
*/
|
||
|
|
|
||
|
|
dialog[role="alert"] {
|
||
|
|
position: fixed;
|
||
|
|
top: unset;
|
||
|
|
right: var(#{$css-var-prefix}spacing);
|
||
|
|
bottom: var(#{$css-var-prefix}spacing);
|
||
|
|
left: unset;
|
||
|
|
width: auto;
|
||
|
|
min-width: unset;
|
||
|
|
height: auto;
|
||
|
|
min-height: unset;
|
||
|
|
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
|
||
|
|
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||
|
|
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
|
||
|
|
border-radius: var(#{$css-var-prefix}border-radius);
|
||
|
|
backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
|
||
|
|
background-color: var(#{$css-var-prefix}primary-background);
|
||
|
|
box-shadow: var(#{$css-var-prefix}box-shadow);
|
||
|
|
color: var(#{$css-var-prefix}primary-inverse);
|
||
|
|
font-weight: var(#{$css-var-prefix}font-weight);
|
||
|
|
font-size: var(#{$css-var-prefix}font-size);
|
||
|
|
line-height: var(#{$css-var-prefix}line-height);
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity var(#{$css-var-prefix}transition);
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
dialog[data-backdrop="false"][role="alert"]::backdrop {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
dialog[role="alert"][open] {
|
||
|
|
opacity: 1;
|
||
|
|
transition: opacity var(#{$css-var-prefix}transition);
|
||
|
|
}
|
||
|
|
}
|