' +
'
' +
'
' +
'
{{d.titleText}}
' +
- '
' +
- '' +
+ ' ' +
- '' +
- ' ' +
+ '' +
+ ' ' +
' ' +
- '
' +
- '
' +
- ' ' +
+ '
' +
+ '' +
+ ' ' +
'
' +
'
' +
- '',
+ '
',
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%');
diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss
index bbce0a734e..dab7f7bc58 100644
--- a/ionic/components/action-sheet/modes/ios.scss
+++ b/ionic/components/action-sheet/modes/ios.scss
@@ -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;
-}
diff --git a/ionic/components/action-sheet/modes/md.scss b/ionic/components/action-sheet/modes/md.scss
index 1680d4afc9..2666d32804 100644
--- a/ionic/components/action-sheet/modes/md.scss
+++ b/ionic/components/action-sheet/modes/md.scss
@@ -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;
}
}
diff --git a/ionic/components/action-sheet/test/basic/e2e.ts b/ionic/components/action-sheet/test/basic/e2e.ts
index 40d0efab03..cffef5a0be 100644
--- a/ionic/components/action-sheet/test/basic/e2e.ts
+++ b/ionic/components/action-sheet/test/basic/e2e.ts
@@ -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();
});
diff --git a/ionic/components/app/id.ts b/ionic/components/app/id.ts
index d5c5879e72..c89f3f1f5e 100644
--- a/ionic/components/app/id.ts
+++ b/ionic/components/app/id.ts
@@ -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, '');
}
}
diff --git a/ionic/components/app/modes/ios.scss b/ionic/components/app/modes/ios.scss
index 1b4d4174f3..d022bfca8e 100644
--- a/ionic/components/app/modes/ios.scss
+++ b/ionic/components/app/modes/ios.scss
@@ -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;
+ }
+ }
+}
diff --git a/ionic/components/app/modes/md.scss b/ionic/components/app/modes/md.scss
index cd561d27e4..058c7d4e57 100644
--- a/ionic/components/app/modes/md.scss
+++ b/ionic/components/app/modes/md.scss
@@ -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;
+ }
+ }
+}
diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss
index a5864f7fbb..1e2ac8e403 100644
--- a/ionic/components/app/normalize.scss
+++ b/ionic/components/app/normalize.scss
@@ -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] {
diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss
index 286cc13a77..43f07a7184 100644
--- a/ionic/components/app/structure.scss
+++ b/ionic/components/app/structure.scss
@@ -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] {
diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss
index c314a8dfda..b6ef131a17 100644
--- a/ionic/components/app/typography.scss
+++ b/ionic/components/app/typography.scss
@@ -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 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;
- }
- }
-}
diff --git a/ionic/components/badge/badge.scss b/ionic/components/badge/badge.scss
index b793f186d7..24da8e84f2 100644
--- a/ionic/components/badge/badge.scss
+++ b/ionic/components/badge/badge.scss
@@ -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);
+ }
+
+}
diff --git a/ionic/components/badge/modes/ios.scss b/ionic/components/badge/modes/ios.scss
new file mode 100644
index 0000000000..a369cb4015
--- /dev/null
+++ b/ionic/components/badge/modes/ios.scss
@@ -0,0 +1,11 @@
+@import "../badge";
+
+// iOS Badge
+// --------------------------------------------------
+
+$badge-ios-border-radius: 10px !default;
+
+
+ion-badge {
+ border-radius: $badge-ios-border-radius;
+}
diff --git a/ionic/components/badge/modes/md.scss b/ionic/components/badge/modes/md.scss
new file mode 100644
index 0000000000..4156b406f2
--- /dev/null
+++ b/ionic/components/badge/modes/md.scss
@@ -0,0 +1,11 @@
+@import "../badge";
+
+// Material Design Badge
+// --------------------------------------------------
+
+$badge-md-border-radius: 4px !default;
+
+
+ion-badge {
+ border-radius: $badge-md-border-radius;
+}
diff --git a/ionic/components/badge/test/basic/index.ts b/ionic/components/badge/test/basic/index.ts
new file mode 100644
index 0000000000..2dd534c468
--- /dev/null
+++ b/ionic/components/badge/test/basic/index.ts
@@ -0,0 +1,10 @@
+import {App, IonicApp} from 'ionic/ionic';
+
+
+@App({
+ templateUrl: 'main.html'
+})
+class E2EApp {
+ constructor(app: IonicApp) {
+ }
+}
diff --git a/ionic/components/badge/test/basic/main.html b/ionic/components/badge/test/basic/main.html
new file mode 100644
index 0000000000..3a2f0cf16a
--- /dev/null
+++ b/ionic/components/badge/test/basic/main.html
@@ -0,0 +1,64 @@
+
+ Badges
+
+
+
+
+
+ Badges Right
+
+
+ Default Badge
+ 99
+
+
+ Primary Badge
+ 99
+
+
+ Secondary Badge
+ 99
+
+
+ Danger Badge
+ 99
+
+
+ Light Badge
+ 99
+
+
+ Dark Badge
+ 99
+
+
+
+
+ Badges Left
+
+
+ Default Badge
+ 99
+
+
+ Primary Badge
+ 99
+
+
+ Secondary Badge
+ 99
+
+
+ Danger Badge
+ 99
+
+
+ Light Badge
+ 99
+
+
+ Dark Badge
+ 99
+
+
+
diff --git a/ionic/components/button/button-clear.scss b/ionic/components/button/button-clear.scss
deleted file mode 100644
index 408b77cc41..0000000000
--- a/ionic/components/button/button-clear.scss
+++ /dev/null
@@ -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);
- }
- }
-
-}
diff --git a/ionic/components/button/button-fab.scss b/ionic/components/button/button-fab.scss
index 25859d08e7..eaa925c709 100644
--- a/ionic/components/button/button-fab.scss
+++ b/ionic/components/button/button-fab.scss
@@ -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;
+}
diff --git a/ionic/components/button/button-icon.scss b/ionic/components/button/button-icon.scss
index a29bd14fd3..4b6c2a057f 100644
--- a/ionic/components/button/button-icon.scss
+++ b/ionic/components/button/button-icon.scss
@@ -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;
- }
-
}
diff --git a/ionic/components/button/button-outline.scss b/ionic/components/button/button-outline.scss
deleted file mode 100644
index 0203fce104..0000000000
--- a/ionic/components/button/button-outline.scss
+++ /dev/null
@@ -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);
-
- }
-
-}
diff --git a/ionic/components/button/button-size.scss b/ionic/components/button/button-size.scss
deleted file mode 100644
index 3f68bd9844..0000000000
--- a/ionic/components/button/button-size.scss
+++ /dev/null
@@ -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;
- }
-
-}
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index e40c489e60..3a30935ded 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -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;
}
diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index 63c47a6ca9..37adca5541 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -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;
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index b8a5f1c3d4..37e1fc151a 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -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";
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index a519d05bc5..b5e55f8dc7 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -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";
diff --git a/ionic/components/button/test/button.spec.ts b/ionic/components/button/test/button.spec.ts
new file mode 100644
index 0000000000..333915c3d6
--- /dev/null
+++ b/ionic/components/button/test/button.spec.ts
@@ -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);
+ });
+
+}
diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss
index 9b7e726cfb..3b978ee45b 100644
--- a/ionic/components/card/card.scss
+++ b/ionic/components/card/card.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
// Card
// --------------------------------------------------
diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss
index 4b81564b87..a26627c934 100644
--- a/ionic/components/card/modes/ios.scss
+++ b/ionic/components/card/modes/ios.scss
@@ -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;
diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss
index 9a28e1eef6..9b61313270 100644
--- a/ionic/components/card/modes/md.scss
+++ b/ionic/components/card/modes/md.scss
@@ -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;
}
diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss
deleted file mode 100644
index 019ebc82b7..0000000000
--- a/ionic/components/checkbox/checkbox.scss
+++ /dev/null
@@ -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;
-}
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 17704a8b86..f640835c47 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -39,9 +39,9 @@ import {Form} from '../../util/form';
},
template:
'
' +
- '
' +
- ' ' +
+ '
' +
'
' +
' ' +
@@ -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);
}
}
diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss
index a0d45a1a9f..e604762cb2 100644
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/ionic/components/checkbox/modes/ios.scss
@@ -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);
}
diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss
index 41ea66feb3..1d280bff94 100644
--- a/ionic/components/checkbox/modes/md.scss
+++ b/ionic/components/checkbox/modes/md.scss
@@ -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);
-
}
diff --git a/ionic/components/checkbox/test/basic/e2e.ts b/ionic/components/checkbox/test/basic/e2e.ts
index 3518ab9d8e..38ebef5a81 100644
--- a/ionic/components/checkbox/test/basic/e2e.ts
+++ b/ionic/components/checkbox/test/basic/e2e.ts
@@ -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();
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index b34a99b90c..775e4af06a 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -28,6 +28,10 @@
secondary color
+
+ light color
+
+
diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts
index f95d9dd1fe..4f3cc7c4bb 100644
--- a/ionic/components/content/content.ts
+++ b/ionic/components/content/content.ts
@@ -49,8 +49,8 @@ export class Content extends Ion {
/**
* @private
*/
- onInit() {
- super.onInit();
+ ngOnInit() {
+ super.ngOnInit();
this.scrollElement = this.getNativeElement().children[0];
}
diff --git a/ionic/components/content/modes/ios.scss b/ionic/components/content/modes/ios.scss
index 1c4f165ff4..1d566f1d40 100644
--- a/ionic/components/content/modes/ios.scss
+++ b/ionic/components/content/modes/ios.scss
@@ -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,
diff --git a/ionic/components/content/modes/md.scss b/ionic/components/content/modes/md.scss
index 35f80f395f..ff3794d455 100644
--- a/ionic/components/content/modes/md.scss
+++ b/ionic/components/content/modes/md.scss
@@ -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;
diff --git a/ionic/components/grid/grid.scss b/ionic/components/grid/grid.scss
index d8e848beeb..7b85adff0d 100644
--- a/ionic/components/grid/grid.scss
+++ b/ionic/components/grid/grid.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
// Grid
// --------------------------------------------------
diff --git a/ionic/components/icon/icon.scss b/ionic/components/icon/icon.scss
index 2532821cf6..516dcf5ff2 100644
--- a/ionic/components/icon/icon.scss
+++ b/ionic/components/icon/icon.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
// Icon
// --------------------------------------------------
diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts
index 14a9b4b43c..44543c5c3b 100644
--- a/ionic/components/icon/icon.ts
+++ b/ionic/components/icon/icon.ts
@@ -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;
diff --git a/ionic/components/icon/modes/ios.scss b/ionic/components/icon/modes/ios.scss
deleted file mode 100644
index 32447b95a8..0000000000
--- a/ionic/components/icon/modes/ios.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import "../../../ionic.globals";
-
-// iOS Icon
-// --------------------------------------------------
-
-
-$icon-detail-push-background-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);
-}
diff --git a/ionic/components/ion.ts b/ionic/components/ion.ts
index 3ddb77f0ea..fc67620d11 100644
--- a/ionic/components/ion.ts
+++ b/ionic/components/ion.ts
@@ -14,7 +14,7 @@ export class Ion {
this.config = config;
}
- onInit() {
+ ngOnInit() {
let cls = this.constructor;
if (cls.defaultInputs && this.config) {
diff --git a/ionic/components/item/item-media.scss b/ionic/components/item/item-media.scss
index 70976886f0..c65f6aac5c 100644
--- a/ionic/components/item/item-media.scss
+++ b/ionic/components/item/item-media.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
// Item Media
// --------------------------------------------------
diff --git a/ionic/components/item/item-sliding.scss b/ionic/components/item/item-sliding.scss
index 61a6c6d3fa..11a56bf6a9 100644
--- a/ionic/components/item/item-sliding.scss
+++ b/ionic/components/item/item-sliding.scss
@@ -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 {
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index f48f77ca7a..4a77ca8f68 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -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";
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index bc3ca3d54c..309f2a19e6 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -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;
+}
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index 425f278248..d9b0042920 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -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;
}
diff --git a/ionic/components/item/test/groups/session-list.html b/ionic/components/item/test/groups/session-list.html
index 90113a9cbe..f32ba3a922 100644
--- a/ionic/components/item/test/groups/session-list.html
+++ b/ionic/components/item/test/groups/session-list.html
@@ -1,8 +1,8 @@
Item Groups
-
+
Reload
-
+
diff --git a/ionic/components/item/test/icons/main.html b/ionic/components/item/test/icons/main.html
index e98b67a447..facaaf4b36 100644
--- a/ionic/components/item/test/icons/main.html
+++ b/ionic/components/item/test/icons/main.html
@@ -59,12 +59,12 @@
Red Balloons
- 99
+ 99
Problems
- 99
+ 99
diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html
index f054413350..bbebd8d795 100644
--- a/ionic/components/item/test/sliding/main.html
+++ b/ionic/components/item/test/sliding/main.html
@@ -1,8 +1,8 @@
Sliding Items
-
+
Reload
-
+
@@ -35,8 +35,8 @@
-
-
+
+
Ben Sperry
I like paper
diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss
index 53b922e553..147dd359b0 100644
--- a/ionic/components/list/list.scss
+++ b/ionic/components/list/list.scss
@@ -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;
- }
}
diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts
index d5e932bac2..0189f0c2bd 100644
--- a/ionic/components/list/list.ts
+++ b/ionic/components/list/list.ts
@@ -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);
diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss
index 3a00901946..415b1af0d2 100644
--- a/ionic/components/list/modes/ios.scss
+++ b/ionic/components/list/modes/ios.scss
@@ -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;
diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss
index 174ad3b1b1..93ffcc7d5f 100644
--- a/ionic/components/list/modes/md.scss
+++ b/ionic/components/list/modes/md.scss
@@ -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;
+ }
}
diff --git a/ionic/components/menu/menu-toggle.ts b/ionic/components/menu/menu-toggle.ts
index 6f1fdb3e35..2bdfdfe4a6 100644
--- a/ionic/components/menu/menu-toggle.ts
+++ b/ionic/components/menu/menu-toggle.ts
@@ -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 instead of ')
+ }
}
/**
diff --git a/ionic/components/menu/menu-types.scss b/ionic/components/menu/menu-types.scss
deleted file mode 100644
index ca9dab6504..0000000000
--- a/ionic/components/menu/menu-types.scss
+++ /dev/null
@@ -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;
-}
diff --git a/ionic/components/menu/menu-types.ts b/ionic/components/menu/menu-types.ts
index db1e7614a4..6396604c32 100644
--- a/ionic/components/menu/menu-types.ts
+++ b/ionic/components/menu/menu-types.ts
@@ -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();
diff --git a/ionic/components/menu/menu.scss b/ionic/components/menu/menu.scss
index acf4948532..234d22916e 100644
--- a/ionic/components/menu/menu.scss
+++ b/ionic/components/menu/menu.scss
@@ -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;
+}
diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts
index 39fc69c370..19d6809866 100644
--- a/ionic/components/menu/menu.ts
+++ b/ionic/components/menu/menu.ts
@@ -66,7 +66,7 @@ import * as gestures from './menu-gestures';
'[attr.side]': 'side',
'[attr.type]': 'type'
},
- template: '
',
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)'
}
diff --git a/ionic/components/menu/modes/ios.scss b/ionic/components/menu/modes/ios.scss
new file mode 100644
index 0000000000..d49a000483
--- /dev/null
+++ b/ionic/components/menu/modes/ios.scss
@@ -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;
+}
diff --git a/ionic/components/menu/modes/md.scss b/ionic/components/menu/modes/md.scss
new file mode 100644
index 0000000000..cf1b68d53e
--- /dev/null
+++ b/ionic/components/menu/modes/md.scss
@@ -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;
+}
diff --git a/ionic/components/menu/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html
index c00cafabf4..f8f5b40f8a 100644
--- a/ionic/components/menu/test/basic/page1.html
+++ b/ionic/components/menu/test/basic/page1.html
@@ -1,29 +1,29 @@
-
+
+
Menu
-
+
-
+
-
+
-
+
-
+
+
diff --git a/ionic/components/menu/test/basic/page2.html b/ionic/components/menu/test/basic/page2.html
index 098f3e147b..66415e066b 100644
--- a/ionic/components/menu/test/basic/page2.html
+++ b/ionic/components/menu/test/basic/page2.html
@@ -1,9 +1,9 @@
-
+
+
Menu
diff --git a/ionic/components/menu/test/basic/page3.html b/ionic/components/menu/test/basic/page3.html
index 4b67473c14..cfcda473c2 100644
--- a/ionic/components/menu/test/basic/page3.html
+++ b/ionic/components/menu/test/basic/page3.html
@@ -5,9 +5,9 @@
Menu
-
+
+
diff --git a/ionic/components/menu/test/multiple/page1.html b/ionic/components/menu/test/multiple/page1.html
index a8e989f07c..d6cb252a13 100644
--- a/ionic/components/menu/test/multiple/page1.html
+++ b/ionic/components/menu/test/multiple/page1.html
@@ -1,8 +1,8 @@
-
+
+
Multiple Menus
diff --git a/ionic/components/menu/test/overlay/page1.html b/ionic/components/menu/test/overlay/page1.html
index 19b06004ae..99eb7dacf7 100644
--- a/ionic/components/menu/test/overlay/page1.html
+++ b/ionic/components/menu/test/overlay/page1.html
@@ -1,9 +1,9 @@
-
+
+
Overlay Menu
diff --git a/ionic/components/menu/test/push/page1.html b/ionic/components/menu/test/push/page1.html
index fb8ffbadd8..cbac02c561 100644
--- a/ionic/components/menu/test/push/page1.html
+++ b/ionic/components/menu/test/push/page1.html
@@ -1,9 +1,9 @@
-
+
+
Push Menu
diff --git a/ionic/components/menu/test/reveal/page1.html b/ionic/components/menu/test/reveal/page1.html
index 6e4f46b80a..fb6bab465a 100644
--- a/ionic/components/menu/test/reveal/page1.html
+++ b/ionic/components/menu/test/reveal/page1.html
@@ -1,9 +1,9 @@
-
+
+
Reveal Menu
diff --git a/ionic/components/modal/modal.scss b/ionic/components/modal/modal.scss
index 5d4f61c0da..cdf777bce8 100644
--- a/ionic/components/modal/modal.scss
+++ b/ionic/components/modal/modal.scss
@@ -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
diff --git a/ionic/components/modal/modes/ios.scss b/ionic/components/modal/modes/ios.scss
new file mode 100644
index 0000000000..45c341c13f
--- /dev/null
+++ b/ionic/components/modal/modes/ios.scss
@@ -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;
+}
diff --git a/ionic/components/modal/modes/md.scss b/ionic/components/modal/modes/md.scss
new file mode 100644
index 0000000000..fd099ec018
--- /dev/null
+++ b/ionic/components/modal/modes/md.scss
@@ -0,0 +1,11 @@
+@import "../../../globals.md";
+
+// Material Design Modals
+// --------------------------------------------------
+
+$modal-md-background-color: $background-md-color !default;
+
+
+ion-page.modal {
+ background-color: $modal-md-background-color;
+}
diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts
index f5efcbf1f5..820832e1eb 100644
--- a/ionic/components/modal/test/basic/index.ts
+++ b/ionic/components/modal/test/basic/index.ts
@@ -141,9 +141,9 @@ class ContactUs {
template: `
First Page Header
-
+
-
+
diff --git a/ionic/components/nav/nav-router.ts b/ionic/components/nav/nav-router.ts
index fe7d0385bd..a7c17beac1 100644
--- a/ionic/components/nav/nav-router.ts
+++ b/ionic/components/nav/nav-router.ts
@@ -84,8 +84,8 @@ export class NavRouter extends RouterOutlet {
// generate a componentInstruction from the view's PathRecognizer and params
let componentInstruction = pathRecognizer.generate(viewCtrl.params.data);
- // create an Instruction from the componentInstruction
- let instruction = new Instruction(componentInstruction, null);
+ // create a ResolvedInstruction from the componentInstruction
+ let instruction = new ResolvedInstruction(componentInstruction, null);
this._parentRouter.navigateByInstruction(instruction);
}
@@ -113,3 +113,16 @@ export class NavRouter extends RouterOutlet {
}
}
+
+// TODO: hacked from
+// https://github.com/angular/angular/blob/6ddfff5cd59aac9099aa6da5118c5598eea7ea11/modules/angular2/src/router/instruction.ts#L207
+class ResolvedInstruction extends Instruction {
+ constructor(public component: ComponentInstruction, public child: Instruction,
+ public auxInstruction: {[key: string]: Instruction}) {
+ super();
+ }
+
+ resolveComponent(): Promise {
+ return Promise.resolve(this.component);
+ }
+}
diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts
index 110922a74e..94ae9a877d 100644
--- a/ionic/components/nav/nav.ts
+++ b/ionic/components/nav/nav.ts
@@ -136,8 +136,8 @@ export class Nav extends NavController {
/**
* @private
*/
- onInit() {
- super.onInit();
+ ngOnInit() {
+ super.ngOnInit();
if (this.root) {
if (typeof this.root !== 'function') {
diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts
index de9ed10bc1..4352bc6bc0 100644
--- a/ionic/components/nav/test/basic/index.ts
+++ b/ionic/components/nav/test/basic/index.ts
@@ -16,12 +16,12 @@ class MyCmpTest{}
template: `
{{title}}
-
+
-
+
+
S1
-
+
diff --git a/ionic/components/nav/test/nested/index.ts b/ionic/components/nav/test/nested/index.ts
index 59de5949d7..935897f4b2 100644
--- a/ionic/components/nav/test/nested/index.ts
+++ b/ionic/components/nav/test/nested/index.ts
@@ -75,9 +75,9 @@ export class Account {
@Page({
template: `
-
+
+
Account Dashboard
@@ -106,9 +106,9 @@ export class Dashboard {
@Page({
template: `
-
+
+
Account Profile
diff --git a/ionic/components/nav/test/routing/view1.html b/ionic/components/nav/test/routing/view1.html
index b48af356a4..39789c8de6 100644
--- a/ionic/components/nav/test/routing/view1.html
+++ b/ionic/components/nav/test/routing/view1.html
@@ -1,8 +1,8 @@
-
+
+
First View
diff --git a/ionic/components/nav/test/routing/view2.html b/ionic/components/nav/test/routing/view2.html
index 3cd2b1d7e5..3ee8d3f3df 100644
--- a/ionic/components/nav/test/routing/view2.html
+++ b/ionic/components/nav/test/routing/view2.html
@@ -1,11 +1,11 @@
Second View
-
+
-
+
diff --git a/ionic/components/navbar/modes/ios.scss b/ionic/components/navbar/modes/ios.scss
deleted file mode 100644
index 4a7fe89e62..0000000000
--- a/ionic/components/navbar/modes/ios.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import "../../../ionic.globals";
-
-// iOS Navbar
-// --------------------------------------------------
-
-$navbar-ios-height: 4.4rem !default;
-
-
-ion-navbar-section {
- min-height: $navbar-ios-height;
-}
-
-.back-button {
- transform: translateZ(0px);
-}
diff --git a/ionic/components/navbar/modes/md.scss b/ionic/components/navbar/modes/md.scss
deleted file mode 100644
index a89b786858..0000000000
--- a/ionic/components/navbar/modes/md.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import "../../../ionic.globals";
-
-// Material Design Navbar
-// --------------------------------------------------
-
-$navbar-md-height: 5.6rem !default;
-
-
-ion-navbar-section {
- min-height: $navbar-md-height;
-}
-
-.toolbar .back-button {
- margin: 0 0 0 12px;
- box-shadow: none;
-}
-
-.toolbar .back-button-icon {
- margin: 0;
- min-width: 44px;
- font-size: 2.4rem;
- font-weight: normal;
- text-align: left;
-}
diff --git a/ionic/components/navbar/navbar.scss b/ionic/components/navbar/navbar.scss
deleted file mode 100644
index 07bd13bc53..0000000000
--- a/ionic/components/navbar/navbar.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import "../../ionic.globals";
-
-// Navbar
-// --------------------------------------------------
-
-
-ion-navbar.toolbar {
- display: flex;
-}
-
-.back-button {
- order: map-get($toolbar-order, backButton);
-
- display: none;
- &.show-back-button {
- display: flex;
- }
-}
-
-.back-button-text {
- display: flex;
- align-items: center;
-}
diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts
index dabe77ab62..517ff91d72 100644
--- a/ionic/components/navbar/navbar.ts
+++ b/ionic/components/navbar/navbar.ts
@@ -49,7 +49,7 @@ class BackButtonText {
@Directive({
- selector: 'toolbar-background'
+ selector: '.toolbar-background'
})
class ToolbarBackground {
constructor(
@@ -64,26 +64,25 @@ class ToolbarBackground {
@Component({
selector: 'ion-navbar',
template:
- '' +
+ '
' +
+ '' +
'' +
'{{bbText}} ' +
' ' +
' ' +
- '' +
+ '' +
'
',
host: {
'[hidden]': '_hidden',
'class': 'toolbar'
},
inputs: [
- 'hideBackButton',
- 'navbarStyle'
+ 'hideBackButton'
],
directives: [BackButton, BackButtonText, Icon, ToolbarBackground]
})
@@ -100,11 +99,6 @@ export class Navbar extends ToolbarBase {
this.app = app;
this.renderer = renderer;
- let navbarStyle = config.get('navbarStyle');
- if (navbarStyle) {
- renderer.setElementAttribute(elementRef, navbarStyle, '');
- }
-
viewCtrl && viewCtrl.setNavbar(this);
this.bbIcon = config.get('backButtonIcon');
@@ -114,16 +108,12 @@ export class Navbar extends ToolbarBase {
/**
* @private
*/
- onInit() {
- super.onInit();
+ ngOnInit() {
+ super.ngOnInit();
let hideBackButton = this.hideBackButton;
if (typeof hideBackButton === 'string') {
this.hideBackButton = (hideBackButton === '' || hideBackButton === 'true');
}
-
- if (this.navbarStyle) {
- this.renderer.setElementAttribute(this.elementRef, this.navbarStyle, '');
- }
}
/**
diff --git a/ionic/components/popup/modes/ios.scss b/ionic/components/popup/modes/ios.scss
index 1d5dc5a112..f3cad9cbb5 100644
--- a/ionic/components/popup/modes/ios.scss
+++ b/ionic/components/popup/modes/ios.scss
@@ -1,4 +1,5 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
+@import "../popup";
// iOS Popups
// --------------------------------------------------
@@ -8,14 +9,22 @@ $popup-ios-background: rgba(0,0,0,0) !default;
$popup-ios-border-radius: 13px !default;
$popup-ios-background-color: #f8f8f8 !default;
+$popup-ios-head-padding: 12px 16px 20px !default;
$popup-ios-head-text-align: center !default;
+
+$popup-ios-title-margin-top: 12px !default;
+$popup-ios-title-font-weight: bold !default;
$popup-ios-title-font-size: 17px !default;
$popup-ios-sub-title-font-size: 14px !default;
$popup-ios-sub-title-text-color: #666 !default;
+
+$popup-ios-body-padding: 0px 16px 24px !default;
$popup-ios-body-text-color: inherit !default;
$popup-ios-body-text-align: center !default;
$popup-ios-body-font-size: 13px !default;
+$popup-ios-prompt-input-padding: 6px !default;
+$popup-ios-prompt-input-margin-top: 24px !default;
$popup-ios-prompt-input-background-color: #fff !default;
$popup-ios-prompt-input-border: 1px solid #ccc !default;
$popup-ios-prompt-input-border-radius: 4px !default;
@@ -28,23 +37,23 @@ $popup-ios-button-activated-background-color: #e9e9e9 !default;
ion-popup {
background: $popup-ios-background;
+}
- popup-wrapper {
- border-radius: $popup-ios-border-radius;
- background-color: $popup-ios-background-color;
- max-width: $popup-ios-max-width;
- overflow: hidden;
- }
+.popup-wrapper {
+ border-radius: $popup-ios-border-radius;
+ background-color: $popup-ios-background-color;
+ max-width: $popup-ios-max-width;
+ overflow: hidden;
}
.popup-head {
- padding: 12px 16px 20px;
+ padding: $popup-ios-head-padding;
text-align: $popup-ios-head-text-align;
}
.popup-title {
- margin-top: 12px;
- font-weight: bold;
+ margin-top: $popup-ios-title-margin-top;
+ font-weight: $popup-ios-title-font-weight;
font-size: $popup-ios-title-font-size;
}
@@ -54,15 +63,15 @@ ion-popup {
}
.popup-body {
- padding: 0px 16px 24px;
+ padding: $popup-ios-body-padding;
color: $popup-ios-body-text-color;
text-align: $popup-ios-body-text-align;
font-size: $popup-ios-body-font-size;
}
.prompt-input {
- padding: 6px;
- margin-top: 24px;
+ padding: $popup-ios-prompt-input-padding;
+ margin-top: $popup-ios-prompt-input-margin-top;
background-color: $popup-ios-prompt-input-background-color;
border: $popup-ios-prompt-input-border;
@@ -71,39 +80,37 @@ ion-popup {
}
.popup-buttons {
- button {
- @extend button[clear];
+ :last-child {
+ font-weight: bold;
+ border-right: 0;
+ }
+}
- margin: 0;
- flex: 1;
- border-radius: 0;
- font-size: $popup-ios-button-font-size;
- min-height: $popup-ios-button-min-height;
- border-right: 1px solid $popup-ios-button-border-color;
+.popup-button {
+ margin: 0;
+ flex: 1;
+ border-radius: 0;
+ font-size: $popup-ios-button-font-size;
+ min-height: $popup-ios-button-min-height;
+ border-right: 1px solid $popup-ios-button-border-color;
- &.activated {
- opacity: 1;
- background-color: $popup-ios-button-activated-background-color;
- }
+ &.activated {
+ opacity: 1;
+ background-color: $popup-ios-button-activated-background-color;
+ }
- &:hover:not(.disable-hover) {
- opacity: 1;
- }
+ &:hover:not(.disable-hover) {
+ opacity: 1;
+ }
- &:before {
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- border-top: 1px solid $popup-ios-button-border-color;
- content: '';
- pointer-events: none;
- }
-
- &:last-child {
- font-weight: bold;
- border-right: 0;
- }
+ &:before {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ border-top: 1px solid $popup-ios-button-border-color;
+ content: '';
+ pointer-events: none;
}
}
@@ -112,13 +119,11 @@ ion-popup {
border-width: 0.55px;
}
- .popup-buttons {
- button {
- border-right-width: 0.55px;
+ .popup-button {
+ border-right-width: 0.55px;
- &:before {
- border-top-width: 0.55px;
- }
+ &:before {
+ border-top-width: 0.55px;
}
}
}
diff --git a/ionic/components/popup/modes/md.scss b/ionic/components/popup/modes/md.scss
index 3fe71e26fc..901287bb23 100644
--- a/ionic/components/popup/modes/md.scss
+++ b/ionic/components/popup/modes/md.scss
@@ -1,4 +1,5 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
+@import "../popup";
// Material Design Popups
// --------------------------------------------------
@@ -9,33 +10,35 @@ $popup-md-background-color: #fafafa !default;
$popup-md-box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.4) !default;
$popup-md-head-text-align: left !default;
+$popup-md-head-padding: 24px 24px 10px 24px !default;
+
$popup-md-title-font-size: 20px !default;
$popup-md-sub-title-font-size: 15px !default;
-$popup-md-body-text-color: rgba(0,0,0,.5) !default;
-$popup-md-button-min-height: 36px !default;
+$popup-md-body-padding: 10px 24px 24px 24px !default;
+$popup-md-body-text-color: rgba(0,0,0,.5) !default;
$popup-md-prompt-input-border-color: #dedede !default;
$popup-md-prompt-input-text-color: #000000 !default;
-$popup-md-prompt-input-highlight-color: map-get($colors, primary) !default;
-$popup-md-prompt-input-placeholder-color: #b9b9b9 !default;
+$popup-md-prompt-input-highlight-color: map-get($colors-md, primary) !default;
$popup-md-prompt-input-margin-top: 5px !default;
$popup-md-prompt-input-margin-bottom: 5px !default;
+$popup-md-buttons-padding: 8px 8px 8px 24px !default;
+$popup-md-buttons-justify-content: flex-end !default;
-ion-popup {
- popup-wrapper {
- max-width: $popup-md-max-width;
- border-radius: $popup-md-border-radius;
- background-color: $popup-md-background-color;
- box-shadow: $popup-md-box-shadow;
- }
+.popup-wrapper {
+ max-width: $popup-md-max-width;
+ border-radius: $popup-md-border-radius;
+ background-color: $popup-md-background-color;
+
+ box-shadow: $popup-md-box-shadow;
}
.popup-head {
text-align: $popup-md-head-text-align;
- padding: 24px 24px 10px 24px;
+ padding: $popup-md-head-padding;
}
.popup-title {
@@ -47,7 +50,7 @@ ion-popup {
}
.popup-body {
- padding: 10px 24px 24px 24px;
+ padding: $popup-md-body-padding;
color: $popup-md-body-text-color;
}
@@ -63,16 +66,10 @@ ion-popup {
}
.popup-buttons {
- padding: 8px 8px 8px 24px;
- justify-content: flex-end;
-
- button {
- @extend button[clear];
-
- min-height: $popup-md-button-min-height;
-
- &.activated {
- opacity: 1;
- }
- }
+ padding: $popup-md-buttons-padding;
+ justify-content: $popup-md-buttons-justify-content;
+}
+
+.popup-button.activated {
+ opacity: 1;
}
diff --git a/ionic/components/popup/popup.scss b/ionic/components/popup/popup.scss
index e41d71095b..2ea36cfbbf 100644
--- a/ionic/components/popup/popup.scss
+++ b/ionic/components/popup/popup.scss
@@ -1,10 +1,9 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
// Popups
// --------------------------------------------------
$popup-min-width: 250px !default;
-$popup-max-width: 100% !default;
$popup-max-height: 90% !default;
$popup-button-line-height: 20px !default;
@@ -24,24 +23,23 @@ ion-popup {
justify-content: center;
align-items: center;
- popup-wrapper {
- z-index: $z-index-overlay-wrapper;
- min-width: $popup-min-width;
- max-width: $popup-max-width;
- max-height: $popup-max-height;
-
- display: flex;
- flex-direction: column;
-
- opacity: 0;
- }
-
input,
textarea {
width: 100%;
}
}
+.popup-wrapper {
+ z-index: $z-index-overlay-wrapper;
+ min-width: $popup-min-width;
+ max-height: $popup-max-height;
+
+ display: flex;
+ flex-direction: column;
+
+ opacity: 0;
+}
+
.popup-title {
margin: 0;
padding: 0;
@@ -56,7 +54,6 @@ ion-popup {
.popup-body {
overflow: auto;
- // TODO is this needed, it is never empty
&:empty {
padding: 0;
}
@@ -73,12 +70,12 @@ ion-popup {
.popup-buttons {
display: flex;
flex-direction: row;
-
- button {
- display: block;
- margin: 0;
- line-height: $popup-button-line-height;
- font-size: $popup-button-font-size;
- margin-right: $popup-button-margin-right;
- }
+}
+
+.popup-button {
+ display: block;
+ margin: 0;
+ line-height: $popup-button-line-height;
+ font-size: $popup-button-font-size;
+ margin-right: $popup-button-margin-right;
}
diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts
index 125197776e..351254b1df 100644
--- a/ionic/components/popup/popup.ts
+++ b/ionic/components/popup/popup.ts
@@ -270,8 +270,8 @@ const OVERLAY_TYPE = 'popup';
@Component({
selector: 'ion-popup',
template:
- '' +
+ '
' +
+ '',
host: {
'role': 'dialog'
},
@@ -300,7 +300,7 @@ class PopupCmp {
}
}
- onInit() {
+ ngOnInit() {
setTimeout(() => {
// TODO: make more better, no DOM BS
this.promptInput = this.elementRef.nativeElement.querySelector('input');
@@ -352,8 +352,8 @@ class PopupPopIn extends Animation {
super(null, opts);
let ele = enteringView.pageRef().nativeElement;
- let backdrop = new Animation(ele.querySelector('backdrop'));
- let wrapper = new Animation(ele.querySelector('popup-wrapper'));
+ let backdrop = new Animation(ele.querySelector('.backdrop'));
+ let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
backdrop.fromTo('opacity', '0.01', '0.3');
@@ -372,8 +372,8 @@ class PopupPopOut extends Animation {
super(null, opts);
let ele = leavingView.pageRef().nativeElement;
- let backdrop = new Animation(ele.querySelector('backdrop'));
- let wrapper = new Animation(ele.querySelector('popup-wrapper'));
+ let backdrop = new Animation(ele.querySelector('.backdrop'));
+ let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
backdrop.fromTo('opacity', '0.3', '0');
@@ -392,8 +392,8 @@ class PopupMdPopIn extends Animation {
super(null, opts);
let ele = enteringView.pageRef().nativeElement;
- let backdrop = new Animation(ele.querySelector('backdrop'));
- let wrapper = new Animation(ele.querySelector('popup-wrapper'));
+ let backdrop = new Animation(ele.querySelector('.backdrop'));
+ let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
backdrop.fromTo('opacity', '0.01', '0.5');
@@ -412,8 +412,8 @@ class PopupMdPopOut extends Animation {
super(null, opts);
let ele = leavingView.pageRef().nativeElement;
- let backdrop = new Animation(ele.querySelector('backdrop'));
- let wrapper = new Animation(ele.querySelector('popup-wrapper'));
+ let backdrop = new Animation(ele.querySelector('.backdrop'));
+ let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
backdrop.fromTo('opacity', '0.5', '0');
diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index 8ac6c73e1a..8663ad92fc 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -1,16 +1,32 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
// iOS Radio
// --------------------------------------------------
-$radio-ios-color-on: color(primary) !default;
+$radio-ios-color-on: map-get($colors-ios, primary) !default;
+
+$radio-ios-icon-width: 16px !default;
+$radio-ios-icon-height: 21px !default;
+$radio-ios-icon-border-width: 2px !default;
+$radio-ios-icon-border-style: solid !default;
+
+$radio-ios-disabled-text-color: $subdued-text-ios-color !default;
+$radio-ios-disabled-opacity: 0.5 !default;
ion-radio {
+ cursor: pointer;
+ @include user-select-none();
- &[aria-checked=true] radio-icon:after {
+ &[aria-checked=true] {
+ color: $radio-ios-color-on;
+ }
+
+ &[aria-checked=true] .radio-icon:after {
position: absolute;
- border: 2px solid $radio-ios-color-on;
+ border-width: $radio-ios-icon-border-width;
+ border-style: $radio-ios-icon-border-style;
+ border-color: $radio-ios-color-on;
top: 3px;
left: 7px;
width: 4px;
@@ -21,26 +37,28 @@ ion-radio {
transform: rotate(45deg);
}
- &[aria-checked=true] {
- color: $radio-ios-color-on;
- }
-
&.item.activated {
- background-color: $list-background-color;
+ background-color: $list-ios-background-color;
}
}
-media-radio {
+ion-radio[aria-disabled=true] {
+ color: $radio-ios-disabled-text-color;
+ opacity: $radio-ios-disabled-opacity;
+ pointer-events: none;
+}
+
+.radio-media {
display: block;
margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
}
-radio-icon {
+.radio-icon {
position: relative;
display: block;
- width: 16px;
- height: 21px;
+ width: $radio-ios-icon-width;
+ height: $radio-ios-icon-height;
}
@@ -51,7 +69,7 @@ radio-icon {
ion-radio[#{$color-name}] {
- &[aria-checked=true] radio-icon:after {
+ &[aria-checked=true] .radio-icon:after {
border-color: $color-value;
}
@@ -67,7 +85,7 @@ radio-icon {
// Generate iOS Radio Auxiliary Colors
// --------------------------------------------------
-@each $color-name, $color-value in auxiliary-colors() {
+@each $color-name, $color-value in $colors-ios {
@include radio-theme-ios($color-name, $color-value);
diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss
index 6da6f46c97..c22a3eed03 100644
--- a/ionic/components/radio/modes/md.scss
+++ b/ionic/components/radio/modes/md.scss
@@ -1,60 +1,76 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
// Material Design Radio
// --------------------------------------------------
-$radio-md-color-on: color(primary) !default;
+$radio-md-color-on: map-get($colors-md, primary) !default;
+$radio-md-color-off: darken($list-md-border-color, 40%) !default;
-$radio-md-icon-size: 16px !default;
-$radio-md-border-width: 2px !default;
-$radio-md-color-off: darken($item-md-border-color, 40%) !default;
+$radio-md-icon-width: 16px !default;
+$radio-md-icon-height: 16px !default;
+$radio-md-icon-border-width: 2px !default;
+$radio-md-icon-border-style: solid !default;
+$radio-md-icon-border-radius: 50% !default;
$radio-md-transition-duration: 280ms !default;
$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
+$radio-md-disabled-text-color: $subdued-text-md-color !default;
+$radio-md-disabled-opacity: 0.5 !default;
+
ion-radio {
-
- radio-icon {
- position: relative;
- top: 0;
- left: 0;
- display: block;
- width: $radio-md-icon-size;
- height: $radio-md-icon-size;
- margin: 0;
- border: $radio-md-border-width solid $radio-md-color-off;
- border-radius: 50%;
- }
-
- &[aria-checked=true] radio-icon {
- border-color: $radio-md-color-on;
- }
-
- radio-icon:after {
- position: absolute;
- top: $radio-md-border-width;
- left: $radio-md-border-width;
- width: $radio-md-icon-size / 2;
- height: $radio-md-icon-size / 2;
- background: $radio-md-color-on;
- border-radius: 50%;
- content: '';
- transition: transform $radio-md-transition-duration $radio-md-transition-easing;
- transform: scale3d(0, 0, 0);
- }
-
- &[aria-checked=true] radio-icon:after {
- transform: scale3d(1, 1, 1);
- }
+ cursor: pointer;
+ @include user-select-none();
&[aria-checked=true] {
color: $radio-md-color-on;
}
+ &[aria-checked=true] .radio-icon {
+ border-color: $radio-md-color-on;
+
+ &:after {
+ transform: scale3d(1, 1, 1);
+ }
+ }
+
}
-media-radio {
+ion-radio[aria-disabled=true] {
+ color: $radio-md-disabled-text-color;
+ opacity: $radio-md-disabled-opacity;
+ pointer-events: none;
+}
+
+.radio-icon {
+ position: relative;
+ top: 0;
+ left: 0;
+ display: block;
+ width: $radio-md-icon-width;
+ height: $radio-md-icon-height;
+ margin: 0;
+ border-width: $radio-md-icon-border-width;
+ border-style: $radio-md-icon-border-style;
+ border-color: $radio-md-color-off;
+ border-radius: $radio-md-icon-border-radius;
+
+ &:after {
+ position: absolute;
+ top: $radio-md-icon-border-width;
+ left: $radio-md-icon-border-width;
+ width: $radio-md-icon-width / 2;
+ height: $radio-md-icon-height / 2;
+ background-color: $radio-md-color-on;
+ border-radius: 50%;
+ content: '';
+ transition: transform $radio-md-transition-duration $radio-md-transition-easing;
+ transform: scale3d(0, 0, 0);
+ }
+}
+
+.radio-media {
display: block;
margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2);
}
@@ -67,27 +83,27 @@ media-radio {
ion-radio[#{$color-name}] {
- &[aria-checked=true] radio-icon {
- border-color: $color-value;
- }
-
- &[aria-checked=true] radio-icon:after {
- background: $color-value;
- }
-
&[aria-checked=true] {
color: $color-value;
}
+ &[aria-checked=true] .radio-icon {
+ border-color: $color-value;
+
+ &:after {
+ background-color: $color-value;
+ }
+ }
+
}
}
-// Generate Material Design Radio Auxiliary Colors
+// Generate Material Design Radio Colors
// --------------------------------------------------
-@each $color-name, $color-value in auxiliary-colors() {
+@each $color-name, $color-value in $colors-md {
@include radio-theme-md($color-name, $color-value);
diff --git a/ionic/components/radio/radio.scss b/ionic/components/radio/radio.scss
deleted file mode 100644
index aa8578c546..0000000000
--- a/ionic/components/radio/radio.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@import "../../ionic.globals";
-
-// Radio
-// --------------------------------------------------
-
-
-ion-radio {
- display: block;
- cursor: pointer;
- @include user-select-none();
-}
-
-ion-radio[aria-disabled=true] {
- opacity: 0.5;
- color: $subdued-text-color;
- pointer-events: none;
-}
diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts
index b331ff4615..e890b6a624 100644
--- a/ionic/components/radio/radio.ts
+++ b/ionic/components/radio/radio.ts
@@ -72,7 +72,7 @@ export class RadioGroup extends Ion {
/**
* @private
*/
- onInit() {
+ ngOnInit() {
let header = this.headerQuery.first;
if (header) {
if (!header.id) {
@@ -162,7 +162,7 @@ export class RadioGroup extends Ion {
* Radio Label
*
* ```
- *
+ *
* @see {@link /docs/v2/components#radio Radio Component Docs}
*/
@Component({
@@ -189,9 +189,9 @@ export class RadioGroup extends Ion {
'' +
' ' +
- '' +
- ' ' +
+ '' +
'
'
})
export class RadioButton extends Ion {
@@ -210,8 +210,8 @@ export class RadioButton extends Ion {
/**
* @private
*/
- onInit() {
- super.onInit();
+ ngOnInit() {
+ super.ngOnInit();
this.group.registerRadio(this);
this.labelId = 'label-' + this.id;
}
diff --git a/ionic/components/scroll/pull-to-refresh.ts b/ionic/components/scroll/pull-to-refresh.ts
index 774f92481b..2dc200cb01 100644
--- a/ionic/components/scroll/pull-to-refresh.ts
+++ b/ionic/components/scroll/pull-to-refresh.ts
@@ -84,7 +84,7 @@ export class Refresher {
this.pulling = new EventEmitter('pulling');
}
- onInit() {
+ ngOnInit() {
this.initEvents();
}
diff --git a/ionic/components/scroll/scroll.scss b/ionic/components/scroll/scroll.scss
index fcfdc391b6..8b4557c491 100644
--- a/ionic/components/scroll/scroll.scss
+++ b/ionic/components/scroll/scroll.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
ion-scroll {
position: relative;
diff --git a/ionic/components/scroll/scroll.ts b/ionic/components/scroll/scroll.ts
index 30fcdcbae8..a6bcc1ae6d 100644
--- a/ionic/components/scroll/scroll.ts
+++ b/ionic/components/scroll/scroll.ts
@@ -56,7 +56,7 @@ export class Scroll extends Ion {
/**
* @private
*/
- onInit() {
+ ngOnInit() {
this.scrollElement = this.getNativeElement().children[0];
}
diff --git a/ionic/components/searchbar/modes/ios.scss b/ionic/components/searchbar/modes/ios.scss
index ff2a013db6..c1509f0e6f 100644
--- a/ionic/components/searchbar/modes/ios.scss
+++ b/ionic/components/searchbar/modes/ios.scss
@@ -1,30 +1,34 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
+@import "../searchbar";
-// iOS Search Bar
+// iOS Searchbar
// --------------------------------------------------
-$searchbar-ios-padding-top-bottom: 0 !default;
-$searchbar-ios-padding-left-right: 8px !default;
-$searchbar-ios-background-color: rgba(0, 0, 0, 0.2) !default;
-$searchbar-ios-border-color: rgba(0, 0, 0, 0.05) !default;
-$searchbar-ios-min-height: 44px !default;
+$searchbar-ios-padding-top-bottom: 0 !default;
+$searchbar-ios-padding-left-right: 8px !default;
+$searchbar-ios-background-color: rgba(0, 0, 0, 0.2) !default;
+$searchbar-ios-border-color: rgba(0, 0, 0, 0.05) !default;
+$searchbar-ios-min-height: 44px !default;
-$searchbar-ios-input-search-icon-color: rgba(0, 0, 0, 0.5) !default;
-$searchbar-ios-input-search-icon-svg: "
" !default;
-$searchbar-ios-input-search-icon-size: 13px !default;
+$searchbar-ios-input-search-icon-color: rgba(0, 0, 0, 0.5) !default;
+$searchbar-ios-input-search-icon-svg: "
" !default;
+$searchbar-ios-input-search-icon-size: 13px !default;
-$searchbar-ios-input-height: 28px !default;
-$searchbar-ios-input-placeholder-color: rgba(0, 0, 0, 0.5) !default;
-$searchbar-ios-input-text-color: #000 !default;
-$searchbar-ios-input-background-color: #FFFFFF !default;
-$searchbar-ios-input-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default;
-$searchbar-ios-cancel-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default;
+$searchbar-ios-input-height: 100% !default;
+$searchbar-ios-input-placeholder-color: rgba(0, 0, 0, 0.5) !default;
+$searchbar-ios-input-text-color: #000 !default;
+$searchbar-ios-input-background-color: #FFFFFF !default;
+$searchbar-ios-input-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default;
+$searchbar-ios-cancel-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default;
-$searchbar-ios-input-close-icon-color: rgba(0, 0, 0, 0.5) !default;
-$searchbar-ios-input-close-icon-svg: "
" !default;
-$searchbar-ios-input-close-icon-size: 18px !default;
+$searchbar-ios-input-clear-icon-color: rgba(0, 0, 0, 0.5) !default;
+$searchbar-ios-input-clear-icon-svg: "
" !default;
+$searchbar-ios-input-clear-icon-size: 18px !default;
+// Searchbar
+// -----------------------------------------
+
ion-searchbar {
padding: $searchbar-ios-padding-top-bottom $searchbar-ios-padding-left-right;
background: $searchbar-ios-background-color;
@@ -32,6 +36,10 @@ ion-searchbar {
min-height: $searchbar-ios-min-height;
}
+
+// Searchbar Search Icon
+// -----------------------------------------
+
.searchbar-search-icon {
width: $searchbar-ios-input-search-icon-size + 1;
height: $searchbar-ios-input-search-icon-size + 1;
@@ -47,6 +55,10 @@ ion-searchbar {
transition: $searchbar-ios-input-transition;
}
+
+// Searchbar Input Field
+// -----------------------------------------
+
.searchbar-input {
height: $searchbar-ios-input-height;
padding: 0 28px;
@@ -65,12 +77,16 @@ ion-searchbar {
transition: $searchbar-ios-input-transition;
}
-.searchbar-close-icon {
+
+// Searchbar Clear Input Icon
+// -----------------------------------------
+
+.searchbar-clear-icon {
width: 30px;
height: 100%;
- @include svg-background-image($searchbar-ios-input-close-icon-svg);
- background-size: $searchbar-ios-input-close-icon-size;
+ @include svg-background-image($searchbar-ios-input-clear-icon-svg);
+ background-size: $searchbar-ios-input-clear-icon-size;
background-repeat: no-repeat;
background-position: center;
position: absolute;
@@ -78,8 +94,11 @@ ion-searchbar {
top: 0;
}
-.searchbar-cancel {
- @extend button[clear];
+
+// Searchbar Cancel (iOS only)
+// -----------------------------------------
+
+.searchbar-ios-cancel {
transition: $searchbar-ios-cancel-transition;
min-height: 30px;
@@ -91,14 +110,18 @@ ion-searchbar {
flex: 0 0 0%;
}
-ion-searchbar.left-align {
+
+// Searchbar Left Aligned (iOS only)
+// -----------------------------------------
+
+.searchbar-left-aligned {
.searchbar-search-icon {
margin-left: 0;
}
.searchbar-input {
padding-left: 30px;
}
- .searchbar-cancel {
+ .searchbar-ios-cancel {
transform: translateX(0);
flex: 0 0 auto;
padding-left: 8px;
@@ -106,9 +129,9 @@ ion-searchbar.left-align {
}
}
-&.hairlines ion-searchbar {
- border-bottom-width: 0.55px;
-}
+
+// Searchbar in Toolbar
+// -----------------------------------------
.toolbar {
@@ -120,31 +143,49 @@ ion-searchbar.left-align {
background-color: rgba(0, 0, 0, 0.08);
}
- .searchbar-cancel {
+ .searchbar-ios-cancel {
padding: 0;
}
}
- .left-align .searchbar-cancel {
+ .searchbar-left-aligned .searchbar-ios-cancel {
padding-left: 8px;
}
}
-.searchbar-cancel-icon {
+
+// Searchbar Cancel (MD only)
+// -----------------------------------------
+
+.searchbar-md-cancel {
display: none;
}
+
+// Searchbar Hairlines (iOS only)
+// -----------------------------------------
+
+&.hairlines ion-searchbar {
+ border-bottom-width: 0.55px;
+}
+
+
// Generate Default Search Bar Colors
// --------------------------------------------------
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-ios {
ion-searchbar[#{$color-name}] {
-
- .searchbar-cancel {
+ .searchbar-ios-cancel {
color: $color-value;
}
}
+ .toolbar[#{$color-name}] ion-searchbar {
+ .searchbar-ios-cancel {
+ color: inverse($color-value);
+ }
+ }
+
}
diff --git a/ionic/components/searchbar/modes/md.scss b/ionic/components/searchbar/modes/md.scss
index c897b70091..0e347176a9 100644
--- a/ionic/components/searchbar/modes/md.scss
+++ b/ionic/components/searchbar/modes/md.scss
@@ -1,36 +1,66 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
+@import "../searchbar";
-// Material Design Search Bar
+// Material Design Searchbar
// --------------------------------------------------
-$searchbar-md-padding: 8px !default;
-$searchbar-md-background-color: inherit !default;
+$searchbar-md-padding: 8px !default;
+$searchbar-md-background-color: inherit !default;
-$searchbar-md-input-search-icon-color: #5B5B5B !default;
-$searchbar-md-input-search-icon-svg: "
" !default;
-$searchbar-md-input-search-icon-size: 20px !default;
+$searchbar-md-input-search-icon-color: #5B5B5B !default;
+$searchbar-md-input-search-icon-svg: "
" !default;
+$searchbar-md-input-search-icon-size: 20px !default;
-$searchbar-md-input-height: 28px !default;
-$searchbar-md-input-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;
-$searchbar-md-input-placeholder-color: #AEAEAE !default;
-$searchbar-md-input-text-color: #141414 !default;
-$searchbar-md-input-background-color: #FFFFFF !default;
-$searchbar-md-input-border-radius: 2px !default;
+$searchbar-md-input-height: 100% !default;
+$searchbar-md-input-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;
+$searchbar-md-input-placeholder-color: #AEAEAE !default;
+$searchbar-md-input-text-color: #141414 !default;
+$searchbar-md-input-background-color: #FFFFFF !default;
+$searchbar-md-input-border-radius: 2px !default;
-$searchbar-md-input-close-icon-color: #5B5B5B !default;
-$searchbar-md-input-close-icon-svg: "
" !default;
-$searchbar-md-input-close-icon-size: 22px !default;
+$searchbar-md-input-clear-icon-color: #5B5B5B !default;
+$searchbar-md-input-clear-icon-svg: "
" !default;
+$searchbar-md-input-clear-icon-size: 22px !default;
+
+
+// Searchbar
+// -----------------------------------------
ion-searchbar {
padding: $searchbar-md-padding;
background: $searchbar-md-background-color;
}
-.searchbar-search-icon,
-button.searchbar-cancel-icon {
+
+// Searchbar Search Icon
+// -----------------------------------------
+
+.searchbar-search-icon {
width: $searchbar-md-input-search-icon-size + 1;
height: $searchbar-md-input-search-icon-size + 1;
+ top: 11px;
+ left: 16px;
+ @include svg-background-image($searchbar-md-input-search-icon-svg);
+}
+
+// Searchbar Cancel Icon (MD only)
+// -----------------------------------------
+
+.searchbar-md-cancel {
+ display: none;
+ width: $searchbar-md-input-search-icon-size + 1;
+ height: 100%;
+ margin: 0;
+ top: 0;
+ left: 10px;
+}
+
+// Searchbar Search & Cancel Icon
+// -----------------------------------------
+
+.searchbar-search-icon,
+.searchbar-md-cancel {
background-size: $searchbar-md-input-search-icon-size;
background-repeat: no-repeat;
position: absolute;
@@ -40,19 +70,9 @@ button.searchbar-cancel-icon {
}
}
-.searchbar-search-icon {
- top: 11px;
- left: 16px;
- @include svg-background-image($searchbar-md-input-search-icon-svg);
-}
-button.searchbar-cancel-icon {
- display: none;
- height: 100%;
- margin: 0;
- top: 0;
- left: 10px;
-}
+// Searchbar Input Field
+// -----------------------------------------
.searchbar-input {
padding: 6px 55px;
@@ -71,13 +91,17 @@ button.searchbar-cancel-icon {
@include placeholder($searchbar-md-input-placeholder-color);
}
-button.searchbar-close-icon {
- width: $searchbar-md-input-close-icon-size;
+
+// Searchbar Clear Input Icon
+// -----------------------------------------
+
+.searchbar-clear-icon {
+ width: $searchbar-md-input-clear-icon-size;
height: 100%;
padding: 0;
- @include svg-background-image($searchbar-md-input-close-icon-svg);
- background-size: $searchbar-md-input-close-icon-size;
+ @include svg-background-image($searchbar-md-input-clear-icon-svg);
+ background-size: $searchbar-md-input-clear-icon-size;
background-repeat: no-repeat;
background-position: center;
position: absolute;
@@ -89,31 +113,38 @@ button.searchbar-close-icon {
}
}
-.searchbar-cancel {
- display: none;
-}
-.focused {
+// Searchbar Focused
+// -----------------------------------------
+.searchbar-focused {
.searchbar-search-icon {
display: none;
}
- button.searchbar-cancel-icon {
+ .searchbar-md-cancel {
display: inline-flex;
}
-
}
-.toolbar {
+// Searchbar in Toolbar
+// -----------------------------------------
+
+.toolbar {
ion-searchbar {
padding: 3px;
}
- button.searchbar-cancel-icon {
+ .searchbar-md-cancel {
left: 14px;
}
-
-
+}
+
+
+// Searchbar Cancel Icon (iOS only)
+// -----------------------------------------
+
+.searchbar-ios-cancel {
+ display: none;
}
diff --git a/ionic/components/searchbar/searchbar.scss b/ionic/components/searchbar/searchbar.scss
index 9b70f89662..104eac8ae8 100644
--- a/ionic/components/searchbar/searchbar.scss
+++ b/ionic/components/searchbar/searchbar.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
// Search Bar
// --------------------------------------------------
@@ -23,17 +23,16 @@ ion-searchbar {
width: 100%;
}
-input[type="search"].searchbar-input {
+.searchbar-input {
display: block;
width: 100%;
- height: 100%;
border: none;
font-family: inherit;
line-height: 3rem;
@include appearance(none);
}
-.searchbar-close-icon {
+.searchbar-clear-icon {
min-height: 0;
padding: 0;
margin: 0;
diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts
index cb69280e8a..29f63d85fc 100644
--- a/ionic/components/searchbar/searchbar.ts
+++ b/ionic/components/searchbar/searchbar.ts
@@ -4,6 +4,7 @@ import {Ion} from '../ion';
import {Config} from '../../config/config';
import {ConfigComponent} from '../../config/decorators';
import {Icon} from '../icon/icon';
+import {Button} from '../button/button';
/**
* @name Searchbar
@@ -31,19 +32,19 @@ import {Icon} from '../icon/icon';
},
inputs: ['cancelAction'],
host: {
- '[class.left-align]': 'shouldLeftAlign',
- '[class.focused]': 'isFocused',
+ '[class.searchbar-left-aligned]': 'shouldLeftAlign',
+ '[class.searchbar-focused]': 'isFocused',
},
template:
'
' +
- '
{{cancelText}} ',
- directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon]
+ '
{{cancelText}} ',
+ directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button]
})
export class Searchbar extends Ion {
/**
@@ -74,7 +75,7 @@ export class Searchbar extends Ion {
* After the view has initialized check if the searchbar has a value
* and then store that value in query
*/
- afterViewInit() {
+ ngAfterViewInit() {
// If the user passes in a value to the model we should left align
this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
this.query = this.ngControl.value || '';
diff --git a/ionic/components/searchbar/test/floating/e2e.ts b/ionic/components/searchbar/test/floating/e2e.ts
index 80da38ae4e..3c67c74834 100644
--- a/ionic/components/searchbar/test/floating/e2e.ts
+++ b/ionic/components/searchbar/test/floating/e2e.ts
@@ -21,5 +21,5 @@ it('custom cancel action should focus', function() {
// TODO - this test will work on iOS but fail on Android
// it('custom cancel action should alert', function() {
-// element(by.css('.e2eCustomCancelActionFloatingSearchbar .searchbar-cancel')).click();
+// element(by.css('.e2eCustomCancelActionFloatingSearchbar .searchbar-ios-cancel')).click();
// });
diff --git a/ionic/components/searchbar/test/toolbar/e2e.ts b/ionic/components/searchbar/test/toolbar/e2e.ts
index e69de29bb2..7d8a311063 100644
--- a/ionic/components/searchbar/test/toolbar/e2e.ts
+++ b/ionic/components/searchbar/test/toolbar/e2e.ts
@@ -0,0 +1,16 @@
+
+it('default should focus', function() {
+ element(by.css('.e2eDefaultToolbarSearchbar input')).sendKeys("AA");
+});
+
+it('primary should focus', function() {
+ element(by.css('.e2ePrimaryToolbarSearchbar input')).sendKeys("BB");
+});
+
+it('danger should focus', function() {
+ element(by.css('.e2eDangerToolbarSearchbar input')).sendKeys("CC");
+});
+
+it('light should focus', function() {
+ element(by.css('.e2eLightToolbarSearchbar input')).sendKeys("DD");
+});
diff --git a/ionic/components/searchbar/test/toolbar/index.ts b/ionic/components/searchbar/test/toolbar/index.ts
index bb059287ad..bf5a6c4b9d 100644
--- a/ionic/components/searchbar/test/toolbar/index.ts
+++ b/ionic/components/searchbar/test/toolbar/index.ts
@@ -7,7 +7,6 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar';
templateUrl: 'main.html'
})
class E2EApp {
- toolbarSearch: string;
constructor() {
diff --git a/ionic/components/searchbar/test/toolbar/main.html b/ionic/components/searchbar/test/toolbar/main.html
index 04e8f2686b..b50f292116 100644
--- a/ionic/components/searchbar/test/toolbar/main.html
+++ b/ionic/components/searchbar/test/toolbar/main.html
@@ -5,17 +5,22 @@
Search - Default Toolbar
-
Search - Primary Toolbar
-
Search - Danger Toolbar
-
+
+ Search - Light Toolbar
+
+
diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index e455aac04d..1b2f0d6ae8 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -1,145 +1,113 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
+@import "../segment";
// iOS Segment
// --------------------------------------------------
-$segment-button-ios-border-width: 1px !default;
-$segment-button-ios-min-height: 3.0rem !default;
-$segment-button-ios-line-height: 3.0rem !default;
$segment-button-ios-bg-color: transparent !default;
-$segment-button-ios-font-size: 1.3rem !default;
+$segment-button-ios-bg-color-activated: $toolbar-ios-active-color !default;
-$segment-button-ios-bg-color-activated: color(primary) !default;
$segment-button-ios-text-color: inverse($segment-button-ios-bg-color-activated) !default;
$segment-button-ios-activated-transition: 100ms all linear !default;
$segment-button-ios-hover-opacity: 0.16 !default;
+$segment-button-ios-border-width: 1px !default;
+$segment-button-ios-min-height: 3.0rem !default;
+$segment-button-ios-line-height: 3.0rem !default;
+$segment-button-ios-font-size: 1.3rem !default;
+$segment-button-ios-border-radius: 4px !default;
+
$segment-button-ios-toolbar-button-max-width: 100px !default;
-ion-segment {
+.segment-button {
+ min-height: $segment-button-ios-min-height;
+ line-height: $segment-button-ios-line-height;
+ font-size: $segment-button-ios-font-size;
- button,
- [button] {
- border-width: $segment-button-ios-border-width;
- border-style: solid;
+ border-width: $segment-button-ios-border-width;
+ border-style: solid;
+ border-color: $segment-button-ios-bg-color-activated;
- min-height: $segment-button-ios-min-height;
- line-height: $segment-button-ios-line-height;
+ color: $segment-button-ios-bg-color-activated;
+ background-color: $segment-button-ios-bg-color;
- background-color: $segment-button-ios-bg-color;
+ &.segment-activated {
+ opacity: 1;
color: $segment-button-ios-text-color;
- font-size: $segment-button-ios-font-size;
-
- &[outline] {
- border: 1px solid $segment-button-ios-bg-color-activated;
- background: $segment-button-ios-bg-color;
- color: $segment-button-ios-bg-color-activated;
-
- &.segment-activated {
- opacity: 1;
- color: $segment-button-ios-text-color;
- background-color: $segment-button-ios-bg-color-activated;
- transition: $segment-button-ios-activated-transition;
- }
-
- &:hover:not(.segment-activated) {
- background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
- }
- }
-
- &:first-of-type {
- border-radius: $button-border-radius 0px 0px $button-border-radius;
- margin-right: 0;
- }
-
- &:not(:first-of-type) {
- border-left-width: 0px;
- }
-
- &:last-of-type {
- border-left-width: 0px;
- border-radius: 0px $button-border-radius $button-border-radius 0px;
- margin-left: 0;
- }
+ background-color: $segment-button-ios-bg-color-activated;
+ transition: $segment-button-ios-activated-transition;
}
+ &:hover:not(.segment-activated) {
+ background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
+ }
+
+ &:first-of-type {
+ border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
+ margin-right: 0;
+ }
+
+ &:not(:first-of-type) {
+ border-left-width: 0;
+ }
+
+ &:last-of-type {
+ border-left-width: 0;
+ border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
+ margin-left: 0;
+ }
}
.toolbar {
- // TODO this is to get the segment centered with nav-items, but like ion-title it will need to be fixed
ion-segment {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
-
- button,
- [button] {
- max-width: $segment-button-ios-toolbar-button-max-width;
- }
}
+ .segment-button {
+ max-width: $segment-button-ios-toolbar-button-max-width;
+ min-height: 2.4rem;
+ line-height: 2.4rem;
+ font-size: 1.2rem;
+ }
}
-// Generate Default Segment Colors
+
+// iOS Segment Button Mixin
// --------------------------------------------------
-@mixin segment-button($button-color, $activated-text-color) {
- background-color: transparent;
+@mixin ios-segment-button($color-name, $color-value) {
- &[outline] {
- border-color: $button-color;
- background: $segment-button-ios-bg-color;
- color: $button-color;
-
- &.segment-activated {
- opacity: 1;
- color: $activated-text-color;
- background-color: $button-color;
- }
+ ion-segment[#{$color-name}] .segment-button {
+ border-color: $color-value;
+ color: $color-value;
&:hover:not(.segment-activated) {
- background-color: rgba($button-color, $segment-button-ios-hover-opacity);
+ background-color: rgba($color-value, $segment-button-ios-hover-opacity);
+ }
+
+ &.activated,
+ &.segment-activated {
+ color: inverse($color-value);
+ background-color: $color-value;
}
}
+
}
-// Loop through all of the colors to change the segment colors
-// based on the toolbar color or if it isn't in a toolbar then based on
-// the segment color value
-@each $color-name, $color-value in $colors {
- $inverse-color-value: inverse($color-value);
- .toolbar[#{$color-name}] {
+// iOS Segment Color Generation
+// --------------------------------------------------
- ion-segment {
- ion-segment-button[button] {
- @include segment-button($inverse-color-value, $color-value);
- }
- }
-
- // Loop through all of the colors again to change the segment colors
- // for each toolbar based on the segment color
- // this will take priority over the default toolbar colors
- @each $color-name, $color-value in $colors {
- $inverse-color-value: inverse($color-value);
-
- ion-segment[#{$color-name}] {
- ion-segment-button[button] {
- @include segment-button($color-value, $inverse-color-value);
- }
- }
- }
-
- }
-
- ion-segment[#{$color-name}] {
- ion-segment-button[button] {
- @include segment-button($color-value, $inverse-color-value);
- }
+@each $color-name, $color-value in $colors-ios {
+ @include ios-segment-button($color-name, $color-value);
+ .toolbar[#{$color-name}] .segment-button.segment-activated {
+ color: $color-value;
}
}
diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss
index ebec62ca90..274e18e6d3 100644
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -1,104 +1,81 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
+@import "../segment";
-// iOS Segment
+// Material Design Segment
// --------------------------------------------------
-$segment-button-md-font-size: 1.2rem !default;
+$segment-button-md-text-color-activated: $toolbar-md-active-color !default;
+$segment-button-md-border-color-activated: $toolbar-md-active-color !default;
+
+$segment-button-md-border-bottom-width: 2px !default;
+$segment-button-md-border-bottom-color: rgba(#000000, 0.10) !default;
+
+$segment-button-md-padding: 0 6px !default;
$segment-button-md-min-height: 4.0rem !default;
$segment-button-md-line-height: 4.0rem !default;
-
-$segment-button-md-text-color-activated: color(primary) !default;
-$segment-button-md-border-color-activated: color(primary) !default;
-$segment-button-md-border-bottom: 2px solid rgba(#000000, 0.10) !default;
+$segment-button-md-font-size: 1.2rem !default;
-ion-segment {
+.segment-button {
+ padding: $segment-button-md-padding;
+ border-bottom-width: $segment-button-md-border-bottom-width;
+ border-bottom-style: solid;
+ border-bottom-color: $segment-button-md-border-bottom-color;
- button,
- [button] {
- border-width: 0;
- transition: 100ms all linear;
- font-size: $segment-button-md-font-size;
- opacity: 0.7;
+ min-height: $segment-button-md-min-height;
+ line-height: $segment-button-md-line-height;
- min-height: $segment-button-md-min-height;
- line-height: $segment-button-md-line-height;
+ font-size: $segment-button-md-font-size;
+ text-transform: uppercase;
+ font-weight: 500;
- &.activated, &.segment-activated {
- color: $segment-button-md-text-color-activated;
- background-color: transparent;
- border-color: $segment-button-md-border-color-activated;
- }
+ opacity: 0.7;
+ color: $segment-button-md-text-color-activated;
+ background-color: transparent;
+ transition: 100ms all linear;
- border-radius: 0;
- border-bottom: $segment-button-md-border-bottom;
+ &.activated,
+ &.segment-activated {
+ border-color: $segment-button-md-border-color-activated;
}
-
}
.toolbar {
ion-segment {
margin: 0 auto;
+ }
- ion-segment-button[button][outline].activated,
- ion-segment-button[button][outline].segment-activated {
- background-color: transparent;
- opacity: 1;
- }
+ .segment-button.activated,
+ .segment-button.segment-activated {
+ opacity: 1;
}
}
-// Generate Default Segment Colors
+
+// Material Design Segment Button Mixin
// --------------------------------------------------
-@mixin segment-button($button-color) {
- background-color: transparent;
+@mixin md-segment-button($color-name, $color-value) {
- &[outline] {
- color: $button-color;
+ ion-segment[#{$color-name}] .segment-button {
+ color: $color-value;
- &.activated, &.segment-activated {
- background-color: transparent;
- color: $button-color;
- border-color: $button-color;
+ &.activated,
+ &.segment-activated {
opacity: 1;
+ border-color: $color-value;
+ color: $color-value;
}
}
+
}
-// Loop through all of the colors to change the segment colors
-// based on the toolbar color or if it isn't in a toolbar then based on
-// the segment color value
-@each $color-name, $color-value in $colors {
- $inverse-color-value: inverse($color-value);
- .toolbar[#{$color-name}] {
+// Material Design Segment Color Generation
+// --------------------------------------------------
- ion-segment {
- ion-segment-button[button] {
- @include segment-button($inverse-color-value);
- }
- }
-
- // Loop through all of the colors again to change the segment colors
- // for each toolbar based on the segment color
- // this will take priority over the default toolbar colors
- @each $color-name, $color-value in $colors {
- ion-segment[#{$color-name}] {
- ion-segment-button[button] {
- @include segment-button($color-value);
- }
- }
- }
-
- }
-
- ion-segment[#{$color-name}] {
- ion-segment-button[button] {
- @include segment-button($color-value);
- }
-
- }
+@each $color-name, $color-value in $colors-md {
+ @include md-segment-button($color-name, $color-value);
}
diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss
index 54bec89cef..b9e596d6e8 100644
--- a/ionic/components/segment/segment.scss
+++ b/ionic/components/segment/segment.scss
@@ -1,39 +1,29 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
// Segment
// --------------------------------------------------
-$segment-button-padding: 0 16px !default;
-
ion-segment {
-
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 100%;
-
- button,
- [button] {
-
- margin-left: 0;
- margin-right: 0;
-
- flex: 1;
- display: block;
- overflow: hidden;
-
- padding: $segment-button-padding;
- width: 0;
-
- border-width: 1px 0px 1px 1px;
- border-radius: 0;
-
- text-align: center;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- background: none;
- }
+}
+
+.segment-button {
+ position: relative;
+ display: block;
+
+ margin-left: 0;
+ margin-right: 0;
+
+ flex: 1;
+ width: 0;
+
+ overflow: hidden;
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts
index 9c6a262de5..3b08f4928b 100644
--- a/ionic/components/segment/segment.ts
+++ b/ionic/components/segment/segment.ts
@@ -140,7 +140,7 @@ export class Segment extends Ion {
* @property {string} [value] - the value of the segment-button.
* @usage
* ```html
- *
+ *
*
* Friends
*
@@ -177,7 +177,7 @@ export class Segment extends Ion {
],
host: {
'(click)': 'click($event)',
- '[class.segment-activated]': 'isActive',
+ '[class.segment-activated]': 'isActive'
}
})
export class SegmentButton {
@@ -189,14 +189,14 @@ export class SegmentButton {
) {
this.segment = segment;
- renderer.setElementAttribute(elementRef, 'button', '');
- renderer.setElementAttribute(elementRef, 'outline', '');
+ renderer.setElementClass(elementRef, 'segment-button', true);
+ renderer.setElementAttribute(elementRef, 'tappable', '');
}
/**
* @private
*/
- onInit() {
+ ngOnInit() {
this.segment.register(this);
}
diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html
index aba6b1d080..6e6af81ecb 100644
--- a/ionic/components/segment/test/basic/main.html
+++ b/ionic/components/segment/test/basic/main.html
@@ -10,11 +10,11 @@
-
+
-
+
Something
@@ -26,7 +26,7 @@
- Are we friends or enemies? {{ relationship }}
+ Are we friends or enemies? {{ relationship }}
Map mode: NgControl
@@ -83,7 +83,7 @@
-
+
Primary
@@ -96,8 +96,8 @@
-
-
+
+
Light
@@ -105,13 +105,13 @@
Toolbar
- Primary Segment
+ Danger Segment
-
-
+
+
Light
diff --git a/ionic/components/slides/slides.scss b/ionic/components/slides/slides.scss
index eb91036869..a1987c8185 100644
--- a/ionic/components/slides/slides.scss
+++ b/ionic/components/slides/slides.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
ion-swipe-slides {
display: block;
diff --git a/ionic/components/slides/slides.ts b/ionic/components/slides/slides.ts
index 4f663b2721..5ec9763846 100644
--- a/ionic/components/slides/slides.ts
+++ b/ionic/components/slides/slides.ts
@@ -110,7 +110,7 @@ export class Slides extends Ion {
/**
* @private
*/
- onInit() {
+ ngOnInit() {
if(!this.options) {
this.options = {};
}
diff --git a/ionic/components/slides/test/basic/index.ts b/ionic/components/slides/test/basic/index.ts
index f52423b989..cb020b52ff 100644
--- a/ionic/components/slides/test/basic/index.ts
+++ b/ionic/components/slides/test/basic/index.ts
@@ -34,7 +34,7 @@ class MyApp {
})
}
- onInit() {
+ ngOnInit() {
setTimeout(() => {
this.slider = this.app.getComponent('slider');
console.log('Got slider', this.slider);
diff --git a/ionic/components/slides/test/intro/main.html b/ionic/components/slides/test/intro/main.html
index 15b0f2b262..00caad1bb2 100644
--- a/ionic/components/slides/test/intro/main.html
+++ b/ionic/components/slides/test/intro/main.html
@@ -30,16 +30,16 @@
}
-
+
Skip
-
-
+
+
Next
-
+
Grid Icons
diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index 2a504d56f1..22ac526f20 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
// iOS Switch
// --------------------------------------------------
@@ -8,120 +8,153 @@ $switch-ios-height: 32px !default;
$switch-ios-border-width: 2px !default;
$switch-ios-border-radius: $switch-ios-height / 2 !default;
-$switch-ios-background-color-off: $list-background-color !default;
-$switch-ios-border-color-off: grayscale(lighten($list-border-color, 11%)) !default;
+$switch-ios-background-color-off: $list-ios-background-color !default;
+$switch-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default;
-$switch-ios-background-color-on: color(primary) !default;
+$switch-ios-background-color-on: map-get($colors-ios, primary) !default;
$switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default;
$switch-ios-handle-height: $switch-ios-handle-width !default;
-$switch-ios-handle-radius: $switch-ios-handle-height / 2 !default;
+$switch-ios-handle-border-radius: $switch-ios-handle-height / 2 !default;
$switch-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
$switch-ios-handle-background-color: $switch-ios-background-color-off !default;
+$switch-ios-media-margin: 0 !default;
+$switch-ios-media-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
+
$switch-ios-transition-duration: 300ms !default;
+$switch-ios-disabled-opacity: 0.5 !default;
+$switch-ios-disabled-text-color: $subdued-text-ios-color !default;
+
+
+// Switch
+// -----------------------------------------
ion-switch {
+ display: block;
+ @include user-select-none();
&.item.activated {
- background: $list-background-color;
- }
-
- media-switch {
- padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left);
+ background: $list-ios-background-color;
}
+}
- // Switch Background Track
- // -----------------------------------------
+// Switch Wrapper
+// -----------------------------------------
- switch-icon {
- // bg track, when not checked
- position: relative;
- display: block;
- width: $switch-ios-width;
- height: $switch-ios-height;
- border-radius: $switch-ios-border-radius;
- pointer-events: none;
+.switch-media {
+ margin: $switch-ios-media-margin;
+ padding: $switch-ios-media-padding;
+ cursor: pointer;
+}
- background-color: $switch-ios-border-color-off;
- will-change: background-color;
- transition: background-color $switch-ios-transition-duration;
- }
- &[aria-checked=true] switch-icon {
+// Switch Background Track
+// -----------------------------------------
+
+.switch-icon {
+ // bg track, when not checked
+ position: relative;
+ display: block;
+ width: $switch-ios-width;
+ height: $switch-ios-height;
+ border-radius: $switch-ios-border-radius;
+ pointer-events: none;
+
+ background-color: $switch-ios-border-color-off;
+ transition: background-color $switch-ios-transition-duration;
+}
+
+
+// Switch Background Track, Inner Oval
+// -----------------------------------------
+
+.switch-icon:before {
+ // inner bg track's oval, when not checked
+ content: '';
+ position: absolute;
+ top: $switch-ios-border-width;
+ right: $switch-ios-border-width;
+ left: $switch-ios-border-width;
+ bottom: $switch-ios-border-width;
+
+ border-radius: $switch-ios-border-radius;
+ background-color: $switch-ios-background-color-off;
+
+ transform: scale3d(1, 1, 1);
+ transition: transform $switch-ios-transition-duration;
+}
+
+
+// Switch Knob
+// -----------------------------------------
+
+.switch-icon:after {
+ // knob, when not checked
+ content: '';
+ position: absolute;
+ top: $switch-ios-border-width;
+ left: $switch-ios-border-width;
+
+ width: $switch-ios-handle-width;
+ height: $switch-ios-handle-height;
+
+ border-radius: $switch-ios-handle-border-radius;
+ background-color: $switch-ios-handle-background-color;
+ box-shadow: $switch-ios-handle-box-shadow;
+
+ transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
+}
+
+
+// Switch Checked
+// -----------------------------------------
+
+ion-switch[aria-checked=true] {
+ .switch-icon {
// bg track, when checked
background-color: $switch-ios-background-color-on;
+
+ &:before {
+ // inner bg track's oval, when checked
+ transform: scale3d(0, 0, 0);
+ }
+
+ &:after {
+ // knob, when checked
+ transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
+ }
}
+ .switch-activated .switch-icon {
+ &:before {
+ // inner bg track's oval, when checked
+ transform: scale3d(0, 0, 0);
+ }
- // Switch Background Track, Inner Oval
- // -----------------------------------------
+ &:after {
+ // when pressing down on the switch and IS checked
+ // make the knob wider and move it left a bit
+ left: $switch-ios-border-width - 6;
- switch-icon:before {
- // inner bg track's oval, when not checked
- content: '';
- position: absolute;
- top: $switch-ios-border-width;
- right: $switch-ios-border-width;
- left: $switch-ios-border-width;
- bottom: $switch-ios-border-width;
-
- border-radius: $switch-ios-border-radius;
- background-color: $switch-ios-background-color-off;
-
- will-change: transform;
- transform: scale3d(1, 1, 1);
- transition: transform $switch-ios-transition-duration;
- }
-
- &[aria-checked=true] switch-icon:before,
- .switch-activated switch-icon:before {
- // inner bg track's oval, when checked
- transform: scale3d(0, 0, 0);
+ // when pressing down on the switch and NOT checked
+ // then make the knob wider
+ width: $switch-ios-handle-width + 6;
+ }
}
+}
- // Switch Knob
- // -----------------------------------------
-
- switch-icon:after {
- // knob, when not checked
- content: '';
- position: absolute;
- top: $switch-ios-border-width;
- left: $switch-ios-border-width;
-
- width: $switch-ios-handle-width;
- height: $switch-ios-handle-height;
-
- border-radius: $switch-ios-handle-radius;
- background-color: $switch-ios-handle-background-color;
- box-shadow: $switch-ios-handle-box-shadow;
-
- will-change: transform, width, left;
- transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
- }
-
- &[aria-checked=true] switch-icon:after {
- // knob, when checked
- transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
- }
-
- .switch-activated switch-icon:after {
- // when pressing down on the switch and NOT checked
- // then make the knob wider
- width: $switch-ios-handle-width + 6;
- }
-
- &[aria-checked=true] .switch-activated switch-icon:after {
- // when pressing down on the switch and IS checked
- // make the knob wider and move it left a bit
- left: $switch-ios-border-width - 6;
- }
+// Switch Disabled
+// -----------------------------------------
+ion-switch[aria-disabled=true] {
+ opacity: $switch-ios-disabled-opacity;
+ color: $switch-ios-disabled-text-color;
+ pointer-events: none;
}
@@ -132,7 +165,7 @@ ion-switch {
ion-switch[#{$color-name}] {
- &[aria-checked=true] switch-icon {
+ &[aria-checked=true] .switch-icon {
background-color: $bg-on;
}
@@ -144,7 +177,7 @@ ion-switch {
// Generate iOS Switch Auxiliary Colors
// --------------------------------------------------
-@each $color-name, $value in auxiliary-colors() {
+@each $color-name, $value in $colors-ios {
@include switch-theme-ios($color-name, $value);
diff --git a/ionic/components/switch/modes/md.scss b/ionic/components/switch/modes/md.scss
index 0d500ae0aa..0b081adcb6 100644
--- a/ionic/components/switch/modes/md.scss
+++ b/ionic/components/switch/modes/md.scss
@@ -1,83 +1,112 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
// Material Design Switch
// --------------------------------------------------
-$switch-md-active-color: color(primary) !default;
+$switch-md-active-color: map-get($colors-md, primary) !default;
$switch-md-track-width: 36px !default;
$switch-md-track-height: 14px !default;
-$switch-md-track-background-color-off: $item-md-border-color !default;
+$switch-md-track-background-color-off: $list-md-border-color !default;
$switch-md-track-background-color-on: lighten($switch-md-active-color, 25%) !default;
$switch-md-handle-width: 20px !default;
$switch-md-handle-height: 20px !default;
-$switch-md-handle-background-color-off: $background-color !default;
+$switch-md-handle-background-color-off: $background-md-color !default;
$switch-md-handle-background-color-on: $switch-md-active-color !default;
$switch-md-handle-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;
+$switch-md-handle-border-radius: 50% !default;
+
+$switch-md-media-margin: 0 !default;
+$switch-md-media-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
$switch-md-transition-duration: 300ms !default;
+$switch-md-disabled-opacity: 0.5 !default;
+$switch-md-disabled-text-color: $subdued-text-md-color !default;
+
+
+// Switch
+// -----------------------------------------
ion-switch {
-
- media-switch {
- padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left;
- }
+ display: block;
+ @include user-select-none();
+}
- // Switch Background Track
- // -----------------------------------------
+// Switch Wrapper
+// -----------------------------------------
- switch-icon {
- // bg track, when not checked
- position: relative;
- display: block;
- width: $switch-md-track-width;
- height: $switch-md-track-height;
- pointer-events: none;
- border-radius: $switch-md-track-height;
-
- background-color: $switch-md-track-background-color-off;
- will-change: background-color;
- transition: background-color $switch-md-transition-duration
- }
-
- &[aria-checked=true] switch-icon {
- // bg track, when not checked
- background-color: $switch-md-track-background-color-on;
- }
+.switch-media {
+ margin: $switch-md-media-margin;
+ padding: $switch-md-media-padding;
+ cursor: pointer;
+}
- // Switch Knob
- // -----------------------------------------
+// Switch Background Track
+// -----------------------------------------
- switch-icon:after {
- // knob, when not checked
- content: '';
- position: absolute;
- top: ($switch-md-handle-height - $switch-md-track-height) / -2;
- left: 0;
+.switch-icon {
+ // bg track, when not checked
+ position: relative;
+ display: block;
+ width: $switch-md-track-width;
+ height: $switch-md-track-height;
+ pointer-events: none;
+ border-radius: $switch-md-track-height;
- width: $switch-md-handle-width;
- height: $switch-md-handle-height;
+ background-color: $switch-md-track-background-color-off;
+ transition: background-color $switch-md-transition-duration
+}
- border-radius: 50%;
- box-shadow: $switch-md-handle-box-shadow;
- background-color: $switch-md-handle-background-color-off;
+// Switch Knob
+// -----------------------------------------
- will-change: transform, background-color;
- transition-property: transform, background-color;
- transition-duration: $switch-md-transition-duration;
- }
+.switch-icon:after {
+ // knob, when not checked
+ content: '';
+ position: absolute;
+ top: ($switch-md-handle-height - $switch-md-track-height) / -2;
+ left: 0;
- &[aria-checked=true] switch-icon:after {
+ width: $switch-md-handle-width;
+ height: $switch-md-handle-height;
+
+ border-radius: $switch-md-handle-border-radius;
+ box-shadow: $switch-md-handle-box-shadow;
+
+ background-color: $switch-md-handle-background-color-off;
+
+ transition-property: transform, background-color;
+ transition-duration: $switch-md-transition-duration;
+}
+
+
+// Switch Checked
+// -----------------------------------------
+
+ion-switch[aria-checked=true] .switch-icon {
+ // bg track, when not checked
+ background-color: $switch-md-track-background-color-on;
+
+ &:after {
// knob, when not checked
background-color: $switch-md-handle-background-color-on;
transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
}
+}
+
+// Switch Disabled
+// -----------------------------------------
+
+ion-switch[aria-disabled=true] {
+ opacity: $switch-md-disabled-opacity;
+ color: $switch-md-disabled-text-color;
+ pointer-events: none;
}
@@ -88,11 +117,11 @@ ion-switch {
ion-switch[#{$color-name}] {
- &[aria-checked=true] switch-icon {
+ &[aria-checked=true] .switch-icon {
background-color: lighten($bg-on, 25%);
}
- &[aria-checked=true] switch-icon:after {
+ &[aria-checked=true] .switch-icon:after {
background-color: $bg-on;
}
@@ -104,7 +133,7 @@ ion-switch {
// Generate Material Design Switch Auxiliary Colors
// --------------------------------------------------
-@each $color-name, $value in auxiliary-colors() {
+@each $color-name, $value in $colors-md {
@include switch-theme-md($color-name, $value);
diff --git a/ionic/components/switch/switch.scss b/ionic/components/switch/switch.scss
deleted file mode 100644
index ddb264eba6..0000000000
--- a/ionic/components/switch/switch.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import "../../ionic.globals";
-
-// Switch
-// --------------------------------------------------
-
-
-ion-switch {
- display: block;
- @include user-select-none();
-}
-
-ion-switch media-switch {
- margin: 0;
- cursor: pointer;
-}
-
-ion-switch[aria-disabled=true] {
- opacity: 0.5;
- color: $subdued-text-color;
- pointer-events: none;
-}
diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts
index 644ca18e37..c6f5c8b9ad 100644
--- a/ionic/components/switch/switch.ts
+++ b/ionic/components/switch/switch.ts
@@ -9,7 +9,7 @@ import {pointerCoord} from '../../util/dom';
* @private
*/
@Directive({
- selector: 'media-switch',
+ selector: '.switch-media',
host: {
'[class.switch-activated]': 'swtch.isActivated'
}
@@ -97,9 +97,9 @@ class MediaSwitch {
'' +
' ' +
- '' +
- ' ' +
+ '' +
`