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

Better spacing between form elements

Browse source 
+ Revert better alignement for checkboxes & radios (#07d19a8)
This commit is contained in:
Lucas 2020-09-25 00:45:44 +07:00
parent 07d19a8673
commit 6f260e9b74
11 changed files with 28 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

8
css/pico.classless.css
View file

@ -831,7 +831,7 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: 0.125rem; margin-bottom: 0.25rem;
vertical-align: middle; vertical-align: middle;
} }
@ -951,7 +951,7 @@ textarea + small {
label > input, label > input,
label > select, label > select,
label > textarea { label > textarea {
margin-top: 0.125rem; margin-top: 0.25rem;
} }
/** /**
@ -967,9 +967,9 @@ label > textarea {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-right: .375rem; margin-right: .375rem;
margin-bottom: 0.125rem; margin-bottom: 0.25rem;
border-width: 2px; border-width: 2px;
vertical-align: bottom; vertical-align: middle;
cursor: pointer; cursor: pointer;
} }

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

8
css/pico.css
View file

@ -1052,7 +1052,7 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: 0.125rem; margin-bottom: 0.25rem;
vertical-align: middle; vertical-align: middle;
} }
@ -1195,7 +1195,7 @@ textarea + small {
label > input, label > input,
label > select, label > select,
label > textarea { label > textarea {
margin-top: 0.125rem; margin-top: 0.25rem;
} }
/** /**
@ -1211,9 +1211,9 @@ label > textarea {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-right: .375rem; margin-right: .375rem;
margin-bottom: 0.125rem; margin-bottom: 0.25rem;
border-width: 2px; border-width: 2px;
vertical-align: bottom; vertical-align: middle;
cursor: pointer; cursor: pointer;
} }

8
css/pico.fluid.classless.css
View file

@ -827,7 +827,7 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: 0.125rem; margin-bottom: 0.25rem;
vertical-align: middle; vertical-align: middle;
} }
@ -947,7 +947,7 @@ textarea + small {
label > input, label > input,
label > select, label > select,
label > textarea { label > textarea {
margin-top: 0.125rem; margin-top: 0.25rem;
} }
/** /**
@ -963,9 +963,9 @@ label > textarea {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-right: .375rem; margin-right: .375rem;
margin-bottom: 0.125rem; margin-bottom: 0.25rem;
border-width: 2px; border-width: 2px;
vertical-align: bottom; vertical-align: middle;
cursor: pointer; cursor: pointer;
} }

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
css/pico.slim.css
View file

@ -851,7 +851,7 @@ fieldset {
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: 0.125rem; margin-bottom: 0.25rem;
vertical-align: middle; vertical-align: middle;
} }
@ -970,7 +970,7 @@ textarea + small {
label > input, label > input,
label > select, label > select,
label > textarea { label > textarea {
margin-top: 0.125rem; margin-top: 0.25rem;
} }
/** /**

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

3
scss/_variables.scss
View file

@ -46,6 +46,9 @@ $spacing-block: 2rem !default;
// This value is proportionally multiplied according breakpoints for great responsive spacings // This value is proportionally multiplied according breakpoints for great responsive spacings
$spacing-typography: 1.5rem !default; $spacing-typography: 1.5rem !default;
// Spacing between: Label and Input, Checkboxes, Radios
$spacing-form-elements: $spacing-typography/6 !default;
// Padding for <input> and <button> // Padding for <input> and <button>
$spacing-input-button-vertical: .75rem !default; $spacing-input-button-vertical: .75rem !default;
$spacing-input-button-horizontal: 1rem !default; $spacing-input-button-horizontal: 1rem !default;

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

@ -12,9 +12,9 @@
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
margin-right: .375rem; margin-right: .375rem;
margin-bottom: $spacing-label-input; margin-bottom: $spacing-form-elements;
border-width: 2px; border-width: 2px;
vertical-align: bottom; vertical-align: middle;
cursor: pointer; cursor: pointer;
&::-ms-check { &::-ms-check {

7
scss/content/_form.scss
View file

@ -129,14 +129,11 @@ fieldset {
border: 0; border: 0;
} }
// Spacing beteen label and input
$spacing-label-input: $spacing-typography/12;
// Label & legend // Label & legend
label, label,
fieldset legend { fieldset legend {
display: block; display: block;
margin-bottom: $spacing-label-input; margin-bottom: $spacing-form-elements;
vertical-align: middle; vertical-align: middle;
} }
@ -289,6 +286,6 @@ label {
& > input, & > input,
& > select, & > select,
& > textarea { & > textarea {
margin-top: $spacing-label-input; margin-top: $spacing-form-elements;
} }
} }