On larger screens the top-bar has a height of 64px. On screens smaller
than 600px, the top-bar has a height of 56px. As a result, the sidenav
should have a top position of 56px on screens smaller than 600px and
64px on other screens.
Previously, the style setting the top position to 56px was tied to the
presence of the `.collapsed` class, which depends on whether the sidenav
is docked or not. The change from docked to collapsed sidenav, however,
happens at 992px. As a result, the sidenav had an incorrect top position
(56px instead of 64px) on screens between 600px and 991px.
This commit fixes this by ensuring the change of the top position for
the sidenav happens at 600px.
PR Close#40802
Both `CodeExampleComponent` and `CodeTabsComponent` components receive
some code via content projection, grab the projected content and pass it
through to a `CodeComponent` instance for formatting and displaying.
Previously, the projected content was kept in the DOM (hidden). This
unnecessarily increased the number of DOM nodes.
This commit fixes this by clearing the projected DOM nodes once their
content has been captured.
PR Close#40802
The CDK has had a service for copying strings to the clipboard. These changes switch
AIO to it, rather than having to maintain a custom solution.
PR Close#40840
Previously, the API list container (in the template of the
`<aio-api-list>` component) had three different CSS classes
(`.api-list-container`, `.docs-content`, `.l-content-small`) that were
all used for styling it. This seemed unnecessary and made it more difficult
to see what styles were applied to the container.
This commit removes the extra classes and consolidates the styles under
the `.api-list-container` class (which was the most descriptive one).
PR Close#40704
This commit ensures that all styles for the API list page (which are
defined in `_api-list.scss`) only apply to elements inside an
`<aio-api-list>` element. This will prevent the styles accidentally
taking effect on a different part of the app.
PR Close#40704
The `.code-anchor` class can be used anywhere where we have code
examples (including API pages and docs guides). Previously, global
styles for `.code-anchor` were defined in `_api-list.scss` (i.e. the
styles from `_api-list.scss` were also applied to `.code-anchor`
elements in other pages/components).
This commit moves the `.code-anchor` styles to `_code.scss`, which
contains other common code-related styles.
PR Close#40704
The `.symbol` CSS class (which is primarily used to denote the type of
API symbols - classes, functions, interfaces, etc.) are used in several
places:
- In the API list page (with the corresponding styles defined in
`_api-list.scss`).
- In search results (with the corresponding styles defined in
`_errors.scss`).
- In error list page (with the corresponding styles defined in
`search-results.scss`).
- In the `<aio-select>` component (with the corresponding styles defined
in `_select-menu.scss`).
Previously, global styles for `.symbol` were defined in `_api-list.scss`
(i.e. the styles from `_api-list.scss` were also applied to `.symbol`
elements in other places/components). Also, some of the SCSS files
mentioned above defined some duplicate styles for `.symbol`.
This commit moves the `.symbol` styles to a new `_api-symbols.scss`
file, which contains common symbol-related styles.
PR Close#40704
This commit removes some styles from `_api-list.scss` that are no longer
used (i.e. either their CSS selectors do not match any element in the
app or they are overridden by other rules).
PR Close#40704
This commit ensures that all styles for the TOC (which are defined in
`_toc.scss`) only apply to elements inside an `<aio-toc>` element. This
will prevent the styles accidentally taking effect on a different part
of the app.
PR Close#40704
This commit ensures that all styles for the select-menu element (which
are defined in `_select-menu.scss`) only apply to elements inside an
`<aio-select>` element. This will prevent the styles accidentally taking
effect on a different part of the app.
PR Close#40704
This commit ensures that all styles for the "Resources" page (which are
defined in `_resources.scss`) only apply to elements inside an
`<aio-resource-list>` element. This will prevent the styles accidentally
taking effect on a different part of the app.
PR Close#40704
This commit removes some styles from `_resources.scss` that are no
longer used (i.e. either their CSS selectors do not match any element in
the app or they are overridden by other rules).
PR Close#40704
This commit removes some styles from `_label.scss` that are no longer
used (i.e. their CSS selectors do not match any element in the app).
PR Close#40704
This commit removes the `_edit-page-cta.scss` file, which is no longer
used (i.e. the rules it contains do not match any element in the app).
PR Close#40704
This commit cleans up the styles in `_details.scss` by merging
together blocks that target the same elements.
It also changes the `summary` selector to `details > summary`, but that
should not make any difference in practice, since `<summary>` elements
always appear as direct childs of `<details>`.
PR Close#40704
This commit ensures that all styles for the contributor list (which are
defined in `_contributor.scss`) only apply to elements inside an
`<aio-contributor-list>` element. This will prevent the styles
accidentally taking effect on a different part of the app.
PR Close#40704
This commit removes some styles from `_contributor.scss` that are no
longer used (i.e. either their CSS selectors do not match any element in
the app or they are overridden by other rules).
PR Close#40704
This commit ensures that all styles for the code examples (which are
defined in `_code.scss`) only apply to elements inside an `<aio-code>`
element. This will prevent the styles accidentally taking effect on a
different part of the app.
PR Close#40704
This commit cleans up the styles in `_code.scss` by merging together
blocks that target the same elements.
It also normalizes the rules targeting Angular Material tabs to use
consistent selectors and use class names instead of tag names.
PR Close#40704
This commit removes some styles from `_code.scss` that are no longer
used (i.e. either their CSS selectors do not match any element in the
app or they are overridden by other rules).
PR Close#40704
Both `<aio-contributor-list>` and `<aio-resource-list>` contain
`.group-buttons` elements. Previously, global styles for
`.group-buttons` were defined in `_contributor.scss` (i.e. the styles
from `_contributor.scss` were also applied to `.group-buttons` in
`<aio-resource-list>`). Also, `_contributor.scss` and `_resources.scss`
defined some duplicate styles for `.group-buttons`.
This commit moves the `.group-buttons` styles to `_buttons.scss`, which
contains common button-related styles.
PR Close#40704
This commit ensures that all styles for the app top-menu (which are
defined in `_top-menu.scss`) only apply to elements inside an
`.app-toolbar` element. This will prevent the styles accidentally taking
effect on a different part of the app.
PR Close#40704
This commit cleans up the styles in `_top-menu.scss` by merging
together blocks that target the same elements.
It also makes similar changes to selectors in `_notification.scss` rules
that override top-menu styles (for consistency).
PR Close#40704
This commit ensures that all styles for the sidenav nav-items (which are
defined in `_sidenav.scss`) only apply to elements inside an
`<aio-nav-item>` element. This will prevent the styles accidentally
taking effect on a different part of the app.
PR Close#40704
This commit cleans up the styles in `_sidenav.scss` by merging
together blocks that target the same elements.
It also applies the equivalent changes in `_notification.scss` rules
that override sidenav styles.
PR Close#40704
This commit removes some styles from `_sidenav.scss` that are no longer
used (i.e. either their CSS selectors do not match any element in the
app or they are overridden by other rules).
PR Close#40704
This commit removes some styles from `_layout-global.scss` that are no
longer used (i.e. either their CSS selectors do not match any element in
the app or they are overridden by other rules).
PR Close#40704
This commit ensures that all styles for the page footer (which are
defined in `_footer.scss`) only apply to elements inside an
`<aio-footer>` element. This will prevent the styles accidentally taking
effect on a different part of the app.
PR Close#40704
This commit removes some styles from `_footer.scss` that are no longer
used (i.e. either their CSS selectors do not match any element in the
app or they are overridden by other rules).
PR Close#40704
This commit removes some styles from `_content-layout.scss` that are no
longer used (i.e. either their CSS selectors do not match any element in
the app or they are overridden by other rules).
PR Close#40704
This commit removes some styles for the `.heading` CSS class which do
not have any effect (either because they are overridden in other rules
or because they do not make any difference).
NOTE:
The `.heading` class is kept in the HTML to make it easier to associate
the `.heading-children` element with its corresponding `.heading`
parent.
PR Close#40427
This commit simplifies the styling of the "collapsed/expanded" icons in
sidenav nav-items with children by consolidating the CSS rules in one
block (instead of having duplicate blocks for different levels).
PR Close#40427
This commit fixes the layout and appearance of the cards shown in the
docs introduction page (`/docs`) in the following ways:
- Center the cards.
- Ensure two cards are shown per line (instead of 3 one the first line
and 1 on the second).
- Adjust their widths to ensure their content fits well in them
(given that the cards have a fixed height).
- Use more engaging styles to better indicate that the cards are
clickable (as discussed [here][1]).
[1]: https://github.com/angular/angular/pull/40427#discussion_r560688953
PR Close#40427
This commit cleans up the styles in `_card.scss` by:
- Fixing incosistenct indentation/newlines.
- Removing rules for unused selectors.
- Removing unnecessary styles.
PR Close#40427
