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

corrected dropdown arrow colors for secondary, contrast, and primary. Also enabled the turning of the arrow when the dropdowns are open or closed

Browse source
This commit is contained in:
Yohn 2024-12-14 21:13:13 -05:00
parent 130b1cda4e
commit a6325b8991
255 changed files with 5385 additions and 2236 deletions
Download patch file Download diff file Expand all files Collapse all files

89
css/pico.conditional.css
View file

@ -219,14 +219,6 @@ nav details.dropdown summary:focus-visible {
--pico-form-element-spacing-horizontal: 2rem;
}
.pico details summary[role=button]:not(.outline)::after {
filter: brightness(0) invert(1);
}
.pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
filter: brightness(0) invert(0);
}
/**
* Color schemes
*/
@ -340,22 +332,25 @@ nav details.dropdown summary:focus-visible {
--pico-timeline-dot-border-color: var(--pico-primary-background);
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
}
[data-theme=light] .pico [aria-busy=true]:not(input, select, textarea).contrast:is(button,
[type=submit],
[type=button],
[type=reset],
[role=button]):not(.outline)::before,
:root:not([data-theme=dark]) .pico [aria-busy=true]:not(input, select, textarea).contrast:is(button,
[type=submit],
[type=button],
[type=reset],
[role=button]):not(.outline)::before,
:host(:not([data-theme=dark])) .pico [aria-busy=true]:not(input, select, textarea).contrast:is(button,
[type=submit],
[type=button],
[type=reset],
[role=button]):not(.outline)::before {
filter: invert(1) !important;
[data-theme=light] .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
:root:not([data-theme=dark]) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
:host(:not([data-theme=dark])) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
filter: brightness(100) invert(1);
}
[data-theme=light] .pico details summary.secondary[role=button]::after,
:root:not([data-theme=dark]) .pico details summary.secondary[role=button]::after,
:host(:not([data-theme=dark])) .pico details summary.secondary[role=button]::after {
filter: brightness(100) invert(1);
}
[data-theme=light] .pico details summary.contrast[role=button]::after,
:root:not([data-theme=dark]) .pico details summary.contrast[role=button]::after,
:host(:not([data-theme=dark])) .pico details summary.contrast[role=button]::after {
filter: brightness(100) invert(0);
}
[data-theme=light] .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
:root:not([data-theme=dark]) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
:host(:not([data-theme=dark])) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
filter: brightness(0) invert(1);
}
[data-theme=light] input:is([type=submit],
[type=button],
@ -514,9 +509,21 @@ nav details.dropdown summary:focus-visible {
[type=file]) {
--pico-form-element-focus-color: var(--pico-primary-focus);
}
:root:not([data-theme]) .pico details summary[role=button].contrast:not(.outline)::after,
:host(:not([data-theme])) .pico details summary[role=button].contrast:not(.outline)::after {
filter: brightness(0);
:root:not([data-theme]) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
:host(:not([data-theme])) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
filter: brightness(100) invert(1);
}
:root:not([data-theme]) .pico details summary.secondary[role=button]::after,
:host(:not([data-theme])) .pico details summary.secondary[role=button]::after {
filter: brightness(100) invert(0);
}
:root:not([data-theme]) .pico details summary.contrast[role=button]::after,
:host(:not([data-theme])) .pico details summary.contrast[role=button]::after {
filter: brightness(100) invert(1);
}
:root:not([data-theme]) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
:host(:not([data-theme])) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
filter: brightness(100) invert(0);
}
}
[data-theme=dark] {
@ -642,8 +649,17 @@ nav details.dropdown summary:focus-visible {
[type=file]) {
--pico-form-element-focus-color: var(--pico-primary-focus);
}
[data-theme=dark] .pico details summary[role=button].contrast:not(.outline)::after {
filter: brightness(0);
[data-theme=dark] .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
filter: brightness(100) invert(1);
}
[data-theme=dark] .pico details summary.secondary[role=button]::after {
filter: brightness(100) invert(0);
}
[data-theme=dark] .pico details summary.contrast[role=button]::after {
filter: brightness(100) invert(1);
}
[data-theme=dark] .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
filter: brightness(100) invert(0);
}
.pico progress,
@ -2860,6 +2876,7 @@ main {
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
transition: transform var(--pico-transition);
}
.pico details summary:focus {
outline: none;
@ -2885,6 +2902,10 @@ main {
.pico details[open] > summary:not([role]):not(:focus) {
color: var(--pico-accordion-open-summary-color);
}
.pico details[open] > summary::after {
transform: rotate(0);
}
[dir=rtl] .pico details summary {
text-align: right;
}
@ -2986,6 +3007,11 @@ main {
position: relative;
border-bottom: none;
}
.pico details.dropdown[open] > summary::after,
.pico details.dropdown[open] > button::after,
.pico details.dropdown[open] > a::after {
transform: rotate(0deg);
}
.pico details.dropdown > summary::after,
.pico details.dropdown > button::after,
.pico details.dropdown > a::after {
@ -2994,7 +3020,7 @@ main {
height: calc(1rem * var(--pico-line-height, 1.5));
margin-inline-start: 0.25rem;
float: right;
transform: rotate(0deg) translateX(0.2rem);
transform: rotate(-90deg);
background-image: var(--pico-icon-chevron);
background-position: right center;
background-size: 1rem auto;
@ -3045,9 +3071,6 @@ main {
display: inline;
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
}
.pico nav details.dropdown > summary::after {
transform: rotate(0deg) translateX(0rem);
}
.pico nav details.dropdown > summary:not([role]) {
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);