@react-md/core 1.0.0-next.4 → 1.0.0-next.6

package/src/segmented-button/_segmented-button.scss

@@ -138,65 +138,70 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-segmented-button-container {
-      display: grid;
-      grid-auto-columns: 1fr;
-      grid-auto-flow: column;
-
-      &--full-width {
-        width: 100%;
-      }
-    }
-
-    .rmd-segmented-button {
-      @include theme.theme-use-var(color, text-primary-color);
-      @include icon.set-var(color, currentcolor);
-      @include icon.set-var(size, 1.125rem);
-      @include utils.map-to-styles($typography-styles);
-
-      align-items: center;
-      background-color: transparent;
-      border: 0;
-      box-shadow: inset 0 0 0 get-var(outline-width) get-var(outline-color);
-      display: inline-flex;
-      gap: $gap;
-      justify-content: center;
-      min-height: $min-height;
-      min-width: $min-width;
-      padding: $vertical-padding $horizontal-padding;
-
-      &:first-child {
-        @include utils.rtl {
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: $border-radius;
-          border-top-left-radius: 0;
-          border-top-right-radius: $border-radius;
+    @include utils.optional-layer(segmented-button, $disable-layer) {
+      .rmd-segmented-button-container {
+        display: grid;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+
+        &--full-width {
+          width: 100%;
         }
-
-        border-bottom-left-radius: $border-radius;
-        border-top-left-radius: $border-radius;
       }
 
-      &:last-child {
-        @include utils.rtl {
+      .rmd-segmented-button {
+        @include theme.theme-use-var(color, text-primary-color);
+        @include icon.set-var(color, currentcolor);
+        @include icon.set-var(size, 1.125rem);
+        @include utils.map-to-styles($typography-styles);
+
+        align-items: center;
+        background-color: transparent;
+        border: 0;
+        box-shadow: inset 0 0 0 get-var(outline-width) get-var(outline-color);
+        display: inline-flex;
+        gap: $gap;
+        justify-content: center;
+        min-height: $min-height;
+        min-width: $min-width;
+        padding: $vertical-padding $horizontal-padding;
+
+        &:first-child {
+          @include utils.rtl {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: $border-radius;
+            border-top-left-radius: 0;
+            border-top-right-radius: $border-radius;
+          }
+
           border-bottom-left-radius: $border-radius;
-          border-bottom-right-radius: 0;
           border-top-left-radius: $border-radius;
-          border-top-right-radius: 0;
         }
 
-        border-bottom-right-radius: $border-radius;
-        border-top-right-radius: $border-radius;
-      }
+        &:last-child {
+          @include utils.rtl {
+            border-bottom-left-radius: $border-radius;
+            border-bottom-right-radius: 0;
+            border-top-left-radius: $border-radius;
+            border-top-right-radius: 0;
+          }
+
+          border-bottom-right-radius: $border-radius;
+          border-top-right-radius: $border-radius;
+        }
 
-      &--selected {
-        @if not $disable-selected-icon {
-          @include transition.transition-set-var(max-width, icon.get-var(size));
+        &--selected {
+          @if not $disable-selected-icon {
+            @include transition.transition-set-var(
+              max-width,
+              icon.get-var(size)
+            );
+          }
+          @include use-var(background-color, selected-background-color);
+          @include use-var(color, selected-color);
         }
-        @include use-var(background-color, selected-background-color);
-        @include use-var(color, selected-color);
       }
     }
   }

package/src/sheet/_sheet.scss

@@ -69,118 +69,120 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-sheet {
-      @include box-shadows.box-shadow($elevation);
-      @include use-var(height);
-      @include use-var(max-height);
-      @include use-var(width);
-      @include use-var(z-index);
-
-      overflow: auto;
-      position: fixed;
-
-      @if not $disable-position-left or not $disable-position-right {
-        &--horizontal {
-          bottom: 0;
-          top: 0;
+    @include utils.optional-layer(sheet, $disable-layer) {
+      .rmd-sheet {
+        @include box-shadows.box-shadow($elevation);
+        @include use-var(height);
+        @include use-var(max-height);
+        @include use-var(width);
+        @include use-var(z-index);
+
+        overflow: auto;
+        position: fixed;
+
+        @if not $disable-position-left or not $disable-position-right {
+          &--horizontal {
+            bottom: 0;
+            top: 0;
+          }
         }
-      }
 
-      @if not $disable-position-bottom or not $disable-position-top {
-        &--vertical {
-          left: 0;
-          right: 0;
+        @if not $disable-position-bottom or not $disable-position-top {
+          &--vertical {
+            left: 0;
+            right: 0;
+          }
         }
-      }
 
-      &--raised {
-        @include set-var(z-index, $raised-z-index);
-        @include box-shadows.box-shadow($raised-elevation);
-      }
+        &--raised {
+          @include set-var(z-index, $raised-z-index);
+          @include box-shadows.box-shadow($raised-elevation);
+        }
 
-      @if not $disable-position-left {
-        &--left {
-          @include utils.auto-rtl(left, 0) {
-            @include set-var(transform-offscreen, translate3d(100%, 0, 0));
+        @if not $disable-position-left {
+          &--left {
+            @include utils.auto-rtl(left, 0) {
+              @include set-var(transform-offscreen, translate3d(100%, 0, 0));
+            }
+            @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
           }
-          @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
         }
-      }
 
-      @if not $disable-position-right {
-        &--right {
-          @include utils.auto-rtl(right, 0) {
-            @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
+        @if not $disable-position-right {
+          &--right {
+            @include utils.auto-rtl(right, 0) {
+              @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
+            }
+            @include set-var(transform-offscreen, translate3d(100%, 0, 0));
           }
-          @include set-var(transform-offscreen, translate3d(100%, 0, 0));
         }
-      }
 
-      @if not $disable-position-bottom {
-        &--bottom {
-          @include set-var(transform-offscreen, translate3d(0, 100%, 0));
+        @if not $disable-position-bottom {
+          &--bottom {
+            @include set-var(transform-offscreen, translate3d(0, 100%, 0));
 
-          bottom: 0;
+            bottom: 0;
+          }
         }
-      }
 
-      @if not $disable-position-top {
-        &--top {
-          @include set-var(transform-offscreen, translate3d(0, -100%, 0));
+        @if not $disable-position-top {
+          &--top {
+            @include set-var(transform-offscreen, translate3d(0, -100%, 0));
 
-          top: 0;
+            top: 0;
+          }
         }
-      }
 
-      &--touch-width {
-        @include set-var(width, get-var(touch-width));
-      }
-
-      &--static-width {
-        @include set-var(width, get-var(static-width));
-      }
+        &--touch-width {
+          @include set-var(width, get-var(touch-width));
+        }
 
-      &--media-width {
-        @include media-queries.tablet-media {
+        &--static-width {
           @include set-var(width, get-var(static-width));
         }
 
-        @include set-var(width, get-var(touch-width));
-      }
+        &--media-width {
+          @include media-queries.tablet-media {
+            @include set-var(width, get-var(static-width));
+          }
 
-      &--viewport-height {
-        @include set-var(max-height, $max-height);
-      }
+          @include set-var(width, get-var(touch-width));
+        }
 
-      &--touchable-height {
-        @include set-var(max-height, get-var(touch-max-height));
-      }
+        &--viewport-height {
+          @include set-var(max-height, $max-height);
+        }
 
-      &--recommended-height {
-        max-height: $recommended-max-height;
-        min-height: $recommended-min-height;
-      }
+        &--touchable-height {
+          @include set-var(max-height, get-var(touch-max-height));
+        }
 
-      &--offscreen {
-        @include use-var(transform, transform-offscreen);
-      }
+        &--recommended-height {
+          max-height: $recommended-max-height;
+          min-height: $recommended-min-height;
+        }
 
-      &--hidden {
-        box-shadow: none;
-      }
+        &--offscreen {
+          @include use-var(transform, transform-offscreen);
+        }
 
-      &--visible {
-        transform: translate3d(0, 0, 0);
-      }
+        &--hidden {
+          box-shadow: none;
+        }
 
-      &--enter {
-        transition: transform $enter-duration $enter-timing-function;
-      }
+        &--visible {
+          transform: translate3d(0, 0, 0);
+        }
 
-      &--exit {
-        transition: transform $leave-duration $leave-timing-function;
+        &--enter {
+          transition: transform $enter-duration $enter-timing-function;
+        }
+
+        &--exit {
+          transition: transform $leave-duration $leave-timing-function;
+        }
       }
     }
   }

package/src/snackbar/_snackbar.scss

@@ -89,164 +89,169 @@ $variables: (background-color, color, offset);
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-snackbar {
-      align-items: $default-align-items;
-      display: flex;
-      flex-direction: column;
-      gap: $gap;
-      left: 0;
-      margin: $margin;
-      pointer-events: none;
-      position: fixed;
-      right: 0;
-      z-index: $z-index;
-
-      @if not $disable-top or not $disable-top-left or not $disable-bottom-left
-      {
-        &--top {
-          @include use-var(top, offset);
-        }
-      }
-
-      @if not
-        $disable-bottom or not
-        $disable-bottom-left or not
-        $disable-bottom-right
-      {
-        &--bottom {
-          @include use-var(bottom, offset);
+    @include utils.optional-layer(snackbar, $disable-layer) {
+      .rmd-snackbar {
+        align-items: $default-align-items;
+        display: flex;
+        flex-direction: column;
+        gap: $gap;
+        left: 0;
+        margin: $margin;
+        pointer-events: none;
+        position: fixed;
+        right: 0;
+        z-index: $z-index;
+
+        @if not
+          $disable-top or not
+          $disable-top-left or not
+          $disable-bottom-left
+        {
+          &--top {
+            @include use-var(top, offset);
+          }
         }
-      }
 
-      @if not $disable-top-left or not $disable-bottom-left {
-        &--start {
-          align-items: flex-start;
+        @if not
+          $disable-bottom or not
+          $disable-bottom-left or not
+          $disable-bottom-right
+        {
+          &--bottom {
+            @include use-var(bottom, offset);
+          }
         }
-      }
 
-      @if not $disable-top-right or not $disable-bottom-right {
-        &--end {
-          align-items: flex-end;
+        @if not $disable-top-left or not $disable-bottom-left {
+          &--start {
+            align-items: flex-start;
+          }
         }
-      }
-    }
 
-    .rmd-toast {
-      @include box-shadows.box-shadow($box-shadow, $disable-colors: true);
-      @include utils.map-to-styles($typography);
-      @include use-var(background-color);
-      @include use-var(color);
-
-      align-items: center;
-      border-radius: $border-radius;
-      display: flex;
-      gap: $toast-gap;
-      justify-content: space-between;
-      max-width: $max-width;
-      min-height: $min-height;
-      padding-left: $horizontal-padding;
-      padding-right: $horizontal-padding;
-      pointer-events: auto;
-      width: 100%;
-
-      @include media-queries.tablet-media {
-        min-width: $min-width;
-        width: auto;
-      }
-
-      @if not $disable-action-button {
-        &--action {
-          @include utils.auto-rtl(
-            padding-right,
-            $action-horizontal-padding,
-            $horizontal-padding
-          );
+        @if not $disable-top-right or not $disable-bottom-right {
+          &--end {
+            align-items: flex-end;
+          }
         }
       }
 
-      @if not $disable-close-button {
-        &--x {
-          @include utils.auto-rtl(
-            padding-right,
-            $close-button-horizontal-padding,
-            $horizontal-padding
-          );
+      .rmd-toast {
+        @include box-shadows.box-shadow($box-shadow, $disable-colors: true);
+        @include utils.map-to-styles($typography);
+        @include use-var(background-color);
+        @include use-var(color);
+
+        align-items: center;
+        border-radius: $border-radius;
+        display: flex;
+        gap: $toast-gap;
+        justify-content: space-between;
+        max-width: $max-width;
+        min-height: $min-height;
+        padding-left: $horizontal-padding;
+        padding-right: $horizontal-padding;
+        pointer-events: auto;
+        width: 100%;
+
+        @include media-queries.tablet-media {
+          min-width: $min-width;
+          width: auto;
         }
 
         @if not $disable-action-button {
-          &--small-gap {
-            gap: $toast-gap-both-buttons;
+          &--action {
+            @include utils.auto-rtl(
+              padding-right,
+              $action-horizontal-padding,
+              $horizontal-padding
+            );
           }
         }
-      }
 
-      @if not $disable-stacked {
-        &--stacked {
-          display: grid;
-          gap: $toast-gap-stacked;
-          grid-template-columns: 1fr;
-          padding-bottom: $vertical-padding;
-          padding-top: $vertical-padding;
+        @if not $disable-close-button {
+          &--x {
+            @include utils.auto-rtl(
+              padding-right,
+              $close-button-horizontal-padding,
+              $horizontal-padding
+            );
+          }
+
+          @if not $disable-action-button {
+            &--small-gap {
+              gap: $toast-gap-both-buttons;
+            }
+          }
         }
 
-        &--reordered {
-          grid-template-columns: 1fr min-content;
-          padding-top: 0;
+        @if not $disable-stacked {
+          &--stacked {
+            display: grid;
+            gap: $toast-gap-stacked;
+            grid-template-columns: 1fr;
+            padding-bottom: $vertical-padding;
+            padding-top: $vertical-padding;
+          }
+
+          &--reordered {
+            grid-template-columns: 1fr min-content;
+            padding-top: 0;
+          }
         }
       }
-    }
 
-    .rmd-toast-content {
-      flex: 1 1 auto;
+      .rmd-toast-content {
+        flex: 1 1 auto;
 
-      p {
-        margin: 0;
-      }
+        p {
+          margin: 0;
+        }
 
-      &--v-padding {
-        padding: $vertical-padding 0;
-      }
+        &--v-padding {
+          padding: $vertical-padding 0;
+        }
 
-      &--t-padding {
-        padding-bottom: 0;
-      }
+        &--t-padding {
+          padding-bottom: 0;
+        }
 
-      @if not $disable-action-button {
-        &--action {
-          @include utils.auto-rtl(
-            padding-right,
-            button.$text-horizontal-padding
-          );
+        @if not $disable-action-button {
+          &--action {
+            @include utils.auto-rtl(
+              padding-right,
+              button.$text-horizontal-padding
+            );
+          }
         }
-      }
 
-      @if not $disable-close-button and not $disable-action-button {
-        &--gap {
-          @include utils.auto-rtl(margin-right, $toast-gap);
+        @if not $disable-close-button and not $disable-action-button {
+          &--gap {
+            @include utils.auto-rtl(margin-right, $toast-gap);
+          }
         }
       }
-    }
 
-    @if not $disable-close-button {
-      .rmd-toast-x {
-        &--reordered {
-          align-self: flex-start;
-          order: 2;
+      @if not $disable-close-button {
+        .rmd-toast-x {
+          &--reordered {
+            align-self: flex-start;
+            order: 2;
+          }
         }
       }
-    }
 
-    @if not $disable-action-button {
-      .rmd-toast-action {
-        justify-self: flex-end;
+      @if not $disable-action-button {
+        .rmd-toast-action {
+          justify-self: flex-end;
 
-        &--reordered {
-          @include utils.auto-rtl(margin-right, $action-horizontal-padding);
+          &--reordered {
+            @include utils.auto-rtl(margin-right, $action-horizontal-padding);
 
-          grid-column-end: span 2;
-          order: 3;
+            grid-column-end: span 2;
+            order: 3;
+          }
         }
       }
     }