aitzol/Plume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better contrast for input fields (#417)

Browse Source 
* 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:
Dominique Feyer 2019-01-09 18:57:48 +01:00 committed by Baptiste Gelez
parent 0490b698cb
commit 09a26b4602
4 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
static/css/_forms.scss
View File

@ -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;

5
static/css/_global.scss
View File

@ -47,11 +47,11 @@ small {
/// Main
body > main > *, .h-feed > * {
padding: 0 20%;
margin: 0 20%;
}
body > main > .h-entry, .h-feed {
padding: 0;
margin: 0;
}
main {
@ -66,6 +66,7 @@ main {
}
h1 {
font-size: 2.5em;
font-weight: 300;
margin-top: 1em;
&.article {

1
static/css/_variables.scss
View File

@ -1,6 +1,7 @@
// Colors
$background: #F4F4F4;
$form-input-background: #FFFFFF;
$gray: #E3E3E3;
$lightgray: #ECECEC;
$black: #242424;

7
static/css/main.scss
View File

@ -4,6 +4,13 @@
@import url('/static/fonts/Lora/Lora.css');
@import url('/static/fonts/Playfair_Display/PlayfairDisplay.css');
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
@import 'variables';
@import 'global';
@import 'header';