diff options
Diffstat (limited to 'src/sass/components/control.scss')
| -rw-r--r-- | src/sass/components/control.scss | 20 |
1 files changed, 10 insertions, 10 deletions
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss index 1c9aab2b..ee24604e 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 @@ -71,18 +71,18 @@ a.plyr__control { &.plyr__tab-focus, &:hover, &[aria-expanded='true'] { - background: $plyr-video-control-bg-hover; - color: $plyr-video-control-color-hover; + background: var(--plyr-video-control-bg-hover); + color: var(--plyr-video-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-hover); display: none; left: 50%; padding: ceil($plyr-control-spacing * 1.5); @@ -93,13 +93,13 @@ a.plyr__control { // Offset icon to make the play button look right svg { - left: 2px; + left: 2px; // Offset to make the play button look right position: relative; } &:hover, &:focus { - background: $plyr-video-control-bg-hover; + background: var(--plyr-video-control-bg-hover); } } |