68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<template>
|
|
<div class="token-input">
|
|
<div class="sarcrifice-from-input">
|
|
<input
|
|
@input="emit('update:modelValue', $event.target.value)"
|
|
v-model="props.modelValue"
|
|
:placeholder="0"
|
|
/>
|
|
<div class="sacrifice-logo" v-if="props.logo">
|
|
<img :src="props.logo" alt="vampir" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="value-adder">
|
|
<slot class="value-adder" name="message"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
modelValue: Number,
|
|
logo: String,
|
|
});
|
|
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.sarcrifice-from-input
|
|
display: flex
|
|
margin-bottom: 8px
|
|
@media (min-width: 992px)
|
|
height: 60px
|
|
input
|
|
width: 100%
|
|
height: 45px
|
|
font-size: 24px
|
|
border-radius: 16px
|
|
padding: 0 16px
|
|
@media (min-width: 992px)
|
|
font-size: 24px
|
|
height: auto
|
|
.sacrifice-logo
|
|
margin-left: 16px
|
|
img
|
|
width: 45px
|
|
height: 45px
|
|
border-radius: 50%
|
|
pointer-events: none
|
|
@media (min-width: 992px)
|
|
height: 100%
|
|
width: auto
|
|
.value-adder
|
|
display: flex
|
|
gap: 8px
|
|
.stake-adder-step
|
|
padding: 4px 16px
|
|
color: var(--black)
|
|
font-size: 14px
|
|
border-width: 1px
|
|
border-color: transparent
|
|
border-style: solid
|
|
&:hover,&:active, &:focus
|
|
background-color: var(--grey-light)
|
|
cursor: pointer
|
|
</style>
|