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

chore: updated implementation with proper roles and aria attributes

Browse source
This commit is contained in:
KiranMantha 2021-12-31 12:47:02 +05:30
parent 25d7c7983f
commit aaa4aebb2f
15 changed files with 81 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

34
css/pico.css
View file

@ -2316,22 +2316,22 @@ progress::-moz-progress-bar {
background-position: -200% 0;
}
}
details[role=dropdown] {
details[role=list] {
position: relative;
padding: 0;
border-bottom: none;
}
details[role=dropdown] summary {
details[role=list] summary {
margin-bottom: 0;
padding: calc(var(--spacing) * 0.5);
border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius);
cursor: pointer;
}
details[role=dropdown] summary::after {
details[role=list] summary::after {
transform: rotate(0deg);
}
details[role=dropdown] summary + ul {
details[role=list] summary + ul {
z-index: 100;
position: absolute;
top: auto;
@ -2346,33 +2346,33 @@ details[role=dropdown] summary + ul {
background-color: var(--background-color);
list-style: none;
}
details[role=dropdown] summary + ul li {
details[role=list] summary + ul li {
margin-bottom: 0;
}
details[role=dropdown] summary + ul li::marker {
details[role=list] summary + ul li::marker {
content: "";
}
details[role=dropdown] summary + ul li input[type=radio],
details[role=dropdown] summary + ul li input[type=checkbox] {
details[role=list] summary + ul li input[type=radio],
details[role=list] summary + ul li input[type=checkbox] {
display: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
details[role=dropdown] summary + ul li label {
details[role=list] summary + ul li label {
position: relative;
width: 100%;
margin: 0;
padding: calc(var(--spacing) * 0.5);
line-height: 1;
}
details[role=dropdown] summary + ul li label:hover {
details[role=list] summary + ul li label:hover {
background-color: var(--secondary-focus);
}
details[role=dropdown] summary + ul li input:checked + label {
details[role=list] summary + ul li input:checked + label {
background-color: var(--secondary-focus);
}
details[role=dropdown] summary + ul li input[type=checkbox] + label:before {
details[role=list] summary + ul li input[type=checkbox] + label:before {
display: inline-block;
width: calc(var(--spacing) * 1.2);
height: calc(var(--spacing) * 1.2);
@ -2382,24 +2382,24 @@ details[role=dropdown] summary + ul li input[type=checkbox] + label:before {
content: "";
vertical-align: text-bottom;
}
details[role=dropdown] summary + ul li input[type=checkbox]:checked + label:before {
details[role=list] summary + ul li input[type=checkbox]:checked + label:before {
background-image: var(--icon-checkbox);
background-position: center;
background-size: calc(var(--spacing) * 0.8) auto;
background-repeat: no-repeat;
background-color: var(--primary);
}
details[role=dropdown][disabled] summary, details[role=dropdown].disabled summary {
details[role=list][disabled] summary, details[role=list].disabled summary {
color: var(--muted-color);
cursor: not-allowed;
pointer-events: none;
}
details[role=dropdown][open] summary {
details[role=list][open] summary {
margin-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
details[role=dropdown][open] summary::before {
details[role=list][open] summary::before {
display: block;
z-index: 80;
position: fixed;
@ -2411,7 +2411,7 @@ details[role=dropdown][open] summary::before {
content: " ";
cursor: default;
}
details[role=dropdown][open] summary::after {
details[role=list][open] summary::after {
transform: rotate(180deg);
}