Minor Sass changes.

Author: zelliott

src/dev-app/dev-app/dev-app-layout.ts

@@ -112,11 +112,9 @@ export class DevAppLayout {
     this.dark = !this.dark;
 
     if (this.dark) {
-      this._element.nativeElement.classList.add(darkThemeClass);
-      this._overlayContainer.getContainerElement().classList.add(darkThemeClass);
+      document.body.classList.add(darkThemeClass);
     } else {
-      this._element.nativeElement.classList.remove(darkThemeClass);
-      this._overlayContainer.getContainerElement().classList.remove(darkThemeClass);
+      document.body.classList.remove(darkThemeClass);
     }
   }
 
@@ -126,11 +124,9 @@ export class DevAppLayout {
     this.strongFocus = !this.strongFocus;
 
     if (this.strongFocus) {
-      this._element.nativeElement.classList.add(strongFocusClass);
-      this._overlayContainer.getContainerElement().classList.add(strongFocusClass);
+      document.body.classList.add(strongFocusClass);
     } else {
-      this._element.nativeElement.classList.remove(strongFocusClass);
-      this._overlayContainer.getContainerElement().classList.remove(strongFocusClass);
+      document.body.classList.remove(strongFocusClass);
     }
   }
 }

src/material/core/focus-indicator/_focus-indicator.scss

@@ -6,66 +6,60 @@
 ///   .my-app {
 ///     @include mat-strong-focus-indicators();
 ///   }
-
 @mixin mat-strong-focus-indicators() {
-  // Reference to the root selector, used to simplify the nested selectors
-  // in this mixin.
-  $root-selector: #{&};
-
   // Border width of the focus indicators.
   $border-width: 2px;
 
-  @at-root .mat-focus-indicator {
-    // Base styles for the focus indicators.
-    #{$root-selector} &::before {
-      border: $border-width solid transparent;
-      border-radius: 4px;
-      box-sizing: border-box;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
+  // Base styles for the focus indicators.
+  .mat-focus-indicator::before {
+    border-radius: 4px;
+    border: $border-width solid transparent;
+    box-sizing: border-box;
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
 
-    // By default, all focus indicators are flush with the bounding box of their
-    // host element. For particular elements (listed below), default inset/offset
-    // values are necessary to ensure that the focus indicator is sufficiently
-    // contrastive and renders appropriately.
+  // By default, all focus indicators are flush with the bounding box of their
+  // host element. For particular elements (listed below), default inset/offset
+  // values are necessary to ensure that the focus indicator is sufficiently
+  // contrastive and renders appropriately.
 
-    #{$root-selector} &.mat-button-base::before,
-    #{$root-selector} &.mat-card::before,
-    #{$root-selector} &.mat-sort-header-button::before {
-      margin: $border-width * -2;
-    }
+  .mat-focus-indicator.mat-button-base::before,
+  .mat-focus-indicator.mat-button-base::before,
+  .mat-focus-indicator.mat-card::before,
+  .mat-focus-indicator.mat-sort-header-button::before {
+    margin: $border-width * -2;
+  }
 
-    #{$root-selector} &.mat-calendar-body-cell::before {
-      margin: $border-width * -1;
-    }
+  .mat-focus-indicator.mat-calendar-body-cell::before {
+    margin: $border-width * -1;
+  }
 
-    #{$root-selector} &.mat-tab-link::before,
-    #{$root-selector} &.mat-tab-label::before {
-      margin: $border-width * 2;
-    }
+  .mat-focus-indicator.mat-tab-link::before,
+  .mat-focus-indicator.mat-tab-label::before {
+    margin: $border-width * 2;
+  }
 
-    // Render the focus indicator on focus. Defining a pseudo element's
-    // content will cause it to render.
+  // Render the focus indicator on focus. Defining a pseudo element's
+  // content will cause it to render.
 
-    // For checkboxes, radios, and slide toggles, render the focus indicator
-    // when the class .cdk-focused is present.
-    #{$root-selector} .cdk-focused.mat-checkbox &::before,
-    #{$root-selector} .cdk-focused.mat-radio-button &::before,
-    #{$root-selector} .cdk-focused.mat-slide-toggle &::before,
+  // For checkboxes, radios, and slide toggles, render the focus indicator
+  // when the class .cdk-focused is present.
+  .cdk-focused.mat-checkbox .mat-focus-indicator::before,
+  .cdk-focused.mat-radio-button .mat-focus-indicator::before,
+  .cdk-focused.mat-slide-toggle .mat-focus-indicator::before,
 
-    // For options, render the focus indicator when the class .mat-active
-    // is present.
-    #{$root-selector} &.mat-active.mat-option::before,
+  // For options, render the focus indicator when the class .mat-active
+  // is present.
+  .mat-focus-indicator.mat-option.mat-active::before,
 
-    // For all other components, render the focus indicator on focus.
-    #{$root-selector} &:focus::before {
-      content: '';
-    }
+  // For all other components, render the focus indicator on focus.
+  .mat-focus-indicator:focus::before {
+    content: '';
   }
 }
 
@@ -84,7 +78,6 @@
 ///   .demo-red-theme {
 ///     @include mat-strong-focus-indicators-theme(#F00);
 ///   }
-
 @mixin mat-strong-focus-indicators-theme($themeOrColor) {
   .mat-focus-indicator::before {
     border-color: if(