Use keyboard-mode instead of :focus-visible
This commit is contained in:
parent
ee9de52f9d
commit
bc74a696f4
4 changed files with 32 additions and 26 deletions
|
@ -117,11 +117,10 @@
|
|||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include keyboard-mode {
|
||||
box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
@ -307,10 +306,10 @@
|
|||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&:focus-visible {
|
||||
@include keyboard-mode {
|
||||
box-shadow: 0 0 0 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
&:disabled,
|
||||
&[aria-disabled='true'] {
|
||||
opacity: 0.5;
|
||||
|
|
|
@ -96,11 +96,10 @@
|
|||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include keyboard-mode {
|
||||
box-shadow: 0 0 0 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
@ -147,11 +146,13 @@
|
|||
background: transparent;
|
||||
cursor: col-resize;
|
||||
|
||||
&:focus-visible {
|
||||
&:focus {
|
||||
outline: none;
|
||||
@include keyboard-mode {
|
||||
box-shadow: inset 0 0 0 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.NavSidebar__DragHandle--dragging {
|
||||
@include light-theme {
|
||||
|
@ -194,12 +195,11 @@
|
|||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include keyboard-mode {
|
||||
box-shadow: 0 0 0 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.NavSidebar__ActionButtonLabel {
|
||||
@include sr-only;
|
||||
|
|
|
@ -64,7 +64,7 @@ $NavTabs__ProfileAvatar__size: 28px;
|
|||
padding-block: $NavTabs__ItemButton__blockPadding;
|
||||
border-radius: 8px;
|
||||
.NavTabs__Item:hover &,
|
||||
.NavTabs__Item:focus-visible & {
|
||||
.NavTabs__Item:focus & {
|
||||
@include light-theme {
|
||||
background-color: $color-black-alpha-06;
|
||||
}
|
||||
|
@ -72,9 +72,12 @@ $NavTabs__ProfileAvatar__size: 28px;
|
|||
background-color: $color-white-alpha-06;
|
||||
}
|
||||
}
|
||||
.NavTabs__Item:focus-visible & {
|
||||
.NavTabs__Item:focus & {
|
||||
outline: none;
|
||||
@include keyboard-mode {
|
||||
box-shadow: 0 0 0 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
.NavTabs__Item:active &,
|
||||
.NavTabs__Item[aria-selected='true'] & {
|
||||
@include light-theme {
|
||||
|
|
|
@ -19,11 +19,13 @@
|
|||
max-width: 280px;
|
||||
background-color: $color-gray-75;
|
||||
color: $color-gray-05;
|
||||
outline: none;
|
||||
|
||||
&:focus:focus-visible {
|
||||
&:focus {
|
||||
outline: none;
|
||||
@include keyboard-mode {
|
||||
box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
&--align-center {
|
||||
@include position-absolute-center-x;
|
||||
|
@ -51,10 +53,12 @@
|
|||
padding-inline: 16px;
|
||||
white-space: nowrap;
|
||||
color: $color-ios-blue-tint;
|
||||
outline: none;
|
||||
|
||||
&:focus:focus-visible {
|
||||
&:focus {
|
||||
outline: none;
|
||||
@include keyboard-mode {
|
||||
box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue