Fix navigation keyboard accessibility

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt 2018-06-21 14:35:22 +02:00
parent 8ebc3d90a0
commit c6aff097c6
No known key found for this signature in database
GPG Key ID: CBD846FC845CBE17
1 changed files with 30 additions and 11 deletions

View File

@ -145,8 +145,9 @@ kbd {
padding-left: 38px !important;
}
&:focus,
&:hover,
&:focus,
&:active,
&.active,
a.selected {
&,
@ -156,6 +157,13 @@ kbd {
}
}
/* a instead of li is focused by keyboards */
a:focus,
a:active {
opacity: 1;
box-shadow: inset 4px 0 var(--color-primary);
}
/* align loader */
&.icon-loading-small:after {
left: 22px;
@ -204,8 +212,8 @@ kbd {
display: inline-flex;
flex-wrap: wrap;
padding-left: 44px;
&:focus,
&:hover,
&:focus,
&.active,
a.selected {
&,
@ -488,7 +496,8 @@ kbd {
padding: 5px;
margin-right: 0;
height: 38px;
&:hover {
&:hover,
&:focus {
/* overlapp borders */
z-index: 1;
}
@ -537,7 +546,8 @@ kbd {
height: 44px;
width: 44px;
line-height: 44px;
&:hover, &:focus {
&:hover,
&:focus {
opacity: 1;
}
}
@ -707,7 +717,8 @@ kbd {
opacity: .57;
&.opened,
&:hover {
&:hover,
&:focus {
background-color: var(--color-main-background);
opacity: 1;
box-shadow: inset 4px 0 var(--color-primary);
@ -769,10 +780,13 @@ kbd {
font-weight: 600;
border-bottom: 1px solid var(--color-border);
}
&:hover {
&:hover,
&:focus {
border-bottom: 1px solid var(--color-border);
}
&.selected, &:hover {
&.selected,
&:hover
&:focus {
margin-bottom: 0px;
color: var(--color-main-text);
a {
@ -911,7 +925,9 @@ $popovericon-size: 16px;
&[class*=' icon-'] {
padding: 0 #{($popoveritem-height - $popovericon-size) / 2} 0 $popoveritem-height !important;
}
&:hover, &:focus, &.active {
&:hover,
&:focus,
&.active {
opacity: 1 !important;
}
/* prevent .action class to break the design */
@ -1056,13 +1072,15 @@ $popovericon-size: 16px;
padding: 22px;
opacity: .3;
cursor: pointer;
&:hover, &:focus {
&:hover,
&:focus {
opacity: .7;
}
&[class^='icon-star'],
&[class*=' icon-star'] {
opacity: .7;
&:hover, &:focus {
&:hover,
&:focus {
opacity: 1 ;
}
@ -1073,7 +1091,8 @@ $popovericon-size: 16px;
}
}
&:hover, &:focus,
&:hover,
&:focus,
&.active {
background-color: var(--color-background-dark);
}