javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 21:15:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

codes

Browse Source
This commit is contained in:
Adam Bradley
2015-03-20 12:55:08 -05:00
parent 68d4de2308
commit aa5b1535a8
2 changed files with 63 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/tool-bar/tool-bar.scss
View File

@ -15,32 +15,56 @@
@include flex-order(80);
}
.bar > .title {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
@include flex-display();
display:none;
}
.bar > .title > .inner-title {
/*text-align: center;
@include flex-align-self(center);*/
}
.bar-accessories {
.bar-items {
@include flex(1);
@include flex-display();
@include flex-justify-content(space-between);
}
.bar > .accessory-primary {
/*@include flex-align-self(flex-start);*/
.bar-items > .title {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: maroon;
margin: 0 140px;
@include flex(1);
@include flex-display();
@include flex-align-items(center);
}
.bar > .accessory-secondary {
/*@include flex-align-self(flex-end);*/
/*display:none;*/
.bar-items > .title > .inner-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: blue;
}
.back-button {
@include flex-display();
background: purple;
.back-button-icon {
background: blue;
}
}
.bar-items > .spacer {
@include flex(1);
}
.bar-android {
.spacer {
@include flex(none);
}
.title {
position: static;
margin: 0;
}
}

23
src/components/view/view.js
View File

@ -9,17 +9,30 @@ import {Ion} from '../ion';
})
@Template({
inline: `
<div class="container">
<div class="bar">
<div class="bar-accessories">
<div class="bar-accessory accessory-primary" style="background:red">
<div class="bar bar-android2">
<div class="bar-items">
<div class="back-button">
<div class="back-button-icon">&lt;</div>
<div class="back-button-text">
<div class="back-default">Back</div>
<div class="back-title"></div>
</div>
</div>
<div class="title">
<div class="inner-title">
Create hybrid mobile apps with the web technologies you love. Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps. Built with Sass and optimized for AngularJS.
</div>
</div>
<div class="bar-primary-item" style="background:red">
PRIMARY
</div>
<div class="bar-accessory accessory-secondary" style="background:green">
<div class="spacer"></div>
<div class="bar-secondary-item" style="background:green">
SECONDARY
</div>
</div>
</div>
<div class="container">
<content></content>
</div>`
})