shadow - smartie-pwa

commit 6e32919abc2924360b81ca5a0aa4829951157a4e
parent c14a6fe69649cb3e34f6db407eccaec6f780d846
Author: Milan Pässler <me@pbb.lc>
Date: Tue, 4 Jun 2019 00:58:55 +0200

shadow

1 file changed, 12 insertions(+), 3 deletions(-)

src/layout.js

++++++++++++---

diff --git a/src/layout.js b/src/layout.js
@@ -69,7 +69,8 @@ class SmartHomeLayout extends LitElement {
 				</div>
 				<mwc-icon-button slot="navigationIcon" icon="menu"></mwc-icon-button>
 			</mwc-top-app-bar>
-			<div class="top-app-bar-adjust">${this.activePage.content}</div>
+			<div class="top-app-bar-adjust"></div>
+			${this.activePage.content}
 		`;
 	}
 

@@ -85,13 +86,17 @@ class SmartHomeLayout extends LitElement {
 			}
 			mwc-top-app-bar {
 				position: fixed;
+				z-index: 10;
 			}
 			.top-app-bar-adjust {
-				margin-top: 56px;
+				box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
+				position: relative;
+				z-index: 1;
+				height: 56px;
 			}
 			@media (min-width: 600px) {
 				.top-app-bar-adjust {
-					margin-top: 64px;
+					height: 64px;
 				}
 				#title-container {
 					width: 100vw;

@@ -103,6 +108,10 @@ class SmartHomeLayout extends LitElement {
 					z-index: 10;
 				}
 			}
+			mwc-drawer {
+				position: relative;
+				z-index: 11;
+			}
 
 			#drawer-content {
 				display: flex;