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

package/src/tree/_tree.scss

@@ -59,116 +59,118 @@ $item-padding: calc(
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-tree {
-      display: block;
-      height: 100%;
-      outline-style: none;
-      overflow: auto;
-      // this is mostly for firefox. moving the mouse even 1px while clicking will
-      // select the current item and all items to the tree root
-      user-select: none;
-      width: 100%;
-    }
+    @include utils.optional-layer(tree, $disable-layer) {
+      .rmd-tree {
+        display: block;
+        height: 100%;
+        outline-style: none;
+        overflow: auto;
+        // this is mostly for firefox. moving the mouse even 1px while clicking will
+        // select the current item and all items to the tree root
+        user-select: none;
+        width: 100%;
+      }
 
-    .rmd-tree-item {
-      @include icon.set-var(rotate-from, $expander-right-from);
-      @include icon.set-var(rotate-to, $expander-right-to);
-      @include set-var(item-padding, $item-padding);
+      .rmd-tree-item {
+        @include icon.set-var(rotate-from, $expander-right-from);
+        @include icon.set-var(rotate-to, $expander-right-to);
+        @include set-var(item-padding, $item-padding);
 
-      list-style: none;
+        list-style: none;
 
-      @if not $disable-expander-left {
-        &--expander-left {
-          @include icon.set-var(rotate-from, $expander-left-from);
-          @include icon.set-var(rotate-to, $expander-left-to);
+        @if not $disable-expander-left {
+          &--expander-left {
+            @include icon.set-var(rotate-from, $expander-left-from);
+            @include icon.set-var(rotate-to, $expander-left-to);
+          }
         }
-      }
 
-      &__content {
-        @include utils.auto-rtl(
-          padding-left,
-          get-var(item-padding),
-          list.get-var(item-horizontal-padding)
-        );
+        &__content {
+          @include utils.auto-rtl(
+            padding-left,
+            get-var(item-padding),
+            list.get-var(item-horizontal-padding)
+          );
 
-        &--disabled {
-          cursor: auto;
+          &--disabled {
+            cursor: auto;
 
-          &:hover::before {
-            @include interaction.set-var(background-color, transparent);
+            &:hover::before {
+              @include interaction.set-var(background-color, transparent);
+            }
           }
-        }
 
-        &--link {
-          color: inherit;
-          text-decoration: none;
-        }
+          &--link {
+            color: inherit;
+            text-decoration: none;
+          }
 
-        &--focused::before {
-          // Note: Clicking an item and then using the keyboard to move focus
-          // will **not** show the focus outline so might not be ideal. the tree
-          // must be re-focused after a `Tab` keypress for it to appear again
-          @if utils.$disable-focus-visible {
-            .rmd-tree:focus-within & {
-              @include utils.keyboard-only {
+          &--focused::before {
+            // Note: Clicking an item and then using the keyboard to move focus
+            // will **not** show the focus outline so might not be ideal. the tree
+            // must be re-focused after a `Tab` keypress for it to appear again
+            @if utils.$disable-focus-visible {
+              .rmd-tree:focus-within & {
+                @include utils.keyboard-only {
+                  @include interaction.focus-styles;
+                }
+              }
+            } @else {
+              .rmd-tree:focus-visible & {
                 @include interaction.focus-styles;
               }
             }
-          } @else {
-            .rmd-tree:focus-visible & {
-              @include interaction.focus-styles;
-            }
           }
-        }
 
-        @if $selected-styles {
-          &--selected {
-            @if not $disable-selected-background-color {
-              @include interaction.set-var(
-                background-color,
-                interaction.get-var(selected-background-color)
-              );
-
-              @include utils.touch-only {
-                &:hover::before {
-                  @include interaction.set-var(
-                    background-color,
-                    interaction.get-var(selected-background-color)
-                  );
+          @if $selected-styles {
+            &--selected {
+              @if not $disable-selected-background-color {
+                @include interaction.set-var(
+                  background-color,
+                  interaction.get-var(selected-background-color)
+                );
+
+                @include utils.touch-only {
+                  &:hover::before {
+                    @include interaction.set-var(
+                      background-color,
+                      interaction.get-var(selected-background-color)
+                    );
+                  }
                 }
               }
+              @include utils.map-to-styles($selected-styles);
             }
-            @include utils.map-to-styles($selected-styles);
           }
         }
-      }
 
-      @if not $disable-expander-left-as-media {
-        &__media {
-          align-items: center;
-          display: flex;
-          justify-content: space-between;
+        @if not $disable-expander-left-as-media {
+          &__media {
+            align-items: center;
+            display: flex;
+            justify-content: space-between;
 
-          @if not $disable-expander-left-as-media-offset {
-            &--single {
-              justify-content: flex-end;
+            @if not $disable-expander-left-as-media-offset {
+              &--single {
+                justify-content: flex-end;
+              }
             }
           }
         }
       }
-    }
 
-    .rmd-tree-group {
-      background-color: inherit;
-      color: inherit;
-      font-size: inherit;
-      line-height: inherit;
+      .rmd-tree-group {
+        background-color: inherit;
+        color: inherit;
+        font-size: inherit;
+        line-height: inherit;
 
-      // remove the list padding to make it more condensed
-      padding-bottom: 0;
-      padding-top: 0;
+        // remove the list padding to make it more condensed
+        padding-bottom: 0;
+        padding-top: 0;
+      }
     }
   }
 }

package/src/typography/_typography.scss

@@ -253,69 +253,76 @@ $typography-variables: (line-length, text-container-padding);
   #{$property}: typography-get-var($name, $fallback);
 }
 
-@mixin typography-text-container-styles($disabled: $disable-text-container) {
+@mixin typography-text-container-styles(
+  $disabled: $disable-text-container,
+  $disable-layer: false
+) {
   @if not $disabled {
-    .rmd-text-container {
-      @include typography-use-var(max-width, line-length);
-      @include typography-use-var(padding, text-container-padding);
-
-      display: block;
-      margin: 0 auto;
-      width: 100%;
+    @include utils.optional-layer(typography, $disable-layer) {
+      .rmd-text-container {
+        @include typography-use-var(max-width, line-length);
+        @include typography-use-var(padding, text-container-padding);
+
+        display: block;
+        margin: 0 auto;
+        width: 100%;
+      }
     }
   }
 }
 
-@mixin typography-base-styles {
-  .rmd-typography {
-    @include utils.map-to-styles($base-font-styles);
+@mixin typography-base-styles($disable-layer: false) {
+  @include utils.optional-layer(typography, $disable-layer) {
+    .rmd-typography {
+      @include utils.map-to-styles($base-font-styles);
 
-    &--headline-1 {
-      @include utils.map-to-styles($headline-1-styles);
-    }
+      &--headline-1 {
+        @include utils.map-to-styles($headline-1-styles);
+      }
 
-    &--headline-2 {
-      @include utils.map-to-styles($headline-2-styles);
-    }
+      &--headline-2 {
+        @include utils.map-to-styles($headline-2-styles);
+      }
 
-    &--headline-3 {
-      @include utils.map-to-styles($headline-3-styles);
-    }
+      &--headline-3 {
+        @include utils.map-to-styles($headline-3-styles);
+      }
 
-    &--headline-4 {
-      @include utils.map-to-styles($headline-4-styles);
-    }
+      &--headline-4 {
+        @include utils.map-to-styles($headline-4-styles);
+      }
 
-    &--headline-5 {
-      @include utils.map-to-styles($headline-5-styles);
-    }
+      &--headline-5 {
+        @include utils.map-to-styles($headline-5-styles);
+      }
 
-    &--headline-6 {
-      @include utils.map-to-styles($headline-6-styles);
-    }
+      &--headline-6 {
+        @include utils.map-to-styles($headline-6-styles);
+      }
 
-    &--subtitle-1 {
-      @include utils.map-to-styles($subtitle-1-styles);
-    }
+      &--subtitle-1 {
+        @include utils.map-to-styles($subtitle-1-styles);
+      }
 
-    &--subtitle-2 {
-      @include utils.map-to-styles($subtitle-2-styles);
-    }
+      &--subtitle-2 {
+        @include utils.map-to-styles($subtitle-2-styles);
+      }
 
-    &--body-1 {
-      @include utils.map-to-styles($body-1-styles);
-    }
+      &--body-1 {
+        @include utils.map-to-styles($body-1-styles);
+      }
 
-    &--body-2 {
-      @include utils.map-to-styles($body-2-styles);
-    }
+      &--body-2 {
+        @include utils.map-to-styles($body-2-styles);
+      }
 
-    &--caption {
-      @include utils.map-to-styles($caption-styles);
-    }
+      &--caption {
+        @include utils.map-to-styles($caption-styles);
+      }
 
-    &--overline {
-      @include utils.map-to-styles($overline-styles);
+      &--overline {
+        @include utils.map-to-styles($overline-styles);
+      }
     }
   }
 }
@@ -344,7 +351,9 @@ $typography-variables: (line-length, text-container-padding);
   }
 }
 
-@mixin typography-styles {
-  @include typography-text-container-styles;
-  @include typography-base-styles;
+@mixin typography-styles($disable-layer: false) {
+  @include utils.optional-layer(typography, $disable-layer) {
+    @include typography-text-container-styles($disable-layer: true);
+    @include typography-base-styles(true);
+  }
 }

package/src/window-splitter/_window-splitter.scss

@@ -37,104 +37,106 @@ $variables: (top, right, bottom, left, opacity, position);
   #{$property}: get-var($name, $fallback);
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-window-splitter {
-      @include use-var(opacity);
-      @include utils.mouse-hover {
-        @include set-var(opacity, 1);
-      }
-      @include utils.keyboard-only {
-        // Do not use `:focus-visible` here since since it'll still be active
-        // after dragging with a mouse until the user clicks something else. The
-        // `--dragging` state handles that part
-        &:focus {
+    @include utils.optional-layer(window-splitter, $disable-layer) {
+      .rmd-window-splitter {
+        @include use-var(opacity);
+        @include utils.mouse-hover {
           @include set-var(opacity, 1);
         }
-      }
+        @include utils.keyboard-only {
+          // Do not use `:focus-visible` here since since it'll still be active
+          // after dragging with a mouse until the user clicks something else. The
+          // `--dragging` state handles that part
+          &:focus {
+            @include set-var(opacity, 1);
+          }
+        }
 
-      background-color: transparent;
-      border: 0;
-      outline-style: none;
-      padding: 0;
-      position: fixed;
-      transition: opacity transition.$linear-duration;
-      z-index: $z-index;
-
-      &::after {
-        background-color: $background-color;
-        content: "";
-        inset: 0;
-        position: absolute;
-      }
+        background-color: transparent;
+        border: 0;
+        outline-style: none;
+        padding: 0;
+        position: fixed;
+        transition: opacity transition.$linear-duration;
+        z-index: $z-index;
+
+        &::after {
+          background-color: $background-color;
+          content: "";
+          inset: 0;
+          position: absolute;
+        }
 
-      @if not $disable-horizontal {
-        &--h {
-          @include utils.auto-rtl(left, get-var(position));
-          @include use-var(bottom);
-          @include use-var(top);
+        @if not $disable-horizontal {
+          &--h {
+            @include utils.auto-rtl(left, get-var(position));
+            @include use-var(bottom);
+            @include use-var(top);
 
-          cursor: col-resize;
-          width: $size;
+            cursor: col-resize;
+            width: $size;
 
-          &::after {
-            width: $background-size;
+            &::after {
+              width: $background-size;
+            }
           }
-        }
 
-        @if not $disable-reversed {
-          &--hr {
-            @include utils.auto-rtl(right, get-var(position));
+          @if not $disable-reversed {
+            &--hr {
+              @include utils.auto-rtl(right, get-var(position));
 
-            left: auto;
+              left: auto;
 
-            &::after {
-              @include utils.auto-rtl(margin-left, auto);
+              &::after {
+                @include utils.auto-rtl(margin-left, auto);
+              }
             }
           }
         }
-      }
 
-      @if not $disable-vertical {
-        &--v {
-          @include use-var(left);
-          @include use-var(right);
-          @include use-var(top, position);
+        @if not $disable-vertical {
+          &--v {
+            @include use-var(left);
+            @include use-var(right);
+            @include use-var(top, position);
 
-          cursor: row-resize;
-          height: $size;
-          width: 100%;
+            cursor: row-resize;
+            height: $size;
+            width: 100%;
 
-          &::after {
-            height: $background-size;
+            &::after {
+              height: $background-size;
+            }
           }
-        }
 
-        @if not $disable-reversed {
-          &--vr {
-            @include use-var(bottom, position);
+          @if not $disable-reversed {
+            &--vr {
+              @include use-var(bottom, position);
 
-            top: auto;
+              top: auto;
 
-            &::after {
-              top: calc(100% - $background-size);
+              &::after {
+                top: calc(100% - $background-size);
+              }
             }
           }
         }
-      }
 
-      @if not $disable-absolute-position {
-        &--a {
-          position: absolute;
+        @if not $disable-absolute-position {
+          &--a {
+            position: absolute;
+          }
         }
-      }
 
-      &--dragging {
-        @include set-var(opacity, 1);
+        &--dragging {
+          @include set-var(opacity, 1);
 
-        // set to important so that the `.rmd-dragging` styles do not affect
-        // window splitter
-        pointer-events: auto !important;
+          // set to important so that the `.rmd-dragging` styles do not affect
+          // window splitter
+          pointer-events: auto !important;
+        }
       }
     }
   }

package/tsconfig.json

@@ -13,7 +13,7 @@
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "preserve",
-    "lib": ["dom", "dom.iterable", "esnext"]
+    "lib": ["dom", "dom.iterable", "esnext"],
   },
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist"],
 }