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

tab-bar/toolbar alignment

Browse Source
This commit is contained in:
Adam Bradley
2015-04-10 15:36:43 -05:00
parent 749eef2232
commit a55d0ab478
9 changed files with 99 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/app/flex-order.scss Normal file
View File

@@ -0,0 +1,15 @@
// Flex Order
// --------------------------------------------------
// the rock that everything orders around
$flex-order-view-content: 40 !default;
$flex-order-toolbar-top: 20 !default;
$flex-order-toolbar-bottom: 60 !default;
$flex-order-tab-bar-top: 30 !default;
$flex-order-tab-bar-bottom: 50 !default;

59
src/components/app/mixins/util.scss
View File

@@ -70,39 +70,50 @@
// --------------------------------------------------
@mixin hairline($placement, $line-color, $z-index: 999) {
// use $line-color: none to override existing hairline settings
@if $placement == top {
&:before {
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 0;
z-index: $z-index;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0%);
background-color: $line-color;
content: '';
@if $line-color == none {
background-color: inherit;
} @else {
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 0;
z-index: $z-index;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0%);
background-color: $line-color;
content: '';
}
}
} @else if $placement == bottom {
&:after {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0%);
background-color: $line-color;
content: '';
@if $line-color == none {
background-color: inherit;
} @else {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
z-index: $z-index;
display: block;
width: 100%;
height: 1px;
@include transform-origin(50%, 0%);
background-color: $line-color;
content: '';
}
}
}

2
src/components/app/scaffolding.scss
View File

@@ -47,6 +47,7 @@ html {
// container of many .nav-pane's, each one containing one view
position: relative;
@include flex(1);
@include flex-order($flex-order-view-content);
}
.tab-pane-container {
@@ -54,6 +55,7 @@ html {
position: relative;
width: 100%;
height: 100%;
@include flex-order($flex-order-view-content);
}
.nav-pane {