mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 09:26:14 -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.classless.css
View file

@ -276,7 +276,7 @@ kbd {
--dropdown-border-color: #e1e6eb; --dropdown-border-color: #e1e6eb;
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-focus-background-color: #edf0f3; --dropdown-hover-background-color: #edf0f3;
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2; --progress-background-color: #d5dce2;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -378,7 +378,7 @@ kbd {
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --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); --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -479,7 +479,7 @@ kbd {
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --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); --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -2152,15 +2152,16 @@ details[role=list] summary + ul li:first-of-type {
details[role=list] summary + ul li:last-of-type { details[role=list] summary + ul li:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5); 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 { details[role=list] summary + ul li a {
display: block; 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); color: var(--dropdown-color);
text-decoration: none; text-decoration: none;
} }
details[role=list] summary + ul li a:hover {
background-color: var(--dropdown-hover-background-color);
}
details[role=list] summary::after { details[role=list] summary::after {
transform: rotate(0deg); transform: rotate(0deg);
} }

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

15
css/pico.css
View file

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

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -276,7 +276,7 @@ kbd {
--dropdown-border-color: #e1e6eb; --dropdown-border-color: #e1e6eb;
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-focus-background-color: #edf0f3; --dropdown-hover-background-color: #edf0f3;
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2; --progress-background-color: #d5dce2;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -378,7 +378,7 @@ kbd {
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --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); --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -479,7 +479,7 @@ kbd {
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --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); --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -2122,15 +2122,16 @@ details[role=list] summary + ul li:first-of-type {
details[role=list] summary + ul li:last-of-type { details[role=list] summary + ul li:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5); 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 { details[role=list] summary + ul li a {
display: block; 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); color: var(--dropdown-color);
text-decoration: none; text-decoration: none;
} }
details[role=list] summary + ul li a:hover {
background-color: var(--dropdown-hover-background-color);
}
details[role=list] summary::after { details[role=list] summary::after {
transform: rotate(0deg); transform: rotate(0deg);
} }

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

6
css/pico.slim.css
View file

@ -213,7 +213,7 @@ kbd {
--dropdown-border-color: #e1e6eb; --dropdown-border-color: #e1e6eb;
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-focus-background-color: #edf0f3; --dropdown-hover-background-color: #edf0f3;
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2; --progress-background-color: #d5dce2;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -315,7 +315,7 @@ kbd {
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --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); --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -416,7 +416,7 @@ kbd {
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --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); --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);

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

6
css/themes/default.css
View file

@ -277,7 +277,7 @@ kbd {
--dropdown-border-color: #e1e6eb; --dropdown-border-color: #e1e6eb;
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-focus-background-color: #edf0f3; --dropdown-hover-background-color: #edf0f3;
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2; --progress-background-color: #d5dce2;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -379,7 +379,7 @@ kbd {
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --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); --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
@ -480,7 +480,7 @@ kbd {
--dropdown-border-color: #24333e; --dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --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); --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);

2
css/themes/default.css.map
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css.map
View file

File diff suppressed because one or more lines are too long

43
docs/dropdown.html
View file

File diff suppressed because one or more lines are too long

2
docs/dropdowns.html
View file

File diff suppressed because one or more lines are too long

2
docs/src/dropdowns.html
View file

@ -21,7 +21,7 @@
<h2>Dropdown menus and custom selects without JavaScript.</h2> <h2>Dropdown menus and custom selects without JavaScript.</h2>
</hgroup> </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>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 as a <a href="forms.html"><code>&lt;<b>select</b>&gt;</code></a> by default.</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"> <article aria-label="Dropdown style">
<details role="list"> <details role="list">
<summary aria-haspopup="listbox">Dropdown</summary> <summary aria-haspopup="listbox">Dropdown</summary>

11
scss/components/_dropdown.scss
View file

@ -73,15 +73,16 @@ details[role="list"] {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5); margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
} }
&:hover {
background-color: var(--dropdown-focus-background-color);
}
a { a {
display: block; 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); color: var(--dropdown-color);
text-decoration: none; text-decoration: none;
&:hover {
background-color: var(--dropdown-hover-background-color);
}
} }
} }

2
scss/themes/default/_dark.scss
View file

@ -117,7 +117,7 @@
--dropdown-border-color: #{mix($grey-900, $grey-800)}; --dropdown-border-color: #{mix($grey-900, $grey-800)};
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-focus-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)}; --dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
// Modal (<dialog>) // Modal (<dialog>)
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)}; --modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};

2
scss/themes/default/_light.scss
View file

@ -117,7 +117,7 @@
--dropdown-border-color: #{mix($grey-100, $grey-50)}; --dropdown-border-color: #{mix($grey-100, $grey-50)};
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-focus-background-color: #{$grey-50}; --dropdown-hover-background-color: #{$grey-50};
// Modal (<dialog>) // Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-100, 0.8)}; --modal-overlay-background-color: #{rgba($grey-100, 0.8)};