- /deep/ is deprecated and being removed from Chrome
- >>> is semantically invalid in a stylesheet
- sass will no longer support either in any version of sass
-> use ::ng-deep in emulated shadow DOM mode
Because the deep combinator is deprecated in the CSS spec,
`/deep/`, `>>>` and `::ng-deep` are also deprecated in emulated shadow DOM mode
and will be removed in the future.
see https://www.chromestatus.com/features/6750456638341120
This commit was worked on by a number of people including
@filipesilva, @gkalpak and @wardbell. It contains changes that:
* remove unused files,
* fix the bootstrap approach to ensure that bootstrap is in the correct Zone
* fix unclosed code-example tags
* replace use of "we" with "you"
* remove broken dual router example
Related to angular/angular.io#3541
Only one h1 is allowed per document.
(Also took the opportunity to remove unnecessary blank lines from these
docs, and a bit of general tidying.)
Closes#16193
* fix(aio): allow code blocks to clear floated images
Previously the negative margin on the code headings were causing
floated images to overlay the start of a code block. Now all code block
successfully clear all floated elements.
* feat(aio): add a `.clear` class for clearing floating images
* fix(aio): tidy up image styles
The css rules for `img.right` and `img.left` allow authors easy
access to floating an image on the left or right, respectively.
The `.image-display` rule which was always found on a figure
has been simplified so that all figures have this styling. It is very
unlikely that a figure will be used outside the content area; and
at this time it seems like `figure` is as good an indicator that we
want this kind of styling as anything.
Now that images are all tagged with width and height values, we cannot
assume to modify these dimensions via CSS as it can cause the image to
lose its correct proportions. Until we find a better solition we must set
`height` to `auto` when the screen width is below 1300px to ensure that
these images maintain their proportions as they get shrunk to fit.
* docs(aio): general tidy up of image HTML in guides
Previously, the guides have a lot of inline image styling and unnecessary
use of the `image-display` css class.
Images over 700px are problematic for guide docs, so those have been given
specific widths and associated heights.
* docs(aio): use correct anchor for "back to the top" link
The `#toc` anchor does not work when the page is
wide enough that the TOC is floating to the side.
* build(aio): add `#top-of-page` to path variants for link checking
Since the `#top-of-page` is outside the rendered docs
the `checkAnchorLinks` processor doesn't find them
as valid targets for links.
Adding them as a `pathVariant` solves this problem
but will still catch links to docs that do not actually exist.
* fix(aio): ensure that headings clear floated images
* fix(aio): do not force live-example embedded image to 100% size
This made them look too big, generally. Leaving them with no size means
that they will look reasonable in large viewports and switch to 100% width
in narrow viewports.
Because:
1. `docs` feels like a "top level" page, similar to `features`, `resources`, `events` etc.
2. This enables the ServiceWorker to pre-fetch/cache the document (similar to what happens with all
other direct children of `content/docs/`), without the need for special-casing it in
`ngsw-manifest.json`.
Victor Berchet
Alex Xu
Georgios Kalpakas
Kapunahele Wong
Mark Amery
Ward Bell
Shefali Sinha
Dan Lipsitt
David Herges
Trotyl Yu
Chuck Jazdzewski
Stefanie Fluin
Jesús Rodríguez
Peter Bacon Darwin
Jason Hodges
aravindfz
Souvik Basu
Will Howell