diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-03-19 20:16:33 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-03-19 20:16:33 +1100 |
| commit | f88356170eba031ad73296b73609ac7b7161510b (patch) | |
| tree | 70b85b2906b4fafd17c9dd1d7e2fe8bdfa9a199a | |
| parent | 38c895b33fc121ef8800d7a98209c80dd0051f86 (diff) | |
Attempt adding colored-outline for hovered-over tile-groups using dummy divstest-nonleaf-hover-shadow-via-dummy-div
| -rw-r--r-- | src/components/Tile.vue | 21 |
1 files changed, 17 insertions, 4 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 411ba76..b5995bf 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -193,15 +193,17 @@ export default defineComponent({ <div :style="leafHeaderStyles">{{layoutNode.tolNode.name}}</div> </div> <div v-else :style="nonLeafStyles" class="shadow-normal"> - <div v-if="showHeader" :style="nonLeafHeaderStyles" class="hover:cursor-pointer" @click="onHeaderClick"> + <h1 v-if="showHeader" :style="nonLeafHeaderStyles" class="hover:cursor-pointer" @click="onHeaderClick"> {{layoutNode.tolNode.name}} - </div> + </h1> + <div class="dummy"/> <div :style="sepSweptAreaStyles" :class="[layoutNode?.sepSweptArea?.sweptLeft ? 'hide-right-edge' : 'hide-top-edge', 'shadow-normal']"> - <div v-if="layoutNode?.sepSweptArea?.sweptLeft === false" + <h1 v-if="layoutNode?.sepSweptArea?.sweptLeft === false" :style="nonLeafHeaderStyles" class="hover:cursor-pointer" @click="onHeaderClick"> {{layoutNode.tolNode.name}} - </div> + </h1> + <div class="dummy"/> </div> <tile v-for="child in layoutNode.children" :key="child.tolNode.name" :layoutNode="child" :headerSz="headerSz" :tileSpacing="tileSpacing" :transitionDuration="transitionDuration" @@ -245,4 +247,15 @@ export default defineComponent({ .shadow-normal { box-shadow: var(--shadowNormal); } +.dummy { + position: absolute; + top: 0; + width: 100%; + height: 100%; + border-radius: 5px; + z-index: -1; +} +h1:hover ~ .dummy, h1:hover ~ div > .dummy { + box-shadow: var(--shadowWithHover); +} </style> |