94 lines
2.0 KiB
Vue
94 lines
2.0 KiB
Vue
<template>
|
|
<button :type="type" class="button__button"
|
|
:class="{ 'button__button__disabled': disabled, 'button__button__border': border, 'button__button__caution': cssClass === 'caution', 'button__button__mini': cssClass === 'mini' }">
|
|
<slot />
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'button',
|
|
},
|
|
border: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
cssClass: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~/assets/css/components';
|
|
|
|
.button {
|
|
&__button {
|
|
display: inline-block;
|
|
padding: 4px 24px;
|
|
background-color: inherit;
|
|
color: $text-secondary-color;
|
|
text-align: center;
|
|
font-family: $font-secondary;
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: $text-secondary-hover-color;
|
|
}
|
|
|
|
&__border {
|
|
background-color: $button-background-color;
|
|
color: $button-text-color;
|
|
border: $button-border;
|
|
border-radius: 8px;
|
|
|
|
&:hover {
|
|
border: $button-hover-border;
|
|
background-color: $button-hover-background-color;
|
|
color: $button-hover-text-color;
|
|
}
|
|
}
|
|
|
|
&__disabled,
|
|
&__disabled:hover {
|
|
cursor: default;
|
|
background-color: $button-disabled-background-color;
|
|
margin: 4px;
|
|
color: $button-disabled-text-color;
|
|
|
|
&.button__button__border {
|
|
margin: 0;
|
|
border: $button-disabled-border-border;
|
|
}
|
|
}
|
|
|
|
&__caution {
|
|
background-color: $button-caution-background-color;
|
|
border: $button-caution-border;
|
|
color: $button-caution-text-color;
|
|
|
|
&:hover {
|
|
background-color: $button-caution-hover-background-color;
|
|
border: $button-caution-hover-border;
|
|
color: $button-caution-hover-text-color;
|
|
}
|
|
}
|
|
|
|
&__mini {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|