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

package/dist/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);
+          }
         }
       }
     }

package/dist/avatar/_avatar.scss

@@ -93,61 +93,63 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-avatar {
-      @if not $disable-icon {
-        @include icon.set-var(color, currentcolor);
-      }
-      @include utils.map-to-styles(typography.$base-font-styles);
-      @include use-var(background-color);
-      @include use-var(border-radius);
-      @include use-var(color);
-      @include use-var(font-size);
-      @include use-var(height, size);
-      @include use-var(width, size);
-
-      align-items: center;
-      border: 1px solid get-var(border-color);
-      display: inline-flex;
-      flex-shrink: 0;
-      justify-content: center;
-      line-height: $line-height;
-      overflow: hidden;
-
-      @if not $disable-icon-size {
-        &--icon {
-          @include set-var(size, $icon-sized-size);
-
-          font-size: $icon-sized-font-size;
+    @include utils.optional-layer(avatar, $disable-layer) {
+      .rmd-avatar {
+        @if not $disable-icon {
+          @include icon.set-var(color, currentcolor);
         }
-      }
-
-      @if not $disable-image {
-        &__image {
-          height: 100%;
-          width: auto;
+        @include utils.map-to-styles(typography.$base-font-styles);
+        @include use-var(background-color);
+        @include use-var(border-radius);
+        @include use-var(color);
+        @include use-var(font-size);
+        @include use-var(height, size);
+        @include use-var(width, size);
+
+        align-items: center;
+        border: 1px solid get-var(border-color);
+        display: inline-flex;
+        flex-shrink: 0;
+        justify-content: center;
+        line-height: $line-height;
+        overflow: hidden;
+
+        @if not $disable-icon-size {
+          &--icon {
+            @include set-var(size, $icon-sized-size);
+
+            font-size: $icon-sized-font-size;
+          }
         }
-      }
 
-      @if not $disable-auto-image {
-        img {
-          height: 100%;
-          width: auto;
+        @if not $disable-image {
+          &__image {
+            height: 100%;
+            width: auto;
+          }
         }
-      }
 
-      @each $name, $values in $colors {
-        @if length($values) != 2 {
-          @error 'Unable to create an avatar color because the list of values is not of length 2. The first value should be the background-color and the second should be the text color. "#{$values}"';
+        @if not $disable-auto-image {
+          img {
+            height: 100%;
+            width: auto;
+          }
         }
 
-        @include custom-color(
-          "&--#{$name}",
-          nth($values, 2),
-          nth($values, 1),
-          true
-        );
+        @each $name, $values in $colors {
+          @if length($values) != 2 {
+            @error 'Unable to create an avatar color because the list of values is not of length 2. The first value should be the background-color and the second should be the text color. "#{$values}"';
+          }
+
+          @include custom-color(
+            "&--#{$name}",
+            nth($values, 2),
+            nth($values, 1),
+            true
+          );
+        }
       }
     }
   }

package/dist/badge/_badge.scss

@@ -112,26 +112,28 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-badge {
-      @include utils.map-to-styles($typography);
-      @include use-var(height, size);
-      @include use-var(width, size);
-      @include utils.auto-rtl(right, get-var(offset-right, get-var(offset)));
-      @include use-var(top, offset-top, get-var(offset));
+    @include utils.optional-layer(badge, $disable-layer) {
+      .rmd-badge {
+        @include utils.map-to-styles($typography);
+        @include use-var(height, size);
+        @include use-var(width, size);
+        @include utils.auto-rtl(right, get-var(offset-right, get-var(offset)));
+        @include use-var(top, offset-top, get-var(offset));
 
-      align-items: center;
-      border-radius: $border-radius;
-      display: inline-flex;
-      justify-content: center;
-      pointer-events: none; // badges are _kind_ of presentational and shouldn't trigger mouse events
-      position: absolute;
+        align-items: center;
+        border-radius: $border-radius;
+        display: inline-flex;
+        justify-content: center;
+        pointer-events: none; // badges are _kind_ of presentational and shouldn't trigger mouse events
+        position: absolute;
 
-      @if not $disable-greyscale-theme {
-        &--greyscale {
-          @include use-var(background-color, greyscale-background-color);
-          @include use-var(color, greyscale-color);
+        @if not $disable-greyscale-theme {
+          &--greyscale {
+            @include use-var(background-color, greyscale-background-color);
+            @include use-var(color, greyscale-color);
+          }
         }
       }
     }

package/dist/box/_box.scss

@@ -83,82 +83,84 @@ $variables: (gap, padding, item-min-size, columns);
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-box {
-      @include use-var(gap, gap);
+    @include utils.optional-layer(box, $disable-layer) {
+      .rmd-box {
+        @include use-var(gap, gap);
 
-      align-items: $default-align-items;
-      display: flex;
+        align-items: $default-align-items;
+        display: flex;
 
-      &--padded {
-        @include use-var(padding);
-      }
-
-      &--wrap {
-        flex-wrap: wrap;
-      }
-
-      &--full-width {
-        width: 100%;
-      }
+        &--padded {
+          @include use-var(padding);
+        }
 
-      @if not $disable-stacked {
-        &--column {
-          flex-direction: column;
+        &--wrap {
+          flex-wrap: wrap;
         }
-      }
 
-      @if not $disable-reversed {
-        &--reverse {
-          flex-direction: row-reverse;
+        &--full-width {
+          width: 100%;
         }
 
         @if not $disable-stacked {
-          &--column-reverse {
-            flex-direction: column-reverse;
+          &--column {
+            flex-direction: column;
           }
         }
-      }
 
-      @each $value in $align-items {
-        &--align-#{$value} {
-          align-items: $value;
-        }
-      }
+        @if not $disable-reversed {
+          &--reverse {
+            flex-direction: row-reverse;
+          }
 
-      @each $value in $justify-content {
-        &--justify-#{utils.str-replace($value, "space-", "")} {
-          justify-content: $value;
+          @if not $disable-stacked {
+            &--column-reverse {
+              flex-direction: column-reverse;
+            }
+          }
         }
-      }
 
-      @if not $disable-grid {
-        &--grid {
-          display: grid;
-          grid-template-columns: repeat(
-            get-var(columns),
-            minmax(get-var(item-min-size), 1fr)
-          );
+        @each $value in $align-items {
+          &--align-#{$value} {
+            align-items: $value;
+          }
         }
 
-        &--grid-fill {
-          @include set-var(columns, auto-fill);
+        @each $value in $justify-content {
+          &--justify-#{utils.str-replace($value, "space-", "")} {
+            justify-content: $value;
+          }
         }
 
-        @if not $disable-grid-columns {
-          &--grid-columns {
-            @include set-var(item-min-size, 0);
+        @if not $disable-grid {
+          &--grid {
+            display: grid;
+            grid-template-columns: repeat(
+              get-var(columns),
+              minmax(get-var(item-min-size), 1fr)
+            );
           }
-        }
 
-        @each $name, $values in $grids {
-          @include custom-grid-class(
-            "&--#{$name}",
-            $min: map.get($values, min),
-            $gap: map.get($values, gap),
-            $padding: map.get($values, padding)
-          );
+          &--grid-fill {
+            @include set-var(columns, auto-fill);
+          }
+
+          @if not $disable-grid-columns {
+            &--grid-columns {
+              @include set-var(item-min-size, 0);
+            }
+          }
+
+          @each $name, $values in $grids {
+            @include custom-grid-class(
+              "&--#{$name}",
+              $min: map.get($values, min),
+              $gap: map.get($values, gap),
+              $padding: map.get($values, padding)
+            );
+          }
         }
       }
     }