javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Box flex mixings and fix for tab item siz

Browse Source
This commit is contained in:
Max Lynch
2013-08-31 18:32:41 -05:00
parent d0bccbf9f5
commit d7aa9ba51e
4 changed files with 45 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
dist/ionic.css vendored
View File

@ -1099,16 +1099,19 @@ a.list-item {
display: box; display: box;
height: 100%; height: 100%;
list-style: none; list-style: none;
box-orient: horizontal;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
box-orient: horizontal; } -moz-box-orient: horizontal; }
/* Navigational tab */ /* Navigational tab */
.tab-item { .tab-item {
height: 100%; height: 100%;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
box-flex: 1; } -moz-box-flex: 1;
width: 0; }
.tab-item a { .tab-item a {
text-decoration: none; text-decoration: none;
display: block; display: block;

36
example/index.html
View File

@ -22,24 +22,24 @@
</header> </header>
<main class="content-padded has-header"> <main class="content-padded has-header">
<p><a class="button button-default" href="alerts.html">Alerts</a></p> <p><a class="button button-block button-default" href="alerts.html">Alerts</a></p>
<p><a class="button button-default" href="buttons.html">Buttons</a></p> <p><a class="button button-block button-default" href="buttons.html">Buttons</a></p>
<p><a class="button button-default" href="button-groups.html">Button Groups</a></p> <p><a class="button button-block button-default" href="button-groups.html">Button Groups</a></p>
<p><a class="button button-default" href="events.html">Events</a></p> <p><a class="button button-block button-default" href="events.html">Events</a></p>
<p><a class="button button-default" href="footers.html">Footers</a></p> <p><a class="button button-block button-default" href="footers.html">Footers</a></p>
<p><a class="button button-default" href="forms.html">Forms</a></p> <p><a class="button button-block button-default" href="forms.html">Forms</a></p>
<p><a class="button button-default" href="grids.html">Grids</a></p> <p><a class="button button-block button-default" href="grids.html">Grids</a></p>
<p><a class="button button-default" href="headers.html">Headers</a></p> <p><a class="button button-block button-default" href="headers.html">Headers</a></p>
<p><a class="button button-default" href="image-swipe.html">Image Swipe</a></p> <p><a class="button button-block button-default" href="image-swipe.html">Image Swipe</a></p>
<p><a class="button button-default" href="input-slider.html">Input: Slider</a></p> <p><a class="button button-block button-default" href="input-slider.html">Input: Slider</a></p>
<p><a class="button button-default" href="input-text.html">Input: Text</a></p> <p><a class="button button-block button-default" href="input-text.html">Input: Text</a></p>
<p><a class="button button-default" href="input-toggle.html">Input: Toggle</a></p> <p><a class="button button-block button-default" href="input-toggle.html">Input: Toggle</a></p>
<p><a class="button button-default" href="lists.html">Lists</a></p> <p><a class="button button-block button-default" href="lists.html">Lists</a></p>
<p><a class="button button-default" href="modals.html">Modals</a></p> <p><a class="button button-block button-default" href="modals.html">Modals</a></p>
<p><a class="button button-default" href="panels.html">Panels</a></p> <p><a class="button button-block button-default" href="panels.html">Panels</a></p>
<p><a class="button button-default" href="popovers.html">Popovers</a></p> <p><a class="button button-block button-default" href="popovers.html">Popovers</a></p>
<p><a class="button button-default" href="pull-to-refresh.html">Pull To Refresh</a></p> <p><a class="button button-block button-default" href="pull-to-refresh.html">Pull To Refresh</a></p>
<p><a class="button button-default" href="tab-bars.html">Tab Bars</a></p> <p><a class="button button-block button-default" href="tab-bars.html">Tab Bars</a></p>
</main> </main>
</section> </section>

16
scss/ionic/_mixins.scss
View File

@ -1,3 +1,7 @@
// _mixins.scss
//
// Useful utilities and mixins for SCSS files.
@mixin button-style($bgColor, $borderColor, $color) { @mixin button-style($bgColor, $borderColor, $color) {
color: $color; color: $color;
background-color: $bgColor; background-color: $bgColor;
@ -405,6 +409,18 @@
filter: alpha(opacity=$opacity); filter: alpha(opacity=$opacity);
} }
@mixin box-orient($orientation) {
box-orient: $orientation;
-webkit-box-orient: $orientation;
-moz-box-orient: $orientation;
}
@mixin box-flex($flex) {
box-flex: 1;
-webkit-box-flex: $flex;
-moz-box-flex: $flex;
}
// BACKGROUNDS // BACKGROUNDS

10
scss/ionic/structure/_tabs.scss
View File

@ -14,8 +14,7 @@
display: box; display: box;
height: 100%; height: 100%;
list-style: none; list-style: none;
-webkit-box-orient: horizontal; @include box-orient(horizontal);
box-orient: horizontal;
} }
/* Navigational tab */ /* Navigational tab */
@ -23,8 +22,11 @@
height: 100%; height: 100%;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
-webkit-box-flex: 1;
box-flex: 1; @include box-flex(1);
// Required to force box elements to be the same size;
width: 0;
a { a {
text-decoration: none; text-decoration: none;