studio-variable/designtopack
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

style dtl-panel and dtl-btn

Browse source
This commit is contained in:
Timothée Goguely 2025-01-23 18:46:38 +01:00
parent 30fbc0e4e8
commit 23ca21cb5b
4 changed files with 380 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/design-to-light/DTLButton.vue
View file

@ -1,5 +1,7 @@
<template>
<button :data-new="hasAlternatives ? true : undefined">{{ content }}</button>
<button id="dtl-btn" class="bg-black rounded-md p-4" :title="'Design to Light: ' + grade" data-icon="leaf" :data-grade="grade" :data-new="hasAlternatives ? true : undefined">
<span lang="en" class="sr-only">Design to Light</span>
</button>
</template>
<script setup>
import { storeToRefs } from "pinia";
@ -12,20 +14,8 @@ const hasAlternatives = computed(() => {
return page.value.designToLight.length > 1;
});
const content = computed(() => {
const grade = computed(() => {
if (hasAlternatives.value) return "new";
return page.value.designToLight[0].grades.global.letter;
});
</script>
<style scoped>
button {
position: fixed;
min-width: 4rem;
min-height: 2rem;
right: 2rem;
bottom: 2rem;
background-color: #000;
color: #fff;
}
</style>