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

fix: display 'New' when DTL btn has alternatives

Browse source 
close #104
This commit is contained in:
Timothée Goguely 2025-01-27 11:07:35 +01:00
parent b725146861
commit f4a5e53140
2 changed files with 29 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/assets/css/src/2.blocks.design-to-light.css
View file

@ -37,19 +37,44 @@
left: .5rem; left: .5rem;
top: .5rem; top: .5rem;
} }
#dtl-btn[data-grade]::after { #dtl-btn[data-grade]::after,
#dtl-btn .new {
position: absolute; position: absolute;
right: .25rem; right: .25rem;
top: .25rem; top: .25rem;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
user-select: none;
border-radius: var(--rounded-sm);
}
#dtl-btn[data-new][data-grade]::after {
display: none;
}
#dtl-btn .new {
color: var(--color-white);
background: var(--color-primary-50);
font-weight: 700;
font-size: var(--text-xs);
padding: .5rem 0;
z-index: 10;
}
#dtl-btn .new::after {
content: "";
width: .5rem;
height: .5rem;
border: 2px solid var(--color-black);
border-radius: 50%;
background: var(--color-primary);
display: block;
position: absolute;
top: -.333rem;
right: -.333rem;
} }
/* Grades */ /* Grades */
[data-grade]::after { [data-grade]::after {
content: attr(data-grade); content: attr(data-grade);
color: transparent; color: transparent;
user-select: none;
border-radius: var(--rounded-sm); border-radius: var(--rounded-sm);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;

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

@ -1,6 +1,7 @@
<template> <template>
<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"> <button id="dtl-btn" class="bg-black rounded-md p-4" :title="'Design to Light: ' + (hasAlternatives ? 'New' : grade)" data-icon="leaf" :data-grade="grade" :data-new="hasAlternatives ? true : undefined">
<span lang="en" class="sr-only">Design to Light</span> <span lang="en" class="sr-only">Design to Light</span>
<span v-if="hasAlternatives" lang="en" class="new">New</span>
</button> </button>
</template> </template>
<script setup> <script setup>