87 lines
3.6 KiB
CSS
87 lines
3.6 KiB
CSS
/**
|
|
* Copyright 2025 LY Corporation
|
|
*
|
|
* LY Corporation licenses this file to you under the Apache License,
|
|
* version 2.0 (the "License"); you may not use this file except in compliance
|
|
* with the License. You may obtain a copy of the License at:
|
|
*
|
|
* https://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
* License for the specific language governing permissions and limitations
|
|
* under the License.
|
|
*/
|
|
|
|
.select {
|
|
/* default */
|
|
@apply select-small;
|
|
}
|
|
|
|
.select-trigger {
|
|
--select-fg: var(--fg-neutral-tertiary);
|
|
--select-fg-pressed: var(--fg-neutral-primary);
|
|
--select-fg-filled: var(--fg-neutral-primary);
|
|
--select-border: var(--border-neutral-tertiary);
|
|
--select-border-pressed: var(--tint, var(--border-neutral-primary));
|
|
--select-border-error: var(--border-tint-red);
|
|
--select-bg: var(--bg-neutral-primary);
|
|
--select-bg-pressed: var(--bg-neutral-tertiary);
|
|
|
|
@apply relative flex w-full items-center justify-start bg-[var(--select-bg)] text-left text-[var(--select-fg-filled)] transition-transform before:absolute before:inset-0 before:flex before:border before:border-[var(--select-border)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-[var(--select-fg)] data-[state=open]:text-[var(--select-fg-pressed)] data-[state=open]:before:border-2 data-[state=open]:before:border-[var(--select-border-pressed)] [&>span]:flex [&>span]:flex-1 [&>span]:items-center [&>span]:overflow-hidden [&>svg:last-of-type]:data-[state=open]:rotate-180;
|
|
|
|
/* default */
|
|
@apply select-trigger-medium select-trigger-radius-medium;
|
|
}
|
|
|
|
.select-trigger[aria-invalid='true'] {
|
|
@apply before:!border-2 before:!border-[var(--select-border-error)];
|
|
}
|
|
|
|
.select-content {
|
|
--select-fg: var(--fg-neutral-tertiary);
|
|
--select-fg-pressed: var(--fg-neutral-primary);
|
|
--select-fg-filled: var(--fg-neutral-primary);
|
|
--select-border: var(--border-neutral-tertiary);
|
|
--select-border-pressed: var(--tint, var(--border-neutral-primary));
|
|
--select-border-error: var(--border-tint-red);
|
|
--select-bg: var(--bg-neutral-primary);
|
|
--select-bg-pressed: var(--bg-neutral-tertiary);
|
|
|
|
@apply data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95;
|
|
@apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95;
|
|
@apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:mt-1 data-[side=top]:mb-1;
|
|
@apply rounded-8 relative z-50 !min-w-[var(--radix-select-trigger-width,_var(--radix-popper-anchor-width))] overflow-hidden border border-[var(--select-border)] bg-[var(--select-bg)] p-1 text-[var(--select-fg-filled)] shadow-md;
|
|
}
|
|
|
|
.select-viewport {
|
|
@apply p-px;
|
|
}
|
|
|
|
.select-group-label {
|
|
@apply text-base-strong p-2;
|
|
}
|
|
|
|
.select-item {
|
|
@apply rounded-6 text-base-normal relative flex cursor-pointer select-none items-center py-2 outline-none transition-colors hover:bg-[var(--select-bg-pressed)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
|
|
|
|
/* default */
|
|
@apply [&:not(.select-item-right)]:select-item-left;
|
|
}
|
|
|
|
.select-item-check {
|
|
@apply absolute flex h-4 w-4 items-center justify-center;
|
|
|
|
/* default */
|
|
@apply [&:not(.select-item-check-right)]:select-item-check-left;
|
|
}
|
|
|
|
.select-separator {
|
|
@apply -mx-1 my-1 h-px bg-[var(--select-border)];
|
|
}
|
|
|
|
.select-tag {
|
|
@apply mr-2.5 !gap-0;
|
|
}
|