mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
b26fe73a91
Ensures the example viewer header displays correctly by keeping the "Show code" button aligned to the right and preventing metadata text from wrapping. Improves layout consistency across documentation examples.
121 lines
2.5 KiB
SCSS
121 lines
2.5 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;
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
padding-inline-start: 1rem;
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
.docs-example-code-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
width: auto;
|
|
|
|
.docs-example-show-code {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
.docs-example-code-block {
|
|
overflow: auto;
|
|
// Roughly 20 lines of code.
|
|
max-height: 35rem;
|
|
}
|
|
}
|