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

Update inspirations/Selector component: add checkmark, improve hover, selected and focus styles

Browse source
This commit is contained in:
Timothée Goguely 2024-09-10 18:31:42 +02:00
parent 39a1d40101
commit 2960614fa4
1 changed files with 16 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,7 @@
optionValue="value"
class="font-serif"
data-icon="chevron-single-down"
checkmark
/>
</div>
</template>
@ -59,15 +60,18 @@ const inspirations = ref([
background-position: center;
}
#inspirations-select,
[role="combobox"],
#inspirations-select_list {
border: 1px solid var(--color-grey-200);
}
#inspirations-select:hover {
border-color: var(--color-grey-300);
[role="combobox"]:hover {
outline: 1px solid var(--color-grey-400);
border-color: var(--color-background);
}
[role="combobox"][aria-expanded="true"] {
outline: 2px solid var(--color-focus-ring);
outline-offset: -2px;
border-color: transparent;
}
#inspirations-select,
[role="combobox"] {
@ -78,6 +82,7 @@ const inspirations = ref([
cursor: pointer;
}
/* Icon */
#inspirations-select svg {
display: none; /* Hide default component svg */
@ -138,4 +143,12 @@ const inspirations = ref([
#inspirations-select_list > [data-p-focused="true"] {
outline: 2px solid var(--color-focus-ring);
}
/* Check */
#inspirations-select_list > * > svg {
position: absolute;
left: .875rem;
width: 1rem;
height: 1rem;
color: var(--color-grey-700);
}
</style>