138 lines
3.1 KiB
Vue
138 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
imgSrc: string;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tooltip" :class="{ 'dark-tooltip': $q.dark.isActive }">
|
|
<q-btn
|
|
unelevated
|
|
class="color-btn-icon"
|
|
size="10px"
|
|
round
|
|
icon="mdi-exclamation"
|
|
:class="{ 'dark-btn-icon': $q.dark.isActive }"
|
|
/>
|
|
|
|
<div
|
|
class="tooltip-text"
|
|
:class="{ 'dark-tooltip-text': $q.dark.isActive }"
|
|
>
|
|
<q-img
|
|
class="q-mt-md"
|
|
:src="`/${imgSrc}${$q.dark.isActive ? 'dark' : 'light'}.png`"
|
|
width="60%"
|
|
/>
|
|
<div
|
|
class="box-content"
|
|
:class="{ 'dack-box-content': $q.dark.isActive }"
|
|
>
|
|
<div class="column justify-center" style="height: 100%">
|
|
<div class="col-4">{{ $t('branchNoMainOfficeYet') }}</div>
|
|
<div class="col-4 q-mb-md q-px-md">
|
|
<div
|
|
class="content-text q-pa-sm"
|
|
:class="{ 'dack-content-text': $q.dark.isActive }"
|
|
>
|
|
{{ $t('branchClickToCreateMainOffice') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.box-content {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 45%;
|
|
background: var(--_bg-box-content);
|
|
bottom: 0;
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
|
|
.content-text {
|
|
color: var(--_color-box-content-text);
|
|
background: var(--_bg-box-content-text);
|
|
border-radius: 6px;
|
|
|
|
&.dack-content-text {
|
|
border: 1px solid var(--brand-1);
|
|
}
|
|
}
|
|
|
|
&.dack-box-content {
|
|
border: 1px solid var(--gray-7);
|
|
}
|
|
}
|
|
|
|
.tooltip {
|
|
--_main-page-branch-tooltip: 100%;
|
|
--_bg-box-content: var(--blue-5);
|
|
--_color-box-content-text: var(--_bg-box-content);
|
|
--_bg-box-content-text: white;
|
|
--_bg-tooltip-branch: #f0f9ff;
|
|
--_bg-tooltip-branch-arrow: var(--_bg-tooltip-branch);
|
|
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
&.dark-tooltip {
|
|
--_bg-box-content: var(--gray-9);
|
|
--_bg-tooltip-branch: var(--gray-11);
|
|
--_bg-tooltip-branch-arrow: var(--_bg-box-content);
|
|
--_bg-box-content-text: var(--gray-11);
|
|
--_color-box-content-text: var(--gray-0);
|
|
--_main-page-branch-tooltip: 100.5%;
|
|
}
|
|
}
|
|
|
|
.tooltip-text {
|
|
&.dark-tooltip-text {
|
|
border: 1px solid var(--gray-7);
|
|
}
|
|
}
|
|
|
|
.tooltip .tooltip-text {
|
|
width: 250px;
|
|
height: 200px;
|
|
background-color: var(--_bg-tooltip-branch);
|
|
color: white;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
padding: 5px 0;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: -165px;
|
|
left: -265px;
|
|
}
|
|
|
|
.tooltip .tooltip-text::after {
|
|
content: '';
|
|
z-index: -99;
|
|
position: absolute;
|
|
top: 7%;
|
|
left: var(--_main-page-branch-tooltip);
|
|
border-width: 8px;
|
|
border-style: solid;
|
|
border-color: var(--_bg-tooltip-branch-arrow) transparent transparent
|
|
transparent;
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
.color-btn-icon {
|
|
--_bg-color-btn-icon: var(--blue-5-hsl);
|
|
transform: rotate(180deg);
|
|
color: var(--gray-0);
|
|
background: hsl(var(--_bg-color-btn-icon));
|
|
|
|
&.dark-btn-icon {
|
|
--_bg-color-btn-icon: var(--surface-0);
|
|
border: 2px solid;
|
|
border-color: var(--brand-1);
|
|
}
|
|
}
|
|
</style>
|