90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
<template>
|
|
<div class="token-input">
|
|
<div class="sarcrifice-from-input">
|
|
<div class="left-side">
|
|
<input
|
|
@input="emit('update:modelValue', $event.target.value)"
|
|
:value="props.modelValue"
|
|
:placeholder="0"
|
|
type="number"
|
|
/>
|
|
<div class="value-adder">
|
|
<slot class="value-adder" name="message"></slot>
|
|
<slot name="message-end"></slot>
|
|
</div>
|
|
</div>
|
|
<div class="right-side">
|
|
<token-logo v-if="props.logo" :img="props.logo" :alt="'vampir'"></token-logo>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import TokenLogo from "@/components/TokenLogo.vue";
|
|
|
|
const props = defineProps({
|
|
modelValue: [String, Number],
|
|
logo: String,
|
|
max: Number,
|
|
});
|
|
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.sarcrifice-from-input
|
|
display: flex
|
|
margin-bottom: 8px
|
|
gap: 8px
|
|
.left-side
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 12px
|
|
flex: 1 1 auto
|
|
input
|
|
width: 100%
|
|
height: 45px
|
|
font-size: 24px
|
|
border-radius: 16px
|
|
padding: 0 16px
|
|
&::-webkit-outer-spin-button,
|
|
&::-webkit-inner-spin-button
|
|
-webkit-appearance: none
|
|
margin: 0
|
|
&[type=number]
|
|
-moz-appearance: textfield
|
|
@media (min-width: 992px)
|
|
font-size: 24px
|
|
.value-adder
|
|
display: flex
|
|
gap: 8px
|
|
.stake-adder-step
|
|
padding: 4px 16px
|
|
color: var(--black)
|
|
font-size: 12px
|
|
border-width: 1px
|
|
border-color: transparent
|
|
border-style: solid
|
|
@media (min-width: 992px)
|
|
font-size: 14px
|
|
&:hover,&:active, &:focus
|
|
background-color: var(--grey-light)
|
|
cursor: pointer
|
|
.right-side
|
|
display: flex
|
|
flex-direction: column
|
|
height: 45px
|
|
.sacrifice-logo
|
|
margin-left: 16px
|
|
height: 45px
|
|
img
|
|
width: 45px
|
|
height: 45px
|
|
border-radius: 50%
|
|
pointer-events: none
|
|
@media (min-width: 992px)
|
|
height: 100%
|
|
width: auto
|
|
</style>
|