DGNum/demarches-normaliennes
13
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

form: make the radio button larger and hoverable

Browse source 
As a bonus, the implementation of vertical radio buttons is now closer
from the default horizontal one.
This commit is contained in:
Pierre de La Morinerie 2020-02-10 18:16:00 +00:00
parent f42977e40a
commit 1531b69f5a
3 changed files with 71 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

72
app/assets/stylesheets/new_design/forms.scss
View file

@ -70,26 +70,21 @@
visibility: visible;
}
// Align checkboxes on the top-left side of the label
// Move checkbox to the top-left side of the label
&.editable-champ-checkbox,
&.editable-champ-radio.vertical,
&.editable-champ-engagement {
p,
label {
padding-left: 28px;
}
input[type=checkbox],
input[type=radio] {
input[type=checkbox] {
position: absolute;
top: 3px;
left: 0px;
}
}
// When the (eventual) notice is displayed after the input, give it some bottom margin
&.editable-champ-checkbox,
&.editable-champ-engagement {
// When an (eventual) notice is displayed after the input, give it some bottom margin.
.notice {
margin-bottom: $default-fields-spacer;
}
@ -97,13 +92,58 @@
}
.radios {
display: flex;
// Horizontal layout (default)
flex-direction: row;
align-items: flex-start;
label {
display: inline;
margin-left: $default-padding;
margin-right: $default-padding;
}
// Vertical layout
&.vertical {
flex-direction: column;
align-items: stretch;
label {
margin-right: 0;
}
}
label {
padding: $default-padding $default-padding $default-padding $default-spacer;
border: 1px solid $border-grey;
border-radius: 4px;
font-weight: normal;
background: $white;
user-select: none;
&:last-of-type {
margin-bottom: $default-fields-spacer;
}
&:hover {
background: $light-grey;
cursor: pointer;
}
&:active {
border-color: darken($border-grey, 10);
}
&:first-child {
margin-left: 0;
}
input[type=radio] {
margin-bottom: 0;
}
.notice {
margin: 4px 0 0 27px;
}
}
}
@ -190,16 +230,14 @@
input[type=radio] {
@extend %outline;
margin-left: 5px;
margin-right: 4px;
margin-bottom: $default-fields-spacer;
}
input[type=checkbox] {
// Firefox tends to display checkbox controls smaller than other browsers.
// Firefox tends to display some controls smaller than other browsers.
// Ensure a consistency of size between browsers.
width: 16px;
height: 16px;
margin-left: 5px;
margin-right: 4px;
margin-bottom: $default-fields-spacer;
}
input[type=date] {