Previously, names of CLI commands that also happened to be keywords were
shown in black color in the code block demonstrating the command's
usage. This worked fine when in light mode (where the code block
background is white) but not in the recently introduced dark mode (where
the code block background is dark gray).
This commit fixes this by ensuring the `.kwd` token color is inherited
from its parent (which has an appropriate color for the current theme).
Previously, the `.kwd` token was reset to its initial value (which is
`black` regardless of the theme).
**Before:** ![CLI pages keyword before][1]
**After:** ![cli-pages-keyword after][2]
[1]: https://user-images.githubusercontent.com/8604205/126073803-af317f0c-d04f-4c3a-9a83-e92541d7dd5a.png
[2]: https://user-images.githubusercontent.com/8604205/126073806-1d57e3ed-90b1-4735-ae2a-d0a39862bb95.png
PR Close#42889
Previously, if there was more content than what would horizontally fit
in the main content area, it would overflow to the right and overlap
with the Table of Contents (ToC).
This was accidentally introduced in #42787.
This commit fixes it by ensuring that the main content area will not
overlap with ToC and the necessary space for the ToC will be reserved
using `margin` (instead of `padding`, which contributes to the element's
size).
Fixes#42867
PR Close#42884
Previously, on narrow pages where the sidenav was in `over` mode, the
sidenav's backdrop only covered the main docs content but not the
floating Table of Contents (ToC) on the right. This was inconsistent and
confusing to the user, because they could interact with the ToC and
scroll to different area of the main content while the sidenav and
backdrop were still covering the content.
This commit fixes it by ensuring the sidenav backdrop covers both the
main content and the floating ToC (when present).
Fixes#42778
PR Close#42787
make sure that the top-menu links don't get overlapped by
the search input, regardless on the browser's font-size and
the window's width
make also sure that the header's logo does not overlap the search
input on narrow windows, again regardless on the browser's font-size
PR Close#42753
Previously, the color of `<summary>` elements was hard-coded to `black`.
This did not work well on the dark theme, where the background color of
the page is also very dark.
This commit fixes it by removing the explicit color style, thus letting
`<summary>` elements inherit the color of their container.
Closes#42616
PR Close#42620
PR #41129 reorganized the SCSS files of the angular.io app moving most
of them in sub-directories. Due to incorrectly resolved merge conflicts
for PRs targeting the SCSS files around that time, we ended up with
duplicate style files for `<code>` elements:
- `styles/2-modules/_code.scss`
- `styles/2-modules/code/_code.scss` +
`styles/2-modules/code/_code-theme.scss`
This commit gets rid of the extra file (`styles/2-modules/_code.scss`)
and ports any changes from it to the correct files inside the `code/`
sub-directory.
PR Close#42620
This commit changes the anchor elements used for external links to
`MatIconButton`s. While the appearance remains the same (with the
exception of hover/focus styles), this better aligns the styling of
external link icons with other nearby icon buttons (i.e. the theme
toggle) and alows as to simplify the CSS for external links (since much
of their styling is handled by Angular Material).
PR Close#42584
Since we now use SVG for external link icons, there are no `<img>`
elements inside the anchor elements. So, the CSS rule does not match any
element and can be removed.
PR Close#42584
in order to have a consistent line-height between list items containing
text and list items containing links the anchors should inherit the list
item's line-height
PR Close#42572
make sure that the width of the sidenav chervon icon is 2.4rem
(this needs to be done using the flex property and not the
width one as that can change in flex containers)
also center chevron icon inside mat-icon container in order to maintain
the correct icon positioning at any font-size
PR Close#42561
Remove the fixed height set on the card elements present in angular.io,
allowing the cards to have a dynamic height derived from their content
and thus removing overflow issues related to the browser's font-size,
make other minor css related adjustments to allow the card to look good
on the different browser's font-size settings
PR Close#42533
This commit adds support for generating pages that document
special Angular elements, such as `ng-content` and `ng-template`,
which have special behavior in Angular but are not directives nor
components.
Resolves#41273
PR Close#41299
This commit adds a popup to angular.io to inform the user about the use
of cookies. Once the user confirms having read the info, the popup will
not be shown on subsequent visits.
This commit is partly based on angular/material.angular.io#988.
Fixes#42209
PR Close#42259
Cleans up AIO's Sass files by:
* Switching them all over to the `@use`-based API from Angular Material.
* Removing the import of the Material theming API in a bunch of places that weren't using it.
* Migrating the new usages of Sass utility functions to the new syntax (e.g. `map.get` vs `map-get`).
* Fixing a few files that were using 4 spaces for indentation instead of 2.
PR Close#42442
This commit removes the `_typography-theme.scss` file that is currently
not used. The file contains a single Sass mixin
(`docs-site-typography-theme()`), which is never called.
PR Close#42396
This commit includes some minor refactorings and style changes as a
follow-up to PR #41129. (The changes were minor enough that didn't
warrant blocking the PR.)
PR Close#42396
I intentionally did not change the font size as discussed in #41196
because the current
font size is already about the same as the normal text size.
Fixes#41196
PR Close#42297
After the changes to the `lang-none` styling in #41335, code snippets marked with
```
language="none" class="code-shell"
```
were being styled with the same foreground and background colours.
It turns out that most of these ought to be marked `language="sh"`
in which case the `code-shell` style became redundant and has been
removed.
Fixes#41984
PR Close#41986
Previously, the max width of the `file-not-found` page was limited to
50rem (800px by default). This allowed little space for showing
potentially helpful search results, which are shown in columns).
This commit increases the max width of the `file-not-found` page to
84rem (1344px by default) to allow search results to be visible without
requiring scrolling. This will not negatively affect UX, because the
page uses a multi-column layout and therefore there will rarely be long
lines of text to scan.
PR Close#41275
Previously, the indentation of code snippets in the "Cheat sheet" guide
was done using `<br>` elements (for line breaks) and ` ` HTML
entities (for space). This was laborious and put the onus on the author
to remember to use these symbols (instead of regular whitespace
characters).
(Discussed in
https://github.com/angular/angular/pull/41051#discussion_r585651621.)
This commit changes the way `<code>` elements are styles inside the
"Cheat sheet" guide to allow using regular whitespace characters in code
snippets. It also changes all `<br>`/` ` occurrences to `\n`/` `
respectively to make code snippets more readable in the source code.
PR Close#41051
