only highlight notes which are "required"

hall · Jun 15, 2023 · a6aec26 · a6aec26
1 parent 10cb162
commit a6aec26
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 21 deletions.
diff --git a/src/app/keyboard/keyboard.component.html b/src/app/keyboard/keyboard.component.html
@@ -1,10 +1,5 @@
 <ul>
-  <li
-    *ngFor="let key of notes.keys"
-    class="{{ key.note }}"
-    [class.pressed]="key.pressed"
-    [class.required]="key.required"
-  >
+  <li *ngFor="let key of notes.keys" class="{{ key.note }}" [class.required]="key.required">
     {{ key.finger }}
   </li>
 </ul>
diff --git a/src/app/keyboard/keyboard.component.scss b/src/app/keyboard/keyboard.component.scss
@@ -1,8 +1,3 @@
-@mixin color($color) {
-  background: $color;
-  opacity: 0.6;
-}
-
 $offset: -0.48%;
 $radius: 3px;
 
@@ -37,16 +32,9 @@ li {
     border-radius: 0 5px 5px 5px;
   }
 
-  &.pressed.required {
-    @include color(#bbb);
-  }
-
-  &:not(.pressed).required {
-    @include color(#33e02f);
-  }
-
-  &.pressed:not(.required) {
-    @include color(#f32020);
+  &.required {
+    background: #33e02f !important;
+    opacity: 0.6;
   }
 
   &:not([class*='S']) {