Previously some material-content styling was only applied if there was a drawer preceding. If there were two drawers, the second would miss some styling and the content would miss the adjustment from the first drawer.

Changed to use the general sibling selector instead of the adjacent sibling selector to be less dependent on a specific number and order of elements, and to use conditional styling (a {...} !a {...}) instead of relying on overrides ({... a {...} }).

PiperOrigin-RevId: 192269258

Author: har79

lib/app_layout/_mixins.scss

@@ -18,36 +18,39 @@
   &[permanent] {
     width: $width;
 
-    + material-content,
-    + .material-content {
-      margin-left: $width;
+    &:not([end]) {
+      ~ material-content,
+      ~ .material-content {
+        margin-left: $width;
+      }
     }
 
     &[end] {
-      + material-content,
-      + .material-content {
-        margin-left: 0;
+      ~ material-content,
+      ~ .material-content {
         margin-right: $width;
       }
     }
   }
 
   &[persistent].mat-drawer-collapsed {
-    transform: translateX(-100%);
+    &:not([end]) {
+      transform: translateX(-100%);
 
-    // If the drawer is collapsed, which needs to be the element directly
-    // before the content, set the content to the left edge.
-    + material-content,
-    + .material-content {
-      margin-left: 0;
+      // If the drawer is collapsed, which needs to be an element before the
+      // content, set the content to the left edge.
+      ~ material-content,
+      ~ .material-content {
+        margin-left: 0;
+      }
     }
 
     &[end] {
       transform: translateX(100%);
 
       // [end] drawer is positioned on the opposite side
-      + material-content,
-      + .material-content {
+      ~ material-content,
+      ~ .material-content {
         margin-right: 0;
       }
     }

lib/app_layout/layout.scss

@@ -39,19 +39,18 @@ material-drawer {
   }
 
   &[persistent] {
-    transition-property: transform, width;
-    transition-duration: $mat-transition-desktop;
-    transition-timing-function: $mat-transition-standard;
-
-    + material-content,
-    + .material-content {
-      transition: margin-left $mat-transition-desktop $mat-transition-standard;
+    transition: {
+      duration: $mat-transition-desktop;
+      property: transform, width;
+      timing-function: $mat-transition-standard;
     }
 
-    &[end] {
-      + material-content,
-      + .material-content {
-        transition-property: margin-right;
+    ~ material-content,
+    ~ .material-content {
+      transition: {
+        duration: $mat-transition-desktop;
+        property: margin-left, margin-right;
+        timing-function: $mat-transition-standard;
       }
     }
   }
@@ -90,45 +89,44 @@ $mat-header-dense-height: 48px;
   width: 100%;
   z-index: 0;
 
-  // Dense header spec for desktop and mouse heavy interfaces.
-  &.dense-header {
-    height: $mat-header-dense-height;
-
-    .material-header-row {
-      height: $mat-header-dense-height;
-    }
-  }
-
   // Add shadow to the header
   &.shadow {
     @include shadow-elevation(4);
   }
 
   // Header is taking the full top row.
-  + material-drawer {
+  ~ material-drawer {
     // Position the drawer lower to fit the header.
     &[permanent],
     &[persistent] {
       top: $mat-header-height;
     }
+  }
 
-    // Reduce the min size of the content.
-    + material-content,
-    + .material-content {
-      min-height: calc(100% - #{$mat-header-height});
-    }
+  // Reduce the min size of the content.
+  ~ material-content,
+  ~ .material-content {
+    min-height: calc(100% - #{$mat-header-height});
   }
 
-  // Dense header is taking the full top row.
-  &.dense-header + material-drawer {
-    &[permanent],
-    &[persistent] {
-      top: $mat-header-dense-height;
+  // Dense header spec for desktop and mouse heavy interfaces.
+  &.dense-header {
+    height: $mat-header-dense-height;
+
+    .material-header-row {
+      height: $mat-header-dense-height;
+    }
+
+    ~ material-drawer {
+      &[permanent],
+      &[persistent] {
+        top: $mat-header-dense-height;
+      }
     }
 
     // Reduce the min size of the content.
-    + material-content,
-    + .material-content {
+    ~ material-content,
+    ~ .material-content {
       min-height: calc(100% - #{$mat-header-dense-height});
     }
   }