@react-md/core 1.0.0-next.5 → 1.0.0-next.7

package/src/icon/_icon.scss

@@ -115,94 +115,96 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   // shouldn't really use react-md without icons though...
-  @if not $disable-font or not $disable-svg and not $disable-symbol {
-    @include theme.default-system-theme {
-      @include use-dark-theme;
-    }
+  @if not $disable-font or not $disable-svg or not $disable-symbol {
+    @include utils.optional-layer(icon, $disable-layer) {
+      @include theme.default-system-theme {
+        @include use-dark-theme;
+      }
 
-    .rmd-icon {
-      @include use-var(font-size, size);
-      @include use-var(color);
+      .rmd-icon {
+        @include use-var(font-size, size);
+        @include use-var(color);
 
-      // you normally don't want icons to shrink in flex containers.
-      // update the icon manually instead.
-      flex-shrink: 0;
-      user-select: none;
+        // you normally don't want icons to shrink in flex containers.
+        // update the icon manually instead.
+        flex-shrink: 0;
+        user-select: none;
 
-      @if not $disable-font {
-        &--font {
-          text-align: center;
+        @if not $disable-font {
+          &--font {
+            text-align: center;
+          }
         }
-      }
 
-      @if not $disable-svg {
-        &--svg {
-          fill: currentcolor;
-          height: 1em;
-          width: 1em;
+        @if not $disable-svg {
+          &--svg {
+            fill: currentcolor;
+            height: 1em;
+            width: 1em;
+          }
         }
-      }
 
-      @if not $disable-symbol {
-        &--symbol {
-          font-variation-settings:
-            "FILL" get-var(symbol-fill),
-            "wght" get-var(symbol-weight),
-            "GRAD" get-var(symbol-grade),
-            "opsz" get-var(symbol-optical-size);
+        @if not $disable-symbol {
+          &--symbol {
+            font-variation-settings:
+              "FILL" get-var(symbol-fill),
+              "wght" get-var(symbol-weight),
+              "GRAD" get-var(symbol-grade),
+              "opsz" get-var(symbol-optical-size);
+          }
         }
-      }
 
-      @if not $disable-inline {
-        &--vab {
-          vertical-align: bottom;
+        @if not $disable-inline {
+          &--vab {
+            vertical-align: bottom;
+          }
         }
-      }
 
-      @if not $disable-spacing-before {
-        &--before {
-          @include utils.auto-rtl(margin-right, get-var(spacing), 0);
+        @if not $disable-spacing-before {
+          &--before {
+            @include utils.auto-rtl(margin-right, get-var(spacing), 0);
+          }
         }
-      }
 
-      @if not $disable-spacing-after {
-        &--after {
-          @include utils.auto-rtl(margin-left, get-var(spacing), 0);
+        @if not $disable-spacing-after {
+          &--after {
+            @include utils.auto-rtl(margin-left, get-var(spacing), 0);
+          }
         }
-      }
 
-      @if not $disable-spacing-above {
-        &--above {
-          @include use-var(margin-bottom, spacing);
+        @if not $disable-spacing-above {
+          &--above {
+            @include use-var(margin-bottom, spacing);
+          }
         }
-      }
 
-      @if not $disable-spacing-below {
-        &--below {
-          @include use-var(margin-top, spacing);
+        @if not $disable-spacing-below {
+          &--below {
+            @include use-var(margin-top, spacing);
+          }
         }
-      }
 
-      @if not $disable-dense {
-        &--dense {
-          @include set-var(size, $dense-size);
+        @if not $disable-dense {
+          &--dense {
+            @include set-var(size, $dense-size);
+          }
         }
       }
     }
-  }
 
-  @if not $disable-rotator {
-    .rmd-icon-rotator {
-      transform: rotate(get-var(rotate-from));
+    @if not $disable-rotator {
+      .rmd-icon-rotator {
+        transform: rotate(get-var(rotate-from));
 
-      &--animate {
-        transition: transform $rotate-duration linear;
-      }
+        &--animate {
+          transition: transform $rotate-duration linear;
+        }
 
-      &--rotated {
-        transform: rotate(get-var(rotate-to));
+        &--rotated {
+          transform: rotate(get-var(rotate-to));
+        }
       }
     }
   }

package/src/interaction/_interaction.scss

@@ -375,46 +375,50 @@ $variables: (
   }
 }
 
-@mixin styles {
-  @if not $_disable-ripple {
-    .rmd-ripple-container {
-      @include use-var(border-radius, ripple-border-radius);
-      @include use-var(inset, ripple-inset);
-
-      overflow: hidden;
-      pointer-events: none;
-      position: absolute;
-      z-index: 0 !important;
-    }
-
-    .rmd-ripple {
-      @include use-var(background-color, ripple-background-color);
-
-      border-radius: 50%;
-      position: absolute;
-      transform: scale(0);
-
-      &--animating {
-        transition:
-          transform
-            $ripple-transform-duration
-            transition.$deceleration-timing-function,
-          opacity
-            $ripple-opacity-duration
-            transition.$acceleration-timing-function;
+@mixin styles($disable-layer: false) {
+  @include utils.optional-layer(interaction, $disable-layer) {
+    @if not $_disable-ripple {
+      .rmd-ripple-container {
+        @include use-var(border-radius, ripple-border-radius);
+        @include use-var(inset, ripple-inset);
+
+        overflow: hidden;
+        pointer-events: none;
+        position: absolute;
+        z-index: 0 !important;
       }
 
-      &--scaling {
-        transform: scale(1);
-      }
+      .rmd-ripple {
+        @include use-var(background-color, ripple-background-color);
+
+        border-radius: 50%;
+        position: absolute;
+        transform: scale(0);
+
+        &--animating {
+          transition:
+            transform
+              $ripple-transform-duration
+              transition.$deceleration-timing-function,
+            opacity
+              $ripple-opacity-duration
+              transition.$acceleration-timing-function;
+        }
 
-      &--fading {
-        opacity: 0;
+        &--scaling {
+          transform: scale(1);
+        }
+
+        &--fading {
+          opacity: 0;
+        }
       }
     }
-  }
 
-  .rmd-interaction-surface {
-    @include surface($disabled-selector: "&:disabled,&[aria-disabled='true']");
+    .rmd-interaction-surface {
+      @include surface(
+        $disabled-selector: "&:disabled,&[aria-disabled='true']"
+      );
+    }
   }
 }

package/src/layout/_layout.scss

@@ -57,93 +57,94 @@ $variables: (size, header-height);
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-layout-main {
-      display: block;
-      outline: none;
-
-      &::before {
-        @include utils.pseudo-element(
-          $fixed: true,
-          $z-index: $main-focus-z-index,
-          $inset: get-var(header-height) 0 interaction.get-var(focus-width)
-        );
-        @include interaction.focus-styles($box-shadow: true);
-
-        opacity: 0;
-        transition: opacity
-          transition.$linear-duration
-          transition.$linear-timing-function;
-      }
+    @include utils.optional-layer(layout, $disable-layer) {
+      .rmd-layout-main {
+        display: block;
+        outline: none;
+
+        &::before {
+          @include utils.pseudo-element(
+            $fixed: true,
+            $z-index: $main-focus-z-index,
+            $inset: get-var(header-height) 0 interaction.get-var(focus-width)
+          );
+          @include interaction.focus-styles($box-shadow: true);
+
+          opacity: 0;
+          transition: opacity transition.$linear-duration
+            transition.$linear-timing-function;
+        }
 
-      &:focus::before {
-        opacity: 1;
-      }
+        &:focus::before {
+          opacity: 1;
+        }
 
-      &--offset-v {
-        @include use-var(padding-top, header-height);
+        &--offset-v {
+          @include use-var(padding-top, header-height);
+        }
       }
-    }
 
-    /// I decided to go with an "SSR-first" approach by having the nav element
-    /// always be rendered, but use media queries to show it for tablets and
-    /// above. This makes it so there is less javascript to dynamically switch
-    /// between layout types as you resize the browser.
-    .rmd-layout-nav {
-      @include sheet.set-var(width, get-var(size));
-      @include media-queries.media($navigation-breakpoint) {
-        // use grid so that you can easily have a header + tree that fills the remaining space
-        display: grid;
-      }
+      /// I decided to go with an "SSR-first" approach by having the nav element
+      /// always be rendered, but use media queries to show it for tablets and
+      /// above. This makes it so there is less javascript to dynamically switch
+      /// between layout types as you resize the browser.
+      .rmd-layout-nav {
+        @include sheet.set-var(width, get-var(size));
+        @include media-queries.media($navigation-breakpoint) {
+          // use grid so that you can easily have a header + tree that fills the remaining space
+          display: grid;
+        }
 
-      container: $navigation-container-name;
-      display: none;
-      z-index: $navigation-z-index;
+        container: $navigation-container-name;
+        display: none;
+        z-index: $navigation-z-index;
 
-      &--offset-v {
-        @include use-var(top, header-height);
+        &--offset-v {
+          @include use-var(top, header-height);
+        }
       }
-    }
 
-    /// This class is used to transition when the nav expands/collapses on
-    /// larger screen sizes
-    .rmd-layout-h {
-      will-change: margin;
+      /// This class is used to transition when the nav expands/collapses on
+      /// larger screen sizes
+      .rmd-layout-h {
+        will-change: margin;
 
-      &--active {
-        @include media-queries.media($navigation-breakpoint) {
-          @include utils.auto-rtl(margin-left, get-var(size));
+        &--active {
+          @include media-queries.media($navigation-breakpoint) {
+            @include utils.auto-rtl(margin-left, get-var(size));
 
-          &::before {
-            @include utils.auto-rtl(left, get-var(size));
+            &::before {
+              @include utils.auto-rtl(left, get-var(size));
+            }
           }
         }
-      }
 
-      &--enter {
-        transition: margin $enter-duration $enter-timing-function;
-      }
+        &--enter {
+          transition: margin $enter-duration $enter-timing-function;
+        }
 
-      &--exit {
-        transition: margin $leave-duration $leave-timing-function;
+        &--exit {
+          transition: margin $leave-duration $leave-timing-function;
+        }
       }
-    }
 
-    @if not $disable-resizable {
-      .rmd-layout-splitter {
-        @include window-splitter.set-var(position, get-var(size));
+      @if not $disable-resizable {
+        .rmd-layout-splitter {
+          @include window-splitter.set-var(position, get-var(size));
 
-        &--offset-v {
-          @include window-splitter.set-var(top, get-var(header-height));
-        }
-
-        &--responsive {
-          @include media-queries.media($navigation-breakpoint) {
-            display: inline-block;
+          &--offset-v {
+            @include window-splitter.set-var(top, get-var(header-height));
           }
 
-          display: none;
+          &--responsive {
+            @include media-queries.media($navigation-breakpoint) {
+              display: inline-block;
+            }
+
+            display: none;
+          }
         }
       }
     }

package/src/link/_link.scss

@@ -72,73 +72,75 @@ $variables: (color, visited-color, hover-color);
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-link {
-      @include interaction.outline($outline-offset: false);
-      @include use-var(color);
+    @include utils.optional-layer(link, $disable-layer) {
+      .rmd-link {
+        @include interaction.outline($outline-offset: false);
+        @include use-var(color);
 
-      transition: color $transition-duration;
+        transition: color $transition-duration;
 
-      &:visited {
-        @include set-var(color, get-var(visited-color));
-      }
+        &:visited {
+          @include set-var(color, get-var(visited-color));
+        }
 
-      &:hover {
-        @include set-var(color, get-var(hover-color));
-      }
+        &:hover {
+          @include set-var(color, get-var(hover-color));
+        }
 
-      // can't use the normal @include interaction.surface since links are
-      // rendered inline and the `::before`/`::after` pseudo selectors only work
-      // nicely with block-like elements
-      @if utils.$disable-focus-visible {
-        @include utils.keyboard-only {
-          &:focus {
+        // can't use the normal @include interaction.surface since links are
+        // rendered inline and the `::before`/`::after` pseudo selectors only work
+        // nicely with block-like elements
+        @if utils.$disable-focus-visible {
+          @include utils.keyboard-only {
+            &:focus {
+              @include interaction.focus-styles($disable-background: true);
+            }
+          }
+        } @else {
+          &:focus-visible {
             @include interaction.focus-styles($disable-background: true);
           }
         }
-      } @else {
-        &:focus-visible {
-          @include interaction.focus-styles($disable-background: true);
-        }
-      }
 
-      @if not $disable-flex {
-        &--flex {
-          @include icon.use-var(gap, spacing);
+        @if not $disable-flex {
+          &--flex {
+            @include icon.use-var(gap, spacing);
 
-          align-items: center;
-          display: inline-flex;
+            align-items: center;
+            display: inline-flex;
+          }
         }
-      }
 
-      @if not $disable-skip-to-main {
-        &--skip {
-          @include utils.map-to-styles(
-            map.remove(
-              typography.$headline-6-styles,
-              font-size,
-              font-weight,
-              letter-spacing
-            )
-          );
-          @include utils.sr-only(true, null);
-        }
+        @if not $disable-skip-to-main {
+          &--skip {
+            @include utils.map-to-styles(
+              map.remove(
+                typography.$headline-6-styles,
+                font-size,
+                font-weight,
+                letter-spacing
+              )
+            );
+            @include utils.sr-only(true, null);
+          }
 
-        &--skip-styled {
-          @include utils.map-to-styles($skip-to-main-styles);
+          &--skip-styled {
+            @include utils.map-to-styles($skip-to-main-styles);
 
-          @if utils.$disable-focus-visible {
-            @include utils.keyboard-only {
-              &:focus,
-              &:active {
+            @if utils.$disable-focus-visible {
+              @include utils.keyboard-only {
+                &:focus,
+                &:active {
+                  @include utils.map-to-styles($skip-to-main-active-styles);
+                }
+              }
+            } @else {
+              &:focus-visible {
                 @include utils.map-to-styles($skip-to-main-active-styles);
               }
             }
-          } @else {
-            &:focus-visible {
-              @include utils.map-to-styles($skip-to-main-active-styles);
-            }
           }
         }
       }