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

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

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};
+                }
               }
             }
           }