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

Update inspirations/Selector component style

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

105
src/components/inspirations/Selector.vue
View file

@ -1,20 +1,21 @@
<template>
<!-- TODO: dynamiser la valeur de l'attribut style: url('inspiration.cover') -->
<div
id="inspiration-select"
id="inspirations-dropdown"
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>
<label for="inspirations-select" class="text-sm">Choisir une inspiration</label>
<Select
id="inspirations"
id="inspirations-select"
v-model="selectedInspiration"
:options="inspirations"
optionLabel="name"
optionValue="value"
class=""
class="font-serif"
data-icon="chevron-single-down"
/>
</div>
</template>
@ -29,30 +30,112 @@ const inspirations = ref([
]);
</script>
<style scoped>
#inspiration-select {
<style>
#inspirations-dropdown {
--direction: column;
--items: flex-start;
--wrap: no-wrap;
--row-gap: 0;
position: relative;
float: right;
position: absolute;
top: 0;
right: 0;
background: var(--color-background);
border-radius: var(--rounded-full);
border-radius: var(--rounded-lg);
height: 3.75rem;
width: 20rem;
padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
margin-bottom: var(--space-16);
}
#inspiration-select::before {
#inspirations-dropdown::before {
content: "";
position: absolute;
left: var(--space-8);
width: 2.75rem;
height: 2.75rem;
border-radius: var(--rounded-full);
border-radius: var(--rounded-md);
background-image: var(--image);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#inspirations-select,
#inspirations-select_list {
border: 1px solid var(--color-grey-200);
}
#inspirations-select:hover {
border-color: var(--color-grey-300);
}
[role="combobox"][aria-expanded="true"] {
outline: 2px solid var(--color-focus-ring);
}
#inspirations-select,
[role="combobox"] {
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.875rem var(--space-48) var(--space-8) var(--space-64);
cursor: pointer;
}
/* Icon */
#inspirations-select svg {
display: none; /* Hide default component svg */
}
#inspirations-select[data-icon]::before {
--icon-color: var(--color-grey-700);
position: absolute;
right: var(--space-8);
top: .625rem;
width: 2.5rem;
height: 2.5rem;
padding: .625rem;
}
#inspirations-dropdown label {
color: var(--color-grey-700);
letter-spacing: var(--tracking-wider);
}
/* Options */
#inspirations-select_list {
margin-top: var(--space-4);
border-radius: var(--rounded-md);
background: var(--color-background);
box-shadow: var(--shadow);
padding: var(--space-8);
}
#inspirations-select_list > * {
font-family: var(--font-serif);
padding: var(--space-8) var(--space-8) var(--space-8) var(--space-48);
border-radius: var(--rounded-sm);
position: relative;
display: flex;
align-items: center;
height: 2.75rem;
cursor: pointer;
}
#inspirations-select_list > * + * {
margin-top: var(--space-4);
}
#inspirations-select_list > *::before {
content: "";
position: absolute;
left: var(--space-8);
width: 1.75rem;
height: 1.75rem;
border-radius: var(--rounded-sm);
background-image: var(--image);
background-color: var(--color-grey-200);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#inspirations-select_list > *:hover {
background-color: var(--color-grey-50);
}
#inspirations-select_list > *:focus,
#inspirations-select_list > *:focus-visible,
#inspirations-select_list > [data-p-focused="true"] {
outline: 2px solid var(--color-focus-ring);
}
</style>