mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-27 11:36:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: notification component

Browse source
This commit is contained in:
Aron Homberg 2024-05-29 14:47:54 +02:00
parent 6dc6489e69
commit c1b55d8659
239 changed files with 4883 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

1
scss/_index.scss
View file

@ -43,6 +43,7 @@
@use "components/nav"; // nav
@use "components/progress"; // progress
@use "components/tooltip"; // data-tooltip
@use "components/notification"; // dialog[role="alert"]
// Utilities
@use "utilities/accessibility"; // -ms-touch-action, aria-*

1
scss/_settings.scss
View file

@ -139,6 +139,7 @@ $modules: map.merge(
"components/nav": true,
"components/progress": true,
"components/tooltip": true,
"components/notification": true,
// Utilities
"utilities/accessibility": true,

43
scss/components/_notification.scss Normal file
View file

@ -0,0 +1,43 @@
@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);
}
}