Skip to content

refactor: move nested sass declarations after non-nested declarations #596

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lucaslarroche merged 4 commits into from
Mar 9, 2025
Merged

refactor: move nested sass declarations after non-nested declarations #596

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c3bcecb
refactor: move nested declarations after non-nested declarations
nstringham Aug 18, 2024
f516207
chore: build
nstringham Aug 18, 2024
27e7a04
Merge branch 'dev' of https://github.com/picocss/pico
lucaslarroche Mar 9, 2025
e66b84b
Merge branch 'dev' into pr/596
lucaslarroche Mar 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions scss/components/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@
list-style-type: none;
cursor: pointer;

&:not([role]) {
color: var(#{$css-var-prefix}accordion-close-summary-color);
}

@if $enable-transitions {
transition: color var(#{$css-var-prefix}transition);
}

&:not([role]) {
color: var(#{$css-var-prefix}accordion-close-summary-color);
}

// Reset marker
&::-webkit-details-marker {
display: none;
Expand Down
42 changes: 21 additions & 21 deletions scss/themes/default/_dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

// Default: Dark theme
@mixin theme {
color-scheme: dark;
#{$css-var-prefix}background-color: #{mix($slate-950, $slate-900)};

// Text color
Expand Down Expand Up @@ -123,18 +124,6 @@
#{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);

// Focus for buttons, radio and select
input:is(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
}
}

// Switch (input[type="checkbox"][role="switch"])
Expand Down Expand Up @@ -201,6 +190,26 @@
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
}

// Form validation icons
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}icon-valid: 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(mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}icon-invalid: 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(mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

// Focus for buttons, radio and select
@if map.get($modules, "forms/basics") {
input:is(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
}
}

// 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
Expand All @@ -217,12 +226,6 @@
}
}

// Form validation icons
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}icon-valid: 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(mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}icon-invalid: 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(mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Change the icon color to black for .contrast buttons
Expand All @@ -242,7 +245,4 @@
}
}
}

// Document
color-scheme: dark;
}
28 changes: 14 additions & 14 deletions scss/themes/default/_light.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

// Default: Light theme
@mixin theme {
color-scheme: light;
#{$css-var-prefix}background-color: #{$white};

// Text color
Expand Down Expand Up @@ -123,18 +124,6 @@
#{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);

// Focus for buttons, radio and select
input:is(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
}
}

// Switch (input[type="checkbox"][role="switch"])
Expand Down Expand Up @@ -207,6 +196,17 @@
#{$css-var-prefix}icon-invalid: 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(mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

// Document
color-scheme: light;
// Focus for buttons, radio and select
@if map.get($modules, "forms/basics") {
input:is(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
}
}
}
22 changes: 11 additions & 11 deletions scss/themes/default/_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,6 @@
#{$css-var-prefix}font-size: 100%;
#{$css-var-prefix}text-underline-offset: 0.1rem;

// Responsive root font size
@if $enable-responsive-typography {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
#{$css-var-prefix}font-size: map.get($values, "root-font-size");
}
}
}
}

// Borders
#{$css-var-prefix}border-radius: 0.25rem;
#{$css-var-prefix}border-width: 0.0625rem;
Expand Down Expand Up @@ -143,6 +132,17 @@
// 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");
}

// Responsive root font size
@if $enable-responsive-typography {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
#{$css-var-prefix}font-size: map.get($values, "root-font-size");
}
}
}
}
}

// Responsive spacings
Expand Down