Skip to content

Commit 686c262

Browse files
committed
feat(footer): apply shadow on MD footer and tabbar bottom
1 parent 845a516 commit 686c262

File tree

1 file changed

+14
-2
lines changed

1 file changed

+14
-2
lines changed

src/components/toolbar/toolbar.md.scss

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ $navbar-md-height: $toolbar-md-height !default;
3030

3131

3232
ion-header::after,
33-
[tabbarplacement="top"] > ion-tabbar::after {
33+
[tabbarplacement="top"] > ion-tabbar::after,
34+
ion-footer::before,
35+
[tabbarplacement="bottom"] > ion-tabbar::before {
3436
// using datauri png background image for improved scroll performance
3537
// rather than using `box-shadow: 0 2px 5px rgba(0,0,0,0.26);`
3638
// noticable performance difference on older Android devices
@@ -41,12 +43,22 @@ ion-header::after,
4143
width: 100%;
4244
height: 5px;
4345

44-
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAIBAMAAAARjyJQAAAAFVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQCkAAAAB3RSTlMBLRUGDSA4cBS/RQAAACBJREFUeF5jSEMCDIJIgCEUCTAoIQEGFyTAYIwEGHACAG7+EL36X1OAAAAAAElFTkSuQmCC);
46+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);
47+
background-position: 0 -2px;
4548
background-repeat: repeat-x;
4649

4750
content: "";
4851
}
4952

53+
ion-footer::before,
54+
[tabbarplacement="bottom"] > ion-tabbar::before {
55+
bottom: auto;
56+
top: -2px;
57+
58+
height: 2px;
59+
60+
background-position: 0 0;
61+
}
5062

5163
.toolbar {
5264
padding: $toolbar-md-padding;

0 commit comments

Comments
 (0)