feat: move some form.scss styles to button.vue

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;
 }

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

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;