diff options
| author | Terry Truong <terry06890@gmail.com> | 2023-01-16 01:32:33 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2023-01-16 01:32:33 +1100 |
| commit | a911be98d2137be5ea7f17d1df73a2215dfb7c75 (patch) | |
| tree | 30d597b04d3220735aa3ad3403e6522a60e05ff6 /src/components/BaseLine.vue | |
| parent | a968f35c4057493300b2eff17c99a76fb780ba0c (diff) | |
Add fading for overflowing baseline labels
Diffstat (limited to 'src/components/BaseLine.vue')
| -rw-r--r-- | src/components/BaseLine.vue | 4 |
1 files changed, 3 insertions, 1 deletions
diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue index 6d31287..f3a9e93 100644 --- a/src/components/BaseLine.vue +++ b/src/components/BaseLine.vue @@ -1,8 +1,10 @@ <template> <div class="flex relative" :class="{'flex-col': vert}" :style="{color: store.color.text}" ref="rootRef"> - <div v-for="p in periods" :key="p.label" :style="periodStyles(p)"> + <div v-for="p in periods" :key="p.label" class="relative" :style="periodStyles(p)"> <div :style="labelStyles">{{p.label}}</div> + <div v-if="props.vert" class="absolute bottom-0 w-full h-6" + style="background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1))"></div> </div> <TransitionGroup name="fade" v-if="mounted"> <div v-for="(state, idx) in timelines" :key="state.id" class="absolute" :style="spanStyles(idx)"></div> |