feat: Refactor example page and showcase components
- Updated ExamplePage to use a single Showcase component instead of separate InputShowCase and FormShowcase components. - Added CheckboxShowcase, FormShowcase, and InputShowCase components to the showcase directory. - Implemented Checkbox component with various states and styles. - Enhanced InputShowCase to demonstrate different input types and states. - Integrated new styles for checkbox variants and states. - Updated package dependencies to include @rc-component/checkbox.
This commit is contained in:
Firman Ramdhani
@@ -0,0 +1,294 @@
|
||||
@layer components {
|
||||
/* =========================================
|
||||
BASE WRAPPER & LABEL
|
||||
========================================= */
|
||||
.rc-checkbox-wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: var(--form-label-font-size);
|
||||
font-weight: var(--form-label-font-weight);
|
||||
color: var(--form-label-color);
|
||||
line-height: 1;
|
||||
gap: 8px; /* Jarak antara kotak dan teks */
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rc-checkbox-wrapper-disabled {
|
||||
cursor: not-allowed;
|
||||
color: var(--disabled-text);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
CORE CHECKBOX STRUCTURE
|
||||
========================================= */
|
||||
.rc-checkbox {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
top: -1px; /* Optikal alignment */
|
||||
}
|
||||
|
||||
.rc-checkbox-input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rc-checkbox-inner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 16px; /* Sedikit diperbesar dari 14px agar proporsional dengan font 13px */
|
||||
height: 16px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: var(--radius-sm); /* Konsisten dengan shape global */
|
||||
border-color: var(--input-border);
|
||||
background-color: var(--input-bg);
|
||||
/* Menggunakan durasi transisi standar kita 0.2s */
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Checkmark (The L-shape) */
|
||||
.rc-checkbox-inner:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
display: table;
|
||||
border: 2px solid #fff;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
transform: rotate(45deg) scale(0);
|
||||
opacity: 0;
|
||||
/* Position adjust untuk 16px box */
|
||||
left: 4.5px;
|
||||
top: 1.5px;
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
transition:
|
||||
all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),
|
||||
opacity 0.1s;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
INTERACTION STATES
|
||||
========================================= */
|
||||
|
||||
/* Hover */
|
||||
.rc-checkbox:hover .rc-checkbox-inner,
|
||||
.rc-checkbox-wrapper:hover .rc-checkbox-inner {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
|
||||
/* Focus Ring */
|
||||
.rc-checkbox-input:focus-visible + .rc-checkbox-inner {
|
||||
border-color: var(--focus-border-color);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
}
|
||||
|
||||
/* Checked State */
|
||||
.rc-checkbox-checked .rc-checkbox-inner {
|
||||
border-color: var(--color-brand-500);
|
||||
background-color: var(--color-brand-500);
|
||||
}
|
||||
|
||||
.rc-checkbox-checked .rc-checkbox-inner:after {
|
||||
transform: rotate(45deg) scale(1);
|
||||
opacity: 1;
|
||||
transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
STATUS MATRIX (Error, Warning, Success, Info)
|
||||
========================================= */
|
||||
|
||||
/* --- DEFAULT --- */
|
||||
.checkbox-status-default .rc-checkbox-inner {
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.checkbox-status-default:hover .rc-checkbox-inner {
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
.checkbox-status-default .rc-checkbox-checked .rc-checkbox-inner {
|
||||
background-color: var(--color-brand-500);
|
||||
border-color: var(--color-brand-500);
|
||||
}
|
||||
.checkbox-status-default .rc-checkbox-input:focus-visible + .rc-checkbox-inner {
|
||||
box-shadow: 0 0 0 3px var(--color-brand-100);
|
||||
}
|
||||
|
||||
/* --- ERROR --- */
|
||||
.checkbox-status-error .rc-checkbox-inner {
|
||||
border-color: var(--color-error-300);
|
||||
}
|
||||
.checkbox-status-error:hover .rc-checkbox-inner {
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
.checkbox-status-error .rc-checkbox-checked .rc-checkbox-inner {
|
||||
background-color: var(--color-error-500);
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
.checkbox-status-error .rc-checkbox-input:focus-visible + .rc-checkbox-inner {
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
}
|
||||
|
||||
/* --- WARNING --- */
|
||||
.checkbox-status-warning .rc-checkbox-inner {
|
||||
border-color: var(--color-warning-300);
|
||||
}
|
||||
.checkbox-status-warning:hover .rc-checkbox-inner {
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.checkbox-status-warning .rc-checkbox-checked .rc-checkbox-inner {
|
||||
background-color: var(--color-warning-500);
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.checkbox-status-warning .rc-checkbox-input:focus-visible + .rc-checkbox-inner {
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
}
|
||||
/* --- SUCCESS --- */
|
||||
.checkbox-status-success .rc-checkbox-inner {
|
||||
border-color: var(--color-success-300);
|
||||
}
|
||||
.checkbox-status-success:hover .rc-checkbox-inner {
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.checkbox-status-success .rc-checkbox-checked .rc-checkbox-inner {
|
||||
background-color: var(--color-success-500);
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.checkbox-status-success .rc-checkbox-input:focus-visible + .rc-checkbox-inner {
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
}
|
||||
|
||||
/* --- INFO --- */
|
||||
.checkbox-status-info .rc-checkbox-inner {
|
||||
border-color: var(--color-info-300);
|
||||
}
|
||||
.checkbox-status-info:hover .rc-checkbox-inner {
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.checkbox-status-info .rc-checkbox-checked .rc-checkbox-inner {
|
||||
background-color: var(--color-info-500);
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.checkbox-status-info .rc-checkbox-input:focus-visible + .rc-checkbox-inner {
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
VARIANT: FILLED
|
||||
========================================= */
|
||||
|
||||
/* --- Default Filled --- */
|
||||
.checkbox-variant-filled .rc-checkbox-inner {
|
||||
background-color: var(--color-gray-50);
|
||||
border-color: var(--input-border); /* Sedikit border agar tetap terlihat di bg putih */
|
||||
}
|
||||
.checkbox-variant-filled:hover .rc-checkbox-inner {
|
||||
background-color: var(--color-gray-100);
|
||||
border-color: var(--input-border-hover);
|
||||
}
|
||||
/* Saat checked, filled beralih ke warna solid brand */
|
||||
.checkbox-variant-filled.checkbox-status-default .rc-checkbox-checked .rc-checkbox-inner {
|
||||
background-color: var(--color-brand-500);
|
||||
border-color: var(--color-brand-500);
|
||||
}
|
||||
|
||||
/* --- Error Filled --- */
|
||||
.checkbox-variant-filled.checkbox-status-error .rc-checkbox-inner {
|
||||
background-color: var(--color-error-50);
|
||||
border-color: var(--color-error-300);
|
||||
}
|
||||
.checkbox-variant-filled.checkbox-status-error:hover .rc-checkbox-inner {
|
||||
background-color: var(--color-error-100);
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
.checkbox-variant-filled.checkbox-status-error .rc-checkbox-checked .rc-checkbox-inner {
|
||||
background-color: var(--color-error-500);
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
|
||||
/* --- Warning Filled --- */
|
||||
.checkbox-variant-filled.checkbox-status-warning .rc-checkbox-inner {
|
||||
background-color: var(--color-warning-50);
|
||||
border-color: var(--color-warning-300);
|
||||
}
|
||||
.checkbox-variant-filled.checkbox-status-warning:hover .rc-checkbox-inner {
|
||||
background-color: var(--color-warning-100);
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
.checkbox-variant-filled.checkbox-status-warning .rc-checkbox-checked .rc-checkbox-inner {
|
||||
background-color: var(--color-warning-500);
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
|
||||
/* --- Success Filled --- */
|
||||
.checkbox-variant-filled.checkbox-status-success .rc-checkbox-inner {
|
||||
background-color: var(--color-success-50);
|
||||
border-color: var(--color-success-300);
|
||||
}
|
||||
.checkbox-variant-filled.checkbox-status-success:hover .rc-checkbox-inner {
|
||||
background-color: var(--color-success-100);
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
.checkbox-variant-filled.checkbox-status-success .rc-checkbox-checked .rc-checkbox-inner {
|
||||
background-color: var(--color-success-500);
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
|
||||
/* --- Info Filled --- */
|
||||
.checkbox-variant-filled.checkbox-status-info .rc-checkbox-inner {
|
||||
background-color: var(--color-info-50);
|
||||
border-color: var(--color-info-300);
|
||||
}
|
||||
.checkbox-variant-filled.checkbox-status-info:hover .rc-checkbox-inner {
|
||||
background-color: var(--color-info-100);
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
.checkbox-variant-filled.checkbox-status-info .rc-checkbox-checked .rc-checkbox-inner {
|
||||
background-color: var(--color-info-500);
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
|
||||
/* Logic Focus untuk Filled (tetap konsisten dengan ring status) */
|
||||
.checkbox-variant-filled .rc-checkbox-input:focus-visible + .rc-checkbox-inner {
|
||||
/* Box shadow akan mengikuti warna status masing-masing dari block STATUS MATRIX di atas */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
DISABLED STATE
|
||||
========================================= */
|
||||
.rc-checkbox-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rc-checkbox-disabled .rc-checkbox-inner {
|
||||
background-color: var(--disabled-bg) !important;
|
||||
border-color: var(--disabled-border) !important;
|
||||
}
|
||||
|
||||
.rc-checkbox-disabled.rc-checkbox-checked .rc-checkbox-inner:after {
|
||||
border-color: var(--disabled-text);
|
||||
}
|
||||
|
||||
.rc-checkbox-disabled .rc-checkbox-input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Print Support */
|
||||
@media print {
|
||||
.rc-checkbox-checked .rc-checkbox-inner {
|
||||
box-shadow: inset 0 0 0 16px var(--color-brand-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,3 +2,4 @@
|
||||
@import './input.style.css';
|
||||
@import './input-number.style.css';
|
||||
@import './textarea.style.css';
|
||||
@import './checkbox.style.css';
|
||||
|
||||
Reference in New Issue
Block a user