mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
2d8635d29d
To increase the ease of development we are moving @angular/docs into the adev directory within this repo. While we are doing this to improve our development experience in the short term, efforts are also in place to maintain a division between this @angular/docs (shared) code and adev itself, so that it can be extracted back out in the future when components is ready to leverage it as well. PR Close #57132
72 lines
1.6 KiB
SCSS
72 lines
1.6 KiB
SCSS
// Callout
|
|
|
|
@mixin docs-callout() {
|
|
.docs-callout {
|
|
// Default theme is purple to blue
|
|
--callout-theme: var(--purple-to-blue-horizontal-gradient);
|
|
border-width: 0;
|
|
border-block-start-width: 2px;
|
|
border-block-end-width: 1px;
|
|
border-style: solid;
|
|
margin-block: 1.5rem;
|
|
border-image: var(--callout-theme) 1;
|
|
position: relative;
|
|
|
|
// Removes bottom line if followed by another callout
|
|
// Prevents too many lines/visual noise
|
|
&:has(+ .docs-callout) {
|
|
border-block-end-width: 0;
|
|
}
|
|
|
|
&::before {
|
|
font-family: var(--icons);
|
|
// content: icon is defined in each docs-alert class below...
|
|
position: absolute;
|
|
right: 0;
|
|
margin-top: 1.35rem;
|
|
color: var(--alert-accent);
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
// Callout heading
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
background-image: var(--callout-theme);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
max-width: fit-content;
|
|
}
|
|
}
|
|
.docs-viewer .docs-callout h3 {
|
|
font-size: 0.875rem;
|
|
margin-block: 1.6rem;
|
|
}
|
|
|
|
.docs-callout-helpful {
|
|
--callout-theme: var(--purple-to-blue-horizontal-gradient);
|
|
&::before {
|
|
content: 'check_circle';
|
|
color: var(--bright-blue);
|
|
}
|
|
}
|
|
|
|
.docs-callout-critical {
|
|
--callout-theme: var(--red-to-orange-horizontal-gradient);
|
|
&::before {
|
|
content: 'warning';
|
|
color: var(--orange-red);
|
|
}
|
|
}
|
|
|
|
.docs-callout-important {
|
|
--callout-theme: var(--pink-to-purple-horizontal-gradient);
|
|
&::before {
|
|
content: 'priority_high';
|
|
color: var(--electric-violet);
|
|
}
|
|
}
|
|
}
|