diff options
| -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> |