only show volume slider when hovering over volume area

gillesdemey · Oct 2, 2016 · 0188cdb · 0188cdb
1 parent 6aa77dc
commit 0188cdb
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/app/scss/_mediaplayer.scss b/app/scss/_mediaplayer.scss
@@ -121,12 +121,21 @@
 .controls__volume {
   display: flex;
 
-  width: 25%;
+  width: 22.5%;
   height: 28px;
   line-height: 28px;
 
   position: absolute;
   left: 10px;
+  transition: all 150ms;
+
+  .volume__seeker { transition: all 150ms; opacity: 0; }
+
+  &:hover {
+    width: 25%;
+
+    .volume__seeker { opacity: 1; }
+  }
 }
 
 .volume__icon button.icon__toggle {