refactor: migrate UI components to inline styles
This commit is contained in:
parent
ff711331d4
commit
6f428f2aa3
16 changed files with 1478 additions and 1269 deletions
|
|
@ -1,144 +0,0 @@
|
|||
@use '../../themes/spacing';
|
||||
@use '../../themes/mixins';
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: spacing.$unit;
|
||||
font-family: var(--font-family);
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--accent-blue-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Variants
|
||||
.primary {
|
||||
background-color: var(--button-contained-bg);
|
||||
color: var(--button-text);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-contained-bg-hover);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: var(--button-bg);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--separator-bg);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-bg-hover);
|
||||
color: var(--button-text-hover);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background-color: transparent;
|
||||
color: var(--text-secondary);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-bg);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
background-color: transparent;
|
||||
color: var(--accent-blue);
|
||||
padding: 0;
|
||||
min-height: auto;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--accent-blue-focus);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
.small {
|
||||
padding: spacing.$unit spacing.$unit-2x;
|
||||
font-size: 1.2rem;
|
||||
min-height: 28px;
|
||||
|
||||
&.iconOnly {
|
||||
padding: spacing.$unit;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.medium {
|
||||
padding: spacing.$unit-2x spacing.$unit-3x;
|
||||
font-size: 1.4rem;
|
||||
min-height: 36px;
|
||||
|
||||
&.iconOnly {
|
||||
padding: spacing.$unit-2x;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.large {
|
||||
padding: spacing.$unit-2x spacing.$unit-4x;
|
||||
font-size: 1.6rem;
|
||||
min-height: 44px;
|
||||
|
||||
&.iconOnly {
|
||||
padding: spacing.$unit-2x;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon positioning
|
||||
.iconLeft {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.iconRight {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.iconOnly {
|
||||
gap: 0;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
// Full width
|
||||
.fullWidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<!-- Re-export the enhanced Button component from UI directory -->
|
||||
<script lang="ts">
|
||||
import Button from './ui/button/Button.svelte';
|
||||
|
||||
const props = $props();
|
||||
</script>
|
||||
|
||||
<Button {...props} />
|
||||
|
|
@ -30,6 +30,7 @@
|
|||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/layout' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/effects' as *;
|
||||
|
||||
:global(.context-menu) {
|
||||
background: var(--app-bg, white);
|
||||
|
|
@ -37,9 +38,9 @@
|
|||
border-radius: $card-corner;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
padding: $unit-half;
|
||||
min-width: 180px;
|
||||
min-width: calc($unit * 22.5);
|
||||
z-index: 200;
|
||||
animation: slideIn 0.15s ease-out;
|
||||
animation: slideIn $duration-quick ease-out;
|
||||
}
|
||||
|
||||
:global(.context-menu-item) {
|
||||
|
|
@ -51,7 +52,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: $unit;
|
||||
transition: background 0.2s;
|
||||
@include smooth-transition($duration-standard, background);
|
||||
|
||||
&:hover {
|
||||
background: var(--button-contained-bg-hover, #f5f5f5);
|
||||
|
|
@ -76,7 +77,7 @@
|
|||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(-$unit-fourth);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -59,13 +59,14 @@
|
|||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/layout' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/effects' as *;
|
||||
|
||||
:global(.dialog-overlay) {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 100;
|
||||
animation: fade-in 0.15s ease-out;
|
||||
animation: fade-in $duration-quick ease-out;
|
||||
}
|
||||
|
||||
:global(.dialog-content) {
|
||||
|
|
@ -80,7 +81,7 @@
|
|||
max-height: 90vh;
|
||||
width: 500px;
|
||||
z-index: 101;
|
||||
animation: slide-up 0.2s ease-out;
|
||||
animation: slide-up $duration-standard ease-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -105,18 +106,18 @@
|
|||
position: absolute;
|
||||
right: $unit;
|
||||
top: $unit;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: $unit-4x;
|
||||
height: $unit-4x;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 24px;
|
||||
font-size: $unit-3x;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
border-radius: $item-corner-small;
|
||||
transition: all 0.2s;
|
||||
@include smooth-transition($duration-standard, all);
|
||||
|
||||
&:hover {
|
||||
background: var(--button-contained-bg-hover);
|
||||
|
|
|
|||
|
|
@ -40,20 +40,20 @@
|
|||
</TooltipBase.Root>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/layout';
|
||||
@use '$src/themes/typography';
|
||||
@use '$src/themes/spacing';
|
||||
@use '$src/themes/layout' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/spacing' as *;
|
||||
|
||||
:global(.tooltip-content) {
|
||||
background: var(--tooltip-bg, #2a2a2a);
|
||||
color: var(--tooltip-text, white);
|
||||
padding: spacing.$unit-half spacing.$unit;
|
||||
border-radius: layout.$item-corner-small;
|
||||
font-size: typography.$font-small;
|
||||
font-weight: typography.$medium;
|
||||
padding: $unit-half $unit;
|
||||
border-radius: $item-corner-small;
|
||||
font-size: $font-small;
|
||||
font-weight: $medium;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
max-width: 250px;
|
||||
max-width: calc($unit * 31.25);
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,57 +1,74 @@
|
|||
<!-- Button Component -->
|
||||
<svelte:options runes={true} />
|
||||
<script lang="ts">
|
||||
import { Button } from 'bits-ui';
|
||||
import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
|
||||
import type { Snippet } from 'svelte';
|
||||
import Icon from '../../Icon.svelte';
|
||||
import styles from './button.module.scss';
|
||||
import type { HTMLButtonAttributes } from 'svelte/elements';
|
||||
|
||||
interface Props extends HTMLButtonAttributes {
|
||||
variant?: 'primary' | 'secondary' | 'ghost' | 'text' | 'unstyled' | 'blended' | 'bound' | 'destructive' | 'notice' | 'modal';
|
||||
size?: 'icon' | 'small' | 'medium' | 'large';
|
||||
element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' | null;
|
||||
type BaseProps = {
|
||||
variant?: 'primary' | 'secondary' | 'ghost' | 'text' | 'blended' | 'bound' | 'destructive' | 'notice' | 'modal';
|
||||
size?: 'small' | 'medium' | 'large' | 'icon';
|
||||
element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light';
|
||||
active?: boolean;
|
||||
floating?: boolean;
|
||||
save?: boolean;
|
||||
saved?: boolean;
|
||||
fullWidth?: boolean;
|
||||
full?: boolean; // Alias for fullWidth
|
||||
grow?: boolean;
|
||||
noShrink?: boolean;
|
||||
iconOnly?: boolean;
|
||||
class?: string;
|
||||
children?: Snippet;
|
||||
leftAccessory?: Snippet;
|
||||
rightAccessory?: Snippet;
|
||||
// Legacy icon props
|
||||
icon?: string;
|
||||
leftIcon?: string;
|
||||
rightIcon?: string;
|
||||
iconPosition?: 'left' | 'right';
|
||||
leftAccessoryClass?: string;
|
||||
rightAccessoryClass?: string;
|
||||
// Legacy props for compatibility
|
||||
icon?: string;
|
||||
iconPosition?: 'left' | 'right';
|
||||
iconOnly?: boolean;
|
||||
fullWidth?: boolean;
|
||||
href?: string;
|
||||
children?: any;
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
type ButtonProps = BaseProps & HTMLButtonAttributes & { href?: never };
|
||||
type LinkProps = BaseProps & HTMLAnchorAttributes & { href: string };
|
||||
|
||||
type Props = ButtonProps | LinkProps;
|
||||
|
||||
let {
|
||||
variant = 'primary',
|
||||
size = 'medium',
|
||||
element = null,
|
||||
element,
|
||||
active = false,
|
||||
floating = false,
|
||||
save = false,
|
||||
saved = false,
|
||||
fullWidth = false,
|
||||
full = false,
|
||||
grow = false,
|
||||
noShrink = false,
|
||||
iconOnly = false,
|
||||
class: className,
|
||||
children,
|
||||
leftAccessory,
|
||||
rightAccessory,
|
||||
// Legacy icon props
|
||||
icon,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
iconPosition = 'left',
|
||||
leftAccessoryClass = '',
|
||||
rightAccessoryClass = '',
|
||||
// Legacy props
|
||||
icon,
|
||||
iconPosition = 'left',
|
||||
iconOnly = false,
|
||||
fullWidth = false,
|
||||
href,
|
||||
disabled = false,
|
||||
class: className = '',
|
||||
children,
|
||||
...restProps
|
||||
}: Props = $props();
|
||||
|
||||
// Handle legacy icon prop
|
||||
const effectiveLeftIcon = leftIcon || (icon && iconPosition === 'left' ? icon : undefined);
|
||||
const effectiveRightIcon = rightIcon || (icon && iconPosition === 'right' ? icon : undefined);
|
||||
const isLink = $derived('href' in restProps);
|
||||
const isFullWidth = $derived(fullWidth || full);
|
||||
|
||||
// Handle legacy icon props
|
||||
const effectiveLeftIcon = $derived(leftIcon || (icon && iconPosition === 'left' ? icon : undefined));
|
||||
const effectiveRightIcon = $derived(rightIcon || (icon && iconPosition === 'right' ? icon : undefined));
|
||||
|
||||
const iconSizes = {
|
||||
icon: 16,
|
||||
|
|
@ -60,54 +77,531 @@
|
|||
large: 20
|
||||
};
|
||||
|
||||
const classes = variant === 'unstyled'
|
||||
? className
|
||||
: [
|
||||
styles.button,
|
||||
styles[variant],
|
||||
styles[size],
|
||||
element && styles[element],
|
||||
active && styles.active,
|
||||
floating && styles.floating,
|
||||
save && styles.save,
|
||||
saved && styles.saved,
|
||||
iconOnly && styles.iconOnly,
|
||||
fullWidth && styles.fullWidth,
|
||||
className
|
||||
].filter(Boolean).join(' ');
|
||||
const buttonClass = $derived(
|
||||
`button ${variant || ''} ${size || ''} ${element ? element : ''} ${active ? 'active' : ''} ${floating ? 'floating' : ''} ${save ? 'save' : ''} ${saved ? 'saved' : ''} ${isFullWidth ? 'full' : ''} ${grow ? 'grow' : ''} ${noShrink ? 'no-shrink' : ''} ${iconOnly ? 'iconOnly' : ''} ${className || ''}`.trim()
|
||||
);
|
||||
|
||||
const leftAccessoryClasses = [
|
||||
styles.accessory,
|
||||
styles.left,
|
||||
leftAccessoryClass
|
||||
].filter(Boolean).join(' ');
|
||||
const leftAccessoryClasses = $derived(
|
||||
`accessory ${leftAccessoryClass}`.trim()
|
||||
);
|
||||
|
||||
const rightAccessoryClasses = [
|
||||
styles.accessory,
|
||||
styles.right,
|
||||
rightAccessoryClass
|
||||
].filter(Boolean).join(' ');
|
||||
const rightAccessoryClasses = $derived(
|
||||
`accessory arrow ${rightAccessoryClass}`.trim()
|
||||
);
|
||||
</script>
|
||||
|
||||
<Button.Root
|
||||
{href}
|
||||
{disabled}
|
||||
class={classes}
|
||||
{...restProps}
|
||||
>
|
||||
{#if effectiveLeftIcon}
|
||||
<span class={leftAccessoryClasses}>
|
||||
<Icon name={effectiveLeftIcon} size={iconSizes[size]} />
|
||||
</span>
|
||||
{/if}
|
||||
{#if !iconOnly && children}
|
||||
<span class={styles.text}>
|
||||
{@render children()}
|
||||
</span>
|
||||
{/if}
|
||||
{#if effectiveRightIcon}
|
||||
<span class={rightAccessoryClasses}>
|
||||
<Icon name={effectiveRightIcon} size={iconSizes[size]} />
|
||||
</span>
|
||||
{/if}
|
||||
</Button.Root>
|
||||
{#if isLink}
|
||||
<a
|
||||
class={buttonClass}
|
||||
{...restProps}
|
||||
>
|
||||
{#if leftAccessory}
|
||||
<span class={leftAccessoryClasses}>
|
||||
{@render leftAccessory()}
|
||||
</span>
|
||||
{:else if effectiveLeftIcon}
|
||||
<span class={leftAccessoryClasses}>
|
||||
<Icon name={effectiveLeftIcon} size={iconSizes[size]} />
|
||||
</span>
|
||||
{/if}
|
||||
{#if children && !iconOnly}
|
||||
<span class="text">
|
||||
{@render children()}
|
||||
</span>
|
||||
{/if}
|
||||
{#if rightAccessory}
|
||||
<span class={rightAccessoryClasses}>
|
||||
{@render rightAccessory()}
|
||||
</span>
|
||||
{:else if effectiveRightIcon}
|
||||
<span class={rightAccessoryClasses}>
|
||||
<Icon name={effectiveRightIcon} size={iconSizes[size]} />
|
||||
</span>
|
||||
{/if}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
class={buttonClass}
|
||||
{...restProps}
|
||||
>
|
||||
{#if leftAccessory}
|
||||
<span class={leftAccessoryClasses}>
|
||||
{@render leftAccessory()}
|
||||
</span>
|
||||
{:else if effectiveLeftIcon}
|
||||
<span class={leftAccessoryClasses}>
|
||||
<Icon name={effectiveLeftIcon} size={iconSizes[size]} />
|
||||
</span>
|
||||
{/if}
|
||||
{#if children && !iconOnly}
|
||||
<span class="text">
|
||||
{@render children()}
|
||||
</span>
|
||||
{/if}
|
||||
{#if rightAccessory}
|
||||
<span class={rightAccessoryClasses}>
|
||||
{@render rightAccessory()}
|
||||
</span>
|
||||
{:else if effectiveRightIcon}
|
||||
<span class={rightAccessoryClasses}>
|
||||
<Icon name={effectiveRightIcon} size={iconSizes[size]} />
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
@use 'sass:color';
|
||||
@use 'themes/spacing' as *;
|
||||
@use 'themes/mixins' as *;
|
||||
@use 'themes/colors' as *;
|
||||
@use 'themes/typography' as *;
|
||||
@use 'themes/effects' as *;
|
||||
@use 'themes/layout' as *;
|
||||
|
||||
// Button base mixin - local to this component
|
||||
@mixin button-base {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: $unit-three-quarter; // 6px
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
@include smooth-transition($duration-zoom, background-color, color);
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@include button-base;
|
||||
background: var(--button-bg);
|
||||
border: 2px solid transparent;
|
||||
border-radius: $input-corner;
|
||||
color: var(--button-text);
|
||||
font-size: $font-button;
|
||||
font-weight: $normal;
|
||||
|
||||
.text {
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.blended:hover,
|
||||
&.blended.active {
|
||||
background: var(--button-bg-hover);
|
||||
cursor: pointer;
|
||||
color: var(--button-text-hover);
|
||||
|
||||
.accessory svg {
|
||||
fill: var(--button-text-hover);
|
||||
}
|
||||
|
||||
.accessory svg.stroke {
|
||||
fill: none;
|
||||
stroke: var(--button-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--button-bg-disabled);
|
||||
color: var(--button-text-disabled);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-bg-disabled);
|
||||
color: var(--button-text-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focus-ring($blue);
|
||||
}
|
||||
}
|
||||
|
||||
// Variants
|
||||
.primary {
|
||||
background-color: var(--button-contained-bg);
|
||||
color: var(--button-text);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-contained-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: var(--button-bg);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--separator-bg);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-bg-hover);
|
||||
color: var(--button-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background-color: transparent;
|
||||
color: var(--text-secondary);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-bg);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
background-color: transparent;
|
||||
color: var(--accent-blue);
|
||||
padding: 0;
|
||||
min-height: auto;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--accent-blue-focus);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.blended {
|
||||
background: transparent;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--button-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.bound {
|
||||
background: var(--button-contained-bg);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--button-contained-bg-hover);
|
||||
}
|
||||
|
||||
&.save:hover .accessory svg {
|
||||
fill: $save-red;
|
||||
stroke: $save-red;
|
||||
}
|
||||
|
||||
&.save {
|
||||
color: $save-red;
|
||||
|
||||
&.active .accessory svg {
|
||||
fill: $save-red;
|
||||
stroke: $save-red;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: color.adjust($save-red, $lightness: -30%);
|
||||
|
||||
.accessory svg {
|
||||
fill: color.adjust($save-red, $lightness: -30%);
|
||||
stroke: color.adjust($save-red, $lightness: -30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bound.blended {
|
||||
background: var(--dialog-bg);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--input-bound-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.floating {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.destructive {
|
||||
background: $error;
|
||||
color: white;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: color.adjust($error, $lightness: -15%);
|
||||
}
|
||||
|
||||
@include breakpoint(phone) {
|
||||
background: $error;
|
||||
color: $grey-100;
|
||||
|
||||
.accessory svg {
|
||||
fill: $grey-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
background-color: var(--notice-button-bg);
|
||||
color: var(--notice-button-text);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--notice-button-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
&:hover:not(:disabled) {
|
||||
background: $grey-90;
|
||||
}
|
||||
|
||||
&.destructive {
|
||||
color: $error;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: color.adjust($error, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fullWidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.no-shrink {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--button-bg-hover);
|
||||
color: var(--button-text-hover);
|
||||
}
|
||||
|
||||
// Sizes
|
||||
.icon {
|
||||
aspect-ratio: 1 / 1;
|
||||
padding: calc($unit * 1.5);
|
||||
height: calc($unit * 5.5);
|
||||
width: calc($unit * 5.5);
|
||||
|
||||
.text {
|
||||
display: none;
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include breakpoint(phone) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
padding: $unit $unit-2x;
|
||||
font-size: $font-small;
|
||||
min-height: calc($unit * 3.5);
|
||||
|
||||
&.iconOnly {
|
||||
padding: $unit;
|
||||
width: calc($unit * 3.5);
|
||||
height: calc($unit * 3.5);
|
||||
}
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: calc($unit * 5.5);
|
||||
padding: calc($unit * 1.5) $unit-2x;
|
||||
font-size: $font-regular;
|
||||
|
||||
&.iconOnly {
|
||||
padding: calc($unit * 1.5);
|
||||
width: calc($unit * 5.5);
|
||||
height: calc($unit * 5.5);
|
||||
}
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: $font-large;
|
||||
padding: $unit-2x $unit-3x;
|
||||
min-height: calc($unit * 6.5);
|
||||
|
||||
&.iconOnly {
|
||||
padding: $unit-2x;
|
||||
width: calc($unit * 6.5);
|
||||
height: calc($unit * 6.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Special features
|
||||
.save {
|
||||
.accessory svg {
|
||||
fill: none;
|
||||
stroke: var(--button-text);
|
||||
}
|
||||
|
||||
&.saved {
|
||||
color: $save-red;
|
||||
|
||||
.accessory svg {
|
||||
fill: $save-red;
|
||||
stroke: $save-red;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: $save-red;
|
||||
|
||||
.accessory svg {
|
||||
fill: none;
|
||||
stroke: $save-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: $save-red;
|
||||
|
||||
.accessory svg {
|
||||
fill: $save-red;
|
||||
stroke: $save-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Element colors
|
||||
.wind {
|
||||
background: var(--wind-bg);
|
||||
color: var(--wind-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--wind-bg-hover);
|
||||
color: var(--wind-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.fire {
|
||||
background: var(--fire-bg);
|
||||
color: var(--fire-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--fire-bg-hover);
|
||||
color: var(--fire-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.water {
|
||||
background: var(--water-bg);
|
||||
color: var(--water-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--water-bg-hover);
|
||||
color: var(--water-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.earth {
|
||||
background: var(--earth-bg);
|
||||
color: var(--earth-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--earth-bg-hover);
|
||||
color: var(--earth-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
background: var(--dark-bg);
|
||||
color: var(--dark-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--dark-bg-hover);
|
||||
color: var(--dark-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.light {
|
||||
background: var(--light-bg);
|
||||
color: var(--light-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--light-bg-hover);
|
||||
color: var(--light-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon-only specific
|
||||
.iconOnly {
|
||||
gap: 0;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
// Accessories
|
||||
.accessory {
|
||||
$dimension: $unit-2x;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.arrow {
|
||||
margin-top: $unit-half;
|
||||
}
|
||||
|
||||
&.flipped {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--button-text);
|
||||
height: $dimension;
|
||||
width: $dimension;
|
||||
|
||||
&.stroke {
|
||||
fill: none;
|
||||
stroke: var(--button-text);
|
||||
}
|
||||
|
||||
&.Add {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
&.Check {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&.check svg {
|
||||
margin-top: 1px;
|
||||
height: 14px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.settings svg {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// CSS modules workaround for floating button behavior
|
||||
:global(.unit:hover) .floating,
|
||||
:global(.unit) .floating.active {
|
||||
pointer-events: initial;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,453 +0,0 @@
|
|||
@use 'sass:color';
|
||||
@use 'themes/spacing';
|
||||
@use 'themes/mixins';
|
||||
@use 'themes/colors';
|
||||
@use 'themes/typography';
|
||||
@use 'themes/effects';
|
||||
@use 'themes/layout';
|
||||
|
||||
.button {
|
||||
align-items: center;
|
||||
background: var(--button-bg);
|
||||
border: 2px solid transparent;
|
||||
border-radius: layout.$input-corner;
|
||||
color: var(--button-text);
|
||||
display: inline-flex;
|
||||
font-size: typography.$font-button;
|
||||
font-weight: typography.$normal;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
transition: 0.18s opacity ease-in-out;
|
||||
user-select: none;
|
||||
transition:
|
||||
background-color 0.18s ease-out,
|
||||
color 0.18s ease-out;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
|
||||
.text {
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.blended:hover,
|
||||
&.blended.active {
|
||||
background: var(--button-bg-hover);
|
||||
cursor: pointer;
|
||||
color: var(--button-text-hover);
|
||||
|
||||
.accessory svg {
|
||||
fill: var(--button-text-hover);
|
||||
}
|
||||
|
||||
.accessory svg.stroke {
|
||||
fill: none;
|
||||
stroke: var(--button-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--button-bg-disabled);
|
||||
color: var(--button-text-disabled);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-bg-disabled);
|
||||
color: var(--button-text-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
border: 2px solid colors.$blue;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
|
||||
// Variants
|
||||
.primary {
|
||||
background-color: var(--button-contained-bg);
|
||||
color: var(--button-text);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-contained-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: var(--button-bg);
|
||||
color: var(--button-text);
|
||||
border: 1px solid var(--separator-bg);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-bg-hover);
|
||||
color: var(--button-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background-color: transparent;
|
||||
color: var(--text-secondary);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--button-bg);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
background-color: transparent;
|
||||
color: var(--accent-blue);
|
||||
padding: 0;
|
||||
min-height: auto;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--accent-blue-focus);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.blended {
|
||||
background: transparent;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--button-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.bound {
|
||||
background: var(--button-contained-bg);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--button-contained-bg-hover);
|
||||
}
|
||||
|
||||
&.save:hover .accessory svg {
|
||||
fill: colors.$save-red;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
|
||||
&.save {
|
||||
color: colors.$save-red;
|
||||
|
||||
&.active .accessory svg {
|
||||
fill: colors.$save-red;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: color.adjust(colors.$save-red, $lightness: -30%);
|
||||
|
||||
.accessory svg {
|
||||
fill: color.adjust(colors.$save-red, $lightness: -30%);
|
||||
stroke: color.adjust(colors.$save-red, $lightness: -30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bound.blended {
|
||||
background: var(--dialog-bg);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--input-bound-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.floating {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.destructive {
|
||||
background: colors.$error;
|
||||
color: white;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: color.adjust(colors.$error, $lightness: -15%);
|
||||
}
|
||||
|
||||
@include mixins.breakpoint(phone) {
|
||||
background: colors.$error;
|
||||
color: colors.$grey-100;
|
||||
|
||||
.accessory svg {
|
||||
fill: colors.$grey-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
background-color: var(--notice-button-bg);
|
||||
color: var(--notice-button-text);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--notice-button-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
&:hover:not(:disabled) {
|
||||
background: colors.$grey-90;
|
||||
}
|
||||
|
||||
&.destructive {
|
||||
color: colors.$error;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: color.adjust(colors.$error, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fullWidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.no-shrink {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--button-bg-hover);
|
||||
color: var(--button-text-hover);
|
||||
}
|
||||
|
||||
// Sizes
|
||||
.icon {
|
||||
aspect-ratio: 1 / 1;
|
||||
padding: spacing.$unit * 1.5;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
|
||||
.text {
|
||||
display: none;
|
||||
|
||||
@include mixins.breakpoint(tablet) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include mixins.breakpoint(phone) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
padding: spacing.$unit spacing.$unit-2x;
|
||||
font-size: typography.$font-small;
|
||||
min-height: 28px;
|
||||
|
||||
&.iconOnly {
|
||||
padding: spacing.$unit;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: spacing.$unit * 5.5;
|
||||
padding: (spacing.$unit * 1.5) spacing.$unit-2x;
|
||||
font-size: typography.$font-regular;
|
||||
|
||||
&.iconOnly {
|
||||
padding: spacing.$unit * 1.5;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: typography.$font-large;
|
||||
padding: spacing.$unit-2x spacing.$unit-3x;
|
||||
min-height: 52px;
|
||||
|
||||
&.iconOnly {
|
||||
padding: spacing.$unit-2x;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
// Special features
|
||||
.save {
|
||||
.accessory svg {
|
||||
fill: none;
|
||||
stroke: var(--button-text);
|
||||
}
|
||||
|
||||
&.saved {
|
||||
color: colors.$save-red;
|
||||
|
||||
.accessory svg {
|
||||
fill: colors.$save-red;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: colors.$save-red;
|
||||
|
||||
.accessory svg {
|
||||
fill: none;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: colors.$save-red;
|
||||
|
||||
.accessory svg {
|
||||
fill: colors.$save-red;
|
||||
stroke: colors.$save-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Element colors
|
||||
.wind {
|
||||
background: var(--wind-bg);
|
||||
color: var(--wind-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--wind-bg-hover);
|
||||
color: var(--wind-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.fire {
|
||||
background: var(--fire-bg);
|
||||
color: var(--fire-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--fire-bg-hover);
|
||||
color: var(--fire-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.water {
|
||||
background: var(--water-bg);
|
||||
color: var(--water-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--water-bg-hover);
|
||||
color: var(--water-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.earth {
|
||||
background: var(--earth-bg);
|
||||
color: var(--earth-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--earth-bg-hover);
|
||||
color: var(--earth-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
background: var(--dark-bg);
|
||||
color: var(--dark-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--dark-bg-hover);
|
||||
color: var(--dark-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.light {
|
||||
background: var(--light-bg);
|
||||
color: var(--light-text-contrast);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--light-bg-hover);
|
||||
color: var(--light-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon-only specific
|
||||
.iconOnly {
|
||||
gap: 0;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
// Accessories
|
||||
.accessory {
|
||||
$dimension: spacing.$unit-2x;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.arrow {
|
||||
margin-top: spacing.$unit-half;
|
||||
}
|
||||
|
||||
&.flipped {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--button-text);
|
||||
height: $dimension;
|
||||
width: $dimension;
|
||||
|
||||
&.stroke {
|
||||
fill: none;
|
||||
stroke: var(--button-text);
|
||||
}
|
||||
|
||||
&.Add {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
&.Check {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&.check svg {
|
||||
margin-top: 1px;
|
||||
height: 14px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.settings svg {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// CSS modules workaround for floating button behavior
|
||||
:global(.unit:hover) .floating,
|
||||
:global(.unit) .floating.active {
|
||||
pointer-events: initial;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
<svelte:options runes={true} />
|
||||
<script lang="ts">
|
||||
import { Checkbox as CheckboxPrimitive } from 'bits-ui';
|
||||
import { Check, Minus } from 'lucide-svelte';
|
||||
import styles from './checkbox.module.scss';
|
||||
import type { HTMLButtonAttributes } from 'svelte/elements';
|
||||
|
||||
interface Props extends Omit<HTMLButtonAttributes, 'value'> {
|
||||
|
|
@ -37,16 +35,8 @@
|
|||
}
|
||||
});
|
||||
|
||||
const sizeClasses = {
|
||||
small: styles.small,
|
||||
medium: styles.medium,
|
||||
large: styles.large
|
||||
};
|
||||
|
||||
const variantClasses = {
|
||||
default: '',
|
||||
bound: styles.bound
|
||||
};
|
||||
const sizeClass = $derived(size);
|
||||
const variantClass = $derived(variant === 'bound' ? 'bound' : '');
|
||||
</script>
|
||||
|
||||
<CheckboxPrimitive.Root
|
||||
|
|
@ -55,14 +45,115 @@
|
|||
{required}
|
||||
{name}
|
||||
{value}
|
||||
class={`${styles.checkbox} ${sizeClasses[size]} ${variantClasses[variant]} ${className || ''}`}
|
||||
class="checkbox {sizeClass} {variantClass} {className || ''}"
|
||||
{...restProps}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator class={styles.indicator}>
|
||||
<CheckboxPrimitive.Indicator class="indicator">
|
||||
{#if checked === 'indeterminate'}
|
||||
<Minus class={styles.icon} />
|
||||
{:else}
|
||||
<Check class={styles.icon} />
|
||||
<span class="icon">−</span>
|
||||
{:else if checked}
|
||||
<span class="icon">✓</span>
|
||||
{/if}
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
</CheckboxPrimitive.Root>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/colors' as *;
|
||||
@use '$src/themes/layout' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/effects' as *;
|
||||
|
||||
.checkbox {
|
||||
background-color: var(--input-bg);
|
||||
border: 2px solid var(--separator-bg);
|
||||
border-radius: $item-corner-small;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include smooth-transition($duration-zoom, all);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--input-bg-hover);
|
||||
border-color: var(--separator-bg-hover);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
@include focus-ring($blue);
|
||||
}
|
||||
|
||||
&[data-state='checked'],
|
||||
&[data-state='indeterminate'] {
|
||||
background-color: var(--accent-blue);
|
||||
border-color: var(--accent-blue);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--accent-blue-hover);
|
||||
border-color: var(--accent-blue-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.bound {
|
||||
background-color: var(--input-bound-bg);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--input-bound-bg-hover);
|
||||
}
|
||||
|
||||
&[data-state='checked'],
|
||||
&[data-state='indeterminate'] {
|
||||
background-color: var(--accent-blue);
|
||||
border-color: var(--accent-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Size variations
|
||||
.small {
|
||||
width: $unit-2x;
|
||||
height: $unit-2x;
|
||||
|
||||
.icon {
|
||||
width: calc($unit * 1.5);
|
||||
height: calc($unit * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.medium {
|
||||
width: calc($unit * 2.5);
|
||||
height: calc($unit * 2.5);
|
||||
|
||||
.icon {
|
||||
width: calc($unit * 1.75);
|
||||
height: calc($unit * 1.75);
|
||||
}
|
||||
}
|
||||
|
||||
.large {
|
||||
width: $unit-3x;
|
||||
height: $unit-3x;
|
||||
|
||||
.icon {
|
||||
width: calc($unit * 2.25);
|
||||
height: calc($unit * 2.25);
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.icon {
|
||||
stroke-width: 3;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
@use 'themes/spacing';
|
||||
@use 'themes/colors';
|
||||
@use 'themes/layout';
|
||||
@use 'themes/typography';
|
||||
|
||||
.checkbox {
|
||||
background-color: var(--input-bg);
|
||||
border: 2px solid var(--separator-bg);
|
||||
border-radius: layout.$item-corner-small;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.18s ease-out;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--input-bg-hover);
|
||||
border-color: var(--separator-bg-hover);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border-color: colors.$blue;
|
||||
box-shadow: 0 0 0 2px rgba(colors.$blue, 0.2);
|
||||
}
|
||||
|
||||
&[data-state='checked'],
|
||||
&[data-state='indeterminate'] {
|
||||
background-color: var(--accent-blue);
|
||||
border-color: var(--accent-blue);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--accent-blue-hover);
|
||||
border-color: var(--accent-blue-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.bound {
|
||||
background-color: var(--input-bound-bg);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--input-bound-bg-hover);
|
||||
}
|
||||
|
||||
&[data-state='checked'],
|
||||
&[data-state='indeterminate'] {
|
||||
background-color: var(--accent-blue);
|
||||
border-color: var(--accent-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Size variations
|
||||
.small {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.medium {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
.icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.large {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.icon {
|
||||
stroke-width: 3;
|
||||
}
|
||||
101
src/lib/components/ui/dropdown/DropdownItem.svelte
Normal file
101
src/lib/components/ui/dropdown/DropdownItem.svelte
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<svelte:options runes={true} />
|
||||
|
||||
<script lang="ts">
|
||||
import { DropdownMenu } from 'bits-ui'
|
||||
import type { Snippet } from 'svelte'
|
||||
|
||||
type Props = {
|
||||
children: Snippet
|
||||
href?: string
|
||||
asChild?: boolean
|
||||
class?: string
|
||||
}
|
||||
|
||||
const { children, href, asChild = false, class: className = '' }: Props = $props()
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<DropdownMenu.Item class="dropdown-item {className}" asChild>
|
||||
<a {href}>
|
||||
{@render children()}
|
||||
</a>
|
||||
</DropdownMenu.Item>
|
||||
{:else}
|
||||
<DropdownMenu.Item class="dropdown-item {className}" {asChild}>
|
||||
{@render children()}
|
||||
</DropdownMenu.Item>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/spacing' as spacing;
|
||||
@use '$src/themes/typography' as typography;
|
||||
|
||||
// Define the dropdown item styles as a mixin for reusability
|
||||
@mixin dropdown-item-base {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: spacing.$unit (spacing.$unit * 1.5);
|
||||
border-radius: 6px;
|
||||
font-size: typography.$font-small;
|
||||
font-weight: typography.$medium;
|
||||
color: var(--menu-text);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: background-color 0.15s ease;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--menu-bg-item-hover);
|
||||
color: var(--menu-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--menu-bg-item-hover);
|
||||
outline: 2px solid var(--accent-blue-focus);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply styles to the dropdown item class that bits-ui adds
|
||||
:global(.dropdown-item) {
|
||||
// @include dropdown-item-base;
|
||||
|
||||
// Nested form styles for logout button
|
||||
form {
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
cursor: inherit;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Separate global selector for link dropdown items
|
||||
:global(.dropdown-item a) {
|
||||
@include dropdown-item-base;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
color: var(--menu-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.dropdown-item button) {
|
||||
@include dropdown-item-base;
|
||||
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,132 +1,342 @@
|
|||
<script lang="ts">
|
||||
import { Label } from 'bits-ui';
|
||||
import type { HTMLInputAttributes } from 'svelte/elements';
|
||||
import styles from './input.module.scss';
|
||||
import Icon from '../../Icon.svelte';
|
||||
import { Label } from 'bits-ui';
|
||||
import type { HTMLInputAttributes } from 'svelte/elements';
|
||||
import Icon from '../../Icon.svelte';
|
||||
|
||||
interface Props extends HTMLInputAttributes {
|
||||
variant?: 'default' | 'bound' | 'duration' | 'number' | 'range';
|
||||
error?: string;
|
||||
label?: string;
|
||||
leftIcon?: string;
|
||||
rightIcon?: string;
|
||||
counter?: number;
|
||||
maxLength?: number;
|
||||
hidden?: boolean;
|
||||
fullWidth?: boolean;
|
||||
fullHeight?: boolean;
|
||||
alignRight?: boolean;
|
||||
accessory?: boolean;
|
||||
children?: any;
|
||||
}
|
||||
interface Props extends HTMLInputAttributes {
|
||||
variant?: 'default' | 'bound' | 'duration' | 'number' | 'range';
|
||||
error?: string;
|
||||
label?: string;
|
||||
leftIcon?: string;
|
||||
rightIcon?: string;
|
||||
counter?: number;
|
||||
maxLength?: number;
|
||||
hidden?: boolean;
|
||||
fullWidth?: boolean;
|
||||
fullHeight?: boolean;
|
||||
alignRight?: boolean;
|
||||
accessory?: boolean;
|
||||
children?: any;
|
||||
}
|
||||
|
||||
let {
|
||||
variant = 'default',
|
||||
error,
|
||||
label,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
counter,
|
||||
maxLength,
|
||||
hidden = false,
|
||||
fullWidth = false,
|
||||
fullHeight = false,
|
||||
alignRight = false,
|
||||
accessory = false,
|
||||
value = $bindable(''),
|
||||
type = 'text',
|
||||
placeholder,
|
||||
disabled = false,
|
||||
readonly = false,
|
||||
required = false,
|
||||
class: className = '',
|
||||
children,
|
||||
...restProps
|
||||
}: Props = $props();
|
||||
let {
|
||||
variant = 'default',
|
||||
error,
|
||||
label,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
counter,
|
||||
maxLength,
|
||||
hidden = false,
|
||||
fullWidth = false,
|
||||
fullHeight = false,
|
||||
alignRight = false,
|
||||
accessory = false,
|
||||
value = $bindable(''),
|
||||
type = 'text',
|
||||
placeholder,
|
||||
disabled = false,
|
||||
readonly = false,
|
||||
required = false,
|
||||
class: className = '',
|
||||
children,
|
||||
...restProps
|
||||
}: Props = $props();
|
||||
|
||||
const showCounter = $derived(counter !== undefined || maxLength !== undefined);
|
||||
const currentCount = $derived(String(value).length);
|
||||
const showCounter = $derived(counter !== undefined || maxLength !== undefined);
|
||||
const currentCount = $derived(String(value).length);
|
||||
|
||||
const fieldsetClasses = [
|
||||
styles.fieldset,
|
||||
hidden && styles.hidden,
|
||||
fullWidth && styles.full,
|
||||
className
|
||||
].filter(Boolean).join(' ');
|
||||
const fieldsetClasses = $derived([
|
||||
'fieldset',
|
||||
hidden && 'hidden',
|
||||
fullWidth && 'full',
|
||||
className
|
||||
].filter(Boolean).join(' '));
|
||||
|
||||
const inputClasses = [
|
||||
styles.input,
|
||||
variant === 'bound' && styles.bound,
|
||||
variant === 'duration' && styles.duration,
|
||||
variant === 'number' && styles.number,
|
||||
variant === 'range' && styles.range,
|
||||
alignRight && styles.alignRight,
|
||||
fullHeight && styles.fullHeight,
|
||||
accessory && styles.accessory,
|
||||
(leftIcon || rightIcon || showCounter) && styles.wrapper
|
||||
].filter(Boolean).join(' ');
|
||||
const inputClasses = $derived([
|
||||
'input',
|
||||
variant === 'bound' && 'bound',
|
||||
variant === 'duration' && 'duration',
|
||||
variant === 'number' && 'number',
|
||||
variant === 'range' && 'range',
|
||||
alignRight && 'alignRight',
|
||||
fullHeight && 'fullHeight',
|
||||
accessory && 'accessory',
|
||||
(leftIcon || rightIcon || showCounter) && 'wrapper'
|
||||
].filter(Boolean).join(' '));
|
||||
</script>
|
||||
|
||||
<fieldset class={fieldsetClasses}>
|
||||
{#if label}
|
||||
<Label.Root class={styles.label} for={restProps.id}>
|
||||
{label}
|
||||
{#if required}
|
||||
<span class={styles.required}>*</span>
|
||||
{/if}
|
||||
</Label.Root>
|
||||
{/if}
|
||||
{#if label}
|
||||
<Label.Root class="label" for={restProps.id}>
|
||||
{label}
|
||||
{#if required}
|
||||
<span class="required">*</span>
|
||||
{/if}
|
||||
</Label.Root>
|
||||
{/if}
|
||||
|
||||
{#if accessory || leftIcon || rightIcon || showCounter}
|
||||
<div class={inputClasses}>
|
||||
{#if leftIcon}
|
||||
<span class={styles.iconLeft}>
|
||||
<Icon name={leftIcon} size={16} />
|
||||
</span>
|
||||
{/if}
|
||||
{#if accessory || leftIcon || rightIcon || showCounter}
|
||||
<div class={inputClasses}>
|
||||
{#if leftIcon}
|
||||
<span class="iconLeft">
|
||||
<Icon name={leftIcon} size={16} />
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<input
|
||||
bind:value
|
||||
{type}
|
||||
{placeholder}
|
||||
{disabled}
|
||||
{readonly}
|
||||
{required}
|
||||
{maxLength}
|
||||
{...restProps}
|
||||
/>
|
||||
<input
|
||||
bind:value
|
||||
{type}
|
||||
{placeholder}
|
||||
{disabled}
|
||||
{readonly}
|
||||
{required}
|
||||
{maxLength}
|
||||
{...restProps}
|
||||
/>
|
||||
|
||||
{#if rightIcon}
|
||||
<span class={styles.iconRight}>
|
||||
<Icon name={rightIcon} size={16} />
|
||||
</span>
|
||||
{/if}
|
||||
{#if rightIcon}
|
||||
<span class="iconRight">
|
||||
<Icon name={rightIcon} size={16} />
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
{#if showCounter}
|
||||
<span class={styles.counter}>
|
||||
{currentCount}{maxLength ? `/${maxLength}` : ''}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<input
|
||||
bind:value
|
||||
class={inputClasses}
|
||||
{type}
|
||||
{placeholder}
|
||||
{disabled}
|
||||
{readonly}
|
||||
{required}
|
||||
{maxLength}
|
||||
{...restProps}
|
||||
/>
|
||||
{/if}
|
||||
{#if showCounter}
|
||||
<span class="counter">
|
||||
{currentCount}{maxLength ? `/${maxLength}` : ''}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<input
|
||||
bind:value
|
||||
class={inputClasses}
|
||||
{type}
|
||||
{placeholder}
|
||||
{disabled}
|
||||
{readonly}
|
||||
{required}
|
||||
{maxLength}
|
||||
{...restProps}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<span class={styles.error}>{error}</span>
|
||||
{/if}
|
||||
{#if error}
|
||||
<span class="error">{error}</span>
|
||||
{/if}
|
||||
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{/if}
|
||||
</fieldset>
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{/if}
|
||||
</fieldset>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/colors' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/layout' as *;
|
||||
@use '$src/themes/mixins' as *;
|
||||
@use '$src/themes/effects' as *;
|
||||
|
||||
.fieldset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit-half;
|
||||
|
||||
&:last-child .error {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.label) {
|
||||
color: var(--text-primary);
|
||||
font-size: $font-small;
|
||||
font-weight: $medium;
|
||||
margin-bottom: $unit-half;
|
||||
|
||||
.required {
|
||||
color: $error;
|
||||
margin-left: $unit-fourth;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $error;
|
||||
font-size: $font-small;
|
||||
padding: $unit-half $unit-2x;
|
||||
min-width: 100%;
|
||||
margin-bottom: $unit;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.fullHeight {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.input {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: var(--input-bg);
|
||||
border-radius: $input-corner;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: $font-regular;
|
||||
width: 100%;
|
||||
@include smooth-transition($duration-quick, background-color);
|
||||
|
||||
&:not(.wrapper) {
|
||||
padding: calc($unit * 1.5) $unit-2x;
|
||||
}
|
||||
|
||||
&.accessory,
|
||||
&.wrapper {
|
||||
$offset: 2px;
|
||||
|
||||
align-items: center;
|
||||
background: var(--input-bg);
|
||||
border-radius: $input-corner;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
|
||||
.counter {
|
||||
color: var(--text-tertiary);
|
||||
display: block;
|
||||
font-weight: $bold;
|
||||
line-height: calc($unit * 6);
|
||||
position: absolute;
|
||||
right: $unit-2x;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border-radius: $input-corner;
|
||||
border: 2px solid transparent;
|
||||
box-sizing: border-box;
|
||||
color: var(--text-primary);
|
||||
padding: calc($unit * 1.75) $unit-2x;
|
||||
width: 100%;
|
||||
font-size: $font-regular;
|
||||
font-family: inherit;
|
||||
@include smooth-transition($duration-quick, border-color);
|
||||
|
||||
&:focus {
|
||||
@include focus-ring($blue);
|
||||
}
|
||||
}
|
||||
|
||||
.iconLeft,
|
||||
.iconRight {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
color: var(--text-secondary);
|
||||
|
||||
:global(svg) {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.iconLeft {
|
||||
left: $unit-2x;
|
||||
}
|
||||
|
||||
.iconRight {
|
||||
right: $unit-2x;
|
||||
}
|
||||
|
||||
&:has(.iconLeft) input {
|
||||
padding-left: $unit-5x;
|
||||
}
|
||||
|
||||
&:has(.iconRight) input {
|
||||
padding-right: $unit-5x;
|
||||
}
|
||||
|
||||
&:has(.counter) input {
|
||||
padding-right: $unit-8x;
|
||||
}
|
||||
}
|
||||
|
||||
&[type='number']::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&.bound {
|
||||
background-color: var(--input-bound-bg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--input-bound-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&.duration {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
width: initial;
|
||||
height: 100%;
|
||||
padding: calc($unit-2x - 2px) 0;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.number {
|
||||
text-align: right;
|
||||
width: $unit-8x;
|
||||
}
|
||||
|
||||
&.range {
|
||||
text-align: right;
|
||||
width: $unit-12x;
|
||||
}
|
||||
|
||||
&.alignRight {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--input-bg-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focus-ring($blue);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input::placeholder,
|
||||
.input > input::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: $grey-80; // Solid gray for hover state
|
||||
background: $grey-100;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
.indicator {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: $grey-80;
|
||||
background: $grey-100;
|
||||
border-radius: $item-corner;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<script lang="ts" generics="T extends string | number">
|
||||
import { Select } from 'bits-ui';
|
||||
import { ChevronDown, Check } from 'lucide-svelte';
|
||||
import styles from './select.module.scss';
|
||||
|
||||
interface Option {
|
||||
value: T;
|
||||
|
|
@ -43,21 +41,21 @@
|
|||
const selected = $derived(options.find(opt => opt.value === value));
|
||||
|
||||
const triggerClasses = [
|
||||
styles.trigger,
|
||||
variant === 'bound' && styles.bound,
|
||||
variant === 'small' && styles.small,
|
||||
variant === 'table' && styles.table,
|
||||
position === 'right' && styles.right,
|
||||
position === 'left' && styles.left,
|
||||
fullWidth && styles.full,
|
||||
hidden && styles.hidden,
|
||||
disabled && styles.disabled,
|
||||
'trigger',
|
||||
variant === 'bound' && 'bound',
|
||||
variant === 'small' && 'small',
|
||||
variant === 'table' && 'table',
|
||||
position === 'right' && 'right',
|
||||
position === 'left' && 'left',
|
||||
fullWidth && 'full',
|
||||
hidden && 'hidden',
|
||||
disabled && 'disabled',
|
||||
className
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
const contentClasses = [
|
||||
styles.select,
|
||||
variant === 'bound' && styles.bound
|
||||
'select',
|
||||
variant === 'bound' && 'bound'
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
function handleValueChange(newValue: string | undefined) {
|
||||
|
|
@ -82,14 +80,14 @@
|
|||
<img src={selected.image} alt={selected.label} />
|
||||
{/if}
|
||||
<span>{selected?.label || placeholder}</span>
|
||||
<span class={styles.icon}>
|
||||
<ChevronDown size={16} />
|
||||
<span class="icon">
|
||||
<span class="chevron">▼</span>
|
||||
</span>
|
||||
</Select.Trigger>
|
||||
|
||||
<Select.Content class={contentClasses}>
|
||||
<div class={`${styles.scroll} ${styles.up}`}>
|
||||
<ChevronDown size={16} />
|
||||
<div class="scroll up">
|
||||
<span class="chevron">▼</span>
|
||||
</div>
|
||||
|
||||
<Select.Viewport>
|
||||
|
|
@ -97,21 +95,289 @@
|
|||
<Select.Item
|
||||
value={option.value}
|
||||
disabled={option.disabled}
|
||||
class={styles.item}
|
||||
class="item"
|
||||
>
|
||||
{#if option.image}
|
||||
<img src={option.image} alt={option.label} />
|
||||
{/if}
|
||||
<span>{option.label}</span>
|
||||
<Select.ItemIndicator class={styles.indicator}>
|
||||
<Check size={16} />
|
||||
<Select.ItemIndicator class="indicator">
|
||||
<span>✓</span>
|
||||
</Select.ItemIndicator>
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Viewport>
|
||||
|
||||
<div class={`${styles.scroll} ${styles.down}`}>
|
||||
<ChevronDown size={16} />
|
||||
<div class="scroll down">
|
||||
<span class="chevron">▼</span>
|
||||
</div>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</Select.Root>
|
||||
|
||||
<style lang="scss">
|
||||
@use 'themes/spacing' as *;
|
||||
@use 'themes/colors' as *;
|
||||
@use 'themes/typography' as *;
|
||||
@use 'themes/layout' as *;
|
||||
@use 'themes/effects' as *;
|
||||
@use 'themes/mixins' as *;
|
||||
|
||||
.trigger {
|
||||
align-items: center;
|
||||
background-color: var(--input-bg);
|
||||
border-radius: $input-corner;
|
||||
border: 2px solid transparent;
|
||||
display: flex;
|
||||
gap: $unit;
|
||||
padding: calc($unit * 1.5) $unit-2x;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
@include smooth-transition($duration-zoom, background-color);
|
||||
|
||||
&.small {
|
||||
& > span:not(.icon) {
|
||||
font-size: $font-small;
|
||||
margin: 0;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: calc($unit-2x - 1px);
|
||||
}
|
||||
|
||||
& > span:not(.icon) {
|
||||
width: 100%;
|
||||
max-width: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&.left {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.right {
|
||||
flex-grow: 0;
|
||||
text-align: right;
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
&.bound {
|
||||
background-color: var(--select-contained-bg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--select-contained-bg-hover);
|
||||
|
||||
&.disabled {
|
||||
background-color: var(--select-contained-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.table {
|
||||
min-width: calc($unit * 30);
|
||||
|
||||
@include breakpoint(phone) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--input-bg-hover);
|
||||
|
||||
span:not(.icon),
|
||||
&[data-placeholder] > span:not(.icon) {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.icon svg {
|
||||
fill: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled:hover {
|
||||
background-color: var(--input-bg);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&[data-placeholder='true'] > span:not(.icon) {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
& > span:not(.icon) {
|
||||
color: var(--text-primary);
|
||||
flex-grow: 1;
|
||||
font-size: $font-regular;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
img {
|
||||
width: $unit-4x;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
fill: var(--icon-secondary);
|
||||
}
|
||||
|
||||
.chevron {
|
||||
font-size: 10px;
|
||||
color: var(--icon-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
animation: scaleIn $duration-zoom ease-out;
|
||||
background: var(--dialog-bg);
|
||||
border-radius: $card-corner;
|
||||
border: 1px solid rgba(0, 0, 0, 0.24);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
|
||||
padding: 0 $unit;
|
||||
min-width: var(--radix-select-trigger-width);
|
||||
transform-origin: var(--radix-select-content-transform-origin);
|
||||
max-height: 40vh;
|
||||
z-index: 40;
|
||||
|
||||
&.bound {
|
||||
background-color: var(--select-content-contained-bg);
|
||||
}
|
||||
|
||||
.scroll.up,
|
||||
.scroll.down {
|
||||
padding: $unit 0;
|
||||
text-align: center;
|
||||
|
||||
&:hover svg, &:hover .chevron {
|
||||
fill: var(--icon-secondary-hover);
|
||||
color: var(--icon-secondary-hover);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--icon-secondary);
|
||||
}
|
||||
|
||||
.chevron {
|
||||
font-size: 10px;
|
||||
color: var(--icon-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll.up {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
20% {
|
||||
opacity: 0.2;
|
||||
transform: scale(0.4);
|
||||
}
|
||||
40% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
60% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1);
|
||||
}
|
||||
65% {
|
||||
opacity: 0.65;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
70% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1);
|
||||
}
|
||||
75% {
|
||||
opacity: 0.75;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
80% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
90% {
|
||||
opacity: 0.9;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
align-items: center;
|
||||
border-radius: $item-corner-small;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: $unit;
|
||||
padding: $unit $unit-2x;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
@include smooth-transition($duration-opacity-fade, background-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--option-bg-hover);
|
||||
}
|
||||
|
||||
&[data-disabled] {
|
||||
color: var(--text-tertiary);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&[data-selected] {
|
||||
background-color: var(--option-bg-hover);
|
||||
font-weight: $medium;
|
||||
}
|
||||
|
||||
img {
|
||||
width: $unit-3x;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
|
||||
svg, span {
|
||||
fill: var(--accent-blue);
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,253 +0,0 @@
|
|||
@use 'themes/spacing';
|
||||
@use 'themes/colors';
|
||||
@use 'themes/typography';
|
||||
@use 'themes/layout';
|
||||
@use 'themes/effects';
|
||||
@use 'themes/mixins';
|
||||
|
||||
.trigger {
|
||||
align-items: center;
|
||||
background-color: var(--input-bg);
|
||||
border-radius: layout.$input-corner;
|
||||
border: 2px solid transparent;
|
||||
display: flex;
|
||||
gap: spacing.$unit;
|
||||
padding: (spacing.$unit * 1.5) spacing.$unit-2x;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.18s ease-out;
|
||||
|
||||
&.small {
|
||||
& > span:not(.icon) {
|
||||
font-size: typography.$font-small;
|
||||
margin: 0;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
@include mixins.breakpoint(tablet) {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: calc(spacing.$unit-2x - 1px);
|
||||
}
|
||||
|
||||
& > span:not(.icon) {
|
||||
width: 100%;
|
||||
max-width: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&.left {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.right {
|
||||
flex-grow: 0;
|
||||
text-align: right;
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
&.bound {
|
||||
background-color: var(--select-contained-bg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--select-contained-bg-hover);
|
||||
|
||||
&.disabled {
|
||||
background-color: var(--select-contained-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.table {
|
||||
min-width: spacing.$unit * 30;
|
||||
|
||||
@include mixins.breakpoint(phone) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--input-bg-hover);
|
||||
|
||||
span:not(.icon),
|
||||
&[data-placeholder] > span:not(.icon) {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.icon svg {
|
||||
fill: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled:hover {
|
||||
background-color: var(--input-bg);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&[data-placeholder='true'] > span:not(.icon) {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
& > span:not(.icon) {
|
||||
color: var(--text-primary);
|
||||
flex-grow: 1;
|
||||
font-size: typography.$font-regular;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
img {
|
||||
width: spacing.$unit-4x;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
fill: var(--icon-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
animation: scaleIn effects.$duration-zoom ease-out;
|
||||
background: var(--dialog-bg);
|
||||
border-radius: layout.$card-corner;
|
||||
border: 1px solid rgba(0, 0, 0, 0.24);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
|
||||
padding: 0 spacing.$unit;
|
||||
min-width: var(--radix-select-trigger-width);
|
||||
transform-origin: var(--radix-select-content-transform-origin);
|
||||
max-height: 40vh;
|
||||
z-index: 40;
|
||||
|
||||
&.bound {
|
||||
background-color: var(--select-content-contained-bg);
|
||||
}
|
||||
|
||||
.scroll.up,
|
||||
.scroll.down {
|
||||
padding: spacing.$unit 0;
|
||||
text-align: center;
|
||||
|
||||
&:hover svg {
|
||||
fill: var(--icon-secondary-hover);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--icon-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll.up {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
20% {
|
||||
opacity: 0.2;
|
||||
transform: scale(0.4);
|
||||
}
|
||||
40% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
60% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1);
|
||||
}
|
||||
65% {
|
||||
opacity: 0.65;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
70% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1);
|
||||
}
|
||||
75% {
|
||||
opacity: 0.75;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
80% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
90% {
|
||||
opacity: 0.9;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
align-items: center;
|
||||
border-radius: layout.$item-corner-small;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: spacing.$unit;
|
||||
padding: spacing.$unit spacing.$unit-2x;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
transition: background-color 0.12s ease-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--option-bg-hover);
|
||||
}
|
||||
|
||||
&[data-disabled] {
|
||||
color: var(--text-tertiary);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&[data-selected] {
|
||||
background-color: var(--option-bg-hover);
|
||||
font-weight: typography.$medium;
|
||||
}
|
||||
|
||||
img {
|
||||
width: spacing.$unit-3x;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
|
||||
svg {
|
||||
fill: var(--accent-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
<svelte:options runes={true} />
|
||||
<script lang="ts">
|
||||
import { Switch as SwitchPrimitive } from 'bits-ui';
|
||||
import styles from './switch.module.scss';
|
||||
import type { HTMLButtonAttributes } from 'svelte/elements';
|
||||
|
||||
interface Props extends Omit<HTMLButtonAttributes, 'value'> {
|
||||
|
|
@ -41,8 +40,65 @@
|
|||
{required}
|
||||
{name}
|
||||
{value}
|
||||
class={`${styles.switch} ${className || ''}`}
|
||||
class="switch {className || ''}"
|
||||
{...restProps}
|
||||
>
|
||||
<SwitchPrimitive.Thumb class={`${styles.thumb} ${thumbClass || ''}`} />
|
||||
</SwitchPrimitive.Root>
|
||||
<SwitchPrimitive.Thumb class="thumb {thumbClass || ''}" />
|
||||
</SwitchPrimitive.Root>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/colors' as *;
|
||||
@use '$src/themes/layout' as *;
|
||||
@use '$src/themes/effects' as *;
|
||||
|
||||
.switch {
|
||||
$height: calc($unit-4x + $unit-fourth); // 34px
|
||||
background: $grey-70;
|
||||
border-radius: calc($height / 2);
|
||||
border: none;
|
||||
padding-left: $unit-half;
|
||||
padding-right: $unit-half;
|
||||
position: relative;
|
||||
width: $unit-7x + $unit-fourth; // 58px
|
||||
height: $height;
|
||||
cursor: pointer;
|
||||
@include smooth-transition($duration-instant, background-color);
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
@include focus-ring($blue);
|
||||
}
|
||||
|
||||
&[data-state='checked'] {
|
||||
background: var(--accent-blue);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
.thumb {
|
||||
background: $grey-80;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thumb {
|
||||
background: $grey-100;
|
||||
border-radius: calc($unit-3x + $unit-fourth / 2); // 13px
|
||||
display: block;
|
||||
height: $unit-3x + $unit-fourth; // 26px
|
||||
width: $unit-3x + $unit-fourth; // 26px
|
||||
@include smooth-transition($duration-instant, transform);
|
||||
transform: translateX(0px);
|
||||
cursor: pointer;
|
||||
|
||||
&[data-state='checked'] {
|
||||
background: $grey-100;
|
||||
transform: translateX($unit-3x); // 24px
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
@use 'themes/spacing';
|
||||
@use 'themes/colors';
|
||||
@use 'themes/layout';
|
||||
|
||||
.switch {
|
||||
$height: 34px;
|
||||
background: colors.$grey-70;
|
||||
border-radius: calc($height / 2);
|
||||
border: none;
|
||||
padding-left: spacing.$unit-half;
|
||||
padding-right: spacing.$unit-half;
|
||||
position: relative;
|
||||
width: 58px;
|
||||
height: $height;
|
||||
cursor: pointer;
|
||||
transition: background-color 100ms ease-out;
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--accent-blue-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&[data-state='checked'] {
|
||||
background: var(--accent-blue);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
.thumb {
|
||||
background: colors.$grey-80;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thumb {
|
||||
background: colors.$grey-100;
|
||||
border-radius: 13px;
|
||||
display: block;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
transition: transform 100ms;
|
||||
transform: translateX(0px);
|
||||
cursor: pointer;
|
||||
|
||||
&[data-state='checked'] {
|
||||
background: colors.$grey-100;
|
||||
transform: translateX(24px);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue