Firman Ramdhani
2c21da111e
- Removed the variant prop from Checkbox, Input, InputNumber, Switch, TextArea components. - Updated styles to eliminate variant-specific classes for Checkbox, Input, InputNumber, TextArea, and Switch. - Simplified class names in stylesheets to focus on status only. - Adjusted documentation to reflect the removal of the variant prop.
237 lines
6.2 KiB
CSS
237 lines
6.2 KiB
CSS
@layer components {
|
|
/* =========================================
|
|
BASE RESET & SHARED
|
|
========================================= */
|
|
.rc-input {
|
|
/* Use box-sizing border-box for predictable sizing */
|
|
box-sizing: border-box;
|
|
|
|
display: inline-block;
|
|
width: 100%;
|
|
|
|
/* Using variable dimensions */
|
|
height: var(--input-height);
|
|
padding: 0 var(--input-padding-x); /* Consistent with 0.92rem */
|
|
|
|
font-size: var(--input-font-size);
|
|
line-height: 1.5;
|
|
color: var(--input-text);
|
|
|
|
background-color: var(--input-bg);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--input-radius);
|
|
|
|
/* Standard Transition */
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
outline: none;
|
|
}
|
|
|
|
.rc-input::placeholder {
|
|
color: var(--input-placeholder);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Disabled State (Standalone Input) */
|
|
.rc-input:disabled {
|
|
background-color: var(--disabled-bg) !important;
|
|
color: var(--disabled-text);
|
|
border-color: var(--disabled-border) !important;
|
|
cursor: not-allowed;
|
|
opacity: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* =========================================
|
|
CLEAR ICON
|
|
Button (x) to clear input content
|
|
========================================= */
|
|
.rc-input-clear-icon {
|
|
/* Reset Button Styles */
|
|
margin: 0;
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
|
|
/* Layout & Sizing */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--text-sm); /* ~12px icon size */
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
|
|
/* Colors & Transition */
|
|
color: var(--color-gray-400); /* Default gray color */
|
|
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Visibility Control ( Smooth appearance/disappearance could use opacity + pointer-events )
|
|
/* visibility: hidden; */
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Hover State: Darker Gray */
|
|
.rc-input-clear-icon:hover {
|
|
color: var(--color-gray-500);
|
|
}
|
|
|
|
/* Active/Click State */
|
|
.rc-input-clear-icon:active {
|
|
color: var(--color-gray-600);
|
|
}
|
|
|
|
/* Hidden State */
|
|
.rc-input-clear-icon-hidden {
|
|
display: none;
|
|
/* Alternative approach to keep layout but invisible:
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
*/
|
|
}
|
|
|
|
/* Placement Helper: Margin to separate from input text */
|
|
.rc-input-affix-wrapper .rc-input-clear-icon {
|
|
margin-left: 0.5rem; /* ~8px spacing from text */
|
|
z-index: 2; /* Above input text */
|
|
}
|
|
|
|
/* =========================================
|
|
AFFIX WRAPPER (PREFIX / SUFFIX) SETUP
|
|
========================================= */
|
|
|
|
/* Base Wrapper Style */
|
|
.rc-input-affix-wrapper {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
/* Using variable dimensions */
|
|
height: var(--input-height);
|
|
padding: 0 var(--input-padding-x);
|
|
|
|
border: 1px solid transparent;
|
|
border-radius: var(--input-radius);
|
|
background-color: var(--input-bg);
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Reset Input inside Affix Wrapper */
|
|
.rc-input-affix-wrapper .rc-input {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
outline: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: transparent;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Prefix & Suffix Positioning */
|
|
.rc-input-prefix {
|
|
margin-right: 0.5rem; /* ~8px, hardcoded */
|
|
display: flex;
|
|
align-items: center;
|
|
flex: none;
|
|
}
|
|
.rc-input-suffix {
|
|
margin-left: 0.5rem; /* ~8px */
|
|
display: flex;
|
|
align-items: center;
|
|
flex: none;
|
|
}
|
|
|
|
/* Disabled Wrapper */
|
|
.rc-input-affix-wrapper-disabled {
|
|
background-color: var(--disabled-bg) !important;
|
|
color: var(--disabled-text);
|
|
border-color: var(--disabled-border) !important;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
.rc-input-affix-wrapper-disabled .rc-input {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* =========================================
|
|
LOGIC MATRIX: [VARIANT] x [STATUS]
|
|
========================================= */
|
|
|
|
/* ------------------------------------------------
|
|
1. VARIANT: OUTLINED (Default)
|
|
------------------------------------------------ */
|
|
|
|
/* DEFAULT */
|
|
.input-status-default {
|
|
border-color: var(--input-border);
|
|
}
|
|
/* Hover */
|
|
.input-status-default:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
|
|
border-color: var(--input-border-hover);
|
|
}
|
|
/* Focus */
|
|
.input-status-default:focus,
|
|
.input-status-default.rc-input-affix-wrapper-focused {
|
|
border-color: var(--focus-border-color);
|
|
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ERROR */
|
|
.input-status-error {
|
|
border-color: var(--color-error-500);
|
|
z-index: 1;
|
|
}
|
|
.input-status-error:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
|
|
border-color: var(--color-error-600);
|
|
}
|
|
.input-status-error:focus,
|
|
.input-status-error.rc-input-affix-wrapper-focused {
|
|
border-color: var(--color-error-600);
|
|
box-shadow: 0 0 0 3px var(--color-error-100);
|
|
}
|
|
|
|
/* WARNING */
|
|
.input-status-warning {
|
|
border-color: var(--color-warning-500);
|
|
z-index: 1;
|
|
}
|
|
.input-status-warning:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
|
|
border-color: var(--color-warning-600);
|
|
}
|
|
.input-status-warning:focus,
|
|
.input-status-warning.rc-input-affix-wrapper-focused {
|
|
border-color: var(--color-warning-600);
|
|
box-shadow: 0 0 0 3px var(--color-warning-100);
|
|
}
|
|
|
|
/* SUCCESS */
|
|
.input-status-success {
|
|
border-color: var(--color-success-500);
|
|
z-index: 1;
|
|
}
|
|
.input-status-success:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
|
|
border-color: var(--color-success-600);
|
|
}
|
|
.input-status-success:focus,
|
|
.input-status-success.rc-input-affix-wrapper-focused {
|
|
border-color: var(--color-success-600);
|
|
box-shadow: 0 0 0 3px var(--color-success-100);
|
|
}
|
|
|
|
/* INFO */
|
|
.input-status-info {
|
|
border-color: var(--color-info-500);
|
|
z-index: 1;
|
|
}
|
|
.input-status-info:hover:not(.rc-input-affix-wrapper-disabled):not(:disabled) {
|
|
border-color: var(--color-info-600);
|
|
}
|
|
.input-status-info:focus,
|
|
.input-status-info.rc-input-affix-wrapper-focused {
|
|
border-color: var(--color-info-600);
|
|
box-shadow: 0 0 0 3px var(--color-info-100);
|
|
}
|
|
}
|