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

style(dropdowns)

Browse source
This commit is contained in:
Lucas Larroche 2022-03-06 09:37:03 +07:00
parent 667c94951a
commit 9a0db7ab7f
22 changed files with 300 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

52
css/pico.classless.css
View file

@ -662,7 +662,8 @@ ul {
font-size: var(--font-size);
}
a {
a,
[role=link] {
--color: var(--primary);
--background-color: transparent;
outline: none;
@ -674,11 +675,16 @@ a {
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
}
a[aria-current], a:hover, a:active, a:focus {
a[aria-current], a:hover, a:active, a:focus,
[role=link][aria-current],
[role=link]:hover,
[role=link]:active,
[role=link]:focus {
--color: var(--primary-hover);
--text-decoration: underline;
}
a:focus {
a:focus,
[role=link]:focus {
--background-color: var(--primary-focus);
}
@ -1817,7 +1823,7 @@ details summary {
cursor: pointer;
transition: color var(--transition);
}
details summary:not([role=button]) {
details summary:not([role]) {
color: var(--accordion-close-summary-color);
}
details summary::-webkit-details-marker {
@ -1859,7 +1865,7 @@ details summary[role=button]::after {
details[open] > summary {
margin-bottom: calc(var(--spacing));
}
details[open] > summary:not([role=button]):not(:focus) {
details[open] > summary:not([role]):not(:focus) {
color: var(--accordion-open-summary-color);
}
details[open] > summary::after {
@ -2000,14 +2006,19 @@ nav li {
nav li > * {
--spacing: 0;
}
nav a {
nav a,
nav [role=link] {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
text-decoration: none;
}
nav a[aria-current], nav a:hover, nav a:active, nav a:focus {
nav a[aria-current], nav a:hover, nav a:active, nav a:focus,
nav [role=link][aria-current],
nav [role=link]:hover,
nav [role=link]:active,
nav [role=link]:focus {
text-decoration: none;
}
@ -2185,7 +2196,7 @@ details[role=list] {
details[role=list] summary {
margin-bottom: 0;
}
details[role=list] summary:not([role=button]) {
details[role=list] summary:not([role]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
@ -2196,11 +2207,11 @@ details[role=list] summary:not([role=button]) {
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
details[role=list] summary:not([role=button]):focus {
details[role=list] summary:not([role]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
details[role=list][open] summary {
@ -2220,7 +2231,8 @@ details[role=list][open] summary::before {
cursor: default;
}
nav [role=list] summary, nav [role=list] a {
nav [role=list] summary,
nav [role=list] a {
display: flex;
direction: ltr;
}
@ -2236,11 +2248,25 @@ nav [role=list] > ul li a {
border-radius: 0;
}
nav [role=list] summary,
nav [role=list] summary:not([role]) {
height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
nav [role=list][open] summary {
border-radius: var(--border-radius);
}
nav [role=list] summary + ul {
margin-top: 2px;
margin-top: var(--outline-width);
}
nav [role=list] summary[role=link] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height);
}
nav [role=list] summary[role=link] + ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
}
li[role=list]:hover > ul,
@ -2250,7 +2276,7 @@ li[role=list] a:focus ~ ul {
}
li[role=list] > ul {
display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
}

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

76
css/pico.css
View file

@ -692,7 +692,8 @@ ul {
font-size: var(--font-size);
}
a {
a,
[role=link] {
--color: var(--primary);
--background-color: transparent;
outline: none;
@ -704,29 +705,46 @@ a {
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
}
a[aria-current], a:hover, a:active, a:focus {
a[aria-current], a:hover, a:active, a:focus,
[role=link][aria-current],
[role=link]:hover,
[role=link]:active,
[role=link]:focus {
--color: var(--primary-hover);
--text-decoration: underline;
}
a:focus {
a:focus,
[role=link]:focus {
--background-color: var(--primary-focus);
}
a.secondary {
a.secondary,
[role=link].secondary {
--color: var(--secondary);
}
a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus {
a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus,
[role=link].secondary[aria-current],
[role=link].secondary:hover,
[role=link].secondary:active,
[role=link].secondary:focus {
--color: var(--secondary-hover);
}
a.secondary:focus {
a.secondary:focus,
[role=link].secondary:focus {
--background-color: var(--secondary-focus);
}
a.contrast {
a.contrast,
[role=link].contrast {
--color: var(--contrast);
}
a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus {
a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus,
[role=link].contrast[aria-current],
[role=link].contrast:hover,
[role=link].contrast:active,
[role=link].contrast:focus {
--color: var(--contrast-hover);
}
a.contrast:focus {
a.contrast:focus,
[role=link].contrast:focus {
--background-color: var(--contrast-focus);
}
@ -2015,7 +2033,7 @@ details summary {
cursor: pointer;
transition: color var(--transition);
}
details summary:not([role=button]) {
details summary:not([role]) {
color: var(--accordion-close-summary-color);
}
details summary::-webkit-details-marker {
@ -2060,7 +2078,7 @@ details summary[role=button]:not(.outline).contrast::after {
details[open] > summary {
margin-bottom: calc(var(--spacing));
}
details[open] > summary:not([role=button]):not(:focus) {
details[open] > summary:not([role]):not(:focus) {
color: var(--accordion-open-summary-color);
}
details[open] > summary::after {
@ -2297,14 +2315,19 @@ nav li {
nav li > * {
--spacing: 0;
}
nav a {
nav a,
nav [role=link] {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
text-decoration: none;
}
nav a[aria-current], nav a:hover, nav a:active, nav a:focus {
nav a[aria-current], nav a:hover, nav a:active, nav a:focus,
nav [role=link][aria-current],
nav [role=link]:hover,
nav [role=link]:active,
nav [role=link]:focus {
text-decoration: none;
}
@ -2482,7 +2505,7 @@ details[role=list] {
details[role=list] summary {
margin-bottom: 0;
}
details[role=list] summary:not([role=button]) {
details[role=list] summary:not([role]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
@ -2493,11 +2516,11 @@ details[role=list] summary:not([role=button]) {
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
details[role=list] summary:not([role=button]):focus {
details[role=list] summary:not([role]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
details[role=list][open] summary {
@ -2517,7 +2540,8 @@ details[role=list][open] summary::before {
cursor: default;
}
nav [role=list] summary, nav [role=list] a {
nav [role=list] summary,
nav [role=list] a {
display: flex;
direction: ltr;
}
@ -2533,11 +2557,25 @@ nav [role=list] > ul li a {
border-radius: 0;
}
nav [role=list] summary,
nav [role=list] summary:not([role]) {
height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
nav [role=list][open] summary {
border-radius: var(--border-radius);
}
nav [role=list] summary + ul {
margin-top: 2px;
margin-top: var(--outline-width);
}
nav [role=list] summary[role=link] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height);
}
nav [role=list] summary[role=link] + ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
}
li[role=list]:hover > ul,
@ -2547,7 +2585,7 @@ li[role=list] a:focus ~ ul {
}
li[role=list] > ul {
display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
}

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

52
css/pico.fluid.classless.css
View file

@ -632,7 +632,8 @@ ul {
font-size: var(--font-size);
}
a {
a,
[role=link] {
--color: var(--primary);
--background-color: transparent;
outline: none;
@ -644,11 +645,16 @@ a {
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
}
a[aria-current], a:hover, a:active, a:focus {
a[aria-current], a:hover, a:active, a:focus,
[role=link][aria-current],
[role=link]:hover,
[role=link]:active,
[role=link]:focus {
--color: var(--primary-hover);
--text-decoration: underline;
}
a:focus {
a:focus,
[role=link]:focus {
--background-color: var(--primary-focus);
}
@ -1787,7 +1793,7 @@ details summary {
cursor: pointer;
transition: color var(--transition);
}
details summary:not([role=button]) {
details summary:not([role]) {
color: var(--accordion-close-summary-color);
}
details summary::-webkit-details-marker {
@ -1829,7 +1835,7 @@ details summary[role=button]::after {
details[open] > summary {
margin-bottom: calc(var(--spacing));
}
details[open] > summary:not([role=button]):not(:focus) {
details[open] > summary:not([role]):not(:focus) {
color: var(--accordion-open-summary-color);
}
details[open] > summary::after {
@ -1970,14 +1976,19 @@ nav li {
nav li > * {
--spacing: 0;
}
nav a {
nav a,
nav [role=link] {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
text-decoration: none;
}
nav a[aria-current], nav a:hover, nav a:active, nav a:focus {
nav a[aria-current], nav a:hover, nav a:active, nav a:focus,
nav [role=link][aria-current],
nav [role=link]:hover,
nav [role=link]:active,
nav [role=link]:focus {
text-decoration: none;
}
@ -2155,7 +2166,7 @@ details[role=list] {
details[role=list] summary {
margin-bottom: 0;
}
details[role=list] summary:not([role=button]) {
details[role=list] summary:not([role]) {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
@ -2166,11 +2177,11 @@ details[role=list] summary:not([role=button]) {
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
details[role=list] summary:not([role=button]):focus {
details[role=list] summary:not([role]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
details[role=list][open] summary {
@ -2190,7 +2201,8 @@ details[role=list][open] summary::before {
cursor: default;
}
nav [role=list] summary, nav [role=list] a {
nav [role=list] summary,
nav [role=list] a {
display: flex;
direction: ltr;
}
@ -2206,11 +2218,25 @@ nav [role=list] > ul li a {
border-radius: 0;
}
nav [role=list] summary,
nav [role=list] summary:not([role]) {
height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
nav [role=list][open] summary {
border-radius: var(--border-radius);
}
nav [role=list] summary + ul {
margin-top: 2px;
margin-top: var(--outline-width);
}
nav [role=list] summary[role=link] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height);
}
nav [role=list] summary[role=link] + ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
}
li[role=list]:hover > ul,
@ -2220,7 +2246,7 @@ li[role=list] a:focus ~ ul {
}
li[role=list] > ul {
display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
}

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

36
css/pico.slim.css
View file

@ -624,7 +624,8 @@ ul {
font-size: var(--font-size);
}
a {
a,
[role=link] {
--color: var(--primary);
--background-color: transparent;
outline: none;
@ -633,29 +634,46 @@ a {
-webkit-text-decoration: var(--text-decoration);
text-decoration: var(--text-decoration);
}
a[aria-current], a:hover, a:active, a:focus {
a[aria-current], a:hover, a:active, a:focus,
[role=link][aria-current],
[role=link]:hover,
[role=link]:active,
[role=link]:focus {
--color: var(--primary-hover);
--text-decoration: underline;
}
a:focus {
a:focus,
[role=link]:focus {
--background-color: var(--primary-focus);
}
a.secondary {
a.secondary,
[role=link].secondary {
--color: var(--secondary);
}
a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus {
a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus,
[role=link].secondary[aria-current],
[role=link].secondary:hover,
[role=link].secondary:active,
[role=link].secondary:focus {
--color: var(--secondary-hover);
}
a.secondary:focus {
a.secondary:focus,
[role=link].secondary:focus {
--background-color: var(--secondary-focus);
}
a.contrast {
a.contrast,
[role=link].contrast {
--color: var(--contrast);
}
a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus {
a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus,
[role=link].contrast[aria-current],
[role=link].contrast:hover,
[role=link].contrast:active,
[role=link].contrast:focus {
--color: var(--contrast-hover);
}
a.contrast:focus {
a.contrast:focus,
[role=link].contrast:focus {
--background-color: var(--contrast-focus);
}

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

26
docs/dropdowns.html
View file

@ -98,15 +98,37 @@
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
</code></pre></footer></article><p>Dropdowns can be used inside a <a href="navs.html">&lt;nav&gt;</a> with a nested <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code></p><article aria-label="Dropdowns inside a nav"><nav><ul><li><strong>Brand</strong></li></ul><ul><li><a href="#" onclick="event.preventDefault()">Link</a></li><li><a href="#" onclick="event.preventDefault()">Link</a></li><li><details role="list" dir="rtl"><summary aria-haspopup="listbox" role="button">Dropdown</summary><ul role="listbox"><li><a href="#" onclick="event.preventDefault()">Action</a></li><li><a href="#" onclick="event.preventDefault()">Another action</a></li><li><a href="#" onclick="event.preventDefault()">Something else here</a></li></ul></details></li></ul></nav><footer class="code"><pre><code>&lt;<b>nav</b>&gt;
</code></pre></footer></article><p>Dropdowns can be used inside a <a href="navs.html">&lt;nav&gt;</a> with a nested <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code></p><p>Example with a dropdown as a link:</p><article aria-label="Dropdowns inside a nav"><nav><ul><li><strong>Brand</strong></li></ul><ul><li><a href="#" onclick="event.preventDefault()">Link</a></li><li><details role="list" dir="rtl"><summary aria-haspopup="listbox" role="link">Dropdown</summary><ul role="listbox"><li><a href="#" onclick="event.preventDefault()">Action</a></li><li><a href="#" onclick="event.preventDefault()">Another action</a></li><li><a href="#" onclick="event.preventDefault()">Something else here</a></li></ul></details></li></ul></nav><footer class="code"><pre><code>&lt;<b>nav</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"link"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre></footer></article><p>Example with a default dropdown and a dropdown as a button:</p><article aria-label="Dropdowns inside a nav"><nav><ul><li><details role="list"><summary aria-haspopup="listbox">Dropdown</summary><ul role="listbox"><li><a href="#" onclick="event.preventDefault()">Action</a></li><li><a href="#" onclick="event.preventDefault()">Another action</a></li><li><a href="#" onclick="event.preventDefault()">Something else here</a></li></ul></details></li><li><details role="list"><summary aria-haspopup="listbox" role="button">Dropdown</summary><ul role="listbox"><li><a href="#" onclick="event.preventDefault()">Action</a></li><li><a href="#" onclick="event.preventDefault()">Another action</a></li><li><a href="#" onclick="event.preventDefault()">Something else here</a></li></ul></details></li></ul></nav><footer class="code"><pre><code>&lt;<b>nav</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;

60
docs/src/dropdowns.html
View file

@ -228,17 +228,17 @@
</footer>
</article>
<p>Dropdowns can be used inside a <a href="navs.html">&lt;nav&gt;</a> with a nested <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code></p>
<p>Example with a dropdown as a link:</p>
<article aria-label="Dropdowns inside a nav">
<nav>
<ul>
<li><strong>Brand</strong></li>
</ul>
<ul>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li>
<details role="list" dir="rtl">
<summary aria-haspopup="listbox" role="button">Dropdown</summary>
<summary aria-haspopup="listbox" role="link">Dropdown</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
@ -255,10 +255,64 @@
&lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"link"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>
</footer>
</article>
<p>Example with a default dropdown and a dropdown as a button:</p>
<article aria-label="Dropdowns inside a nav">
<nav>
<ul>
<li>
<details role="list">
<summary aria-haspopup="listbox">Dropdown</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
</li>
<li>
<details role="list">
<summary aria-haspopup="listbox" role="button">Dropdown</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
</li>
</ul>
</nav>
<footer class="code">
<pre><code>&lt;<b>nav</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;

7
scss/components/_accordion.scss
View file

@ -9,12 +9,11 @@ details {
border-bottom: var(--border-width) solid var(--accordion-border-color);
summary {
line-height: 1rem;
list-style-type: none;
cursor: pointer;
&:not([role="button"]) {
&:not([role]) {
color: var(--accordion-close-summary-color);
}
@ -73,10 +72,8 @@ details {
}
@if $enable-classes {
// .contrast
&:not(.outline).contrast {
// Marker
&::after {
background-image: var(--icon-chevron-button-inverse);
@ -91,7 +88,7 @@ details {
> summary {
margin-bottom: calc(var(--spacing));
&:not([role="button"]) {
&:not([role]) {
&:not(:focus) {
color: var(--accordion-open-summary-color);
}

33
scss/components/_dropdown.scss
View file

@ -2,7 +2,7 @@
* Dropdown ([role="list"])
*/
// Menu
// Menu
details[role="list"],
li[role="list"] {
position: relative;
@ -86,7 +86,7 @@ details[role="list"] {
summary {
margin-bottom: 0;
&:not([role="button"]) {
&:not([role]) {
height: calc(
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
var(--border-width) * 2
@ -140,7 +140,8 @@ details[role="list"] {
// All Dropdowns inside <nav>
nav [role="list"] {
summary, a {
summary,
a {
display: flex;
direction: ltr;
}
@ -158,17 +159,33 @@ nav [role="list"] {
// Dropdowns inside <nav> as nested <details>
nav [role="list"] {
summary,
summary:not([role]) {
height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
&[open] summary {
border-radius: var(--border-radius);
}
summary + ul {
margin-top: 2px;
margin-top: var(--outline-width);
}
summary[role="link"] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height);
+ ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
}
}
}
// Dropdowns inside a <nav> without using <details>
li[role="list"] {
// Open on hover (for mobile)
// or on active/focus (for keyboard navigation)
&:hover > ul,
@ -179,8 +196,10 @@ li[role="list"] {
> ul {
display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
margin-inline-start: calc(
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
);
}
> a::after {

12
scss/components/_nav.scss
View file

@ -29,7 +29,8 @@ nav {
li {
display: inline-block;
margin: 0;
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
padding: var(--nav-element-spacing-vertical)
var(--nav-element-spacing-horizontal);
// Minimal support for buttons and forms elements
> * {
@ -37,9 +38,11 @@ nav {
}
}
a {
a,
[role="link"] {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
margin: calc(var(--nav-link-spacing-vertical) * -1)
calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
text-decoration: none;
@ -63,7 +66,8 @@ aside {
}
li {
padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
padding: calc(var(--nav-element-spacing-vertical) * 0.5)
var(--nav-element-spacing-horizontal);
a {
display: block;

3
scss/content/_typography.scss
View file

@ -68,7 +68,8 @@ ul {
// Links
// 1. Remove the gray background on active links in IE 10
a {
a,
[role="link"] {
--color: var(--primary);
--background-color: transparent;
outline: none;