diff --git a/ionic/components/select/select.ios.scss b/ionic/components/select/select.ios.scss
index 5949a0fa6c..e77bdd8b26 100644
--- a/ionic/components/select/select.ios.scss
+++ b/ionic/components/select/select.ios.scss
@@ -3,3 +3,13 @@
// iOS Select
// --------------------------------------------------
+
+$select-ios-padding-top: $item-ios-padding-top !default;
+$select-ios-padding-right: ($item-ios-padding-right / 2) !default;
+$select-ios-padding-bottom: $item-ios-padding-bottom !default;
+$select-ios-padding-left: $item-ios-padding-left !default;
+
+
+ion-select {
+ padding: $select-ios-padding-top $select-ios-padding-right $select-ios-padding-bottom $select-ios-padding-left;
+}
\ No newline at end of file
diff --git a/ionic/components/select/select.md.scss b/ionic/components/select/select.md.scss
index 4f7daf746d..ce790331cd 100644
--- a/ionic/components/select/select.md.scss
+++ b/ionic/components/select/select.md.scss
@@ -3,3 +3,13 @@
// Material Design Select
// --------------------------------------------------
+
+$select-md-padding-top: $item-md-padding-top !default;
+$select-md-padding-right: ($item-md-padding-right / 2) !default;
+$select-md-padding-bottom: $item-md-padding-bottom !default;
+$select-md-padding-left: $item-md-padding-left !default;
+
+
+ion-select {
+ padding: $select-md-padding-top $select-md-padding-right $select-md-padding-bottom $select-md-padding-left;
+}
\ No newline at end of file
diff --git a/ionic/components/select/select.scss b/ionic/components/select/select.scss
index 6a79b0a6fd..f478e5eb54 100644
--- a/ionic/components/select/select.scss
+++ b/ionic/components/select/select.scss
@@ -3,33 +3,41 @@
// Select
// --------------------------------------------------
-.select-icon {
- position: relative;
- min-width: 16px;
+ion-select {
+ display: flex;
+ overflow: hidden;
}
-.select-icon:after {
+.select-text {
+ flex: 1;
+ min-width: 16px;
+ max-width: 120px;
+ font-size: inherit;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.select-icon {
+ position: relative;
+ width: 16px;
+ height: 16px;
+}
+
+.select-icon .select-icon-inner {
position: absolute;
top: 50%;
- left: 50%;
- margin-top: -3px;
+ left: 5px;
+ margin-top: -2px;
width: 0;
height: 0;
border-top: 5px solid;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
color: #999;
- content: "";
pointer-events: none;
}
-.select-text-value {
- max-width: 120px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-ion-select ion-label {
- margin: 0;
-}
+.item-multiple-inputs ion-select {
+ position: relative;
+}
\ No newline at end of file
diff --git a/ionic/components/select/select.ts b/ionic/components/select/select.ts
index e43fba9005..cd2743de86 100644
--- a/ionic/components/select/select.ts
+++ b/ionic/components/select/select.ts
@@ -1,9 +1,9 @@
-import {Component, Directive, Optional, ElementRef, Input, Renderer, HostListener, ContentChild, ContentChildren, QueryList} from 'angular2/core';
+import {Component, Optional, ElementRef, Renderer, Input, HostListener, ContentChildren, QueryList} from 'angular2/core';
import {NgControl} from 'angular2/common';
import {Alert} from '../alert/alert';
import {Form} from '../../util/form';
-import {Label} from '../label/label';
+import {Item} from '../item/item';
import {merge} from '../../util/util';
import {NavController} from '../nav/nav-controller';
import {Option} from '../option/option';
@@ -19,9 +19,9 @@ import {Option} from '../option/option';
*
* Under-the-hood the `ion-select` actually uses the
* {@link ../../alert/Alert Alert API} to open up the overlay of options
- * which the user is presented with. Select takes one child `ion-label`
- * component, and numerous child `ion-option` components. Each `ion-option`
- * should be given a `value` attribute.
+ * which the user is presented with. Select can take numerous child
+ * `ion-option` components. If `ion-option` is not given a `value` attribute
+ * then it will use its text as the value.
*
* ### Single Value: Radio Buttons
*
@@ -31,11 +31,13 @@ import {Option} from '../option/option';
* receives the value of the selected option's value.
*
* ```html
- *
+ *
* Gender
- * Female
- * Male
- *
+ *
+ * Female
+ * Male
+ *
+ *
* ```
*
* ### Multiple Value: Checkboxes
@@ -44,18 +46,21 @@ import {Option} from '../option/option';
* to select multiple options. When multiple options can be selected, the alert
* overlay presents users with a checkbox styled list of options. The
* `ion-select multiple="true"` component's value receives an array of all the
- * selected option values.
+ * selected option values. In the example below, because each option is not given
+ * a `value`, then it'll use its text as the value instead.
*
* ```html
- *
+ *
* Toppings
- * Bacon
- * Black Olives
- * Extra Cheese
- * Mushrooms
- * Pepperoni
- * Sausage
- *
+ *
+ * Bacon
+ * Black Olives
+ * Extra Cheese
+ * Mushrooms
+ * Pepperoni
+ * Sausage
+ *
+ *
* ```
*
* ### Alert Buttons
@@ -91,25 +96,25 @@ import {Option} from '../option/option';
*/
@Component({
selector: 'ion-select',
- host: {
- 'class': 'item',
- 'tappable': '',
- 'tabindex': '0',
- '[attr.aria-disabled]': 'disabled'
- },
template:
- '' +
- '' +
- '
' +
- '' +
- '' +
- '
{{selectedText}}
' +
- '
' +
- '
{{_selectedText}}
' +
+ '' +
+ '',
+ host: {
+ '[class.select-disabled]': '_disabled'
+ }
})
export class Select {
- private selectedText: string = '';
- private labelId: string;
+ private _selectedText: string = '';
+ private _disabled: any = false;
+ private _labelId: string;
+
+ id: string;
@Input() cancelText: string = 'Cancel';
@Input() okText: string = 'OK';
@@ -117,43 +122,34 @@ export class Select {
@Input() alertOptions: any = {};
@Input() checked: any = false;
@Input() disabled: boolean = false;
- @Input() id: string = '';
@Input() multiple: string = '';
- @ContentChild(Label) label: Label;
@ContentChildren(Option) options: QueryList
-
+
Car Options
- Backup Camera
- Headted Seats
- Keyless Entry
- Navigation
- Parking Assist
- Sun Roof
-
+
+ Backup Camera
+ Headted Seats
+ Keyless Entry
+ Navigation
+ Parking Assist
+ Sun Roof
+
+
toppings: {{toppings}}
diff --git a/ionic/components/select/test/single-value/main.html b/ionic/components/select/test/single-value/main.html
index ec8b97d789..20a61c3425 100644
--- a/ionic/components/select/test/single-value/main.html
+++ b/ionic/components/select/test/single-value/main.html
@@ -2,45 +2,84 @@
-
+
Gender
- Female
- Male
-
+
+ Female
+ Male
+
+
-
+
Gaming
- NES
- Nintendo64
- PlayStation
- Sega Genesis
- Sega Saturn
- SNES
-
+
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
-
+
Operating System
- DOS
- Linux
- Mac OS 7
- Mac OS 8
- Windows 3.1
- Windows 95
- Windows 98
-
+
+ DOS
+ Linux
+ Mac OS 7
+ Mac OS 8
+ Windows 3.1
+ Windows 95
+ Windows 98
+
+
-
+
Music
- Alice in Chains
- Green Day
- Hole
- Korn
- Nirvana
- Pearl Jam
- Smashing Pumpkins
- Soundgarden
- Stone Temple Pilots
-
+
+ Alice in Chains
+ Green Day
+ Hole
+ Korn
+ Nirvana
+ Pearl Jam
+ Smashing Pumpkins
+ Soundgarden
+ Stone Temple Pilots
+
+
+
+
+ Date
+
+ January
+ February
+ March
+ April
+ May
+ June
+ July
+ August
+ September
+ October
+ November
+ December
+
+
+ 1989
+ 1990
+ 1991
+ 1992
+ 1993
+ 1994
+ 1995
+ 1996
+ 1997
+ 1998
+ 1999
+
+
gender: {{gender}}
diff --git a/ionic/components/toggle/test/basic/main.html b/ionic/components/toggle/test/basic/main.html
index 65b48fe0e3..e5089207c1 100644
--- a/ionic/components/toggle/test/basic/main.html
+++ b/ionic/components/toggle/test/basic/main.html
@@ -8,29 +8,35 @@
-
- Apple, value=apple, init checked
-
+
+ Apple, value=apple, init checked
+
+
-
- Banana, init no checked/value attributes
-
+
+ Banana, init no checked/value attributes
+
+
-
- Cherry, value=cherry, init disabled
-
+
+ Cherry, value=cherry, init disabled
+
+
-
- Grape, value=grape, init checked, disabled
-
+
+ Grape, value=grape, init checked, disabled
+
+
-
- Secondary color
-
+
+ Secondary color
+
+
-
- I'm an NgModel
-
+
+ I'm an NgModel
+
+
diff --git a/ionic/components/toggle/toggle.ios.scss b/ionic/components/toggle/toggle.ios.scss
index e222eae2f4..53581057c1 100644
--- a/ionic/components/toggle/toggle.ios.scss
+++ b/ionic/components/toggle/toggle.ios.scss
@@ -26,37 +26,20 @@ $toggle-ios-media-padding: 6px ($item-ios-padding-right / 2) 5px ($i
$toggle-ios-transition-duration: 300ms !default;
$toggle-ios-disabled-opacity: 0.5 !default;
-$toggle-ios-disabled-text-color: $subdued-text-ios-color !default;
-// Toggle
+// iOS Toggle
// -----------------------------------------
ion-toggle {
- display: block;
- @include user-select-none();
-
- &.item.activated {
- background: $list-ios-background-color;
- }
+ position: relative;
}
-// Toggle Wrapper
-// -----------------------------------------
-
-.toggle-media {
- margin: $toggle-ios-media-margin;
- padding: $toggle-ios-media-padding;
- cursor: pointer;
-}
-
-
-// Toggle Background Track
+// iOS Toggle Background Track: Unchecked
// -----------------------------------------
.toggle-icon {
- // bg track, when not checked
position: relative;
display: block;
width: $toggle-ios-width;
@@ -69,11 +52,10 @@ ion-toggle {
}
-// Toggle Background Track, Inner Oval
+// iOS Toggle Background Oval: Unchecked
// -----------------------------------------
.toggle-icon:before {
- // inner bg track's oval, when not checked
content: '';
position: absolute;
top: $toggle-ios-border-width;
@@ -89,12 +71,10 @@ ion-toggle {
}
-// Toggle Knob
+// iOS Toggle Inner Knob: Unchecked
// -----------------------------------------
-.toggle-icon:after {
- // knob, when not checked
- content: '';
+.toggle-inner {
position: absolute;
top: $toggle-ios-border-width;
left: $toggle-ios-border-width;
@@ -110,65 +90,96 @@ ion-toggle {
}
-// Toggle Checked
+// iOS Toggle Background Track: Checked
// -----------------------------------------
-ion-toggle[aria-checked=true] {
- .toggle-icon {
- // bg track, when checked
- background-color: $toggle-ios-background-color-on;
-
- &:before {
- // inner bg track's oval, when checked
- transform: scale3d(0, 0, 0);
- }
-
- &:after {
- // knob, when checked
- transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0);
- }
- }
-
- .toggle-activated .toggle-icon {
- &:before {
- // inner bg track's oval, when checked
- transform: scale3d(0, 0, 0);
- }
-
- &:after {
- // when pressing down on the toggle and IS checked
- // make the knob wider and move it left a bit
- left: $toggle-ios-border-width - 6;
-
- // when pressing down on the toggle and NOT checked
- // then make the knob wider
- width: $toggle-ios-handle-width + 6;
- }
- }
+.toggle-checked {
+ background-color: $toggle-ios-background-color-on;
}
-// Toggle Disabled
+// iOS Toggle Background Oval: Activated or Checked
// -----------------------------------------
-ion-toggle[aria-disabled=true] {
+.toggle-activated:before,
+.toggle-checked:before {
+ transform: scale3d(0, 0, 0);
+}
+
+
+// iOS Toggle Inner Knob: Checked
+// -----------------------------------------
+
+.toggle-checked .toggle-inner {
+ transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0);
+
+}
+
+// iOS Toggle Background Oval: Activated and Checked
+// -----------------------------------------
+
+.toggle-activated.toggle-checked:before {
+ transform: scale3d(0, 0, 0);
+}
+
+
+// iOS Toggle Inner Knob: Activated and Unchecked
+// -----------------------------------------
+
+.toggle-activated .toggle-inner {
+ width: $toggle-ios-handle-width + 6;
+}
+
+
+// iOS Toggle Inner Knob: Activated and Checked
+// -----------------------------------------
+
+.toggle-activated.toggle-checked .toggle-inner {
+ // when pressing down on the toggle and IS checked
+ // make the knob wider and move it left a bit
+ left: $toggle-ios-border-width - 6;
+}
+
+
+// iOS Toggle: Disabled
+// -----------------------------------------
+
+.toggle-disabled,
+.item-toggle-disabled ion-label {
opacity: $toggle-ios-disabled-opacity;
- color: $toggle-ios-disabled-text-color;
pointer-events: none;
}
+.toggle-disabled ion-radio {
+ opacity: $toggle-ios-disabled-opacity;
+}
+
+
+// iOS Toggle within an item
+// -----------------------------------------
+
+.item ion-toggle {
+ margin: $toggle-ios-media-margin;
+ padding: $toggle-ios-media-padding;
+}
+
+
+// iOS Toggle Within An Item
+// -----------------------------------------
+
+.item ion-toggle {
+ margin: $toggle-ios-media-margin;
+ padding: $toggle-ios-media-padding;
+}
+
// iOS Toggle Color Mixin
// --------------------------------------------------
-@mixin ios-toggle-theme($color-name, $bg-on) {
-
- ion-toggle[#{$color-name}] {
-
- &[aria-checked=true] .toggle-icon {
- background-color: $bg-on;
- }
+@mixin ios-toggle-theme($color-name, $color-value) {
+ ion-toggle[#{$color-name}] .toggle-checked {
+ background-color: $color-value;
}
}
@@ -177,6 +188,8 @@ ion-toggle[aria-disabled=true] {
// Generate iOS Toggle Colors
// --------------------------------------------------
-@each $color-name, $value in $colors-ios {
- @include ios-toggle-theme($color-name, $value);
+@each $color-name, $color-value in $colors-ios {
+
+ @include ios-toggle-theme($color-name, $color-value);
+
}
diff --git a/ionic/components/toggle/toggle.md.scss b/ionic/components/toggle/toggle.md.scss
index 230dbb6476..3f609ae79d 100644
--- a/ionic/components/toggle/toggle.md.scss
+++ b/ionic/components/toggle/toggle.md.scss
@@ -23,33 +23,20 @@ $toggle-md-media-padding: 12px ($item-md-padding-right / 2) 12px
$toggle-md-transition-duration: 300ms !default;
$toggle-md-disabled-opacity: 0.5 !default;
-$toggle-md-disabled-text-color: $subdued-text-md-color !default;
-// Toggle
+// Material Design Toggle
// -----------------------------------------
ion-toggle {
- display: block;
- @include user-select-none();
+ position: relative;
}
-// Toggle Wrapper
-// -----------------------------------------
-
-.toggle-media {
- margin: $toggle-md-media-margin;
- padding: $toggle-md-media-padding;
- cursor: pointer;
-}
-
-
-// Toggle Background Track
+// Material Design Toggle Background Track: Unchecked
// -----------------------------------------
.toggle-icon {
- // bg track, when not checked
position: relative;
display: block;
width: $toggle-md-track-width;
@@ -62,12 +49,10 @@ ion-toggle {
}
-// Toggle Knob
+// Material Design Toggle Inner Knob: Unchecked
// -----------------------------------------
-.toggle-icon:after {
- // knob, when not checked
- content: '';
+.toggle-inner {
position: absolute;
top: ($toggle-md-handle-height - $toggle-md-track-height) / -2;
left: 0;
@@ -85,44 +70,70 @@ ion-toggle {
}
-// Toggle Checked
+// Material Design Toggle Background Track: Checked
// -----------------------------------------
-ion-toggle[aria-checked=true] .toggle-icon {
- // bg track, when not checked
+.toggle-checked {
background-color: $toggle-md-track-background-color-on;
-
- &:after {
- // knob, when not checked
- background-color: $toggle-md-handle-background-color-on;
- transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0);
- }
}
-// Toggle Disabled
+// Material Design Toggle Inner Knob: Checked
// -----------------------------------------
-ion-toggle[aria-disabled=true] {
+.toggle-checked .toggle-inner {
+ background-color: $toggle-md-handle-background-color-on;
+ transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0);
+}
+
+
+// Material Design Toggle: Disabled
+// -----------------------------------------
+
+.toggle-disabled,
+.item-toggle-disabled ion-label {
opacity: $toggle-md-disabled-opacity;
- color: $toggle-md-disabled-text-color;
pointer-events: none;
}
+.toggle-disabled ion-radio {
+ opacity: $toggle-md-disabled-opacity;
+}
+
+
+// Material Design Toggle within an item
+// -----------------------------------------
+
+.item ion-toggle {
+ margin: $toggle-md-media-margin;
+ padding: $toggle-md-media-padding;
+ cursor: pointer;
+}
+
+
+// Material Design Toggle Within An Item
+// -----------------------------------------
+
+.item ion-toggle {
+ margin: $toggle-md-media-margin;
+ padding: $toggle-md-media-padding;
+ cursor: pointer;
+}
+
// Material Design Color Mixin
// --------------------------------------------------
-@mixin toggle-theme-md($color-name, $bg-on) {
+@mixin toggle-theme-md($color-name, $color-value) {
ion-toggle[#{$color-name}] {
- &[aria-checked=true] .toggle-icon {
- background-color: lighten($bg-on, 25%);
+ .toggle-checked {
+ background-color: lighten($color-value, 25%);
}
- &[aria-checked=true] .toggle-icon:after {
- background-color: $bg-on;
+ .toggle-checked .toggle-inner {
+ background-color: $color-value;
}
}
@@ -133,8 +144,8 @@ ion-toggle[aria-disabled=true] {
// Generate Material Design Toggle Auxiliary Colors
// --------------------------------------------------
-@each $color-name, $value in $colors-md {
+@each $color-name, $color-value in $colors-md {
- @include toggle-theme-md($color-name, $value);
+ @include toggle-theme-md($color-name, $color-value);
}
diff --git a/ionic/components/toggle/toggle.ts b/ionic/components/toggle/toggle.ts
index 22346a282b..051f600c7f 100644
--- a/ionic/components/toggle/toggle.ts
+++ b/ionic/components/toggle/toggle.ts
@@ -1,16 +1,19 @@
-import {Component, ElementRef, Renderer, Input, HostListener, Optional} from 'angular2/core';
+import {Component, ElementRef, Renderer, Input, Optional} from 'angular2/core';
import {NgControl} from 'angular2/common';
-import {Form} from '../../util/form';
import {Config} from '../../config/config';
+import {Form} from '../../util/form';
+import {Item} from '../item/item';
import {pointerCoord} from '../../util/dom';
/**
* @name Toggle
* @description
- * A toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the `