mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
1ba50caefc
The example viewer has some `::ng-deep` styles that are used to reset global styles that leak into the live examples. It works by applying a style like `.docs-example-viewer-preview * {all: revert;}`.
The problem with this is that depending on when the first example is rendered, the styles will be lower or higher in the cascade, thus making the reset unreliable. Furthermore, it can affect structural styles from the CDK which intentionally have low specificity.
These changes move the resets into the global stylesheet to make them more predictable.
98 lines
2.1 KiB
SCSS
98 lines
2.1 KiB
SCSS
:host {
|
|
.docs-example-viewer-preview {
|
|
.docs-dark-mode & {
|
|
color: var(--primary-contrast);
|
|
background: var(--gray-900);
|
|
}
|
|
@media screen and (prefers-color-scheme: dark) {
|
|
color: var(--primary-contrast);
|
|
background: var(--gray-900);
|
|
}
|
|
.docs-light-mode & {
|
|
background: var(--page-background);
|
|
}
|
|
}
|
|
}
|
|
|
|
.docs-example-viewer {
|
|
border: 1px solid var(--senary-contrast);
|
|
border-radius: 0.25rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Example viewer header
|
|
.docs-example-viewer-actions {
|
|
background: var(--subtle-purple);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
border-bottom: 1px solid var(--senary-contrast);
|
|
transition: background 0.3s ease, border-color 0.3s ease;
|
|
padding-inline-end: 0.65rem;
|
|
font-family: var(--inter-tight-font);
|
|
height: 3rem;
|
|
|
|
mat-tab-group {
|
|
max-width: calc(100% - 140px);
|
|
}
|
|
|
|
span:first-of-type {
|
|
background-image: var(--purple-to-blue-horizontal-gradient);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
|
|
padding: 0.7rem 1.1rem;
|
|
font-size: 0.875rem;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 1.4rem;
|
|
letter-spacing: -0.00875rem;
|
|
margin: 0;
|
|
word-wrap: break-word;
|
|
width: fit-content;
|
|
}
|
|
|
|
.docs-example-viewer-icons {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
|
|
a,
|
|
button {
|
|
padding: 0;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
height: 24px;
|
|
width: 24px;
|
|
color: var(--gray-400);
|
|
|
|
path {
|
|
transition: fill 0.3s ease;
|
|
}
|
|
|
|
svg {
|
|
fill: currentColor;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--tertiary-contrast);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Example viewer code
|
|
.docs-example-viewer-code-wrapper {
|
|
position: relative;
|
|
font-size: 0.875rem;
|
|
// TODO: only show this if there is a preview
|
|
// border-block-end: 1px solid var(--senary-contrast);
|
|
transition: border-color 0.3s ease;
|
|
container: viewerblock / inline-size;
|
|
background-color: var(--octonary-contrast);
|
|
|
|
button[docs-copy-source-code] {
|
|
top: 0.31rem;
|
|
}
|
|
}
|