mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 18:06:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: switch, dropdown, loading

Browse source
This commit is contained in:
Lucas Larroche 2024-01-25 21:27:02 +07:00
parent 04a7dc94ab
commit 4eee189dab
124 changed files with 538 additions and 406 deletions
Download patch file Download diff file Expand all files Collapse all files

36
scss/components/_dropdown.scss
View file

@ -126,20 +126,30 @@
display: inline;
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
summary:not([role]) {
// Override height
height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
);
padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2)
)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
summary {
&::after {
transform: rotate(0deg) translateX(0rem);
}
&:focus-visible {
box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
&:not([role]) {
// Override height
height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
);
padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2)
)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
&:focus-visible {
box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}primary-focus);
}
}
}
}

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

@ -141,7 +141,7 @@
// Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}switch-background-color: #{$slate-750};
#{$css-var-prefix}switch-color: var(#{$css-var-prefix}primary-inverse);
#{$css-var-prefix}switch-color: #{$white};
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
}

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

@ -141,7 +141,7 @@
// Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}switch-background-color: #{$slate-200};
#{$css-var-prefix}switch-color: var(#{$css-var-prefix}primary-inverse);
#{$css-var-prefix}switch-color: #{$white};
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
}

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

@ -2,6 +2,7 @@
@use "../../colors" as *;
@use "../../settings" as *;
@use "../../utils/functions";
@use "theme-colors";
@if map.get($modules, "themes/default") {
/**
@ -419,7 +420,11 @@
}
#{$selector} {
&::before {
filter: brightness(0) invert(1);
@if theme-colors.get("primary-inverse", "dark") == $white {
filter: brightness(0) invert(1);
} @else {
filter: brightness(0) invert(0);
}
}
}
}