55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<template>
|
||
<div class="info-button">
|
||
<UiButton class="info-button__button">
|
||
<slot>Начать бесплатно</slot>
|
||
</UiButton>
|
||
|
||
<Tooltip distance="8" placement="bottom-end">
|
||
<IMonoInfo class="info-button__info-trigger desktop-only" />
|
||
|
||
<template #popper>
|
||
Зарегистрируйтесь и получите <br>
|
||
7 дней бесплатной подписки для <br>
|
||
ознакомления с сервисом
|
||
</template>
|
||
</Tooltip>
|
||
|
||
<p class="info-button__hint mobile-only">
|
||
Зарегистрируйтесь и получите 14 дней бесплатной подписки для ознакомления с сервисом
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { Tooltip } from 'floating-vue'
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.info-button {
|
||
@include desktop {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
&__button {
|
||
width: 100%;
|
||
}
|
||
|
||
&__info-trigger {
|
||
flex-shrink: 0;
|
||
font-size: 24px;
|
||
color: $color-gray-500;
|
||
outline: none;
|
||
}
|
||
|
||
&__hint {
|
||
@include font(11px, 500, 14px);
|
||
|
||
text-align: center;
|
||
margin-top: 8px;
|
||
color: $color-gray-600;
|
||
}
|
||
}
|
||
</style>
|