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

start dynamizing inspirations page

Browse source
This commit is contained in:
isUnknown 2024-09-10 10:50:51 +02:00
parent e27fab3553
commit 0afb0dfe54
18 changed files with 346 additions and 488 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/components/inspirations/Selector.vue Normal file
View file

@ -0,0 +1,43 @@
<template>
<div
id="inspiration-select"
class="flex"
style="
--image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
"
>
<label for="inspirations">Choisir une inspiration</label>
<select id="inspirations">
<option value="shape-of-nature" selected>Shape of Nature</option>
<option value="inspiration-slug">Inspiration Title</option>
</select>
</div>
</template>
<style scoped>
#inspiration-select {
--direction: column;
--items: flex-start;
--wrap: no-wrap;
--row-gap: 0;
position: relative;
float: right;
background: var(--color-background);
border-radius: var(--rounded-full);
height: 3.75rem;
padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
margin-bottom: var(--space-16);
}
#inspiration-select::before {
content: "";
position: absolute;
left: var(--space-8);
width: 2.75rem;
height: 2.75rem;
border-radius: var(--rounded-full);
background-image: var(--image);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
</style>