javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(footer): apply shadow on MD footer and tabbar bottom

Browse Source
This commit is contained in:
Adam Bradley
2016-06-30 11:57:09 -05:00
parent 845a516375
commit 686c262c4c
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/toolbar/toolbar.md.scss
View File

@@ -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;