5983722793
Added extensive component library with feedback components (empty state, loading spinner, skeleton loader), enhanced form components (autocomplete, date picker, file upload, form field, time picker), navigation components (pagination), and overlay components (backdrop, drawer, modal, overlay container). Updated demo application with comprehensive showcase components and enhanced styling throughout the project. Excluded font files from repository to reduce size. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
152 lines
2.2 KiB
SCSS
152 lines
2.2 KiB
SCSS
.demo-container {
|
|
padding: 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
|
|
h2 {
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.875rem;
|
|
}
|
|
}
|
|
|
|
.demo-section {
|
|
margin-bottom: 3rem;
|
|
|
|
h3 {
|
|
margin-bottom: 1rem;
|
|
font-size: 1.25rem;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.demo-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.demo-item {
|
|
h4 {
|
|
margin-bottom: 0.75rem;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: #6b7280;
|
|
}
|
|
}
|
|
|
|
.demo-interactive {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
padding: 1.5rem;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 0.5rem;
|
|
background: #f9fafb;
|
|
}
|
|
|
|
.demo-output {
|
|
h4 {
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
p {
|
|
color: #6b7280;
|
|
margin-bottom: 0.25rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
.demo-form {
|
|
padding: 1.5rem;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 0.5rem;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.submit-btn, .reset-btn {
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.submit-btn {
|
|
background: #3b82f6;
|
|
color: white;
|
|
border: 1px solid #3b82f6;
|
|
|
|
&:hover:not(:disabled) {
|
|
background: #2563eb;
|
|
border-color: #2563eb;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.reset-btn {
|
|
background: transparent;
|
|
color: #6b7280;
|
|
border: 1px solid #d1d5db;
|
|
|
|
&:hover {
|
|
background: #f3f4f6;
|
|
color: #374151;
|
|
}
|
|
}
|
|
|
|
.form-status {
|
|
background: #f3f4f6;
|
|
padding: 0.75rem;
|
|
border-radius: 0.375rem;
|
|
|
|
p {
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.875rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
pre {
|
|
background: #e5e7eb;
|
|
padding: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.demo-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.demo-interactive {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
} |