Skip to content

Commit a6325b8

Browse files
YohnYohn
committed
corrected dropdown arrow colors for secondary, contrast, and primary. Also enabled the turning of the arrow when the dropdowns are open or closed
1 parent 130b1cd commit a6325b8

File tree

255 files changed

+5385
-2236
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

255 files changed

+5385
-2236
lines changed

‎css/pico.amber.css‎

Lines changed: 56 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -219,14 +219,6 @@ nav details.dropdown summary:focus-visible {
219219
--pico-form-element-spacing-horizontal: 2rem;
220220
}
221221

222-
details summary[role=button]:not(.outline)::after {
223-
filter: brightness(0) invert(1);
224-
}
225-
226-
[aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
227-
filter: brightness(0) invert(0);
228-
}
229-
230222
/**
231223
* Color schemes
232224
*/
@@ -340,22 +332,25 @@ details summary[role=button]:not(.outline)::after {
340332
--pico-timeline-dot-border-color: var(--pico-primary-background);
341333
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
342334
}
343-
[data-theme=light] [aria-busy=true]:not(input, select, textarea).contrast:is(button,
344-
[type=submit],
345-
[type=button],
346-
[type=reset],
347-
[role=button]):not(.outline)::before,
348-
:root:not([data-theme=dark]) [aria-busy=true]:not(input, select, textarea).contrast:is(button,
349-
[type=submit],
350-
[type=button],
351-
[type=reset],
352-
[role=button]):not(.outline)::before,
353-
:host(:not([data-theme=dark])) [aria-busy=true]:not(input, select, textarea).contrast:is(button,
354-
[type=submit],
355-
[type=button],
356-
[type=reset],
357-
[role=button]):not(.outline)::before {
358-
filter: invert(1) !important;
335+
[data-theme=light] details summary[role=button]:not(.outline, .contrast, .secondary)::after,
336+
:root:not([data-theme=dark]) details summary[role=button]:not(.outline, .contrast, .secondary)::after,
337+
:host(:not([data-theme=dark])) details summary[role=button]:not(.outline, .contrast, .secondary)::after {
338+
filter: brightness(100) invert(1);
339+
}
340+
[data-theme=light] details summary.secondary[role=button]::after,
341+
:root:not([data-theme=dark]) details summary.secondary[role=button]::after,
342+
:host(:not([data-theme=dark])) details summary.secondary[role=button]::after {
343+
filter: brightness(100) invert(1);
344+
}
345+
[data-theme=light] details summary.contrast[role=button]::after,
346+
:root:not([data-theme=dark]) details summary.contrast[role=button]::after,
347+
:host(:not([data-theme=dark])) details summary.contrast[role=button]::after {
348+
filter: brightness(100) invert(0);
349+
}
350+
[data-theme=light] [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
351+
:root:not([data-theme=dark]) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
352+
:host(:not([data-theme=dark])) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
353+
filter: brightness(0) invert(1);
359354
}
360355
[data-theme=light] input:is([type=submit],
361356
[type=button],
@@ -514,9 +509,21 @@ details summary[role=button]:not(.outline)::after {
514509
[type=file]) {
515510
--pico-form-element-focus-color: var(--pico-primary-focus);
516511
}
517-
:root:not([data-theme]) details summary[role=button].contrast:not(.outline)::after,
518-
:host(:not([data-theme])) details summary[role=button].contrast:not(.outline)::after {
519-
filter: brightness(0);
512+
:root:not([data-theme]) details summary[role=button]:not(.outline, .contrast, .secondary)::after,
513+
:host(:not([data-theme])) details summary[role=button]:not(.outline, .contrast, .secondary)::after {
514+
filter: brightness(100) invert(1);
515+
}
516+
:root:not([data-theme]) details summary.secondary[role=button]::after,
517+
:host(:not([data-theme])) details summary.secondary[role=button]::after {
518+
filter: brightness(100) invert(0);
519+
}
520+
:root:not([data-theme]) details summary.contrast[role=button]::after,
521+
:host(:not([data-theme])) details summary.contrast[role=button]::after {
522+
filter: brightness(100) invert(1);
523+
}
524+
:root:not([data-theme]) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
525+
:host(:not([data-theme])) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
526+
filter: brightness(100) invert(0);
520527
}
521528
}
522529
[data-theme=dark] {
@@ -642,8 +649,17 @@ details summary[role=button]:not(.outline)::after {
642649
[type=file]) {
643650
--pico-form-element-focus-color: var(--pico-primary-focus);
644651
}
645-
[data-theme=dark] details summary[role=button].contrast:not(.outline)::after {
646-
filter: brightness(0);
652+
[data-theme=dark] details summary[role=button]:not(.outline, .contrast, .secondary)::after {
653+
filter: brightness(100) invert(1);
654+
}
655+
[data-theme=dark] details summary.secondary[role=button]::after {
656+
filter: brightness(100) invert(0);
657+
}
658+
[data-theme=dark] details summary.contrast[role=button]::after {
659+
filter: brightness(100) invert(1);
660+
}
661+
[data-theme=dark] [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
662+
filter: brightness(100) invert(0);
647663
}
648664

649665
progress,
@@ -2860,6 +2876,7 @@ details summary::after {
28602876
background-size: 1rem auto;
28612877
background-repeat: no-repeat;
28622878
content: "";
2879+
transition: transform var(--pico-transition);
28632880
}
28642881
details summary:focus {
28652882
outline: none;
@@ -2885,6 +2902,10 @@ details[open] > summary {
28852902
details[open] > summary:not([role]):not(:focus) {
28862903
color: var(--pico-accordion-open-summary-color);
28872904
}
2905+
details[open] > summary::after {
2906+
transform: rotate(0);
2907+
}
2908+
28882909
[dir=rtl] details summary {
28892910
text-align: right;
28902911
}
@@ -2986,6 +3007,11 @@ details.dropdown {
29863007
position: relative;
29873008
border-bottom: none;
29883009
}
3010+
details.dropdown[open] > summary::after,
3011+
details.dropdown[open] > button::after,
3012+
details.dropdown[open] > a::after {
3013+
transform: rotate(0deg);
3014+
}
29893015
details.dropdown > summary::after,
29903016
details.dropdown > button::after,
29913017
details.dropdown > a::after {
@@ -2994,7 +3020,7 @@ details.dropdown > a::after {
29943020
height: calc(1rem * var(--pico-line-height, 1.5));
29953021
margin-inline-start: 0.25rem;
29963022
float: right;
2997-
transform: rotate(0deg) translateX(0.2rem);
3023+
transform: rotate(-90deg);
29983024
background-image: var(--pico-icon-chevron);
29993025
background-position: right center;
30003026
background-size: 1rem auto;
@@ -3045,9 +3071,6 @@ nav details.dropdown {
30453071
display: inline;
30463072
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
30473073
}
3048-
nav details.dropdown > summary::after {
3049-
transform: rotate(0deg) translateX(0rem);
3050-
}
30513074
nav details.dropdown > summary:not([role]) {
30523075
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
30533076
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);

‎css/pico.amber.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.azure.css‎

Lines changed: 56 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -219,14 +219,6 @@ nav details.dropdown summary:focus-visible {
219219
--pico-form-element-spacing-horizontal: 2rem;
220220
}
221221

222-
details summary[role=button]:not(.outline)::after {
223-
filter: brightness(0) invert(1);
224-
}
225-
226-
[aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
227-
filter: brightness(0) invert(1);
228-
}
229-
230222
/**
231223
* Color schemes
232224
*/
@@ -340,22 +332,25 @@ details summary[role=button]:not(.outline)::after {
340332
--pico-timeline-dot-border-color: var(--pico-primary-background);
341333
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
342334
}
343-
[data-theme=light] [aria-busy=true]:not(input, select, textarea).contrast:is(button,
344-
[type=submit],
345-
[type=button],
346-
[type=reset],
347-
[role=button]):not(.outline)::before,
348-
:root:not([data-theme=dark]) [aria-busy=true]:not(input, select, textarea).contrast:is(button,
349-
[type=submit],
350-
[type=button],
351-
[type=reset],
352-
[role=button]):not(.outline)::before,
353-
:host(:not([data-theme=dark])) [aria-busy=true]:not(input, select, textarea).contrast:is(button,
354-
[type=submit],
355-
[type=button],
356-
[type=reset],
357-
[role=button]):not(.outline)::before {
358-
filter: invert(1) !important;
335+
[data-theme=light] details summary[role=button]:not(.outline, .contrast, .secondary)::after,
336+
:root:not([data-theme=dark]) details summary[role=button]:not(.outline, .contrast, .secondary)::after,
337+
:host(:not([data-theme=dark])) details summary[role=button]:not(.outline, .contrast, .secondary)::after {
338+
filter: brightness(100) invert(0);
339+
}
340+
[data-theme=light] details summary.secondary[role=button]::after,
341+
:root:not([data-theme=dark]) details summary.secondary[role=button]::after,
342+
:host(:not([data-theme=dark])) details summary.secondary[role=button]::after {
343+
filter: brightness(100) invert(1);
344+
}
345+
[data-theme=light] details summary.contrast[role=button]::after,
346+
:root:not([data-theme=dark]) details summary.contrast[role=button]::after,
347+
:host(:not([data-theme=dark])) details summary.contrast[role=button]::after {
348+
filter: brightness(100) invert(0);
349+
}
350+
[data-theme=light] [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
351+
:root:not([data-theme=dark]) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
352+
:host(:not([data-theme=dark])) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
353+
filter: brightness(100) invert(0);
359354
}
360355
[data-theme=light] input:is([type=submit],
361356
[type=button],
@@ -514,9 +509,21 @@ details summary[role=button]:not(.outline)::after {
514509
[type=file]) {
515510
--pico-form-element-focus-color: var(--pico-primary-focus);
516511
}
517-
:root:not([data-theme]) details summary[role=button].contrast:not(.outline)::after,
518-
:host(:not([data-theme])) details summary[role=button].contrast:not(.outline)::after {
519-
filter: brightness(0);
512+
:root:not([data-theme]) details summary[role=button]:not(.outline, .contrast, .secondary)::after,
513+
:host(:not([data-theme])) details summary[role=button]:not(.outline, .contrast, .secondary)::after {
514+
filter: brightness(100) invert(0);
515+
}
516+
:root:not([data-theme]) details summary.secondary[role=button]::after,
517+
:host(:not([data-theme])) details summary.secondary[role=button]::after {
518+
filter: brightness(100) invert(0);
519+
}
520+
:root:not([data-theme]) details summary.contrast[role=button]::after,
521+
:host(:not([data-theme])) details summary.contrast[role=button]::after {
522+
filter: brightness(100) invert(1);
523+
}
524+
:root:not([data-theme]) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
525+
:host(:not([data-theme])) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
526+
filter: brightness(100) invert(1);
520527
}
521528
}
522529
[data-theme=dark] {
@@ -642,8 +649,17 @@ details summary[role=button]:not(.outline)::after {
642649
[type=file]) {
643650
--pico-form-element-focus-color: var(--pico-primary-focus);
644651
}
645-
[data-theme=dark] details summary[role=button].contrast:not(.outline)::after {
646-
filter: brightness(0);
652+
[data-theme=dark] details summary[role=button]:not(.outline, .contrast, .secondary)::after {
653+
filter: brightness(100) invert(0);
654+
}
655+
[data-theme=dark] details summary.secondary[role=button]::after {
656+
filter: brightness(100) invert(0);
657+
}
658+
[data-theme=dark] details summary.contrast[role=button]::after {
659+
filter: brightness(100) invert(1);
660+
}
661+
[data-theme=dark] [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
662+
filter: brightness(100) invert(1);
647663
}
648664

649665
progress,
@@ -2860,6 +2876,7 @@ details summary::after {
28602876
background-size: 1rem auto;
28612877
background-repeat: no-repeat;
28622878
content: "";
2879+
transition: transform var(--pico-transition);
28632880
}
28642881
details summary:focus {
28652882
outline: none;
@@ -2885,6 +2902,10 @@ details[open] > summary {
28852902
details[open] > summary:not([role]):not(:focus) {
28862903
color: var(--pico-accordion-open-summary-color);
28872904
}
2905+
details[open] > summary::after {
2906+
transform: rotate(0);
2907+
}
2908+
28882909
[dir=rtl] details summary {
28892910
text-align: right;
28902911
}
@@ -2986,6 +3007,11 @@ details.dropdown {
29863007
position: relative;
29873008
border-bottom: none;
29883009
}
3010+
details.dropdown[open] > summary::after,
3011+
details.dropdown[open] > button::after,
3012+
details.dropdown[open] > a::after {
3013+
transform: rotate(0deg);
3014+
}
29893015
details.dropdown > summary::after,
29903016
details.dropdown > button::after,
29913017
details.dropdown > a::after {
@@ -2994,7 +3020,7 @@ details.dropdown > a::after {
29943020
height: calc(1rem * var(--pico-line-height, 1.5));
29953021
margin-inline-start: 0.25rem;
29963022
float: right;
2997-
transform: rotate(0deg) translateX(0.2rem);
3023+
transform: rotate(-90deg);
29983024
background-image: var(--pico-icon-chevron);
29993025
background-position: right center;
30003026
background-size: 1rem auto;
@@ -3045,9 +3071,6 @@ nav details.dropdown {
30453071
display: inline;
30463072
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
30473073
}
3048-
nav details.dropdown > summary::after {
3049-
transform: rotate(0deg) translateX(0rem);
3050-
}
30513074
nav details.dropdown > summary:not([role]) {
30523075
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
30533076
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);

‎css/pico.azure.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)