2a28a8abbd
🎯 Major Achievements: - Standardized 193+ SCSS imports across all libraries - Created 12 independent Git repositories with clean submodule structure - Eliminated relative path dependencies for true library portability - Added comprehensive consumer integration documentation 📦 Libraries Successfully Published: • ui-design-system (foundation) • ui-essentials (components) • shared-utils (utilities) • auth-client (authentication) • ui-landing-pages (marketing components) • ui-code-display (syntax highlighting) • ui-accessibility (WCAG compliance) • hcl-studio (color management) • ui-animations (CSS animations) • ui-backgrounds (background effects) • ui-font-manager (typography) • ui-data-utils (data manipulation) 🔧 Technical Improvements: - All SCSS imports now use standardized 'ui-design-system/' paths - Libraries work independently as Git submodules - Consumer projects can selectively include only needed libraries - Professional Git history with initial commits for each library - Updated integration guides with step-by-step workflows 📋 Documentation Added: - CONSUMER_INTEGRATION_GUIDE.md - Complete setup instructions - Updated SUBMODULE_INTEGRATION_GUIDE.md - Enhanced with dependency info - Library-specific README files for all repositories 🚀 Ready for Production: - All libraries pushed to https://git.sky-ai.com/jules/* - Clean separation of concerns across library boundaries - Independent versioning and release cycles possible - Optimal structure for LLM analysis and maintenance This completes the monorepo-to-submodule transformation, making the SSuite library ecosystem ready for professional distribution and consumption. 🤖 Generated with Claude Code (https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
378 lines
9.8 KiB
SCSS
378 lines
9.8 KiB
SCSS
@use 'ui-design-system/src/styles/semantic/index' as *;
|
|
|
|
.ui-lp-timeline {
|
|
padding: $semantic-spacing-layout-section-lg 0;
|
|
|
|
&__header {
|
|
text-align: center;
|
|
margin-bottom: $semantic-spacing-layout-section-md;
|
|
}
|
|
|
|
&__title {
|
|
font-family: map-get($semantic-typography-heading-h2, font-family);
|
|
font-size: map-get($semantic-typography-heading-h2, font-size);
|
|
font-weight: map-get($semantic-typography-heading-h2, font-weight);
|
|
line-height: map-get($semantic-typography-heading-h2, line-height);
|
|
color: $semantic-color-text-primary;
|
|
margin-bottom: $semantic-spacing-content-heading;
|
|
}
|
|
|
|
&__subtitle {
|
|
font-family: map-get($semantic-typography-body-large, font-family);
|
|
font-size: map-get($semantic-typography-body-large, font-size);
|
|
font-weight: map-get($semantic-typography-body-large, font-weight);
|
|
line-height: map-get($semantic-typography-body-large, line-height);
|
|
color: $semantic-color-text-secondary;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&__container {
|
|
position: relative;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
// Vertical Timeline (Default)
|
|
&--vertical {
|
|
.ui-lp-timeline__line {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: $semantic-color-border-subtle;
|
|
}
|
|
|
|
.ui-lp-timeline__items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $semantic-spacing-layout-section-sm;
|
|
}
|
|
|
|
.ui-lp-timeline__item {
|
|
position: relative;
|
|
padding-left: 60px;
|
|
}
|
|
|
|
.ui-lp-timeline__marker {
|
|
position: absolute;
|
|
left: 0;
|
|
top: $semantic-spacing-component-sm;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background: $semantic-color-surface-primary;
|
|
border: 2px solid $semantic-color-border-subtle;
|
|
z-index: $semantic-z-index-tooltip;
|
|
}
|
|
|
|
.ui-lp-timeline__content {
|
|
background: $semantic-color-surface-elevated;
|
|
border-radius: $semantic-border-card-radius;
|
|
padding: $semantic-spacing-component-lg;
|
|
box-shadow: $semantic-shadow-card-rest;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -10px;
|
|
top: 20px;
|
|
width: 0;
|
|
height: 0;
|
|
border: 10px solid transparent;
|
|
border-right-color: $semantic-color-surface-elevated;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Horizontal Timeline
|
|
&--horizontal {
|
|
.ui-lp-timeline__line {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 20px;
|
|
height: 2px;
|
|
background: $semantic-color-border-subtle;
|
|
}
|
|
|
|
.ui-lp-timeline__items {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: $semantic-spacing-component-xl;
|
|
}
|
|
|
|
.ui-lp-timeline__item {
|
|
position: relative;
|
|
padding-top: 60px;
|
|
}
|
|
|
|
.ui-lp-timeline__marker {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background: $semantic-color-surface-primary;
|
|
border: 2px solid $semantic-color-border-subtle;
|
|
z-index: $semantic-z-index-tooltip;
|
|
}
|
|
|
|
.ui-lp-timeline__content {
|
|
background: $semantic-color-surface-elevated;
|
|
border-radius: $semantic-border-card-radius;
|
|
padding: $semantic-spacing-component-lg;
|
|
box-shadow: $semantic-shadow-card-rest;
|
|
text-align: center;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: -10px;
|
|
transform: translateX(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border: 10px solid transparent;
|
|
border-bottom-color: $semantic-color-surface-elevated;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Status Variants
|
|
&__item {
|
|
&--completed {
|
|
.ui-lp-timeline__marker {
|
|
background: $semantic-color-success;
|
|
border-color: $semantic-color-success;
|
|
color: $semantic-color-on-primary;
|
|
}
|
|
|
|
.ui-lp-timeline__item-title {
|
|
color: $semantic-color-text-primary;
|
|
}
|
|
}
|
|
|
|
&--current {
|
|
.ui-lp-timeline__marker {
|
|
background: $semantic-color-primary;
|
|
border-color: $semantic-color-primary;
|
|
color: $semantic-color-on-primary;
|
|
box-shadow: 0 0 0 4px rgba($semantic-color-primary, 0.2);
|
|
}
|
|
|
|
.ui-lp-timeline__content {
|
|
border: 2px solid $semantic-color-primary;
|
|
}
|
|
|
|
.ui-lp-timeline__item-title {
|
|
color: $semantic-color-primary;
|
|
}
|
|
}
|
|
|
|
&--upcoming {
|
|
.ui-lp-timeline__marker {
|
|
background: $semantic-color-surface-primary;
|
|
border-color: $semantic-color-border-subtle;
|
|
color: $semantic-color-text-secondary;
|
|
}
|
|
|
|
.ui-lp-timeline__item-title {
|
|
color: $semantic-color-text-secondary;
|
|
}
|
|
|
|
.ui-lp-timeline__description {
|
|
opacity: $semantic-opacity-subtle;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
&__icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
&__date {
|
|
font-family: map-get($semantic-typography-body-small, font-family);
|
|
font-size: map-get($semantic-typography-body-small, font-size);
|
|
font-weight: 600;
|
|
line-height: map-get($semantic-typography-body-small, line-height);
|
|
color: $semantic-color-primary;
|
|
margin-bottom: $semantic-spacing-component-sm;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
&__item-title {
|
|
font-family: map-get($semantic-typography-heading-h4, font-family);
|
|
font-size: map-get($semantic-typography-heading-h4, font-size);
|
|
font-weight: map-get($semantic-typography-heading-h4, font-weight);
|
|
line-height: map-get($semantic-typography-heading-h4, line-height);
|
|
color: $semantic-color-text-primary;
|
|
margin: 0 0 $semantic-spacing-component-sm 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $semantic-spacing-component-sm;
|
|
}
|
|
|
|
&__badge {
|
|
font-family: map-get($semantic-typography-body-small, font-family);
|
|
font-size: map-get($semantic-typography-body-small, font-size);
|
|
font-weight: 600;
|
|
line-height: map-get($semantic-typography-body-small, line-height);
|
|
background: $semantic-color-primary;
|
|
color: $semantic-color-on-primary;
|
|
padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
|
|
border-radius: 9999px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
&__description {
|
|
font-family: map-get($semantic-typography-body-medium, font-family);
|
|
font-size: map-get($semantic-typography-body-medium, font-size);
|
|
font-weight: map-get($semantic-typography-body-medium, font-weight);
|
|
line-height: map-get($semantic-typography-body-medium, line-height);
|
|
color: $semantic-color-text-secondary;
|
|
margin: 0;
|
|
}
|
|
|
|
&__empty {
|
|
text-align: center;
|
|
padding: $semantic-spacing-layout-section-sm 0;
|
|
|
|
p {
|
|
font-family: map-get($semantic-typography-body-medium, font-family);
|
|
font-size: map-get($semantic-typography-body-medium, font-size);
|
|
font-weight: map-get($semantic-typography-body-medium, font-weight);
|
|
line-height: map-get($semantic-typography-body-medium, line-height);
|
|
color: $semantic-color-text-secondary;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// Theme Variants
|
|
&--minimal {
|
|
.ui-lp-timeline__content {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border: 1px solid $semantic-color-border-subtle;
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.ui-lp-timeline__marker {
|
|
background: $semantic-color-surface-primary;
|
|
box-shadow: $semantic-shadow-card-rest;
|
|
}
|
|
}
|
|
|
|
&--connected {
|
|
.ui-lp-timeline__line {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
$semantic-color-primary,
|
|
$semantic-color-secondary
|
|
);
|
|
}
|
|
|
|
&.ui-lp-timeline--horizontal .ui-lp-timeline__line {
|
|
background: linear-gradient(
|
|
to right,
|
|
$semantic-color-primary,
|
|
$semantic-color-secondary
|
|
);
|
|
}
|
|
}
|
|
|
|
// Responsive Design
|
|
@media (max-width: $semantic-breakpoint-md - 1) {
|
|
&__title {
|
|
font-family: map-get($semantic-typography-heading-h3, font-family);
|
|
font-size: map-get($semantic-typography-heading-h3, font-size);
|
|
font-weight: map-get($semantic-typography-heading-h3, font-weight);
|
|
line-height: map-get($semantic-typography-heading-h3, line-height);
|
|
}
|
|
|
|
&--horizontal {
|
|
.ui-lp-timeline__items {
|
|
grid-template-columns: 1fr;
|
|
gap: $semantic-spacing-component-lg;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
padding: $semantic-spacing-component-md;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $semantic-breakpoint-sm - 1) {
|
|
&--vertical {
|
|
.ui-lp-timeline__line {
|
|
left: 15px;
|
|
}
|
|
|
|
.ui-lp-timeline__item {
|
|
padding-left: 50px;
|
|
}
|
|
|
|
.ui-lp-timeline__marker {
|
|
width: 30px;
|
|
height: 30px;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
&--horizontal {
|
|
.ui-lp-timeline__marker {
|
|
width: 30px;
|
|
height: 30px;
|
|
top: 0;
|
|
}
|
|
|
|
.ui-lp-timeline__item {
|
|
padding-top: 50px;
|
|
}
|
|
}
|
|
|
|
&__item-title {
|
|
font-family: map-get($semantic-typography-heading-h5, font-family);
|
|
font-size: map-get($semantic-typography-heading-h5, font-size);
|
|
font-weight: map-get($semantic-typography-heading-h5, font-weight);
|
|
line-height: map-get($semantic-typography-heading-h5, line-height);
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: $semantic-spacing-component-xs;
|
|
}
|
|
|
|
&__icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
} |