feat: Refactor TextArea component and styles for improved usability and consistency
- Updated textarea styles to utilize CSS variables for dimensions and padding. - Enhanced placeholder styling and added disabled state styles. - Refactored TextArea component to use forwardRef and updated status handling. - Changed input statuses from 'normal' to 'default' for better clarity. - Introduced global decimal separator management in CurrencyService. - Updated tests to cover new decimal separator functionality. - Cleaned up global CSS for better organization and readability. - Removed deprecated rc-component dependencies in favor of @rc-component packages.
This commit is contained in:
Firman Ramdhani
@@ -1,285 +1,367 @@
|
||||
@layer components {
|
||||
:root {
|
||||
--suffix-spacing: 12px;
|
||||
--input-height: 32px;
|
||||
--input-radius: 6px; /* Sesuai radius-base */
|
||||
--input-padding-x: 11px;
|
||||
--input-handler-width: 22px;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
1. LAYOUT & GEOMETRY (DO NOT TOUCH)
|
||||
1. BASE SETUP (Layout & Reset)
|
||||
========================================= */
|
||||
|
||||
/* CONTAINER UTAMA */
|
||||
.rc-input-number,
|
||||
.rc-input-number-affix-wrapper {
|
||||
@apply relative flex w-full items-center m-0 transition-all duration-200 ease-in-out text-sm bg-white;
|
||||
height: var(--input-height);
|
||||
line-height: 1.5715;
|
||||
border-radius: var(--input-radius);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* NESTED RESET (Fix Flexbox) */
|
||||
.rc-input-number-affix-wrapper .rc-input-number {
|
||||
@apply border-none shadow-none bg-transparent p-0 h-full static;
|
||||
.rc-input-number {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
/* Global Variables */
|
||||
height: var(--input-height);
|
||||
font-size: var(--input-font-size);
|
||||
border-radius: var(--input-radius);
|
||||
line-height: 1.5;
|
||||
color: var(--input-text);
|
||||
|
||||
background-color: var(--input-bg);
|
||||
border: 1px solid transparent;
|
||||
|
||||
/* Transisi standar */
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* INPUT FIELD */
|
||||
/* Input Element */
|
||||
.rc-input-number-input {
|
||||
@apply w-full h-full bg-transparent border-none outline-none text-gray-900;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 var(--input-padding-x);
|
||||
appearance: textfield;
|
||||
}
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--input-radius);
|
||||
outline: 0;
|
||||
color: inherit; /* Mewarisi dari parent */
|
||||
transition: all 0.2s linear;
|
||||
|
||||
/* Input Wrapper Helper */
|
||||
.rc-input-number-input-wrap {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
|
||||
/* Padding Kanan Input (jika tanpa suffix wrapper) */
|
||||
.rc-input-number:not(.rc-input-number-affix-wrapper) .rc-input-number-input {
|
||||
/* Padding Kanan Wajib (Space untuk Actions) */
|
||||
padding-right: var(--input-handler-width);
|
||||
}
|
||||
|
||||
/* PREFIX & SUFFIX */
|
||||
.rc-input-number-prefix {
|
||||
@apply flex items-center ml-3 text-gray-500 z-10;
|
||||
/* Hide Native Spinners (Browser Default) */
|
||||
.rc-input-number-input::-webkit-inner-spin-button,
|
||||
.rc-input-number-input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
.rc-input-number-input {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
/* Prefix Styling */
|
||||
.rc-input-number-prefix {
|
||||
margin-left: var(--input-padding-x);
|
||||
margin-right: 0.5rem; /* ~8px */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
/* Suffix Styling */
|
||||
.rc-input-number-suffix {
|
||||
@apply flex items-center text-gray-500 z-10;
|
||||
margin-right: var(--suffix-spacing);
|
||||
margin-right: var(--input-padding-x);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
color: var(--color-gray-500);
|
||||
z-index: 10;
|
||||
transition: margin-right 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Animation Trigger */
|
||||
/* Animation Trigger: Geser Suffix saat hover/focus agar tidak tertutup tombol action */
|
||||
.rc-input-number:hover .rc-input-number-suffix,
|
||||
.rc-input-number-affix-wrapper:hover .rc-input-number-suffix,
|
||||
.rc-input-number-focused .rc-input-number-suffix,
|
||||
.rc-input-number-affix-wrapper-focused .rc-input-number-suffix,
|
||||
.rc-input-number:focus-within .rc-input-number-suffix,
|
||||
.rc-input-number-affix-wrapper:focus-within .rc-input-number-suffix {
|
||||
margin-right: calc(var(--suffix-spacing) + var(--input-handler-width));
|
||||
margin-right: calc(var(--input-padding-x) + var(--input-handler-width));
|
||||
}
|
||||
|
||||
/* HANDLER WRAPPER */
|
||||
.rc-input-number-handler-wrap {
|
||||
/* =========================================
|
||||
2. ACTIONS CONTAINER (Custom Spinners)
|
||||
Target: .rc-input-number-actions
|
||||
========================================= */
|
||||
.rc-input-number-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: var(--input-handler-width);
|
||||
@apply flex flex-col border-l border-gray-200 bg-white opacity-0 transition-opacity duration-200 overflow-hidden z-20;
|
||||
border-top-right-radius: var(--input-radius);
|
||||
border-bottom-right-radius: var(--input-radius);
|
||||
height: 100%;
|
||||
|
||||
/* Menggunakan var input-bg agar konsisten (putih) */
|
||||
background: var(--input-bg);
|
||||
|
||||
/* Default Border (akan di-override status) */
|
||||
border-left: 1px solid var(--input-border);
|
||||
border-radius: 0 var(--input-radius) var(--input-radius) 0;
|
||||
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.24s linear 0.1s;
|
||||
z-index: 10;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Show handlers logic */
|
||||
.rc-input-number:hover .rc-input-number-handler-wrap,
|
||||
.rc-input-number-affix-wrapper:hover .rc-input-number-handler-wrap,
|
||||
.rc-input-number-focused .rc-input-number-handler-wrap,
|
||||
.rc-input-number-affix-wrapper-focused .rc-input-number-handler-wrap,
|
||||
.rc-input-number:focus-within .rc-input-number-handler-wrap,
|
||||
.rc-input-number-affix-wrapper:focus-within .rc-input-number-handler-wrap {
|
||||
@apply opacity-100;
|
||||
/* Show Actions on Interaction */
|
||||
.rc-input-number:hover .rc-input-number-actions,
|
||||
.rc-input-number:focus-within .rc-input-number-actions {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.rc-input-number-handler {
|
||||
@apply flex items-center justify-center flex-1 text-gray-400 cursor-pointer transition-colors duration-100 bg-white;
|
||||
/* Individual Buttons */
|
||||
.rc-input-number-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
color: var(--color-gray-400);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
.rc-input-number-handler:hover {
|
||||
@apply text-brand-600 bg-gray-50;
|
||||
height: 60%;
|
||||
|
||||
.rc-input-number-action:active {
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
.rc-input-number-handler:active {
|
||||
@apply bg-gray-100;
|
||||
|
||||
.rc-input-number-action:hover {
|
||||
color: var(--color-brand-500);
|
||||
height: 60%; /* Efek hover button membesar dikit */
|
||||
}
|
||||
.rc-input-number-handler-up {
|
||||
@apply border-b border-gray-200;
|
||||
|
||||
/* Border Bawah untuk Action UP */
|
||||
.rc-input-number-action-up {
|
||||
border-bottom: 1px solid var(--input-border);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
2. SKINS, VARIANTS & STATUS
|
||||
(Matching your Input Text Logic)
|
||||
3. STATUS MATRIX (VARIANT: OUTLINED)
|
||||
========================================= */
|
||||
|
||||
/* --- COMMON FOCUS STYLE (Brand Color) --- */
|
||||
/* Default focus for Normal status */
|
||||
.input-number-status-normal.rc-input-number-focused,
|
||||
.input-number-status-normal.rc-input-number-affix-wrapper-focused,
|
||||
.input-number-status-normal:focus-within {
|
||||
border-color: var(--color-brand-500) !important;
|
||||
box-shadow: 0 0 0 3px var(--color-brand-100) !important; /* Brand 200/100 for ring */
|
||||
background-color: #fff !important;
|
||||
/* --- DEFAULT --- */
|
||||
.input-number-variant-outlined.input-number-status-default {
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-default:hover:not(.rc-input-number-disabled) {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-default:focus-within {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
/* Action Borders Sync */
|
||||
.input-number-variant-outlined.input-number-status-default:focus-within .rc-input-number-actions {
|
||||
border-left-color: var(--focus-border-color);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-default:focus-within .rc-input-number-action-up {
|
||||
border-bottom-color: var(--focus-border-color);
|
||||
}
|
||||
|
||||
/* ====================
|
||||
VARIANT: OUTLINED
|
||||
==================== */
|
||||
|
||||
/* Normal */
|
||||
.input-number-variant-outlined.input-number-status-normal {
|
||||
@apply border-gray-300;
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-normal:hover {
|
||||
@apply border-brand-400; /* Atau var(--input-border-hover) */
|
||||
}
|
||||
|
||||
/* Error (Outlined) */
|
||||
/* --- ERROR --- */
|
||||
.input-number-variant-outlined.input-number-status-error {
|
||||
border-color: var(--color-error-500) !important;
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-error:focus-within,
|
||||
.input-number-variant-outlined.input-number-status-error.rc-input-number-focused,
|
||||
.input-number-variant-outlined.input-number-status-error.rc-input-number-affix-wrapper-focused {
|
||||
box-shadow: 0 0 0 3px var(--color-error-100) !important;
|
||||
border-color: var(--color-error-500) !important;
|
||||
.input-number-variant-outlined.input-number-status-error:hover:not(.rc-input-number-disabled) {
|
||||
border-color: var(--color-error-600);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-error:focus-within {
|
||||
border-color: var(--color-error-600);
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
/* Action Borders Sync */
|
||||
.input-number-variant-outlined.input-number-status-error .rc-input-number-actions {
|
||||
border-left-color: var(--color-error-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-error .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-error-500);
|
||||
}
|
||||
|
||||
/* Warning (Outlined) */
|
||||
/* --- WARNING --- */
|
||||
.input-number-variant-outlined.input-number-status-warning {
|
||||
border-color: var(--color-warning-500) !important;
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-warning:focus-within,
|
||||
.input-number-variant-outlined.input-number-status-warning.rc-input-number-focused,
|
||||
.input-number-variant-outlined.input-number-status-warning.rc-input-number-affix-wrapper-focused {
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100) !important;
|
||||
border-color: var(--color-warning-500) !important;
|
||||
.input-number-variant-outlined.input-number-status-warning:hover:not(.rc-input-number-disabled) {
|
||||
border-color: var(--color-warning-600);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-warning:focus-within {
|
||||
border-color: var(--color-warning-600);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
/* Action Borders Sync */
|
||||
.input-number-variant-outlined.input-number-status-warning .rc-input-number-actions {
|
||||
border-left-color: var(--color-warning-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-warning .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-warning-500);
|
||||
}
|
||||
|
||||
/* Success (Outlined) */
|
||||
/* --- SUCCESS --- */
|
||||
.input-number-variant-outlined.input-number-status-success {
|
||||
border-color: var(--color-success-500) !important;
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-success:focus-within,
|
||||
.input-number-variant-outlined.input-number-status-success.rc-input-number-focused,
|
||||
.input-number-variant-outlined.input-number-status-success.rc-input-number-affix-wrapper-focused {
|
||||
box-shadow: 0 0 0 3px var(--color-success-100) !important;
|
||||
border-color: var(--color-success-500) !important;
|
||||
.input-number-variant-outlined.input-number-status-success:hover:not(.rc-input-number-disabled) {
|
||||
border-color: var(--color-success-600);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-success:focus-within {
|
||||
border-color: var(--color-success-600);
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
/* Action Borders Sync */
|
||||
.input-number-variant-outlined.input-number-status-success .rc-input-number-actions {
|
||||
border-left-color: var(--color-success-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-success .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-success-500);
|
||||
}
|
||||
|
||||
/* Info (Outlined) */
|
||||
/* --- INFO --- */
|
||||
.input-number-variant-outlined.input-number-status-info {
|
||||
border-color: var(--color-info-500) !important;
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-info:focus-within,
|
||||
.input-number-variant-outlined.input-number-status-info.rc-input-number-focused,
|
||||
.input-number-variant-outlined.input-number-status-info.rc-input-number-affix-wrapper-focused {
|
||||
box-shadow: 0 0 0 3px var(--color-info-100) !important;
|
||||
border-color: var(--color-info-500) !important;
|
||||
.input-number-variant-outlined.input-number-status-info:hover:not(.rc-input-number-disabled) {
|
||||
border-color: var(--color-info-600);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-info:focus-within {
|
||||
border-color: var(--color-info-600);
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
/* Action Borders Sync */
|
||||
.input-number-variant-outlined.input-number-status-info .rc-input-number-actions {
|
||||
border-left-color: var(--color-info-500);
|
||||
}
|
||||
.input-number-variant-outlined.input-number-status-info .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-info-500);
|
||||
}
|
||||
|
||||
/* ====================
|
||||
VARIANT: FILLED
|
||||
==================== */
|
||||
/* =========================================
|
||||
4. STATUS MATRIX (VARIANT: FILLED)
|
||||
========================================= */
|
||||
|
||||
/* Normal Filled */
|
||||
.input-number-variant-filled.input-number-status-normal {
|
||||
/* Gunakan gray-100 atau var(--input-bg) jika gray */
|
||||
/* @apply border-transparent bg-gray-100; */
|
||||
@apply border-gray-300;
|
||||
/* --- NORMAL FILLED --- */
|
||||
.input-number-variant-filled.input-number-status-default {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-normal:hover {
|
||||
/* @apply bg-gray-200; */
|
||||
@apply border-brand-400; /* Atau var(--input-border-hover) */
|
||||
.input-number-variant-filled.input-number-status-default:hover:not(.rc-input-number-disabled) {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
/* Saat Focus, Filled Normal jadi Putih + Brand Border */
|
||||
.input-number-variant-filled.input-number-status-normal:focus-within,
|
||||
.input-number-variant-filled.input-number-status-normal.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-normal.rc-input-number-affix-wrapper-focused {
|
||||
@apply bg-white border-brand-500;
|
||||
.input-number-variant-filled.input-number-status-default:focus-within {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
|
||||
/* Error Filled (Colored BG) */
|
||||
/* --- ERROR FILLED --- */
|
||||
.input-number-variant-filled.input-number-status-error {
|
||||
background-color: var(--color-error-50) !important;
|
||||
border-color: var(--color-error-500) !important;
|
||||
background-color: var(--color-error-50);
|
||||
border-color: var(--color-error-500);
|
||||
color: var(--color-error-600);
|
||||
}
|
||||
/* Fix: Filled Error saat Focus -> Background Putih */
|
||||
.input-number-variant-filled.input-number-status-error:focus-within,
|
||||
.input-number-variant-filled.input-number-status-error.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-error.rc-input-number-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 0 0 3px var(--color-error-100) !important;
|
||||
/* Actions Background & Border Sync (Error) */
|
||||
.input-number-variant-filled.input-number-status-error .rc-input-number-actions {
|
||||
background-color: var(--color-error-50);
|
||||
border-left-color: var(--color-error-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-error .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-error-500);
|
||||
}
|
||||
/* Focus: Revert to White BG */
|
||||
.input-number-variant-filled.input-number-status-error:focus-within {
|
||||
background-color: var(--input-bg);
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-error:focus-within .rc-input-number-actions {
|
||||
background-color: var(--input-bg);
|
||||
}
|
||||
|
||||
/* Warning Filled (Colored BG) */
|
||||
/* --- WARNING FILLED --- */
|
||||
.input-number-variant-filled.input-number-status-warning {
|
||||
background-color: var(--color-warning-50) !important;
|
||||
border-color: var(--color-warning-500) !important;
|
||||
background-color: var(--color-warning-50);
|
||||
border-color: var(--color-warning-500);
|
||||
color: var(--color-warning-600);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-warning:focus-within,
|
||||
.input-number-variant-filled.input-number-status-warning.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-warning.rc-input-number-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100) !important;
|
||||
.input-number-variant-filled.input-number-status-warning .rc-input-number-actions {
|
||||
background-color: var(--color-warning-50);
|
||||
border-left-color: var(--color-warning-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-warning .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-warning-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-warning:focus-within {
|
||||
background-color: var(--input-bg);
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-warning:focus-within .rc-input-number-actions {
|
||||
background-color: var(--input-bg);
|
||||
}
|
||||
|
||||
/* Success Filled (Colored BG) */
|
||||
/* --- SUCCESS FILLED --- */
|
||||
.input-number-variant-filled.input-number-status-success {
|
||||
background-color: var(--color-success-50) !important;
|
||||
border-color: var(--color-success-500) !important;
|
||||
background-color: var(--color-success-50);
|
||||
border-color: var(--color-success-500);
|
||||
color: var(--color-success-600);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-success:focus-within,
|
||||
.input-number-variant-filled.input-number-status-success.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-success.rc-input-number-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 0 0 3px var(--color-success-100) !important;
|
||||
.input-number-variant-filled.input-number-status-success .rc-input-number-actions {
|
||||
background-color: var(--color-success-50);
|
||||
border-left-color: var(--color-success-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-success .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-success-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-success:focus-within {
|
||||
background-color: var(--input-bg);
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-success:focus-within .rc-input-number-actions {
|
||||
background-color: var(--input-bg);
|
||||
}
|
||||
|
||||
/* Info Filled (Colored BG) */
|
||||
/* --- INFO FILLED --- */
|
||||
.input-number-variant-filled.input-number-status-info {
|
||||
background-color: var(--color-info-50) !important;
|
||||
border-color: var(--color-info-500) !important;
|
||||
background-color: var(--color-info-50);
|
||||
border-color: var(--color-info-500);
|
||||
color: var(--color-info-600);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-info:focus-within,
|
||||
.input-number-variant-filled.input-number-status-info.rc-input-number-focused,
|
||||
.input-number-variant-filled.input-number-status-info.rc-input-number-affix-wrapper-focused {
|
||||
background-color: #fff !important;
|
||||
box-shadow: 0 0 0 3px var(--color-info-100) !important;
|
||||
.input-number-variant-filled.input-number-status-info .rc-input-number-actions {
|
||||
background-color: var(--color-info-50);
|
||||
border-left-color: var(--color-info-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-info .rc-input-number-action-up {
|
||||
border-bottom-color: var(--color-info-500);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-info:focus-within {
|
||||
background-color: var(--input-bg);
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
.input-number-variant-filled.input-number-status-info:focus-within .rc-input-number-actions {
|
||||
background-color: var(--input-bg);
|
||||
}
|
||||
|
||||
/* ====================
|
||||
HANDLER BORDER SYNC
|
||||
==================== */
|
||||
/* Agar garis kiri handler warnanya sama dengan border input saat status aktif */
|
||||
|
||||
.input-number-status-error .rc-input-number-handler-wrap {
|
||||
border-left-color: var(--color-error-500) !important;
|
||||
/* =========================================
|
||||
5. DISABLED STATE
|
||||
========================================= */
|
||||
.rc-input-number-disabled {
|
||||
background-color: var(--disabled-bg) !important;
|
||||
border-color: var(--disabled-border) !important;
|
||||
color: var(--disabled-text);
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
}
|
||||
.input-number-status-warning .rc-input-number-handler-wrap {
|
||||
border-left-color: var(--color-warning-500) !important;
|
||||
.rc-input-number-disabled .rc-input-number-input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.input-number-status-success .rc-input-number-handler-wrap {
|
||||
border-left-color: var(--color-success-500) !important;
|
||||
}
|
||||
.input-number-status-info .rc-input-number-handler-wrap {
|
||||
border-left-color: var(--color-info-500) !important;
|
||||
}
|
||||
|
||||
/* ====================
|
||||
DISABLED STATE
|
||||
==================== */
|
||||
.rc-input-number-disabled,
|
||||
.rc-input-number-affix-wrapper-disabled {
|
||||
@apply bg-gray-50 border-gray-200 cursor-not-allowed opacity-70;
|
||||
/* Force styles to override status colors */
|
||||
background-color: var(--color-gray-50) !important;
|
||||
border-color: var(--color-gray-200) !important;
|
||||
}
|
||||
.rc-input-number-disabled .rc-input-number-input,
|
||||
.rc-input-number-affix-wrapper-disabled .rc-input-number-input {
|
||||
@apply cursor-not-allowed text-gray-400;
|
||||
}
|
||||
/* Hide handler on disabled */
|
||||
.rc-input-number-disabled .rc-input-number-handler-wrap,
|
||||
.rc-input-number-affix-wrapper-disabled .rc-input-number-handler-wrap {
|
||||
display: none;
|
||||
.rc-input-number-disabled .rc-input-number-actions {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user