44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
Vue
|
<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>
|