honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(docs-infra): create mixin for styling marketing pages (#40881) 

Previously, in order to apply some styles to marketing (i.e. non-docs)
pages, we listed the various `.page-*` classes that corresponded to docs
pages. This meant that adding/removing a marketing page required updates
in several places, which is error-prone.

This commit avoids this by using a Sass mixin for applying styles to
marketing pages.

PR Close #40881
This commit is contained in:
George Kalpakas 2021-02-18 18:42:50 +02:00 committed by atscott
parent c5231ce1da
commit 4b3e6b5a00
6 changed files with 84 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
aio/src/styles/0-base/_typography.scss
View File

@ -34,14 +34,7 @@ h2 {
margin-top: 4rem;
padding-top: 4rem;
.page-about &,
.page-api &,
.page-contribute &,
.page-events &,
.page-features &,
.page-home &,
.page-presskit &,
.page-resources & {
@include marketing-pages($extraSelectors: ('.page-api'), $nestParentSelector: true) {
border-top: 0;
margin-top: 2rem;
padding-top: 0;

9
aio/src/styles/1-layouts/_content-layout.scss
View File

@ -18,14 +18,7 @@
padding: 80px 1rem 1rem;
}
.page-about &,
.page-contribute &,
.page-events &,
.page-features &,
.page-guide-cheatsheet &,
.page-home &,
.page-presskit &,
.page-resources & {
@include marketing-pages($extraSelectors: ('.page-guide-cheatsheet'), $nestParentSelector: true) {
max-width: none;
}

60
aio/src/styles/1-layouts/_marketing-layout.scss
View File

@ -261,49 +261,35 @@ section#intro {
}
}
aio-shell {
&.page-about,
&.page-contribute,
&.page-events,
&.page-features,
&.page-home,
&.page-presskit,
&.page-resources {
.sidenav-content {
padding: 0 0 3rem;
}
@include marketing-pages {
.sidenav-content {
padding: 0 0 3rem;
}
&.page-home {
.sidenav-content {
padding-bottom: 0;
article {
padding: 3rem;
@media (max-width: 800px) {
padding: 2.2rem;
}
}
&.page-about,
&.page-contribute,
&.page-events,
&.page-features,
&.page-home,
&.page-presskit,
&.page-resources {
article {
padding: 3rem;
@media (max-width: 800px) {
padding: 2.2rem;
}
}
}
.cta-bar .hero-cta {
color: $blue;
}
}
.cta-bar.announcement-bar {
background: none;
box-shadow: none;
.page-home {
.sidenav-content {
padding-bottom: 0;
}
}
.cta-bar {
&.announcement-bar {
background: none;
box-shadow: none;
}
.hero-cta {
color: $blue;
}
}
.text-headline {

8
aio/src/styles/1-layouts/_top-menu.scss
View File

@ -26,13 +26,7 @@ mat-toolbar.app-toolbar {
}
// MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
.page-about &,
.page-contribute &,
.page-events &,
.page-features &,
.page-home &,
.page-presskit &,
.page-resources & {
@include marketing-pages($nestParentSelector: true) {
box-shadow: none;
// FIXED TOPNAV TOOLBAR FOR SMALL MOBILE

10
aio/src/styles/2-modules/_notification.scss
View File

@ -90,14 +90,10 @@ aio-notification {
}
}
}
}
&.page-about,
&.page-contribute,
&.page-events,
&.page-features,
&.page-home,
&.page-presskit,
&.page-resources {
@include marketing-pages {
&.aio-notification-show {
mat-sidenav-container.sidenav-container {
.sidenav-content {
padding-top: $notificationHeight;

55
aio/src/styles/_mixins.scss
View File

@ -177,3 +177,58 @@
}
}
}
/// Define some styles for marketing (i.e. non-docs) pages.
///
/// @example scss - Example SCSS:
/// .foo {
/// @include marketing-pages {
/// .bar {
/// color: orange;
/// }
/// }
/// }
///
/// .baz {
/// @include marketing-pages($extraSelectors: ('.other-page'), $nestParentSelector: true) {
/// .qux {
/// color: orange;
/// }
/// }
/// }
///
/// @example css - Output CSS:
/// .foo .page-about .bar, .foo .page-contribute .bar, ... {
/// color: orange;
/// }
///
/// .page-about .baz .qux, .page-contribute .baz .qux, ..., .other-page .baz .qux {
/// color: orange;
/// }
///
/// @param {string[]} $extraSelectors
/// A list of additional page selectors to apply the styles to.
/// @param {boolean} $nestParentSelector
/// If true, the parent selector (`&`) is nested inside the marketing pages selectors.
@mixin marketing-pages($extraSelectors: (), $nestParentSelector: false) {
$marketingPagesSelectors: (
'.page-about',
'.page-contribute',
'.page-events',
'.page-features',
'.page-home',
'.page-presskit',
'.page-resources',
);
$selectors: join($marketingPagesSelectors, $extraSelectors, $separator: comma);
@if $nestParentSelector and & {
@at-root #{selector-nest(#{$selectors}, &)} {
@content;
}
} @else {
#{$selectors} {
@content;
}
}
}