From 4b3e6b5a00657b47ddc66999412bf352773ab89b Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Thu, 18 Feb 2021 18:42:50 +0200 Subject: [PATCH] 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 --- aio/src/styles/0-base/_typography.scss | 9 +-- aio/src/styles/1-layouts/_content-layout.scss | 9 +-- .../styles/1-layouts/_marketing-layout.scss | 60 +++++++------------ aio/src/styles/1-layouts/_top-menu.scss | 8 +-- aio/src/styles/2-modules/_notification.scss | 10 +--- aio/src/styles/_mixins.scss | 55 +++++++++++++++++ 6 files changed, 84 insertions(+), 67 deletions(-) diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss index 2f0107bb5d..da432e6ff5 100755 --- a/aio/src/styles/0-base/_typography.scss +++ b/aio/src/styles/0-base/_typography.scss @@ -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; diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss index 76c47e8450..ef21d43c4a 100644 --- a/aio/src/styles/1-layouts/_content-layout.scss +++ b/aio/src/styles/1-layouts/_content-layout.scss @@ -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; } diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss index e3afef94ca..b0b0d8f7f4 100644 --- a/aio/src/styles/1-layouts/_marketing-layout.scss +++ b/aio/src/styles/1-layouts/_marketing-layout.scss @@ -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 { diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss index c62967c387..4dc7d5aa93 100644 --- a/aio/src/styles/1-layouts/_top-menu.scss +++ b/aio/src/styles/1-layouts/_top-menu.scss @@ -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 diff --git a/aio/src/styles/2-modules/_notification.scss b/aio/src/styles/2-modules/_notification.scss index c557f4ba75..7494602acc 100644 --- a/aio/src/styles/2-modules/_notification.scss +++ b/aio/src/styles/2-modules/_notification.scss @@ -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; diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss index 5a736390b1..6b2fccf47e 100644 --- a/aio/src/styles/_mixins.scss +++ b/aio/src/styles/_mixins.scss @@ -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; + } + } +}