mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
115 lines
3.6 KiB
SCSS
115 lines
3.6 KiB
SCSS
// Title Atoms - Material Design 3 (CSS Module)
|
|
// =============================================
|
|
// Flat selectors for page and component headings using M3 typography tokens
|
|
|
|
// Page title (headline-large)
|
|
.pageTitle {
|
|
font-family: var(--mat-sys-headline-large-font);
|
|
font-size: var(--mat-sys-headline-large-size);
|
|
font-weight: var(--mat-sys-headline-large-weight);
|
|
line-height: var(--mat-sys-headline-large-line-height);
|
|
letter-spacing: var(--mat-sys-headline-large-tracking);
|
|
color: var(--mat-sys-on-surface);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
// Page subtitle
|
|
.pageSubtitle {
|
|
font-family: var(--mat-sys-body-large-font);
|
|
font-size: var(--mat-sys-body-large-size);
|
|
line-height: var(--mat-sys-body-large-line-height);
|
|
color: var(--mat-sys-on-surface-variant);
|
|
margin: 0 0 24px;
|
|
}
|
|
|
|
// Card title (title-large)
|
|
.cardTitle {
|
|
font-family: var(--mat-sys-title-large-font);
|
|
font-size: var(--mat-sys-title-large-size);
|
|
font-weight: var(--mat-sys-title-large-weight);
|
|
line-height: var(--mat-sys-title-large-line-height);
|
|
letter-spacing: var(--mat-sys-title-large-tracking);
|
|
color: var(--mat-sys-on-surface);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.cardTitleTruncate {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
// Card subtitle
|
|
.cardSubtitle {
|
|
font-family: var(--mat-sys-body-medium-font);
|
|
font-size: var(--mat-sys-body-medium-size);
|
|
line-height: var(--mat-sys-body-medium-line-height);
|
|
color: var(--mat-sys-on-surface-variant);
|
|
margin: 0;
|
|
}
|
|
|
|
// Display titles (for hero sections)
|
|
.displayTitle {
|
|
font-family: var(--mat-sys-display-large-font);
|
|
font-size: var(--mat-sys-display-large-size);
|
|
font-weight: var(--mat-sys-display-large-weight);
|
|
line-height: var(--mat-sys-display-large-line-height);
|
|
letter-spacing: var(--mat-sys-display-large-tracking);
|
|
color: var(--mat-sys-on-surface);
|
|
margin: 0;
|
|
}
|
|
|
|
.displayTitleMedium {
|
|
font-family: var(--mat-sys-display-medium-font);
|
|
font-size: var(--mat-sys-display-medium-size);
|
|
font-weight: var(--mat-sys-display-medium-weight);
|
|
line-height: var(--mat-sys-display-medium-line-height);
|
|
letter-spacing: var(--mat-sys-display-medium-tracking);
|
|
}
|
|
|
|
.displayTitleSmall {
|
|
font-family: var(--mat-sys-display-small-font);
|
|
font-size: var(--mat-sys-display-small-size);
|
|
font-weight: var(--mat-sys-display-small-weight);
|
|
line-height: var(--mat-sys-display-small-line-height);
|
|
letter-spacing: var(--mat-sys-display-small-tracking);
|
|
}
|
|
|
|
// Headline titles
|
|
.headline {
|
|
font-family: var(--mat-sys-headline-medium-font);
|
|
font-size: var(--mat-sys-headline-medium-size);
|
|
font-weight: var(--mat-sys-headline-medium-weight);
|
|
line-height: var(--mat-sys-headline-medium-line-height);
|
|
letter-spacing: var(--mat-sys-headline-medium-tracking);
|
|
color: var(--mat-sys-on-surface);
|
|
margin: 0;
|
|
}
|
|
|
|
.headlineSmall {
|
|
font-family: var(--mat-sys-headline-small-font);
|
|
font-size: var(--mat-sys-headline-small-size);
|
|
font-weight: var(--mat-sys-headline-small-weight);
|
|
line-height: var(--mat-sys-headline-small-line-height);
|
|
letter-spacing: var(--mat-sys-headline-small-tracking);
|
|
}
|
|
|
|
// Title (for medium emphasis)
|
|
.title {
|
|
font-family: var(--mat-sys-title-medium-font);
|
|
font-size: var(--mat-sys-title-medium-size);
|
|
font-weight: var(--mat-sys-title-medium-weight);
|
|
line-height: var(--mat-sys-title-medium-line-height);
|
|
letter-spacing: var(--mat-sys-title-medium-tracking);
|
|
color: var(--mat-sys-on-surface);
|
|
margin: 0;
|
|
}
|
|
|
|
.titleSmall {
|
|
font-family: var(--mat-sys-title-small-font);
|
|
font-size: var(--mat-sys-title-small-size);
|
|
font-weight: var(--mat-sys-title-small-weight);
|
|
line-height: var(--mat-sys-title-small-line-height);
|
|
letter-spacing: var(--mat-sys-title-small-tracking);
|
|
}
|