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

RTL Dropdown Nav corrected thanks to @64bitint

Browse source 
Added popovers to possibly replace the notifications.
Started adding popover toasts
This commit is contained in:
Yohn 2024-12-13 19:43:12 -05:00
parent 8a7b25a44f
commit 64373c2d44
244 changed files with 3461 additions and 724 deletions
Download patch file Download diff file Expand all files Collapse all files

9
scss/components/_nav.scss
View file

@ -10,10 +10,11 @@
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
:where(nav li)::before {
float: left;
content: "\200B";
}
// https://github.com/picocss/pico/issues/634#issuecomment-2541600508
//:where(nav li)::before {
// float: left;
// content: "\200B";
//}
// Pico
// ––––––––––––––––––––

37
scss/components/_popover-toast.scss Normal file
View file

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

26
scss/components/_popover.scss Normal file
View file

@ -0,0 +1,26 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/popover") {
#{$parent-selector} [popover] {
border-color: var(#{$css-var-prefix}primary);
&:popover-open {
margin: auto auto;
}
&::backdrop {
backdrop-filter: blur(3px);
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;
}
}
}