From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 6 Sep 2017 17:04:27 +0000 (+0200)
Subject: Add background overlay and initial drop shadow for MMenu.  WIP #1501 @0:25
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ff8572cd074dc4e6733abce888adf4244637b4e8;p=fluidbook-html5.git

Add background overlay and initial drop shadow for MMenu.  WIP #1501 @0:25
---

diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less
index 8458847a..bcbef1f6 100644
--- a/style/mmenu/mmenu.less
+++ b/style/mmenu/mmenu.less
@@ -57,6 +57,10 @@
 }
 
 // Page overlay opacity
+#mm-blocker {
+  background-color: #000;
+  opacity: 0;
+}
 html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   opacity: 0.5;
   transition: opacity .4s ease 0s; // No delay before fading in the overlay
@@ -74,6 +78,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   //white-space: nowrap;
   background-color: @menu-background;
   color: @menu-text;
+  box-shadow: rgba(0, 0, 0, 0.2) -5px 6px 13px 0px; // ToDo: adjust drop-shadow depending on which side the menu comes from
 
   a, li > span {
     padding: 10px 10px 10px 29px;