diff options
Diffstat (limited to 'src/sass/components/control.scss')
| -rw-r--r-- | src/sass/components/control.scss | 22 |
1 files changed, 11 insertions, 11 deletions
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss index 52716805..d93a6f34 100644 --- a/src/sass/components/control.scss +++ b/src/sass/components/control.scss @@ -5,21 +5,21 @@ .plyr__control { background: transparent; border: 0; - border-radius: $plyr-control-radius; + border-radius: var(--plyr-control-radius); color: inherit; cursor: pointer; flex-shrink: 0; overflow: visible; // IE11 - padding: $plyr-control-padding; + padding: var(--plyr-control-padding); position: relative; transition: all 0.3s ease; svg { display: block; fill: currentColor; - height: $plyr-control-icon-size; + height: var(--plyr-control-icon-size); pointer-events: none; - width: $plyr-control-icon-size; + width: var(--plyr-control-icon-size); } // Default focus @@ -46,18 +46,18 @@ &.plyr__tab-focus, &:hover, &[aria-expanded='true'] { - background: $plyr-audio-control-bg-hover; - color: $plyr-audio-control-color-hover; + background: var(--plyr-audio-control-bg-hover); + color: var(--plyr-audio-control-color-hover); } } // Large play button (video only) .plyr__control--overlaid { - background: rgba($plyr-video-control-bg-hover, 0.8); + background: var(--plyr-video-control-bg-hover); border: 0; border-radius: 100%; box-shadow: 0 1px 1px rgba(#000, 0.15); - color: $plyr-video-control-color; + color: var(--plyr-video-control-color); display: none; left: 50%; padding: ceil($plyr-control-spacing * 1.5); @@ -67,15 +67,15 @@ z-index: 2; svg { - height: $plyr-control-icon-size-large; + height: var(--plyr-control-icon-size-large); left: 2px; // Offset to make the play button look right position: relative; - width: $plyr-control-icon-size-large; + width: var(--plyr-control-icon-size-large); } &:hover, &:focus { - background: $plyr-video-control-bg-hover; + background: var(--plyr-video-control-bg-hover); } } |