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

Progress on header bar box sizing

Browse Source
This commit is contained in:
Max Lynch
2013-09-09 16:44:55 -05:00
parent 4a963f41f3
commit c7b0728fad
3 changed files with 14 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
example/headers.html
View File

@ -20,14 +20,9 @@
<section> <section>
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<div class="buttons"> <h1 class="title">Really really really really really really really really long title!</h1>
<a class="button button-clear">Back</a> <a class="button button-clear">Back</a>
<a class="button button-clear">This</a> <a class="button button-clear">This</a>
</div>
<h1 class="title">Really really really really really really really really long title!</h1>
<div class="buttons">
<a class="button">Forward</a>
</div>
</header> </header>
<div class="bar bar-header-secondary bar-dark"> <div class="bar bar-header-secondary bar-dark">
<div class="button-bar"> <div class="button-bar">
@ -37,19 +32,13 @@
</div> </div>
</div> </div>
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<div class="buttons">
<a class="button button-clear">Back</a> <a class="button button-clear">Back</a>
<a class="button button-clear">This</a>
</div>
<div class="button-bar"> <div class="button-bar">
<a class="button">Success</a> <a class="button">Success</a>
<a class="button">Warning</a> <a class="button">Warning</a>
<a class="button">Danger</a> <a class="button">Danger</a>
</div> </div>
<div class="buttons">
<a class="button button-clear">Back</a>
<a class="button button-clear">This</a> <a class="button button-clear">This</a>
</div>
</header> </header>
<main class="content content-padded has-header"> <main class="content content-padded has-header">

38
scss/ionic/structure/_bar.scss
View File

@ -3,6 +3,9 @@
.bar { .bar {
@include disable-user-select(); @include disable-user-select();
display: -webkit-box;
display: box;
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -19,9 +22,9 @@
position: absolute; position: absolute;
z-index: 0; z-index: 0;
width: 100%;
top: 0; top: 0;
left: 0; left: 0;
right: 0;
line-height: $barHeight; line-height: $barHeight;
@ -44,41 +47,20 @@
color: inherit; color: inherit;
} }
.button {
@include box-flex(0);
}
// Place the last button in a bar on the right of the bar // Place the last button in a bar on the right of the bar
/*
.title + .button:last-child, .title + .button:last-child,
.button + .button:last-child, > .button + > .button:last-child,
.button.pull-right { > .button.pull-right {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; right: 5px;
} }
*/
} }
.buttons {
position: absolute;
// Lift the buttons container above the title
z-index: 1;
padding: $barPaddingPortrait;
line-height: $barButtonsLineHeight;
.button {
padding: 6px 12px;
line-height: 14px;
}
}
.buttons:first-child {
left: 0;
top: 0;
}
.buttons:last-child {
right: 0;
top: 0;
}
// Header at top // Header at top
.bar-header { .bar-header {

1
scss/ionic/structure/_button-group.scss
View File

@ -75,7 +75,6 @@
.button-bar > .button { .button-bar > .button {
@include box-flex(1); @include box-flex(1);
// Fix for box-flex width issue // Fix for box-flex width issue
width: 0;
line-height: 8px; line-height: 8px;
border-radius: 0; border-radius: 0;