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

footer

Browse Source
This commit is contained in:
Adam Bradley
2013-08-26 12:46:17 -05:00
parent 9cbbfb2c61
commit 3d4358f51e
3 changed files with 83 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/framework-with-theme.css vendored
View File

@ -129,10 +129,10 @@ main > * {
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
Note: For these to work, content must come after both bars in the markup */ Note: For these to work, content must come after both bars in the markup */
.bar ~ main { .bar-header ~ main {
top: 50px; } top: 50px; }
.bar ~ main { .has-footer {
bottom: 50px; } bottom: 50px; }
/* Bar docked to bottom used for primary app navigation */ /* Bar docked to bottom used for primary app navigation */

79
example/footers.html
View File

@ -17,10 +17,85 @@
<h1 class="title">Footers</h1> <h1 class="title">Footers</h1>
</header> </header>
<main> <main class="content-padded has-footer">
<p>Footer should always stay at the bottom of the screen, and on top of the main content.
<ul>
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
<li>asdf
</ul>
<p>Bottom of the list
</main> </main>
<footer class="bar bar-footer bar-dark">
<h3 class="title"> Me footer </h3>
</footer>
</section> </section>
</body> </body>

6
scss/framework/structure/_bar.scss
View File

@ -75,9 +75,11 @@
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
Note: For these to work, content must come after both bars in the markup */ Note: For these to work, content must come after both bars in the markup */
.bar ~ main { .bar-header ~ main {
top: $barHeight; top: $barHeight;
} }
.bar ~ main {
.has-footer {
bottom: $barHeight; bottom: $barHeight;
} }