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

Merge remote-tracking branch 'origin/css-refactor' into css-refactor

Browse Source
This commit is contained in:
Brandy Carney
2015-12-07 18:17:29 -05:00
parent d942ec7b17 3143091d63
commit 367f4a8168
18 changed files with 782 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
demos/list/app.html Normal file
View File

@@ -0,0 +1,24 @@
<ion-menu [content]="content" id="leftMenu" side="left">
<ion-toolbar primary>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item *ng-for="#p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button ion-item menu-close="leftMenu" detail-none>
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

45
demos/list/main.html → demos/list/basic-list.html
View File

@@ -1,4 +1,15 @@
<ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar>
<ion-navbar *navbar class="show-navbar">
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>
<ion-title>
Basic List
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
@@ -29,15 +40,6 @@
</ion-note>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>
List Header
</ion-list-header>
<ion-switch checked="true">
<icon color-wand item-left></icon>
Magic
@@ -51,15 +53,6 @@
</ion-note>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>
List Header with text that is too long to fit inside the list header
</ion-list-header>
<ion-item>
<icon pizza item-left></icon>
Pizza
@@ -87,18 +80,4 @@
</ion-list>
<ion-list>
<ion-item>
<icon chatboxes item-left></icon>
New List, no header, Item 1
</ion-item>
<ion-item>
<icon chatboxes item-left></icon>
New List, no header, Item 2
</ion-item>
</ion-list>
</ion-content>

70
demos/list/index.ts
View File

@@ -1,7 +1,71 @@
import {App} from 'ionic/ionic';
import {App, IonicApp, Page, Platform} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
templateUrl: 'app.html'
})
class E2EApp {}
class ApiDemoApp {
constructor(app: IonicApp, platform: Platform) {
this.app = app;
this.platform = platform;
this.rootPage = PageOne;
this.pages = [
{ title: 'Basic List', component: PageOne },
{ title: 'Inset List', component: PageTwo },
{ title: 'No-lines List', component: PageThree },
{ title: 'List Headers', component: PageFour },
{ title: 'Sliding Items', component: PageFive },
];
}
openPage(page) {
this.app.getComponent('leftMenu').close();
let nav = this.app.getComponent('nav');
nav.setRoot(page.component);
}
}
@Page({
templateUrl: 'basic-list.html',
})
export class PageOne{
constructor() {
}
}
@Page({
templateUrl: 'inset-list.html',
})
export class PageTwo {
constructor() {
}
}
@Page({
templateUrl: 'no-lines-list.html',
})
export class PageThree {
constructor() {
}
}
@Page({
templateUrl: 'list-headers.html',
})
export class PageFour {
constructor() {
}
}
@Page({
templateUrl: 'sliding-items.html',
})
export class PageFive {
constructor() {
}
}

83
demos/list/inset-list.html Normal file
View File

@@ -0,0 +1,83 @@
<ion-navbar *navbar class="show-navbar">
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>
<ion-title>
Inset List
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list inset>
<ion-list-header>
List Header
</ion-list-header>
<ion-switch>
<icon wifi item-left></icon>
Wifi
</ion-switch>
<ion-item>
<icon heart item-left></icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<icon home item-left></icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
<ion-switch checked="true">
<icon color-wand item-left></icon>
Magic
</ion-switch>
<ion-item>
<icon star item-left></icon>
Star status
<ion-note item-right>
Super
</ion-note>
</ion-item>
<ion-item>
<icon pizza item-left></icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<icon beer item-left></icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<icon wine item-left></icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
</ion-content>

37
demos/list/list-headers.html Normal file
View File

@@ -0,0 +1,37 @@
<ion-navbar *navbar class="show-navbar">
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>
<ion-title>
List Headers
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list>
<ion-list-header>Comedy</ion-list-header>
<ion-item>Airplane!</ion-item>
<ion-item>Caddyshack</ion-item>
<ion-item>Coming To America</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Action</ion-list-header>
<ion-item>Terminator II</ion-item>
<ion-item>The Empire Strikes Back</ion-item>
<ion-item>Blade Runner</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Horror</ion-list-header>
<ion-item>The Evil Dead</ion-item>
<ion-item>Poldergeist</ion-item>
<ion-item>Aliens</ion-item>
</ion-list>
</ion-content>

83
demos/list/no-lines-list.html Normal file
View File

@@ -0,0 +1,83 @@
<ion-navbar *navbar class="show-navbar">
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>
<ion-title>
No-lines List
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list no-lines>
<ion-list-header>
List Header
</ion-list-header>
<ion-switch>
<icon wifi item-left></icon>
Wifi
</ion-switch>
<ion-item>
<icon heart item-left></icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<icon home item-left></icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
<ion-switch checked="true">
<icon color-wand item-left></icon>
Magic
</ion-switch>
<ion-item>
<icon star item-left></icon>
Star status
<ion-note item-right>
Super
</ion-note>
</ion-item>
<ion-item>
<icon pizza item-left></icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<icon beer item-left></icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<icon wine item-left></icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
</ion-content>

59
demos/list/sliding-items.html Normal file
View File

@@ -0,0 +1,59 @@
<ion-navbar *navbar class="show-navbar">
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>
<ion-title>
Sliding Items
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list>
<ion-item-sliding #item>
<button ion-item text-wrap>
<h3>Max Lynch</h3>
<p>
Hey do you want to go to the game tonight?
</p>
</button>
<ion-item-options>
<button primary>Archive</button>
<button danger>Delete</button>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding #item>
<button ion-item text-wrap>
<h3>Adam Bradley</h3>
<p>
I think I figured out how to get more Mountain Dew
</p>
</button>
<ion-item-options>
<button primary>Archive</button>
<button danger>Delete</button>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding #item>
<button ion-item text-wrap>
<h3>Ben Sperry</h3>
<p>
I like paper
</p>
</button>
<ion-item-options>
<button primary>Archive</button>
<button danger>Delete</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>

5
ionic/components/button/button.ts
View File

@@ -37,7 +37,7 @@ export class Button {
) {
this._role = 'button'; // bar-button/item-button
this._size = null; // large/small
this._style = null; // outline/clear/solid
this._style = 'default'; // outline/clear/solid
this._shape = null; // round/fab
this._display = null; // block/full
this._colors = []; // primary/secondary
@@ -136,14 +136,13 @@ export class Button {
if (role) {
this.renderer.setElementClass(this.elementRef, role, assignCssClass); // button
this._setClass(this._style, assignCssClass); // button-clear
this._setClass(this._style, assignCssClass); // button-clear
this._setClass(this._shape, assignCssClass); // button-round
this._setClass(this._display, assignCssClass); // button-full
this._setClass(this._size, assignCssClass); // button-small
this._setClass(this._icon, assignCssClass); // button-icon-left
let colorStyle = (this._style && this._style !== 'solid' ? this._style + '-' : '');
let colorStyle = (this._style !== 'default' ? this._style + '-' : '');
this._colors.forEach(colorName => {
this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
});

7
ionic/components/button/modes/ios.scss
View File

@@ -118,8 +118,9 @@ $button-ios-small-icon-font-size: 1.3em !default;
border-width: 1px;
border-style: solid;
border-color: $button-ios-color;
background-color: transparent;
color: $button-ios-color;
background-color: transparent;
border-radius: 4px;
&.activated {
opacity: 1;
@@ -137,8 +138,8 @@ $button-ios-small-icon-font-size: 1.3em !default;
.button-outline-#{$color-name} {
$fg-color: color-shade($color-value, 5%);
border-color: $fg-color;
background-color: transparent;
color: $fg-color;
background-color: transparent;
&.activated {
color: $background-ios-color;
@@ -182,13 +183,13 @@ $button-ios-small-icon-font-size: 1.3em !default;
&.activated {
opacity: 0.4;
background-color: transparent;
}
&:hover:not(.disable-hover) {
color: color-shade($fg-color);
}
}
}
// iOS Round Button

19
ionic/components/button/test/button.spec.ts
View File

@@ -82,8 +82,21 @@ export function run() {
b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-solid')).toEqual(true);
expect(hasClass(b, 'button-primary')).toEqual(true);
expect(hasClass(b, 'button-secondary')).toEqual(true);
expect(hasClass(b, 'button-solid-primary')).toEqual(true);
expect(hasClass(b, 'button-solid-secondary')).toEqual(true);
});
it('should auto add the default style', () => {
let b = mockButton();
b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-default')).toEqual(true);
b = mockButton(['clear']);
b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-default')).toEqual(false);
expect(hasClass(b, 'button-clear')).toEqual(true);
});
it('should read button color attributes', () => {
@@ -180,7 +193,7 @@ export function run() {
expect(b._role).toEqual('button');
expect(b._size).toEqual(null);
expect(b._colors.length).toEqual(0);
expect(b._style).toEqual(null);
expect(b._style).toEqual('default');
expect(b._display).toEqual(null);
});

20
ionic/components/scroll/scroll.ts
View File

@@ -9,8 +9,24 @@ import {Animation} from '../../animations/animation';
import * as util from 'ionic/util';
/**
* Scroll is a non-flexboxed scroll area that can scroll horizontally or
* vertically.
* @name Scroll
* @description
* Scroll is a non-flexboxed scroll area that can scroll horizontally or vertically. `ion-Scroll` Can be used in places were you may not need a full page scroller, but a highly customized one, such as image scubber or comment scroller.
* @usage
* ```html
* <ion-scroll scroll-x="true">
* </ion-scroll>
*
* <ion-scroll scroll-y="true">
* </ion-scroll>
*
* <ion-scroll scroll-x="true" scroll-y="true">
* </ion-scroll>
* ```
*@property {boolean} [scroll-x] - whether to enable scrolling along the X axis
*@property {boolean} [scroll-y] - whether to enable scrolling along the Y axis
*@property {boolean} [zoom] - whether to enable zooming
*@property {number} [max-zoom] - set the max zoom amount for ion-scroll
*/
@Component({
selector: 'ion-scroll',

56
ionic/components/segment/modes/md.scss
View File

@@ -13,28 +13,24 @@ $segment-button-md-border-color-activated: map-get($colors-md, primary) !def
$segment-button-md-border-bottom: 2px solid rgba(#000000, 0.10) !default;
ion-segment {
.segment-button {
border-width: 0;
transition: 100ms all linear;
font-size: $segment-button-md-font-size;
opacity: 0.7;
button,
[button] {
border-width: 0;
transition: 100ms all linear;
font-size: $segment-button-md-font-size;
opacity: 0.7;
min-height: $segment-button-md-min-height;
line-height: $segment-button-md-line-height;
min-height: $segment-button-md-min-height;
line-height: $segment-button-md-line-height;
&.activated, &.segment-activated {
color: $segment-button-md-text-color-activated;
background-color: transparent;
border-color: $segment-button-md-border-color-activated;
}
border-radius: 0;
border-bottom: $segment-button-md-border-bottom;
&.activated,
&.segment-activated {
color: $segment-button-md-text-color-activated;
background-color: transparent;
border-color: $segment-button-md-border-color-activated;
}
border-radius: 0;
border-bottom: $segment-button-md-border-bottom;
}
.toolbar {
@@ -42,8 +38,8 @@ ion-segment {
ion-segment {
margin: 0 auto;
ion-segment-button[button][outline].activated,
ion-segment-button[button][outline].segment-activated {
.segment-button.activated,
.segment-button.segment-activated {
background-color: transparent;
opacity: 1;
}
@@ -57,15 +53,13 @@ ion-segment {
@mixin segment-button($button-color) {
background-color: transparent;
&[outline] {
color: $button-color;
color: $button-color;
&.activated, &.segment-activated {
background-color: transparent;
color: $button-color;
border-color: $button-color;
opacity: 1;
}
&.activated, &.segment-activated {
background-color: transparent;
color: $button-color;
border-color: $button-color;
opacity: 1;
}
}
@@ -78,7 +72,7 @@ ion-segment {
.toolbar[#{$color-name}] {
ion-segment {
ion-segment-button[button] {
.segment-button {
@include segment-button($inverse-color-value);
}
}
@@ -88,7 +82,7 @@ ion-segment {
// this will take priority over the default toolbar colors
@each $color-name, $color-value in $colors-md {
ion-segment[#{$color-name}] {
ion-segment-button[button] {
.segment-button {
@include segment-button($color-value);
}
}
@@ -97,7 +91,7 @@ ion-segment {
}
ion-segment[#{$color-name}] {
ion-segment-button[button] {
.segment-button {
@include segment-button($color-value);
}

46
ionic/components/segment/segment.scss
View File

@@ -7,33 +7,31 @@ $segment-button-padding: 0 16px !default;
ion-segment {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 100%;
button,
[button] {
margin-left: 0;
margin-right: 0;
flex: 1;
display: block;
overflow: hidden;
padding: $segment-button-padding;
width: 0;
border-width: 1px 0px 1px 1px;
border-radius: 0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
background: none;
}
}
.segment-button {
position: relative;
overflow: hidden;
display: block;
margin-left: 0;
margin-right: 0;
padding: $segment-button-padding;
flex: 1;
width: 0;
border-width: 1px 0px 1px 1px;
border-radius: 0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
background: none;
}

51
ionic/components/segment/segment.ts
View File

@@ -5,10 +5,12 @@ import {Config} from '../../config/config';
/**
* @name Segment
* @description
* A Segment is a group of buttons, sometimes known as Segmented Controls, that allow the user to interact with a compact group of a number of controls.
*
* Segments provide functionality similar to tabs, selecting one will unselect all others. You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app.
* You could use Angular 2's `ng-model` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular 2 Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html)
*
*
* @usage
* ```html
@@ -20,8 +22,11 @@ import {Config} from '../../config/config';
* Enemies
* </ion-segment-button>
* </ion-segment>
*```
*
* Or with `FormBuilder`
*
*```html
* <form [ng-form-model]="myForm">
* <ion-segment ng-control="mapStyle" danger>
* <ion-segment-button value="standard">
@@ -38,6 +43,7 @@ import {Config} from '../../config/config';
* ```
*
* @see {@link /docs/v2/components#segment Segment Component Docs}
* @see [Angular 2 Forms](http://learnangular2.com/forms/)
*/
@Directive({
selector: 'ion-segment'
@@ -127,6 +133,43 @@ export class Segment extends Ion {
}
/**
* @name SegmentButton
* @description
* The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
* @property {string} [value] - the value of the segment-button.
* @usage
* ```html
* <ion-segment [(ng-model)]="relationship" danger>
* <ion-segment-button value="friends">
* Friends
* </ion-segment-button>
* <ion-segment-button value="enemies">
* Enemies
* </ion-segment-button>
* </ion-segment>
*```
*
* Or with `FormBuilder`
*
*```html
* <form [ng-form-model]="myForm">
* <ion-segment ng-control="mapStyle" danger>
* <ion-segment-button value="standard">
* Standard
* </ion-segment-button>
* <ion-segment-button value="hybrid">
* Hybrid
* </ion-segment-button>
* <ion-segment-button value="sat">
* Satellite
* </ion-segment-button>
* </ion-segment>
* </form>
* ```
* @see {@link /docs/v2/components#segment Segment Component Docs}
* @see {@link /docs/v2/api/components/segment/Segment/ Segment API Docs}
*/
@Directive({
selector: 'ion-segment-button',
inputs: [
@@ -134,7 +177,7 @@ export class Segment extends Ion {
],
host: {
'(click)': 'click($event)',
'[class.segment-activated]': 'isActive',
'[class.segment-activated]': 'isActive'
}
})
export class SegmentButton {
@@ -146,8 +189,8 @@ export class SegmentButton {
) {
this.segment = segment;
renderer.setElementAttribute(elementRef, 'button', '');
renderer.setElementAttribute(elementRef, 'outline', '');
renderer.setElementClass(elementRef, 'segment-button', true);
renderer.setElementAttribute(elementRef, 'tappable', '');
}
/**

127
ionic/components/toolbar/modes/ios.scss
View File

@@ -22,6 +22,9 @@ $toolbar-ios-button-font-size: 1.7rem !default;
$toolbar-ios-title-font-size: 1.7rem !default;
$navbar-ios-height: $toolbar-ios-height !default;
$bar-button-ios-color: $toolbar-ios-active-color !default;
$bar-button-ios-border-radius: 4px !default;
.toolbar {
padding: $toolbar-ios-padding;
@@ -90,7 +93,7 @@ ion-title {
}
// iOS Toolbar Buttons
// iOS Toolbar Button Placement
// --------------------------------------------------
ion-buttons {
@@ -113,6 +116,10 @@ ion-buttons[right] {
order: map-get($toolbar-order-ios, buttons-right);
}
// iOS Toolbar Button Default
// --------------------------------------------------
.bar-button {
margin-top: 0;
margin-bottom: 0;
@@ -120,10 +127,101 @@ ion-buttons[right] {
min-height: 32px;
border: 0;
font-size: $toolbar-ios-button-font-size;
color: $toolbar-ios-active-color;
background-color: transparent;
border-radius: $bar-button-ios-border-radius;
}
@mixin ios-bar-button-default($color-name, $color-value) {
.bar-button-#{$color-name} {
$fg-color: color-shade($color-value);
color: $fg-color;
background-color: transparent;
&:hover:not(.disable-hover) {
color: color-shade($fg-color);
}
&.activated {
opacity: 0.4;
}
}
}
// iOS Toolbar Button Outline
// --------------------------------------------------
.bar-button-outline {
border-width: 1px;
border-style: solid;
border-color: $bar-button-ios-color;
color: $bar-button-ios-color;
background-color: transparent;
&:hover:not(.disable-hover) {
opacity: 0.4;
}
&.activated {
color: inverse($bar-button-ios-color);
background-color: $bar-button-ios-color;
}
}
@mixin ios-bar-button-outline($color-name, $color-value) {
.bar-button-outline-#{$color-name} {
$fg-color: color-shade($color-value);
border-color: $fg-color;
color: $fg-color;
background-color: transparent;
&.activated {
color: inverse($fg-color);
background-color: $fg-color;
}
}
}
// iOS Toolbar Button Solid
// --------------------------------------------------
.bar-button-solid {
color: inverse($bar-button-ios-color);
background-color: $bar-button-ios-color;
&:hover:not(.disable-hover) {
opacity: 0.4;
color: inverse($bar-button-ios-color);
}
&.activated {
opacity: 0.4;
color: inverse($bar-button-ios-color);
background-color: color-shade($bar-button-ios-color);
}
}
@mixin ios-bar-button-solid($color-name, $color-value) {
.bar-button-solid-#{$color-name} {
color: inverse($color-value);
background-color: $color-value;
&.activated {
background-color: color-shade($color-value);
}
}
}
// iOS Toolbar Button Icon
// --------------------------------------------------
.bar-button-icon-left icon {
margin-left: -0.1em;
padding-right: 0.3em;
@@ -153,7 +251,7 @@ ion-buttons[right] {
}
// iOS Toolbar Back Button
// iOS Toolbar Back Button
// --------------------------------------------------
.back-button {
@@ -176,14 +274,16 @@ ion-buttons[right] {
// iOS Toolbar Menu Toggle
// --------------------------------------------------
[menu-toggle] {
order: map-get($toolbar-order-ios, menu-toggle-start);
cursor: pointer;
}
.toolbar {
[menu-toggle] {
order: map-get($toolbar-order-ios, menu-toggle-start);
cursor: pointer;
}
[menu-toggle][end],
[menu-toggle][right] {
order: map-get($toolbar-order-ios, menu-toggle-end);
[menu-toggle][end],
[menu-toggle][right] {
order: map-get($toolbar-order-ios, menu-toggle-end);
}
}
ion-segment-button[button] {
@@ -196,6 +296,11 @@ ion-segment-button[button] {
// iOS Toolbar Color Generation
// --------------------------------------------------
@include ios-bar-button-default(default, $bar-button-ios-color);
@each $color-name, $color-value in $colors-ios {
@include ios-toolbar-theme($color-name, $color-value);
@include ios-bar-button-default($color-name, $color-value);
@include ios-bar-button-outline($color-name, $color-value);
@include ios-bar-button-solid($color-name, $color-value);
}

145
ionic/components/toolbar/modes/md.scss
View File

@@ -22,6 +22,9 @@ $toolbar-md-title-font-size: 2rem !default;
$toolbar-md-button-font-size: 1.4rem !default;
$navbar-md-height: $toolbar-md-height !default;
$bar-button-md-color: $toolbar-md-active-color !default;
$bar-button-md-border-radius: 2px !default;
.toolbar {
padding: $toolbar-md-padding;
@@ -74,11 +77,10 @@ ion-title {
}
// Material Design Toolbar Buttons
// Material Design Toolbar Button Placement
// --------------------------------------------------
ion-buttons {
flex: 1;
order: map-get($toolbar-order-md, buttons-start);
transform: translateZ(0px);
}
@@ -102,6 +104,140 @@ ion-buttons[right] {
}
// Material Design Toolbar Button Default
// --------------------------------------------------
.bar-button {
margin-top: 0;
margin-bottom: 0;
padding: 0 5px;
min-height: 32px;
border: 0;
font-size: $toolbar-md-button-font-size;
border-radius: $bar-button-md-border-radius;
}
@mixin md-bar-button-default($color-name, $color-value) {
.bar-button-#{$color-name} {
$fg-color: color-shade($color-value);
color: $fg-color;
background-color: transparent;
&:hover:not(.disable-hover) {
color: color-shade($fg-color);
}
&.activated {
opacity: 0.4;
}
}
}
// Material Design Toolbar Button Outline
// --------------------------------------------------
.bar-button-outline {
border-width: 1px;
border-style: solid;
border-color: $bar-button-md-color;
color: $bar-button-md-color;
background-color: transparent;
&:hover:not(.disable-hover) {
opacity: 0.4;
}
&.activated {
color: inverse($bar-button-md-color);
background-color: $bar-button-md-color;
}
}
@mixin md-bar-button-outline($color-name, $color-value) {
.bar-button-outline-#{$color-name} {
$fg-color: color-shade($color-value);
border-color: $fg-color;
color: $fg-color;
background-color: transparent;
&.activated {
color: inverse($fg-color);
background-color: $fg-color;
}
}
}
// Material Design Toolbar Button Solid
// --------------------------------------------------
.bar-button-solid {
color: inverse($bar-button-md-color);
background-color: $bar-button-md-color;
&:hover:not(.disable-hover) {
opacity: 0.4;
color: inverse($bar-button-md-color);
}
&.activated {
opacity: 0.4;
color: inverse($bar-button-md-color);
background-color: color-shade($bar-button-md-color);
}
}
@mixin md-bar-button-solid($color-name, $color-value) {
.bar-button-solid-#{$color-name} {
color: inverse($color-value);
background-color: $color-value;
&.activated {
background-color: color-shade($color-value);
}
}
}
// Material Design Toolbar Button Icon
// --------------------------------------------------
.bar-button-icon-left icon {
margin-left: -0.1em;
padding-right: 0.3em;
font-size: 1.4em;
line-height: 0.67;
pointer-events: none;
}
.bar-button-icon-right icon {
margin-right: -0.2em;
padding-left: 0.4em;
font-size: 1.4em;
line-height: 0.67;
pointer-events: none;
}
.bar-button-icon-only {
padding: 0;
min-width: 0.9em;
icon {
padding: 0 0.1em;
font-size: 1.8em;
line-height: 0.67;
pointer-events: none;
}
}
// Material Design Toolbar Back Button
// --------------------------------------------------
@@ -144,6 +280,11 @@ ion-buttons[right] {
// Material Design Toolbar Color Generation
// --------------------------------------------------
@include md-bar-button-default(default, $bar-button-md-color);
@each $color-name, $color-value in $colors-md {
@include md-toolbar-theme($color-name, $color-value);
@include md-bar-button-default($color-name, $color-value);
@include md-bar-button-outline($color-name, $color-value);
@include md-bar-button-solid($color-name, $color-value);
}

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

@@ -14,7 +14,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button>
<button secondary>
<icon more></icon>
</button>
</ion-buttons>
@@ -32,7 +32,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button class="activated">
<button secondary class="activated">
<icon more></icon>
</button>
</ion-buttons>
@@ -40,46 +40,6 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button solid>
<icon contact></icon>
</button>
<button solid>
<icon contact></icon>
Solid
</button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button solid secondary>
Help
<icon help-circle></icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button solid class="activated">
<icon contact></icon>
</button>
<button solid class="activated">
<icon contact></icon>
Solid
</button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons end>
<button solid secondary class="activated">
Help
<icon help-circle></icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button outline>
@@ -120,31 +80,41 @@
<ion-toolbar>
<ion-buttons start>
<button>
Btn
<button solid>
<icon contact></icon>
</button>
<button solid>
<icon contact></icon>
Solid
</button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button secondary>
Btn
<button solid secondary>
Help
<icon help-circle></icon>
</button>
</ion-buttons>
<ion-title>ColorAttr</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button class="activated">
Btn
<button solid class="activated">
<icon contact></icon>
</button>
<button solid class="activated">
<icon contact></icon>
Solid
</button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons end>
<button secondary class="activated">
Btn
<button solid secondary class="activated">
Help
<icon help-circle></icon>
</button>
</ion-buttons>
<ion-title>ColorAttr.activated</ion-title>
</ion-toolbar>

3
scripts/docs/templates/common.template.html vendored
View File

@@ -10,7 +10,8 @@ header_sub_title: "<$ doc.docType | capital $> in module <$ doc.module $>"
doc: "<$ doc.name $>"
docType: "<$ doc.docType $>"
<@ if doc.demo @>show_preview_device: true
preview_device_url: "<$ doc.demo $>"<@ endif @>
preview_device_url: "<$ doc.demo $>"
angular_controller: APIDemoCtrl <@ endif @>
---