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

package/src/chip/_chip.scss

@@ -189,132 +189,134 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    @include theme.default-system-theme {
-      @include use-dark-theme;
-    }
-
-    .rmd-chip {
-      @if not $disable-icon {
-        @include icon.set-var(size, $icon-size);
+    @include utils.optional-layer(chip, $disable-layer) {
+      @include theme.default-system-theme {
+        @include use-dark-theme;
       }
 
-      @if not $disable-avatar {
-        @include avatar.set-var(size, $avatar-size);
-      }
+      .rmd-chip {
+        @if not $disable-icon {
+          @include icon.set-var(size, $icon-size);
+        }
 
-      @if not $disable-progress {
-        @include progress.set-var(circular-size, $progress-size);
-        @include progress.set-var(circular-stroke-width, $progress-width);
-      }
+        @if not $disable-avatar {
+          @include avatar.set-var(size, $avatar-size);
+        }
 
-      @if not $disable-selected-icon-transition and $gap {
-        @include transition.transition-set-var(max-width, icon.get-var(size));
-        @include transition.transition-set-var(max-width-gap, $gap);
-      }
-      @include utils.map-to-styles($typography);
-
-      align-items: center;
-      border-radius: $border-radius;
-      border-width: 0;
-      display: inline-flex;
-      flex-shrink: 0;
-      gap: $gap;
-      height: $height;
-      justify-content: center;
-      max-width: 100%;
-      padding: $vertical-padding $horizontal-padding;
-
-      @if not $disable-solid-theme {
-        &--solid {
-          @if not $disable-solid-raisable {
-            @include box-shadows.elevation-transition(
-              $start-z-value: 0,
-              $end-z-value: $solid-raisable-box-shadow-z-value,
-              $duration: $solid-raisable-transition-duration,
-              $active-selectors: "&.rmd-chip--pressed",
-              $pseudo-before: false,
-              $position-relative: false
-            );
+        @if not $disable-progress {
+          @include progress.set-var(circular-size, $progress-size);
+          @include progress.set-var(circular-stroke-width, $progress-width);
+        }
+
+        @if not $disable-selected-icon-transition and $gap {
+          @include transition.transition-set-var(max-width, icon.get-var(size));
+          @include transition.transition-set-var(max-width-gap, $gap);
+        }
+        @include utils.map-to-styles($typography);
+
+        align-items: center;
+        border-radius: $border-radius;
+        border-width: 0;
+        display: inline-flex;
+        flex-shrink: 0;
+        gap: $gap;
+        height: $height;
+        justify-content: center;
+        max-width: 100%;
+        padding: $vertical-padding $horizontal-padding;
+
+        @if not $disable-solid-theme {
+          &--solid {
+            @if not $disable-solid-raisable {
+              @include box-shadows.elevation-transition(
+                $start-z-value: 0,
+                $end-z-value: $solid-raisable-box-shadow-z-value,
+                $duration: $solid-raisable-transition-duration,
+                $active-selectors: "&.rmd-chip--pressed",
+                $pseudo-before: false,
+                $position-relative: false
+              );
+            }
+            @include use-var(background-color, solid-background-color);
+            @include use-var(color, solid-color);
           }
-          @include use-var(background-color, solid-background-color);
-          @include use-var(color, solid-color);
         }
-      }
 
-      @if not $disable-outline-theme {
-        &--outline {
-          @if not $disable-outline-raisable {
-            $outline-box-shadow: inset
-              0
-              0
-              0
-              #{get-var(outline-width)}
-              #{get-var(outline-color)};
-
-            @include box-shadows.box-shadow-transition(
-              $start-shadow: $outline-box-shadow,
-              $end-shadow:
-                box-shadows.box-shadow($outline-raisable-box-shadow-z-value),
-              $duration: $outline-raisable-transition-duration,
-              $active-selectors: "&.rmd-chip--pressed",
-              $pseudo-before: false,
-              $position-relative: false
-            );
+        @if not $disable-outline-theme {
+          &--outline {
+            @if not $disable-outline-raisable {
+              $outline-box-shadow: inset
+                0
+                0
+                0
+                #{get-var(outline-width)}
+                #{get-var(outline-color)};
+
+              @include box-shadows.box-shadow-transition(
+                $start-shadow: $outline-box-shadow,
+                $end-shadow:
+                  box-shadows.box-shadow($outline-raisable-box-shadow-z-value),
+                $duration: $outline-raisable-transition-duration,
+                $active-selectors: "&.rmd-chip--pressed",
+                $pseudo-before: false,
+                $position-relative: false
+              );
+            }
+            @include use-var(background-color, outline-background-color);
+            @include use-var(color, outline-text-color);
           }
-          @include use-var(background-color, outline-background-color);
-          @include use-var(color, outline-text-color);
         }
-      }
 
-      @if not $disable-selected-theme {
-        &--themed {
-          @include use-var(background-color, theme-background-color);
-          @include use-var(color, theme-color);
-          @if not $disable-icon {
-            @include icon.set-var(color, currentcolor);
+        @if not $disable-selected-theme {
+          &--themed {
+            @include use-var(background-color, theme-background-color);
+            @include use-var(color, theme-color);
+            @if not $disable-icon {
+              @include icon.set-var(color, currentcolor);
+            }
           }
         }
-      }
 
-      &--disabled {
-        @if not $disable-icon {
-          @include icon.set-var(color, currentcolor);
+        &--disabled {
+          @if not $disable-icon {
+            @include icon.set-var(color, currentcolor);
+          }
         }
-      }
 
-      @if not $disable-solid-theme {
-        &--solid-disabled {
-          @include use-var(background-color, solid-disabled-background-color);
+        @if not $disable-solid-theme {
+          &--solid-disabled {
+            @include use-var(background-color, solid-disabled-background-color);
+          }
         }
-      }
 
-      @if not $disable-left-addon {
-        &--left-addon {
-          @include utils.auto-rtl(
-            padding-left,
-            $addon-left-padding,
-            $horizontal-padding
-          );
+        @if not $disable-left-addon {
+          &--left-addon {
+            @include utils.auto-rtl(
+              padding-left,
+              $addon-left-padding,
+              $horizontal-padding
+            );
+          }
         }
-      }
 
-      @if not $disable-right-addon {
-        &--right-addon {
-          @include utils.auto-rtl(
-            padding-right,
-            $addon-right-padding,
-            $horizontal-padding
-          );
+        @if not $disable-right-addon {
+          &--right-addon {
+            @include utils.auto-rtl(
+              padding-right,
+              $addon-right-padding,
+              $horizontal-padding
+            );
+          }
         }
-      }
 
-      @if not $disable-content {
-        &__content {
-          @include typography.text-overflow;
+        @if not $disable-content {
+          &__content {
+            @include typography.text-overflow;
 
-          flex: 1 1 auto;
+            flex: 1 1 auto;
+          }
         }
       }
     }

package/src/dialog/_dialog.scss

@@ -100,168 +100,170 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-dialog-container {
-      @include use-var(z-index);
-
-      align-items: center;
-      display: flex;
-      inset: 0;
-      justify-content: center;
-      margin: get-var(vertical-margin) get-var(horizontal-margin);
-      margin-right: calc(
-        #{get-var(horizontal-margin)} + #{utils.scrollbar-size()}
-      );
-      pointer-events: none;
-      position: fixed;
-    }
+    @include utils.optional-layer(dialog, $disable-layer) {
+      .rmd-dialog-container {
+        @include use-var(z-index);
 
-    .rmd-dialog {
-      @include box-shadows.box-shadow($elevation);
+        align-items: center;
+        display: flex;
+        inset: 0;
+        justify-content: center;
+        margin: get-var(vertical-margin) get-var(horizontal-margin);
+        margin-right: calc(
+          #{get-var(horizontal-margin)} + #{utils.scrollbar-size()}
+        );
+        pointer-events: none;
+        position: fixed;
+      }
 
-      background-color: $background-color;
-      color: $color;
-      display: flex;
-      flex-direction: column;
-      max-height: 100%;
-      max-width: 100%;
-      outline: none;
+      .rmd-dialog {
+        @include box-shadows.box-shadow($elevation);
 
-      &--centered {
-        @include use-var(min-width);
+        background-color: $background-color;
+        color: $color;
+        display: flex;
+        flex-direction: column;
+        max-height: 100%;
+        max-width: 100%;
+        outline: none;
 
-        pointer-events: auto;
-      }
+        &--centered {
+          @include use-var(min-width);
 
-      &--full-page {
-        @include use-var(z-index);
+          pointer-events: auto;
+        }
 
-        height: 100%;
-        inset: 0;
-        overflow: auto;
-        position: fixed;
-        width: 100%;
-      }
+        &--full-page {
+          @include use-var(z-index);
 
-      @if not $disable-focus-outline {
-        // Note: Do not use the `interaction-outline` mixin +
-        // `interaction.set-var(interaction.$focus-color)` like normal focus
-        // elements since it'll make all focusable children update with the
-        // outline color as well
-        @if utils.$disable-focus-visible {
-          @include utils.keyboard-only {
-            &--outline:focus {
-              outline: interaction.get-var(focus-color) solid
+          height: 100%;
+          inset: 0;
+          overflow: auto;
+          position: fixed;
+          width: 100%;
+        }
+
+        @if not $disable-focus-outline {
+          // Note: Do not use the `interaction-outline` mixin +
+          // `interaction.set-var(interaction.$focus-color)` like normal focus
+          // elements since it'll make all focusable children update with the
+          // outline color as well
+          @if utils.$disable-focus-visible {
+            @include utils.keyboard-only {
+              &--outline:focus {
+                outline: interaction.get-var(focus-color) solid
+                  interaction.get-var(focus-width);
+              }
+            }
+          } @else {
+            &--outline:focus-visible {
+              outline: interaction.get-var(focus-color)
+                solid
                 interaction.get-var(focus-width);
             }
           }
-        } @else {
-          &--outline:focus-visible {
-            outline: interaction.get-var(focus-color)
-              solid
-              interaction.get-var(focus-width);
-          }
         }
-      }
-
-      &--enter {
-        transform: translateY($transition-distance);
-      }
-
-      &--enter-active {
-        transform: translateY(0);
-        transition: transform $enter-duration;
-        transition-timing-function: $enter-timing-function;
-      }
-
-      &--exit {
-        opacity: 1;
-        transform: translateY(0);
-        transition:
-          transform $leave-duration,
-          opacity $leave-duration;
-        transition-timing-function: $leave-timing-function;
-      }
 
-      &--exit-active {
-        opacity: 0;
-        transform: translateY($transition-distance);
-      }
+        &--enter {
+          transform: translateY($transition-distance);
+        }
 
-      @if not $disable-fixed {
-        &--fixed {
-          @include use-var(z-index);
+        &--enter-active {
+          transform: translateY(0);
+          transition: transform $enter-duration;
+          transition-timing-function: $enter-timing-function;
         }
-      }
 
-      @if not $disable-header {
-        &__header {
-          @include use-var(padding, header-padding);
-          @include use-var(padding-bottom, header-padding-bottom);
+        &--exit {
+          opacity: 1;
+          transform: translateY(0);
+          transition:
+            transform $leave-duration,
+            opacity $leave-duration;
+          transition-timing-function: $leave-timing-function;
+        }
 
-          align-items: center;
-          display: flex;
-          flex: 0 0 auto;
+        &--exit-active {
+          opacity: 0;
+          transform: translateY($transition-distance);
         }
-      }
 
-      @if not $disable-title {
-        &__title {
-          // this makes it so it's easy to add a close button after the title
-          flex: 1 1 auto;
+        @if not $disable-fixed {
+          &--fixed {
+            @include use-var(z-index);
+          }
         }
-      }
 
-      @if not $disable-content {
-        &__content {
-          flex: 1 1 auto;
-          overflow: auto;
+        @if not $disable-header {
+          &__header {
+            @include use-var(padding, header-padding);
+            @include use-var(padding-bottom, header-padding-bottom);
 
-          &--padded {
-            @include use-var(padding, content-padding);
+            align-items: center;
+            display: flex;
+            flex: 0 0 auto;
           }
         }
-      }
 
-      @if not $disable-footer {
-        &__footer {
-          @include use-var(padding, footer-padding);
+        @if not $disable-title {
+          &__title {
+            // this makes it so it's easy to add a close button after the title
+            flex: 1 1 auto;
+          }
+        }
 
-          flex: 0 0 auto;
+        @if not $disable-content {
+          &__content {
+            flex: 1 1 auto;
+            overflow: auto;
 
-          @if not
-            $disable-footer-flex-vertical or not
-            $disable-footer-flex-start or not
-            $disable-footer-space-between or not
-            $disable-footer-flex-end
-          {
-            &--flex {
-              display: flex;
+            &--padded {
+              @include use-var(padding, content-padding);
             }
           }
+        }
 
-          @if not $disable-footer-flex-vertical {
-            &--flex-v {
-              flex-direction: column;
+        @if not $disable-footer {
+          &__footer {
+            @include use-var(padding, footer-padding);
+
+            flex: 0 0 auto;
+
+            @if not
+              $disable-footer-flex-vertical or not
+              $disable-footer-flex-start or not
+              $disable-footer-space-between or not
+              $disable-footer-flex-end
+            {
+              &--flex {
+                display: flex;
+              }
             }
-          }
 
-          @if not $disable-footer-flex-start {
-            &--start {
-              justify-content: flex-start;
+            @if not $disable-footer-flex-vertical {
+              &--flex-v {
+                flex-direction: column;
+              }
             }
-          }
 
-          @if not $disable-footer-space-between {
-            &--between {
-              justify-content: space-between;
+            @if not $disable-footer-flex-start {
+              &--start {
+                justify-content: flex-start;
+              }
+            }
+
+            @if not $disable-footer-space-between {
+              &--between {
+                justify-content: space-between;
+              }
             }
-          }
 
-          @if not $disable-footer-flex-end {
-            &--end {
-              justify-content: flex-end;
+            @if not $disable-footer-flex-end {
+              &--end {
+                justify-content: flex-end;
+              }
             }
           }
         }

package/src/divider/_divider.scss

@@ -85,36 +85,38 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    @include theme.default-system-theme {
-      @include use-dark-theme;
-    }
+    @include utils.optional-layer(divider, $disable-layer) {
+      @include theme.default-system-theme {
+        @include use-dark-theme;
+      }
 
-    .rmd-divider {
-      @include use-var(margin, spacing);
-      @include use-var(width, max-size);
+      .rmd-divider {
+        @include use-var(margin, spacing);
+        @include use-var(width, max-size);
 
-      border: get-var(size) solid get-var(color);
-      display: block;
-      flex-shrink: 0;
+        border: get-var(size) solid get-var(color);
+        display: block;
+        flex-shrink: 0;
 
-      @if not $disable-inset {
-        &--inset {
-          @include utils.auto-rtl(margin-left, get-var(inset), auto);
+        @if not $disable-inset {
+          &--inset {
+            @include utils.auto-rtl(margin-left, get-var(inset), auto);
 
-          width: calc(get-var(max-size) - get-var(inset));
+            width: calc(get-var(max-size) - get-var(inset));
+          }
         }
-      }
 
-      @if not $disable-vertical {
-        &--vertical {
-          @include border-style(left);
-          @include use-var(height, max-size);
-          @include use-var(width, size);
-          @include use-var(margin, vertical-spacing);
+        @if not $disable-vertical {
+          &--vertical {
+            @include border-style(left);
+            @include use-var(height, max-size);
+            @include use-var(width, size);
+            @include use-var(margin, vertical-spacing);
 
-          display: inline-block;
+            display: inline-block;
+          }
         }
       }
     }

package/src/draggable/_draggable.scss

@@ -1,23 +1,27 @@
+@use "../utils";
+
 $disable-everything: false !default;
 $disable-horizontal: false !default;
 $disable-vertical: false !default;
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-dragging {
-      * {
-        pointer-events: none;
-      }
+    @include utils.optional-layer(draggable, $disable-layer) {
+      .rmd-dragging {
+        * {
+          pointer-events: none;
+        }
 
-      @if not $disable-horizontal {
-        &--h {
-          cursor: col-resize;
+        @if not $disable-horizontal {
+          &--h {
+            cursor: col-resize;
+          }
         }
-      }
 
-      @if not $disable-vertical {
-        &--v {
-          cursor: row-resize;
+        @if not $disable-vertical {
+          &--v {
+            cursor: row-resize;
+          }
         }
       }
     }