refactor: move button styles in separate mixin

src/components/Button.vue

@@ -21,6 +21,7 @@ export default {
 
 <style lang="scss">
 @import "@/scss/_variables.scss";
+@import "@/scss/_mixins.scss";
 
 .btn {
   margin: 0.5em 0;
@@ -30,7 +31,6 @@ export default {
   top: 0;
 
   border-radius: 0.25em;
-  box-shadow: 0 0.5em 0 0 darken($bg-color-dark, 10%);
 
   transition: all 0.1s ease-out;
 
@@ -40,14 +40,14 @@ export default {
   text-decoration: none;
   text-align: center;
 
+  @include button($bg-color-dark);
+
   &:hover {
     top: -0.25em;
-    box-shadow: 0 0.75em 0 0 darken($bg-color-dark, 10%);
   }
 
   &:active {
     top: 0.25em;
-    box-shadow: 0 0.25em 0 0 darken($bg-color-dark, 10%);
   }
 }
 </style>

src/components/NsfwWarning.vue

@@ -30,6 +30,7 @@ export default {
       this.$root.nsfw = input;
       this.$root.isConfirmedHorny = input;
       this.$root.isWarn = false;
+      document.body.classList.toggle("scroll-lock");
     },
   },
 };
@@ -57,6 +58,7 @@ export default {
 
   padding: 2em;
   text-align: center;
+  overflow: auto;
 
   &__background {
     position: absolute;
@@ -101,29 +103,11 @@ export default {
   margin: 0.75em 0;
 
   &.positive {
-    box-shadow: 0 0.5em 0 0 darken($btn-color-positive, 10%);
+    @include button($btn-color-positive);
-    background-color: $btn-color-positive;
-
-    &:hover {
-      box-shadow: 0 0.75em 0 0 darken($btn-color-positive, 10%);
-    }
-
-    &:active {
-      box-shadow: 0 0.25em 0 0 darken($btn-color-positive, 10%);
-    }
   }
 
   &.negative {
-    box-shadow: 0 0.5em 0 0 darken($btn-color-negative, 10%);
+    @include button($btn-color-negative);
-    background-color: $btn-color-negative;
-
-    &:hover {
-      box-shadow: 0 0.75em 0 0 darken($btn-color-negative, 10%);
-    }
-
-    &:active {
-      box-shadow: 0 0.25em 0 0 darken($btn-color-negative, 10%);
-    }
   }
 }
 </style>

src/scss/_mixins.scss

@@ -1,5 +1,11 @@
+@mixin mq-bigscreen() {
+  @media (min-width: 125em)  {
+    @content
+  }
+};
+
 @mixin mq-desktop() {
-  @media (min-width: 60em) {
+  @media (min-width: 50em) {
     @content
   }
 };
@@ -9,3 +15,16 @@
     @content
   }
 };
+
+@mixin button($btn-color, $darken: 10%) {
+  box-shadow: 0 0.5em 0 0 darken($btn-color, $darken);
+  background-color: $btn-color;
+
+  &:hover {
+    box-shadow: 0 0.75em 0 0 darken($btn-color, $darken);
+  }
+
+  &:active {
+    box-shadow: 0 0.25em 0 0 darken($btn-color, $darken);
+  }
+}