feat(menu-surface): add feature targeting for styles

Sets up style feature targeting for `mdc-menu-surface`.
material-components · Jan 26, 2019 · aa3b943 · aa3b943
1 parent 97a8585
commit aa3b943
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 63 deletions.
diff --git a/packages/mdc-menu-surface/_mixins.scss b/packages/mdc-menu-surface/_mixins.scss
@@ -20,8 +20,53 @@
 // THE SOFTWARE.
 //
 
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "@material/theme/mixins";
 @import "@material/shape/mixins";
+@import "@material/animation/variables";
+@import "@material/elevation/mixins";
+@import "@material/rtl/mixins";
+@import "./variables";
+
+
+//
+// Public
+//
+@mixin mdc-menu-surface($query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-animation: mdc-feature-create-target($query, animation);
+
+  // postcss-bem-linter: define menu-surface
+  .mdc-menu-surface {
+    @include mdc-menu-surface-base_($query);
+
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-elevation(8);
+      @include mdc-menu-surface-fill-color(surface);
+      @include mdc-menu-surface-ink-color(on-surface);
+    }
+
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-property(transform-origin, top left, top right);
+      @include mdc-menu-surface-shape-radius(medium);
+    }
+  }
+
+  @include mdc-feature-targets($feat-structure) {
+    .mdc-menu-surface--anchor {
+      position: relative;
+      overflow: visible;
+    }
+
+    .mdc-menu-surface--fixed {
+      position: fixed;
+    }
+  }
+
+  // postcss-bem-linter: end
+}
 
 @mixin mdc-menu-surface-ink-color($color) {
   @include mdc-theme-prop(color, $color);
@@ -34,3 +79,65 @@
 @mixin mdc-menu-surface-shape-radius($radius, $rtl-reflexive: false) {
   @include mdc-shape-radius($radius, $rtl-reflexive);
 }
+
+
+//
+// Private
+//
+@mixin mdc-menu-surface-base_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-animation: mdc-feature-create-target($query, animation);
+
+  @include mdc-feature-targets($feat-structure) {
+    display: none;
+    position: absolute;
+    box-sizing: border-box;
+    max-width: calc(100vw - #{$mdc-menu-surface-min-distance-from-edge});
+    max-height: calc(100vh - #{$mdc-menu-surface-min-distance-from-edge});
+    margin: 0;
+    padding: 0;
+    transform: scale(1);
+    transform-origin: top left;
+    opacity: 0;
+    overflow: auto;
+    will-change: transform, opacity;
+    z-index: $mdc-menu-surface-z-index;
+
+    &:focus {
+      outline: none;
+    }
+
+    &--open {
+      display: inline-block;
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  &--animating-open {
+    @include mdc-feature-targets($feat-structure) {
+      display: inline-block;
+      transform: scale(.8);
+      opacity: 0;
+    }
+
+    @include mdc-feature-targets($feat-animation) {
+      transition:
+        opacity $mdc-menu-surface-fade-in-duration linear,
+        transform $mdc-menu-surface-scale-duration
+          $mdc-animation-deceleration-curve-timing-function;
+    }
+  }
+
+  &--animating-closed {
+    @include mdc-feature-targets($feat-structure) {
+      display: inline-block;
+      opacity: 0;
+    }
+
+    @include mdc-feature-targets($feat-animation) {
+      transition: opacity $mdc-menu-surface-fade-out-duration linear;
+    }
+  }
+
+}
diff --git a/packages/mdc-menu-surface/mdc-menu-surface.scss b/packages/mdc-menu-surface/mdc-menu-surface.scss
@@ -20,67 +20,5 @@
 // THE SOFTWARE.
 //
 
-@import "@material/animation/variables";
-@import "@material/elevation/mixins";
-@import "@material/theme/mixins";
-@import "@material/rtl/mixins";
 @import "./mixins";
-@import "./variables";
-
-// postcss-bem-linter: define menu-surface
-.mdc-menu-surface {
-  @include mdc-elevation(8);
-  @include mdc-menu-surface-fill-color(surface);
-  @include mdc-menu-surface-ink-color(on-surface);
-  @include mdc-rtl-reflexive-property(transform-origin, top left, top right);
-  @include mdc-menu-surface-shape-radius(medium);
-
-  display: none;
-  position: absolute;
-  box-sizing: border-box;
-  max-width: calc(100vw - #{$mdc-menu-surface-min-distance-from-edge});
-  max-height: calc(100vh - #{$mdc-menu-surface-min-distance-from-edge});
-  margin: 0;
-  padding: 0;
-  transform: scale(1);
-  transform-origin: top left;
-  opacity: 0;
-  overflow: auto;
-  will-change: transform, opacity;
-  z-index: $mdc-menu-surface-z-index;
-
-  &:focus {
-    outline: none;
-  }
-
-  &--animating-open {
-    display: inline-block;
-    transform: scale(.8);
-    transition:
-      opacity $mdc-menu-surface-fade-in-duration linear,
-      transform $mdc-menu-surface-scale-duration $mdc-animation-deceleration-curve-timing-function;
-    opacity: 0;
-  }
-
-  &--open {
-    display: inline-block;
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  &--animating-closed {
-    display: inline-block;
-    transition: opacity $mdc-menu-surface-fade-out-duration linear;
-    opacity: 0;
-  }
-}
-
-.mdc-menu-surface--anchor {
-  position: relative;
-  overflow: visible;
-}
-
-.mdc-menu-surface--fixed {
-  position: fixed;
-}
-// postcss-bem-linter: end
+@include mdc-menu-surface;
diff --git a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss
@@ -1,5 +1,6 @@
 @import "@material/feature-targeting/functions";
 @import "@material/button/mixins";
+@import "@material/menu-surface/mixins";
 @import "@material/checkbox/mixins";
 @import "@material/radio/mixins";
 @import "@material/menu/mixins";
@@ -8,3 +9,4 @@
 @include mdc-checkbox($query: mdc-feature-any());
 @include mdc-radio($query: mdc-feature-any());
 @include mdc-menu($query: mdc-feature-any());
+@include mdc-menu-surface($query: mdc-feature-any());