tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-29 16:45:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Improvments to status-check tooltip CSS

Browse Source
This commit is contained in:
Alicia Sykes 2021-09-18 17:44:52 +01:00
parent d94b166c78
commit 8e03930e0c
1 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/LinkItems/StatusIndicator.vue
View File

@ -1,9 +1,10 @@
<template> <template>
<div <div class="indicator"
v-tooltip="{ v-tooltip="{
content: statusText || otherStatusText, classes: ['status-tooltip', `tip-${color()}`] }" content: statusText || otherStatusText,
class="indicator" classes: ['status-tooltip', `tip-${color()}`],
@click="showToast()"> delay: { show: 0, hide: 150 }
}">
<div :class="`dot dot-${color()}`"> <div :class="`dot dot-${color()}`">
<span><span></span></span> <span><span></span></span>
</div> </div>
@ -114,11 +115,19 @@ export default {
<style lang="scss"> <style lang="scss">
.status-tooltip { .status-tooltip {
background: var(--status-check-tooltip-background) !important; background: var(--status-check-tooltip-background) !important;
color: var(--status-check-tooltip-color) !important; color: var(--status-check-tooltip-color);
font-size: 1rem; font-size: 1rem;
z-index: 10; z-index: 10;
&.tip-green { border: 1px solid var(--success); } &.tip-grey { --status-color: var(--medium-grey); }
&.tip-yellow { border: 1px solid var(--warning); } &.tip-green { --status-color: var(--success); }
&.tip-red { border: 1px solid var(--danger); } &.tip-yellow { --status-color: var(--warning); }
&.tip-red { --status-color: var(--danger); }
.tooltip-inner {
border: 1px solid var(--status-color);
// color: var(--status-color);
}
.tooltip-arrow {
--description-tooltip-color: var(--status-color);
}
} }
</style> </style>