From 6576a6214adb641b68dfb56b22d6d4d117c56900 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 20 Oct 2021 12:20:12 +0200
Subject: [PATCH] feat: move some form.scss styles to button.vue

---
 src/components/input/button.vue     | 36 +++++++++++++++++++++++++
 src/components/sharing/userTeam.vue |  2 +-
 src/styles/theme/form.scss          | 41 -----------------------------
 3 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/src/components/input/button.vue b/src/components/input/button.vue
index 7a9eb096f..57890913b 100644
--- a/src/components/input/button.vue
+++ b/src/components/input/button.vue
@@ -75,6 +75,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.button {
+  transition: all $transition;
+  border: 0;
+  text-transform: uppercase;
+  font-size: 0.85rem;
+  font-weight: bold;
+  height: $button-height;
+  box-shadow: $shadow-sm;
+
+  &.is-hovered,
+  &:hover {
+    box-shadow: $shadow-md;
+  }
+
+  &.fullheight {
+    padding-right: 7px;
+    height: 100%;
+  }
+
+  &.is-active,
+  &.is-focused,
+  &:active,
+  &:focus,
+  &:focus:not(:active) {
+    box-shadow: $shadow-xs !important;
+  }
+
+  &.is-primary.is-outlined:hover {
+    color: $white;
+  }
+
+  &.is-small {
+    border-radius: $radius;
+  }
+}
+
 .underline-none {
   text-decoration: none !important;
 }
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index f6b7cb134..007cfaa68 100644
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@@ -71,7 +71,7 @@
 					<div class="select">
 						<select
 							@change="toggleType(s)"
-							class="button mr-2"
+							class="mr-2"
 							v-model="selectedRight[s.id]"
 						>
 							<option
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index 0796abd0a..b5bbf0c5c 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -1,44 +1,3 @@
-// FIXME:
-// this should be moved to button.vue
-// what prevents this currently is that the class is also used
-// on a <select> element in userTeam.vue
-// -> Maybe create a mixin and import in both components?
-.button {
-  transition: all $transition;
-  border: 0;
-  text-transform: uppercase;
-  font-size: 0.85rem;
-  font-weight: bold;
-  height: $button-height;
-  box-shadow: $shadow-sm;
-
-  &.is-hovered,
-  &:hover {
-    box-shadow: $shadow-md;
-  }
-
-  &.fullheight {
-    padding-right: 7px;
-    height: 100%;
-  }
-
-  &.is-active,
-  &.is-focused,
-  &:active,
-  &:focus,
-  &:focus:not(:active) {
-    box-shadow: $shadow-xs !important;
-  }
-
-  &.is-primary.is-outlined:hover {
-    color: $white;
-  }
-
-  &.is-small {
-    border-radius: $radius;
-  }
-}
-
 .field.has-addons .button {
   height: 2.5rem;
   margin-left: 0 !important;