mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 18: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-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);
@ -378,7 +378,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);
@ -479,7 +479,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);
@ -2152,15 +2152,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);
}

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-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);
}

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-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);
@ -378,7 +378,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);
@ -479,7 +479,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);
@ -2122,15 +2122,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);
}

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-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);
@ -315,7 +315,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);
@ -416,7 +416,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);

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-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);
@ -379,7 +379,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);
@ -480,7 +480,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);

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