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

forms: add a focus indicator to focused fields

Browse source
This commit is contained in:
Pierre de La Morinerie 2019-07-15 17:55:22 +02:00
parent a0a1069a68
commit 09efd06dff
1 changed files with 17 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -145,12 +145,27 @@
border: solid 1px $border-grey; border: solid 1px $border-grey;
padding: $default-padding; padding: $default-padding;
&.small {
padding: $default-padding / 2;
}
&:disabled { &:disabled {
background-color: $border-grey; background-color: $border-grey;
} }
&.small { &:focus {
padding: $default-padding / 2; border: 1px solid $blue;
box-shadow: 0px 0px 2px 1px $blue;
}
// Hide the browser default invalidity indicator until the field is touched
&:invalid:not(:focus) {
box-shadow: none;
}
&.touched:invalid {
border: 1px solid $dark-red;
box-shadow: 0px 0px 2px 1px $dark-red;
} }
} }
@ -188,17 +203,6 @@
max-width: 180px; max-width: 180px;
} }
input:invalid,
textarea:invalid {
box-shadow: none;
}
input.touched:invalid,
textarea.touched:invalid {
border: 1px solid $dark-red;
box-shadow: 0px 0px 5px $dark-red;
}
select, select,
.select2-selection { .select2-selection {
// hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript