181 lines
4.5 KiB
Vue
181 lines
4.5 KiB
Vue
<template lang="pug">
|
|
button.base-button.text-base(
|
|
type="button",
|
|
:disabled="disabled",
|
|
:class="{'rounded': rounded, 'outlined': outlined, 'outlined-red': outlinedRed, 'secondary': secondary, 'confirm': confirm, 'added': added, 'added-border-none': addedBorderNone}"
|
|
:style="{height: size + 'px', minWidth: size + 'px'}"
|
|
)
|
|
.button-container
|
|
span.icon-container(
|
|
:class="leftIcon",
|
|
v-if="leftIcon",
|
|
:style="{fontSize: iconLeftSize + 'px'}"
|
|
)
|
|
slot
|
|
.split(v-if="split")
|
|
span.icon-container(
|
|
:class="rightIcon",
|
|
v-if="rightIcon",
|
|
:style="{fontSize: iconRightSize + 'px', marginLeft: marginLeftIcon + 'px'}"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "BaseButton",
|
|
props: {
|
|
confirm: Boolean,
|
|
outlined: Boolean,
|
|
outlinedRed: Boolean,
|
|
added: Boolean,
|
|
addedBorderNone: Boolean,
|
|
rounded: Boolean,
|
|
disabled: Boolean,
|
|
split: Boolean,
|
|
secondary: Boolean,
|
|
rightIcon: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
leftIcon: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
iconLeftSize: {
|
|
type: Number,
|
|
default: 10,
|
|
},
|
|
iconRightSize: {
|
|
type: Number,
|
|
default: 10,
|
|
},
|
|
size: {
|
|
type: Number,
|
|
default: 24,
|
|
},
|
|
marginLeftIcon: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="sass">
|
|
.base-button
|
|
padding: 8px 23px
|
|
background-color: var(--btn-blue-color)
|
|
border: 1px solid var(--btn-blue-color)
|
|
color: var(--default-white)
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
border-radius: 4px
|
|
white-space: nowrap
|
|
&:active
|
|
background-color: var(--font-dark-blue-color)
|
|
border: 1px solid var(--font-dark-blue-color)
|
|
&:hover
|
|
background-color: var(--btn-blue-color-hover)
|
|
border: 1px solid var(--btn-blue-color-hover)
|
|
&:disabled, &[disabled]
|
|
background-color: var(--btn-blue-color-disabled)
|
|
border: 1px solid var(--btn-blue-color-disabled)
|
|
&:focus
|
|
outline: 0
|
|
.rounded
|
|
padding: 0
|
|
border-radius: 50%
|
|
|
|
.outlined
|
|
background-color: var(--default-white)
|
|
border: 1.5px solid var(--btn-blue-color)
|
|
color: var(--btn-blue-color)
|
|
&:active
|
|
background-color: var(--default-white)
|
|
border: 1.5px solid var(--font-dark-blue-color)
|
|
color: var(--font-dark-blue-color)
|
|
&:hover
|
|
background-color: var(--default-white)
|
|
border: 1.5px solid var(--btn-blue-color-hover)
|
|
color: var(--btn-blue-color-hover)
|
|
&:disabled, &[disabled]
|
|
background-color: var(--default-white)
|
|
border: 1.5px solid var(--btn-blue-color-1)
|
|
color: var(--btn-blue-color-1)
|
|
|
|
.outlined-red
|
|
background-color: var(--default-white)
|
|
border: 1.5px solid var(--border-red-color)
|
|
color: var(--border-red-color)
|
|
&:active
|
|
background-color: var(--default-white)
|
|
border: 1.5px solid var(--bg-event-red-color)
|
|
color: var(--bg-event-red-color)
|
|
&:hover
|
|
background-color: var(--default-white)
|
|
border: 1.5px solid var(--bg-event-red-color-1)
|
|
color: var(--bg-event-red-color-1)
|
|
&:disabled, &[disabled]
|
|
background-color: var(--default-white)
|
|
border: 1.5px solid var(--bg-event-red-color-0)
|
|
color: var(--bg-event-red-color-0)
|
|
|
|
.added
|
|
border: 2px solid var(--btn-blue-color)
|
|
&:hover
|
|
border: none
|
|
background-color: var(--btn-blue-color)
|
|
color: var(--default-white)
|
|
.added-border-none
|
|
border: none
|
|
width: fit-content
|
|
background-color: var(--bg-opacity-0)
|
|
color: var(--btn-blue-color)
|
|
padding: 0
|
|
row-gap: 10px
|
|
&:hover
|
|
border: none
|
|
color: var(--btn-blue-color-hover)
|
|
background-color: var(--bg-opacity-0)
|
|
.secondary
|
|
background-color: var(--btn-blue-sec-color)
|
|
border: 1px solid var(--btn-blue-sec-color)
|
|
color: var(--btn-blue-color)
|
|
&:hover
|
|
background-color: var(--btn-blue-color-hover)
|
|
border: 1px solid var(--btn-blue-color-hover)
|
|
color: var(--btn-blue-color)
|
|
&:disabled, &[disabled]
|
|
background-color: var(--btn-blue-sec-color)
|
|
border: 1px solid var(--btn-blue-sec-color)
|
|
color: var(--btn-blue-color)
|
|
|
|
.confirm
|
|
border-color: var(--btn-blue-color)
|
|
border: 2px solid var(--btn-blue-color)
|
|
&:hover
|
|
border: none
|
|
background-color: var(--btn-blue-color)
|
|
color: var(--default-white)
|
|
&:active
|
|
background-color: var(--btn-light-green-color)
|
|
color: var(--btn-green-color)
|
|
|
|
.button-container
|
|
display: flex
|
|
gap: 8px
|
|
|
|
.split
|
|
height: 19px
|
|
width: 1px
|
|
border-radius: 1px
|
|
background-color: var(--default-white)
|
|
opacity: 0.3
|
|
|
|
.icon-container
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
</style>
|