mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 02:36:15 -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

9
scss/_variables.scss
View file

@ -35,16 +35,19 @@ $enable-transitions: true !default;
// Gutters and horizontals margins
// For <body>, .grid, <nav>, <table>
$spacing-gutter: 1rem !default;
$spacing-gutter: 1rem !default;
// Blocks verticals margins and paddings
// For <header>, <main>, <footer>, <section>, <article>
// This value is proportionally multiplied according breakpoints for great responsive spacings
$spacing-block: 2rem !default;
$spacing-block: 2rem !default;
// Vertical margins for Typography and Form elements
// 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>
$spacing-input-button-vertical: .75rem !default;

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

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

7
scss/content/_form.scss
View file

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