mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 18:56:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added Notifications 12

Browse source
This commit is contained in:
Yohn 2024-11-10 11:53:24 -05:00
parent 2c8e70a149
commit 84ed38efc9
240 changed files with 4885 additions and 119 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,

3
scss/colors/utilities/_utils.scss
View file

@ -1,6 +1,7 @@
@use "sass:color";
@use "sass:math";
@use "sass:map";
@use "sass:string";
@use "settings";
// Determines if the foreground needs to be light or dark
@ -54,5 +55,5 @@
// Display color as RGB
@function display-rgb($color) {
@return unquote("rgb(" + red($color) + ", " + green($color) + ", " + blue($color) + ")");
@return string.unquote("rgb(" + color.channel($color, "red", $space: rgb) + ", " + color.channel($color, "green", $space: rgb) + ", " + color.channel($color, "blue", $space: rgb) + ")");
}

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);
}
}