diff options
| author | Sam Potts <sam@potts.es> | 2018-12-08 17:06:20 +1100 |
|---|---|---|
| committer | Sam Potts <sam@potts.es> | 2018-12-08 17:06:20 +1100 |
| commit | bdd513635fffa33f66735c80209e6ae77e0426b4 (patch) | |
| tree | f0614c3f28412ece15401ae7df8a42faa6d03f79 /src | |
| parent | b7b2e3c0aa0749eed53ae91230082cb0482e1f28 (diff) | |
| download | plyr-bdd513635fffa33f66735c80209e6ae77e0426b4.tar.lz plyr-bdd513635fffa33f66735c80209e6ae77e0426b4.tar.xz plyr-bdd513635fffa33f66735c80209e6ae77e0426b4.zip | |
Work on outline/focus styles
Diffstat (limited to 'src')
| -rw-r--r-- | src/sass/components/control.scss | 4 | ||||
| -rw-r--r-- | src/sass/lib/mixins.scss | 10 | ||||
| -rw-r--r-- | src/sass/settings/controls.scss | 1 |
3 files changed, 9 insertions, 6 deletions
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss index d5a9847e..eedcab13 100644 --- a/src/sass/components/control.scss +++ b/src/sass/components/control.scss @@ -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); } } diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss index e015ffee..0a0f7dcb 100644 --- a/src/sass/lib/mixins.scss +++ b/src/sass/lib/mixins.scss @@ -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 diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index ee88434a..906744b2 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -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, |