Permalink
Browse files
feat: make menu background respect :focus-visible (#5558)
- Loading branch information...
Showing
with
8 additions
and
3 deletions.
-
+4
−2
src/css/components/menu/_menu.scss
-
+4
−1
src/css/video-js.scss
|
@@ -43,13 +43,15 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.vjs-menu li.vjs-menu-item:focus, |
|
|
|
.vjs-menu li.vjs-menu-item:hover { |
|
|
|
.vjs-menu li.vjs-menu-item:hover, |
|
|
|
.js-focus-visible .vjs-menu li.vjs-menu-item:hover { |
|
|
|
@include background-color-with-alpha($secondary-background-color, $secondary-background-transparency); |
|
|
|
} |
|
|
|
|
|
|
|
.vjs-menu li.vjs-selected, |
|
|
|
.vjs-menu li.vjs-selected:focus, |
|
|
|
.vjs-menu li.vjs-selected:hover { |
|
|
|
.vjs-menu li.vjs-selected:hover, |
|
|
|
.js-focus-visible .vjs-menu li.vjs-selected:hover { |
|
|
|
background-color: $primary-foreground-color; |
|
|
|
color: $primary-background-color; |
|
|
|
} |
|
|
|
@@ -56,8 +56,11 @@ |
|
|
|
// The rule is needed for :focus-visible polyfill |
|
|
|
.js-focus-visible .video-js *:focus:not(.focus-visible) { |
|
|
|
outline: none; |
|
|
|
background: none; |
|
|
|
} |
|
|
|
|
|
|
|
.video-js *:focus:not(:focus-visible) { |
|
|
|
.video-js *:focus:not(:focus-visible), |
|
|
|
.video-js .vjs-menu *:focus:not(:focus-visible) { |
|
|
|
outline: none; |
|
|
|
background: none; |
|
|
|
} |
0 comments on commit
e5e1e29