2f56ee01b3
- More descriptive name for design system library - Update all imports and configurations - No functional changes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
102 lines
3.1 KiB
SCSS
102 lines
3.1 KiB
SCSS
@import "../../../../../ui-design-system/src/styles/semantic";
|
|
|
|
.carousel-demo {
|
|
padding: $semantic-spacing-layout-lg;
|
|
|
|
.demo-section {
|
|
margin-bottom: $semantic-spacing-section-md;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.section-title {
|
|
font-size: $semantic-typography-font-size-xl;
|
|
font-weight: $semantic-typography-font-weight-semibold;
|
|
line-height: $semantic-typography-line-height-normal;
|
|
color: $semantic-color-text-primary;
|
|
margin-bottom: $semantic-spacing-content-paragraph;
|
|
}
|
|
|
|
.section-description {
|
|
font-size: $semantic-typography-font-size-md;
|
|
font-weight: $semantic-typography-font-weight-normal;
|
|
line-height: $semantic-typography-line-height-relaxed;
|
|
color: $semantic-color-text-secondary;
|
|
margin-bottom: $semantic-spacing-content-paragraph;
|
|
}
|
|
|
|
.carousel-container {
|
|
margin-bottom: $semantic-spacing-layout-lg;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: $semantic-spacing-content-paragraph;
|
|
margin-top: $semantic-spacing-layout-lg;
|
|
}
|
|
|
|
.feature-card {
|
|
background: $semantic-color-surface-container;
|
|
border-radius: 12px;
|
|
padding: $semantic-spacing-content-paragraph;
|
|
border: 1px solid $semantic-color-border-primary;
|
|
|
|
.feature-title {
|
|
font-size: $semantic-typography-font-size-md;
|
|
font-weight: $semantic-typography-font-weight-semibold;
|
|
line-height: $semantic-typography-line-height-normal;
|
|
color: $semantic-color-text-primary;
|
|
margin-bottom: $semantic-spacing-component-sm;
|
|
}
|
|
|
|
.feature-description {
|
|
font-size: $semantic-typography-font-size-sm;
|
|
font-weight: $semantic-typography-font-weight-normal;
|
|
line-height: $semantic-typography-line-height-normal;
|
|
color: $semantic-color-text-secondary;
|
|
margin-bottom: $semantic-spacing-component-md;
|
|
}
|
|
|
|
.feature-example {
|
|
background: $semantic-color-surface-variant;
|
|
border-radius: 8px;
|
|
padding: $semantic-spacing-component-md;
|
|
border: 1px solid $semantic-color-border-secondary;
|
|
|
|
.example-label {
|
|
font-size: $semantic-typography-font-size-xs;
|
|
font-weight: $semantic-typography-font-weight-normal;
|
|
line-height: $semantic-typography-line-height-normal;
|
|
color: $semantic-color-text-tertiary;
|
|
margin-bottom: $semantic-spacing-component-xs;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.example-content {
|
|
font-size: $semantic-typography-font-size-sm;
|
|
font-weight: $semantic-typography-font-weight-normal;
|
|
line-height: $semantic-typography-line-height-normal;
|
|
color: $semantic-color-text-secondary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.code-snippet {
|
|
background: $semantic-color-surface-container;
|
|
border: 1px solid $semantic-color-border-primary;
|
|
border-radius: 8px;
|
|
padding: $semantic-spacing-content-paragraph;
|
|
margin-top: $semantic-spacing-content-paragraph;
|
|
font-family: 'Roboto Mono', monospace;
|
|
font-size: 0.875rem;
|
|
line-height: 1.4;
|
|
color: $semantic-color-text-primary;
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
|