mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-21 09:06:14 -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, label,
fieldset legend { fieldset legend {
display: block; 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)); font-weight: var(#{$✨}form-label-font-weight, var(#{$✨}font-weight));
} }
fieldset legend {
margin-bottom: calc(var(#{$✨}spacing) * 0.5);
}
// Blocks, 100% // Blocks, 100%
input:not([type="checkbox"], [type="radio"]), input:not([type="checkbox"], [type="radio"]),
select, select,
@ -267,18 +271,24 @@
&:is(:active, :focus) { &:is(:active, :focus) {
@if $enable-important { @if $enable-important {
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color) !important; #{$✨}border-color: var(#{$✨}form-element-valid-active-border-color) !important;
#{$✨}box-shadow: 0
0 &:not([type="checkbox"], [type="radio"]) {
0 #{$✨}box-shadow: 0
var(#{$✨}outline-width) 0
var(#{$✨}form-element-valid-focus-color) !important; 0
var(#{$✨}outline-width)
var(#{$✨}form-element-valid-focus-color) !important;
}
} @else { } @else {
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color); #{$✨}border-color: var(#{$✨}form-element-valid-active-border-color);
#{$✨}box-shadow: 0
0 &:not([type="checkbox"], [type="radio"]) {
0 #{$✨}box-shadow: 0
var(#{$✨}outline-width) 0
var(#{$✨}form-element-valid-focus-color); 0
var(#{$✨}outline-width)
var(#{$✨}form-element-valid-focus-color);
}
} }
} }
} }
@ -289,18 +299,24 @@
&:is(:active, :focus) { &:is(:active, :focus) {
@if $enable-important { @if $enable-important {
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color) !important; #{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color) !important;
#{$✨}box-shadow: 0
0 &:not([type="checkbox"], [type="radio"]) {
0 #{$✨}box-shadow: 0
var(#{$✨}outline-width) 0
var(#{$✨}form-element-invalid-focus-color) !important; 0
var(#{$✨}outline-width)
var(#{$✨}form-element-invalid-focus-color) !important;
}
} @else { } @else {
#{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color); #{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color);
#{$✨}box-shadow: 0
0 &:not([type="checkbox"], [type="radio"]) {
0 #{$✨}box-shadow: 0
var(#{$✨}outline-width) 0
var(#{$✨}form-element-invalid-focus-color); 0
var(#{$✨}outline-width)
var(#{$✨}form-element-invalid-focus-color);
}
} }
} }
} }

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

@ -6,6 +6,29 @@
* Checkboxes, Radios and Switches * Checkboxes, Radios and Switches
*/ */
// Labels
label {
&:has([type="checkbox"], [type="radio"]) {
width: fit-content;
cursor: pointer;
}
}
// Disabled labels
label:has([disabled]),
[type="checkbox"][disabled] + label,
[type="radio"][disabled] + label {
opacity: var(#{$✨}form-element-disabled-opacity);
pointer-events: none;
}
label:has([disabled]) {
[type="checkbox"],
[type="radio"] {
opacity: initial;
}
}
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
-webkit-appearance: none; -webkit-appearance: none;
@ -14,10 +37,7 @@
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
margin-top: -0.125em; margin-top: -0.125em;
margin-right: 0.375em; margin-inline-end: 0.5em;
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: 0.375em;
border-width: var(#{$✨}border-width); border-width: var(#{$✨}border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -39,9 +59,12 @@
& ~ label { & ~ label {
display: inline-block; display: inline-block;
margin-right: 0.375em;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
&:not(:last-of-type) {
margin-inline-end: 1em;
}
} }
} }
@ -73,7 +96,6 @@
// Switchs // Switchs
[type="checkbox"][role="switch"] { [type="checkbox"][role="switch"] {
#{$✨}background-color: var(#{$✨}switch-background-color); #{$✨}background-color: var(#{$✨}switch-background-color);
#{$✨}border-color: var(#{$✨}switch-background-color);
#{$✨}color: var(#{$✨}switch-color); #{$✨}color: var(#{$✨}switch-color);
// Config // Config
@ -89,16 +111,10 @@
background-color: var(#{$✨}background-color); background-color: var(#{$✨}background-color);
line-height: $switch-height; line-height: $switch-height;
&:focus { &:not([aria-invalid]) {
#{$✨}background-color: var(#{$✨}switch-background-color);
#{$✨}border-color: var(#{$✨}switch-background-color); #{$✨}border-color: var(#{$✨}switch-background-color);
} }
&:checked {
#{$✨}background-color: var(#{$✨}switch-checked-background-color);
#{$✨}border-color: var(#{$✨}switch-checked-background-color);
}
&:before { &:before {
display: block; display: block;
width: calc(#{$switch-height} - (var(#{$✨}border-width) * 2)); width: calc(#{$switch-height} - (var(#{$✨}border-width) * 2));
@ -112,29 +128,61 @@
} }
} }
&:focus {
#{$✨}background-color: var(#{$✨}switch-background-color);
#{$✨}border-color: var(#{$✨}switch-background-color);
}
&:checked { &:checked {
#{$✨}background-color: var(#{$✨}switch-checked-background-color);
#{$✨}border-color: var(#{$✨}switch-checked-background-color);
background-image: none; background-image: none;
&::before { &::before {
margin-left: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
margin-inline-start: calc(#{$switch-width * 0.5} - var(#{$✨}border-width)); margin-inline-start: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
} }
} }
&[disabled] {
#{$✨}background-color: var(#{$✨}border-color);
}
} }
// Aria-invalid // Aria-invalid
[type="checkbox"], [type="checkbox"],
[type="checkbox"]:checked, [type="checkbox"][role="switch"] {
[type="radio"],
[type="radio"]:checked,
[type="checkbox"][role="switch"],
[type="checkbox"][role="switch"]:checked {
&[aria-invalid="false"] { &[aria-invalid="false"] {
#{$✨}border-color: var(#{$✨}form-element-valid-border-color); &:checked,
&:checked:active,
&:checked:focus {
#{$✨}background-color: var(#{$✨}form-element-valid-border-color);
}
} }
&:checked,
&:checked:active,
&:checked:focus {
&[aria-invalid="true"] {
#{$✨}background-color: var(#{$✨}form-element-invalid-border-color);
}
}
}
&[aria-invalid="true"] { [type="checkbox"],
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color); [type="radio"],
[type="checkbox"][role="switch"] {
&[aria-invalid="false"] {
&:checked,
&:checked:active,
&:checked:focus {
#{$✨}border-color: var(#{$✨}form-element-valid-border-color);
}
}
&:checked,
&:checked:active,
&:checked:focus {
&[aria-invalid="true"] {
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
}
} }
} }
} }