51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<template>
|
|
<!-- TODO: dynamiser la valeur de l'attribut style: url('inspiration.cover') -->
|
|
<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">
|
|
<!-- TODO: dynamiser les options en bouclant sur les inspirations -->
|
|
<option value="shape-of-nature" selected>Shape of Nature</option>
|
|
<option value="inspiration-slug">Inspiration Title</option>
|
|
</select>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { inspiration } = defineProps({
|
|
inspiration: Object,
|
|
});
|
|
</script>
|
|
|
|
<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>
|