Fix navigation keyboard accessibility
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
parent
8ebc3d90a0
commit
c6aff097c6
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue