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> </script>
<style scoped> <style scoped>
/* Tabs */
[role="tablist"] {
margin-left: 0;
}
/* Masonry */ /* Masonry */
.masonry { .masonry {
--gap: var(--space-8); --gap: var(--space-8);
@ -95,7 +100,7 @@ function changeTab(newValue) {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
border-radius: var(--rounded-lg); border-radius: var(--rounded-2xl);
overflow: hidden; overflow: hidden;
} }
.masonry img { .masonry img {
@ -103,15 +108,43 @@ function changeTab(newValue) {
height: 100%; height: 100%;
object-fit: cover; 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 button */
.favorite { .favorite {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 3.5rem;
height: 3.5rem;
margin: var(--space-8); margin: var(--space-8);
padding: var(--space-8); padding: var(--space-8);
color: var(--color-grey-400); 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"] { .favorite[aria-pressed="true"] {
color: var(--color-brand); color: var(--color-brand);