From 686c262c4c4b3c76e879fa8a9d73f7201adf3b40 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 30 Jun 2016 11:57:09 -0500 Subject: [PATCH] feat(footer): apply shadow on MD footer and tabbar bottom --- src/components/toolbar/toolbar.md.scss | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss index 53316f4b5f..aa4980a136 100644 --- a/src/components/toolbar/toolbar.md.scss +++ b/src/components/toolbar/toolbar.md.scss @@ -30,7 +30,9 @@ $navbar-md-height: $toolbar-md-height !default; ion-header::after, -[tabbarplacement="top"] > ion-tabbar::after { +[tabbarplacement="top"] > ion-tabbar::after, +ion-footer::before, +[tabbarplacement="bottom"] > ion-tabbar::before { // using datauri png background image for improved scroll performance // rather than using `box-shadow: 0 2px 5px rgba(0,0,0,0.26);` // noticable performance difference on older Android devices @@ -41,12 +43,22 @@ ion-header::after, width: 100%; height: 5px; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAIBAMAAAARjyJQAAAAFVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQCkAAAAB3RSTlMBLRUGDSA4cBS/RQAAACBJREFUeF5jSEMCDIJIgCEUCTAoIQEGFyTAYIwEGHACAG7+EL36X1OAAAAAAElFTkSuQmCC); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==); + background-position: 0 -2px; background-repeat: repeat-x; content: ""; } +ion-footer::before, +[tabbarplacement="bottom"] > ion-tabbar::before { + bottom: auto; + top: -2px; + + height: 2px; + + background-position: 0 0; +} .toolbar { padding: $toolbar-md-padding;