Better contrast for input fields (#417)
* Better contrat for input fields This change set a white background for input field (text, select and textarea) to have a better contrast with the page background and improve accessibility for people with vision problem, and just crappy screen. This change also remove the round corner for the input to have a clear difference between editing field and buttons. This max-width of the form element are a bit bigger too. * Less space between label and input
This commit is contained in:
committed by
Baptiste Gelez
parent
0490b698cb
commit
09a26b4602
@@ -1,29 +1,25 @@
|
||||
label {
|
||||
display: block;
|
||||
margin: 2em auto 1em;
|
||||
margin: 2em auto .5em;
|
||||
font-size: 1.2em;
|
||||
max-width: 40rem;
|
||||
}
|
||||
input, textarea, select {
|
||||
transition: all 0.1s ease-in;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 40rem;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
box-sizing: border-box;
|
||||
|
||||
background: $white;
|
||||
background: $form-input-background;
|
||||
color: $black;
|
||||
border: none;
|
||||
border: solid $lightgray thin;
|
||||
border-radius: 0.5em;
|
||||
|
||||
font-size: 1.2em;
|
||||
font-weight: 400;
|
||||
|
||||
&:focus {
|
||||
background: $white;
|
||||
border-color: $purple;
|
||||
}
|
||||
}
|
||||
@@ -104,6 +100,7 @@ input[type="submit"] { display: block; }
|
||||
|
||||
// Writing page
|
||||
form.new-post {
|
||||
max-width: 60em;
|
||||
.title {
|
||||
margin: 0 auto;
|
||||
padding: 0.75em 0;
|
||||
@@ -119,7 +116,6 @@ form.new-post {
|
||||
min-height: 20em;
|
||||
overflow-y: hidden;
|
||||
resize: none;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
input[type="submit"] {
|
||||
background: $lightgray;
|
||||
|
||||
Reference in New Issue
Block a user