diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-03-19 11:52:54 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-03-19 11:52:54 +1100 |
| commit | d2443589d9c9e0e433d548b7ecd0ac7bcd7f32ad (patch) | |
| tree | daa0119540f8a1f3c4150eb0e46074245f477769 /src/components | |
| parent | c8953939032925154636e2234fd000be0b29375f (diff) | |
Add coloured-outline for hovered-over images
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Tile.vue | 9 |
1 files changed, 7 insertions, 2 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index e312892..9e4be03 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -19,7 +19,7 @@ export default defineComponent({ leafHeaderHorzSpc: 4, leafHeaderVertSpc: 2, leafHeaderColor: '#fafaf9', - expandableLeafHeaderColor: 'greenyellow', //yellow, turquoise, + expandableLeafHeaderColor: 'greenyellow', //yellow, greenyellow, turquoise, nonLeafBgColor: '#44403c', nonLeafHeaderColor: '#fafaf9', nonLeafHeaderBgColor: '#78716c', @@ -57,6 +57,7 @@ export default defineComponent({ transitionTimingFunction: 'ease-out', // CSS variables '--nonLeafBgColor': this.nonLeafBgColor, + '--expandableLeafHeaderColor': this.expandableLeafHeaderColor, }; }, leafStyles(): Record<string,string> { @@ -172,7 +173,8 @@ export default defineComponent({ <template> <div :style="tileStyles"> - <div v-if="isLeaf" :style="leafStyles" :class="isExpandable ? 'hover:cursor-pointer' : ''" @click="onLeafClick"> + <div v-if="isLeaf" :style="leafStyles" + :class="isExpandable ? ['hover:cursor-pointer', 'shadow-on-hover'] : ''" @click="onLeafClick"> <div :style="{borderRadius: this.borderRadius}" class="upper-scrim"/> <div :style="leafHeaderStyles">{{layoutNode.tolNode.name}}</div> </div> @@ -220,4 +222,7 @@ export default defineComponent({ width: 100%; background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.4)); } +.shadow-on-hover:hover { + box-shadow: 0 0 1px 2px var(--expandableLeafHeaderColor); +} </style> |