364 lines
12 KiB
CSS
364 lines
12 KiB
CSS
@layer components {
|
|
/* =========================================
|
|
1. BASE SETUP (Layout & Reset)
|
|
========================================= */
|
|
.rc-input-number {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: flex;
|
|
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 Element */
|
|
.rc-input-number-input {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 var(--input-padding-x);
|
|
background-color: transparent;
|
|
border: 0;
|
|
border-radius: var(--input-radius);
|
|
outline: 0;
|
|
color: inherit; /* Mewarisi dari parent */
|
|
transition: all 0.2s linear;
|
|
|
|
/* Padding Kanan Wajib (Space untuk Actions) */
|
|
padding-right: var(--input-handler-width);
|
|
}
|
|
|
|
/* 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 {
|
|
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: 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(--input-padding-x) + var(--input-handler-width));
|
|
}
|
|
|
|
/* =========================================
|
|
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);
|
|
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 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;
|
|
}
|
|
|
|
/* 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-action:active {
|
|
background-color: var(--color-gray-100);
|
|
}
|
|
|
|
.rc-input-number-action:hover {
|
|
color: var(--color-brand-500);
|
|
height: 60%; /* Efek hover button membesar dikit */
|
|
}
|
|
|
|
/* Border Bawah untuk Action UP */
|
|
.rc-input-number-action-up {
|
|
border-bottom: 1px solid var(--input-border);
|
|
}
|
|
|
|
/* =========================================
|
|
3. STATUS MATRIX (VARIANT: OUTLINED)
|
|
========================================= */
|
|
|
|
/* --- 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);
|
|
}
|
|
|
|
/* --- ERROR --- */
|
|
.input-number-variant-outlined.input-number-status-error {
|
|
border-color: var(--color-error-500);
|
|
}
|
|
.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 --- */
|
|
.input-number-variant-outlined.input-number-status-warning {
|
|
border-color: var(--color-warning-500);
|
|
}
|
|
.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 --- */
|
|
.input-number-variant-outlined.input-number-status-success {
|
|
border-color: var(--color-success-500);
|
|
}
|
|
.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 --- */
|
|
.input-number-variant-outlined.input-number-status-info {
|
|
border-color: var(--color-info-500);
|
|
}
|
|
.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);
|
|
}
|
|
|
|
/* =========================================
|
|
4. STATUS MATRIX (VARIANT: FILLED)
|
|
========================================= */
|
|
|
|
/* --- 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-default:hover:not(.rc-input-number-disabled) {
|
|
border-color: var(--input-border-hover);
|
|
}
|
|
.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 --- */
|
|
.input-number-variant-filled.input-number-status-error {
|
|
background-color: var(--color-error-50);
|
|
border-color: var(--color-error-500);
|
|
}
|
|
/* 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 --- */
|
|
.input-number-variant-filled.input-number-status-warning {
|
|
background-color: var(--color-warning-50);
|
|
border-color: var(--color-warning-500);
|
|
}
|
|
.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 --- */
|
|
.input-number-variant-filled.input-number-status-success {
|
|
background-color: var(--color-success-50);
|
|
border-color: var(--color-success-500);
|
|
}
|
|
.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 --- */
|
|
.input-number-variant-filled.input-number-status-info {
|
|
background-color: var(--color-info-50);
|
|
border-color: var(--color-info-500);
|
|
}
|
|
.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);
|
|
}
|
|
|
|
/* =========================================
|
|
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;
|
|
}
|
|
.rc-input-number-disabled .rc-input-number-input {
|
|
cursor: not-allowed;
|
|
}
|
|
.rc-input-number-disabled .rc-input-number-actions {
|
|
display: none !important;
|
|
}
|
|
}
|