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

package/src/button/_button.scss

@@ -164,160 +164,162 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-button {
-      @if not $disable-circular-progress {
-        @include progress.set-var(circular-size, $circular-progress-size);
-      }
+    @include utils.optional-layer(button, $disable-layer) {
+      .rmd-button {
+        @if not $disable-circular-progress {
+          @include progress.set-var(circular-size, $circular-progress-size);
+        }
 
-      @include icon.set-var(color, currentcolor);
-      @include icon.use-var(gap, spacing);
-      @include use-var(background-color);
-      @include use-var(color);
-      @include use-var(border-radius);
-
-      align-items: center;
-      border-width: 0;
-      display: inline-flex;
-      flex-shrink: 0;
-      justify-content: center;
-
-      @if not $disable-text {
-        &--text {
-          @include text-styles;
+        @include icon.set-var(color, currentcolor);
+        @include icon.use-var(gap, spacing);
+        @include use-var(background-color);
+        @include use-var(color);
+        @include use-var(border-radius);
+
+        align-items: center;
+        border-width: 0;
+        display: inline-flex;
+        flex-shrink: 0;
+        justify-content: center;
+
+        @if not $disable-text {
+          &--text {
+            @include text-styles;
+          }
         }
-      }
 
-      @if not $disable-icon {
-        &--icon {
-          @include icon.set-var(size, 1em);
-          @include set-var(border-radius, get-var(icon-border-radius));
-          @include use-var(font-size, icon-font-size);
-          @include use-var(height, icon-size);
-          @include use-var(width, icon-size);
+        @if not $disable-icon {
+          &--icon {
+            @include icon.set-var(size, 1em);
+            @include set-var(border-radius, get-var(icon-border-radius));
+            @include use-var(font-size, icon-font-size);
+            @include use-var(height, icon-size);
+            @include use-var(width, icon-size);
 
-          padding: $icon-padding;
-        }
+            padding: $icon-padding;
+          }
 
-        @if not $disable-icon-square {
-          &--icon-square {
-            @include set-var(icon-border-radius, $icon-square-border-radius);
+          @if not $disable-icon-square {
+            &--icon-square {
+              @include set-var(icon-border-radius, $icon-square-border-radius);
+            }
           }
-        }
 
-        @if $icon-small-size {
-          &--small {
-            font-size: $icon-small-size;
+          @if $icon-small-size {
+            &--small {
+              font-size: $icon-small-size;
+            }
           }
-        }
 
-        @if $icon-large-size {
-          &--large {
-            font-size: $icon-large-size;
+          @if $icon-large-size {
+            &--large {
+              font-size: $icon-large-size;
+            }
           }
         }
-      }
 
-      &--responsive {
-        @include media-queries.tablet-media {
-          @include text-styles;
+        &--responsive {
+          @include media-queries.tablet-media {
+            @include text-styles;
 
-          height: auto;
-          width: auto;
+            height: auto;
+            width: auto;
+          }
         }
-      }
 
-      &:disabled,
-      &--disabled {
-        @include theme.theme-set-var(outline-color, currentcolor);
-        // this was added for the file input
-        @include interaction.surface-disabled($clickable: false);
-      }
+        &:disabled,
+        &--disabled {
+          @include theme.theme-set-var(outline-color, currentcolor);
+          // this was added for the file input
+          @include interaction.surface-disabled($clickable: false);
+        }
 
-      @if not $disable-contained {
-        &--contained {
-          @include box-shadows.elevation-transition(
-            $contained-elevation,
-            if(
-              $disable-contained-pressed-elevation,
-              null,
-              $contained-pressed-elevation
-            ),
-            "&.rmd-button--pressed",
-            $pseudo-before: false,
-            $position-relative: false
-          );
-
-          // contained buttons should _normally_ always force dark background
-          // colors for the interaction states This means use the default light
-          // theme since it is based off of the root background color
-          @if not $disable-contained-interaction-colors {
-            @include interaction.use-light-surface;
-          }
+        @if not $disable-contained {
+          &--contained {
+            @include box-shadows.elevation-transition(
+              $contained-elevation,
+              if(
+                $disable-contained-pressed-elevation,
+                null,
+                $contained-pressed-elevation
+              ),
+              "&.rmd-button--pressed",
+              $pseudo-before: false,
+              $position-relative: false
+            );
+
+            // contained buttons should _normally_ always force dark background
+            // colors for the interaction states This means use the default light
+            // theme since it is based off of the root background color
+            @if not $disable-contained-interaction-colors {
+              @include interaction.use-light-surface;
+            }
 
-          @include set-var(
-            background-color,
-            get-var(contained-background-color)
-          );
-          @include set-var(color, get-var(contained-color));
+            @include set-var(
+              background-color,
+              get-var(contained-background-color)
+            );
+            @include set-var(color, get-var(contained-color));
+          }
         }
-      }
 
-      @if not $disable-async {
-        &--async {
-          @include overlay.set-var(background-color, transparent);
-          @include progress.set-var(color, currentcolor);
-          // @include progress.set-var(background-color, currentcolor);
-        }
+        @if not $disable-async {
+          &--async {
+            @include overlay.set-var(background-color, transparent);
+            @include progress.set-var(color, currentcolor);
+            // @include progress.set-var(background-color, currentcolor);
+          }
 
-        &--async-overlay {
-          > * {
-            opacity: 0;
+          &--async-overlay {
+            > * {
+              opacity: 0;
+            }
           }
         }
       }
-    }
 
-    @if not $disable-unstyled-utility-class {
-      .rmd-button-unstyled {
-        @include unstyled;
+      @if not $disable-unstyled-utility-class {
+        .rmd-button-unstyled {
+          @include unstyled;
+        }
       }
-    }
 
-    @if not $disable-floating {
-      .rmd-fab {
-        position: fixed;
-        z-index: $floating-z-index;
+      @if not $disable-floating {
+        .rmd-fab {
+          position: fixed;
+          z-index: $floating-z-index;
 
-        @if not $disable-floating-absolute-position {
-          &--absolute {
-            @include set-var(fab-offset, 0px);
+          @if not $disable-floating-absolute-position {
+            &--absolute {
+              @include set-var(fab-offset, 0px);
 
-            position: absolute;
-            z-index: $floating-absolute-z-index;
+              position: absolute;
+              z-index: $floating-absolute-z-index;
+            }
           }
-        }
 
-        @each $suffix, $styles in $floating-positions {
-          &--#{$suffix} {
-            @each $property, $value in $styles {
-              @if $property == left {
-                @include utils.rtl {
-                  left: auto;
-                  right: calc(#{$value} + #{get-var(fab-offset)});
-                }
+          @each $suffix, $styles in $floating-positions {
+            &--#{$suffix} {
+              @each $property, $value in $styles {
+                @if $property == left {
+                  @include utils.rtl {
+                    left: auto;
+                    right: calc(#{$value} + #{get-var(fab-offset)});
+                  }
 
-                left: $value;
-              } @else if $property == right {
-                @include utils.rtl {
                   left: $value;
-                  right: auto;
-                }
+                } @else if $property == right {
+                  @include utils.rtl {
+                    left: $value;
+                    right: auto;
+                  }
 
-                right: calc(#{$value} + #{get-var(fab-offset)});
-              } @else {
-                #{$property}: #{$value};
+                  right: calc(#{$value} + #{get-var(fab-offset)});
+                } @else {
+                  #{$property}: #{$value};
+                }
               }
             }
           }

package/src/card/_card.scss

@@ -86,100 +86,102 @@ $variables: (background-color, color, secondary-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(card, $disable-layer) {
+      @include theme.default-system-theme {
+        @include use-dark-theme;
+      }
 
-    .rmd-card {
-      @include use-var(background-color);
-      @include use-var(color);
-
-      border-radius: $border-radius;
-      display: inline-block;
-      max-width: 100%;
-
-      @if not $disable-raisable {
-        &--raisable {
-          @include box-shadows.elevation-transition(
-            $raisable-start-elevation,
-            $raisable-end-elevation,
-            "&:hover"
-          );
+      .rmd-card {
+        @include use-var(background-color);
+        @include use-var(color);
+
+        border-radius: $border-radius;
+        display: inline-block;
+        max-width: 100%;
+
+        @if not $disable-raisable {
+          &--raisable {
+            @include box-shadows.elevation-transition(
+              $raisable-start-elevation,
+              $raisable-end-elevation,
+              "&:hover"
+            );
+          }
         }
-      }
 
-      @if not $disable-shadowed {
-        &--shadowed {
-          @include box-shadows.box-shadow($elevation);
+        @if not $disable-shadowed {
+          &--shadowed {
+            @include box-shadows.box-shadow($elevation);
+          }
         }
-      }
 
-      @if not $disable-bordered {
-        &--bordered {
-          border: $border-width inset $border-color;
+        @if not $disable-bordered {
+          &--bordered {
+            border: $border-width inset $border-color;
+          }
         }
-      }
 
-      @if not $disable-full-width {
-        &--full-width {
-          display: block;
-          width: 100%;
+        @if not $disable-full-width {
+          &--full-width {
+            display: block;
+            width: 100%;
+          }
         }
-      }
 
-      @if not $disable-clickable {
-        &--clickable {
-          @include interaction.surface;
+        @if not $disable-clickable {
+          &--clickable {
+            @include interaction.surface;
+          }
         }
-      }
 
-      &__header {
-        align-items: center;
-        column-gap: $header-spacing;
-        display: flex;
-        padding: $header-padding-top $header-padding $header-padding;
-      }
+        &__header {
+          align-items: center;
+          column-gap: $header-spacing;
+          display: flex;
+          padding: $header-padding-top $header-padding $header-padding;
+        }
 
-      &__header-content {
-        @include typography.text-overflow;
+        &__header-content {
+          @include typography.text-overflow;
 
-        flex: 1 1 auto;
-        min-width: 0;
-      }
+          flex: 1 1 auto;
+          min-width: 0;
+        }
 
-      // does not require custom styles
-      // &__title {
-      // }
+        // does not require custom styles
+        // &__title {
+        // }
 
-      // does not require custom styles
-      // &__subtitle {
-      // }
+        // does not require custom styles
+        // &__subtitle {
+        // }
 
-      &__content {
-        @if not $disable-content-secondary-color {
-          &--secondary {
-            @include theme.theme-use-var(color, text-secondary-color);
+        &__content {
+          @if not $disable-content-secondary-color {
+            &--secondary {
+              @include theme.theme-use-var(color, text-secondary-color);
+            }
           }
-        }
 
-        @if $content-padding {
-          &--padded {
-            padding: $content-padding;
+          @if $content-padding {
+            &--padded {
+              padding: $content-padding;
+            }
           }
-        }
 
-        @if not $disable-content-last-child-padding {
-          &--padded-bottom:last-child {
-            padding-bottom: $content-padding-bottom;
+          @if not $disable-content-last-child-padding {
+            &--padded-bottom:last-child {
+              padding-bottom: $content-padding-bottom;
+            }
           }
         }
-      }
 
-      @if $footer-padding {
-        &__footer {
-          padding: $footer-padding;
+        @if $footer-padding {
+          &__footer {
+            padding: $footer-padding;
+          }
         }
       }
     }