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

Replace selector-dropdown id by class

Browse source
This commit is contained in:
Timothée Goguely 2025-09-18 16:28:24 +02:00
parent 2183b0137d
commit 81f49be5c5
1 changed files with 5 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/Selector.vue
View file

@ -1,7 +1,6 @@
<template> <template>
<div <div
id="selector-dropdown" class="selector-dropdown | flex flex-col"
class="flex flex-col"
:style="'--image: url(\'' + getFrontViewUrl(currentValue) + '\')'" :style="'--image: url(\'' + getFrontViewUrl(currentValue) + '\')'"
> >
<label for="selector-select" class="text-sm">{{ label }}</label> <label for="selector-select" class="text-sm">{{ label }}</label>
@ -176,7 +175,7 @@ function getFrontViewUrl(item) {
</script> </script>
<style> <style>
#selector-dropdown { .selector-dropdown {
--selector-width: 21rem; --selector-width: 21rem;
--row-gap: 0; --row-gap: 0;
align-items: flex-start; align-items: flex-start;
@ -187,7 +186,7 @@ function getFrontViewUrl(item) {
min-width: var(--selector-width, 21rem); min-width: var(--selector-width, 21rem);
padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64); padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
} }
#selector-dropdown::before { .selector-dropdown::before {
content: ''; content: '';
position: absolute; position: absolute;
left: var(--space-8); left: var(--space-8);
@ -237,7 +236,7 @@ function getFrontViewUrl(item) {
[data-pc-section="dropdown"] { [data-pc-section="dropdown"] {
display: none; /* Hide default component svg */ display: none; /* Hide default component svg */
} }
#selector-dropdown [data-icon]::before { .selector-dropdown [data-icon]::before {
--icon-color: var(--color-grey-700); --icon-color: var(--color-grey-700);
position: absolute; position: absolute;
right: var(--space-8); right: var(--space-8);
@ -246,7 +245,7 @@ function getFrontViewUrl(item) {
height: 2.5rem; height: 2.5rem;
padding: 0.625rem; padding: 0.625rem;
} }
#selector-dropdown label { .selector-dropdown label {
color: var(--color-grey-700); color: var(--color-grey-700);
letter-spacing: var(--tracking-wider); letter-spacing: var(--tracking-wider);
overflow: hidden; overflow: hidden;