refactor: Reorder SASS styles to address deprecation

videojs · Jul 30, 2024 · ad226b1 · ad226b1
1 parent c4007db
commit ad226b1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/src/css/components/_close-button.scss b/src/css/components/_close-button.scss
@@ -1,12 +1,12 @@
 .video-js .vjs-control.vjs-close-button {
-  & .vjs-icon-placeholder {
-    @extend .vjs-icon-cancel;
-  }
-
   cursor: pointer;
   height: 3em;
   position: absolute;
   right: 0;
   top: 0.5em;
   z-index: 2;
+
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-cancel;
+  }
 }
diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
@@ -21,6 +21,9 @@
   // Avoiding helvetica: issue #376
   font-family: $text-font-family;
 
+  // reset word-break inside the player div
+  word-break: initial;
+
   // Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
   // checking fullScreenEnabled.
   &:-moz-full-screen { position: absolute; }
@@ -29,9 +32,6 @@
     width: 100% !important;
     height: 100% !important;
   }
-
-  // reset word-break inside the player div
-  word-break: initial;
 }
 
 .video-js[tabindex="-1"] {

diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss
@@ -35,27 +35,30 @@
 }
 
 .video-js .vjs-volume-panel {
+  @include transition(width 1s);
+
   &.vjs-hover .vjs-volume-control,
   &:active .vjs-volume-control,
   &:focus  .vjs-volume-control,
   & .vjs-volume-control:active,
   &.vjs-hover .vjs-mute-control  ~ .vjs-volume-control,
   & .vjs-volume-control.vjs-slider-active {
+    visibility: visible;
+    opacity: 1;
+    position: relative;
+    $transition-property: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
+    @include transition($transition-property);
+
     &.vjs-volume-horizontal {
       width: 5em;
       height: 3em;
       margin-right: 0;
     }
-    visibility: visible;
-    opacity: 1;
-    position: relative;
 
     &.vjs-volume-vertical {
       left: -3.5em;
       @include transition(left 0s);
     }
-    $transition-property: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
-    @include transition($transition-property);
   }
 
   &.vjs-volume-panel-horizontal {
@@ -70,8 +73,6 @@
       width: 4em;
     }
   }
-
-  @include transition(width 1s);
 }
 
 .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {