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