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

Update Inspirations view: align tablist to left, add favorite button hover style

Browse source
This commit is contained in:
Timothée Goguely 2024-09-10 18:10:50 +02:00
parent 8e7461229b
commit 5d604d0499
1 changed files with 34 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/views/Inspirations.vue
View file

@ -82,6 +82,11 @@ function changeTab(newValue) {
</script>
<style scoped>
/* Tabs */
[role="tablist"] {
margin-left: 0;
}
/* Masonry */
.masonry {
--gap: var(--space-8);
@ -95,7 +100,7 @@ function changeTab(newValue) {
width: 100%;
height: 100%;
margin: 0;
border-radius: var(--rounded-lg);
border-radius: var(--rounded-2xl);
overflow: hidden;
}
.masonry img {
@ -103,15 +108,43 @@ function changeTab(newValue) {
height: 100%;
object-fit: cover;
}
.masonry > *:hover::after {
content: "";
position: absolute;
inset: 0;
background: var(--color-black-20);
z-index: 1;
}
.masonry > *:hover .favorite {
display: initial;
}
/* Favorite button */
.favorite {
position: absolute;
top: 0;
right: 0;
width: 3.5rem;
height: 3.5rem;
margin: var(--space-8);
padding: var(--space-8);
color: var(--color-grey-400);
display: none;
z-index: 10;
}
.favorite[aria-pressed="false"]:hover::before {
content: "Ajouter dans mes favoris";
background: var(--color-background);
padding: 1.3rem 4rem 1.25rem 1rem;
position: absolute;
z-index: -1;
inset: -2px;
left: unset;
width: max-content;
border-radius: var(--rounded-xl);
color: var(--color-grey-700);
letter-spacing: var(--tracking-wide);
font-weight: 500;
}
.favorite[aria-pressed="true"] {
color: var(--color-brand);