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

style: Checkboxes, radios and switches

Browse source
This commit is contained in:
Lucas Larroche 2023-03-15 22:15:25 +07:00
parent fed92a6f92
commit 5b96712843
2 changed files with 107 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

58
scss/forms/_basics.scss
View file

@ -133,10 +133,14 @@
label,
fieldset legend {
display: block;
margin-bottom: calc(var(#{$✨}spacing) * 0.25);
margin-bottom: calc(var(#{$✨}spacing) * 0.375);
font-weight: var(#{$✨}form-label-font-weight, var(#{$✨}font-weight));
}
fieldset legend {
margin-bottom: calc(var(#{$✨}spacing) * 0.5);
}
// Blocks, 100%
input:not([type="checkbox"], [type="radio"]),
select,
@ -267,18 +271,24 @@
&:is(:active, :focus) {
@if $enable-important {
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color) !important;
#{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-valid-focus-color) !important;
&:not([type="checkbox"], [type="radio"]) {
#{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-valid-focus-color) !important;
}
} @else {
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color);
#{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-valid-focus-color);
&:not([type="checkbox"], [type="radio"]) {
#{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-valid-focus-color);
}
}
}
}
@ -289,18 +299,24 @@
&:is(:active, :focus) {
@if $enable-important {
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color) !important;
#{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-invalid-focus-color) !important;
&:not([type="checkbox"], [type="radio"]) {
#{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-invalid-focus-color) !important;
}
} @else {
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color);
#{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-invalid-focus-color);
&:not([type="checkbox"], [type="radio"]) {
#{$✨}box-shadow: 0
0
0
var(#{$✨}outline-width)
var(#{$✨}form-element-invalid-focus-color);
}
}
}
}