Hover and active classes only for desktop

2020-01-25 14:27:09 +01:00
parent dd828b3589
commit 995bb4fd34
1 changed files with 19 additions and 19 deletions
--- a/src/components/GeneratePage.vue
+++ b/src/components/GeneratePage.vue
@@ -383,27 +383,27 @@ button {
    }
  }

-  &:hover input {
-    &#greenCheckbox ~ .border .checkmark {
-      background-color: $green;
+  @include desktop {
+    &:hover input {
+      &#greenCheckbox ~ .border .checkmark {
+        background-color: $green;
+      }
+
+      &#redCheckbox ~ .border .checkmark {
+        background-color: $red;
+      }
+
+      &#yellowCheckbox ~ .border .checkmark {
+        background-color: $yellow;
+      }
+
+      &#blueCheckbox ~ .border .checkmark {
+        background-color: $blue;
+      }
    }

-    &#redCheckbox ~ .border .checkmark {
-      background-color: $red;
-    }
-
-    &#yellowCheckbox ~ .border .checkmark {
-      background-color: $yellow;
-    }
-
-    &#blueCheckbox ~ .border .checkmark {
-      background-color: $blue;
-    }
-  }
-
-  &:focus input,
-  &:active input {
-    @include desktop {
+    &:focus input,
+    &:active input {
      &#greenCheckbox ~ .border .checkmark {
        background-color: $dark-green;
      }