This commit is contained in:
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.input-field {
|
||||
--input-fg: var(--fg-neutral-tertiary);
|
||||
--input-fg-typing: var(--fg-neutral-primary);
|
||||
--input-fg-filled: var(--fg-neutral-primary);
|
||||
--input-border: var(--border-neutral-tertiary);
|
||||
--input-border-typing: var(--tint, var(--border-neutral-primary));
|
||||
--input-border-filled: var(--border-neutral-tertiary);
|
||||
--input-border-error: var(--border-tint-red);
|
||||
--input-bg: var(--bg-neutral-primary);
|
||||
--input-bg-typing: var(--bg-neutral-tertiary);
|
||||
--input-bg-filled: var(--bg-neutral-primary);
|
||||
|
||||
@apply flex flex-col gap-1.5;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
@apply relative;
|
||||
@apply [&:has(.input-button)>.input-large]:!pr-12 [&:has(.input-button)>.input-medium]:!pr-10 [&:has(.input-button)>.input-small]:!pr-8;
|
||||
@apply [&:has(.input-icon)>.input-large]:!pl-12 [&:has(.input-icon)>.input-medium]:!pl-10 [&:has(.input-icon)>.input-small]:!pl-8;
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply text-[var(--input-fg-filled)] placeholder:text-[var(--input-fg)] placeholder-shown:text-[var(--input-fg)] focus-visible:text-[var(--input-fg-typing)];
|
||||
@apply border border-[var(--input-border-filled)] placeholder-shown:border placeholder-shown:border-[var(--input-border)] focus-visible:border-2 focus-visible:border-[var(--input-border-typing)];
|
||||
@apply bg-[var(--input-bg-filled)] placeholder-shown:bg-[var(--input-bg)] focus-visible:bg-[var(--input-bg-typing)];
|
||||
|
||||
@apply w-full outline-none;
|
||||
@apply disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-search-cancel-button]:hidden;
|
||||
|
||||
/* default */
|
||||
@apply input-small input-radius-medium;
|
||||
}
|
||||
.input[aria-invalid='true'] {
|
||||
@apply !border-2 !border-[var(--input-border-error)] !bg-[var(--input-bg-error)];
|
||||
}
|
||||
|
||||
.input-button {
|
||||
@apply absolute-y-center flex flex-shrink-0 items-center justify-center disabled:cursor-not-allowed disabled:opacity-50;
|
||||
|
||||
/* default */
|
||||
@apply input-button-small;
|
||||
}
|
||||
|
||||
.input-button.show-only-on-focus-and-has-value {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.input-box:focus-within
|
||||
.input:not(:placeholder-shown)
|
||||
~ .input-button.show-only-on-focus-and-has-value {
|
||||
@apply flex;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
@apply absolute-y-center flex;
|
||||
|
||||
/* default */
|
||||
@apply input-icon-small;
|
||||
}
|
||||
Reference in New Issue
Block a user