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

package/src/list/_list.scss

@@ -144,174 +144,176 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-list {
-      @include utils.map-to-styles($typography-styles);
-      @include divider.set-var(inset, get-var(item-keyline));
+    @include utils.optional-layer(list, $disable-layer) {
+      .rmd-list {
+        @include utils.map-to-styles($typography-styles);
+        @include divider.set-var(inset, get-var(item-keyline));
 
-      list-style: none;
-      margin: 0;
-      padding: get-var(vertical-padding) get-var(horizontal-padding);
+        list-style: none;
+        margin: 0;
+        padding: get-var(vertical-padding) get-var(horizontal-padding);
 
-      @if not $disable-horizontal {
-        &--horizontal {
-          display: flex;
-          flex-wrap: nowrap;
-          max-width: 100%;
-          overflow: auto;
-          padding: get-var(horizontal-padding) get-var(vertical-padding);
+        @if not $disable-horizontal {
+          &--horizontal {
+            display: flex;
+            flex-wrap: nowrap;
+            max-width: 100%;
+            overflow: auto;
+            padding: get-var(horizontal-padding) get-var(vertical-padding);
+          }
         }
       }
-    }
 
-    .rmd-list-item {
-      @include use-var(min-height, item-height);
-
-      align-items: center;
-      display: flex;
-      padding: get-var(item-vertical-padding) get-var(item-horizontal-padding);
-
-      &--clickable {
-        @include interaction.surface(
-          $disabled-selector: '&[aria-disabled="true"]'
-        );
-      }
+      .rmd-list-item {
+        @include use-var(min-height, item-height);
 
-      @if not $disable-item-link-styles {
-        &--link {
-          color: inherit;
-          text-decoration: none;
-        }
-      }
+        align-items: center;
+        display: flex;
+        padding: get-var(item-vertical-padding) get-var(item-horizontal-padding);
 
-      @if not $disable-item-disabled-color {
-        &--disabled-color {
-          @include theme.theme-set-var(
-            text-secondary-color,
-            theme.theme-get-var(text-disabled-color)
+        &--clickable {
+          @include interaction.surface(
+            $disabled-selector: '&[aria-disabled="true"]'
           );
-          @include theme.theme-use-var(color, text-disabled-color);
         }
-      }
 
-      @if not $disable-item-disabled-opacity {
-        &--disabled-opacity {
-          opacity: $item-disabled-opacity;
+        @if not $disable-item-link-styles {
+          &--link {
+            color: inherit;
+            text-decoration: none;
+          }
         }
-      }
 
-      @if not $disable-medium-height {
-        &--medium {
-          @include set-var(item-height, get-var(item-medium-height));
+        @if not $disable-item-disabled-color {
+          &--disabled-color {
+            @include theme.theme-set-var(
+              text-secondary-color,
+              theme.theme-get-var(text-disabled-color)
+            );
+            @include theme.theme-use-var(color, text-disabled-color);
+          }
         }
-      }
 
-      @if not $disable-large-height {
-        &--large {
-          @include set-var(item-height, get-var(item-large-height));
+        @if not $disable-item-disabled-opacity {
+          &--disabled-opacity {
+            opacity: $item-disabled-opacity;
+          }
         }
-      }
 
-      @if not $disable-extra-large-height {
-        &--extra-large {
-          @include set-var(item-height, get-var(item-extra-large-height));
+        @if not $disable-medium-height {
+          &--medium {
+            @include set-var(item-height, get-var(item-medium-height));
+          }
         }
-      }
 
-      @if not $disable-multiline-height {
-        &--multiline {
-          @include set-var(item-height, get-var(item-multiline-height));
+        @if not $disable-large-height {
+          &--large {
+            @include set-var(item-height, get-var(item-large-height));
+          }
         }
-      }
 
-      &__text {
-        @include typography.text-overflow;
-        @include utils.rtl {
-          margin-left: auto;
+        @if not $disable-extra-large-height {
+          &--extra-large {
+            @include set-var(item-height, get-var(item-extra-large-height));
+          }
         }
 
-        display: block;
-        flex-grow: 1;
-
-        &--secondary {
-          @include theme.theme-use-var(color, text-secondary-color);
+        @if not $disable-multiline-height {
+          &--multiline {
+            @include set-var(item-height, get-var(item-multiline-height));
+          }
         }
 
-        @if not $disable-multiline-clamp {
-          &--clamped {
-            @include typography.line-clamp(get-var(item-multiline-clamp));
-            @if not $disable-multiline-height {
-              @include use-var(max-height, item-text-multiline-height);
-            }
+        &__text {
+          @include typography.text-overflow;
+          @include utils.rtl {
+            margin-left: auto;
+          }
 
-            line-height: $item-secondary-text-line-height;
-            white-space: normal;
+          display: block;
+          flex-grow: 1;
+
+          &--secondary {
+            @include theme.theme-use-var(color, text-secondary-color);
           }
-        }
-      }
 
-      &__addon {
-        flex-shrink: 0;
+          @if not $disable-multiline-clamp {
+            &--clamped {
+              @include typography.line-clamp(get-var(item-multiline-clamp));
+              @if not $disable-multiline-height {
+                @include use-var(max-height, item-text-multiline-height);
+              }
 
-        &--top {
-          align-self: flex-start;
+              line-height: $item-secondary-text-line-height;
+              white-space: normal;
+            }
+          }
         }
 
-        &--bottom {
-          align-self: flex-end;
-        }
+        &__addon {
+          flex-shrink: 0;
 
-        &--before {
-          @include _addon-spacing(icon.get-var(size));
-        }
+          &--top {
+            align-self: flex-start;
+          }
 
-        @if not $disable-item-avatar {
-          &--avatar-before {
-            @include _addon-spacing(avatar.get-var(size));
+          &--bottom {
+            align-self: flex-end;
           }
-        }
 
-        @if not $disable-item-media {
-          &--media {
-            @include icon.set-var(spacing, get-var(item-media-spacing));
-            @include use-var(width, item-media-size);
+          &--before {
+            @include _addon-spacing(icon.get-var(size));
           }
 
-          &--media-centered {
-            align-items: center;
-            display: flex;
-            justify-content: center;
+          @if not $disable-item-avatar {
+            &--avatar-before {
+              @include _addon-spacing(avatar.get-var(size));
+            }
           }
 
-          @if not $disable-item-media-large {
-            &--media-large {
-              @include set-var(item-media-size, $item-media-large-size);
+          @if not $disable-item-media {
+            &--media {
+              @include icon.set-var(spacing, get-var(item-media-spacing));
+              @include use-var(width, item-media-size);
+            }
+
+            &--media-centered {
+              align-items: center;
+              display: flex;
+              justify-content: center;
+            }
+
+            @if not $disable-item-media-large {
+              &--media-large {
+                @include set-var(item-media-size, $item-media-large-size);
+              }
             }
           }
         }
       }
-    }
 
-    @if not $disable-subheader {
-      .rmd-list-subheader {
-        @include utils.map-to-styles(typography.$subtitle-2-styles);
-        @include theme.theme-use-var(color, text-secondary-color);
-        @include use-var(height, item-height);
+      @if not $disable-subheader {
+        .rmd-list-subheader {
+          @include utils.map-to-styles(typography.$subtitle-2-styles);
+          @include theme.theme-use-var(color, text-secondary-color);
+          @include use-var(height, item-height);
+
+          align-items: center;
+          display: flex;
+          padding: get-var(item-vertical-padding)
+            get-var(item-horizontal-padding);
 
-        align-items: center;
-        display: flex;
-        padding: get-var(item-vertical-padding)
-          get-var(item-horizontal-padding);
-
-        @if not $disable-subheader-inset {
-          &--inset {
-            @include utils.rtl {
-              @include use-var(padding-left, item-horizontal-padding);
-              @include use-var(padding-right, item-keyline);
-            }
+          @if not $disable-subheader-inset {
+            &--inset {
+              @include utils.rtl {
+                @include use-var(padding-left, item-horizontal-padding);
+                @include use-var(padding-right, item-keyline);
+              }
 
-            @include use-var(padding-left, item-keyline);
+              @include use-var(padding-left, item-keyline);
+            }
           }
         }
       }

package/src/menu/_menu.scss

@@ -98,16 +98,18 @@ $variables: (background-color, color, min-width, spacing);
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    @include menu-styles;
+    @include utils.optional-layer(menu, $disable-layer) {
+      @include menu-styles;
 
-    @if not $disable-menu-item {
-      @include menu-item-styles;
-    }
+      @if not $disable-menu-item {
+        @include menu-item-styles;
+      }
 
-    @if not $disable-menu-item-group {
-      @include menu-item-group-styles;
+      @if not $disable-menu-item-group {
+        @include menu-item-group-styles;
+      }
     }
   }
 }

package/src/overlay/_overlay.scss

@@ -37,35 +37,37 @@ $variables: (background-color, z-index);
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-overlay {
-      @include use-var(background-color);
-      @include use-var(z-index);
+    @include utils.optional-layer(overlay, $disable-layer) {
+      .rmd-overlay {
+        @include use-var(background-color);
+        @include use-var(z-index);
 
-      border-radius: inherit;
-      box-shadow: inherit;
-      inset: 0;
-      opacity: 0;
-      pointer-events: none;
-      position: fixed;
-      transition: opacity $transition-duration $transition-timing-function;
+        border-radius: inherit;
+        box-shadow: inherit;
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: fixed;
+        transition: opacity $transition-duration $transition-timing-function;
 
-      &--active {
-        opacity: 1;
-      }
+        &--active {
+          opacity: 1;
+        }
 
-      &--clickable {
-        cursor: pointer;
-      }
+        &--clickable {
+          cursor: pointer;
+        }
 
-      &--visible {
-        overflow: hidden;
-        pointer-events: auto;
-      }
+        &--visible {
+          overflow: hidden;
+          pointer-events: auto;
+        }
 
-      &--absolute {
-        position: absolute;
+        &--absolute {
+          position: absolute;
+        }
       }
     }
   }

package/src/progress/_progress.scss

@@ -561,12 +561,17 @@ $variables: (
   }
 }
 
-@mixin styles {
-  @if not $disable-circular {
-    @include _circular-progress;
-  }
+@mixin styles($disable-layer: false) {
+  @include utils.optional-layer(
+    overlay,
+    $disable-layer or ($disable-circular and $disable-linear)
+  ) {
+    @if not $disable-circular {
+      @include _circular-progress;
+    }
 
-  @if not $disable-linear {
-    @include _linear-progress;
+    @if not $disable-linear {
+      @include _linear-progress;
+    }
   }
 }

package/src/responsive-item/_responsive-item.scss

@@ -58,134 +58,136 @@ $disable-aspect-ratios: not list.length(map.keys($aspect-ratios)) !default;
   padding-bottom: math.percentage(math.div($height, $width));
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    @if not $disable-item {
-      .rmd-responsive-item {
-        @include responsive-item;
-
-        @if not $disable-scale-to-container {
-          &--scale {
-            @include scale-to-container;
+    @include utils.optional-layer(responsive-item, $disable-layer) {
+      @if not $disable-item {
+        .rmd-responsive-item {
+          @include responsive-item;
+
+          @if not $disable-scale-to-container {
+            &--scale {
+              @include scale-to-container;
+            }
           }
-        }
 
-        @if not $disable-aspect-ratios {
-          &--aspect-ratio {
-            @include forced-aspect-ratio;
+          @if not $disable-aspect-ratios {
+            &--aspect-ratio {
+              @include forced-aspect-ratio;
+            }
           }
         }
       }
-    }
 
-    .rmd-responsive-item-container {
-      display: inline-block;
-      position: relative;
+      .rmd-responsive-item-container {
+        display: inline-block;
+        position: relative;
 
-      @if not $disable-auto {
-        &--auto {
-          @each $selector in $selectors {
-            #{$selector} {
-              @include responsive-item;
+        @if not $disable-auto {
+          &--auto {
+            @each $selector in $selectors {
+              #{$selector} {
+                @include responsive-item;
+              }
             }
           }
-        }
 
-        @if not $disable-auto-scale {
-          &--auto-scale {
-            @each $selector in $selectors {
-              #{$selector} {
-                @include scale-to-container;
+          @if not $disable-auto-scale {
+            &--auto-scale {
+              @each $selector in $selectors {
+                #{$selector} {
+                  @include scale-to-container;
+                }
               }
             }
           }
         }
-      }
 
-      @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-aspect-ratios {
-        &--aspect-ratio {
-          display: block;
-          height: 0;
-          overflow: hidden;
-          padding: 0;
+        @if not $disable-aspect-ratios {
+          &--aspect-ratio {
+            display: block;
+            height: 0;
+            overflow: hidden;
+            padding: 0;
 
-          @each $selector in $selectors {
-            #{$selector} {
-              @include forced-aspect-ratio;
+            @each $selector in $selectors {
+              #{$selector} {
+                @include forced-aspect-ratio;
+              }
             }
           }
-        }
 
-        @each $suffix, $ratio-list in $aspect-ratios {
-          &--#{$suffix} {
-            @include aspect-ratio(nth($ratio-list, 1), nth($ratio-list, 2));
+          @each $suffix, $ratio-list in $aspect-ratios {
+            &--#{$suffix} {
+              @include aspect-ratio(nth($ratio-list, 1), nth($ratio-list, 2));
+            }
           }
         }
       }
-    }
 
-    @if not $disable-overlay {
-      .rmd-responsive-item-overlay {
-        background-color: $background-color;
-        color: $color;
-        padding: $overlay-padding;
-        position: absolute;
-        z-index: 0;
-
-        @if not $disable-overlay-top {
-          &--top {
-            inset: 0 0 auto;
+      @if not $disable-overlay {
+        .rmd-responsive-item-overlay {
+          background-color: $background-color;
+          color: $color;
+          padding: $overlay-padding;
+          position: absolute;
+          z-index: 0;
+
+          @if not $disable-overlay-top {
+            &--top {
+              inset: 0 0 auto;
+            }
           }
-        }
 
-        @if not $disable-overlay-bottom {
-          &--bottom {
-            inset: auto 0 0;
+          @if not $disable-overlay-bottom {
+            &--bottom {
+              inset: auto 0 0;
+            }
           }
-        }
 
-        &--horizontal {
-          inset: 0 auto;
-          width: $overlay-horizontal-width;
-        }
+          &--horizontal {
+            inset: 0 auto;
+            width: $overlay-horizontal-width;
+          }
 
-        @if not $disable-overlay-left {
-          &--left {
-            @include utils.auto-rtl(left, 0);
+          @if not $disable-overlay-left {
+            &--left {
+              @include utils.auto-rtl(left, 0);
+            }
           }
-        }
 
-        @if not $disable-overlay-right {
-          &--right {
-            @include utils.auto-rtl(right, 0);
+          @if not $disable-overlay-right {
+            &--right {
+              @include utils.auto-rtl(right, 0);
+            }
           }
-        }
 
-        @if not $disable-overlay-middle {
-          &--middle {
-            inset: auto 0 50%;
-            transform: translate3d(0, 50%, 0);
+          @if not $disable-overlay-middle {
+            &--middle {
+              inset: auto 0 50%;
+              transform: translate3d(0, 50%, 0);
+            }
           }
-        }
 
-        @if not $disable-overlay-center {
-          &--center {
-            inset: 0 50% 0 auto;
-            transform: translate3d(50%, 0, 0);
+          @if not $disable-overlay-center {
+            &--center {
+              inset: 0 50% 0 auto;
+              transform: translate3d(50%, 0, 0);
+            }
           }
-        }
 
-        @if not $disable-overlay-absolute-center {
-          &--absolute-center {
-            inset: auto 50% 50% auto;
-            transform: translate3d(50%, 50%, 0);
+          @if not $disable-overlay-absolute-center {
+            &--absolute-center {
+              inset: auto 50% 50% auto;
+              transform: translate3d(50%, 50%, 0);
+            }
           }
         }
       }