From aa7e6a2a5370ae8c8b9f9ac92767b8d8055d4ed2 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Mon, 10 Jan 2022 00:50:47 +0100
Subject: [PATCH] Fullwidth property for seasoned button

---
 src/components/ui/SeasonedButton.vue | 33 ++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/SeasonedButton.vue b/src/components/ui/SeasonedButton.vue
index 6036f2f..578a94c 100644
--- a/src/components/ui/SeasonedButton.vue
+++ b/src/components/ui/SeasonedButton.vue
@@ -1,26 +1,34 @@
 <template>
-  <button type="button" @click="emit('click')" :class="{ active: active }">
+  <button
+    type="button"
+    @click="emit('click')"
+    :class="{ active: active, fullwidth: fullWidth }"
+  >
     <slot></slot>
   </button>
 </template>
 
 <script>
-
 export default {
-  name: 'seasonedButton',
+  name: "seasonedButton",
   props: {
     active: {
       type: Boolean,
       default: false,
       required: false
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   methods: {
     emit() {
-      this.$emit('click')
+      this.$emit("click");
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -43,14 +51,25 @@ button {
   background: $background-color-secondary;
   cursor: pointer;
   outline: none;
-  transition: background 0.5s ease, color 0.5s ease, border-color .5s ease;
+  transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
 
   @include desktop {
     font-size: 0.8rem;
     padding: 6px 20px 5px 20px;
   }
 
-  &:focus, &:active, &.active {
+  &.fullwidth {
+    font-size: 14px;
+    width: 40%;
+
+    @include mobile {
+      width: 60%;
+    }
+  }
+
+  &:focus,
+  &:active,
+  &.active {
     background: $text-color;
     color: $background-color;
   }