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

package/src/_core.scss

@@ -140,160 +140,162 @@ $_layer-order: (
   }
 }
 
-@mixin css-utils {
-  .rmd-display-none {
-    display: none !important;
-  }
+@mixin css-utils($disable-layer: false) {
+  @include utils.optional-layer(utils, $disable-layer) {
+    .rmd-display-none {
+      display: none !important;
+    }
 
-  .rmd-sr-only {
-    @include utils.sr-only(true);
-  }
+    .rmd-sr-only {
+      @include utils.sr-only(true);
+    }
 
-  .rmd-phone-sr-only {
-    @include media-queries.phone-media {
-      @include utils.sr-only;
+    .rmd-phone-sr-only {
+      @include media-queries.phone-media {
+        @include utils.sr-only;
+      }
     }
-  }
 
-  .rmd-outline {
-    // inset box-shadow is faded on the lower right half? use outline instead
-    outline: theme.theme-get-var(outline-width) solid
-      theme.theme-get-var(outline-color);
-    outline-offset: utils.negate-var(theme.theme-get-var(outline-width));
-  }
+    .rmd-outline {
+      // inset box-shadow is faded on the lower right half? use outline instead
+      outline: theme.theme-get-var(outline-width) solid
+        theme.theme-get-var(outline-color);
+      outline-offset: utils.negate-var(theme.theme-get-var(outline-width));
+    }
 
-  .rmd-greyscale-outline {
-    @include theme.theme-set-var(outline-color, outline-grey-color);
-  }
+    .rmd-greyscale-outline {
+      @include theme.theme-set-var(outline-color, outline-grey-color);
+    }
 
-  .rmd-background-container {
-    @include theme.theme-use-var(background-color);
-    @include theme.theme-use-var(color, on-background-color, currentcolor);
-  }
+    .rmd-background-container {
+      @include theme.theme-use-var(background-color);
+      @include theme.theme-use-var(color, on-background-color, currentcolor);
+    }
 
-  @each $color in (primary, secondary, warning, success, error) {
-    $theme-name: $color + "-color";
-    $on-theme-name: "on-" + $theme-name;
+    @each $color in (primary, secondary, warning, success, error) {
+      $theme-name: $color + "-color";
+      $on-theme-name: "on-" + $theme-name;
 
-    .rmd-#{$color}-container {
-      @include theme.theme-set-var(background-color, $theme-name);
-      @include theme.theme-set-var(on-background-color, $on-theme-name);
-    }
+      .rmd-#{$color}-container {
+        @include theme.theme-set-var(background-color, $theme-name);
+        @include theme.theme-set-var(on-background-color, $on-theme-name);
+      }
 
-    .rmd-#{$theme-name} {
-      @include theme.theme-use-var(color, $theme-name);
-    }
+      .rmd-#{$theme-name} {
+        @include theme.theme-use-var(color, $theme-name);
+      }
 
-    .rmd-#{$on-theme-name} {
-      @include theme.theme-use-var(color, $on-theme-name);
-    }
+      .rmd-#{$on-theme-name} {
+        @include theme.theme-use-var(color, $on-theme-name);
+      }
 
-    .rmd-#{$color}-outline {
-      @include theme.theme-set-var(outline-color, $theme-name);
+      .rmd-#{$color}-outline {
+        @include theme.theme-set-var(outline-color, $theme-name);
+      }
     }
-  }
 
-  @each $color in (primary, secondary, hint, disabled) {
-    .rmd-text-#{$color}-color {
-      @include theme.theme-use-var(color, text-#{$color}-color);
+    @each $color in (primary, secondary, hint, disabled) {
+      .rmd-text-#{$color}-color {
+        @include theme.theme-use-var(color, text-#{$color}-color);
+      }
     }
-  }
 
-  .rmd-light-surface {
-    @include interaction.use-light-surface;
-    @include theme.theme-set-var(
-      text-primary-color,
-      theme.$light-theme-text-primary-color
-    );
-    @include theme.theme-set-var(
-      text-secondary-color,
-      theme.$light-theme-text-secondary-color
-    );
-    @include theme.theme-set-var(
-      text-hint-color,
-      theme.$light-theme-text-hint-color
-    );
-    @include theme.theme-set-var(
-      text-disabled-color,
-      theme.$dark-theme-text-disabled-color
-    );
-  }
+    .rmd-light-surface {
+      @include interaction.use-light-surface;
+      @include theme.theme-set-var(
+        text-primary-color,
+        theme.$light-theme-text-primary-color
+      );
+      @include theme.theme-set-var(
+        text-secondary-color,
+        theme.$light-theme-text-secondary-color
+      );
+      @include theme.theme-set-var(
+        text-hint-color,
+        theme.$light-theme-text-hint-color
+      );
+      @include theme.theme-set-var(
+        text-disabled-color,
+        theme.$dark-theme-text-disabled-color
+      );
+    }
 
-  .rmd-dark-surface {
-    @include interaction.use-dark-surface;
-    @include theme.theme-set-var(
-      text-primary-color,
-      theme.$dark-theme-text-primary-color
-    );
-    @include theme.theme-set-var(
-      text-secondary-color,
-      theme.$dark-theme-text-secondary-color
-    );
-    @include theme.theme-set-var(
-      text-hint-color,
-      theme.$dark-theme-text-hint-color
-    );
-    @include theme.theme-set-var(
-      text-disabled-color,
-      theme.$dark-theme-text-disabled-color
-    );
-  }
+    .rmd-dark-surface {
+      @include interaction.use-dark-surface;
+      @include theme.theme-set-var(
+        text-primary-color,
+        theme.$dark-theme-text-primary-color
+      );
+      @include theme.theme-set-var(
+        text-secondary-color,
+        theme.$dark-theme-text-secondary-color
+      );
+      @include theme.theme-set-var(
+        text-hint-color,
+        theme.$dark-theme-text-hint-color
+      );
+      @include theme.theme-set-var(
+        text-disabled-color,
+        theme.$dark-theme-text-disabled-color
+      );
+    }
 
-  .rmd-no-margin {
-    margin: 0;
-  }
+    .rmd-no-margin {
+      margin: 0;
+    }
 
-  .rmd-no-margin-top {
-    margin-top: 0;
-  }
+    .rmd-no-margin-top {
+      margin-top: 0;
+    }
 
-  .rmd-no-margin-bottom {
-    margin-bottom: 0;
-  }
+    .rmd-no-margin-bottom {
+      margin-bottom: 0;
+    }
 
-  .rmd-centered {
-    margin: 0 auto;
-  }
+    .rmd-centered {
+      margin: 0 auto;
+    }
 
-  .rmd-nowrap {
-    white-space: nowrap;
-  }
+    .rmd-nowrap {
+      white-space: nowrap;
+    }
 
-  .rmd-ellipsis {
-    @include typography.text-overflow(null);
-  }
+    .rmd-ellipsis {
+      @include typography.text-overflow(null);
+    }
 
-  @each $alignment in typography.$text-alignments {
-    .rmd-align-#{$alignment} {
-      @if $alignment != center {
-        @include utils.auto-rtl(text-align, $alignment);
-      } @else {
-        text-align: $alignment;
+    @each $alignment in typography.$text-alignments {
+      .rmd-align-#{$alignment} {
+        @if $alignment != center {
+          @include utils.auto-rtl(text-align, $alignment);
+        } @else {
+          text-align: $alignment;
+        }
       }
     }
-  }
 
-  @each $decoration in typography.$text-decorations {
-    .rmd-#{$decoration} {
-      text-decoration: $decoration;
+    @each $decoration in typography.$text-decorations {
+      .rmd-#{$decoration} {
+        text-decoration: $decoration;
+      }
     }
-  }
 
-  @each $transform in typography.$text-transforms {
-    .rmd-#{$transform} {
-      text-transform: $transform;
+    @each $transform in typography.$text-transforms {
+      .rmd-#{$transform} {
+        text-transform: $transform;
+      }
     }
-  }
 
-  @each $font-style in typography.$font-styles {
-    .rmd-#{$font-style} {
-      font-style: $font-style;
+    @each $font-style in typography.$font-styles {
+      .rmd-#{$font-style} {
+        font-style: $font-style;
+      }
     }
-  }
 
-  @each $name, $font-weight in typography.$font-weights {
-    .rmd-#{$name} {
-      font-weight: $font-weight;
+    @each $name, $font-weight in typography.$font-weights {
+      .rmd-#{$name} {
+        font-weight: $font-weight;
+      }
     }
   }
 }
@@ -363,124 +365,39 @@ $_layer-order: (
   @include css-reset;
 
   @layer #{$_layer-order};
-  @layer utils {
-    @include css-utils;
-  }
-
-  @layer app-bar {
-    @include app-bar.styles;
-  }
-  @layer avatar {
-    @include avatar.styles;
-  }
-  @layer badge {
-    @include badge.styles;
-  }
-  @layer box {
-    @include box.styles;
-  }
-  @layer button {
-    @include button.styles;
-  }
-  @layer card {
-    @include card.styles;
-  }
-  @layer chip {
-    @include chip.styles;
-  }
-
-  @layer dialog {
-    @include dialog.styles;
-  }
-  @layer divider {
-    @include divider.styles;
-  }
-  @layer draggable {
-    @include draggable.styles;
-  }
-  @layer expansion-panel {
-    @include expansion-panel.styles;
-  }
-
-  @layer form {
-    @include form.styles;
-  }
-
-  @layer icon {
-    @include icon.styles;
-  }
-
-  @layer interaction {
-    @include interaction.styles;
-  }
-
-  @layer layout {
-    @include layout.styles;
-  }
-
-  @layer link {
-    @include link.styles;
-  }
-
-  @layer list {
-    @include list.styles;
-  }
-
-  @layer menu {
-    @include menu.styles;
-  }
-
-  @layer overlay {
-    @include overlay.styles;
-  }
-
-  @layer progress {
-    @include progress.styles;
-  }
-
-  @layer responsive-item {
-    @include responsive-item.styles;
-  }
-
-  @layer segmented-button {
-    @include segmented-button.styles;
-  }
-
-  @layer sheet {
-    @include sheet.styles;
-  }
-
-  @layer snackbar {
-    @include snackbar.styles;
-  }
-
-  @layer table {
-    @include table.styles;
-  }
-
-  @layer tabs {
-    @include tabs.styles;
-  }
-
-  @layer tooltip {
-    @include tooltip.styles;
-  }
-
-  @layer transition {
-    @include transition.transition-styles;
-  }
-
-  @layer tree {
-    @include tree.styles;
-  }
-
-  @layer typography {
-    @include typography.typography-styles;
-  }
-
-  @layer window-splitter {
-    @include window-splitter.styles;
-  }
+  @include css-utils;
+
+  @include app-bar.styles;
+  @include avatar.styles;
+  @include badge.styles;
+  @include box.styles;
+  @include button.styles;
+  @include card.styles;
+  @include chip.styles;
+  @include dialog.styles;
+  @include divider.styles;
+  @include draggable.styles;
+  @include expansion-panel.styles;
+  @include form.styles;
+  @include icon.styles;
+  @include interaction.styles;
+  @include layout.styles;
+  @include link.styles;
+  @include list.styles;
+  @include menu.styles;
+  @include overlay.styles;
+  @include progress.styles;
+  @include responsive-item.styles;
+  @include segmented-button.styles;
+  @include sheet.styles;
+  @include snackbar.styles;
+  @include table.styles;
+  @include tabs.styles;
+  @include tooltip.styles;
+  @include transition.transition-styles;
+  @include tree.styles;
+  @include typography.typography-styles;
+  @include window-splitter.styles;
 
   @if not theme.$disable-default-root-theme {
     :root {

package/src/_utils.scss

@@ -336,3 +336,13 @@ $_swappable-properties: text-align;
     }
   }
 }
+
+@mixin optional-layer($name, $disabled) {
+  @if $disabled {
+    @content;
+  } @else {
+    @layer #{$name} {
+      @content;
+    }
+  }
+}

package/src/app-bar/_app-bar.scss

@@ -117,128 +117,130 @@ $variables: (height, surface-background-color, surface-color);
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    @include theme.default-system-theme {
-      @include use-dark-theme;
-    }
+    @include utils.optional-layer(app-bar, $disable-layer) {
+      @include theme.default-system-theme {
+        @include use-dark-theme;
+      }
 
-    .rmd-app-bar {
-      @include use-var(height);
-      @include box.set-var(gap, $gap);
-      @include box.set-var(padding, $vertical-padding $horizontal-padding);
-
-      // since app bars can appear a lot in full page dialogs, setting these flex
-      // values allows it be be a direct replacement of the `DialogHeader`
-      // component without all the offsets and additional styles needed for fixed
-      // app bars.
-      flex: 0 0 auto;
-
-      @if not $disable-fixed or not $disable-sticky {
-        &--fixed {
-          left: 0;
-          position: fixed;
-          // Note: right and width were added to support the main navigation
-          // behavior with toggleable full-height navigation
-          right: 0;
-          width: auto;
-          z-index: $fixed-z-index;
-        }
+      .rmd-app-bar {
+        @include use-var(height);
+        @include box.set-var(gap, $gap);
+        @include box.set-var(padding, $vertical-padding $horizontal-padding);
+
+        // since app bars can appear a lot in full page dialogs, setting these flex
+        // values allows it be be a direct replacement of the `DialogHeader`
+        // component without all the offsets and additional styles needed for fixed
+        // app bars.
+        flex: 0 0 auto;
+
+        @if not $disable-fixed or not $disable-sticky {
+          &--fixed {
+            left: 0;
+            position: fixed;
+            // Note: right and width were added to support the main navigation
+            // behavior with toggleable full-height navigation
+            right: 0;
+            width: auto;
+            z-index: $fixed-z-index;
+          }
 
-        @if $fixed-elevation and $fixed-elevation != 0 {
-          &--elevated {
-            @include box-shadows.box-shadow(
-              $fixed-elevation,
-              $disable-colors: true
-            );
+          @if $fixed-elevation and $fixed-elevation != 0 {
+            &--elevated {
+              @include box-shadows.box-shadow(
+                $fixed-elevation,
+                $disable-colors: true
+              );
+            }
           }
-        }
 
-        @each $position in $fixed-positions {
-          &--#{$position} {
-            #{$position}: 0;
+          @each $position in $fixed-positions {
+            &--#{$position} {
+              #{$position}: 0;
+            }
           }
-        }
 
-        @if not $disable-sticky {
-          &--sticky {
-            position: sticky;
+          @if not $disable-sticky {
+            &--sticky {
+              position: sticky;
+            }
           }
         }
-      }
 
-      &--auto {
-        // do not set variable so that child AppBar can maintain their height as needed
-        height: auto;
-      }
-
-      &--stacked {
-        flex-direction: column;
-        gap: 0;
-        padding: 0;
-      }
-
-      @if not $disable-dense-theme {
-        &--dense {
-          @include set-var(height, $dense-height);
+        &--auto {
+          // do not set variable so that child AppBar can maintain their height as needed
+          height: auto;
         }
-      }
 
-      @if not $disable-prominent-theme {
-        &--prominent {
-          @include set-var(height, $prominent-height);
+        &--stacked {
+          flex-direction: column;
+          gap: 0;
+          padding: 0;
         }
-      }
 
-      @if not $disable-prominent-dense-theme {
-        &--prominent-dense {
-          @include set-var(height, $prominent-dense-height);
+        @if not $disable-dense-theme {
+          &--dense {
+            @include set-var(height, $dense-height);
+          }
         }
-      }
 
-      @if not $disable-surface-theme {
-        &--surface {
-          @include use-var(background-color, surface-background-color);
-          @include use-var(color, surface-color);
+        @if not $disable-prominent-theme {
+          &--prominent {
+            @include set-var(height, $prominent-height);
+          }
         }
-      }
 
-      @if not $disable-scrollbar-offset {
-        &--scrollbar-offset {
-          @include utils.rtl {
-            margin-right: calc(-1 * #{utils.scrollbar-size()});
+        @if not $disable-prominent-dense-theme {
+          &--prominent-dense {
+            @include set-var(height, $prominent-dense-height);
           }
+        }
 
-          padding-right: calc(
-            #{$horizontal-padding} + #{utils.scrollbar-size()}
-          );
+        @if not $disable-surface-theme {
+          &--surface {
+            @include use-var(background-color, surface-background-color);
+            @include use-var(color, surface-color);
+          }
         }
 
-        @if not $disable-static-scrollbar-offset {
-          &--static-scrollbar-offset {
-            width: calc(100% + utils.scrollbar-size());
+        @if not $disable-scrollbar-offset {
+          &--scrollbar-offset {
+            @include utils.rtl {
+              margin-right: calc(-1 * #{utils.scrollbar-size()});
+            }
+
+            padding-right: calc(
+              #{$horizontal-padding} + #{utils.scrollbar-size()}
+            );
+          }
+
+          @if not $disable-static-scrollbar-offset {
+            &--static-scrollbar-offset {
+              width: calc(100% + utils.scrollbar-size());
+            }
           }
         }
       }
-    }
 
-    @if not $disable-title {
-      .rmd-app-bar-title {
-        @include utils.auto-rtl(margin-left, $keyline - $horizontal-padding);
+      @if not $disable-title {
+        .rmd-app-bar-title {
+          @include utils.auto-rtl(margin-left, $keyline - $horizontal-padding);
 
-        flex: 1 1 auto;
-        margin-bottom: 0;
-        margin-top: 0;
+          flex: 1 1 auto;
+          margin-bottom: 0;
+          margin-top: 0;
 
-        &--keyline {
-          @include utils.auto-rtl(
-            margin-left,
-            $title-keyline - $horizontal-padding
-          );
-        }
+          &--keyline {
+            @include utils.auto-rtl(
+              margin-left,
+              $title-keyline - $horizontal-padding
+            );
+          }
 
-        &--nav-keyline {
-          @include utils.auto-rtl(margin-left, $nav-keyline);
+          &--nav-keyline {
+            @include utils.auto-rtl(margin-left, $nav-keyline);
+          }
         }
       }
     }