mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 02:16:15 -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

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

@ -240,18 +240,69 @@
}
}
// Yohn, I think I took care of this in the _styles.scss
// Chevron icons
//@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
// // Change the icon color to black for accordion and dropdown .contrast buttons
// @if $enable-classes {
// #{$parent-selector} details {
// summary {
// &[role="button"].contrast:not(.outline) {
// &::after {
// filter: brightness(0);
// }
// }
// }
// }
// }
//}
// Chevron icons
// Change the icon color to white for accordion and dropdown buttons
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
// Change the icon color to black for accordion and dropdown .contrast buttons
@if $enable-classes {
#{$parent-selector} details {
summary {
&[role="button"].contrast:not(.outline) {
&::after {
filter: brightness(0);
#{$parent-selector} details {
summary {
$selector: '&[role="button"]';
@if $enable-classes {
$selector: "#{$selector}:not(.outline,.contrast,.secondary)";
}
#{$selector} {
&::after {
@if theme-colors.get("primary-inverse", "dark") == $black {
filter: brightness(100) invert(1);
} @else {
filter: brightness(100) invert(0);
}
}
}
@if $enable-classes {
&.secondary[role="button"]::after {
filter: brightness(100) invert(0);
}
&.contrast[role="button"]::after {
filter: brightness(100) invert(1);
}
}
}
}
}
// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Change the icon color to white for buttons
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
$selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
@if $enable-classes {
$selector: "#{$selector}:not(.outline)";
}
#{$selector} {
&::before {
@if theme-colors.get("primary-inverse", "dark") == $white {
filter: brightness(100) invert(1);
} @else {
filter: brightness(100) invert(0);
}
}
}
}
}

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

@ -182,18 +182,69 @@
#{$css-var-prefix}loading-spinner-opacity: 0.5;
// Loading icon (animated)
// Yohn, I think I took care of this in the _styles.scss
// Change the icon color to white for .contrast buttons
@if $enable-classes {
#{$parent-selector} [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;
//@if $enable-classes {
// #{$parent-selector} [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;
// }
// }
// }
//}
} //
// Chevron icons
// Change the icon color to white for accordion and dropdown buttons
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
#{$parent-selector} details {
summary {
$selector: '&[role="button"]';
@if $enable-classes {
$selector: "#{$selector}:not(.outline,.contrast,.secondary)";
}
#{$selector} {
&::after {
@if theme-colors.get("primary-inverse", "light") == $white {
filter: brightness(100) invert(0);
} @else {
filter: brightness(100) invert(1);
}
}
}
@if $enable-classes {
&.secondary[role="button"]::after {
filter: brightness(100) invert(1);
}
&.contrast[role="button"]::after {
filter: brightness(100) invert(0);
}
}
}
}
}
// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Change the icon color to white for buttons
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
$selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
@if $enable-classes {
$selector: "#{$selector}:not(.outline)";
}
#{$selector} {
&::before {
@if theme-colors.get("primary-inverse", "light") == $black {
filter: brightness(0) invert(1);
} @else {
filter: brightness(100) invert(0);
}
}
}

38
scss/themes/default/_styles.scss
View file

@ -394,42 +394,4 @@
}
}
}
// Chevron icons
// Change the icon color to white for accordion and dropdown buttons
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
#{$parent-selector} details {
summary {
$selector: '&[role="button"]';
@if $enable-classes {
$selector: "#{$selector}:not(.outline)";
}
#{$selector} {
&::after {
filter: brightness(0) invert(1);
}
}
}
}
}
// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Change the icon color to white for buttons
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
$selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
@if $enable-classes {
$selector: "#{$selector}:not(.outline)";
}
#{$selector} {
&::before {
@if theme-colors.get("primary-inverse", "dark") == $white {
filter: brightness(0) invert(1);
} @else {
filter: brightness(0) invert(0);
}
}
}
}
}
}