Add comprehensive component library and demo application
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>
This commit is contained in:
skyai_dev
@@ -0,0 +1,244 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-wrapper {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden; // Prevent horizontal overflow
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-xl;
|
||||
width: 100%;
|
||||
overflow-x: hidden; // Prevent horizontal overflow
|
||||
|
||||
h2 {
|
||||
margin-bottom: $semantic-spacing-layout-md;
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: $semantic-spacing-component-lg;
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: $semantic-spacing-component-sm;
|
||||
color: $semantic-color-text-secondary;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-containers-showcase {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $semantic-spacing-component-lg;
|
||||
margin-bottom: $semantic-spacing-layout-lg;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden; // Prevent horizontal overflow
|
||||
box-sizing: border-box;
|
||||
|
||||
// Ensure all child containers are properly constrained
|
||||
.ui-container {
|
||||
max-width: min(100%, var(--container-max-width, 100%));
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-container-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; // Center the containers
|
||||
overflow-x: hidden; // Prevent horizontal overflow
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-size: 0.875rem;
|
||||
color: $semantic-color-text-secondary;
|
||||
margin-bottom: $semantic-spacing-component-xs;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.demo-container-outline {
|
||||
border: 2px dashed $semantic-color-border-subtle;
|
||||
background: rgba($semantic-color-container-primary, 0.05);
|
||||
max-width: 100%; // Ensure containers don't overflow their parent
|
||||
box-sizing: border-box; // Include padding and border in width calculation
|
||||
margin: 0 auto; // Center the container
|
||||
position: relative; // For proper positioning context
|
||||
|
||||
// Override container component's auto margins that might be causing issues
|
||||
&.ui-container {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
}
|
||||
|
||||
&.demo-container-tall {
|
||||
min-height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
color: $semantic-color-text-primary;
|
||||
text-align: center;
|
||||
padding: $semantic-spacing-component-sm;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-wrap: break-word; // Handle long text properly
|
||||
word-wrap: break-word;
|
||||
|
||||
&.hero-content {
|
||||
h2 {
|
||||
margin-bottom: $semantic-spacing-component-sm;
|
||||
color: $semantic-color-text-primary;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $semantic-color-text-secondary;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-variant-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: $semantic-spacing-grid-gap-lg;
|
||||
}
|
||||
|
||||
.demo-variant-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.demo-flex-item {
|
||||
background: $semantic-color-container-secondary;
|
||||
color: $semantic-color-on-container-secondary;
|
||||
padding: $semantic-spacing-component-sm;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
width: 100%; // Ensure flex items take full width
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0; // Prevent shrinking
|
||||
}
|
||||
|
||||
.demo-grid-item {
|
||||
background: $semantic-color-container-tertiary;
|
||||
color: $semantic-color-on-container-tertiary;
|
||||
padding: $semantic-spacing-component-sm;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.demo-paragraph {
|
||||
margin-bottom: $semantic-spacing-component-sm;
|
||||
color: $semantic-color-text-primary;
|
||||
line-height: 1.5;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-wide-content {
|
||||
white-space: nowrap;
|
||||
color: $semantic-color-text-primary;
|
||||
padding: $semantic-spacing-component-sm;
|
||||
}
|
||||
|
||||
// Feature cards styling
|
||||
:host ::ng-deep {
|
||||
.demo-section ui-container[variant="card"] {
|
||||
h3 {
|
||||
margin-bottom: $semantic-spacing-component-sm;
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $semantic-color-text-secondary;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Additional container demo specific styles
|
||||
.demo-containers-showcase {
|
||||
// Force all containers to behave properly
|
||||
.ui-container {
|
||||
// Ensure containers don't push beyond boundaries
|
||||
position: relative;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
// Size-specific constraints to prevent overflow
|
||||
.ui-container--xs { --container-max-width: 475px; }
|
||||
.ui-container--sm { --container-max-width: 640px; }
|
||||
.ui-container--md { --container-max-width: 768px; }
|
||||
.ui-container--lg { --container-max-width: 1024px; }
|
||||
.ui-container--xl { --container-max-width: 1280px; }
|
||||
.ui-container--2xl { --container-max-width: 1536px; }
|
||||
.ui-container--full { --container-max-width: 100%; }
|
||||
|
||||
// Fix flex container alignment issues
|
||||
.ui-container--flex {
|
||||
align-items: stretch; // Default to stretch for consistent layout
|
||||
|
||||
&:not(.ui-container--flex-center):not(.ui-container--flex-start):not(.ui-container--flex-end) {
|
||||
align-items: stretch; // Force default alignment for flex containers
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
// Force smaller containers on tablet
|
||||
.demo-containers-showcase .ui-container {
|
||||
max-width: min(100%, var(--container-max-width, 100%)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.demo-variant-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: $semantic-spacing-component-lg;
|
||||
}
|
||||
|
||||
.demo-containers-showcase {
|
||||
gap: $semantic-spacing-component-md;
|
||||
|
||||
// Force all containers to be full width on mobile
|
||||
.ui-container {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-wrapper {
|
||||
padding: $semantic-spacing-component-md;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user