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

feat(dropdowns): Dropdowns inside nav

Browse source
This commit is contained in:
Lucas Larroche 2022-02-27 22:43:15 +07:00
parent 37b6aaab39
commit e54d1ee4f7
20 changed files with 416 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

88
css/pico.classless.css
View file

@ -1808,7 +1808,7 @@ canvas {
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing));
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
}
details summary {
@ -1831,12 +1831,12 @@ details summary::-moz-list-bullet {
}
details summary::after {
display: block;
width: 1rem;
width: 1.5rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-position: right;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@ -1871,6 +1871,7 @@ details[open] > summary::after {
}
[dir=rtl] details summary::after {
float: left;
background-position: left;
}
/**
@ -2103,45 +2104,30 @@ details[role=list] {
details[role=list] summary {
margin: 0;
}
details[role=list] summary:not([role=button]) {
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);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
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 {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
details[role=list] summary:not([role=button])::after {
height: 100%;
}
details[role=list] summary + ul {
display: flex;
z-index: 99;
position: absolute;
top: auto;
right: 0;
left: 0;
flex-direction: column;
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-top: none;
border-radius: var(--border-radius);
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(--dropdown-background-color);
box-shadow: var(--card-box-shadow);
color: var(--dropdown-color);
white-space: nowrap;
}
details[role=list] summary + ul li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
list-style: none;
@ -2163,6 +2149,7 @@ details[role=list] summary + ul li a:hover {
background-color: var(--dropdown-hover-background-color);
}
details[role=list] summary::after {
height: calc(1rem * var(--line-height));
transform: rotate(0deg);
}
details[role=list][disabled] summary, details[role=list].disabled summary {
@ -2188,6 +2175,57 @@ details[role=list][open] summary::before {
cursor: default;
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]) {
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);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):active, *:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
nav ul li details[role=list] {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
}
nav ul li details[role=list] summary:not([role=button]) {
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
line-height: var(--line-height);
}
nav ul li details[role=list] summary:not([role=button]):focus {
background-color: var(--primary-focus);
}
nav ul li details[role=list] summary:not([role=button]) a {
pointer-events: none;
}
nav ul li details[role=list] summary:not([role=button]) a:focus {
background-color: transparent;
}
nav ul li details[role=list][open] summary {
border-radius: var(--border-radius);
}
nav ul li details[role=list][open] summary + ul {
margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
border-radius: var(--border-radius);
}
nav ul li details[role=list][open] summary + ul a {
border-radius: 0;
}
nav ul li details[role=list][open] summary[role=button] + ul {
margin-top: var(--nav-link-spacing-horizontal);
}
/**
* Loading ([aria-busy=true])
*/

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

88
css/pico.css
View file

@ -2006,7 +2006,7 @@ canvas {
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing));
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
}
details summary {
@ -2029,12 +2029,12 @@ details summary::-moz-list-bullet {
}
details summary::after {
display: block;
width: 1rem;
width: 1.5rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-position: right;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@ -2072,6 +2072,7 @@ details[open] > summary::after {
}
[dir=rtl] details summary::after {
float: left;
background-position: left;
}
/**
@ -2400,45 +2401,30 @@ details[role=list] {
details[role=list] summary {
margin: 0;
}
details[role=list] summary:not([role=button]) {
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);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
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 {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
details[role=list] summary:not([role=button])::after {
height: 100%;
}
details[role=list] summary + ul {
display: flex;
z-index: 99;
position: absolute;
top: auto;
right: 0;
left: 0;
flex-direction: column;
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-top: none;
border-radius: var(--border-radius);
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(--dropdown-background-color);
box-shadow: var(--card-box-shadow);
color: var(--dropdown-color);
white-space: nowrap;
}
details[role=list] summary + ul li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
list-style: none;
@ -2460,6 +2446,7 @@ details[role=list] summary + ul li a:hover {
background-color: var(--dropdown-hover-background-color);
}
details[role=list] summary::after {
height: calc(1rem * var(--line-height));
transform: rotate(0deg);
}
details[role=list][disabled] summary, details[role=list].disabled summary {
@ -2485,6 +2472,57 @@ details[role=list][open] summary::before {
cursor: default;
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]) {
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);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):active, *:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
nav ul li details[role=list] {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
}
nav ul li details[role=list] summary:not([role=button]) {
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
line-height: var(--line-height);
}
nav ul li details[role=list] summary:not([role=button]):focus {
background-color: var(--primary-focus);
}
nav ul li details[role=list] summary:not([role=button]) a {
pointer-events: none;
}
nav ul li details[role=list] summary:not([role=button]) a:focus {
background-color: transparent;
}
nav ul li details[role=list][open] summary {
border-radius: var(--border-radius);
}
nav ul li details[role=list][open] summary + ul {
margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
border-radius: var(--border-radius);
}
nav ul li details[role=list][open] summary + ul a {
border-radius: 0;
}
nav ul li details[role=list][open] summary[role=button] + ul {
margin-top: var(--nav-link-spacing-horizontal);
}
/**
* Loading ([aria-busy=true])
*/

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -1778,7 +1778,7 @@ canvas {
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing));
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
}
details summary {
@ -1801,12 +1801,12 @@ details summary::-moz-list-bullet {
}
details summary::after {
display: block;
width: 1rem;
width: 1.5rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-position: right;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@ -1841,6 +1841,7 @@ details[open] > summary::after {
}
[dir=rtl] details summary::after {
float: left;
background-position: left;
}
/**
@ -2073,45 +2074,30 @@ details[role=list] {
details[role=list] summary {
margin: 0;
}
details[role=list] summary:not([role=button]) {
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);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
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 {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
details[role=list] summary:not([role=button])::after {
height: 100%;
}
details[role=list] summary + ul {
display: flex;
z-index: 99;
position: absolute;
top: auto;
right: 0;
left: 0;
flex-direction: column;
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-top: none;
border-radius: var(--border-radius);
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(--dropdown-background-color);
box-shadow: var(--card-box-shadow);
color: var(--dropdown-color);
white-space: nowrap;
}
details[role=list] summary + ul li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
list-style: none;
@ -2133,6 +2119,7 @@ details[role=list] summary + ul li a:hover {
background-color: var(--dropdown-hover-background-color);
}
details[role=list] summary::after {
height: calc(1rem * var(--line-height));
transform: rotate(0deg);
}
details[role=list][disabled] summary, details[role=list].disabled summary {
@ -2158,6 +2145,57 @@ details[role=list][open] summary::before {
cursor: default;
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]) {
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);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):active, *:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
*:not(nav > ul > li):not(nav > aside > ul > li) > details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
nav ul li details[role=list] {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
}
nav ul li details[role=list] summary:not([role=button]) {
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
line-height: var(--line-height);
}
nav ul li details[role=list] summary:not([role=button]):focus {
background-color: var(--primary-focus);
}
nav ul li details[role=list] summary:not([role=button]) a {
pointer-events: none;
}
nav ul li details[role=list] summary:not([role=button]) a:focus {
background-color: transparent;
}
nav ul li details[role=list][open] summary {
border-radius: var(--border-radius);
}
nav ul li details[role=list][open] summary + ul {
margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
border-radius: var(--border-radius);
}
nav ul li details[role=list][open] summary + ul a {
border-radius: 0;
}
nav ul li details[role=list][open] summary[role=button] + ul {
margin-top: var(--nav-link-spacing-horizontal);
}
/**
* Loading ([aria-busy=true])
*/

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

44
docs/dropdowns.html
View file

File diff suppressed because one or more lines are too long

2
docs/rtl.html
View file

File diff suppressed because one or more lines are too long

101
docs/src/dropdowns.html
View file

@ -21,18 +21,21 @@
<h2>Dropdown menus and custom selects without JavaScript.</h2>
</hgroup>
<p>Dropdowns are built with <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a wrapper and <code>&lt;<b>summary</b>&gt;</code> and <code>&lt;<b>ul</b>&gt;</code> as direct childs.</p>
<p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html"><code>&lt;<b>select</b>&gt;</code></a> by default.</p>
<article aria-label="Dropdown style">
<details role="list">
<p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html">&lt;select&gt;</a> by default.</p>
<article aria-label="Dropdowns as Selects">
<details role="list">x
<summary aria-haspopup="listbox">Dropdown</summary>
<ul role="listbox">
<li><a href="#">Mauris vehicula velit</a></li>
<li><a href="#">Nunc dignissim sapien</a></li>
<li><a href="#">Aenean egestas quam</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</details>
<select required>
<option value="" disabled selected>Select</option>
<option>Option</option>
<option>Another option</option>
<option>Something else here</option>
</select>
<footer class="code">
@ -40,9 +43,9 @@
&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;Mauris vehicula velit&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Nunc dignissim sapien&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Aenean egestas quam&lt;/<b>a</b>&gt;&lt;/<b>li</b>&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;
@ -56,29 +59,29 @@
</footer>
</article>
<p><code><i>role</i>=<u>"button"</u></code> on the <code>&lt;<b>summary</b>&gt;</code> element can be used to turn the dropdown into a button.</p>
<article aria-label="Dropdown style">
<article aria-label="Dropdowns as Buttons">
<details role="list">
<summary aria-haspopup="listbox" role="button">Dropdown as a button 1</summary>
<ul role="listbox">
<li><a href="#">Mauris vehicula velit</a></li>
<li><a href="#">Nunc dignissim sapien</a></li>
<li><a href="#">Aenean egestas quam</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox" role="button" class="secondary">Dropdown as a button 2</summary>
<ul role="listbox">
<li><a href="#">Mauris vehicula velit</a></li>
<li><a href="#">Nunc dignissim sapien</a></li>
<li><a href="#">Aenean egestas quam</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox" role="button" class="contrast">Dropdown as a button 3</summary>
<ul role="listbox">
<li><a href="#">Mauris vehicula velit</a></li>
<li><a href="#">Nunc dignissim sapien</a></li>
<li><a href="#">Aenean egestas quam</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</details>
<footer class="code">
@ -89,7 +92,9 @@
Dropdown as a button 1
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
<em>…</em>
&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;
@ -99,7 +104,9 @@
Dropdown as a button 2
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
<em>…</em>
&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;
@ -109,7 +116,9 @@
Dropdown as a button 3
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
<em>…</em>
&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;
</code></pre>
@ -117,7 +126,7 @@
</footer>
</article>
<p>Dropdowns can be used as custom selects with <code>&lt;<b>input</b> <i>type</i>=<u>"radio"</u>&gt;</code> or <code>&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;</code></p>
<article aria-label="Dropdown style">
<article aria-label="Dropdowns with radio buttons or checkboxes">
<details role="list">
<summary aria-haspopup="listbox">Select single element</summary>
<ul role="listbox">
@ -218,6 +227,52 @@
</footer>
</article>
<p>Dropdowns can be used inside the <a href="navs.html">&lt;nav&gt;</a> component.</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">Dropdown</summary>
<ul role="listbox">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">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>&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>ℹ️&nbsp;Dropdowns inside a <code>&lt;<b>nav</b>&gt;</code> are still experimental and will probably evolve.</p>
</section>
${require('./_footer.html')}

2
docs/src/rtl.html
View file

@ -27,7 +27,7 @@
<em>...</em>
&lt;/<b>html</b>&gt;</code></pre>
<p>The RTL feature is still experimental and will probably evolve.</p>
<p>ℹ️&nbsp;The RTL feature is still experimental and will probably evolve.</p>
</section>
${require('./_footer.html')}

142
scss/components/_dropdown.scss
View file

@ -6,63 +6,31 @@ details[role="list"] {
summary {
margin: 0;
&:not([role="button"]) {
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);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
@if $enable-transitions {
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
// Active & Focus
&:active,
&:focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
// Focus
&:focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
// Marker
&::after {
height: 100%;
}
}
& + ul {
display: flex;
z-index: 99;
position: absolute;
top: auto;
right: 0;
left: 0;
flex-direction: column;
min-width: fit-content;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-top: none;
border-radius: var(--border-radius);
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(--dropdown-background-color);
box-shadow: var(--card-box-shadow);
color: var(--dropdown-color);
white-space: nowrap;
li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
list-style: none;
&:first-of-type {
@ -75,8 +43,10 @@ details[role="list"] {
a {
display: block;
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);
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;
@ -85,10 +55,11 @@ details[role="list"] {
}
}
}
}
// Marker
&::after {
height: calc(1rem * var(--line-height));
transform: rotate(0deg);
}
}
@ -113,8 +84,93 @@ details[role="list"] {
bottom: 0;
left: 0;
background: transparent;
content: '';
content: "";
cursor: default;
}
}
}
// <summary> as a <select>
*:not(nav > ul > li):not(nav > aside > ul > li) {
> details[role="list"] {
summary {
&:not([role="button"]) {
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);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
@if $enable-transitions {
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
&:active,
&:focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
&:focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
}
}
}
}
// Dropdown inside <nav>
nav ul li {
details[role="list"] {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1)
calc(var(--nav-link-spacing-horizontal) * -1);
summary:not([role="button"]) {
padding: var(--nav-link-spacing-vertical)
var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
line-height: var(--line-height);
&:focus {
background-color: var(--primary-focus);
}
a {
pointer-events: none;
&:focus {
background-color: transparent;
}
}
}
&[open] summary {
border-radius: var(--border-radius);
& + ul {
margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
border-radius: var(--border-radius);
a {
border-radius: 0;
}
}
&[role="button"] {
& + ul {
margin-top: var(--nav-link-spacing-horizontal);
}
}
}
}
}

4
scss/components/_modal.scss
View file

@ -58,7 +58,7 @@ dialog {
> footer {
text-align: right;
[role='button'] {
[role="button"] {
margin-bottom: 0;
&:not(:first-of-type) {
@ -104,7 +104,7 @@ dialog {
// Closed state
&:not([open]),
&[open='false'] {
&[open="false"] {
display: none;
}
}

2
scss/utilities/_loading.scss
View file

@ -18,7 +18,7 @@
border: 0.1875em solid currentColor;
border-radius: 1em;
border-right-color: transparent;
content: '';
content: "";
vertical-align: text-bottom;
vertical-align: -.125em; // Visual alignment
animation: spinner 0.75s linear infinite;

2
scss/utilities/_tooltip.scss
View file

@ -44,7 +44,7 @@
border-left: .3rem solid transparent;
border-radius: 0;
background-color: transparent;
content: '';
content: "";
color: var(--tooltip-background-color);
}