fix(volume): vertical slider causes viewport overflow in rtl layout

Fixes videojs#7743
amtins · Jun 13, 2023 · 5d4b28c · 5d4b28c
1 parent 2b0df25
commit 5d4b28c
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss
@@ -51,7 +51,11 @@
  position: relative;
 
  &.vjs-volume-vertical {
- left: -3.5em;
+ height: 8em;
+ width: 3em;
+
+ pointer-events: initial;
+
  @include transition(left 0s);
  }
  $transition-property: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
@@ -75,10 +79,6 @@
 }
 
 .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
- height: 8em;
- width: 3em;
- left: -3000em;
-
  $transition-property: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
  @include transition($transition-property)
 }
@@ -192,10 +192,11 @@
 }
 
 .video-js .vjs-volume-vertical {
- width: 3em;
- height: 8em;
+ left: -3.5em;
  bottom: 8em;
 
+ pointer-events: none;
+
  @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
 }