62 lines
1.6 KiB
CSS
62 lines
1.6 KiB
CSS
@layer components {
|
|
/* Container Form Item */
|
|
.rc-form-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
margin-bottom: var(--form-item-margin-bottom);
|
|
}
|
|
|
|
/* =========================
|
|
LABEL
|
|
========================= */
|
|
.rc-form-item-label {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: var(--form-label-font-size);
|
|
font-weight: var(--form-label-font-weight);
|
|
color: var(--form-label-color);
|
|
margin-bottom: var(--form-label-margin-bottom);
|
|
line-height: 1.4;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
/* Required Asterisk (*) */
|
|
.rc-form-item-required-mark {
|
|
margin-left: 0.25rem;
|
|
color: var(--color-error-500);
|
|
font-family: SimSun, sans-serif; /* Standard font for asterisks agar vertical align */
|
|
}
|
|
|
|
/* =========================
|
|
MESSAGE (ERROR / WARNING)
|
|
========================= */
|
|
.rc-form-item-explain {
|
|
margin-top: var(--form-msg-margin-top);
|
|
font-size: var(--form-msg-font-size);
|
|
line-height: 1.4;
|
|
min-height: 1.4em; /* Reserve space even when empty to prevent layout shift */
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
/* =========================
|
|
STATUS MODIFIERS
|
|
========================= */
|
|
|
|
/* --- ERROR STATE --- */
|
|
.rc-form-item.status-error .rc-form-item-label {
|
|
color: var(--color-error-600); /* Darker shade for label on error */
|
|
}
|
|
.rc-form-item.status-error .rc-form-item-explain {
|
|
color: var(--color-error-500);
|
|
}
|
|
|
|
/* --- WARNING STATE --- */
|
|
.rc-form-item.status-warning .rc-form-item-label {
|
|
color: var(--color-warning-600);
|
|
}
|
|
.rc-form-item.status-warning .rc-form-item-explain {
|
|
color: var(--color-warning-500);
|
|
}
|
|
}
|