mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 09:26:14 -04:00
corrected dropdown arrow colors for secondary, contrast, and primary. Also enabled the turning of the arrow when the dropdowns are open or closed
This commit is contained in:
Yohn
parent
130b1cda4e
commit
a6325b8991
255 changed files with 5385 additions and 2236 deletions
|
|
@ -51,7 +51,7 @@
|
|||
content: "";
|
||||
|
||||
@if $enable-transitions {
|
||||
//transition: transform var(#{$css-var-prefix}transition);
|
||||
transition: transform var(#{$css-var-prefix}transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
}
|
||||
|
||||
&::after {
|
||||
//transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,16 @@
|
|||
position: relative;
|
||||
border-bottom: none;
|
||||
|
||||
&[open] {
|
||||
> summary,
|
||||
> button,
|
||||
> a {
|
||||
&::after {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Marker
|
||||
// ––––––––––––––––––––
|
||||
> summary,
|
||||
|
|
@ -25,8 +35,10 @@
|
|||
float: right;
|
||||
// TODO: find out why we need this magic number (0.2 rem)
|
||||
// for the marker to be aligned with the regular select
|
||||
transform: rotate(0deg) translateX(0.2rem);
|
||||
//transform: rotate(0deg) translateX(0.2rem);
|
||||
transform: rotate(-90deg);
|
||||
background-image: var(#{$css-var-prefix}icon-chevron);
|
||||
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -126,10 +138,14 @@
|
|||
display: inline;
|
||||
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
|
||||
|
||||
//&[open] > summary::after {
|
||||
// transform: rotate(-90deg) translateX(0rem);
|
||||
//}
|
||||
|
||||
> summary {
|
||||
&::after {
|
||||
transform: rotate(0deg) translateX(0rem);
|
||||
}
|
||||
//&::after {
|
||||
// transform: rotate(0deg) translateX(0rem);
|
||||
//}
|
||||
|
||||
&:not([role]) {
|
||||
// Override height
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue