moved to pure css slider handles

videojs · May 12, 2015 · 4579d02 · 4579d02
1 parent b65bad8
commit 4579d02
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/src/css/components/_progress.scss b/src/css/components/_progress.scss
@@ -27,7 +27,16 @@
 
 .video-js .vjs-play-progress {
   background-color: $primary-text;
+  @extend .vjs-icon-circle;
+
+  &:before {
+    position: absolute;
+    top: -0.3em;
+    right: -0.5em;
+
+  }
 }
+
 .video-js .vjs-load-progress {
   background: rgb(100, 100, 100) /* IE8- Fallback */;
   background: rgba(255, 255, 255, 0.2);
@@ -42,6 +51,7 @@ specific time ranges that have been buffered */
 .video-js .vjs-slider-handle.vjs-seek-handle {
   width: 0.95em;
   height: 0.95em;
+  display: none;
 }
 
 

diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss
@@ -41,12 +41,33 @@
   left: 0;
 
   background-color: $primary-text;
+
+  @extend .vjs-icon-circle;
+
+  &:before {
+    position: absolute;
+  }
 }
 
-.video-js .vjs-slider-vertical .vjs-volume-level { width: 0.3em; }
-.video-js .vjs-slider-horizontal .vjs-volume-level { height: 0.3em; }
+.video-js .vjs-slider-vertical .vjs-volume-level {
+  width: 0.3em;
+
+  &:before {
+    top: -0.5em;
+    left: -0.3em;
+  }
+}
+.video-js .vjs-slider-horizontal .vjs-volume-level {
+  height: 0.3em;
+
+  &:before {
+    top: -0.3em;
+    right: -0.5em;
+  }
+}
 
 .video-js .vjs-volume-bar .vjs-volume-handle {
+  display: none;
   width: 0.8em;
   height: 0.8em;
 }