Merge pull request #644 from bitmovin/feature/button-interaction

Feature/button interaction
bitmovin · Aug 20, 2024 · 6c09514 · 6c09514
2 parents 8be63ad + b6f5a0f
commit 6c09514
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 44 deletions.
diff --git a/src/scss/skin-super-modern/_mixins.scss b/src/scss/skin-super-modern/_mixins.scss
@@ -120,11 +120,7 @@
 }
 
 @mixin svg-icon-shadow {
-  filter: drop-shadow(0 0 1px $color-primary);
-}
-
-@mixin svg-icon-on-shadow {
-  filter: drop-shadow(0 0 1px $color-highlight);
+  filter: drop-shadow(0 0 .25px $color-primary);
 }
 
 @mixin seekbar-position-marker($marker-dimension) {

diff --git a/src/scss/skin-super-modern/components/_button.scss b/src/scss/skin-super-modern/components/_button.scss
@@ -3,6 +3,7 @@
 %ui-button {
   @extend %ui-component;
 
+  transition: transform 0.15s ease;
   background-color: transparent;
   background-origin: content-box;
   background-position: center;
@@ -36,6 +37,10 @@
     }
   }
 
+  &:active {
+    transform: scale(0.9);
+  }
+
   @include hidden;
   @include focusable;
 }

diff --git a/src/scss/skin-super-modern/components/_settingstogglebutton.scss b/src/scss/skin-super-modern/components/_settingstogglebutton.scss
@@ -7,12 +7,6 @@
   &:hover {
     @include svg-icon-shadow;
   }
-
-  &.#{$prefix}-on {
-    &:hover {
-      @include svg-icon-on-shadow;
-    }
-  }
 }
 
 .#{$prefix}-ui-settingstogglebutton {

diff --git a/src/scss/skin-super-modern/components/_smallcenteredplaybacktogglebutton.scss b/src/scss/skin-super-modern/components/_smallcenteredplaybacktogglebutton.scss
@@ -3,39 +3,8 @@
 .#{$prefix}-ui-smallcenteredplaybacktogglebutton {
   @extend %ui-button;
 
-  @keyframes #{$prefix}-fade-out {
-    from {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    to {
-      opacity: 0;
-      transform: scale(2);
-      visibility: hidden;
-    }
-  }
-
-  @keyframes #{$prefix}-fade-in {
-    from {
-      opacity: 0;
-      transform: scale(2);
-      visibility: visible;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes #{$prefix}-breathe {
-    30% {
-      transform: scale(1.1);
-    }
-
-    60% {
-      transform: scale(1);
-    }
+  &:hover {
+    @include svg-icon-shadow;
   }
 
   cursor: default;