granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

select/multiselect: remove hover shadow, use elemental checkmarks

Browse source
This commit is contained in:
Justin Edmund 2025-12-13 20:58:30 -08:00
parent 20dabc5aa1
commit 60cbc03edf
2 changed files with 12 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/lib/components/ui/MultiSelect.svelte
View file

@ -3,7 +3,6 @@
<script lang="ts" generics="T extends string | number">
import { Select as SelectPrimitive } from 'bits-ui'
import Icon from '../Icon.svelte'
import checkIcon from '$src/assets/icons/check.svg'
interface Option {
value: T
@ -99,11 +98,12 @@
style={option.color ? `--option-color: ${option.color}` : ''}
>
{#snippet children({ selected })}
<span class="label" class:has-color={!!option.color} class:selected>{option.label}</span
>
<span class="check-icon" class:visible={selected}>
<img src={checkIcon} alt="" />
</span>
<span class="label" class:has-color={!!option.color} class:selected>{option.label}</span>
{#if selected}
<span class="indicator">
<Icon name="check" size={14} />
</span>
{/if}
{/snippet}
</SelectPrimitive.Item>
{/each}
@ -136,8 +136,7 @@
@include smooth-transition($duration-quick, background-color, border-color, box-shadow);
&:hover:not(.disabled) {
// background-color: var(--input-bg-hover);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
background-color: var(--input-bg-hover);
}
&:focus-visible {
@ -269,23 +268,9 @@
}
}
.check-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
img {
width: 12px;
height: 12px;
opacity: 0;
}
&.visible img {
opacity: 1;
}
:global(.indicator) {
margin-left: auto;
color: var(--accent-color);
}
}
</style>

5
src/lib/components/ui/Select.svelte
View file

@ -318,8 +318,7 @@
@include smooth-transition($duration-quick, background-color, border-color, box-shadow);
&:hover:not(.disabled) {
// background-color: var(--input-bg-hover);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
background-color: var(--input-bg-hover);
}
&:focus-visible {
@ -481,7 +480,7 @@
:global(.indicator) {
margin-left: auto;
color: var(--accent-blue);
color: var(--accent-color);
}
}
</style>