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

package/src/table/_table.scss

@@ -212,232 +212,234 @@ $row-selected-styles: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    @if not $disable-container {
-      .rmd-table-container {
-        max-width: 100%;
-        overflow: auto;
+    @include utils.optional-layer(table, $disable-layer) {
+      @if not $disable-container {
+        .rmd-table-container {
+          max-width: 100%;
+          overflow: auto;
+        }
       }
-    }
 
-    .rmd-table {
-      @include use-var(background-color);
+      .rmd-table {
+        @include use-var(background-color);
 
-      // NOTE: Switched from `border-collapse: collapse` to `border-spacing: 0`
-      // since enabling sticky headers removed the borders for some reason in
-      // firefox. all I really wanted was the spacing to be removed from each
-      // cell, so border-spacing seems better.
-      border-spacing: 0;
-      max-width: 100%;
+        // NOTE: Switched from `border-collapse: collapse` to `border-spacing: 0`
+        // since enabling sticky headers removed the borders for some reason in
+        // firefox. all I really wanted was the spacing to be removed from each
+        // cell, so border-spacing seems better.
+        border-spacing: 0;
+        max-width: 100%;
 
-      @if not $disable-full-width {
-        &--full-width {
-          width: 100%;
+        @if not $disable-full-width {
+          &--full-width {
+            width: 100%;
+          }
         }
       }
-    }
 
-    .rmd-thead {
-      @include use-var(background-color, header-background-color);
-      @if $cell-height != $cell-header-height {
-        @include set-var(cell-height, $cell-header-height);
-      }
+      .rmd-thead {
+        @include use-var(background-color, header-background-color);
+        @if $cell-height != $cell-header-height {
+          @include set-var(cell-height, $cell-header-height);
+        }
 
-      @if not $disable-dense and $cell-dense-height {
-        &--dense {
-          @include set-var(cell-height, $cell-header-dense-height);
+        @if not $disable-dense and $cell-dense-height {
+          &--dense {
+            @include set-var(cell-height, $cell-header-dense-height);
+          }
         }
-      }
 
-      @if not $disable-sticky-header {
-        &--sticky {
-          @include use-var(background-color, sticky-background-color);
-          @include use-var(top, sticky-header);
-          @include utils.map-to-styles($sticky-header-inactive-styles);
+        @if not $disable-sticky-header {
+          &--sticky {
+            @include use-var(background-color, sticky-background-color);
+            @include use-var(top, sticky-header);
+            @include utils.map-to-styles($sticky-header-inactive-styles);
 
-          position: sticky;
-          z-index: $sticky-header-z-index;
-        }
+            position: sticky;
+            z-index: $sticky-header-z-index;
+          }
 
-        &--sticky-active {
-          @include utils.map-to-styles($sticky-header-active-styles);
+          &--sticky-active {
+            @include utils.map-to-styles($sticky-header-active-styles);
+          }
         }
       }
-    }
 
-    .rmd-tfoot {
-      @if not $disable-sticky-footer {
-        &--sticky {
-          @include use-var(background-color, sticky-background-color);
-          @include use-var(bottom, sticky-footer);
-          @include utils.map-to-styles($sticky-footer-inactive-styles);
+      .rmd-tfoot {
+        @if not $disable-sticky-footer {
+          &--sticky {
+            @include use-var(background-color, sticky-background-color);
+            @include use-var(bottom, sticky-footer);
+            @include utils.map-to-styles($sticky-footer-inactive-styles);
 
-          position: sticky;
-          z-index: $sticky-footer-z-index;
-        }
+            position: sticky;
+            z-index: $sticky-footer-z-index;
+          }
 
-        &--sticky-active {
-          @include utils.map-to-styles($sticky-footer-active-styles);
+          &--sticky-active {
+            @include utils.map-to-styles($sticky-footer-active-styles);
+          }
         }
       }
-    }
 
-    .rmd-tr {
-      @if not $disable-clickable {
-        &--clickable:hover {
-          cursor: pointer;
+      .rmd-tr {
+        @if not $disable-clickable {
+          &--clickable:hover {
+            cursor: pointer;
+          }
         }
-      }
 
-      @if not $disable-selected {
-        &--selected {
-          @include utils.map-to-styles($row-selected-styles);
+        @if not $disable-selected {
+          &--selected {
+            @include utils.map-to-styles($row-selected-styles);
+          }
         }
-      }
 
-      @if not $disable-bordered {
-        &--bordered {
-          border-bottom: get-var(border-size) solid get-var(border-color);
+        @if not $disable-bordered {
+          &--bordered {
+            border-bottom: get-var(border-size) solid get-var(border-color);
 
-          @if not $disable-bordered-except-last {
-            &:last-child {
-              border-bottom-width: 0;
+            @if not $disable-bordered-except-last {
+              &:last-child {
+                border-bottom-width: 0;
+              }
             }
           }
         }
-      }
 
-      @if not $disable-hoverable {
-        &--hoverable {
-          @include utils.mouse-only {
-            transition: background transition.$linear-duration
-              transition.$linear-timing-function;
+        @if not $disable-hoverable {
+          &--hoverable {
+            @include utils.mouse-only {
+              transition: background transition.$linear-duration
+                transition.$linear-timing-function;
 
-            &:hover {
-              @include utils.map-to-styles($row-hover-styles);
+              &:hover {
+                @include utils.map-to-styles($row-hover-styles);
+              }
             }
           }
         }
       }
-    }
 
-    .rmd-table-cell {
-      @include utils.map-to-styles($cell-typography);
-      @include use-var(color, cell-color);
-      @include use-var(height, cell-height);
+      .rmd-table-cell {
+        @include utils.map-to-styles($cell-typography);
+        @include use-var(color, cell-color);
+        @include use-var(height, cell-height);
 
-      border: inherit;
-      padding: 0 get-var(cell-horizontal-padding);
+        border: inherit;
+        padding: 0 get-var(cell-horizontal-padding);
 
-      &--header {
-        @include utils.map-to-styles($cell-header-typography);
-        @if $cell-color != $cell-header-color {
-          @include set-var(cell-color, $cell-header-color);
+        &--header {
+          @include utils.map-to-styles($cell-header-typography);
+          @if $cell-color != $cell-header-color {
+            @include set-var(cell-color, $cell-header-color);
+          }
         }
-      }
 
-      @if not $disable-cell-align-top {
-        &--top {
-          vertical-align: top;
+        @if not $disable-cell-align-top {
+          &--top {
+            vertical-align: top;
+          }
         }
-      }
 
-      @if not $disable-cell-align-bottom {
-        &--bottom {
-          vertical-align: bottom;
+        @if not $disable-cell-align-bottom {
+          &--bottom {
+            vertical-align: bottom;
+          }
         }
-      }
 
-      @if not $disable-sticky-cell {
-        &--sticky {
-          position: sticky;
-          will-change: transform;
-        }
+        @if not $disable-sticky-cell {
+          &--sticky {
+            position: sticky;
+            will-change: transform;
+          }
 
-        &--sticky-cell {
-          @include utils.auto-rtl(left, get-var(sticky-cell));
-          @include theme.theme-use-var(background-color);
+          &--sticky-cell {
+            @include utils.auto-rtl(left, get-var(sticky-cell));
+            @include theme.theme-use-var(background-color);
 
-          transition: background-color transition.$linear-duration;
-          z-index: $sticky-cell-z-index;
+            transition: background-color transition.$linear-duration;
+            z-index: $sticky-cell-z-index;
 
-          &::after {
-            @include utils.pseudo-element;
+            &::after {
+              @include utils.pseudo-element;
 
-            background-color: transparent;
-            transition: background
-              transition.$linear-duration
-              transition.$linear-timing-function;
+              background-color: transparent;
+              transition: background
+                transition.$linear-duration
+                transition.$linear-timing-function;
 
-            .rmd-tr--hoverable:hover & {
-              @include utils.map-to-styles($row-hover-styles);
-            }
+              .rmd-tr--hoverable:hover & {
+                @include utils.map-to-styles($row-hover-styles);
+              }
 
-            .rmd-tr--selected & {
-              @include utils.map-to-styles($row-selected-styles);
+              .rmd-tr--selected & {
+                @include utils.map-to-styles($row-selected-styles);
+              }
             }
           }
-        }
 
-        @if not $disable-sticky-header {
-          &--sticky-header {
-            @include use-var(top, sticky-header);
+          @if not $disable-sticky-header {
+            &--sticky-header {
+              @include use-var(top, sticky-header);
 
-            z-index: $sticky-header-z-index;
+              z-index: $sticky-header-z-index;
+            }
           }
-        }
 
-        @if not $disable-input-toggle and not $disable-sticky-header {
-          &--sticky-header-cell {
-            z-index: $sticky-header-cell-z-index;
+          @if not $disable-input-toggle and not $disable-sticky-header {
+            &--sticky-header-cell {
+              z-index: $sticky-header-cell-z-index;
+            }
           }
         }
-      }
 
-      @if not $disable-input-toggle {
-        &--input-toggle {
-          @include set-var(
-            cell-horizontal-padding,
-            $cell-input-toggle-horizontal-padding
-          );
+        @if not $disable-input-toggle {
+          &--input-toggle {
+            @include set-var(
+              cell-horizontal-padding,
+              $cell-input-toggle-horizontal-padding
+            );
+          }
         }
-      }
 
-      @if not $disable-cell-grow {
-        &--grow {
-          width: 100%;
+        @if not $disable-cell-grow {
+          &--grow {
+            width: 100%;
+          }
         }
-      }
 
-      @if not $disable-cell-no-wrap {
-        &--no-wrap {
-          @include typography.text-overflow;
+        @if not $disable-cell-no-wrap {
+          &--no-wrap {
+            @include typography.text-overflow;
+          }
         }
-      }
 
-      @if not $disable-cell-vertical-padding {
-        &--v-padding {
-          @include use-var(padding-bottom, cell-vertical-padding);
-          @include use-var(padding-top, cell-vertical-padding);
+        @if not $disable-cell-vertical-padding {
+          &--v-padding {
+            @include use-var(padding-bottom, cell-vertical-padding);
+            @include use-var(padding-top, cell-vertical-padding);
+          }
         }
-      }
 
-      @if not $disable-cell-sort {
-        &--no-padding {
-          padding: 0;
-        }
+        @if not $disable-cell-sort {
+          &--no-padding {
+            padding: 0;
+          }
 
-        &__content {
-          @include use-var(padding-left, cell-horizontal-padding);
-          @include use-var(padding-right, cell-horizontal-padding);
+          &__content {
+            @include use-var(padding-left, cell-horizontal-padding);
+            @include use-var(padding-right, cell-horizontal-padding);
 
-          align-items: center;
-          color: inherit;
-          font: inherit;
-          gap: $cell-content-gap;
-          height: 100%;
-          width: 100%;
+            align-items: center;
+            color: inherit;
+            font: inherit;
+            gap: $cell-content-gap;
+            height: 100%;
+            width: 100%;
+          }
         }
       }
     }

package/src/tabs/_tabs.scss

@@ -255,17 +255,19 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    @include tablist-styles;
-    @include tab-styles;
+    @include utils.optional-layer(tabs, $disable-layer) {
+      @include tablist-styles;
+      @include tab-styles;
 
-    @if not $disable-indicator {
-      @include indicator-styles;
-    }
+      @if not $disable-indicator {
+        @include indicator-styles;
+      }
 
-    @if not $disable-tablist-scroll-button {
-      @include tablist-button-styles;
+      @if not $disable-tablist-scroll-button {
+        @include tablist-button-styles;
+      }
     }
   }
 }

package/src/tooltip/_tooltip.scss

@@ -75,78 +75,80 @@ $variables: (background-color, color, spacing);
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-tooltip {
-      @include utils.map-to-styles($typography);
-      @include use-var(background-color);
-      @include use-var(color);
-
-      border-radius: $border-radius;
-      max-width: $max-width;
-      min-height: $min-height;
-      opacity: 0;
-      overflow: hidden;
-      overflow-wrap: anywhere;
-      padding: $vertical-padding $horizontal-padding;
-      pointer-events: none;
-      position: fixed;
-      text-transform: none;
-      user-select: none;
-      z-index: $z-index;
-
-      @if not $disable-dense {
-        &--dense {
-          @include utils.map-to-styles($dense-typography);
-          @include set-var(spacing, $dense-spacing);
-
-          min-height: $dense-min-height;
-          padding: $dense-vertical-padding $dense-horizontal-padding;
+    @include utils.optional-layer(tooltip, $disable-layer) {
+      .rmd-tooltip {
+        @include utils.map-to-styles($typography);
+        @include use-var(background-color);
+        @include use-var(color);
+
+        border-radius: $border-radius;
+        max-width: $max-width;
+        min-height: $min-height;
+        opacity: 0;
+        overflow: hidden;
+        overflow-wrap: anywhere;
+        padding: $vertical-padding $horizontal-padding;
+        pointer-events: none;
+        position: fixed;
+        text-transform: none;
+        user-select: none;
+        z-index: $z-index;
+
+        @if not $disable-dense {
+          &--dense {
+            @include utils.map-to-styles($dense-typography);
+            @include set-var(spacing, $dense-spacing);
+
+            min-height: $dense-min-height;
+            padding: $dense-vertical-padding $dense-horizontal-padding;
+          }
         }
-      }
 
-      @if not $disable-above {
-        &--above {
-          transform: translateY(-$transition-distance);
+        @if not $disable-above {
+          &--above {
+            transform: translateY(-$transition-distance);
+          }
         }
-      }
 
-      @if not $disable-below {
-        &--below {
-          transform: translateY($transition-distance);
+        @if not $disable-below {
+          &--below {
+            transform: translateY($transition-distance);
+          }
         }
-      }
 
-      @if not $disable-left {
-        &--left {
-          transform: translateX(-$transition-distance);
+        @if not $disable-left {
+          &--left {
+            transform: translateX(-$transition-distance);
+          }
         }
-      }
 
-      @if not $disable-right {
-        &--right {
-          transform: translateX($transition-distance);
+        @if not $disable-right {
+          &--right {
+            transform: translateX($transition-distance);
+          }
         }
-      }
 
-      &--visible {
-        opacity: 1;
-        transform: none;
-      }
+        &--visible {
+          opacity: 1;
+          transform: none;
+        }
 
-      &--enter {
-        transition:
-          opacity $enter-duration,
-          transform $enter-duration * 2;
-        transition-timing-function: $enter-timing-function;
-      }
+        &--enter {
+          transition:
+            opacity $enter-duration,
+            transform $enter-duration * 2;
+          transition-timing-function: $enter-timing-function;
+        }
 
-      &--exit {
-        transition: opacity $leave-duration $leave-timing-function;
-      }
+        &--exit {
+          transition: opacity $leave-duration $leave-timing-function;
+        }
 
-      &--exit-active {
-        opacity: 0;
+        &--exit-active {
+          opacity: 0;
+        }
       }
     }
   }

package/src/transition/_transition.scss

@@ -307,53 +307,58 @@ $transition-variables: (
   }
 }
 
-@mixin transition-styles {
-  @if not $disable-collapse-transition {
-    @include collapse-transition;
-  }
-
-  @if not $disable-cross-fade-transition {
-    @include cross-fade-transition;
-  }
-
-  @if not $disable-scale-transition or not $disable-scale-y-transition {
-    @include scale-transition;
-  }
+@mixin transition-styles($disable-layer: false) {
+  @include utils.optional-layer(
+    transition,
+    $disable-layer or $disable-transitions
+  ) {
+    @if not $disable-collapse-transition {
+      @include collapse-transition;
+    }
 
-  @if not $disable-scale-y-transition {
-    @include scale-y-transition;
-  }
+    @if not $disable-cross-fade-transition {
+      @include cross-fade-transition;
+    }
 
-  @if not $disable-skeleton-placeholder {
-    @include skeleton-placeholder-animation;
-  }
+    @if not $disable-scale-transition or not $disable-scale-y-transition {
+      @include scale-transition;
+    }
 
-  @if not $disable-slide-transition {
-    @include slide-transition;
-  }
+    @if not $disable-scale-y-transition {
+      @include scale-y-transition;
+    }
 
-  @if not $disable-max-width-transition {
-    .rmd-max-width-transition {
-      @if not $disable-max-width-transition-gap {
-        @include utils.auto-rtl(
-          margin-right,
-          utils.negate-var(transition-get-var(max-width-gap)),
-          0
-        );
-      }
+    @if not $disable-skeleton-placeholder {
+      @include skeleton-placeholder-animation;
+    }
 
-      max-width: 0;
-      overflow: hidden;
-      transition: max-width
-        $max-width-transition-duration
-        $max-width-transition-timing-function;
-      will-change: max-width;
+    @if not $disable-slide-transition {
+      @include slide-transition;
+    }
 
-      &--visible {
+    @if not $disable-max-width-transition {
+      .rmd-max-width-transition {
         @if not $disable-max-width-transition-gap {
-          @include utils.auto-rtl(margin-right, 0);
+          @include utils.auto-rtl(
+            margin-right,
+            utils.negate-var(transition-get-var(max-width-gap)),
+            0
+          );
+        }
+
+        max-width: 0;
+        overflow: hidden;
+        transition: max-width
+          $max-width-transition-duration
+          $max-width-transition-timing-function;
+        will-change: max-width;
+
+        &--visible {
+          @if not $disable-max-width-transition-gap {
+            @include utils.auto-rtl(margin-right, 0);
+          }
+          @include transition-use-var(max-width);
         }
-        @include transition-use-var(max-width);
       }
     }
   }