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