111 lines
2.2 KiB
Vue
111 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
import { Icon } from '@iconify/vue';
|
|
|
|
defineEmits<{
|
|
(e: 'click', v: MouseEvent): void;
|
|
}>();
|
|
defineProps<{
|
|
iconOnly?: boolean;
|
|
solid?: boolean;
|
|
outlined?: boolean;
|
|
disabled?: boolean;
|
|
dark?: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
@click="(e) => $emit('click', e)"
|
|
class="main-btn-save"
|
|
:class="{
|
|
'main-btn__solid': solid && !outlined,
|
|
'main-btn__outline': !solid && outlined,
|
|
'main-btn__dark': dark,
|
|
'main-btn__icon-only': iconOnly,
|
|
}"
|
|
:disabled="disabled"
|
|
>
|
|
<slot name="icon">
|
|
<Icon icon="mdi-content-save" class="main-btn-icon" />
|
|
</slot>
|
|
<slot v-if="!iconOnly">{{ $t('save') }}</slot>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.main-btn-save {
|
|
--button-main-color: var(--positive-bg);
|
|
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
background: transparent;
|
|
border: none;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
border-radius: var(--radius-2);
|
|
padding-block: var(--size-1);
|
|
padding-inline: var(--size-2);
|
|
transition: 100ms ease-in-out;
|
|
outline: none;
|
|
|
|
&.main-btn__dark:not(.main-btn__outline) {
|
|
color: white;
|
|
}
|
|
|
|
&:not(:disabled):hover,
|
|
&:not(:disabled):focus {
|
|
background: hsla(var(--button-main-color) / 0.1);
|
|
}
|
|
|
|
&:not(:disabled):active {
|
|
background: hsla(var(--button-main-color) / 0.2);
|
|
}
|
|
|
|
& > .main-btn-icon {
|
|
color: hsla(var(--button-main-color) / 1);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
&:not(.main-btn__icon-only) > .main-btn-icon {
|
|
margin-right: var(--size-1);
|
|
}
|
|
}
|
|
|
|
.main-btn__solid {
|
|
background-color: hsla(var(--button-main-color) / 1);
|
|
color: white;
|
|
|
|
& > .main-btn-icon {
|
|
color: white;
|
|
}
|
|
|
|
&:not(:disabled):hover,
|
|
&:not(:disabled):focus {
|
|
background-color: hsla(var(--button-main-color) / 0.8);
|
|
}
|
|
|
|
&:not(:disabled):active {
|
|
background-color: hsla(var(--button-main-color) / 0.7);
|
|
}
|
|
}
|
|
|
|
.main-btn__outline {
|
|
border: 1px solid hsla(var(--button-main-color) / 1);
|
|
color: hsla(var(--button-main-color) / 1);
|
|
}
|
|
|
|
.main-btn-save:disabled {
|
|
filter: grayscale(1);
|
|
opacity: 0.8;
|
|
|
|
&.main-btn__solid {
|
|
background: hsla(0 0% 0% / 0.08);
|
|
}
|
|
|
|
&.main-btn__outline {
|
|
border: 1px solid hsla(0 0% 0% / 0.3);
|
|
}
|
|
}
|
|
</style>
|