javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

toolbar button updates

Browse Source
This commit is contained in:
Adam Bradley
2015-07-23 22:12:44 -05:00
parent 6d2b8c582e
commit 65449552e7
2 changed files with 46 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
ionic/components/toolbar/test/scenarios/main.html
View File

@@ -1,34 +1,50 @@
<ion-toolbar><ion-title>Title Only</ion-title></ion-toolbar>
<ion-toolbar><ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button>Pri. Item</button></ion-nav-items><ion-title>Primary Only</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button><icon name="ion-navicon"></icon></button><button><icon name="ion-heart"></icon></button></ion-nav-items><ion-nav-items secondary><button><icon name="ion-more"></icon></button></ion-nav-items><ion-title>Defaults</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items secondary><button>Sec. Item</button></ion-nav-items><ion-title>Secondary Only</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button class="hover"><icon name="ion-navicon"></icon></button><button class="hover"><icon name="ion-heart"></icon></button></ion-nav-items><ion-nav-items secondary><button class="hover"><icon name="ion-more"></icon></button></ion-nav-items><ion-title>Defaults.hover</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button><icon name="ion-navicon"></icon></button><button><icon name="ion-heart"></icon></button></ion-nav-items><ion-nav-items secondary><button><icon name="ion-ionic"></icon></button></ion-nav-items><ion-title>Defaults</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button class="activated"><icon name="ion-navicon"></icon></button><button class="activated"><icon name="ion-heart"></icon></button></ion-nav-items><ion-nav-items secondary><button class="activated"><icon name="ion-more"></icon></button></ion-nav-items><ion-title>Defaults.activated</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button clear primary><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-title>Button Clear</ion-title><ion-nav-items secondary><button clear secondary><icon name="ion-help-circled"></icon>Help</button></ion-nav-items></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button clear primary><icon name="ion-flag"></icon></button><button clear primary><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary>Help<icon name="ion-help-circled"></icon></button></ion-nav-items></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button primary outline><icon name="ion-navicon"></icon></button primary><button primary outline><icon name="ion-star"></icon></button></ion-nav-items><ion-nav-items secondary><button secondary outline><icon name="ion-flag"></icon></button></ion-nav-items><ion-title>Button Outline</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button clear primary class="hover"><icon name="ion-flag"></icon></button><button clear primary class="hover"><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary class="hover">Help<icon name="ion-help-circled"></icon></button></ion-nav-items></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button primary>Btn</button></ion-nav-items><ion-nav-items secondary><button secondary>Btn</button></ion-nav-items><ion-title>Added Color Attr</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button clear primary class="activated"><icon name="ion-flag"></icon></button><button clear primary class="activated"><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary class="activated">Help<icon name="ion-help-circled"></icon></button></ion-nav-items></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button primary><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-nav-items secondary><button primary><icon name="ion-help-circled"></icon>Help</button></ion-nav-items><ion-title>Icon/Color Attr</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button primary outline><icon name="ion-navicon"></icon></button primary><button primary outline><icon name="ion-star"></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline><icon name="ion-flag"></icon></button></ion-nav-items><ion-title>Outline</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button primary outline class="hover"><icon name="ion-navicon"></icon></button primary><button primary outline class="hover"><icon name="ion-star"></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline class="hover"><icon name="ion-flag"></icon></button></ion-nav-items><ion-title>Outline.hover</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button primary outline class="activated"><icon name="ion-navicon"></icon></button primary><button primary outline class="activated"><icon name="ion-star"></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline class="activated"><icon name="ion-flag"></icon></button></ion-nav-items><ion-title>Outline.activated</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button primary>Btn</button></ion-nav-items><ion-nav-items secondary><button secondary>Btn</button></ion-nav-items><ion-title>ColorAttr</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button primary class="hover">Btn</button></ion-nav-items><ion-nav-items secondary><button secondary class="hover">Btn</button></ion-nav-items><ion-title>ColorAttr.hover</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button primary class="activated">Btn</button></ion-nav-items><ion-nav-items secondary><button secondary class="activated">Btn</button></ion-nav-items><ion-title>ColorAttr.activated</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button primary><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-nav-items secondary><button primary>Edit<icon name="ion-edit"></icon></button></ion-nav-items><ion-title>Icon/Color Attr</ion-title></ion-toolbar>
<style>
ion-toolbar {
.toolbar {
border-bottom: 1px solid black;
background: #eee !important;
}
</style>

23
ionic/components/toolbar/toolbar-buttons.scss
View File

@@ -16,14 +16,29 @@
box-shadow: none;
&.icon-only icon {
padding: 0 0.4rem;
}
&.icon-left icon {
margin-left: -0.2rem;
}
&.icon-right icon {
margin-right: -0.2rem;
}
&[clear] {
padding: 0;
padding: 0 3px;
icon {
margin-right: 0;
margin-left: 0;
}
}
}
icon {
font-size: 2.4rem;
padding: 0 4px;
font-size: 2.2rem;
}
}