Work on outline/focus styles

This commit is contained in:
Sam Potts
2018-12-08 17:06:20 +11:00
parent b7b2e3c0aa
commit bdd513635f
7 changed files with 284 additions and 183 deletions

View File

@ -71,8 +71,8 @@ a.plyr__control {
&.plyr__tab-focus,
&:hover,
&[aria-expanded='true'] {
background: var(--plyr-audio-control-bg-hover);
color: var(--plyr-audio-control-color-hover);
background: var(--plyr-video-control-bg-hover);
color: var(--plyr-video-control-color-hover);
}
}

View File

@ -4,9 +4,13 @@
// Nicer focus styles
// ---------------------------------------
@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
box-shadow: 0 0 0 5px rgba($color, 0.5);
outline: 0;
@mixin plyr-tab-focus() {
// box-shadow: 0 0 0 5px rgba($color, 0.5);
// outline: 0;
outline-color: var(--plyr-color-main);
outline-offset: 2px;
outline-style: dotted;
outline-width: 3px;
}
// Font smoothing

View File

@ -20,7 +20,6 @@ $plyr-audio-control-bg-hover: var(--plyr-color-main) !default;
@include css-vars(
(
--plyr-control-icon-size: $plyr-control-icon-size,
--plyr-control-icon-size-large: $plyr-control-icon-size-large,
--plyr-control-spacing: $plyr-control-spacing,
--plyr-control-padding: $plyr-control-padding,
--plyr-control-radius: $plyr-control-radius,