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

New form elements

Browse source 
- CSS icons color dynamization in `_color.scss`
- Bigger Checkboxes and Radio buttons
- Small refactoring for Checkboxes and Radio buttons in `_form.scss` and `form-checkbox-radio.scss`
- Styles for new form elements: `type=date`, `type=datetime-local`, `type=month`, `type=time`, `type=week`, `type=range`, `type=search`
- Reordering @import in `pico.scss` and `pico.slim.scss`
This commit is contained in:
Lucas 2020-09-24 22:35:30 +07:00
parent 86a54ed191
commit 456539a52e
21 changed files with 1518 additions and 555 deletions
Download patch file Download diff file Expand all files Collapse all files

21
scss/content/_form-checkbox-radio.scss
View file

@ -1,20 +1,17 @@
/**
* Form elements
* Checkboxes & Radios
*/
// Checkboxes & Radios
[type="checkbox"],
[type="radio"] {
display: inline-block;
width: 1em;
height: 1em;
width: 1.25rem;
height: 1.25rem;
margin-right: .375rem;
margin-bottom: $spacing-label-input;
border-width: 2px;
font-size: 1.125rem;
vertical-align: middle;
cursor: pointer;
transition: none; // Prevent frozen state on mobile devices
&::-ms-check {
display: none; // unstyle IE checkboxes
@ -27,7 +24,7 @@
background-image: 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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: .66rem auto;
background-size: .75rem auto;
}
& ~ label {
@ -54,9 +51,9 @@
[type="checkbox"][role="switch"] {
// Config
$switch-height: 1em;
$switch-width: 1.85em;
$switch-border: 2px;
$switch-height: 1.25rem;
$switch-width: 2.25rem;
$switch-border: 3px;
$switch-transition: .1s ease-in-out;
// Styles
@ -83,11 +80,7 @@
&:checked {
border-color: var(--primary);
background-color: var(--primary);
// Disable if check box icon is needed
background-image: none;
// Enable if check box icon is needed
// background-position: center left $switch-width/6;
// background-size: $switch-width/5 auto;
&::before {
margin-right: 0;