Fix two issues that affected displaying of SVG icons in IE11:
1. All SVG icons except for one appeared empty. This was related how the
CustomIconRegistry re-used the same <div> element to create all
SVG elements.
2. The GitHub and Twitter buttons next to the search bar were not sized
properly.
Fixes#37847
PR Close#38046
This commit removes some duplicate imports of Material themes and
theming-related utilities. While this change does not have any impact on
the size of the generated `styles.css` file, it silences a build warning
pointing to [Avoiding duplicated theming styles][1].
[1]: db4b0cd1bf/guides/duplicate-theming-styles.md
PR Close#37898
As part of angular.io's responsive layout, the menu shown in the top-bar
is collapsed into the sidenav on narrow screens at the point where the
search-bar (on the right side of the top-bar) would overlap with the
menu's nav-items.
Previously, the value used as break-point would work on marketing pages,
where the hamburger button is not shown on wide screens. However, on
docs pages (where the hamburger button is always shown, pushing the menu
further to the right), the search-bar would still overlap the menu
nav-items on some resolutions.
This commit fixes it by raising the screen width threshold at a value
that ensures there is no overlap even on pages where the hamburger
button is visible alongside the top-bar menu.
Fixes#37937
PR Close#37938
As part of angular.io's responsive layout, the following rules are
applied:
- On wide screens, a menu is shown in the top-bar and the sidenav is
shown side-by-side with the docs content.
- On narrow screens, the top-menu is moved from the top-bar to the
sidenav and the sidenav is closed by default and floats over the
content when manually opened.
Previously, the break-points at which the top-menu was shown in the
top-bar and the sidenav was shown side-by-side with the content were the
same (using a single variable).
This commit decouples the two break-points to make it possible to use
different values in the future.
PR Close#37938
Use a Sass variable for the screen width break-point at which the
top-bar hamburger button is hidden/shown. This allows more easily
updating the break-point.
PR Close#37938
This commit moves the contributor hover into the `@media(hover:hover)`
query. This will help to identify if the user's primary input mechanism
can hover over elements.
PR Close#37320
After PR #36601 which added icons to all external links. Documented how this is happening via comments in scss file. For details visit PR #36601
PR Close#37025
Update angular.io in support for #BlackLivesMatter. The PR updates the
styles of the landing page and changes the current survey notification.
PR Close#37409
All migration guides did not have a direct link to access them so added them to the side nav in the section updating to version 9 for direct access, it also helps to add right side nav to these migration guides
Fixes#33582
PR Close#34979
Clicking on a link may take us to an extenal source, which may lead to user leaving angular.io unintentionally.
Added visual cues on external links so that user knows which links are external and which are intenal to angular.io.
Fixes#17620
PR Close#36601
On small screens (e.g. on mobile), the text on some of the buttons in
the About page was truncated. Changed the text size, margin and
padding so that the the whole text is visible on such screens (320px to
480px).
PR Close#36576
there was a typo in _resourcess.scss file there was an extra comma added some spaces too that were needed for proper styling of the code
PR Close#35935
on small mobile screens the top tab bar contains text which was not visible on small screens changed text size, margin and padding so that the text could be contained in these screens (320px to 480px)
PR Close#35935
This commit merges the two `.api-body` style blocks, removing duplicate
styles and re-ordering sub-blocks (to group relevant styles together).
It should not affect styling.
PR Close#31574
In pr #34978 colors were not properly set, if we type wrong url in the browser and we are directed to the 404 page there some text is set to white color which as not visible set it to dark gray for visibility
PR Close#35866
Added additional links which can help user find the things they are
looking for when there are no search results (when searching or on a 404
page).
Note:
This commit increases the main bundle's payload size due to the extra
content of the `aio-search-results` component.
Fixes#31532
PR Close#34978
On home page, image size set to 400px, which make the page not render
properly on devices below the size of 400px width.
Also, when search results were scrolled, they interfered with the top
nav items. Added border at the top of the search results container so
that the results are not visible under the nav items during scrolling.
PR Close#35098
Footer links did not have enough space between them, so lighthouse was
reporting that tap targets are not appropriately sized. Added the
required 8px space between links.
Also updated the margin of group headers accordingly.
Fixes#34901
PR Close#35098
https://angular.io/resources needs to be sturctured to be able to navigate to all resources with improved user experience. A lone scroll bar in this page will not help the reader a great deal in exploring the resources
Fixes#33526
PR Close#34756
On events page the header was not able to take full width when body exceeds viewport width of the screen So made the below body go overflow-x auto and resources page was taking 80% of the width which is okay on desktop but on mobile it should take 100% width put a media quer for it.
Fixes#34163
PR Close#34188
The search input has 50% width of the parent container in a focused
state for the big break point (> 1000px). In this case when window width
is between 1000px and 1115px the search input shrinks from 180 to
~123px. The width of the search input was increased to 80% so that when
focused its width expands from 180 to 196px when window size is 1000px.
Fixes#33305
PR Close#33804
Reference #33259
Removes figures elements as AIO is not typically using captions or image groups where figures would be necessary or appropriate
PR Close#33748
PR#28396 originally addressed an update via issue #23983 to make images more visible with a white background (implementation of gray "lightbox").
This PR implements those styles defined in PR#28396.
PR Close#33259
In 1c3ee4190, the `getting-started` guide/tutorial was renamed to
`start`, but the corresponding CSS class that controls the display of
the top-left hamburger (and it automatically derived based on the URL)
was not updated.
This commit updates the class to ensure that the hamburger is not hidden
when navigating to the getting started guide.
PR Close#32941
- Change margin to the header so that the the label aligns with the header
- Make code in API pages pre-wrap so that you can see the actual text on the screen - helps with issue #27296
- Modified text to be title case in label API to be consistent with rest of app labels
- Removed unused table of contents SCSS file
- TOC SCSS file reorg cleanup
- Soften headers font-weight in API pages
- Make linenums ordered list inside code examples always show as numbers
PR Close#31013
- Make docs cards expand to full width in smaller screen sizes.
- Reduce spacing around card container to match general spacing patterns seen in angular.io.
- Improve SCSS formatting.
PR Close#31576
- Add more spacing to inputs.
- Correct placeholder colors in inputs.
- Add aria label to input for accessibility.
- Clean up layout styles and mobile view.
Fixes#31265
PR Close#31272
Previously, the `search-results` layout was switch from horizontal to
vertical at 480px. Yes, since some search queries can yield more than 5
`.search-area`s, even 600px are too narrow to accomodate a horizontal
layout.
This commit changes the breakpoint at which the layout switches to
vertical from 480px to 600px.
PR Close#31390
Previously, `.search-area` had a default style of `display: flex`, but
it was overriden to `display: block` in media queries for
`max-width: 480px` and `min-width: 600px`. As a result, it only had
`display: flex` between 481px and 599px.
Since no flex layout features are necessary inside `.search-area`, this
commit changes the style to always be `display: block` (i.e. the default
for `div` elements).
PR Close#31390
In #31118, some vendor-specific selectors were combined in one rule-set.
As pointed out in [this comment][1], this would result in the whole
rule-set being ignored by all browsers, since one invalid/unrecognized
selector invalidates the declaration block.
This commit fixes it by defining a separate rule-set per selector. The
list of vendor-specific selectors is also adjusted to better target the
currently supported browsers.
[1]: https://github.com/angular/angular/pull/31118/files#r296923652
PR Close#31252
