mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-30 21:09:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: optional parent selector

Browse source
This commit is contained in:
Lucas Larroche 2024-01-25 01:42:54 +07:00
parent 9ea68c42e0
commit ef2100499b
32 changed files with 295 additions and 277 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -205,7 +205,7 @@
@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 {
details {
#{$parent-selector} details {
summary {
&[role="button"].contrast:not(.outline) {
&::after {
@ -227,7 +227,7 @@
@if map.get($modules, "components/loading") {
// Change the icon color to black for .contrast buttons
@if $enable-classes {
[aria-busy="true"]:not(input, select, textarea) {
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
&.contrast:is(
button,
[type="submit"],

8
scss/themes/default/_schemes.scss
View file

@ -30,10 +30,10 @@
@include dark.theme;
}
progress,
[type="checkbox"],
[type="radio"],
[type="range"] {
#{$parent-selector} progress,
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"],
#{$parent-selector} [type="range"] {
accent-color: var(#{$css-var-prefix}primary);
}
}

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

@ -118,24 +118,6 @@
#{$css-var-prefix}icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
// 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") {
details {
summary {
$selector: '&[role="button"]';
@if $enable-classes {
$selector: "#{$selector}:not(.outline)";
}
#{$selector} {
&::after {
filter: brightness(0) invert(1);
}
}
}
}
}
// Datetime icons
@if map.get($modules, "forms/input-date") {
#{$css-var-prefix}icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
@ -156,19 +138,6 @@
@if map.get($modules, "components/loading") {
// Inspired by https://codepen.io/aleksander351/pen/KzgKPo
#{$css-var-prefix}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
// Change the icon color to white for buttons
[aria-busy="true"]:not(input, select, textarea) {
$selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
@if $enable-classes {
$selector: "#{$selector}:not(.outline)";
}
#{$selector} {
&::before {
filter: brightness(0) invert(1);
}
}
}
}
}
@ -421,4 +390,38 @@
}
}
}
// 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) {
$selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
@if $enable-classes {
$selector: "#{$selector}:not(.outline)";
}
#{$selector} {
&::before {
filter: brightness(0) invert(1);
}
}
}
}
}