Spaces:
Running
Running
File size: 2,162 Bytes
8b9f7d9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<script setup lang="ts">
import { computed, PropType } from 'vue';
import { getAssetUrl } from '../utils';
import { useConfig } from '../ConfigProvider';
type Size =
| 'd'
| 's'
| 'm'
const props = defineProps({
size: {
type: String as PropType<Size>,
default: () => 'd',
},
disabled: {
type: Boolean,
default: () => false,
},
captionColor: {
type: String,
default: () => '#f8f8f7',
}
});
const {theme} = useConfig();
const texList = computed(()=>({
default: getAssetUrl('btn_default.png', theme.value),
hoverBg: getAssetUrl('btn_hover_bg.png', theme.value),
pressed: getAssetUrl('btn_pressed.png', theme.value),
disabled: getAssetUrl('btn_disabled.png', theme.value),
}))
</script>
<template>
<label>
<input type="button" hidden :disabled="props.disabled">
<div :class="`btn btn--${props.size}`">
<span class="btn__capt">
<slot></slot>
</span>
</div>
</label>
</template>
<style lang="scss">
.btn {
width: 100%;
height: 100%;
position: relative;
background: v-bind('texList.default') no-repeat;
background-size: 100% 100%;
color: v-bind('props.captionColor');
user-select: none;
-webkit-mask-image: v-bind('texList.default');
-webkit-mask-size: 100% 100%;
&__capt {
width: 100%;
position: absolute;
text-align: center;
bottom: 0px;
}
// Sizes
&--d {
font-size: 14px;
letter-spacing: 0.5px;
line-height: 180%;
}
&--s {
height: 32px;
line-height: 32px;
min-width: 100px;
}
&--m {
height: 48px;
line-height: 48px;
min-width: 200px;
}
*:not([disabled]) + &:hover::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: v-bind('texList.hoverBg') no-repeat;
background-size: 100% 100%;
left: 0;
top: 0;
mix-blend-mode: screen;
}
*:not([disabled]) + &:active {
background-image: v-bind('texList.pressed');
& .btn__capt {
left: 3px;
bottom: -2px;
}
}
[disabled] + & {
background-image: v-bind('texList.disabled');
pointer-events: all !important;
color: #646464;
}
}
</style>
|