diff --git a/packages/core/src/components/checkbox/checkbox.ios.vars.scss b/packages/core/src/components/checkbox/checkbox.ios.vars.scss
index a85fbaa2a5..61b3b857af 100644
--- a/packages/core/src/components/checkbox/checkbox.ios.vars.scss
+++ b/packages/core/src/components/checkbox/checkbox.ios.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
+@import "../item/item.ios.vars";
+
// iOS Checkbox
// --------------------------------------------------
diff --git a/packages/core/src/components/checkbox/checkbox.md.vars.scss b/packages/core/src/components/checkbox/checkbox.md.vars.scss
index 0c3e301156..da794afa30 100644
--- a/packages/core/src/components/checkbox/checkbox.md.vars.scss
+++ b/packages/core/src/components/checkbox/checkbox.md.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
+@import "../item/item.md.vars";
+
// Material Design Checkbox
// --------------------------------------------------
diff --git a/packages/core/src/components/datetime/datetime.ios.vars.scss b/packages/core/src/components/datetime/datetime.ios.vars.scss
index 01f3239e71..dcdb07cfd0 100644
--- a/packages/core/src/components/datetime/datetime.ios.vars.scss
+++ b/packages/core/src/components/datetime/datetime.ios.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
+@import "../item/item.ios.vars";
+
// iOS Datetime
// --------------------------------------------------
diff --git a/packages/core/src/components/datetime/datetime.md.vars.scss b/packages/core/src/components/datetime/datetime.md.vars.scss
index 4994b281da..9843de3f1c 100644
--- a/packages/core/src/components/datetime/datetime.md.vars.scss
+++ b/packages/core/src/components/datetime/datetime.md.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
+@import "../item/item.md.vars";
+
// Material Design Datetime
// --------------------------------------------------
diff --git a/packages/core/src/components/input/input.ios.scss b/packages/core/src/components/input/input.ios.scss
index 08aa7eceb4..bbf52152ac 100644
--- a/packages/core/src/components/input/input.ios.scss
+++ b/packages/core/src/components/input/input.ios.scss
@@ -16,8 +16,8 @@
// --------------------------------------------------
.input-ios .inset-input {
- @include padding(($item-ios-padding-top / 2), ($item-ios-padding-end / 2), ($item-ios-padding-bottom / 2), ($item-ios-padding-start / 2));
- @include margin(($item-ios-padding-top / 2), $item-ios-padding-end, ($item-ios-padding-bottom / 2), 0);
+ @include padding($input-ios-inset-padding-top, $input-ios-inset-padding-end, $input-ios-inset-padding-bottom, $input-ios-inset-padding-start);
+ @include margin($input-ios-inset-margin-top, $input-ios-inset-margin-end, $input-ios-inset-margin-bottom, $input-ios-inset-margin-start);
}
@@ -102,20 +102,28 @@
@include padding(8px, null, 8px, 0);
}
+// iOS Input After Label
+// --------------------------------------------------
+
+.label-ios + ion-input .text-input,
+.label-ios + ion-textarea .text-input,
+.label-ios + .input + .cloned-input {
+ @include margin-horizontal($item-ios-padding-start, null);
+}
// iOS Clear Input Icon
// --------------------------------------------------
-.input-ios[clearInput] {
+.input-ios[clear-input] {
position: relative;
}
-.input-ios[clearInput] .text-input {
- @include padding-horizontal(null, $input-ios-input-clear-icon-width);
+.input-ios[clear-input] .text-input {
+ @include padding-horizontal(null, ($input-ios-input-clear-icon-width + $item-ios-padding-end));
}
.input-ios .text-input-clear-icon {
- @include position-horizontal(null, ($item-ios-padding-end / 2));
+ @include position-horizontal(null, 0);
@include svg-background-image($input-ios-input-clear-icon-svg);
width: $input-ios-input-clear-icon-width;
diff --git a/packages/core/src/components/input/input.ios.vars.scss b/packages/core/src/components/input/input.ios.vars.scss
index 20e7f0cb62..90f61a2f7c 100644
--- a/packages/core/src/components/input/input.ios.vars.scss
+++ b/packages/core/src/components/input/input.ios.vars.scss
@@ -1,46 +1,72 @@
@import "../../themes/ionic.globals.ios";
+@import "../item/item.ios.vars";
+
// iOS Input
// --------------------------------------------------
/// @prop - Margin top of the input
-$input-ios-margin-top: $item-ios-padding-top !default;
+$input-ios-margin-top: $item-ios-padding-top !default;
/// @prop - Margin end of the input
-$input-ios-margin-end: ($item-ios-padding-end / 2) !default;
+$input-ios-margin-end: ($item-ios-padding-end / 2) !default;
/// @prop - Margin bottom of the input
-$input-ios-margin-bottom: $item-ios-padding-bottom !default;
+$input-ios-margin-bottom: $item-ios-padding-bottom !default;
/// @prop - Margin start of the input
-$input-ios-margin-start: 0 !default;
+$input-ios-margin-start: 0 !default;
+
+/// @prop - Padding top of the inset input
+$input-ios-inset-padding-top: ($item-ios-padding-top / 2) !default;
+
+/// @prop - Padding end of the inset input
+$input-ios-inset-padding-end: ($item-ios-padding-end / 2) !default;
+
+/// @prop - Padding bottom of the inset input
+$input-ios-inset-padding-bottom: ($item-ios-padding-bottom / 2) !default;
+
+/// @prop - Padding start of the inset input
+$input-ios-inset-padding-start: ($item-ios-padding-start / 2) !default;
+
+/// @prop - Margin top of the inset input
+$input-ios-inset-margin-top: ($item-ios-padding-top / 2) !default;
+
+/// @prop - Margin end of the inset input
+$input-ios-inset-margin-end: $item-ios-padding-end !default;
+
+/// @prop - Margin bottom of the inset input
+$input-ios-inset-margin-bottom: ($item-ios-padding-bottom / 2) !default;
+
+/// @prop - Margin start of the inset input
+$input-ios-inset-margin-start: 0 !default;
/// @prop - Width of the icon used to clear the input
-$input-ios-input-clear-icon-width: 30px !default;
+$input-ios-input-clear-icon-width: 30px !default;
/// @prop - Color of the icon used to clear the input
-$input-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default;
+$input-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default;
/// @prop - Icon used to clear the input
-$input-ios-input-clear-icon-svg: "" !default;
+$input-ios-input-clear-icon-svg: "" !default;
/// @prop - Size of the icon used to clear the input
-$input-ios-input-clear-icon-size: 18px !default;
+$input-ios-input-clear-icon-size: 18px !default;
/// @prop - Show the focus highlight when the input has focus
-$input-ios-show-focus-highlight: false !default;
+$input-ios-show-focus-highlight: false !default;
/// @prop - Show the valid highlight when it is valid and has a value
-$input-ios-show-valid-highlight: $input-ios-show-focus-highlight !default;
+$input-ios-show-valid-highlight: $input-ios-show-focus-highlight !default;
/// @prop - Show the invalid highlight when it is invalid and has value
-$input-ios-show-invalid-highlight: $input-ios-show-focus-highlight !default;
+$input-ios-show-invalid-highlight: $input-ios-show-focus-highlight !default;
/// @prop - Color of the input highlight
-$input-ios-highlight-color: color($colors-ios, primary) !default;
+$input-ios-highlight-color: color($colors-ios, primary) !default;
/// @prop - Color of the input highlight when valid
-$input-ios-highlight-color-valid: $input-highlight-color-valid !default;
+$input-ios-highlight-color-valid: $input-highlight-color-valid !default;
/// @prop - Color of the input highlight when invalid
-$input-ios-highlight-color-invalid: $input-highlight-color-invalid !default;
+$input-ios-highlight-color-invalid: $input-highlight-color-invalid !default;
diff --git a/packages/core/src/components/input/input.md.scss b/packages/core/src/components/input/input.md.scss
index 94f800746f..717a9f9c69 100644
--- a/packages/core/src/components/input/input.md.scss
+++ b/packages/core/src/components/input/input.md.scss
@@ -16,8 +16,8 @@
// --------------------------------------------------
.input-md .inset-input {
- @include padding(($item-md-padding-top / 2), ($item-md-padding-end / 2), ($item-md-padding-bottom / 2), ($item-md-padding-start / 2));
- @include margin(($item-md-padding-top / 2), $item-md-padding-end, ($item-md-padding-bottom / 2), $item-md-padding-start);
+ @include padding($input-md-inset-padding-top, $input-md-inset-padding-end, $input-md-inset-padding-bottom, $input-md-inset-padding-start);
+ @include margin($input-md-inset-margin-top, $input-md-inset-margin-end, $input-md-inset-margin-bottom, $input-md-inset-margin-start);
}
@@ -102,16 +102,16 @@
// Material Design Clear Input Icon
// --------------------------------------------------
-.input-md[clearInput] {
+.input-md[clear-input] {
position: relative;
}
-.input-md[clearInput] .text-input {
+.input-md[clear-input] .text-input {
@include padding-horizontal(null, $input-md-input-clear-icon-width);
}
.input-md .text-input-clear-icon {
- @include position-horizontal(null, ($item-md-padding-end / 2));
+ @include position-horizontal(null, 0);
@include svg-background-image($input-md-input-clear-icon-svg);
width: $input-md-input-clear-icon-width;
diff --git a/packages/core/src/components/input/input.md.vars.scss b/packages/core/src/components/input/input.md.vars.scss
index 412e88e767..1a85f10255 100644
--- a/packages/core/src/components/input/input.md.vars.scss
+++ b/packages/core/src/components/input/input.md.vars.scss
@@ -1,46 +1,72 @@
@import "../../themes/ionic.globals.md";
+@import "../item/item.md.vars";
+
// Material Design Input
// --------------------------------------------------
/// @prop - Margin top of the input
-$input-md-margin-top: $item-md-padding-top !default;
+$input-md-margin-top: $item-md-padding-top !default;
/// @prop - Margin end of the input
-$input-md-margin-end: ($item-md-padding-end / 2) !default;
+$input-md-margin-end: ($item-md-padding-end / 2) !default;
/// @prop - Margin bottom of the input
-$input-md-margin-bottom: $item-md-padding-bottom !default;
+$input-md-margin-bottom: $item-md-padding-bottom !default;
/// @prop - Margin start of the input
-$input-md-margin-start: ($item-md-padding-start / 2) !default;
+$input-md-margin-start: ($item-md-padding-start / 2) !default;
/// @prop - Width of the icon used to clear the input
-$input-md-input-clear-icon-width: 30px !default;
+$input-md-input-clear-icon-width: 30px !default;
/// @prop - Color of the icon used to clear the input
-$input-md-input-clear-icon-color: #5b5b5b !default;
+$input-md-input-clear-icon-color: #5b5b5b !default;
/// @prop - Icon used to clear the input
-$input-md-input-clear-icon-svg: "" !default;
+$input-md-input-clear-icon-svg: "" !default;
/// @prop - Size of the icon used to clear the input
-$input-md-input-clear-icon-size: 22px !default;
+$input-md-input-clear-icon-size: 22px !default;
/// @prop - Show the focus highlight when the input has focus
-$input-md-show-focus-highlight: true !default;
+$input-md-show-focus-highlight: true !default;
/// @prop - Show the valid highlight when it is valid and has a value
-$input-md-show-valid-highlight: $input-md-show-focus-highlight !default;
+$input-md-show-valid-highlight: $input-md-show-focus-highlight !default;
/// @prop - Show the invalid highlight when it is invalid and has value
-$input-md-show-invalid-highlight: $input-md-show-focus-highlight !default;
+$input-md-show-invalid-highlight: $input-md-show-focus-highlight !default;
/// @prop - Color of the input highlight
-$input-md-highlight-color: color($colors-md, primary) !default;
+$input-md-highlight-color: color($colors-md, primary) !default;
/// @prop - Color of the input highlight when valid
-$input-md-highlight-color-valid: $input-highlight-color-valid !default;
+$input-md-highlight-color-valid: $input-highlight-color-valid !default;
/// @prop - Color of the input highlight when invalid
-$input-md-highlight-color-invalid: $input-highlight-color-invalid !default;
+$input-md-highlight-color-invalid: $input-highlight-color-invalid !default;
+
+/// @prop - Padding top of the inset input
+$input-md-inset-padding-top: ($item-md-padding-top / 2) !default;
+
+/// @prop - Padding end of the inset input
+$input-md-inset-padding-end: ($item-md-padding-end / 2) !default;
+
+/// @prop - Padding bottom of the inset input
+$input-md-inset-padding-bottom: ($item-md-padding-bottom / 2) !default;
+
+/// @prop - Padding start of the inset input
+$input-md-inset-padding-start: ($item-md-padding-start / 2) !default;
+
+/// @prop - Margin top of the inset input
+$input-md-inset-margin-top: ($item-md-padding-top / 2) !default;
+
+/// @prop - Margin end of the inset input
+$input-md-inset-margin-end: $item-md-padding-end !default;
+
+/// @prop - Margin bottom of the inset input
+$input-md-inset-margin-bottom: ($item-md-padding-bottom / 2) !default;
+
+/// @prop - Margin start of the inset input
+$input-md-inset-margin-start: $item-md-padding-start !default;
diff --git a/packages/core/src/components/input/test/basic/index.html b/packages/core/src/components/input/test/basic/index.html
index df22e6d747..837799a70c 100644
--- a/packages/core/src/components/input/test/basic/index.html
+++ b/packages/core/src/components/input/test/basic/index.html
@@ -17,13 +17,17 @@
- Default
-
+
+
+
+
+ Default Label
+
Clear Input
-
+
diff --git a/packages/core/src/components/item-divider/item-divider.ios.vars.scss b/packages/core/src/components/item-divider/item-divider.ios.vars.scss
index 204b5c0623..f34889c3aa 100644
--- a/packages/core/src/components/item-divider/item-divider.ios.vars.scss
+++ b/packages/core/src/components/item-divider/item-divider.ios.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
+@import "../item/item.ios.vars";
+
// iOS Item Divider
// --------------------------------------------------
diff --git a/packages/core/src/components/item-divider/item-divider.md.vars.scss b/packages/core/src/components/item-divider/item-divider.md.vars.scss
index 7a1eb89e73..bb67a4c031 100644
--- a/packages/core/src/components/item-divider/item-divider.md.vars.scss
+++ b/packages/core/src/components/item-divider/item-divider.md.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
+@import "../item/item.md.vars";
+
// Material Design Item Divider
// --------------------------------------------------
diff --git a/packages/core/src/components/item/item.ios.scss b/packages/core/src/components/item/item.ios.scss
index 2dbdea3c77..54b67fbafb 100644
--- a/packages/core/src/components/item/item.ios.scss
+++ b/packages/core/src/components/item/item.ios.scss
@@ -92,7 +92,6 @@
.item-ios ion-icon[slot="start"],
.item-ios ion-icon[slot="end"] {
@include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0);
-
}
.item-ios .item-button {
@@ -117,6 +116,11 @@
@include margin(($item-ios-padding-end / 2));
}
+.item-ios.item-label-stacked [slot="end"],
+.item-ios.item-label-floating [slot="end"] {
+ @include margin($item-ios-padding-media-top - 2, null, $item-ios-padding-media-bottom - 2, null);
+}
+
// iOS Item Avatar
// --------------------------------------------------
@@ -126,6 +130,7 @@
height: $item-ios-avatar-height;
}
+
// iOS Item Thumbnail
// --------------------------------------------------
diff --git a/packages/core/src/components/item/item.ios.vars.scss b/packages/core/src/components/item/item.ios.vars.scss
index 46060a068e..13477679d3 100644
--- a/packages/core/src/components/item/item.ios.vars.scss
+++ b/packages/core/src/components/item/item.ios.vars.scss
@@ -44,3 +44,27 @@ $item-ios-detail-push-color: $list-ios-border-color !default;
/// @prop - Icon for the detail arrow
$item-ios-detail-push-svg: "" !default;
+
+/// @prop - Padding top for the item content
+$item-ios-padding-top: 11px !default;
+
+/// @prop - Padding end for the item content
+$item-ios-padding-end: 16px !default;
+
+/// @prop - Padding bottom for the item content
+$item-ios-padding-bottom: 11px !default;
+
+/// @prop - Padding start for the item content
+$item-ios-padding-start: 16px !default;
+
+/// @prop - Padding top for the media content
+$item-ios-padding-media-top: 8px !default;
+
+/// @prop - Padding bottom for the media content
+$item-ios-padding-media-bottom: 8px !default;
+
+/// @prop - Padding top for the icon in an item
+$item-ios-padding-icon-top: 9px !default;
+
+/// @prop - Padding bottom for the icon in an item
+$item-ios-padding-icon-bottom: 8px !default;
diff --git a/packages/core/src/components/item/item.md.scss b/packages/core/src/components/item/item.md.scss
index 93fe21b012..46e09f35ab 100644
--- a/packages/core/src/components/item/item.md.scss
+++ b/packages/core/src/components/item/item.md.scss
@@ -128,6 +128,11 @@
@include margin(($item-md-padding-end / 2));
}
+.item-md.item-label-stacked [slot="end"],
+.item-md.item-label-floating [slot="end"] {
+ @include margin($item-md-padding-media-top - 2, null, $item-md-padding-media-bottom - 2, null);
+}
+
// Material Design Item Avatar
// --------------------------------------------------
diff --git a/packages/core/src/components/item/item.md.vars.scss b/packages/core/src/components/item/item.md.vars.scss
index 538808fc30..b60e77ccb0 100644
--- a/packages/core/src/components/item/item.md.vars.scss
+++ b/packages/core/src/components/item/item.md.vars.scss
@@ -35,3 +35,27 @@ $item-md-detail-push-color: $list-md-border-color !default;
/// @prop - Icon for the detail arrow
$item-md-detail-push-svg: "" !default;
+
+/// @prop - Padding top for the item content
+$item-md-padding-top: 13px !default;
+
+/// @prop - Padding end for the item content
+$item-md-padding-end: 16px !default;
+
+/// @prop - Padding bottom for the item content
+$item-md-padding-bottom: 13px !default;
+
+/// @prop - Padding start for the item content
+$item-md-padding-start: 16px !default;
+
+/// @prop - Padding top for the media content
+$item-md-padding-media-top: 9px !default;
+
+/// @prop - Padding bottom for the media content
+$item-md-padding-media-bottom: 9px !default;
+
+/// @prop - Padding top for the icon in an item
+$item-md-padding-icon-top: 11px !default;
+
+/// @prop - Padding bottom for the icon in an item
+$item-md-padding-icon-bottom: 10px !default;
diff --git a/packages/core/src/components/label/label.ios.scss b/packages/core/src/components/label/label.ios.scss
index d1ea478a97..36ec349da4 100644
--- a/packages/core/src/components/label/label.ios.scss
+++ b/packages/core/src/components/label/label.ios.scss
@@ -19,18 +19,6 @@
}
-// iOS Input By Label
-// --------------------------------------------------
-
-.label-ios + ion-input .text-input,
-.label-ios + ion-textarea .text-input,
-.label-ios + .input + .cloned-input {
- @include margin-horizontal($item-ios-padding-start, null);
-
- width: calc(100% - (#{$item-ios-padding-end} / 2) - #{$item-ios-padding-start});
-}
-
-
// iOS Stacked & Floating Labels
// --------------------------------------------------
@@ -53,11 +41,6 @@
@include transform(translate3d(0, 0, 0), scale(.8));
}
-.item-ios.item-label-stacked [slot="end"],
-.item-ios.item-label-floating [slot="end"] {
- @include margin($item-ios-padding-media-top - 2, null, $item-ios-padding-media-bottom - 2, null);
-}
-
.item-input-has-focus .label-ios[stacked],
.item-input-has-focus .label-ios[floating] {
color: $label-ios-text-color-focused;
diff --git a/packages/core/src/components/label/label.ios.vars.scss b/packages/core/src/components/label/label.ios.vars.scss
index 2cfb0acf30..511a2af314 100644
--- a/packages/core/src/components/label/label.ios.vars.scss
+++ b/packages/core/src/components/label/label.ios.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
+@import "../item/item.ios.vars";
+
// iOS Label
// --------------------------------------------------
diff --git a/packages/core/src/components/label/label.md.scss b/packages/core/src/components/label/label.md.scss
index be88853350..93c1a2256d 100644
--- a/packages/core/src/components/label/label.md.scss
+++ b/packages/core/src/components/label/label.md.scss
@@ -13,6 +13,7 @@
line-height: $label-md-text-wrap-line-height;
}
+
// Material Design Default Label Inside An Input/Select Item
// --------------------------------------------------
@@ -52,11 +53,6 @@
@include transform(translate3d(0, 0, 0), scale(.8));
}
-.item-md.item-label-stacked [slot="end"],
-.item-md.item-label-floating [slot="end"] {
- @include margin($item-md-padding-media-top - 2, null, $item-md-padding-media-bottom - 2, null);
-}
-
// Generate Material Design Label colors
// --------------------------------------------------
diff --git a/packages/core/src/components/list-header/list-header.ios.vars.scss b/packages/core/src/components/list-header/list-header.ios.vars.scss
index 9c07a397bd..5b86a891dc 100644
--- a/packages/core/src/components/list-header/list-header.ios.vars.scss
+++ b/packages/core/src/components/list-header/list-header.ios.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
+@import "../item/item.ios.vars";
+
// iOS List Header
// --------------------------------------------------
diff --git a/packages/core/src/components/list-header/list-header.md.vars.scss b/packages/core/src/components/list-header/list-header.md.vars.scss
index 9a47ef5424..a97a4bccd3 100644
--- a/packages/core/src/components/list-header/list-header.md.vars.scss
+++ b/packages/core/src/components/list-header/list-header.md.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
+@import "../item/item.md.vars";
+
// Material Design List Header
// --------------------------------------------------
diff --git a/packages/core/src/components/radio/radio.ios.vars.scss b/packages/core/src/components/radio/radio.ios.vars.scss
index 0273c637c7..53b74b9f2d 100644
--- a/packages/core/src/components/radio/radio.ios.vars.scss
+++ b/packages/core/src/components/radio/radio.ios.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
+@import "../item/item.ios.vars";
+
// iOS Radio
// --------------------------------------------------
diff --git a/packages/core/src/components/radio/radio.md.vars.scss b/packages/core/src/components/radio/radio.md.vars.scss
index 08b25081f0..d5ec8245e5 100644
--- a/packages/core/src/components/radio/radio.md.vars.scss
+++ b/packages/core/src/components/radio/radio.md.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
+@import "../item/item.md.vars";
+
// Material Design Radio
// --------------------------------------------------
diff --git a/packages/core/src/components/select/select.ios.vars.scss b/packages/core/src/components/select/select.ios.vars.scss
index 9cc7f69fee..e7090cee20 100644
--- a/packages/core/src/components/select/select.ios.vars.scss
+++ b/packages/core/src/components/select/select.ios.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
+@import "../item/item.ios.vars";
+
// iOS Select
// --------------------------------------------------
diff --git a/packages/core/src/components/select/select.md.vars.scss b/packages/core/src/components/select/select.md.vars.scss
index 55f403e676..ef11e9a789 100644
--- a/packages/core/src/components/select/select.md.vars.scss
+++ b/packages/core/src/components/select/select.md.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
+@import "../item/item.md.vars";
+
// Material Design Select
// --------------------------------------------------
diff --git a/packages/core/src/components/thumbnail/test/basic/index.html b/packages/core/src/components/thumbnail/test/basic/index.html
index d740c61621..e34f0fb37b 100644
--- a/packages/core/src/components/thumbnail/test/basic/index.html
+++ b/packages/core/src/components/thumbnail/test/basic/index.html
@@ -28,6 +28,13 @@
Item Thumbnail
+
+
+
+ 
+
+ Wide Thumbnail
+
diff --git a/packages/core/src/components/toggle/toggle.ios.vars.scss b/packages/core/src/components/toggle/toggle.ios.vars.scss
index 4d70381789..071e7e96fe 100644
--- a/packages/core/src/components/toggle/toggle.ios.vars.scss
+++ b/packages/core/src/components/toggle/toggle.ios.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.ios";
+@import "../item/item.ios.vars";
+
// iOS Toggle
// --------------------------------------------------
diff --git a/packages/core/src/components/toggle/toggle.md.vars.scss b/packages/core/src/components/toggle/toggle.md.vars.scss
index b4e9fae42b..67f3aad494 100644
--- a/packages/core/src/components/toggle/toggle.md.vars.scss
+++ b/packages/core/src/components/toggle/toggle.md.vars.scss
@@ -1,5 +1,7 @@
@import "../../themes/ionic.globals.md";
+@import "../item/item.md.vars";
+
// Material Design Toggle
// --------------------------------------------------
diff --git a/packages/core/src/themes/ionic.theme.dark.ios.scss b/packages/core/src/themes/ionic.theme.dark.ios.scss
index de931a9386..59913d204c 100644
--- a/packages/core/src/themes/ionic.theme.dark.ios.scss
+++ b/packages/core/src/themes/ionic.theme.dark.ios.scss
@@ -54,19 +54,6 @@ $item-ios-divider-background: #151515 !default;
$item-ios-divider-color: $text-color !default;
-// iOS Item
-// --------------------------------------------------
-
-$item-ios-padding-top: 11px !default;
-$item-ios-padding-end: 16px !default;
-$item-ios-padding-bottom: 11px !default;
-$item-ios-padding-start: 16px !default;
-$item-ios-padding-media-top: 10px !default;
-$item-ios-padding-media-bottom: 10px !default;
-$item-ios-padding-icon-top: 9px !default;
-$item-ios-padding-icon-bottom: 8px !default;
-
-
// iOS Toggle
// --------------------------------------------------
diff --git a/packages/core/src/themes/ionic.theme.dark.md.scss b/packages/core/src/themes/ionic.theme.dark.md.scss
index ea16860221..56cfc54ff0 100644
--- a/packages/core/src/themes/ionic.theme.dark.md.scss
+++ b/packages/core/src/themes/ionic.theme.dark.md.scss
@@ -53,14 +53,6 @@ $list-md-activated-background-color: #d9d9d9 !default;
// Material Design Item
// --------------------------------------------------
-$item-md-padding-top: 13px !default;
-$item-md-padding-end: 16px !default;
-$item-md-padding-bottom: 13px !default;
-$item-md-padding-start: 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-divider-background: #151515 !default;
$item-md-divider-color: #f4f4f4 !default;
diff --git a/packages/core/src/themes/ionic.theme.default.ios.scss b/packages/core/src/themes/ionic.theme.default.ios.scss
index e5a734d467..23ae30f0a9 100644
--- a/packages/core/src/themes/ionic.theme.default.ios.scss
+++ b/packages/core/src/themes/ionic.theme.default.ios.scss
@@ -46,16 +46,3 @@ $list-ios-text-color: $list-text-color !default;
$list-ios-border-color: $list-border-color !default;
$list-ios-background-color: $list-background-color !default;
$list-ios-activated-background-color: #d9d9d9 !default;
-
-
-// iOS Item
-// --------------------------------------------------
-
-$item-ios-padding-top: 11px !default;
-$item-ios-padding-end: 16px !default;
-$item-ios-padding-bottom: 11px !default;
-$item-ios-padding-start: 16px !default;
-$item-ios-padding-media-top: 8px !default;
-$item-ios-padding-media-bottom: 8px !default;
-$item-ios-padding-icon-top: 9px !default;
-$item-ios-padding-icon-bottom: 8px !default;
diff --git a/packages/core/src/themes/ionic.theme.default.md.scss b/packages/core/src/themes/ionic.theme.default.md.scss
index 91db8fea3b..f502d0097b 100644
--- a/packages/core/src/themes/ionic.theme.default.md.scss
+++ b/packages/core/src/themes/ionic.theme.default.md.scss
@@ -46,16 +46,3 @@ $list-md-text-color: $list-text-color !default;
$list-md-border-color: #dedede !default;
$list-md-background-color: $list-background-color !default;
$list-md-activated-background-color: #f1f1f1 !default;
-
-
-// Material Design Item
-// --------------------------------------------------
-
-$item-md-padding-top: 13px !default;
-$item-md-padding-end: 16px !default;
-$item-md-padding-bottom: 13px !default;
-$item-md-padding-start: 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;