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

style(dropdowns): Better support for :focus

Browse source
This commit is contained in:
Lucas Larroche 2022-02-27 17:21:13 +07:00
parent f7ed336ac0
commit 2906e37f7a
26 changed files with 55 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

15
css/pico.css
View file

@ -281,7 +281,7 @@ kbd {
--dropdown-border-color: #e1e6eb;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-focus-background-color: #edf0f3;
--dropdown-hover-background-color: #edf0f3;
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
@ -383,7 +383,7 @@ kbd {
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-focus-background-color: rgba(36, 51, 62, 0.75);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -484,7 +484,7 @@ kbd {
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-focus-background-color: rgba(36, 51, 62, 0.75);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -2449,15 +2449,16 @@ details[role=list] summary + ul li:first-of-type {
details[role=list] summary + ul li:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
}
details[role=list] summary + ul li:hover {
background-color: var(--dropdown-focus-background-color);
}
details[role=list] summary + ul li a {
display: block;
width: 100%;
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
color: var(--dropdown-color);
text-decoration: none;
}
details[role=list] summary + ul li a:hover {
background-color: var(--dropdown-hover-background-color);
}
details[role=list] summary::after {
transform: rotate(0deg);
}