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

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.
Note: For these to work, content must come after both bars in the markup */
.bar ~ main {
.bar-header ~ main {
top: 50px; }
.bar ~ main {
.has-footer {
bottom: 50px; }
/* Bar docked to bottom used for primary app navigation */

79
example/footers.html
View File

@ -17,10 +17,85 @@
<h1 class="title">Footers</h1>
</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>
<footer class="bar bar-footer bar-dark">
<h3 class="title"> Me footer </h3>
</footer>
</section>
</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.
Note: For these to work, content must come after both bars in the markup */
.bar ~ main {
.bar-header ~ main {
top: $barHeight;
}
.bar ~ main {
.has-footer {
bottom: $barHeight;
}