133 lines
3.1 KiB
Vue
133 lines
3.1 KiB
Vue
<template>
|
|
<button
|
|
:aria-disabled="isDisabled"
|
|
class="btn d-flex align-items-center py-3 px-2 delay"
|
|
:class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
|
|
@click="clicked()"
|
|
>
|
|
<span class="m-0">{{ this.buttonText }}</span>
|
|
<loader
|
|
class="ms-2"
|
|
v-if="isLoaderDisplayed"
|
|
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: "buttonMain",
|
|
props: {
|
|
isPrimary: Boolean,
|
|
buttonText: String,
|
|
isDisabled: Boolean,
|
|
loaderColor: String,
|
|
loaderPosition: String,
|
|
sizeInRem: [Number, String],
|
|
isFloat: Boolean,
|
|
},
|
|
data() {
|
|
return {
|
|
isLoaderDisplayed: false,
|
|
};
|
|
},
|
|
methods: {
|
|
clicked() {
|
|
if (!this.isDisabled) {
|
|
this.isLoaderDisplayed = true;
|
|
this.$emit("click-event");
|
|
}
|
|
},
|
|
},
|
|
components: {
|
|
loader,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.btn {
|
|
&.btn-primary {
|
|
position: relative;
|
|
background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
|
|
border: none;
|
|
border-radius: $border-radius-lg;
|
|
color: $white;
|
|
justify-content: center;
|
|
&: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;
|
|
background: linear-gradient(
|
|
270deg,
|
|
rgba(6, 87, 124, 1) 0%,
|
|
rgba(6, 87, 124, 1) 100%
|
|
);
|
|
}
|
|
&: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;
|
|
}
|
|
&.has-loader {
|
|
color: $white;
|
|
background: $blue-700;
|
|
}
|
|
&.delay {// fixes flicker while transitioning between states
|
|
transition: background 0s 0s ease-in-out;
|
|
}
|
|
}
|
|
&.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;
|
|
}
|
|
&.has-loader {
|
|
color: $white;
|
|
@include blue-gradient;
|
|
}
|
|
&.delay {// fixes flicker while transitioning between states
|
|
transition: background 0s 0s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
</style>
|