fraport/fradrive
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 {
color: white;
}
&:focus {
border-color: #3273dc;
box-shadow: 0 0 0 0.25rem rgba(50,115,220,.25);
outline: 0;
}
}
input[type="submit"][disabled],

43
templates/standalone/inputs.lucius
View File

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