Add active/inactive styling to ClassPicker

2019-07-21 22:36:46 +02:00
parent 431f944b50
commit 8302af7504
7 changed files with 73 additions and 48 deletions
@@ -3,7 +3,6 @@ body {
 }

 .calculator {
-  
  &__points {
    color: white;
    text-align: center;
@@ -40,15 +39,26 @@ body {

 .class-picker {
  display: flex;
+  justify-content: center;

  &__class {
    margin-right: 2em;
-  }
+    opacity: .8;

-  // TODO: Make BEM 
-  a {
-    &.active {
-      font-weight: bold;
+    &:hover {
+      opacity: 1;
+    }
+
+    &--active {
+      opacity: 1;
+    }
+
+    &--inactive {
+      opacity: .4;
+
+      &:hover {
+        opacity: .6;
+      }
    }
  }
 }