mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
Merge branch 'css-refactor'
This commit is contained in:
Brandy Carney
44
CHANGELOG.md
Normal file
44
CHANGELOG.md
Normal file
@ -0,0 +1,44 @@
|
||||
<a name="2.0.0-alpha.41"></a>
|
||||
# 2.0.0-alpha.41 (2015-12-8)
|
||||
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
##### CSS Refactor
|
||||
|
||||
* Attributes are now used by Ionic to add the correct CSS classes to elements
|
||||
* Drastically reduced the depth of CSS selectors
|
||||
* Further modularized Sass files to allow individual imports
|
||||
* Ionic CSS comes in 3 flavors
|
||||
* `ionic.css`: Core CSS, iOS CSS, and Material Design CSS
|
||||
* `ionic.ios.css`: Core CSS and iOS CSS
|
||||
* `ionic.md.css`: Core CSS and Material Design CSS
|
||||
* App's `index.html` file can be setup to dynamically load only the stylesheet it needs
|
||||
* Different Sass color maps for iOS and Material Design
|
||||
* Allows colors to be different per platform
|
||||
* ie: Gray navbars in iOS, blue navbars in MD. Identical HTML/JS
|
||||
* config: `tabbarStyle`, `navbarStyle` has been removed, should now use different Sass color maps instead of setting it in the config
|
||||
* text-input: class `has-value` has become `input-has-value`
|
||||
* text-input: class `has-focus` has become `input-focused`
|
||||
* searchbar: class `left-align` has become `searchbar-left-aligned`
|
||||
* searchbar: class `focused` has become `searchbar-focused`
|
||||
|
||||
|
||||
|
||||
##### `<ion-nav-items>` renamed to `<ion-buttons>`
|
||||
|
||||
* `primary` attribute `<ion-nav-items primary>` now `<ion-buttons start>`
|
||||
* `secondary` attribute `<ion-nav-items secondary>` now `<ion-buttons end>`
|
||||
|
||||
##### `<a menu-toggle>` should now be `<button menu-toggle>`
|
||||
|
||||
|
||||
|
||||
##### Bug Fixes
|
||||
|
||||
* **item-sliding**: fixed item-sliding, onDragEnd on mouseout of sliding element [f9199fb](https://github.com/driftyco/ionic2/commit/f9199fb3be6ce6b0a693e2e3b944b47ed8575531), closes [#702](https://github.com/driftyco/ionic2/issues/702)
|
||||
|
||||
|
||||
##### Features
|
||||
|
||||
* Upgraded to Angular alpha.50
|
||||
@ -2,16 +2,16 @@
|
||||
|
||||
<ion-title>Buttons</ion-title>
|
||||
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button>
|
||||
<icon contact></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
<ion-nav-items secondary>
|
||||
</ion-buttons>
|
||||
<ion-buttons end>
|
||||
<button>
|
||||
<icon search></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<ion-navbar *navbar hide-back-button class="android-attr">
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Events
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<ion-navbar *navbar hide-back-button class="android-attr">
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Friends
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<ion-navbar *navbar hide-back-button class="android-attr">
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Menus
|
||||
@ -13,4 +13,4 @@
|
||||
|
||||
<ion-content padding>
|
||||
<button block menu-toggle="leftMenu">Toggle Menu</button>
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<ion-navbar *navbar hide-back-button class="android-attr">
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Places
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
<ion-title>
|
||||
Description
|
||||
</ion-title>
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button (click)="close()" *ng-if=" currentPlatform === 'ios' ">
|
||||
Cancel
|
||||
</button>
|
||||
<button (click)="close()" *ng-if=" currentPlatform === 'android' ">
|
||||
<icon close></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar class="show-navbar">
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Basic List
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar class="show-navbar">
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Inset List
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar class="show-navbar">
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
List Headers
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar class="show-navbar">
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
No-lines List
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar class="show-navbar">
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Sliding Items
|
||||
|
||||
@ -5,13 +5,13 @@ import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: '<ion-navbar *navbar primary>' +
|
||||
'<ion-title>Heading</ion-title>' +
|
||||
'<a menu-toggle="menu">' +
|
||||
'<button menu-toggle="menu">' +
|
||||
'<icon menu></icon>' +
|
||||
'</a>' +
|
||||
'<ion-nav-items secondary>' +
|
||||
'</button>' +
|
||||
'<ion-buttons end>' +
|
||||
'<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
|
||||
'<button (click)="showMoreMenu()"><i class="icon ion-android-more-vertical"></i></button>' +
|
||||
'</ion-nav-items>' +
|
||||
'</ion-buttons>' +
|
||||
'</ion-navbar>' +
|
||||
'<ion-content>' +
|
||||
`
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Menu
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Menu
|
||||
|
||||
@ -4,9 +4,9 @@ import {IonicView, Battery} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Battery</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -5,9 +5,9 @@ import {Camera} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Camera</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -5,9 +5,9 @@ import {Contacts} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Contacts</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -4,9 +4,9 @@ import {IonicView, DeviceMotion} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Device Motion</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -4,9 +4,9 @@ import {IonicView, DeviceOrientation} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Device Orientation</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -4,9 +4,9 @@ import {IonicView, Device} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Device</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -4,9 +4,9 @@ import {IonicView, Dialogs} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Dialogs</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -5,9 +5,9 @@ import {Geolocation} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Geolocation</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -5,9 +5,9 @@ import {StatusBar} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>StatusBar</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
@ -5,9 +5,9 @@ import {Vibration} from 'ionic/ionic';
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<a menu-toggle>
|
||||
<button menu-toggle>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>Vibration</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
|
||||
27
gulpfile.js
27
gulpfile.js
@ -340,23 +340,23 @@ gulp.task('e2e', function() {
|
||||
|
||||
function createPlatformTests(file) {
|
||||
return through2.obj(function(file, enc, next) {
|
||||
var self = this
|
||||
var relativePath = path.dirname(file.path.replace(/^.*?ionic(\/|\\)components(\/|\\)/, ''))
|
||||
var contents = file.contents.toString()
|
||||
var self = this;
|
||||
var relativePath = path.dirname(file.path.replace(/^.*?ionic(\/|\\)components(\/|\\)/, ''));
|
||||
var contents = file.contents.toString();
|
||||
platforms.forEach(function(platform) {
|
||||
var platformContents = testTemplate({
|
||||
contents: contents,
|
||||
buildConfig: buildConfig,
|
||||
relativePath: relativePath,
|
||||
platform: platform
|
||||
})
|
||||
});
|
||||
self.push(new VinylFile({
|
||||
base: file.base,
|
||||
contents: new Buffer(platformContents),
|
||||
path: file.path.replace(/e2e.js$/, platform + '.e2e.js')
|
||||
}))
|
||||
}));
|
||||
})
|
||||
next()
|
||||
next();
|
||||
})
|
||||
}
|
||||
});
|
||||
@ -364,6 +364,21 @@ gulp.task('e2e', function() {
|
||||
gulp.task('sass', function() {
|
||||
var sass = require('gulp-sass');
|
||||
var autoprefixer = require('gulp-autoprefixer');
|
||||
|
||||
gulp.src('ionic/ionic.ios.scss')
|
||||
.pipe(sass()
|
||||
.on('error', sass.logError)
|
||||
)
|
||||
.pipe(autoprefixer(buildConfig.autoprefixer))
|
||||
.pipe(gulp.dest('dist/css/'));
|
||||
|
||||
gulp.src('ionic/ionic.md.scss')
|
||||
.pipe(sass()
|
||||
.on('error', sass.logError)
|
||||
)
|
||||
.pipe(autoprefixer(buildConfig.autoprefixer))
|
||||
.pipe(gulp.dest('dist/css/'));
|
||||
|
||||
return gulp.src('ionic/ionic.scss')
|
||||
.pipe(sass()
|
||||
.on('error', sass.logError)
|
||||
|
||||
26
ionic/components.core.scss
Normal file
26
ionic/components.core.scss
Normal file
@ -0,0 +1,26 @@
|
||||
|
||||
// Core App
|
||||
@import
|
||||
"components/app/normalize",
|
||||
"components/app/structure",
|
||||
"components/app/typography",
|
||||
"util/util";
|
||||
|
||||
|
||||
// Core Components
|
||||
@import
|
||||
"components/grid/grid",
|
||||
"components/icon/icon",
|
||||
"components/menu/menu",
|
||||
"components/modal/modal",
|
||||
"components/scroll/scroll",
|
||||
"components/slides/slides";
|
||||
|
||||
|
||||
// Ionicons
|
||||
// soon to be replaced with SVGs
|
||||
$font-path: "../fonts" !default;
|
||||
$ionicons: true !default;
|
||||
@if ($ionicons) {
|
||||
@import "fonts/ionicons";
|
||||
}
|
||||
26
ionic/components.ios.scss
Normal file
26
ionic/components.ios.scss
Normal file
@ -0,0 +1,26 @@
|
||||
|
||||
// iOS Theme
|
||||
@import "themes/default.ios";
|
||||
|
||||
|
||||
// iOS Components
|
||||
@import
|
||||
"components/app/modes/ios",
|
||||
"components/action-sheet/modes/ios",
|
||||
"components/badge/modes/ios",
|
||||
"components/button/modes/ios",
|
||||
"components/card/modes/ios",
|
||||
"components/checkbox/modes/ios",
|
||||
"components/content/modes/ios",
|
||||
"components/item/modes/ios",
|
||||
"components/list/modes/ios",
|
||||
"components/menu/modes/ios",
|
||||
"components/modal/modes/ios",
|
||||
"components/popup/modes/ios",
|
||||
"components/radio/modes/ios",
|
||||
"components/searchbar/modes/ios",
|
||||
"components/segment/modes/ios",
|
||||
"components/switch/modes/ios",
|
||||
"components/tabs/modes/ios",
|
||||
"components/text-input/modes/ios",
|
||||
"components/toolbar/modes/ios";
|
||||
27
ionic/components.md.scss
Normal file
27
ionic/components.md.scss
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
// Material Design Theme
|
||||
@import "themes/default.md";
|
||||
|
||||
|
||||
// Material Design Components
|
||||
@import
|
||||
"components/app/modes/md",
|
||||
"components/action-sheet/modes/md",
|
||||
"components/badge/modes/md",
|
||||
"components/button/modes/md",
|
||||
"components/card/modes/md",
|
||||
"components/checkbox/modes/md",
|
||||
"components/content/modes/md",
|
||||
"components/item/modes/md",
|
||||
"components/list/modes/md",
|
||||
"components/menu/modes/md",
|
||||
"components/modal/modes/md",
|
||||
"components/popup/modes/md",
|
||||
"components/radio/modes/md",
|
||||
"components/tap-click/ripple",
|
||||
"components/searchbar/modes/md",
|
||||
"components/segment/modes/md",
|
||||
"components/switch/modes/md",
|
||||
"components/tabs/modes/md",
|
||||
"components/text-input/modes/md",
|
||||
"components/toolbar/modes/md";
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// Action Sheet
|
||||
// --------------------------------------------------
|
||||
@ -24,7 +24,7 @@ ion-action-sheet {
|
||||
z-index: $z-index-overlay;
|
||||
}
|
||||
|
||||
action-sheet-wrapper {
|
||||
.action-sheet-wrapper {
|
||||
position: absolute;
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
bottom: 0;
|
||||
@ -41,45 +41,25 @@ action-sheet-wrapper {
|
||||
.action-sheet-container {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
padding: 1px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-color: $action-sheet-options-border-color;
|
||||
background-color: transparent;
|
||||
.action-sheet-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-color: $action-sheet-options-border-color;
|
||||
|
||||
color: $action-sheet-options-text-color;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
button.activated {
|
||||
&.activated {
|
||||
box-shadow: none;
|
||||
border-color: $action-sheet-options-border-color;
|
||||
background: $action-sheet-options-background-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-title {
|
||||
padding: 10px;
|
||||
color: #8f8f8f;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.action-sheet-group {
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
button {
|
||||
border-width: 1px 0px 0px 0px;
|
||||
}
|
||||
|
||||
button:first-child:last-child {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-options {
|
||||
|
||||
@ -17,26 +17,28 @@ import {extend} from '../../util/util';
|
||||
@Component({
|
||||
selector: 'ion-action-sheet',
|
||||
template:
|
||||
'<backdrop (click)="cancel()" tappable disable-activated></backdrop>' +
|
||||
'<action-sheet-wrapper>' +
|
||||
'<div (click)="cancel()" tappable disable-activated class="backdrop"></div>' +
|
||||
'<div class="action-sheet-wrapper">' +
|
||||
'<div class="action-sheet-container">' +
|
||||
'<div class="action-sheet-group action-sheet-options">' +
|
||||
'<div class="action-sheet-title" *ng-if="d.titleText">{{d.titleText}}</div>' +
|
||||
'<button (click)="buttonClicked(i)" *ng-for="#b of d.buttons; #i=index" class="action-sheet-option disable-hover">' +
|
||||
'<icon [name]="b.icon" *ng-if="b.icon"></icon> ' +
|
||||
'<button (click)="buttonClicked(i)" *ng-for="#b of d.buttons; #i=index" class="action-sheet-button action-sheet-option disable-hover">' +
|
||||
'<icon [name]="b.icon" *ng-if="b.icon" class="action-sheet-icon"></icon> ' +
|
||||
'{{b.text}}' +
|
||||
'</button>' +
|
||||
'<button *ng-if="d.destructiveText" (click)="destructive()" class="action-sheet-destructive disable-hover">' +
|
||||
'<icon [name]="d.destructiveIcon" *ng-if="d.destructiveIcon"></icon> ' +
|
||||
'{{d.destructiveText}}</button>' +
|
||||
'<button *ng-if="d.destructiveText" (click)="destructive()" class="action-sheet-button action-sheet-destructive disable-hover">' +
|
||||
'<icon [name]="d.destructiveIcon" *ng-if="d.destructiveIcon" class="action-sheet-icon"></icon> ' +
|
||||
'{{d.destructiveText}}' +
|
||||
'</button>' +
|
||||
'</div>' +
|
||||
'<div class="action-sheet-group action-sheet-cancel" *ng-if="d.cancelText">' +
|
||||
'<button (click)="cancel()" class="disable-hover">' +
|
||||
'<icon [name]="d.cancelIcon" *ng-if="d.cancelIcon"></icon> ' +
|
||||
'{{d.cancelText}}</button>' +
|
||||
'<div class="action-sheet-group" *ng-if="d.cancelText">' +
|
||||
'<button (click)="cancel()" class="action-sheet-button action-sheet-cancel disable-hover">' +
|
||||
'<icon [name]="d.cancelIcon" *ng-if="d.cancelIcon" class="action-sheet-icon"></icon> ' +
|
||||
'{{d.cancelText}}' +
|
||||
'</button>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</action-sheet-wrapper>',
|
||||
'</div>',
|
||||
host: {
|
||||
'role': 'dialog'
|
||||
},
|
||||
@ -174,8 +176,8 @@ class ActionSheetSlideIn extends Animation {
|
||||
super(null, opts);
|
||||
|
||||
let ele = enteringView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
|
||||
let backdrop = new Animation(ele.querySelector('.backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
|
||||
|
||||
backdrop.fromTo('opacity', 0.01, 0.4);
|
||||
wrapper.fromTo('translateY', '100%', '0%');
|
||||
@ -191,8 +193,8 @@ class ActionSheetSlideOut extends Animation {
|
||||
super(null, opts);
|
||||
|
||||
let ele = leavingView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
|
||||
let backdrop = new Animation(ele.querySelector('.backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
|
||||
|
||||
backdrop.fromTo('opacity', 0.4, 0);
|
||||
wrapper.fromTo('translateY', '0%', '100%');
|
||||
@ -208,8 +210,8 @@ class ActionSheetMdSlideIn extends Animation {
|
||||
super(null, opts);
|
||||
|
||||
let ele = enteringView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
|
||||
let backdrop = new Animation(ele.querySelector('.backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
|
||||
|
||||
backdrop.fromTo('opacity', 0.01, 0.26);
|
||||
wrapper.fromTo('translateY', '100%', '0%');
|
||||
@ -225,8 +227,8 @@ class ActionSheetMdSlideOut extends Animation {
|
||||
super(null, opts);
|
||||
|
||||
let ele = leavingView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
|
||||
let backdrop = new Animation(ele.querySelector('.backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
|
||||
|
||||
backdrop.fromTo('opacity', 0.26, 0);
|
||||
wrapper.fromTo('translateY', '0%', '100%');
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.ios";
|
||||
@import "../action-sheet";
|
||||
|
||||
// iOS Action Sheet
|
||||
// --------------------------------------------------
|
||||
@ -7,9 +8,9 @@ $action-sheet-ios-group-margin: 10px !default;
|
||||
$action-sheet-ios-background-color: rgba(243,243,243,.95) !default;
|
||||
|
||||
$action-sheet-ios-height: 5.6rem !default;
|
||||
$action-sheet-ios-padding: 1.8rem !default;
|
||||
$action-sheet-ios-padding: 18px !default;
|
||||
$action-sheet-ios-border-color: #d6d6da !default;
|
||||
$action-sheet-ios-border-radius: 1.3rem !default;
|
||||
$action-sheet-ios-border-radius: 13px !default;
|
||||
|
||||
$action-sheet-ios-title-color: #5f5f5f !default;
|
||||
$action-sheet-ios-title-font-size: 1.2rem !default;
|
||||
@ -19,7 +20,6 @@ $action-sheet-ios-button-font-size: 2rem !default;
|
||||
$action-sheet-ios-background-active-color: #e9e9e9 !default;
|
||||
|
||||
$action-sheet-ios-destructive-button-text-color: #f53d3d !default;
|
||||
$action-sheet-ios-icon-font-size: 1.4em !default;
|
||||
|
||||
|
||||
ion-action-sheet {
|
||||
@ -28,50 +28,15 @@ ion-action-sheet {
|
||||
|
||||
.action-sheet-container {
|
||||
padding: 0 $action-sheet-ios-group-margin;
|
||||
|
||||
button.activated {
|
||||
box-shadow: none;
|
||||
border-color: $action-sheet-options-border-color;
|
||||
color: $action-sheet-options-text-color;
|
||||
background: $action-sheet-options-background-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
ion-action-sheet button {
|
||||
min-height: $action-sheet-ios-height;
|
||||
padding: $action-sheet-ios-padding;
|
||||
|
||||
margin: 0;
|
||||
border: 0;
|
||||
|
||||
background: transparent;
|
||||
|
||||
&.activated {
|
||||
background: $action-sheet-ios-background-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-group {
|
||||
margin-bottom: $action-sheet-ios-group-margin - 2;
|
||||
border-radius: $action-sheet-ios-border-radius;
|
||||
}
|
||||
|
||||
.action-sheet-group:last-child {
|
||||
margin-bottom: $action-sheet-ios-group-margin;
|
||||
}
|
||||
|
||||
.action-sheet-title,
|
||||
.action-sheet-option {
|
||||
min-height: $action-sheet-ios-height;
|
||||
|
||||
background: $action-sheet-ios-background-color;
|
||||
font-weight: 400;
|
||||
|
||||
border-bottom: 1px solid $action-sheet-ios-border-color;
|
||||
}
|
||||
|
||||
.action-sheet-cancel button {
|
||||
font-weight: bold;
|
||||
&:last-child {
|
||||
margin-bottom: $action-sheet-ios-group-margin;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-title {
|
||||
@ -80,36 +45,42 @@ ion-action-sheet button {
|
||||
font-weight: 500;
|
||||
color: $action-sheet-ios-title-color;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-sheet-title,
|
||||
.action-sheet-option {
|
||||
font-size: $action-sheet-ios-button-font-size;
|
||||
border-bottom: 1px solid $action-sheet-ios-border-color;
|
||||
}
|
||||
|
||||
.action-sheet-button {
|
||||
color: $action-sheet-ios-button-text-color;
|
||||
border-radius: 0;
|
||||
min-height: $action-sheet-ios-height;
|
||||
padding: $action-sheet-ios-padding;
|
||||
font-size: $action-sheet-ios-button-font-size;
|
||||
|
||||
background: transparent;
|
||||
|
||||
&.activated {
|
||||
background: $action-sheet-ios-background-active-color;
|
||||
box-shadow: none;
|
||||
border-color: $action-sheet-options-border-color;
|
||||
color: $action-sheet-options-text-color;
|
||||
background: $action-sheet-options-background-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-title:first-child,
|
||||
.action-sheet-button:first-child,
|
||||
.action-sheet-group button:first-child {
|
||||
border-top-left-radius: $action-sheet-ios-border-radius;
|
||||
border-top-right-radius: $action-sheet-ios-border-radius;
|
||||
.action-sheet-destructive {
|
||||
color: $action-sheet-ios-destructive-button-text-color;
|
||||
}
|
||||
|
||||
.action-sheet-title:last-child,
|
||||
.action-sheet-button:last-child,
|
||||
.action-sheet-group button:last-child {
|
||||
border-bottom-left-radius: $action-sheet-ios-border-radius;
|
||||
border-bottom-right-radius: $action-sheet-ios-border-radius;
|
||||
.action-sheet-cancel {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
&.hairlines .action-sheet {
|
||||
&.hairlines {
|
||||
.action-sheet-title,
|
||||
.action-sheet-option {
|
||||
border-bottom-width: 0.55px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-destructive{
|
||||
color: $action-sheet-ios-destructive-button-text-color;
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.md";
|
||||
@import "../action-sheet";
|
||||
|
||||
// Material Design Action Sheet
|
||||
// --------------------------------------------------
|
||||
@ -9,54 +10,32 @@ $action-sheet-md-height: 4.8rem !default;
|
||||
|
||||
$action-sheet-md-title-color: #757575 !default;
|
||||
$action-sheet-md-title-font-size: 1.6rem !default;
|
||||
$action-sheet-md-title-padding: 1.9rem 1.6rem 1.7rem !default;
|
||||
$action-sheet-md-title-padding: 19px 16px 17px !default;
|
||||
|
||||
$action-sheet-md-button-text-color: #222 !default;
|
||||
$action-sheet-md-button-font-size: 1.6rem !default;
|
||||
$action-sheet-md-button-padding: 0 16px !default;
|
||||
$action-sheet-md-background-active-color: #f1f1f1 !default;
|
||||
|
||||
$action-sheet-md-icon-font-size: 2.4rem !default;
|
||||
$action-sheet-md-icon-margin: 0 28px 0 0 !default;
|
||||
|
||||
|
||||
ion-action-sheet {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-sheet-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-sheet-title,
|
||||
.action-sheet-option,
|
||||
.action-sheet-destructive,
|
||||
.action-sheet-cancel button {
|
||||
text-align: left;
|
||||
border-color: transparent;
|
||||
font-size: $action-sheet-md-button-font-size;
|
||||
color: $action-sheet-md-button-text-color;
|
||||
box-shadow: none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
ion-action-sheet icon {
|
||||
display: inline-block;
|
||||
margin: $action-sheet-md-icon-margin;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: $action-sheet-md-icon-font-size;
|
||||
}
|
||||
|
||||
.action-sheet-title {
|
||||
padding: $action-sheet-md-title-padding;
|
||||
font-size: $action-sheet-md-title-font-size;
|
||||
color: $action-sheet-md-title-color;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
ion-action-sheet button {
|
||||
font-weight: normal;
|
||||
.action-sheet-button {
|
||||
padding: $action-sheet-md-button-padding;
|
||||
min-height: $action-sheet-md-height;
|
||||
font-size: $action-sheet-md-button-font-size;
|
||||
font-weight: normal;
|
||||
color: $action-sheet-md-button-text-color;
|
||||
background-color: transparent;
|
||||
text-align: left;
|
||||
|
||||
&.activated {
|
||||
background: $action-sheet-md-background-active-color;
|
||||
@ -65,12 +44,21 @@ ion-action-sheet button {
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-icon {
|
||||
display: inline-block;
|
||||
margin: $action-sheet-md-icon-margin;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: $action-sheet-md-icon-font-size;
|
||||
}
|
||||
|
||||
.action-sheet-group {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background-color: $action-sheet-md-background-color;
|
||||
|
||||
&:last-child button {
|
||||
&:last-child .action-sheet-button {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,5 +4,5 @@ it('should open action sheet', function() {
|
||||
});
|
||||
|
||||
it('should close with backdrop click', function() {
|
||||
element(by.css('backdrop')).click();
|
||||
element(by.css('.backdrop')).click();
|
||||
});
|
||||
|
||||
@ -42,14 +42,14 @@ export class IdRef {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onInit() {
|
||||
ngOnInit() {
|
||||
this.app.register(this.id, this.component);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onDestroy() {
|
||||
ngOnDestroy() {
|
||||
this.app.unregister(this.id);
|
||||
}
|
||||
}
|
||||
@ -75,7 +75,7 @@ export class Attr {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onInit() {
|
||||
ngOnInit() {
|
||||
this.renderer.setElementAttribute(this.elementRef, this.attr, '');
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,35 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.ios";
|
||||
|
||||
// iOS App
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
a {
|
||||
color: $link-ios-color;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-width: 0;
|
||||
height: 1px;
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&.hairlines hr {
|
||||
height: 0.55px;
|
||||
}
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
p,
|
||||
span,
|
||||
a:not([button]),
|
||||
small,
|
||||
b,
|
||||
i,
|
||||
strong,
|
||||
em,
|
||||
sub,
|
||||
sup {
|
||||
&[#{$color-name}] {
|
||||
color: $color-value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,31 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.md";
|
||||
|
||||
// Material Design App
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
a {
|
||||
color: $link-md-color;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-width: 0;
|
||||
height: 1px;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
p,
|
||||
span,
|
||||
a:not([button]),
|
||||
small,
|
||||
b,
|
||||
i,
|
||||
strong,
|
||||
em,
|
||||
sub,
|
||||
sup {
|
||||
&[#{$color-name}] {
|
||||
color: $color-value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
16
ionic/components/app/normalize.scss
vendored
16
ionic/components/app/normalize.scss
vendored
@ -52,11 +52,10 @@ figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
// Address differences between Firefox and other browsers.
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
height: 1px;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// Contain overflow in all browsers.
|
||||
@ -115,6 +114,17 @@ input[type="submit"] {
|
||||
cursor: pointer; // 3
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
line-height: 1;
|
||||
font-family: inherit;
|
||||
font-variant: inherit;
|
||||
font-style: inherit;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Re-set default cursor for disabled elements.
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// Z-Index
|
||||
// --------------------------------------------------
|
||||
@ -76,7 +76,6 @@ body {
|
||||
text-size-adjust: none;
|
||||
|
||||
@include user-select-none();
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
ion-app,
|
||||
@ -127,7 +126,6 @@ ion-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
scroll-content {
|
||||
@ -184,7 +182,6 @@ ion-navbar-section ion-navbar.toolbar {
|
||||
ion-toolbar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
ion-toolbar[position=bottom] {
|
||||
|
||||
@ -1,40 +1,25 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
// --------------------------------------------------
|
||||
// All font sizes use rem units
|
||||
// By default, 1rem equals 10px. For example, 1.4rem === 14px
|
||||
// $font-size-root value, which is on the <html> element
|
||||
// is what can scale all fonts
|
||||
|
||||
|
||||
$font-family-sans-serif: -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
|
||||
$font-family-light-sans-serif: -apple-system, "HelveticaNeue-Light", "Roboto-Light", sans-serif-light !default;
|
||||
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
$font-size-root: 62.5% !default;
|
||||
$font-size-base: 1.4rem !default; // 1.4rem == 14px
|
||||
$font-size-small: 1rem !default;
|
||||
|
||||
$line-height-base: 1.4 !default;
|
||||
$line-height-computed: 3rem !default;
|
||||
$line-height-large: 1.33 !default;
|
||||
$line-height-small: 1.5 !default;
|
||||
|
||||
$headings-font-weight: 500 !default;
|
||||
$headings-line-height: 1.2 !default;
|
||||
$font-size-root: 62.5% !default;
|
||||
$headings-font-weight: 500 !default;
|
||||
$headings-line-height: 1.2 !default;
|
||||
|
||||
|
||||
html {
|
||||
font-size: $font-size-root;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-base;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.enable-hover a:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
@ -101,22 +86,3 @@ sup {
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
p,
|
||||
span,
|
||||
a:not([button]),
|
||||
small,
|
||||
b,
|
||||
i,
|
||||
u,
|
||||
strong,
|
||||
em,
|
||||
sub,
|
||||
sup {
|
||||
&[#{$color-name}] {
|
||||
color: $color-value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
$badge-font-size: 1.3rem !default;
|
||||
$badge-font-weight: bold !default;
|
||||
$badge-border-radius: 10px !default;
|
||||
|
||||
|
||||
item-badge {
|
||||
ion-badge {
|
||||
display: inline-block;
|
||||
|
||||
padding: 3px 8px;
|
||||
min-width: 10px;
|
||||
border-radius: $badge-border-radius;
|
||||
|
||||
vertical-align: baseline;
|
||||
text-align: center;
|
||||
@ -29,3 +27,15 @@ item-badge {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Generate Default Badge Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
|
||||
ion-badge[#{$color-name}] {
|
||||
background-color: $color-value;
|
||||
color: inverse($color-value);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
11
ionic/components/badge/modes/ios.scss
Normal file
11
ionic/components/badge/modes/ios.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@import "../badge";
|
||||
|
||||
// iOS Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
$badge-ios-border-radius: 10px !default;
|
||||
|
||||
|
||||
ion-badge {
|
||||
border-radius: $badge-ios-border-radius;
|
||||
}
|
||||
11
ionic/components/badge/modes/md.scss
Normal file
11
ionic/components/badge/modes/md.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@import "../badge";
|
||||
|
||||
// Material Design Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
$badge-md-border-radius: 4px !default;
|
||||
|
||||
|
||||
ion-badge {
|
||||
border-radius: $badge-md-border-radius;
|
||||
}
|
||||
10
ionic/components/badge/test/basic/index.ts
Normal file
10
ionic/components/badge/test/basic/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import {App, IonicApp} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {
|
||||
constructor(app: IonicApp) {
|
||||
}
|
||||
}
|
||||
64
ionic/components/badge/test/basic/main.html
Normal file
64
ionic/components/badge/test/basic/main.html
Normal file
@ -0,0 +1,64 @@
|
||||
<ion-toolbar>
|
||||
<ion-title>Badges</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
Badges Right
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
Default Badge
|
||||
<ion-badge item-right>99</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Primary Badge
|
||||
<ion-badge item-right primary>99</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Secondary Badge
|
||||
<ion-badge item-right secondary>99</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Danger Badge
|
||||
<ion-badge item-right danger>99</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Light Badge
|
||||
<ion-badge item-right light>99</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Dark Badge
|
||||
<ion-badge item-right dark>99</ion-badge>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
Badges Left
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
Default Badge
|
||||
<ion-badge item-left>99</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Primary Badge
|
||||
<ion-badge item-left primary>99</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Secondary Badge
|
||||
<ion-badge item-left secondary>99</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Danger Badge
|
||||
<ion-badge item-left danger>99</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Light Badge
|
||||
<ion-badge item-left light>99</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Dark Badge
|
||||
<ion-badge item-left dark>99</ion-badge>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
@ -1,43 +0,0 @@
|
||||
@import "../../ionic.globals";
|
||||
|
||||
// Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
button[clear],
|
||||
[button][clear] {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: color-shade($button-color);
|
||||
|
||||
&.activated {
|
||||
opacity: 0.4;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
opacity: 0.6;
|
||||
color: color-shade($button-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Generate Clear Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in auxiliary-colors() {
|
||||
|
||||
$fg-color: color-shade($color-value);
|
||||
|
||||
button[clear][#{$color-name}],
|
||||
[button][clear][#{$color-name}] {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: $fg-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
color: color-shade($fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// FABulous Buttons (Floating Action Button from material)
|
||||
// --------------------------------------------------
|
||||
@ -6,53 +6,48 @@
|
||||
$button-fab-size: 56px !default;
|
||||
|
||||
|
||||
button,
|
||||
[button] {
|
||||
.button-fab {
|
||||
position: absolute;
|
||||
width: $button-fab-size;
|
||||
height: $button-fab-size;
|
||||
line-height: $button-fab-size;
|
||||
min-width: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
&[fab] {
|
||||
position: absolute;
|
||||
width: $button-fab-size;
|
||||
height: $button-fab-size;
|
||||
line-height: $button-fab-size;
|
||||
min-width: 0;
|
||||
vertical-align: middle;
|
||||
border-radius: 50%;
|
||||
background-clip: padding-box;
|
||||
|
||||
border-radius: 50%;
|
||||
background-clip: padding-box;
|
||||
overflow: hidden;
|
||||
|
||||
overflow: hidden;
|
||||
transition: .2s linear;
|
||||
transition-property: background-color;
|
||||
|
||||
transition: .2s linear;
|
||||
transition-property: background-color;
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
&[fab-center] {
|
||||
left: 50%;
|
||||
margin-left: -$button-fab-size / 2;
|
||||
}
|
||||
|
||||
&[fab-top] {
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
&[fab-right] {
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
&[fab-bottom] {
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
&[fab-left] {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
icon {
|
||||
flex: 1;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
font-size: 14px;
|
||||
|
||||
icon {
|
||||
flex: 1;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
[fab-center] {
|
||||
left: 50%;
|
||||
margin-left: -$button-fab-size / 2;
|
||||
}
|
||||
|
||||
[fab-top] {
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
[fab-right] {
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
[fab-bottom] {
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
[fab-left] {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
@ -1,44 +1,31 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// Button Icons
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
button,
|
||||
[button] {
|
||||
.button-icon-left icon {
|
||||
padding-right: 0.3em;
|
||||
font-size: 1.4em;
|
||||
line-height: 0.67;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.button-icon-right icon {
|
||||
padding-left: 0.4em;
|
||||
font-size: 1.4em;
|
||||
line-height: 0.67;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.button-icon-only {
|
||||
padding: 0;
|
||||
min-width: 0.9em;
|
||||
|
||||
icon {
|
||||
font-size: 1.4em;
|
||||
background: none;
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
padding: 0 0.5em;
|
||||
font-size: 1.8em;
|
||||
line-height: 0.67;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.icon-left icon {
|
||||
margin-left: -0.3em;
|
||||
padding-right: 0.3em;
|
||||
}
|
||||
|
||||
&.icon-right icon {
|
||||
margin-right: -0.2em;
|
||||
padding-left: 0.4em;
|
||||
}
|
||||
|
||||
&.icon-only {
|
||||
padding: 0;
|
||||
min-width: 0.9em;
|
||||
|
||||
icon {
|
||||
padding: 0 0.5em;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
|
||||
&[small] icon {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,56 +0,0 @@
|
||||
@import "../../ionic.globals";
|
||||
|
||||
// Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
button,
|
||||
[button] {
|
||||
|
||||
&[outline] {
|
||||
border: 1px solid $button-color;
|
||||
background: transparent;
|
||||
color: $button-color;
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
color: $background-color;
|
||||
background-color: $button-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Outline Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin button-outline($fg-color) {
|
||||
|
||||
&[outline] {
|
||||
border-color: $fg-color;
|
||||
background: transparent;
|
||||
color: $fg-color;
|
||||
|
||||
&.activated {
|
||||
color: $background-color;
|
||||
background-color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Outline Clear Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in auxiliary-colors() {
|
||||
|
||||
button[#{$color-name}],
|
||||
[button][#{$color-name}] {
|
||||
|
||||
$fg-color: color-shade($color-value, 5%);
|
||||
@include button-outline($fg-color);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
@import "../../ionic.globals";
|
||||
|
||||
// Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
$button-large-font-size: 2rem !default;
|
||||
$button-large-height: 2.8em !default;
|
||||
$button-large-padding: 1.0em !default;
|
||||
|
||||
$button-small-font-size: 1.3rem !default;
|
||||
$button-small-height: 2.1em !default;
|
||||
$button-small-padding: 0.9em !default;
|
||||
|
||||
|
||||
button,
|
||||
[button] {
|
||||
|
||||
&[large] {
|
||||
padding: 0 $button-large-padding;
|
||||
min-height: $button-large-height;
|
||||
font-size: $button-large-font-size;
|
||||
}
|
||||
|
||||
&[small] {
|
||||
padding: 0 $button-small-padding;
|
||||
min-height: $button-small-height;
|
||||
font-size: $button-small-font-size;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,51 +1,21 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// Button Variables
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
$button-font-size: 1.6rem !default;
|
||||
$button-margin: 0.4rem 0.2rem !default;
|
||||
$button-padding: 0 1em !default;
|
||||
$button-height: 2.8em !default;
|
||||
$button-border-radius: 4px !default;
|
||||
|
||||
$button-round-padding: 0 2.6rem !default;
|
||||
$button-round-border-radius: 64px !default;
|
||||
|
||||
$button-color: color(primary) !default;
|
||||
$button-color-activated: color-shade($button-color) !default;
|
||||
$button-text-color: inverse($button-color) !default;
|
||||
$button-hover-opacity: 0.8 !default;
|
||||
|
||||
|
||||
// Default Button
|
||||
// --------------------------------------------------
|
||||
|
||||
button,
|
||||
[button] {
|
||||
.button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
transition: background-color, opacity 100ms linear;
|
||||
|
||||
margin: $button-margin;
|
||||
padding: $button-padding;
|
||||
min-height: $button-height;
|
||||
line-height: 1;
|
||||
|
||||
border: 1px solid #ccc;
|
||||
border: transparent;
|
||||
border-radius: $button-border-radius;
|
||||
|
||||
font-size: $button-font-size;
|
||||
font-family: inherit;
|
||||
font-variant: inherit;
|
||||
font-style: inherit;
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@ -59,100 +29,53 @@ button,
|
||||
cursor: pointer;
|
||||
@include user-select-none();
|
||||
@include appearance(none);
|
||||
|
||||
background: $button-color;
|
||||
color: $button-text-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
opacity: $button-hover-opacity;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
background-color: $button-color-activated;
|
||||
}
|
||||
|
||||
|
||||
// Button Types
|
||||
// --------------------------------------------------
|
||||
|
||||
&[block] {
|
||||
display: flex;
|
||||
clear: both;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
&[full] {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
|
||||
&[outline] {
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[round] {
|
||||
border-radius: $button-round-border-radius;
|
||||
padding: $button-round-padding;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.4;
|
||||
cursor: default !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a[button] {
|
||||
a.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[padding] > button[block]:first-child,
|
||||
[padding] > [button][block]:first-child {
|
||||
margin-top: 0;
|
||||
.button-disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Default Button Color Mixin
|
||||
// Block Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin button-default($bg-color, $bg-color-activated, $text-color) {
|
||||
background-color: $bg-color;
|
||||
color: $text-color;
|
||||
.button-block {
|
||||
display: flex;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
|
||||
&.activated {
|
||||
background-color: $bg-color-activated;
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate Default Button Colors
|
||||
// Full Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
|
||||
button[#{$color-name}],
|
||||
[button][#{$color-name}] {
|
||||
|
||||
$bg-color: $color-value;
|
||||
$bg-color-activated: color-shade($bg-color);
|
||||
$text-color: inverse($bg-color);
|
||||
@include button-default($bg-color, $bg-color-activated, $text-color);
|
||||
|
||||
}
|
||||
|
||||
.button-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
// Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-round {
|
||||
padding: $button-round-padding;
|
||||
border-radius: $button-round-border-radius;
|
||||
}
|
||||
|
||||
// Full Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-full.button-outline {
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
@ -1,16 +1,12 @@
|
||||
import {Directive, ElementRef, Renderer, Attribute} from 'angular2/angular2';
|
||||
import {Directive, ElementRef, Renderer, Attribute, Optional} from 'angular2/angular2';
|
||||
|
||||
import {Config} from '../../config/config';
|
||||
import {Toolbar} from '../toolbar/toolbar';
|
||||
|
||||
|
||||
/**
|
||||
* @name Button
|
||||
* @module ionic
|
||||
* @property [primary] - sets button color to default primary
|
||||
* @property [secondary] - sets button color to default secondary
|
||||
* @property [danger] - sets button color to default danger
|
||||
* @property [light] - sets button color to default light
|
||||
* @property [dark] - sets button color to default dark
|
||||
* @property [outline] - for an unfilled outline button
|
||||
* @property [clear] - for a transparent button that only shows text and icons
|
||||
* @property [round] - for a button with rounded corners
|
||||
@ -37,10 +33,17 @@ export class Button {
|
||||
|
||||
constructor(
|
||||
config: Config,
|
||||
elementRef: ElementRef,
|
||||
renderer: Renderer,
|
||||
@Attribute('type') type: string
|
||||
private elementRef: ElementRef,
|
||||
private renderer: Renderer
|
||||
) {
|
||||
this._role = 'button'; // bar-button/item-button
|
||||
this._size = null; // large/small
|
||||
this._style = 'default'; // outline/clear/solid
|
||||
this._shape = null; // round/fab
|
||||
this._display = null; // block/full
|
||||
this._colors = []; // primary/secondary
|
||||
this._icon = null; // left/right/only
|
||||
|
||||
let element = elementRef.nativeElement;
|
||||
|
||||
if (config.get('hoverCSS') === false) {
|
||||
@ -48,14 +51,24 @@ export class Button {
|
||||
}
|
||||
|
||||
if (element.hasAttribute('ion-item')) {
|
||||
// no need to put on these icon classes for an ion-item
|
||||
// no need to put on these classes for an ion-item
|
||||
this._role = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (type) {
|
||||
renderer.setElementAttribute(elementRef, type, '');
|
||||
}
|
||||
this._readAttrs(element);
|
||||
this._readIcon(element);
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
this._assignCss(true);
|
||||
}
|
||||
|
||||
setRole(val) {
|
||||
this._role = val;
|
||||
}
|
||||
|
||||
_readIcon(element) {
|
||||
// figure out if and where the icon lives in the button
|
||||
let childNodes = element.childNodes;
|
||||
let childNode;
|
||||
@ -83,18 +96,80 @@ export class Button {
|
||||
|
||||
if (nodes.length > 1) {
|
||||
if (nodes[0] === ICON && nodes[1] === TEXT) {
|
||||
element.classList.add('icon-left');
|
||||
this._icon = 'icon-left';
|
||||
|
||||
} else if (nodes[0] === TEXT && nodes[1] === ICON) {
|
||||
element.classList.add('icon-right');
|
||||
this._icon = 'icon-right';
|
||||
}
|
||||
} else if (nodes.length === 1 && nodes[0] === ICON) {
|
||||
element.classList.add('icon-only');
|
||||
this._icon = 'icon-only';
|
||||
}
|
||||
}
|
||||
|
||||
_readAttrs(element) {
|
||||
let elementAttrs = element.attributes;
|
||||
let attrName;
|
||||
for (let i = 0, l = elementAttrs.length; i < l; i++) {
|
||||
if (elementAttrs[i].value !== '') continue;
|
||||
|
||||
attrName = elementAttrs[i].name;
|
||||
|
||||
if (BUTTON_STYLE_ATTRS.indexOf(attrName) > -1) {
|
||||
this._style = attrName;
|
||||
|
||||
} else if (BUTTON_DISPLAY_ATTRS.indexOf(attrName) > -1) {
|
||||
this._display = attrName;
|
||||
|
||||
} else if (BUTTON_SHAPE_ATTRS.indexOf(attrName) > -1) {
|
||||
this._shape = attrName;
|
||||
|
||||
} else if (BUTTON_SIZE_ATTRS.indexOf(attrName) > -1) {
|
||||
this._size = attrName;
|
||||
|
||||
} else if (!(IGNORE_ATTRS.test(attrName))) {
|
||||
this._colors.push(attrName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_assignCss(assignCssClass) {
|
||||
let role = this._role;
|
||||
if (role) {
|
||||
this.renderer.setElementClass(this.elementRef, role, assignCssClass); // button
|
||||
|
||||
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 !== 'default' ? this._style + '-' : '');
|
||||
this._colors.forEach(colorName => {
|
||||
this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_setClass(type, assignCssClass) {
|
||||
if (type) {
|
||||
this.renderer.setElementClass(this.elementRef, this._role + '-' + type, assignCssClass);
|
||||
}
|
||||
}
|
||||
|
||||
static setRoles(contentButtonChildren, role) {
|
||||
let buttons = contentButtonChildren.toArray();
|
||||
buttons.forEach(button => {
|
||||
button.setRole(role);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const BUTTON_SIZE_ATTRS = ['large', 'small'];
|
||||
const BUTTON_STYLE_ATTRS = ['clear', 'outline', 'solid'];
|
||||
const BUTTON_SHAPE_ATTRS = ['round', 'fab'];
|
||||
const BUTTON_DISPLAY_ATTRS = ['block', 'full'];
|
||||
const IGNORE_ATTRS = /_ng|button|left|right/;
|
||||
|
||||
const TEXT = 1;
|
||||
const ICON = 2;
|
||||
|
||||
@ -1,8 +1,220 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.ios";
|
||||
@import "../button";
|
||||
|
||||
button {
|
||||
&[block] {
|
||||
// This fixes an issue with flexbox and button on iOS Safari. See #225
|
||||
display: block;
|
||||
// iOS Button
|
||||
// --------------------------------------------------
|
||||
|
||||
$button-ios-margin: 0.4rem 0.2rem !default;
|
||||
$button-ios-padding: 0 1em !default;
|
||||
$button-ios-font-size: 1.6rem !default;
|
||||
$button-ios-height: 2.8em !default;
|
||||
$button-ios-color: map-get($colors-ios, primary) !default;
|
||||
$button-ios-color-activated: color-shade($button-ios-color) !default;
|
||||
$button-ios-text-color: inverse($button-ios-color) !default;
|
||||
$button-ios-hover-opacity: 0.8 !default;
|
||||
$button-ios-border-radius: 4px !default;
|
||||
|
||||
$button-ios-large-font-size: 2rem !default;
|
||||
$button-ios-large-height: 2.8em !default;
|
||||
$button-ios-large-padding: 1.0em !default;
|
||||
$button-ios-small-font-size: 1.3rem !default;
|
||||
$button-ios-small-height: 2.1em !default;
|
||||
$button-ios-small-padding: 0.9em !default;
|
||||
$button-ios-small-icon-font-size: 1.3em !default;
|
||||
|
||||
|
||||
// iOS Default Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button {
|
||||
margin: $button-ios-margin;
|
||||
padding: $button-ios-padding;
|
||||
|
||||
min-height: $button-ios-height;
|
||||
font-size: $button-ios-font-size;
|
||||
|
||||
border-radius: $button-ios-border-radius;
|
||||
color: $button-ios-text-color;
|
||||
background-color: $button-ios-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
opacity: $button-ios-hover-opacity;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
background-color: $button-ios-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Default Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-button-default($color-name, $color-value) {
|
||||
|
||||
.button-#{$color-name} {
|
||||
$bg-color: $color-value;
|
||||
$bg-color-activated: color-shade($bg-color);
|
||||
$fg-color: inverse($bg-color);
|
||||
|
||||
color: $fg-color;
|
||||
background-color: $bg-color;
|
||||
|
||||
&.activated {
|
||||
background-color: $bg-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// iOS Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-large {
|
||||
padding: 0 $button-ios-large-padding;
|
||||
min-height: $button-ios-large-height;
|
||||
font-size: $button-ios-large-font-size;
|
||||
}
|
||||
|
||||
.button-small {
|
||||
padding: 0 $button-ios-small-padding;
|
||||
min-height: $button-ios-small-height;
|
||||
font-size: $button-ios-small-font-size;
|
||||
}
|
||||
|
||||
.button-small.button-icon-only icon {
|
||||
font-size: $button-ios-small-icon-font-size;
|
||||
}
|
||||
|
||||
// iOS Block Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-block {
|
||||
// This fixes an issue with flexbox and button on iOS Safari. See #225
|
||||
display: block;
|
||||
line-height: $button-ios-height;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
// iOS Full Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-full {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-radius: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-outline {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $button-ios-color;
|
||||
color: $button-ios-color;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
color: $background-ios-color;
|
||||
background-color: $button-ios-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Outline Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-button-outline($color-name, $color-value) {
|
||||
|
||||
.button-outline-#{$color-name} {
|
||||
$fg-color: color-shade($color-value, 5%);
|
||||
border-color: $fg-color;
|
||||
color: $fg-color;
|
||||
background-color: transparent;
|
||||
|
||||
&.activated {
|
||||
color: $background-ios-color;
|
||||
background-color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// iOS Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-clear {
|
||||
border-color: transparent;
|
||||
color: color-shade($button-ios-color);
|
||||
background-color: transparent;
|
||||
|
||||
&.activated {
|
||||
opacity: 0.4;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
opacity: 0.6;
|
||||
color: color-shade($button-ios-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Clear Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-button-clear($color-name, $color-value) {
|
||||
|
||||
.button-clear-#{$color-name} {
|
||||
$fg-color: color-shade($color-value);
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: $fg-color;
|
||||
|
||||
&.activated {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
color: color-shade($fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// iOS Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-round {
|
||||
padding: $button-round-padding;
|
||||
border-radius: $button-round-border-radius;
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
@include ios-button-default($color-name, $color-value);
|
||||
@include ios-button-outline($color-name, $color-value);
|
||||
@include ios-button-clear($color-name, $color-value);
|
||||
}
|
||||
|
||||
|
||||
// Core Button Overrides
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "../button-fab";
|
||||
@import "../button-icon";
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.md";
|
||||
@import "../button";
|
||||
|
||||
// Material Design Button
|
||||
// --------------------------------------------------
|
||||
|
||||
$button-md-font-size: 1.4rem !default;
|
||||
$button-md-min-height: 3.6rem !default;
|
||||
$button-md-margin: 0.4rem 0.2rem !default;
|
||||
$button-md-padding: 0 1.1em !default;
|
||||
$button-md-font-size: 1.4rem !default;
|
||||
$button-md-height: 3.6rem !default;
|
||||
$button-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
|
||||
$button-md-box-shadow-active: 0 3px 5px rgba(0, 0, 0, 0.14), 0 3px 5px rgba(0, 0, 0, 0.21) !default;
|
||||
|
||||
@ -19,19 +21,38 @@ $button-md-clear-active-background-color: rgba(158, 158, 158, 0.2) !default;
|
||||
$button-md-fab-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
|
||||
$button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
|
||||
|
||||
button,
|
||||
[button] {
|
||||
border-radius: $button-md-border-radius;
|
||||
$button-md-color: map-get($colors-md, primary) !default;
|
||||
$button-md-color-activated: color-shade($button-md-color) !default;
|
||||
$button-md-text-color: inverse($button-md-color) !default;
|
||||
$button-md-hover-opacity: 0.8 !default;
|
||||
|
||||
min-height: $button-md-min-height;
|
||||
$button-md-large-font-size: 2rem !default;
|
||||
$button-md-large-height: 2.8em !default;
|
||||
$button-md-large-padding: 1.0em !default;
|
||||
$button-md-small-font-size: 1.3rem !default;
|
||||
$button-md-small-height: 2.1em !default;
|
||||
$button-md-small-padding: 0.9em !default;
|
||||
$button-md-small-icon-font-size: 1.4em !default;
|
||||
|
||||
|
||||
// Material Design Default Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button {
|
||||
margin: $button-md-margin;
|
||||
padding: $button-md-padding;
|
||||
text-transform: uppercase;
|
||||
min-height: $button-md-height;
|
||||
border-radius: $button-md-border-radius;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: $button-md-font-size;
|
||||
|
||||
color: $button-md-text-color;
|
||||
background-color: $button-md-color;
|
||||
box-shadow: $button-md-box-shadow;
|
||||
|
||||
text-transform: uppercase;
|
||||
|
||||
transition: box-shadow $button-md-transition-duration $button-md-animation-curve,
|
||||
background-color $button-md-transition-duration $button-md-animation-curve,
|
||||
color $button-md-transition-duration $button-md-animation-curve;
|
||||
@ -40,105 +61,202 @@ button,
|
||||
background-color: $button-md-clear-hover-background-color;
|
||||
}
|
||||
|
||||
&[full] {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&[round] {
|
||||
border-radius: $button-round-border-radius;
|
||||
padding: $button-round-padding;
|
||||
}
|
||||
|
||||
&[large] {
|
||||
padding: 0 $button-large-padding;
|
||||
min-height: $button-large-height;
|
||||
font-size: $button-large-font-size;
|
||||
}
|
||||
|
||||
&[small] {
|
||||
padding: 0 $button-small-padding;
|
||||
min-height: $button-small-height;
|
||||
font-size: $button-small-font-size;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
box-shadow: $button-md-box-shadow-active;
|
||||
background-color: $button-md-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
&[fab] {
|
||||
border-radius: 50%;
|
||||
box-shadow: $button-md-fab-box-shadow;
|
||||
// Material Design Default Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
&.activated {
|
||||
box-shadow: $button-md-fab-box-shadow-active;
|
||||
}
|
||||
}
|
||||
@mixin md-button-default($color-name, $color-value) {
|
||||
|
||||
&.icon-only {
|
||||
padding: 0;
|
||||
}
|
||||
.button-#{$color-name} {
|
||||
$bg-color: $color-value;
|
||||
$bg-color-activated: color-shade($bg-color);
|
||||
$fg-color: inverse($bg-color);
|
||||
|
||||
&[outline] {
|
||||
box-shadow: none;
|
||||
color: $fg-color;
|
||||
background-color: $bg-color;
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
md-ripple {
|
||||
background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
|
||||
background-color: $bg-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
&[clear] {
|
||||
}
|
||||
|
||||
|
||||
// Material Design Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-large {
|
||||
padding: 0 $button-md-large-padding;
|
||||
min-height: $button-md-large-height;
|
||||
font-size: $button-md-large-font-size;
|
||||
}
|
||||
|
||||
.button-small {
|
||||
padding: 0 $button-md-small-padding;
|
||||
min-height: $button-md-small-height;
|
||||
font-size: $button-md-small-font-size;
|
||||
}
|
||||
|
||||
.button-small.button-icon-only icon {
|
||||
font-size: $button-md-small-icon-font-size;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Full Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-full {
|
||||
border-radius: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Block Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-block {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-outline {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $button-md-color;
|
||||
background-color: transparent;
|
||||
color: $button-md-color;
|
||||
box-shadow: none;
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
color: $background-md-color;
|
||||
background-color: $button-md-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
md-ripple {
|
||||
background-color: ripple-background-color($button-md-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Outline Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin md-button-outline($color-name, $color-value) {
|
||||
|
||||
.button-outline-#{$color-name} {
|
||||
$fg-color: color-shade($color-value, 5%);
|
||||
border-color: $fg-color;
|
||||
background-color: transparent;
|
||||
color: $fg-color;
|
||||
|
||||
&.activated {
|
||||
color: $background-md-color;
|
||||
background-color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Material Design Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-clear {
|
||||
border-color: transparent;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
color: color-shade($button-md-color);
|
||||
|
||||
&.activated {
|
||||
background-color: $button-md-clear-active-background-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
color: color-shade($button-md-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Clear Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin md-button-clear($color-name, $color-value) {
|
||||
|
||||
.button-clear-#{$color-name} {
|
||||
$fg-color: color-shade($color-value);
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: $fg-color;
|
||||
|
||||
|
||||
&.activated {
|
||||
background-color: $button-md-clear-active-background-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
color: color-shade($fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Material Design Button Color Mixin
|
||||
// Material Design Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin button-theme-md($color-name, $color-value) {
|
||||
.button-round {
|
||||
padding: $button-round-padding;
|
||||
border-radius: $button-round-border-radius;
|
||||
}
|
||||
|
||||
button[#{$color-name}],
|
||||
[button][#{$color-name}] {
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
}
|
||||
// Material Design FAB Button
|
||||
// --------------------------------------------------
|
||||
|
||||
&[outline] {
|
||||
|
||||
md-ripple {
|
||||
background: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
|
||||
}
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
|
||||
md-ripple {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-fab {
|
||||
border-radius: 50%;
|
||||
box-shadow: $button-md-fab-box-shadow;
|
||||
|
||||
&.activated {
|
||||
box-shadow: $button-md-fab-box-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-only {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Button Auxiliary Colors
|
||||
// Generate Material Design Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in auxiliary-colors() {
|
||||
|
||||
@include button-theme-md($color-name, $color-value);
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
@include md-button-default($color-name, $color-value);
|
||||
@include md-button-outline($color-name, $color-value);
|
||||
@include md-button-clear($color-name, $color-value);
|
||||
}
|
||||
|
||||
|
||||
// Core Button Overrides
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "../button-fab";
|
||||
@import "../button-icon";
|
||||
|
||||
200
ionic/components/button/test/button.spec.ts
Normal file
200
ionic/components/button/test/button.spec.ts
Normal file
@ -0,0 +1,200 @@
|
||||
import {Button, Config} from 'ionic/ionic';
|
||||
|
||||
export function run() {
|
||||
|
||||
function mockButton(attrs, config) {
|
||||
config = config || new Config();
|
||||
let elementRef = {
|
||||
nativeElement: document.createElement('button')
|
||||
};
|
||||
if (attrs) {
|
||||
for (let i = 0; i < attrs.length; i++) {
|
||||
elementRef.nativeElement.setAttribute(attrs[i], '');
|
||||
}
|
||||
}
|
||||
let renderer = {
|
||||
setElementClass: function(elementRef, className, shouldAdd) {
|
||||
elementRef.nativeElement.classList[shouldAdd ? 'add' : 'remove'](className);
|
||||
}
|
||||
};
|
||||
return new Button(config, elementRef, renderer);
|
||||
}
|
||||
|
||||
function hasClass(button, className) {
|
||||
return button.elementRef.nativeElement.classList.contains(className);
|
||||
}
|
||||
|
||||
it('should ignore certain attributes', () => {
|
||||
let b = mockButton(['_ngcontent', 'button']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button')).toEqual(true);
|
||||
expect(hasClass(b, 'button-_ngcontent')).toEqual(false);
|
||||
expect(hasClass(b, 'button-button')).toEqual(false);
|
||||
});
|
||||
|
||||
it('should set a different button role', () => {
|
||||
let b = mockButton(['outline', 'small', 'full', 'primary']);
|
||||
b.setRole('bar-button');
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'bar-button-outline')).toEqual(true);
|
||||
expect(hasClass(b, 'bar-button-small')).toEqual(true);
|
||||
expect(hasClass(b, 'bar-button-full')).toEqual(true);
|
||||
expect(hasClass(b, 'bar-button-outline-primary')).toEqual(true);
|
||||
|
||||
expect(hasClass(b, 'button-outline')).toEqual(false);
|
||||
expect(hasClass(b, 'button-small')).toEqual(false);
|
||||
expect(hasClass(b, 'button-full')).toEqual(false);
|
||||
expect(hasClass(b, 'button-primary')).toEqual(false);
|
||||
});
|
||||
|
||||
it('should remove button color attributes and add different role', () => {
|
||||
let b = mockButton(['outline', 'small', 'full', 'primary']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-outline')).toEqual(true);
|
||||
expect(hasClass(b, 'button-small')).toEqual(true);
|
||||
expect(hasClass(b, 'button-full')).toEqual(true);
|
||||
expect(hasClass(b, 'button-outline-primary')).toEqual(true);
|
||||
|
||||
b._assignCss(false);
|
||||
expect(hasClass(b, 'button-outline')).toEqual(false);
|
||||
expect(hasClass(b, 'button-small')).toEqual(false);
|
||||
expect(hasClass(b, 'button-full')).toEqual(false);
|
||||
expect(hasClass(b, 'button-outline-primary')).toEqual(false);
|
||||
});
|
||||
|
||||
it('should read button color attributes with styles', () => {
|
||||
let b = mockButton(['outline', 'small', 'full', 'primary']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button')).toEqual(true);
|
||||
expect(hasClass(b, 'button-outline')).toEqual(true);
|
||||
expect(hasClass(b, 'button-small')).toEqual(true);
|
||||
expect(hasClass(b, 'button-full')).toEqual(true);
|
||||
expect(hasClass(b, 'button-outline-primary')).toEqual(true);
|
||||
|
||||
b = mockButton(['clear', 'primary', 'secondary']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button')).toEqual(true);
|
||||
expect(hasClass(b, 'button-clear')).toEqual(true);
|
||||
expect(hasClass(b, 'button-clear-primary')).toEqual(true);
|
||||
expect(hasClass(b, 'button-clear-secondary')).toEqual(true);
|
||||
|
||||
b = mockButton(['solid', 'primary', 'secondary']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button')).toEqual(true);
|
||||
expect(hasClass(b, 'button-solid')).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', () => {
|
||||
let b = mockButton(['primary']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-primary')).toEqual(true);
|
||||
|
||||
b = mockButton(['primary', 'secondary']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-primary')).toEqual(true);
|
||||
expect(hasClass(b, 'button-secondary')).toEqual(true);
|
||||
});
|
||||
|
||||
it('should read button style attributes', () => {
|
||||
let b = mockButton(['clear']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-clear')).toEqual(true);
|
||||
|
||||
b = mockButton(['outline']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-outline')).toEqual(true);
|
||||
|
||||
b = mockButton(['clear', 'outline', 'small', 'full']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-clear')).toEqual(false);
|
||||
expect(hasClass(b, 'button-outline')).toEqual(true);
|
||||
expect(hasClass(b, 'button-small')).toEqual(true);
|
||||
expect(hasClass(b, 'button-full')).toEqual(true);
|
||||
});
|
||||
|
||||
it('should read button shape attributes', () => {
|
||||
let b = mockButton(['round']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-round')).toEqual(true);
|
||||
|
||||
b = mockButton(['fab']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-fab')).toEqual(true);
|
||||
});
|
||||
|
||||
it('should read button display attributes', () => {
|
||||
let b = mockButton(['block']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-block')).toEqual(true);
|
||||
|
||||
b = mockButton(['full']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-full')).toEqual(true);
|
||||
|
||||
b = mockButton(['block', 'full']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-block')).toEqual(false);
|
||||
expect(hasClass(b, 'button-full')).toEqual(true);
|
||||
});
|
||||
|
||||
it('should read button size attributes', () => {
|
||||
let b = mockButton(['small']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-small')).toEqual(true);
|
||||
|
||||
b = mockButton(['large']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-large')).toEqual(true);
|
||||
|
||||
b = mockButton(['large', 'small']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button-large')).toEqual(false);
|
||||
expect(hasClass(b, 'button-small')).toEqual(true);
|
||||
});
|
||||
|
||||
it('should not add button css class for ion-item attribute', () => {
|
||||
let b = mockButton(['ion-item']);
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button')).toEqual(false);
|
||||
});
|
||||
|
||||
it('should add button css class', () => {
|
||||
let b = mockButton();
|
||||
b._assignCss(true);
|
||||
expect(hasClass(b, 'button')).toEqual(true);
|
||||
});
|
||||
|
||||
it('should add disable-hover css class', () => {
|
||||
let config = new Config({
|
||||
hoverCSS: false
|
||||
});
|
||||
let b = mockButton(null, config);
|
||||
|
||||
expect(hasClass(b, 'disable-hover')).toEqual(true);
|
||||
});
|
||||
|
||||
it('should set defaults', () => {
|
||||
let b = mockButton();
|
||||
expect(b._role).toEqual('button');
|
||||
expect(b._size).toEqual(null);
|
||||
expect(b._colors.length).toEqual(0);
|
||||
expect(b._style).toEqual('default');
|
||||
expect(b._display).toEqual(null);
|
||||
});
|
||||
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// Card
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.ios";
|
||||
@import "../card";
|
||||
|
||||
// iOS Card
|
||||
// --------------------------------------------------
|
||||
@ -16,7 +17,7 @@ $card-ios-padding-left: 16px !default;
|
||||
$card-ios-padding-media-top: 10px !default;
|
||||
$card-ios-padding-media-bottom: 9px !default;
|
||||
|
||||
$card-ios-background-color: $list-background-color !default;
|
||||
$card-ios-background-color: $list-ios-background-color !default;
|
||||
$card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default;
|
||||
$card-ios-border-radius: 2px !default;
|
||||
$card-ios-font-size: 1.4rem !default;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.md";
|
||||
@import "../card";
|
||||
|
||||
// Material Design Card
|
||||
// --------------------------------------------------
|
||||
@ -19,7 +20,7 @@ $card-md-padding-media-bottom: 10px !default;
|
||||
$card-md-avatar-size: 4rem !default;
|
||||
$card-md-thumbnail-size: 8rem !default;
|
||||
|
||||
$card-md-background-color: $list-background-color !default;
|
||||
$card-md-background-color: $list-md-background-color !default;
|
||||
$card-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
|
||||
$card-md-border-radius: 2px !default;
|
||||
$card-md-font-size: 1.4rem !default;
|
||||
@ -60,10 +61,6 @@ ion-card {
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
font-size: $item-md-font-size;
|
||||
}
|
||||
|
||||
.item-inner {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
@import "../../ionic.globals";
|
||||
|
||||
// Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
ion-checkbox {
|
||||
cursor: pointer;
|
||||
@include user-select-none();
|
||||
}
|
||||
|
||||
ion-checkbox[aria-disabled=true] {
|
||||
opacity: 0.5;
|
||||
color: $subdued-text-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -39,9 +39,9 @@ import {Form} from '../../util/form';
|
||||
},
|
||||
template:
|
||||
'<div class="item-inner">' +
|
||||
'<media-checkbox disable-activated>' +
|
||||
'<checkbox-icon></checkbox-icon>' +
|
||||
'</media-checkbox>' +
|
||||
'<div class="checkbox-media" disable-activated>' +
|
||||
'<div class="checkbox-icon"></div>' +
|
||||
'</div>' +
|
||||
'<ion-item-content id="{{labelId}}">' +
|
||||
'<ng-content></ng-content>' +
|
||||
'</ion-item-content>' +
|
||||
@ -65,7 +65,7 @@ export class Checkbox {
|
||||
if (ngControl) ngControl.valueAccessor = this;
|
||||
}
|
||||
|
||||
onInit() {
|
||||
ngOnInit() {
|
||||
this.labelId = 'label-' + this.inputId;
|
||||
}
|
||||
|
||||
@ -118,7 +118,7 @@ export class Checkbox {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onDestroy() {
|
||||
ngOnDestroy() {
|
||||
this.form.deregister(this);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,26 +1,43 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.ios";
|
||||
|
||||
// iOS Checkbox Structure
|
||||
// --------------------------------------------------
|
||||
|
||||
$checkbox-ios-icon-size: 21px !default;
|
||||
$checkbox-ios-background-color-off: $list-background-color !default;
|
||||
$checkbox-ios-border-color-off: $list-border-color !default;
|
||||
$checkbox-ios-background-color-on: color(primary) !default;
|
||||
$checkbox-ios-border-color-on: color(primary) !default;
|
||||
$checkbox-ios-checkmark-color-on: $background-color !default;
|
||||
|
||||
$checkbox-ios-background-color-off: $list-ios-background-color !default;
|
||||
$checkbox-ios-background-color-on: map-get($colors-ios, primary) !default;
|
||||
|
||||
$checkbox-ios-icon-size: 21px !default;
|
||||
$checkbox-ios-icon-border-color-on: map-get($colors-ios, primary) !default;
|
||||
$checkbox-ios-icon-border-color-off: $list-ios-border-color !default;
|
||||
$checkbox-ios-icon-border-width: 1px !default;
|
||||
$checkbox-ios-icon-border-style: solid !default;
|
||||
$checkbox-ios-icon-border-radius: 50% !default;
|
||||
|
||||
$checkbox-ios-icon-checkmark-width: 1px !default;
|
||||
$checkbox-ios-icon-checkmark-style: solid !default;
|
||||
$checkbox-ios-icon-checkmark-color: $background-ios-color !default;
|
||||
|
||||
$checkbox-ios-media-margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
|
||||
|
||||
$checkbox-ios-disabled-opacity: 0.5 !default;
|
||||
$checkbox-ios-disabled-text-color: $subdued-text-ios-color !default;
|
||||
|
||||
|
||||
ion-checkbox {
|
||||
cursor: pointer;
|
||||
@include user-select-none();
|
||||
|
||||
&[aria-checked=true] checkbox-icon {
|
||||
&[aria-checked=true] .checkbox-icon {
|
||||
background-color: $checkbox-ios-background-color-on;
|
||||
border-color: $checkbox-ios-border-color-on;
|
||||
border-color: $checkbox-ios-icon-border-color-on;
|
||||
}
|
||||
|
||||
&[aria-checked=true] checkbox-icon:after {
|
||||
&[aria-checked=true] .checkbox-icon:after {
|
||||
position: absolute;
|
||||
border: 1px solid $checkbox-ios-checkmark-color-on;
|
||||
border-width: $checkbox-ios-icon-checkmark-width;
|
||||
border-style: $checkbox-ios-icon-checkmark-style;
|
||||
border-color: $checkbox-ios-icon-checkmark-color;
|
||||
top: 3px;
|
||||
left: 7px;
|
||||
width: 4px;
|
||||
@ -32,23 +49,30 @@ ion-checkbox {
|
||||
}
|
||||
|
||||
&.item.activated {
|
||||
background-color: $list-background-color;
|
||||
background-color: $checkbox-ios-background-color-off;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
media-checkbox {
|
||||
display: block;
|
||||
margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px;
|
||||
ion-checkbox[aria-disabled=true] {
|
||||
opacity: $checkbox-ios-disabled-opacity;
|
||||
color: $checkbox-ios-disabled-text-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
checkbox-icon {
|
||||
.checkbox-media {
|
||||
margin: $checkbox-ios-media-margin;
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: $checkbox-ios-icon-size;
|
||||
height: $checkbox-ios-icon-size;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $checkbox-ios-border-color-off;
|
||||
border-radius: $checkbox-ios-icon-border-radius;
|
||||
border-width: $checkbox-ios-icon-border-width;
|
||||
border-style: $checkbox-ios-icon-border-style;
|
||||
border-color: $checkbox-ios-icon-border-color-off;
|
||||
background-color: $checkbox-ios-background-color-off;
|
||||
}
|
||||
|
||||
@ -58,19 +82,21 @@ checkbox-icon {
|
||||
|
||||
@mixin checkbox-theme-ios($color-name, $bg-on) {
|
||||
|
||||
ion-checkbox[#{$color-name}][aria-checked=true] checkbox-icon {
|
||||
ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
|
||||
background-color: $bg-on;
|
||||
border-color: $bg-on;
|
||||
|
||||
&:after {
|
||||
border-color: inverse($bg-on);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Checkbox Auxiliary Colors
|
||||
// Generate iOS Checkbox Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $value in auxiliary-colors() {
|
||||
|
||||
@include checkbox-theme-ios($color-name, $value);
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
@include checkbox-theme-ios($color-name, $color-value);
|
||||
}
|
||||
|
||||
@ -1,38 +1,59 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.md";
|
||||
|
||||
// Material Design Checkbox
|
||||
// --------------------------------------------------
|
||||
|
||||
$checkbox-md-icon-size: 16px !default;
|
||||
$checkbox-md-background-color-off: $list-background-color !default;
|
||||
$checkbox-md-border-width: 2px !default;
|
||||
$checkbox-md-border-radius: 2px !default;
|
||||
$checkbox-md-border-color-off: darken($item-md-border-color, 40%) !default;
|
||||
$checkbox-md-background-color-on: color(primary) !default;
|
||||
$checkbox-md-border-color-on: color(primary) !default;
|
||||
$checkbox-md-checkmark-color-on: $background-color !default;
|
||||
$checkbox-md-border-bottom-width: 1px !default;
|
||||
$checkbox-md-border-bottom-style: solid !default;
|
||||
$checkbox-md-border-bottom-color: $list-md-border-color !default;
|
||||
$checkbox-md-padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
|
||||
$checkbox-md-margin: 0 !default;
|
||||
$checkbox-md-media-margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default;
|
||||
$checkbox-md-disabled-opacity: 0.5 !default;
|
||||
$checkbox-md-disabled-text-color: $subdued-text-md-color !default;
|
||||
|
||||
$checkbox-md-icon-background-color-off: $list-md-background-color !default;
|
||||
$checkbox-md-icon-background-color-on: map-get($colors-md, primary) !default;
|
||||
$checkbox-md-icon-size: 16px !default;
|
||||
|
||||
$checkbox-md-icon-checkmark-width: 2px !default;
|
||||
$checkbox-md-icon-checkmark-style: solid !default;
|
||||
$checkbox-md-icon-checkmark-color: $background-md-color !default;
|
||||
|
||||
$checkbox-md-icon-border-width: 2px !default;
|
||||
$checkbox-md-icon-border-style: solid !default;
|
||||
$checkbox-md-icon-border-radius: 2px !default;
|
||||
$checkbox-md-icon-border-color-off: darken($list-md-border-color, 40%) !default;
|
||||
$checkbox-md-icon-border-color-on: map-get($colors-md, primary) !default;
|
||||
|
||||
|
||||
ion-checkbox {
|
||||
cursor: pointer;
|
||||
@include user-select-none();
|
||||
|
||||
&.item .item-inner {
|
||||
border: none;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
ion-item-content {
|
||||
border-bottom: 1px solid $item-md-border-color;
|
||||
margin: 0;
|
||||
padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
|
||||
border-bottom-width: $checkbox-md-border-bottom-width;
|
||||
border-bottom-style: $checkbox-md-border-bottom-style;
|
||||
border-bottom-color: $checkbox-md-border-bottom-color;
|
||||
margin: $checkbox-md-margin;
|
||||
padding: $checkbox-md-padding;
|
||||
}
|
||||
|
||||
&[aria-checked=true] checkbox-icon {
|
||||
background-color: $checkbox-md-background-color-on;
|
||||
border-color: $checkbox-md-border-color-on;
|
||||
&[aria-checked=true] .checkbox-icon {
|
||||
background-color: $checkbox-md-icon-background-color-on;
|
||||
border-color: $checkbox-md-icon-border-color-on;
|
||||
}
|
||||
|
||||
&[aria-checked=true] checkbox-icon:after {
|
||||
&[aria-checked=true] .checkbox-icon:after {
|
||||
position: absolute;
|
||||
border: 2px solid $checkbox-md-checkmark-color-on;
|
||||
border-width: $checkbox-md-icon-checkmark-width;
|
||||
border-style: $checkbox-md-icon-checkmark-style;
|
||||
border-color: $checkbox-md-icon-checkmark-color;
|
||||
top: 0;
|
||||
left: 3px;
|
||||
width: 4px;
|
||||
@ -45,20 +66,25 @@ ion-checkbox {
|
||||
|
||||
}
|
||||
|
||||
media-checkbox {
|
||||
display: block;
|
||||
// TODO convert these to sass variables
|
||||
margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px;
|
||||
ion-checkbox[aria-disabled=true] {
|
||||
opacity: $checkbox-md-disabled-opacity;
|
||||
color: $checkbox-md-disabled-text-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
checkbox-icon {
|
||||
.checkbox-media {
|
||||
margin: $checkbox-md-media-margin;
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: $checkbox-md-icon-size;
|
||||
height: $checkbox-md-icon-size;
|
||||
border-radius: $checkbox-md-border-radius;
|
||||
border: $checkbox-md-border-width solid $checkbox-md-border-color-off;
|
||||
background-color: $checkbox-md-background-color-off;
|
||||
border-radius: $checkbox-md-icon-border-radius;
|
||||
border-width: $checkbox-md-icon-border-width;
|
||||
border-style: $checkbox-md-icon-border-style;
|
||||
border-color: $checkbox-md-icon-border-color-off;
|
||||
background-color: $checkbox-md-icon-background-color-off;
|
||||
}
|
||||
|
||||
|
||||
@ -67,19 +93,21 @@ checkbox-icon {
|
||||
|
||||
@mixin checkbox-theme-md($color-name, $bg-on) {
|
||||
|
||||
ion-checkbox[#{$color-name}][aria-checked=true] checkbox-icon {
|
||||
ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
|
||||
background-color: $bg-on;
|
||||
border-color: $bg-on;
|
||||
|
||||
&:after {
|
||||
border-color: inverse($bg-on);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Checkbox Auxiliary Colors
|
||||
// Generate Material Design Checkbox Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in auxiliary-colors() {
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
@include checkbox-theme-md($color-name, $color-value);
|
||||
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
|
||||
it('should check apple, enable/check grape, submit form', function() {
|
||||
element(by.css('[ng-control=appleCtrl] media-checkbox')).click();
|
||||
element(by.css('[ng-control=appleCtrl] .checkbox-media')).click();
|
||||
element(by.css('.e2eGrapeDisabled')).click();
|
||||
element(by.css('.e2eGrapeChecked')).click();
|
||||
element(by.css('.e2eSubmit')).click();
|
||||
|
||||
@ -28,6 +28,10 @@
|
||||
secondary color
|
||||
</ion-checkbox>
|
||||
|
||||
<ion-checkbox light checked="true">
|
||||
light color
|
||||
</ion-checkbox>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</form>
|
||||
|
||||
@ -49,8 +49,8 @@ export class Content extends Ion {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onInit() {
|
||||
super.onInit();
|
||||
ngOnInit() {
|
||||
super.ngOnInit();
|
||||
this.scrollElement = this.getNativeElement().children[0];
|
||||
}
|
||||
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.ios";
|
||||
|
||||
// iOS Content
|
||||
// --------------------------------------------------
|
||||
|
||||
$outer-content-md-background-color: #efeff4 !default;
|
||||
$outer-content-ios-background-color: #efeff4 !default;
|
||||
|
||||
|
||||
ion-content {
|
||||
background-color: $background-ios-color;
|
||||
}
|
||||
|
||||
.outer-content {
|
||||
background: $outer-content-md-background-color;
|
||||
background: $outer-content-ios-background-color;
|
||||
}
|
||||
|
||||
ion-nav.has-views,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.md";
|
||||
|
||||
// Material Design Content Padding
|
||||
// --------------------------------------------------
|
||||
@ -6,6 +6,10 @@
|
||||
$content-padding-md: 16px !default;
|
||||
|
||||
|
||||
ion-content {
|
||||
background-color: $background-md-color;
|
||||
}
|
||||
|
||||
[padding],
|
||||
[padding] > scroll-content {
|
||||
padding: $content-padding-md;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// Grid
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -6,8 +6,8 @@ import {Config} from '../../config/config';
|
||||
/**
|
||||
* @name Icon
|
||||
* @description
|
||||
* Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons,
|
||||
* check out the [Ionicons resource docs](../../../../../resources/ionicons).
|
||||
* Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons,
|
||||
* check out the [Ionicons resource docs](../../../../../resources/ionicons).
|
||||
*
|
||||
* @property {boolean} [is-active] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon.
|
||||
* If there is not an outlined version for the particular icon, it will use the default (full) version.
|
||||
@ -42,7 +42,7 @@ export class Icon {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onInit() {
|
||||
ngOnInit() {
|
||||
let ele = this.elementRef.nativeElement;
|
||||
|
||||
if (this.mode == 'ios' && this.ios) {
|
||||
@ -53,7 +53,7 @@ export class Icon {
|
||||
|
||||
} else if (!this.name) {
|
||||
// looping through native dom attributes, eww
|
||||
// https://github.com/angular/angular/issues/3961
|
||||
// https://github.com/angular/angular/issues/1818
|
||||
for (let i = 0, l = ele.attributes.length; i < l; i++) {
|
||||
if (ele.attributes[i].value === '' && /_|item-|is-active|large|small|class/.test(ele.attributes[i].name) !== true) {
|
||||
this.name = ele.attributes[i].name;
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
@import "../../../ionic.globals";
|
||||
|
||||
// iOS Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
$icon-detail-push-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
|
||||
|
||||
|
||||
@mixin ios-detail-push-icon($fg-color) {
|
||||
$svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
|
||||
@include svg-background-image($svg);
|
||||
}
|
||||
@ -14,7 +14,7 @@ export class Ion {
|
||||
this.config = config;
|
||||
}
|
||||
|
||||
onInit() {
|
||||
ngOnInit() {
|
||||
let cls = this.constructor;
|
||||
|
||||
if (cls.defaultInputs && this.config) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// Item Media
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
@import "../../ionic.globals";
|
||||
|
||||
@import "../../globals.core";
|
||||
|
||||
// Item Sliding
|
||||
// --------------------------------------------------
|
||||
// The hidden right-side buttons that can be exposed under a list item with dragging.
|
||||
|
||||
|
||||
ion-item-sliding {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -22,15 +25,24 @@ ion-item-options {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
ion-item-options .button {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ion-item-sliding.active-slide {
|
||||
|
||||
|
||||
.item,
|
||||
.item.item.activated {
|
||||
.item.activated {
|
||||
position: relative;
|
||||
z-index: $z-index-item-options + 1;
|
||||
opacity: 1;
|
||||
transition: all 300ms cubic-bezier(0.36,0.66,0.04,1);
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
ion-item-options {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// Item
|
||||
// --------------------------------------------------
|
||||
@ -13,22 +13,15 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
min-height: 4.4rem;
|
||||
text-align: initial;
|
||||
overflow: hidden;
|
||||
|
||||
background-color: $list-background-color;
|
||||
color: $list-text-color;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
&[no-lines] {
|
||||
border: none;
|
||||
|
||||
.item-inner {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
text-align: initial;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.item-inner {
|
||||
@ -37,7 +30,6 @@
|
||||
padding: 0;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
flex: 1;
|
||||
flex-direction: inherit;
|
||||
@ -45,6 +37,11 @@
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.item[no-lines],
|
||||
.item[no-lines] .item-inner {
|
||||
border: none;
|
||||
}
|
||||
|
||||
ion-item-group {
|
||||
display: block;
|
||||
}
|
||||
@ -52,9 +49,9 @@ ion-item-group {
|
||||
ion-item-divider {
|
||||
display: block;
|
||||
min-height: 30px;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
font-weight: 500;
|
||||
|
||||
&[sticky] {
|
||||
position: -webkit-sticky;
|
||||
@ -63,23 +60,6 @@ ion-item-divider {
|
||||
}
|
||||
}
|
||||
|
||||
a.item,
|
||||
button.item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
justify-content: inherit;
|
||||
min-height: 4.4rem;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
will-change: initial;
|
||||
}
|
||||
|
||||
ion-item-content {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
@ -89,7 +69,8 @@ ion-item-content {
|
||||
pointer-events: none;
|
||||
|
||||
a,
|
||||
button {
|
||||
button,
|
||||
[tappable] {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
@ -98,53 +79,7 @@ ion-item-content {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
h1 {
|
||||
margin: 0 0 2px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 2px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: normal;
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: normal;
|
||||
color: #666;
|
||||
font-size: 1.2rem;
|
||||
margin: 0 0 2px;
|
||||
}
|
||||
|
||||
h2:last-child,
|
||||
h3:last-child,
|
||||
h4:last-child,
|
||||
h5:last-child,
|
||||
h6:last-child,
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.vertical-align-top,
|
||||
[vertical-align-top],
|
||||
ion-input.item {
|
||||
align-items: flex-start;
|
||||
}
|
||||
@ -152,3 +87,6 @@ ion-input.item {
|
||||
ion-item-content + ion-item-content[cnt] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@import "item-media";
|
||||
@import "item-sliding";
|
||||
|
||||
@ -1,87 +1,98 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.ios";
|
||||
@import "../item";
|
||||
|
||||
// iOS Item
|
||||
// --------------------------------------------------
|
||||
|
||||
$item-ios-border-color: $list-border-color !default;
|
||||
$item-ios-activated-background-color: #d9d9d9 !default;
|
||||
$item-ios-font-size: 1.6rem !default;
|
||||
|
||||
$item-ios-padding-top: 12px !default;
|
||||
$item-ios-padding-right: 16px !default;
|
||||
$item-ios-padding-bottom: 13px !default;
|
||||
$item-ios-padding-left: 16px !default;
|
||||
|
||||
$item-ios-padding-media-top: 10px !default;
|
||||
$item-ios-padding-media-bottom: 10px !default;
|
||||
|
||||
$item-ios-padding-icon-top: 10px !default;
|
||||
$item-ios-padding-icon-bottom: 9px !default;
|
||||
|
||||
$item-ios-avatar-size: 3.6rem !default;
|
||||
$item-ios-thumbnail-size: 5.6rem !default;
|
||||
$item-ios-note-color: darken($item-ios-border-color, 10%) !default;
|
||||
$item-ios-detail-push-color: $item-ios-border-color !default;
|
||||
$item-ios-note-color: darken($list-ios-border-color, 10%) !default;
|
||||
$item-ios-detail-push-color: $list-ios-border-color !default;
|
||||
|
||||
$item-ios-divider-bg: #f7f7f7 !default;
|
||||
$item-ios-divider-color: #222 !default;
|
||||
$item-ios-divider-padding: 5px 15px !default;
|
||||
|
||||
$item-ios-sliding-content-bg: $background-color !default;
|
||||
$item-ios-sliding-transition: transform 250ms ease-in-out !default;
|
||||
$item-ios-sliding-content-bg: $list-ios-background-color !default;
|
||||
|
||||
|
||||
ion-item-group {
|
||||
.item:first-child {
|
||||
.item-inner {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item:last-child .item-inner,
|
||||
ion-item-sliding:last-child .item .item-inner {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
ion-item-divider {
|
||||
padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
|
||||
background-color: $item-ios-divider-bg;
|
||||
color: $item-ios-divider-color;
|
||||
}
|
||||
|
||||
ion-note {
|
||||
color: $item-ios-note-color;
|
||||
}
|
||||
// iOS Item
|
||||
// --------------------------------------------------
|
||||
|
||||
.item {
|
||||
border-radius: 0;
|
||||
padding-left: $item-ios-padding-left;
|
||||
font-size: $item-ios-font-size;
|
||||
}
|
||||
|
||||
.item.activated,
|
||||
a.item.activated,
|
||||
button.item.activated {
|
||||
background-color: $item-ios-activated-background-color;
|
||||
transition-duration: 0ms;
|
||||
}
|
||||
|
||||
.item,
|
||||
a.item,
|
||||
button.item {
|
||||
border-radius: 0;
|
||||
color: $list-ios-text-color;
|
||||
background-color: $list-ios-background-color;
|
||||
transition-duration: 200ms;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 2px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 2px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: normal;
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: normal;
|
||||
color: #666;
|
||||
font-size: 1.2rem;
|
||||
margin: 0 0 2px;
|
||||
}
|
||||
|
||||
h2:last-child,
|
||||
h3:last-child,
|
||||
h4:last-child,
|
||||
h5:last-child,
|
||||
h6:last-child,
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.item.activated {
|
||||
background-color: $list-ios-activated-background-color;
|
||||
transition-duration: 0ms;
|
||||
}
|
||||
|
||||
.item-inner {
|
||||
padding-right: ($item-ios-padding-right / 2);
|
||||
border-bottom: 1px solid $item-ios-border-color;
|
||||
border-bottom: 1px solid $list-ios-border-color;
|
||||
}
|
||||
|
||||
&.hairlines .item-inner {
|
||||
border-bottom-width: 0.55px;
|
||||
}
|
||||
|
||||
ion-item-content {
|
||||
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
|
||||
}
|
||||
|
||||
|
||||
// iOS Item Media
|
||||
// --------------------------------------------------
|
||||
|
||||
[item-left] {
|
||||
margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0;
|
||||
}
|
||||
@ -116,10 +127,10 @@ button[item-right],
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
[item-left].icon-only,
|
||||
[item-right].icon-only,
|
||||
[item-left].icon-only icon,
|
||||
[item-right].icon-only icon,
|
||||
[item-left].button-icon-only,
|
||||
[item-right].button-icon-only,
|
||||
[item-left].button-icon-only icon,
|
||||
[item-right].button-icon-only icon,
|
||||
[item-left][clear],
|
||||
[item-right][clear] {
|
||||
padding: 0 1px;
|
||||
@ -159,6 +170,10 @@ ion-thumbnail {
|
||||
}
|
||||
}
|
||||
|
||||
ion-note {
|
||||
color: $item-ios-note-color;
|
||||
}
|
||||
|
||||
button.item:not([detail-none]) .item-inner,
|
||||
a.item:not([detail-none]) .item-inner,
|
||||
.item[detail-push] .item-inner {
|
||||
@ -169,8 +184,37 @@ a.item:not([detail-none]) .item-inner,
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
&.hairlines {
|
||||
.item-inner {
|
||||
border-bottom-width: 0.55px;
|
||||
|
||||
// iOS Item Group
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-item-group {
|
||||
.item:first-child {
|
||||
.item-inner {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item:last-child .item-inner,
|
||||
ion-item-sliding:last-child .item .item-inner {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Item Divider
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-item-divider {
|
||||
padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
|
||||
color: $item-ios-divider-color;
|
||||
background-color: $item-ios-divider-bg;
|
||||
}
|
||||
|
||||
|
||||
// iOS Item Sliding
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-item-sliding {
|
||||
background-color: $item-ios-sliding-content-bg;
|
||||
}
|
||||
|
||||
@ -1,48 +1,24 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.md";
|
||||
@import "../item";
|
||||
|
||||
// Material Design Item
|
||||
// --------------------------------------------------
|
||||
|
||||
$item-md-border-color: grayscale(lighten($list-border-color, 8%)) !default;
|
||||
$item-md-activated-background-color: #f1f1f1 !default;
|
||||
$item-md-font-size: 1.6rem !default;
|
||||
|
||||
$item-md-padding-top: 13px !default;
|
||||
$item-md-padding-right: 16px !default;
|
||||
$item-md-padding-bottom: 13px !default;
|
||||
$item-md-padding-left: 16px !default;
|
||||
|
||||
$item-md-padding-media-top: 9px !default;
|
||||
$item-md-padding-media-bottom: 9px !default;
|
||||
|
||||
$item-md-padding-icon-top: 11px !default;
|
||||
$item-md-padding-icon-bottom: 10px !default;
|
||||
|
||||
$item-md-body-text-font-size: 1.4rem !default;
|
||||
$item-md-body-text-line-height: 1.5 !default;
|
||||
|
||||
$item-md-font-size: 1.6rem !default;
|
||||
$item-md-avatar-size: 4rem !default;
|
||||
$item-md-thumbnail-size: 8rem !default;
|
||||
$item-md-note-color: darken($item-md-border-color, 10%) !default;
|
||||
$item-md-note-color: darken($list-md-border-color, 10%) !default;
|
||||
|
||||
$item-md-divider-bg: #fff !default;
|
||||
$item-md-divider-color: #222 !default;
|
||||
$item-md-divider-padding: 5px 15px !default;
|
||||
|
||||
$item-md-sliding-content-bg: $background-color !default;
|
||||
$item-md-sliding-transition: transform 250ms ease-in-out !default;
|
||||
$item-md-sliding-content-bg: $list-md-background-color !default;
|
||||
|
||||
|
||||
ion-item-divider {
|
||||
padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
|
||||
background-color: $item-md-divider-bg;
|
||||
color: $item-md-divider-color;
|
||||
}
|
||||
|
||||
ion-note {
|
||||
color: $item-md-note-color;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
@ -50,7 +26,11 @@ ion-note {
|
||||
font-size: $item-md-font-size;
|
||||
text-transform: none;
|
||||
font-weight: normal;
|
||||
|
||||
color: $list-md-text-color;
|
||||
background-color: $list-md-background-color;
|
||||
box-shadow: none;
|
||||
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 2px;
|
||||
@ -82,18 +62,26 @@ ion-note {
|
||||
}
|
||||
}
|
||||
|
||||
.item.activated {
|
||||
background-color: $list-md-activated-background-color;
|
||||
}
|
||||
|
||||
.item[no-lines] {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.item-inner {
|
||||
border-bottom: 1px solid $item-md-border-color;
|
||||
padding-right: ($item-md-padding-right / 2);
|
||||
border-bottom: 1px solid $list-md-border-color;
|
||||
}
|
||||
|
||||
ion-item-content {
|
||||
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
|
||||
}
|
||||
|
||||
button.item.activated {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Material Design Item Media
|
||||
// --------------------------------------------------
|
||||
|
||||
[item-left],
|
||||
[item-right] {
|
||||
@ -103,8 +91,8 @@ button.item.activated {
|
||||
icon[item-left],
|
||||
icon[item-right] {
|
||||
margin-top: $item-md-padding-icon-top;
|
||||
margin-left: 0;
|
||||
margin-bottom: $item-md-padding-icon-bottom;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
button[item-left],
|
||||
@ -116,10 +104,10 @@ button[item-right],
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
[item-left].icon-only,
|
||||
[item-right].icon-only,
|
||||
[item-left].icon-only icon,
|
||||
[item-right].icon-only icon {
|
||||
[item-left].button-icon-only,
|
||||
[item-right].button-icon-only,
|
||||
[item-left].button-icon-only icon,
|
||||
[item-right].button-icon-only icon {
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
@ -130,8 +118,8 @@ button[item-right],
|
||||
|
||||
[item-left].icon-left icon,
|
||||
[item-right].icon-left icon {
|
||||
margin-left: 0;
|
||||
margin-bottom: 1px;
|
||||
margin-left: 0;
|
||||
padding-right: 0.3em;
|
||||
}
|
||||
|
||||
@ -147,7 +135,7 @@ button[item-right],
|
||||
}
|
||||
|
||||
icon[item-left] + .item-inner,
|
||||
icon[item-left] + [text-input] {
|
||||
icon[item-left] + .item-input {
|
||||
margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
|
||||
}
|
||||
|
||||
@ -182,19 +170,24 @@ ion-thumbnail {
|
||||
}
|
||||
}
|
||||
|
||||
.item,
|
||||
a.item,
|
||||
button.item {
|
||||
transition: background-color $button-md-transition-duration $button-md-animation-curve, transform 300ms;
|
||||
ion-note {
|
||||
color: $item-md-note-color;
|
||||
}
|
||||
|
||||
.item.activated,
|
||||
a.item.activated,
|
||||
button.item.activated {
|
||||
background-color: $item-md-activated-background-color;
|
||||
box-shadow: none;
|
||||
|
||||
// Material Design Item Divider
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-item-divider {
|
||||
padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
|
||||
background-color: $item-md-divider-bg;
|
||||
color: $item-md-divider-color;
|
||||
}
|
||||
|
||||
.item[no-lines] {
|
||||
border-width: 0;
|
||||
|
||||
// Material Design Item Sliding
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-item-sliding {
|
||||
background-color: $item-md-sliding-content-bg;
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<ion-navbar *navbar>
|
||||
<ion-title>Item Groups</ion-title>
|
||||
<ion-nav-items secondary>
|
||||
<ion-buttons end>
|
||||
<button (click)="reload()">Reload</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
|
||||
@ -59,12 +59,12 @@
|
||||
|
||||
<button ion-item>
|
||||
Red Balloons
|
||||
<item-badge item-right>99</item-badge>
|
||||
<ion-badge item-right>99</ion-badge>
|
||||
</button>
|
||||
|
||||
<ion-item>
|
||||
Problems
|
||||
<item-badge item-right>99</item-badge>
|
||||
<ion-badge item-right>99</ion-badge>
|
||||
</ion-item>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<ion-toolbar>
|
||||
<ion-title>Sliding Items</ion-title>
|
||||
<ion-nav-items secondary>
|
||||
<ion-buttons end>
|
||||
<button (click)="reload()">Reload</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content>
|
||||
@ -35,8 +35,8 @@
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding text-wrap detail-push *ng-if="shouldShow" #item>
|
||||
<ion-item>
|
||||
<ion-item-sliding *ng-if="shouldShow" #item>
|
||||
<ion-item text-wrap detail-push>
|
||||
<h3>Ben Sperry</h3>
|
||||
<p>
|
||||
I like paper
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// List
|
||||
// --------------------------------------------------
|
||||
@ -20,8 +20,4 @@ ion-list {
|
||||
ion-list[inset] {
|
||||
overflow: hidden;
|
||||
transform: translateZ(0);
|
||||
|
||||
ion-list-header {
|
||||
background-color: $list-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,8 +39,8 @@ export class List extends Ion {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onInit() {
|
||||
super.onInit();
|
||||
ngOnInit() {
|
||||
super.ngOnInit();
|
||||
|
||||
if (util.isDefined(this.virtual)) {
|
||||
console.log('Content', this.content);
|
||||
@ -53,7 +53,7 @@ export class List extends Ion {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onDestroy() {
|
||||
ngOnDestroy() {
|
||||
this.ele = null;
|
||||
this.slidingGesture && this.slidingGesture.unlisten();
|
||||
}
|
||||
@ -104,7 +104,7 @@ export class List extends Ion {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
afterViewInit() {
|
||||
ngAfterViewInit() {
|
||||
this._init = true;
|
||||
if (this._enableSliding) {
|
||||
this.enableSlidingItems(true);
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.ios";
|
||||
@import "../list";
|
||||
|
||||
// iOS List
|
||||
// --------------------------------------------------
|
||||
@ -20,8 +21,6 @@ $list-ios-header-font-weight: 500 !default;
|
||||
$list-ios-header-letter-spacing: 0.1rem !default;
|
||||
$list-ios-header-color: #333 !default;
|
||||
|
||||
$list-ios-border-color: $list-border-color !default;
|
||||
|
||||
|
||||
/****************/
|
||||
/* DEFAULT LIST */
|
||||
@ -135,6 +134,10 @@ ion-list[inset] {
|
||||
margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left;
|
||||
border-radius: $list-inset-ios-border-radius;
|
||||
|
||||
ion-list-header {
|
||||
background-color: $list-ios-background-color;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-bottom: 1px solid $list-ios-border-color;
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "../../../ionic.globals";
|
||||
@import "../../../globals.md";
|
||||
@import "../list";
|
||||
|
||||
// Material Design List
|
||||
// --------------------------------------------------
|
||||
@ -18,8 +19,6 @@ $list-md-header-padding: 16px $item-md-padding-right 16px $item-md-paddi
|
||||
$list-md-header-font-size: 1.4rem !default;
|
||||
$list-md-header-color: #858585 !default;
|
||||
|
||||
$list-md-border-color: $item-md-border-color !default;
|
||||
|
||||
|
||||
/****************/
|
||||
/* DEFAULT LIST */
|
||||
@ -129,6 +128,10 @@ ion-list[inset] {
|
||||
+ ion-list[inset] {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ion-list-header {
|
||||
background-color: $list-md-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -34,6 +34,11 @@ export class MenuToggle extends Ion {
|
||||
this.app = app;
|
||||
this.viewCtrl = viewCtrl;
|
||||
this.withinNavbar = !!navbar;
|
||||
|
||||
// Deprecation warning
|
||||
if (this.withinNavbar && elementRef.nativeElement.tagName === 'A') {
|
||||
console.warn('Menu toggles within a navbar should use <button menu-toggle> instead of <a toggle>')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,50 +0,0 @@
|
||||
@import "../../ionic.globals";
|
||||
|
||||
// Menu Reveal
|
||||
// --------------------------------------------------
|
||||
// The content slides over to reveal the menu underneath.
|
||||
// The menu itself, which is under the content, does not move.
|
||||
|
||||
ion-menu[type=reveal].show-menu {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.menu-content-reveal {
|
||||
box-shadow: $menu-shadow;
|
||||
}
|
||||
|
||||
.menu-content-push {
|
||||
box-shadow: $menu-shadow;
|
||||
}
|
||||
|
||||
|
||||
// Menu Overlay
|
||||
// --------------------------------------------------
|
||||
// The menu slides over the content. The content
|
||||
// itself, which is under the menu, does not move.
|
||||
|
||||
ion-menu[type=overlay] {
|
||||
z-index: $z-index-menu-overlay;
|
||||
box-shadow: $menu-shadow;
|
||||
left: -8px; // make up for the box-shadow hanging over on the left
|
||||
|
||||
backdrop {
|
||||
display: block;
|
||||
transform: translate3d(-9999px, 0px, 0px);
|
||||
opacity: 0.01;
|
||||
left: -3000px;
|
||||
width: 6000px;
|
||||
|
||||
&.show-backdrop {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-menu[type=overlay][side=right] {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
ion-menu[type=push][side=right] {
|
||||
left: 0px;
|
||||
}
|
||||
@ -67,7 +67,7 @@ export class MenuType {
|
||||
return promise;
|
||||
}
|
||||
|
||||
onDestroy() {
|
||||
ngOnDestroy() {
|
||||
this.open && this.open.dispose();
|
||||
this.close && this.close.dispose();
|
||||
this.seek && this.seek.dispose();
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// Menu
|
||||
// --------------------------------------------------
|
||||
@ -6,9 +6,6 @@
|
||||
$menu-width: 304px !default;
|
||||
$menu-small-width: $menu-width - 40px !default;
|
||||
|
||||
$menu-background: $background-color !default;
|
||||
$menu-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) !default;
|
||||
|
||||
|
||||
ion-menu {
|
||||
position: absolute;
|
||||
@ -22,8 +19,6 @@ ion-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background: $menu-background;
|
||||
|
||||
transform: translate3d(-9999px, 0px, 0px);
|
||||
}
|
||||
|
||||
@ -32,7 +27,7 @@ ion-menu[side=right] {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
ion-menu backdrop {
|
||||
ion-menu .backdrop {
|
||||
z-index: -1;
|
||||
display: none;
|
||||
}
|
||||
@ -57,3 +52,44 @@ ion-menu backdrop {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Menu Reveal
|
||||
// --------------------------------------------------
|
||||
// The content slides over to reveal the menu underneath.
|
||||
// The menu itself, which is under the content, does not move.
|
||||
|
||||
ion-menu[type=reveal].show-menu {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
|
||||
// Menu Overlay
|
||||
// --------------------------------------------------
|
||||
// The menu slides over the content. The content
|
||||
// itself, which is under the menu, does not move.
|
||||
|
||||
ion-menu[type=overlay] {
|
||||
z-index: $z-index-menu-overlay;
|
||||
left: -8px; // make up for the box-shadow hanging over on the left
|
||||
|
||||
.backdrop {
|
||||
display: block;
|
||||
transform: translate3d(-9999px, 0px, 0px);
|
||||
opacity: 0.01;
|
||||
left: -3000px;
|
||||
width: 6000px;
|
||||
|
||||
&.show-backdrop {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-menu[type=overlay][side=right] {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
ion-menu[type=push][side=right] {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@ -66,7 +66,7 @@ import * as gestures from './menu-gestures';
|
||||
'[attr.side]': 'side',
|
||||
'[attr.type]': 'type'
|
||||
},
|
||||
template: '<ng-content></ng-content><backdrop tappable disable-activated></backdrop>',
|
||||
template: '<ng-content></ng-content><div tappable disable-activated class="backdrop"></div>',
|
||||
directives: [forwardRef(() => MenuBackdrop)]
|
||||
})
|
||||
export class Menu extends Ion {
|
||||
@ -92,8 +92,8 @@ export class Menu extends Ion {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onInit() {
|
||||
super.onInit();
|
||||
ngOnInit() {
|
||||
super.ngOnInit();
|
||||
let self = this;
|
||||
|
||||
let content = self.content;
|
||||
@ -352,11 +352,11 @@ export class Menu extends Ion {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onDestroy() {
|
||||
ngOnDestroy() {
|
||||
this.app.unregister(this.id);
|
||||
this._gesture && this._gesture.destroy();
|
||||
this._targetGesture && this._targetGesture.destroy();
|
||||
this._type && this._type.onDestroy();
|
||||
this._type && this._type.ngOnDestroy();
|
||||
this._cntEle = null;
|
||||
}
|
||||
|
||||
@ -366,7 +366,7 @@ let menuTypes = {};
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: 'backdrop',
|
||||
selector: '.backdrop',
|
||||
host: {
|
||||
'(click)': 'clicked($event)'
|
||||
}
|
||||
|
||||
24
ionic/components/menu/modes/ios.scss
Normal file
24
ionic/components/menu/modes/ios.scss
Normal file
@ -0,0 +1,24 @@
|
||||
@import "../../../globals.ios";
|
||||
|
||||
// iOS Menu
|
||||
// --------------------------------------------------
|
||||
|
||||
$menu-ios-background: $background-ios-color !default;
|
||||
$menu-ios-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) !default;
|
||||
|
||||
|
||||
ion-menu {
|
||||
background: $menu-ios-background;
|
||||
}
|
||||
|
||||
.menu-content-reveal {
|
||||
box-shadow: $menu-ios-shadow;
|
||||
}
|
||||
|
||||
.menu-content-push {
|
||||
box-shadow: $menu-ios-shadow;
|
||||
}
|
||||
|
||||
ion-menu[type=overlay] {
|
||||
box-shadow: $menu-ios-shadow;
|
||||
}
|
||||
24
ionic/components/menu/modes/md.scss
Normal file
24
ionic/components/menu/modes/md.scss
Normal file
@ -0,0 +1,24 @@
|
||||
@import "../../../globals.md";
|
||||
|
||||
// Material Design Menu
|
||||
// --------------------------------------------------
|
||||
|
||||
$menu-md-background: $background-md-color !default;
|
||||
$menu-md-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) !default;
|
||||
|
||||
|
||||
ion-menu {
|
||||
background: $menu-md-background;
|
||||
}
|
||||
|
||||
.menu-content-reveal {
|
||||
box-shadow: $menu-md-shadow;
|
||||
}
|
||||
|
||||
.menu-content-push {
|
||||
box-shadow: $menu-md-shadow;
|
||||
}
|
||||
|
||||
ion-menu[type=overlay] {
|
||||
box-shadow: $menu-md-shadow;
|
||||
}
|
||||
@ -1,29 +1,29 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Menu
|
||||
</ion-title>
|
||||
|
||||
<ion-nav-items secondary>
|
||||
<ion-buttons end>
|
||||
<button>
|
||||
<icon football></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-nav-items primary>
|
||||
<ion-buttons start>
|
||||
<button>
|
||||
<icon baseball></icon>
|
||||
</button>
|
||||
</ion-nav-items>
|
||||
</ion-buttons>
|
||||
|
||||
<a menu-toggle="rightMenu" secondary>
|
||||
<button menu-toggle="rightMenu" right secondary>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Menu
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
Menu
|
||||
</ion-title>
|
||||
|
||||
<a menu-toggle="rightMenu" secondary>
|
||||
<button menu-toggle="rightMenu" right>
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
</ion-navbar>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
<a [menu-toggle]="activeMenu">
|
||||
<button [menu-toggle]="activeMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
<ion-title>
|
||||
Multiple Menus
|
||||
</ion-title>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Overlay Menu
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Push Menu
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<a menu-toggle="leftMenu">
|
||||
<button menu-toggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<ion-title>
|
||||
Reveal Menu
|
||||
|
||||
@ -1,13 +1,9 @@
|
||||
@import "../../ionic.globals";
|
||||
@import "../../globals.core";
|
||||
|
||||
// Modals
|
||||
// --------------------------------------------------
|
||||
|
||||
$modal-background-color: $background-color !default;
|
||||
|
||||
|
||||
ion-page.modal {
|
||||
background-color: $modal-background-color;
|
||||
z-index: $z-index-overlay;
|
||||
|
||||
// hidden by default to prevent flickers, the animation will show it
|
||||
|
||||
11
ionic/components/modal/modes/ios.scss
Normal file
11
ionic/components/modal/modes/ios.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@import "../../../globals.ios";
|
||||
|
||||
// iOS Modals
|
||||
// --------------------------------------------------
|
||||
|
||||
$modal-ios-background-color: $background-ios-color !default;
|
||||
|
||||
|
||||
ion-page.modal {
|
||||
background-color: $modal-ios-background-color;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user