mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
86 lines
2.0 KiB
SCSS
86 lines
2.0 KiB
SCSS
// Blockquote Atoms - Material Design 3 (CSS Module)
|
|
// ==================================================
|
|
// Flat selectors for blockquote styling using M3 tokens
|
|
|
|
// Base blockquote
|
|
.blockquote {
|
|
border-left: 4px solid var(--mat-sys-primary);
|
|
margin: 16px 0;
|
|
padding: 12px 16px;
|
|
background: var(--mat-sys-surface-container-low);
|
|
border-radius: 0 var(--mat-sys-corner-small) var(--mat-sys-corner-small) 0;
|
|
}
|
|
|
|
.blockquote p {
|
|
margin: 0;
|
|
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);
|
|
}
|
|
|
|
.blockquote p + p {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
// Color variants
|
|
.blockquoteSecondary {
|
|
border-left-color: var(--mat-sys-secondary);
|
|
}
|
|
|
|
.blockquoteTertiary {
|
|
border-left-color: var(--mat-sys-tertiary);
|
|
}
|
|
|
|
.blockquoteError {
|
|
border-left-color: var(--mat-sys-error);
|
|
background: color-mix(in srgb, var(--mat-sys-error-container) 30%, var(--mat-sys-surface));
|
|
}
|
|
|
|
.blockquoteSuccess {
|
|
border-left-color: var(--color-success);
|
|
background: var(--color-success-container);
|
|
}
|
|
|
|
.blockquoteWarning {
|
|
border-left-color: var(--color-warning);
|
|
background: var(--color-warning-container);
|
|
}
|
|
|
|
.blockquoteInfo {
|
|
border-left-color: var(--color-info);
|
|
background: var(--color-info-container);
|
|
}
|
|
|
|
// Outlined variant
|
|
.blockquoteOutlined {
|
|
background: transparent;
|
|
border: 1px solid var(--mat-sys-outline-variant);
|
|
border-left: 4px solid var(--mat-sys-primary);
|
|
}
|
|
|
|
// Citation/source
|
|
.blockquoteCite {
|
|
display: block;
|
|
margin-top: 8px;
|
|
font-family: var(--mat-sys-body-small-font);
|
|
font-size: var(--mat-sys-body-small-size);
|
|
color: var(--mat-sys-on-surface-variant);
|
|
font-style: italic;
|
|
}
|
|
|
|
.blockquoteCite::before {
|
|
content: '— ';
|
|
}
|
|
|
|
// Large quote variant
|
|
.blockquoteLarge {
|
|
padding: 24px;
|
|
}
|
|
|
|
.blockquoteLarge p {
|
|
font-family: var(--mat-sys-headline-small-font);
|
|
font-size: var(--mat-sys-headline-small-size);
|
|
line-height: var(--mat-sys-headline-small-line-height);
|
|
}
|