feat: added vue component gradient button

dev/views/Buttons.vue

@@ -6,19 +6,23 @@
  <br>
  <div><ButtonDestructive>Button Destructive</ButtonDestructive></div>
  <br>
+ <div><ButtonGradient>Button Gradient</ButtonGradient></div>
+ <br>
+
 
  </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import { ButtonPrimary,ButtonSecondary,ButtonDestructive } from '@/index'
+import { ButtonPrimary,ButtonSecondary,ButtonDestructive, ButtonGradient } from '@/index'
 
 export default Vue.extend({
  components: {
  ButtonPrimary,
  ButtonSecondary,
- ButtonDestructive
+ ButtonDestructive,
+ ButtonGradient
  }
 })
 </script>

src/components/ButtonGradient.vue

@@ -0,0 +1,23 @@
+<template>
+ <a class="ft-button--wrapper" href="#">
+ <BaseButton 
+ v-bind="$attrs"
+ class="ft-button--gradient"
+ v-on="$listeners"
+ >
+ <slot/>
+ </BaseButton>
+ </a>
+</template>
+
+<script lang="ts">
+import Vue from "vue"
+import BaseButton from "./BaseButton.vue"
+
+export default Vue.extend({
+ name: "ButtonGradient",
+ components: {
+ BaseButton
+ },
+})
+</script>

src/index.ts

@@ -7,6 +7,7 @@ export { default as BaseButton } from "./components/BaseButton.vue"
 export { default as ButtonPrimary } from "./components/ButtonPrimary.vue"
 export { default as ButtonSecondary } from "./components/ButtonSecondary.vue"
 export { default as ButtonDestructive } from "./components/ButtonDestructive.vue"
+export { default as ButtonGradient } from "./components/ButtonGradient.vue"
 
 
 export { default as Card } from "./components/Card.vue"

src/styles/components/_buttons.scss

@@ -145,6 +145,36 @@ body.user-is-tabbing button:focus {
  }
  }
 }
+.ft-button--wrapper{
+ padding: 2px 2px 2px 2px;
+ background-image: linear-gradient(to right, #0018AB , #9933CC );
+ border-radius: 4px;
+ box-sizing: border-box;
+ display: block;
+ margin: 0 auto;
+ /*-webkit-border-image: -webkit-linear-gradient(to right, #0018AB , #9933CC ) 5;
+ -moz-border-image: -moz-linear-gradient(to right, #0018AB , #9933CC ) 5;
+ -o-border-image: -o-linear-gradient(to right, #0018AB , #9933CC ) 5;*/
+}
+.ft-button--gradient {
+ border: none;
+ background-color: $color-white;
+ color: $color-gray;
+
+ &:hover {
+ background: transparent;
+ color: $color-white;
+ }
+
+ &:disabled {
+ opacity: 0.4;
+
+ &:hover {
+ background-color: $color-gray;
+ }
+ }
+}
+
 
 .hvr-grow {
  display: inline-block;