93 lines
2.4 KiB
Vue
93 lines
2.4 KiB
Vue
<template>
|
|
<button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="isPrimary ? 'btn-primary' : 'btn-secondary'" @click="displayComponent">
|
|
<span class="m-0">{{ this.buttonText }}</span>
|
|
<loader class="ms-2" v-if="display" v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }" v-bind:class="[this.loaderColor, this.loaderPosition]" />
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
import loader from "@/ux-components/loader/loader";
|
|
export default {
|
|
name: "buttonPrimary",
|
|
props: {
|
|
isPrimary: Boolean,
|
|
buttonText: String,
|
|
isDisabled: Boolean,
|
|
loaderColor: String,
|
|
loaderPosition: String,
|
|
sizeInRem: [Number, String],
|
|
},
|
|
data() {
|
|
return {
|
|
display: false,
|
|
};
|
|
},
|
|
methods: {
|
|
displayComponent() {
|
|
this.display = true;
|
|
},
|
|
},
|
|
components: {
|
|
loader,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.btn {
|
|
&.btn-primary {
|
|
position: relative;
|
|
background: $blue-700;
|
|
@include blue-gradient;
|
|
border: none;
|
|
border-radius: $border-radius-lg;
|
|
color: $white;
|
|
transition: all 150ms linear;
|
|
&:hover {
|
|
background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
|
|
}
|
|
&:focus, // Mouse, touch, stylus focus
|
|
&:focus-visible { // Keyboard focus for accessibility
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
|
|
color: $white;
|
|
@include blue-gradient;
|
|
}
|
|
&:disabled {
|
|
background: $gray-100 !important;
|
|
background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important;
|
|
color: $gray !important;
|
|
height: 48px;
|
|
border: none;
|
|
border-radius: $border-radius-lg;
|
|
}
|
|
}
|
|
&.btn-secondary {
|
|
position: relative;
|
|
background: transparent;
|
|
border: 1px solid $blue;
|
|
border-radius: $border-radius-lg;
|
|
color: $blue;
|
|
transition: all 150ms linear;
|
|
&:hover {
|
|
color: $white;
|
|
@include blue-gradient;
|
|
}
|
|
&:focus, // Mouse, touch, stylus focus
|
|
&:focus-visible { // Keyboard focus for accessibility
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
|
|
color: $white;
|
|
@include blue-gradient;
|
|
}
|
|
&:disabled {
|
|
background: transparent;
|
|
color: $gray !important;
|
|
height: 48px;
|
|
border: 1px solid $gray-300;
|
|
border-radius: $border-radius-lg;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|