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

style: update colors

Browse source
This commit is contained in:
Lucas Larroche 2022-12-26 11:35:56 +07:00
parent 52e1072a08
commit 6ade871f3f
20 changed files with 892 additions and 756 deletions
Download patch file Download diff file Expand all files Collapse all files

3
scss/forms/_basics.scss
View file

@ -192,8 +192,7 @@
// Focus
input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]),
select,
textarea {
:where(select, textarea) {
&:focus {
#{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
}

8
scss/forms/_checkbox-radio-switch.scss
View file

@ -30,8 +30,8 @@
&:checked,
&:checked:active,
&:checked:focus {
#{$✨}background-color: var(#{$✨}primary);
#{$✨}border-color: var(#{$✨}primary);
#{$✨}background-color: var(#{$✨}primary-background);
#{$✨}border-color: var(#{$✨}primary-border);
background-image: var(#{$✨}icon-checkbox);
background-position: center;
background-size: 0.75em auto;
@ -49,8 +49,8 @@
// Checkboxes
[type="checkbox"] {
&:indeterminate {
#{$✨}background-color: var(#{$✨}primary);
#{$✨}border-color: var(#{$✨}primary);
#{$✨}background-color: var(#{$✨}primary-background);
#{$✨}border-color: var(#{$✨}primary-border);
background-image: var(#{$✨}icon-minus);
background-position: center;
background-size: 0.75em auto;

30
scss/forms/_input-file.scss
View file

@ -1,16 +1,21 @@
@use "sass:map";
@use "../settings" as *;
@mixin file-selector-button-hover {
#{$✨}background-color: var(#{$✨}secondary-background-hover);
#{$✨}border-color: var(#{$✨}secondary-border-hover);
}
@mixin file-selector-button {
#{$✨}background-color: var(#{$✨}secondary);
#{$✨}border-color: var(#{$✨}secondary);
#{$✨}background-color: var(#{$✨}secondary-background);
#{$✨}border-color: var(#{$✨}secondary-border);
#{$✨}color: var(#{$✨}secondary-inverse);
margin-right: calc(var(#{$✨}spacing) / 2);
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: calc(var(#{$✨}spacing) / 2);
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
calc(var(#{$✨}form-element-spacing-horizontal) * 0.5);
var(#{$✨}form-element-spacing-horizontal);
border: var(#{$✨}border-width) solid var(#{$✨}border-color);
border-radius: var(#{$✨}border-radius);
outline: none;
@ -29,8 +34,7 @@
}
&:is(:hover, :active, :focus) {
#{$✨}background-color: var(#{$✨}secondary-hover);
#{$✨}border-color: var(#{$✨}secondary-hover);
@include file-selector-button-hover;
}
}
@ -41,6 +45,8 @@
[type="file"] {
#{$✨}color: var(#{$✨}muted-color);
z-index: 1;
position: relative;
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
border: 0;
border-radius: 0;
@ -57,5 +63,19 @@
&::-ms-browse {
@include file-selector-button;
}
&:is(:hover, :active, :focus) {
&::file-selector-button {
@include file-selector-button-hover;
}
&::-webkit-file-upload-button {
@include file-selector-button-hover;
}
&::-ms-browse {
@include file-selector-button-hover;
}
}
}
}