fix(menu): menus show proper drop shadows (#19454)

fixes #19387
ionic-team · Sep 26, 2019 · eab0865 · eab0865
1 parent c79e74b
commit eab0865
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 37 deletions.
diff --git a/core/src/components/menu-controller/menu-controller.scss b/core/src/components/menu-controller/menu-controller.scss
diff --git a/core/src/components/menu-controller/menu-controller.ts b/core/src/components/menu-controller/menu-controller.ts
@@ -4,8 +4,7 @@ import { AnimationBuilder, IonicAnimation, MenuI } from '../../interface';
 import { menuController } from '../../utils/menu-controller';
 
 @Component({
-  tag: 'ion-menu-controller',
-  styleUrl: 'menu-controller.scss'
+  tag: 'ion-menu-controller'
 })
 export class MenuController {
 

diff --git a/core/src/css/core.scss b/core/src/css/core.scss
@@ -1,5 +1,7 @@
 @import "../themes/ionic.skip-warns.scss";
 @import "../themes/ionic.globals";
+@import "../components/menu/menu.ios.vars";
+@import "../components/menu/menu.md.vars";
 
 // Ionic Font Family
 // --------------------------------------------------
@@ -128,3 +130,41 @@ html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
     --ion-safe-area-right: env(safe-area-inset-right);
   }
 }
+
+// Menu Styles
+// TODO: Find a better long term solution for this
+// --------------------------------------------------
+
+.menu-content {
+  @include transform(translate3d(0, 0, 0));
+}
+
+.menu-content-open {
+  cursor: pointer;
+  touch-action: manipulation;
+
+  // the containing element itself should be clickable but
+  // everything inside of it should not clickable when menu is open
+  pointer-events: none;
+}
+
+.ios .menu-content-reveal {
+  box-shadow: $menu-ios-box-shadow-reveal;
+}
+
+[dir=rtl].ios .menu-content-reveal {
+  box-shadow: $menu-ios-box-shadow-reveal-rtl;
+}
+
+.ios .menu-content-push {
+  box-shadow: $menu-ios-box-shadow-push;
+}
+
+.md .menu-content-reveal {
+  box-shadow: $menu-md-box-shadow;
+}
+
+.md .menu-content-push {
+  box-shadow: $menu-md-box-shadow;
+}
+