fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'accesibilty' into 'master'

Browse Source 
make inputs more accessible by enabling proper tab-key support

See merge request !143
This commit is contained in:
Felix Hamann 2019-02-10 23:33:57 +01:00
commit 1202736a99
2 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
templates/default-layout.lucius
View File

@ -262,6 +262,12 @@ button,
a:hover { a:hover {
color: white; color: white;
} }
&:focus {
border-color: #3273dc;
box-shadow: 0 0 0 0.25rem rgba(50,115,220,.25);
outline: 0;
}
} }
input[type="submit"][disabled], input[type="submit"][disabled],

43
templates/standalone/inputs.lucius
View File

@ -71,7 +71,8 @@ input[type="url"],
input[type="number"], input[type="number"],
input[type="email"], input[type="email"],
input[type*="date"], input[type*="date"],
input[type*="time"] { input[type*="time"],
select {
/* from bulma.css */ /* from bulma.css */
color: #363636; color: #363636;
border-color: #dbdbdb; border-color: #dbdbdb;
@ -88,25 +89,6 @@ input[type*="time"] {
font-family: var(--font-base); font-family: var(--font-base);
line-height: 1.5; line-height: 1.5;
padding: 4px 13px; padding: 4px 13px;
&:focus {
border-color: #3273dc;
box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
outline: 0;
}
&[disabled] {
background-color: #f5f5f5;
color: #7a7a7a;
box-shadow: none;
border-color: #dbdbdb;
}
&[readonly] {
background-color: #f5f5f5;
box-shadow: none;
border-color: #dbdbdb;
}
} }
input[type="number"] { input[type="number"] {
@ -139,7 +121,13 @@ textarea {
border-radius: 2px; border-radius: 2px;
box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05); box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
vertical-align: top; vertical-align: top;
}
/* SHARED STATE RELATED STYLES */
input,
select,
textarea {
&:focus { &:focus {
border-color: #3273dc; border-color: #3273dc;
box-shadow: 0 0 0 0.125em rgba(50,115,220,.25); box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
@ -155,7 +143,6 @@ textarea {
&[readonly] { &[readonly] {
background-color: #f5f5f5; background-color: #f5f5f5;
box-shadow: none;
border-color: #dbdbdb; border-color: #dbdbdb;
} }
} }
@ -226,7 +213,12 @@ input[type="checkbox"]:checked::after {
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
display: none; position: fixed;
top: -1px;
left: -1px;
width: 1px;
height: 1px;
overflow: hidden;
} }
label { label {
@ -256,6 +248,13 @@ input[type="checkbox"]:checked::after {
background-color: var(--color-primary); background-color: var(--color-primary);
} }
[type="checkbox"]:focus + label,
[type="radio"]:focus + label {
border-color: #3273dc;
box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
outline: 0;
}
:checked + label::before, :checked + label::before,
:checked + label::after { :checked + label::after {
content: ''; content: '';