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

Styles reordering for optional custom checkboxes & radios

Browse source
This commit is contained in:
Lucas 2020-09-24 23:11:59 +07:00
parent 456539a52e
commit b37ef21253
12 changed files with 142 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

34
scss/content/_form.scss
View file

@ -106,7 +106,7 @@ textarea {
}
// Remove the border and padding in all browsers (opinionated)
[type="color"],
[type="file"],
[type="range"] {
padding: 0;
border-width: 0;
@ -116,6 +116,11 @@ textarea {
// Pico
// ––––––––––––––––––––
// Force height for alternatives input types
input:not([type="checkbox"]):not([type="radio"]) {
height: calc(#{1rem*$line-height} + #{$spacing-input-button-vertical*2} + 2px);
}
// Fieldset
fieldset {
margin: 0;
@ -144,20 +149,35 @@ fieldset legend {
vertical-align: middle;
}
// Inputs (Commons styles)
input,
// Inputs (Not Checkboxes, Radios, Range, File)
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
vertical-align: middle;
}
// Inputs (Not Checkboxes, Radios)
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
margin-bottom: $spacing-typography;
}
// Inputs (Commons styles)
input,
select,
textarea {
border: 1px solid var(--input-border);
border-radius: $round;
outline: none;
background-color: var(--input-background);
color: var(--text);
font-weight: normal;
vertical-align: middle;
@if $enable-transitions {
transition:
@ -202,12 +222,10 @@ textarea {
}
}
// Text, Select & Textarea
// Validation states for Text, Select & Textarea
input,
select,
textarea {
margin-bottom: $spacing-typography;
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
@if $enable-input-states and $enable-classes {
@ -221,13 +239,11 @@ textarea {
}
&.valid {
// border-bottom: 1px solid var(--valid);
// Source: https://feathericons.com/
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='#{rgba($green-600, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
&.invalid {
// border-bottom: 1px solid var(--invalid);
// Source: https://feathericons.com/
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='#{rgba($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}