diff --git a/demos/src/item-sliding/pages/page-one/page-one.html b/demos/src/item-sliding/pages/page-one/page-one.html index 28afdd708d..5e2b8513e6 100644 --- a/demos/src/item-sliding/pages/page-one/page-one.html +++ b/demos/src/item-sliding/pages/page-one/page-one.html @@ -16,12 +16,12 @@ - +

{{chat.name}}

{{chat.message}}

- + {{chat.time}} @@ -58,7 +58,7 @@ - +

{{login.name}}

{{login.username}}

 diff --git a/demos/src/item/pages/page-one/page-one.html b/demos/src/item/pages/page-one/page-one.html index 2a6f2ba07d..7b44c8ce0f 100644 --- a/demos/src/item/pages/page-one/page-one.html +++ b/demos/src/item/pages/page-one/page-one.html @@ -12,51 +12,51 @@ Settings - - + Airplane Mode Other Settings - + - + Silence Phone @@ -76,24 +76,24 @@ - + Ionic View - + - + Ionic Creator - + - + Hubstruck - + - + Barkpark - + diff --git a/demos/src/label/pages/page-one/page-one.html b/demos/src/label/pages/page-one/page-one.html index b141a7eaf2..a1cb7a755d 100644 --- a/demos/src/label/pages/page-one/page-one.html +++ b/demos/src/label/pages/page-one/page-one.html @@ -11,7 +11,7 @@ - + Ionic @@ -21,8 +21,8 @@ Mobile - - + + diff --git a/demos/src/list/pages/page-one/page-one.html b/demos/src/list/pages/page-one/page-one.html index 74ae7c7b66..0153c4e9b0 100644 --- a/demos/src/list/pages/page-one/page-one.html +++ b/demos/src/list/pages/page-one/page-one.html @@ -15,32 +15,32 @@ - + Airplane Mode @@ -65,24 +65,24 @@ - + Ionic View - + - + Ionic Creator - + - + Hubstruck - + - + Barkpark - + diff --git a/demos/src/loading/pages/page-one/page-one.html b/demos/src/loading/pages/page-one/page-one.html index 4f940f97dd..3dd6ec62ee 100644 --- a/demos/src/loading/pages/page-one/page-one.html +++ b/demos/src/loading/pages/page-one/page-one.html @@ -14,27 +14,27 @@ Spinner Loading Indicators diff --git a/demos/src/range/pages/page-one/page-one.html b/demos/src/range/pages/page-one/page-one.html index 1165a4995a..945c92c1db 100644 --- a/demos/src/range/pages/page-one/page-one.html +++ b/demos/src/range/pages/page-one/page-one.html @@ -12,7 +12,7 @@ Brightness - {{brightness}} + {{brightness}} @@ -25,7 +25,7 @@ Saturation - {{saturation}} + {{saturation}} @@ -38,7 +38,7 @@ Warmth - {{warmth}} + {{warmth}} @@ -51,8 +51,8 @@ Structure - {{structure.lower}} - {{structure.upper}} + {{structure.lower}} + {{structure.upper}} diff --git a/demos/src/segment/pages/page-one/page-one.html b/demos/src/segment/pages/page-one/page-one.html index b59ab2acd1..5719afb701 100644 --- a/demos/src/segment/pages/page-one/page-one.html +++ b/demos/src/segment/pages/page-one/page-one.html @@ -25,7 +25,7 @@ {{ appType }} {{ item.name }} - + @@ -47,7 +47,7 @@ diff --git a/src/components/app/test/gesture-collision/pages/page-one/page-one.html b/src/components/app/test/gesture-collision/pages/page-one/page-one.html index 30d995cbf2..73fce4d3f6 100644 --- a/src/components/app/test/gesture-collision/pages/page-one/page-one.html +++ b/src/components/app/test/gesture-collision/pages/page-one/page-one.html @@ -24,7 +24,7 @@ Apple - + @@ -106,7 +106,7 @@ Apple - + diff --git a/src/components/app/test/gesture-collision/pages/page-two/page-two.html b/src/components/app/test/gesture-collision/pages/page-two/page-two.html index 2a40b26870..f8c569efe1 100644 --- a/src/components/app/test/gesture-collision/pages/page-two/page-two.html +++ b/src/components/app/test/gesture-collision/pages/page-two/page-two.html @@ -76,7 +76,7 @@ Apple - + diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index e05fe3d04e..356f8043f4 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -5,7 +5,7 @@ import { Directive } from '@angular/core'; * @module ionic * @description * An Avatar is a component that creates a circular image for an item. - * Avatars can be placed on the left or right side of an item with the `item-left` or `item-right` directive. + * Avatars can be placed on the left or right side of an item with the `item-start` or `item-end` directive. * @see {@link /docs/components/#avatar-list Avatar Component Docs} */ @Directive({ diff --git a/src/components/badge/test/basic/pages/page-one/page-one.html b/src/components/badge/test/basic/pages/page-one/page-one.html index 0fd56bbfb2..ca7b1983d9 100644 --- a/src/components/badge/test/basic/pages/page-one/page-one.html +++ b/src/components/badge/test/basic/pages/page-one/page-one.html @@ -15,39 +15,39 @@ Default Badge - 99 + 99 Primary Badge - 99 + 99 Secondary Badge - 99 + 99 Danger Badge - 99 + 99 Light Badge - 99 + 99 Dark Badge - 99 + 99 @@ -57,35 +57,35 @@ Default Badge - 99 + 99 Primary Badge - 99 + 99 Secondary Badge - 99 + 99 Danger Badge - 99 + 99 Light Badge - 99 + 99 Dark Badge - 99 + 99 diff --git a/src/components/card/test/advanced/pages/root-page/root-page.html b/src/components/card/test/advanced/pages/root-page/root-page.html index 06674c32d0..8a6236931c 100644 --- a/src/components/card/test/advanced/pages/root-page/root-page.html +++ b/src/components/card/test/advanced/pages/root-page/root-page.html @@ -48,7 +48,7 @@ - +

Card With An Inset Picture

diff --git a/src/components/card/test/basic/pages/root-page/root-page.html b/src/components/card/test/basic/pages/root-page/root-page.html index 688be7bca0..05ff449a11 100644 --- a/src/components/card/test/basic/pages/root-page/root-page.html +++ b/src/components/card/test/basic/pages/root-page/root-page.html @@ -26,9 +26,9 @@ - + ion-item in a card, icon left, button right - + @@ -42,22 +42,22 @@ - + Card Link Item 1 .activated - + Card Link Item 2 diff --git a/src/components/card/test/images/pages/root-page/root-page.html b/src/components/card/test/images/pages/root-page/root-page.html index 8bb0f5d1b6..661780a0c3 100644 --- a/src/components/card/test/images/pages/root-page/root-page.html +++ b/src/components/card/test/images/pages/root-page/root-page.html @@ -23,7 +23,7 @@ - +

Card with large avatar

diff --git a/src/components/card/test/list/pages/root-page/root-page.html b/src/components/card/test/list/pages/root-page/root-page.html index 0933dd9773..b0874ce07f 100644 --- a/src/components/card/test/list/pages/root-page/root-page.html +++ b/src/components/card/test/list/pages/root-page/root-page.html @@ -18,24 +18,24 @@ @@ -50,23 +50,23 @@ - + Wifi - + Affection - + Very Little - + Home - + Where the heart is @@ -82,23 +82,23 @@ - + Wifi - + Affection - + Very Little - + Home - + Where the heart is diff --git a/src/components/card/test/map/main.html b/src/components/card/test/map/main.html index 60674b26ae..132c0c93e3 100644 --- a/src/components/card/test/map/main.html +++ b/src/components/card/test/map/main.html @@ -17,21 +17,21 @@ - +

Museum of Football

11 N. Way St, Madison, WI 53703

 - +

Institute of Fine Cocktails

14 S. Hop Avenue, Madison, WI 53703

 - 18 min - (2.6 mi) - @@ -47,21 +47,21 @@ - +

Yoshi's Island

Iggy Koopa

 - +

Forest of Illusion

Roy Koopa

 - 3 hr - (4.8 mi) - @@ -77,21 +77,21 @@ - +

Museum of Information

44 Rue de Info, 75010 Paris, France

 - +

General Pharmacy

1 Avenue Faux, 75010 Paris, France

 - 26 min - (8.1 mi) - diff --git a/src/components/card/test/social/main.html b/src/components/card/test/social/main.html index 8550de4fe1..49016ca683 100644 --- a/src/components/card/test/social/main.html +++ b/src/components/card/test/social/main.html @@ -12,7 +12,7 @@ - +

Marty McFly

@@ -26,15 +26,15 @@ - - - + 11h ago @@ -45,7 +45,7 @@ - +

Sarah Connor

@@ -59,15 +59,15 @@ - - - + 30yr ago @@ -77,7 +77,7 @@ - +

Dr. Ian Malcolm

@@ -91,15 +91,15 @@ - - - + 2d ago diff --git a/src/components/checkbox/checkbox.ios.scss b/src/components/checkbox/checkbox.ios.scss index 076b64112c..9f48578339 100644 --- a/src/components/checkbox/checkbox.ios.scss +++ b/src/components/checkbox/checkbox.ios.scss @@ -39,11 +39,15 @@ $checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox- /// @prop - Opacity of the disabled checkbox $checkbox-ios-disabled-opacity: .3 !default; -/// @prop - Margin of the left checkbox item +// deprecated $checkbox-ios-item-left-margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default; +/// @prop - Margin of the start checkbox item +$checkbox-ios-item-start-margin: $checkbox-ios-item-left-margin; -/// @prop - Margin of the right checkbox item +// deprecated $checkbox-ios-item-right-margin: 10px 8px 9px 0 !default; +/// @prop - Margin of the end checkbox item +$checkbox-ios-item-end-margin: $checkbox-ios-item-right-margin; .checkbox-ios { @@ -116,11 +120,12 @@ $checkbox-ios-item-right-margin: 10px 8px 9px 0 !default; position: static; display: block; - margin: $checkbox-ios-item-left-margin; + margin: $checkbox-ios-item-start-margin; } -.item.item-ios .checkbox-ios[item-right] { - margin: $checkbox-ios-item-right-margin; +.item.item-ios .checkbox-ios[item-right], // deprecated +.item.item-ios .checkbox-ios[item-end] { + margin: $checkbox-ios-item-end-margin; } diff --git a/src/components/checkbox/checkbox.md.scss b/src/components/checkbox/checkbox.md.scss index 0eb91dbb34..ec953315d1 100644 --- a/src/components/checkbox/checkbox.md.scss +++ b/src/components/checkbox/checkbox.md.scss @@ -60,11 +60,15 @@ $checkbox-md-transition-duration: 280ms !default; /// @prop - Transition easing of the checkbox $checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; -/// @prop - Margin of the left checkbox item +// deprecated $checkbox-md-item-left-margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default; +/// @prop - Margin of the start checkbox item +$checkbox-md-item-start-margin: $checkbox-md-item-left-margin; -/// @prop - Margin of the right checkbox item +// deprecated $checkbox-md-item-right-margin: 11px 10px 10px 0 !default; +/// @prop - Margin of the end checkbox item +$checkbox-md-item-end-margin: $checkbox-md-item-right-margin; .checkbox-md { @@ -141,11 +145,12 @@ $checkbox-md-item-right-margin: 11px 10px 10px 0 !default; position: static; display: block; - margin: $checkbox-md-item-left-margin; + margin: $checkbox-md-item-start-margin; } -.item.item-md .checkbox-md[item-right] { - margin: $checkbox-md-item-right-margin; +.item.item-md .checkbox-md[item-right], // deprecated +.item.item-md .checkbox-md[item-end] { + margin: $checkbox-md-item-end-margin; } .checkbox-md + .item-inner ion-label { diff --git a/src/components/checkbox/checkbox.wp.scss b/src/components/checkbox/checkbox.wp.scss index 7d1dea228e..1f000f1c71 100644 --- a/src/components/checkbox/checkbox.wp.scss +++ b/src/components/checkbox/checkbox.wp.scss @@ -54,11 +54,15 @@ $checkbox-wp-icon-border-color-off: #333 !default; /// @prop - Border color of the checkbox icon when on $checkbox-wp-icon-border-color-on: color($colors-wp, primary) !default; -/// @prop - Margin of the left checkbox item +// deprecated $checkbox-wp-item-left-margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 4px !default; +/// @prop - Margin of the start checkbox item +$checkbox-wp-item-start-margin: $checkbox-wp-item-left-margin; -/// @prop - Margin of the right checkbox item +// deprecated $checkbox-wp-item-right-margin: 11px 10px 10px 0 !default; +/// @prop - Margin of the end checkbox item +$checkbox-wp-item-end-margin: $checkbox-wp-item-right-margin; .checkbox-wp { @@ -131,11 +135,12 @@ $checkbox-wp-item-right-margin: 11px 10px 10px 0 !default; position: static; display: block; - margin: $checkbox-wp-item-left-margin; + margin: $checkbox-wp-item-start-margin; } -.item.item-wp .checkbox-wp[item-right] { - margin: $checkbox-wp-item-right-margin; +.item.item-wp .checkbox-wp[item-right], // deprecated +.item.item-wp .checkbox-wp[item-end] { + margin: $checkbox-wp-item-end-margin; } .checkbox-wp + .item-inner ion-label { diff --git a/src/components/checkbox/test/basic/pages/root-page/root-page.html b/src/components/checkbox/test/basic/pages/root-page/root-page.html index 332c05c012..dd8d2f1bdd 100644 --- a/src/components/checkbox/test/basic/pages/root-page/root-page.html +++ b/src/components/checkbox/test/basic/pages/root-page/root-page.html @@ -45,17 +45,17 @@ Checkbox right, checked, really long text that should ellipsis - + diff --git a/src/components/chip/test/basic/pages/root-page/root-page.html b/src/components/chip/test/basic/pages/root-page/root-page.html index 7a9bf9ee60..a78359a555 100644 --- a/src/components/chip/test/basic/pages/root-page/root-page.html +++ b/src/components/chip/test/basic/pages/root-page/root-page.html @@ -95,7 +95,7 @@ Chip Item - + Default + - + diff --git a/src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html b/src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html index cc091d04c4..022a9fc81a 100644 --- a/src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html +++ b/src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html @@ -30,7 +30,7 @@ From - @@ -45,32 +45,32 @@ - + Website - + Email - + Phone - + Score - + @@ -84,7 +84,7 @@ - + Message diff --git a/src/components/input/test/floating-labels/pages/root-page/root-page.html b/src/components/input/test/floating-labels/pages/root-page/root-page.html index d671dc0106..17285bdfaf 100644 --- a/src/components/input/test/floating-labels/pages/root-page/root-page.html +++ b/src/components/input/test/floating-labels/pages/root-page/root-page.html @@ -14,7 +14,7 @@ Params: {{ myParam }} - @@ -32,13 +32,13 @@ value: {{ numberInput.value }} min: {{ minValue }} max: {{ maxValue }} step: {{ stepValue }} - + ngModel 2: {{ myValues.value2 }} - @@ -51,7 +51,7 @@ Email Input: {{ emailInput.value }} - + @@ -59,7 +59,7 @@ Textarea Input: {{ textareaInput.value }} - + diff --git a/src/components/input/test/highlight/pages/root-page/root-page.html b/src/components/input/test/highlight/pages/root-page/root-page.html index 79810dc7c8..47c7c95fe7 100644 --- a/src/components/input/test/highlight/pages/root-page/root-page.html +++ b/src/components/input/test/highlight/pages/root-page/root-page.html @@ -38,31 +38,31 @@ - + Stacked - + Floating - + Fixed - + Inline Comment value - + Inset @@ -71,31 +71,31 @@ - + Stacked - + Floating - + Fixed - + Inline Comment value - + Inset diff --git a/src/components/input/test/inline-labels/pages/root-page/root-page.html b/src/components/input/test/inline-labels/pages/root-page/root-page.html index 0eda034436..df4f030d2f 100644 --- a/src/components/input/test/inline-labels/pages/root-page/root-page.html +++ b/src/components/input/test/inline-labels/pages/root-page/root-page.html @@ -26,7 +26,7 @@ From: - @@ -37,19 +37,19 @@ - + Website: - + Email: - + Feedback: @@ -57,13 +57,13 @@ More Info: - + Score: - + diff --git a/src/components/input/test/input-focus/pages/root-page/root-page.html b/src/components/input/test/input-focus/pages/root-page/root-page.html index ded444ec43..896f300c61 100644 --- a/src/components/input/test/input-focus/pages/root-page/root-page.html +++ b/src/components/input/test/input-focus/pages/root-page/root-page.html @@ -25,7 +25,7 @@ Item with button right - + @@ -40,7 +40,7 @@ Text 3: - @@ -51,19 +51,19 @@ - + Website: - + Email: - + Feedback: @@ -76,7 +76,7 @@ More Info: - + @@ -87,7 +87,7 @@ Score: - + diff --git a/src/components/input/test/inset-inputs/pages/root-page/root-page.html b/src/components/input/test/inset-inputs/pages/root-page/root-page.html index dd80a590b9..0704c63ccd 100644 --- a/src/components/input/test/inset-inputs/pages/root-page/root-page.html +++ b/src/components/input/test/inset-inputs/pages/root-page/root-page.html @@ -12,17 +12,17 @@ - + - + - + @@ -32,13 +32,13 @@ - + - + @@ -47,9 +47,9 @@ - + - + @@ -58,13 +58,13 @@ - + - + diff --git a/src/components/input/test/placeholder-labels/pages/root-page/root-page.html b/src/components/input/test/placeholder-labels/pages/root-page/root-page.html index b4f12e578b..afdada04fe 100644 --- a/src/components/input/test/placeholder-labels/pages/root-page/root-page.html +++ b/src/components/input/test/placeholder-labels/pages/root-page/root-page.html @@ -27,12 +27,12 @@ - + - + @@ -61,12 +61,12 @@ - + - + diff --git a/src/components/input/test/stacked-labels/pages/root-page/root-page.html b/src/components/input/test/stacked-labels/pages/root-page/root-page.html index eb718bb58c..2fc7dc31db 100644 --- a/src/components/input/test/stacked-labels/pages/root-page/root-page.html +++ b/src/components/input/test/stacked-labels/pages/root-page/root-page.html @@ -20,8 +20,8 @@ Label 2 - - + + diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss index b4c6816c49..c9f56c05f9 100644 --- a/src/components/item/item.ios.scss +++ b/src/components/item/item.ios.scss @@ -121,16 +121,20 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; // iOS Item Media // -------------------------------------------------- -.item-ios [item-left] { +.item-ios [item-left], // deprecated +.item-ios [item-start] { margin: $item-ios-padding-media-top $item-ios-padding-left $item-ios-padding-media-bottom 0; } -.item-ios [item-right] { +.item-ios [item-right], // deprecated +.item-ios [item-end] { margin: $item-ios-padding-media-top ($item-ios-padding-left / 2) $item-ios-padding-media-bottom ($item-ios-padding-right / 2); } -.item-ios ion-icon[item-left], -.item-ios ion-icon[item-right] { +.item-ios ion-icon[item-left], // deprecated +.item-ios ion-icon[item-right], // deprecated +.item-ios ion-icon[item-start], +.item-ios ion-icon[item-end] { margin-top: $item-ios-padding-icon-top; margin-bottom: $item-ios-padding-icon-bottom; margin-left: 0; @@ -149,13 +153,17 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; padding: 0 1px; } -.item-ios ion-avatar[item-left], -.item-ios ion-thumbnail[item-left] { +.item-ios ion-avatar[item-left], // deprecated +.item-ios ion-thumbnail[item-left], // deprecated +.item-ios ion-avatar[item-start], +.item-ios ion-thumbnail[item-start] { margin: ($item-ios-padding-right / 2) $item-ios-padding-right ($item-ios-padding-right / 2) 0; } -.item-ios ion-avatar[item-right], -.item-ios ion-thumbnail[item-right] { +.item-ios ion-avatar[item-right], // deprecated +.item-ios ion-thumbnail[item-right], // deprecated +.item-ios ion-avatar[item-end], +.item-ios ion-thumbnail[item-end] { margin: ($item-ios-padding-right / 2); } diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss index 3687fa4ef3..2bad0cd583 100644 --- a/src/components/item/item.md.scss +++ b/src/components/item/item.md.scss @@ -141,13 +141,17 @@ $item-md-sliding-content-background: $list-md-background-color !default; // Material Design Item Media // -------------------------------------------------- -.item-md [item-left], -.item-md [item-right] { +.item-md [item-left], // deprecated +.item-md [item-right], // deprecated +.item-md [item-start], +.item-md [item-end] { margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0; } -.item-md ion-icon[item-left], -.item-md ion-icon[item-right] { +.item-md ion-icon[item-left], // deprecated +.item-md ion-icon[item-right], // deprecated +.item-md ion-icon[item-start], +.item-md ion-icon[item-end] { margin-top: $item-md-padding-icon-top; margin-bottom: $item-md-padding-icon-bottom; margin-left: 0; @@ -166,18 +170,24 @@ $item-md-sliding-content-background: $list-md-background-color !default; padding: 0 1px; } -.item-md ion-icon[item-left] + .item-inner, -.item-md ion-icon[item-left] + .item-input { +.item-md ion-icon[item-left] + .item-inner, // deprecated +.item-md ion-icon[item-left] + .item-input, // deprecated +.item-md ion-icon[item-start] + .item-inner, +.item-md ion-icon[item-start] + .item-input { margin-left: $item-md-padding-left + ($item-md-padding-left / 2); } -.item-md ion-avatar[item-left], -.item-md ion-thumbnail[item-left] { +.item-md ion-avatar[item-left], // deprecated +.item-md ion-thumbnail[item-left], // deprecated +.item-md ion-avatar[item-start], +.item-md ion-thumbnail[item-start] { margin: ($item-md-padding-right / 2) $item-md-padding-right ($item-md-padding-right / 2) 0; } -.item-md ion-avatar[item-right], -.item-md ion-thumbnail[item-right] { +.item-md ion-avatar[item-right], // deprecated +.item-md ion-thumbnail[item-right], // deprecated +.item-md ion-avatar[item-end], +.item-md ion-thumbnail[item-end] { margin: ($item-md-padding-right / 2); } diff --git a/src/components/item/item.ts b/src/components/item/item.ts index 021c99610f..8f5bb71063 100644 --- a/src/components/item/item.ts +++ b/src/components/item/item.ts @@ -105,15 +105,15 @@ import { ItemReorder } from './item-reorder'; * * | Attribute | Description | * |----------------|----------------------------------------------------------------------------------------------------- | - * | `item-left` | Placed to the left of all other elements, outside of the inner item. | - * | `item-right` | Placed to the right of all other elements, inside of the inner item, outside of the input wrapper. | + * | `item-start` | Placed to the left of all other elements, outside of the inner item. | + * | `item-end` | Placed to the right of all other elements, inside of the inner item, outside of the input wrapper. | * | `item-content` | Placed to the right of any `ion-label`, inside of the input wrapper. | * * ### Checkboxes, Radios and Toggles - * [Checkboxes](../../checkbox/Checkbox) are positioned in the same place as the `item-left` attribute. + * [Checkboxes](../../checkbox/Checkbox) are positioned in the same place as the `item-start` attribute. * [Radios](../../radio/RadioButton) and [Toggles](../../toggle/Toggle) are positioned in the same place - * as the `item-right` attribute. All of these components can be positioned differently by adding the - * `item-left` or `item-right` attribute. + * as the `item-end` attribute. All of these components can be positioned differently by adding the + * `item-start` or `item-end` attribute. * * ### Content and Inputs * A [Label](../../label/Label) is placed inside of the item to the left of all content and inputs. The @@ -182,9 +182,9 @@ import { ItemReorder } from './item-reorder'; * * * - * + * * List Header - * + * * * * @@ -194,7 +194,7 @@ import { ItemReorder } from './item-reorder'; * * * * @@ -210,25 +210,25 @@ import { ItemReorder } from './item-reorder'; * * * - * + * * Item - * + * * * * * * Item Divider - * + * * * * * * Disabled Button Item - * @@ -236,18 +236,18 @@ import { ItemReorder } from './item-reorder'; * * * - * + * * * * Avatar Item - * + * * * * * *

Item

*

Item Paragraph

- * + * * * * @@ -274,7 +274,7 @@ import { ItemReorder } from './item-reorder'; @Component({ selector: 'ion-list-header,ion-item,[ion-item],ion-item-divider', template: - '' + + '' + '
' + '
' + '' + @@ -283,7 +283,7 @@ import { ItemReorder } from './item-reorder'; '' + '' + '
' + - '' + + '' + '' + '
' + '
', diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss index ee56838081..a63f9c5912 100644 --- a/src/components/item/item.wp.scss +++ b/src/components/item/item.wp.scss @@ -146,13 +146,17 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; // Windows Item Media // -------------------------------------------------- -.item-wp [item-left], -.item-wp [item-right] { +.item-wp [item-left], // deprecated +.item-wp [item-right], // deprecated +.item-wp [item-start], +.item-wp [item-end] { margin: $item-wp-padding-media-top ($item-wp-padding-right / 2) $item-wp-padding-media-bottom 0; } -.item-wp ion-icon[item-left], -.item-wp ion-icon[item-right] { +.item-wp ion-icon[item-left], // deprecated +.item-wp ion-icon[item-right], // deprecated +.item-wp ion-icon[item-start], +.item-wp ion-icon[item-end] { margin-top: $item-wp-padding-icon-top; margin-bottom: $item-wp-padding-icon-bottom; margin-left: 0; @@ -176,18 +180,24 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; line-height: $item-wp-body-text-line-height; } -.item-wp ion-icon[item-left] + .item-inner, -.item-wp ion-icon[item-left] + .item-input { +.item-wp ion-icon[item-left] + .item-inner, // deprecated +.item-wp ion-icon[item-left] + .item-input, // deprecated + .item-wp ion-icon[item-start] + .item-inner, +.item-wp ion-icon[item-start] + .item-input { margin-left: ($item-wp-padding-left / 2); } -.item-wp ion-avatar[item-left], -.item-wp ion-thumbnail[item-left] { +.item-wp ion-avatar[item-left], // deprecated +.item-wp ion-thumbnail[item-left], // deprecated +.item-wp ion-avatar[item-start], +.item-wp ion-thumbnail[item-start] { margin: ($item-wp-padding-right / 2) $item-wp-padding-right ($item-wp-padding-right / 2) 0; } -.item-wp ion-avatar[item-right], -.item-wp ion-thumbnail[item-right] { +.item-wp ion-avatar[item-right], // deprecated +.item-wp ion-thumbnail[item-right], // deprecated +.item-wp ion-avatar[item-end], +.item-wp ion-thumbnail[item-end] { margin: ($item-wp-padding-right / 2); } diff --git a/src/components/item/test/buttons/pages/root-page/root-page.html b/src/components/item/test/buttons/pages/root-page/root-page.html index da04b529aa..f83c26535b 100644 --- a/src/components/item/test/buttons/pages/root-page/root-page.html +++ b/src/components/item/test/buttons/pages/root-page/root-page.html @@ -34,55 +34,55 @@ - + Inner Buttons - + disabled left icon buttons - - right icon buttons - - icon only buttons default - a ion-item disabled right icon/text button large - - @@ -91,7 +91,7 @@ ion-item right clear button - @@ -100,23 +100,23 @@ This is multiline text that has a long description of about how the text is really long and a link. - +
- -
diff --git a/src/components/item/test/colors/pages/root-page/root-page.html b/src/components/item/test/colors/pages/root-page/root-page.html index ee59c3d53b..3d3e23f496 100644 --- a/src/components/item/test/colors/pages/root-page/root-page.html +++ b/src/components/item/test/colors/pages/root-page/root-page.html @@ -37,14 +37,14 @@ - +

Heading

Normal paragraph

- + @@ -53,7 +53,7 @@ @@ -62,12 +62,12 @@ - right icon buttons - diff --git a/src/components/item/test/dividers/pages/root-page/root-page.html b/src/components/item/test/dividers/pages/root-page/root-page.html index afa7b3ae75..a140e6d2ca 100644 --- a/src/components/item/test/dividers/pages/root-page/root-page.html +++ b/src/components/item/test/dividers/pages/root-page/root-page.html @@ -40,7 +40,7 @@ Item Divider Danger Span - + @@ -51,10 +51,10 @@ - - Dark
Primary h5
@@ -67,18 +67,18 @@ - + Light - Primary - + diff --git a/src/components/item/test/icons/pages/root-page/root-page.html b/src/components/item/test/icons/pages/root-page/root-page.html index 8196d29402..415d4b0a40 100644 --- a/src/components/item/test/icons/pages/root-page/root-page.html +++ b/src/components/item/test/icons/pages/root-page/root-page.html @@ -23,55 +23,55 @@ a[ion-item] w/ right side default icon - + a[ion-item] w/ right side large icon - + a[ion-item] w/ right side small icon - + - + ion-item w/ both side icons - + a[ion-item] w/ two right side icons - - + + Problems - 99 + 99 \ No newline at end of file diff --git a/src/components/item/test/images/pages/root-page/root-page.html b/src/components/item/test/images/pages/root-page/root-page.html index 9f6605fb96..f3e86561f6 100644 --- a/src/components/item/test/images/pages/root-page/root-page.html +++ b/src/components/item/test/images/pages/root-page/root-page.html @@ -14,25 +14,25 @@ - + One Line w/ Icon, div only text - +

Two Lines w/ Icon, H2 Header

Paragraph text.

 - + One Line w/ Avatar, div only text - +

Two Lines w/ Avatar, H2 Header

@@ -40,7 +40,7 @@ - +

Three Lines w/ Avatar, H2 Header

@@ -49,7 +49,7 @@ - +

Two Lines w/ Thumbnail, H2 Header

@@ -57,7 +57,7 @@ - +

Three Lines w/ Thumbnail, H2 Header

diff --git a/src/components/item/test/inputs/pages/root-page/root-page.html b/src/components/item/test/inputs/pages/root-page/root-page.html index 98b30f50de..43a42fe15b 100644 --- a/src/components/item/test/inputs/pages/root-page/root-page.html +++ b/src/components/item/test/inputs/pages/root-page/root-page.html @@ -58,7 +58,7 @@ Toggle (left) - + diff --git a/src/components/item/test/media/pages/root-page/root-page.html b/src/components/item/test/media/pages/root-page/root-page.html index bd394953f8..816df67977 100644 --- a/src/components/item/test/media/pages/root-page/root-page.html +++ b/src/components/item/test/media/pages/root-page/root-page.html @@ -10,7 +10,7 @@ + - +

H2 Title Text

@@ -41,29 +41,29 @@ Media/Thumbnail right side, a.item - + - +

H2 Title Text

Button on right

- + diff --git a/src/components/item/test/sliding/pages/root-page/root-page.html b/src/components/item/test/sliding/pages/root-page/root-page.html index 47e4fa3929..419c0a32eb 100644 --- a/src/components/item/test/sliding/pages/root-page/root-page.html +++ b/src/components/item/test/sliding/pages/root-page/root-page.html @@ -69,7 +69,7 @@

HubStruck Notifications

A new message from a repo in your network

Oceanic Next has joined your network

- + 10:45 AM @@ -136,7 +136,7 @@ -

RIGHT/LEFT side - icons (item-left)

+

RIGHT/LEFT side - icons (item-start)

I think I figured out how to get more Mountain Dew

 @@ -158,7 +158,7 @@ - + One Line w/ Icon, div only text @@ -171,7 +171,7 @@ - + One Line w/ Avatar, div only text @@ -208,7 +208,7 @@ - +

DOWNLOAD

@@ -228,7 +228,7 @@ - +

ion-item-sliding without options (no sliding)

diff --git a/src/components/label/label.ios.scss b/src/components/label/label.ios.scss index 1b48c6d3d8..1946fce834 100644 --- a/src/components/label/label.ios.scss +++ b/src/components/label/label.ios.scss @@ -69,8 +69,10 @@ $label-ios-margin: $item-ios-padding-top ($item-ios-padding- transform: translate3d(0, 0, 0) scale(.8); } -.item-ios.item-label-stacked [item-right], -.item-ios.item-label-floating [item-right] { +.item-ios.item-label-stacked [item-right], // deprecated +.item-ios.item-label-floating [item-right], // deprecated +.item-ios.item-label-stacked [item-end], +.item-ios.item-label-floating [item-end] { margin-top: $item-ios-padding-media-top - 2; margin-bottom: $item-ios-padding-media-bottom - 2; } diff --git a/src/components/label/label.md.scss b/src/components/label/label.md.scss index 6276b7d720..81575864ef 100644 --- a/src/components/label/label.md.scss +++ b/src/components/label/label.md.scss @@ -68,8 +68,10 @@ $label-md-margin: $item-md-padding-top ($item-md-padding-rig transform: translate3d(0, 0, 0) scale(.8); } -.item-md.item-label-stacked [item-right], -.item-md.item-label-floating [item-right] { +.item-md.item-label-stacked [item-right], // deprecated +.item-md.item-label-floating [item-right], // deprecated +.item-md.item-label-stacked [item-end], +.item-md.item-label-floating [item-end] { margin-top: $item-md-padding-media-top - 2; margin-bottom: $item-md-padding-media-bottom - 2; } diff --git a/src/components/label/label.wp.scss b/src/components/label/label.wp.scss index 94f2f1c294..1194ad9586 100644 --- a/src/components/label/label.wp.scss +++ b/src/components/label/label.wp.scss @@ -61,8 +61,10 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default; transform: translate3d(0, 0, 0) scale(.8); } -.item-wp.item-label-stacked [item-right], -.item-wp.item-label-floating [item-right] { +.item-wp.item-label-stacked [item-right], // deprecated +.item-wp.item-label-floating [item-right], // deprecated +.item-wp.item-label-stacked [item-end], +.item-wp.item-label-floating [item-end] { margin-top: $item-wp-padding-media-top + 4; margin-bottom: $item-wp-padding-media-top + 4; } diff --git a/src/components/list/test/chat-list/main.html b/src/components/list/test/chat-list/main.html index e66e6804d9..3fa45644e9 100644 --- a/src/components/list/test/chat-list/main.html +++ b/src/components/list/test/chat-list/main.html @@ -15,43 +15,43 @@ - + Abbey Christensen - + - + Alex Nelson - + - + Mary Johnson - + - + Peter Carlsson - + - + Trevor Hansen - + @@ -61,19 +61,19 @@ - + Britta Holt - + - + Sandra Adams - + diff --git a/src/components/list/test/header-scenarios/pages/main/main.html b/src/components/list/test/header-scenarios/pages/main/main.html index 5a28351944..274438a40a 100644 --- a/src/components/list/test/header-scenarios/pages/main/main.html +++ b/src/components/list/test/header-scenarios/pages/main/main.html @@ -20,59 +20,59 @@ This is multiline text that has a long description of about how the text is really long and a link. - + - + Secondary Inner Buttons - + - disabled left icon buttons - - Dark right icon buttons - - icon only buttons default - ion-list-header right icon/text button large - - @@ -81,17 +81,17 @@ ion-list-header right clear button - - +

ng-for {{i}}

- {{i + 1}} + {{i + 1}} diff --git a/src/components/list/test/headers/pages/page-one/page-one.html b/src/components/list/test/headers/pages/page-one/page-one.html index 40d19f33de..db9bc52e17 100644 --- a/src/components/list/test/headers/pages/page-one/page-one.html +++ b/src/components/list/test/headers/pages/page-one/page-one.html @@ -22,27 +22,27 @@ List Header - + - + Wifi - + Affection - + Very Little - + Home - + Where the heart is @@ -54,19 +54,19 @@ List Header - + - + Magic - + Star status - + Super @@ -81,25 +81,25 @@ - + Pizza - + Always - + Beer - + Yes Plz - + Wine - + All the time @@ -110,12 +110,12 @@ - + New List, no header, Item 1 - + New List, no header, Item 2 diff --git a/src/components/list/test/inset/pages/page-one/page-one.html b/src/components/list/test/inset/pages/page-one/page-one.html index 89aad396cc..8c5c579376 100644 --- a/src/components/list/test/inset/pages/page-one/page-one.html +++ b/src/components/list/test/inset/pages/page-one/page-one.html @@ -25,7 +25,7 @@ - + List Link Item 1 @@ -40,7 +40,7 @@ - + List Button Item 1 @@ -51,7 +51,7 @@ List header 2 - + item 1 @@ -61,7 +61,7 @@ List header 3 - + item 1 @@ -71,7 +71,7 @@ List header 4 - + item 1 @@ -80,7 +80,7 @@ Inset List, No Header - + diff --git a/src/components/list/test/no-lines/pages/page-one/page-one.html b/src/components/list/test/no-lines/pages/page-one/page-one.html index 3950ef4f4c..029e869953 100644 --- a/src/components/list/test/no-lines/pages/page-one/page-one.html +++ b/src/components/list/test/no-lines/pages/page-one/page-one.html @@ -15,23 +15,23 @@ - + Wifi - + Affection - + Very Little - + Home - + Where the heart is @@ -43,24 +43,24 @@ - - + + Wifi - - + + Affection - - + + Home @@ -73,25 +73,25 @@ - + Pizza - + Always - + Beer - + Yes Plz - + Wine - + All the time @@ -103,25 +103,25 @@ - + Pizza - + Always - + Beer - + Yes Plz - + Wine - + All the time @@ -133,25 +133,25 @@ - + Pizza - + Always - + Beer - + Yes Plz - + Wine - + All the time diff --git a/src/components/list/test/repeat-headers/main.html b/src/components/list/test/repeat-headers/main.html index cf7b135d4c..5f80c79c74 100644 --- a/src/components/list/test/repeat-headers/main.html +++ b/src/components/list/test/repeat-headers/main.html @@ -15,7 +15,7 @@ {{component}} -
+
diff --git a/src/components/note/note.ts b/src/components/note/note.ts index 52f13575c4..311816e38b 100644 --- a/src/components/note/note.ts +++ b/src/components/note/note.ts @@ -14,11 +14,11 @@ import { Ion } from '../ion'; * * * - * + * * Left Note * * My Item - * + * * Right Note * * diff --git a/src/components/radio/radio.ios.scss b/src/components/radio/radio.ios.scss index 6f749fd2f0..9424be005a 100644 --- a/src/components/radio/radio.ios.scss +++ b/src/components/radio/radio.ios.scss @@ -21,11 +21,15 @@ $radio-ios-icon-border-style: solid !default; /// @prop - Opacity of the disabled radio $radio-ios-disabled-opacity: .3 !default; -/// @prop - Margin of the item-left in a radio +// deprecated $radio-ios-item-left-margin: 8px 21px 8px 3px !default; +/// @prop - Margin of the item-start in a radio +$radio-ios-item-start-margin: $radio-ios-item-left-margin; -/// @prop - Margin of the item-right in a radio +// deprecated $radio-ios-item-right-margin: $item-ios-padding-media-top 11px $item-ios-padding-media-bottom ($item-ios-padding-left / 2) !default; +/// @prop - Margin of the item-end in a radio +$radio-ios-item-end-margin: $radio-ios-item-right-margin; .radio-ios { @@ -84,10 +88,11 @@ $radio-ios-item-right-margin: $item-ios-padding-media-top 11px $item-ios-pa position: static; display: block; - margin: $radio-ios-item-right-margin; + margin: $radio-ios-item-end-margin; - &[item-left] { - margin: $radio-ios-item-left-margin; + &[item-left], // deprecated + &[item-start] { + margin: $radio-ios-item-start-margin; } } diff --git a/src/components/radio/radio.md.scss b/src/components/radio/radio.md.scss index 91f231fd84..ef685c211a 100644 --- a/src/components/radio/radio.md.scss +++ b/src/components/radio/radio.md.scss @@ -33,11 +33,15 @@ $radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; /// @prop - Opacity of the disabled radio $radio-md-disabled-opacity: .3 !default; -/// @prop - Margin of the item-left in a radio +// deprecated $radio-md-item-left-margin: 11px 36px 10px 4px !default; +/// @prop - Margin of the item-start in a radio +$radio-md-item-start-margin: $radio-md-item-left-margin; -/// @prop - Margin of the item-right in a radio +// deprecated $radio-md-item-right-margin: $item-md-padding-media-top 10px $item-md-padding-media-bottom 0 !default; +/// @prop - Margin of the item-end in a radio +$radio-md-item-end-margin: $radio-md-item-right-margin; .radio-md { @@ -119,10 +123,11 @@ $radio-md-item-right-margin: $item-md-padding-media-top 10px $item-md-paddi position: static; display: block; - margin: $radio-md-item-right-margin; + margin: $radio-md-item-end-margin; - &[item-left] { - margin: $radio-md-item-left-margin; + &[item-left], // deprecated + &[item-start] { + margin: $radio-md-item-start-margin; } } diff --git a/src/components/radio/radio.wp.scss b/src/components/radio/radio.wp.scss index d6d929119d..9226866e9a 100644 --- a/src/components/radio/radio.wp.scss +++ b/src/components/radio/radio.wp.scss @@ -30,11 +30,15 @@ $radio-wp-icon-border-radius: 50% !default; /// @prop - Opacity of the disabled radio $radio-wp-disabled-opacity: .3 !default; -/// @prop - Margin of the item-left in a radio +// deprecated $radio-wp-item-left-margin: 9px 20px 9px 4px !default; +/// @prop - Margin of the item-start in a radio +$radio-wp-item-start-margin: $radio-wp-item-left-margin; -/// @prop - Margin of the item-right in a radio +// deprecated $radio-wp-item-right-margin: 11px 10px 10px 0 !default; +/// @prop - Margin of the item-end in a radio +$radio-wp-item-end-margin: $radio-wp-item-right-margin; .radio-wp { @@ -118,12 +122,13 @@ $radio-wp-item-right-margin: 11px 10px 10px 0 !default; order: $radio-wp-order; - margin: $radio-wp-item-left-margin; + margin: $radio-wp-item-start-margin; - &[item-right] { + &[item-right], // deprecated + &[item-end] { order: 0; - margin: $radio-wp-item-right-margin; + margin: $radio-wp-item-end-margin; } } diff --git a/src/components/radio/test/basic/pages/page-one/page-one.html b/src/components/radio/test/basic/pages/page-one/page-one.html index 9fd1245521..727d814dd2 100644 --- a/src/components/radio/test/basic/pages/page-one/page-one.html +++ b/src/components/radio/test/basic/pages/page-one/page-one.html @@ -20,12 +20,12 @@ Button w/ left side default icon, really long text that should ellipsis - + Apple - + @@ -45,12 +45,12 @@ Radio right side - + Button w/ right side default icon, really long text that should ellipsis - + diff --git a/src/components/thumbnail/thumbnail.ts b/src/components/thumbnail/thumbnail.ts index 01fa502e7a..9635e38b7e 100644 --- a/src/components/thumbnail/thumbnail.ts +++ b/src/components/thumbnail/thumbnail.ts @@ -5,7 +5,7 @@ import { Directive } from '@angular/core'; * @module ionic * @description * A Thumbnail is a component that creates a squared image for an item. - * Thumbnails can be place on the left or right side of an item with the `item-left` or `item-right` directive. + * Thumbnails can be place on the left or right side of an item with the `item-start` or `item-end` directive. * @see {@link /docs/components/#thumbnail-list Thumbnail Component Docs} */ @Directive({ diff --git a/src/components/toggle/test/basic/pages/root-page/root-page.html b/src/components/toggle/test/basic/pages/root-page/root-page.html index a64f031d63..693319f7a0 100644 --- a/src/components/toggle/test/basic/pages/root-page/root-page.html +++ b/src/components/toggle/test/basic/pages/root-page/root-page.html @@ -15,12 +15,12 @@ Left side default icon, really long text that should ellipsis ellipsis ellipsis - + Apple - + diff --git a/src/components/toggle/toggle.ios.scss b/src/components/toggle/toggle.ios.scss index 2277d17350..f613b5ca06 100644 --- a/src/components/toggle/toggle.ios.scss +++ b/src/components/toggle/toggle.ios.scss @@ -48,11 +48,15 @@ $toggle-ios-transition-duration: 300ms !default; /// @prop - Opacity of the disabled toggle $toggle-ios-disabled-opacity: .3 !default; -/// @prop - Padding of the toggle positioned on the left in an item +// deprecated $toggle-ios-item-left-padding: 6px 16px 5px 0 !default; +/// @prop - Padding of the toggle positioned on the left in an item +$toggle-ios-item-start-padding: $toggle-ios-item-left-padding; -/// @prop - Padding of the toggle positioned on the right in an item +// deprecated $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default; +/// @prop - Padding of the toggle positioned on the right in an item +$toggle-ios-item-end-padding: $toggle-ios-item-right-padding; // iOS Toggle @@ -197,11 +201,12 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i .item-ios .toggle-ios { margin: $toggle-ios-media-margin; - padding: $toggle-ios-item-right-padding; + padding: $toggle-ios-item-end-padding; } -.item-ios .toggle-ios[item-left] { - padding: $toggle-ios-item-left-padding; +.item-ios .toggle-ios[item-left], // deprecated +.item-ios .toggle-ios[item-start] { + padding: $toggle-ios-item-start-padding; } diff --git a/src/components/toggle/toggle.md.scss b/src/components/toggle/toggle.md.scss index 7d0b6bc528..0c5a6ade95 100644 --- a/src/components/toggle/toggle.md.scss +++ b/src/components/toggle/toggle.md.scss @@ -48,11 +48,15 @@ $toggle-md-disabled-opacity: .3 !default; /// @prop - Padding of standalone toggle $toggle-md-padding: 12px !default; -/// @prop - Padding of the toggle positioned on the left in an item +// deprecated $toggle-md-item-left-padding: 12px 18px 12px 2px !default; +/// @prop - Padding of the toggle positioned on the start in an item +$toggle-md-item-start-padding: $toggle-md-item-left-padding; -/// @prop - Padding of the toggle positioned on the right in an item +// deprecated $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default; +/// @prop - Padding of the toggle positioned on the end in an item +$toggle-md-item-end-padding: $toggle-md-item-right-padding; // Material Design Toggle @@ -153,13 +157,14 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px .item-md .toggle-md { margin: $toggle-md-media-margin; - padding: $toggle-md-item-right-padding; + padding: $toggle-md-item-end-padding; cursor: pointer; } -.item-md .toggle-md[item-left] { - padding: $toggle-md-item-left-padding; +.item-md .toggle-md[item-left], // deprecated +.item-md .toggle-md[item-start] { + padding: $toggle-md-item-start-padding; } .item-md.item-toggle ion-label { diff --git a/src/components/toggle/toggle.wp.scss b/src/components/toggle/toggle.wp.scss index 8c39b66ec0..d239f21770 100644 --- a/src/components/toggle/toggle.wp.scss +++ b/src/components/toggle/toggle.wp.scss @@ -60,11 +60,15 @@ $toggle-wp-transition-duration: 300ms !default; /// @prop - Opacity of the disabled toggle $toggle-wp-disabled-opacity: .3 !default; -/// @prop - Padding of the toggle positioned on the left in an item +// deprecated $toggle-wp-item-left-padding: 12px 18px 12px 2px !default; +/// @prop - Padding of the toggle positioned on the start in an item +$toggle-wp-item-start-padding: $toggle-wp-item-left-padding; -/// @prop - Padding of the toggle positioned on the right in an item +// deprecated $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default; +/// @prop - Padding of the toggle positioned on the end in an item +$toggle-wp-item-end-padding: $toggle-wp-item-right-padding; // Windows Toggle @@ -161,13 +165,14 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px .item-wp .toggle-wp { margin: $toggle-wp-media-margin; - padding: $toggle-wp-item-right-padding; + padding: $toggle-wp-item-end-padding; cursor: pointer; } -.item-wp .toggle-wp[item-left] { - padding: $toggle-wp-item-left-padding; +.item-wp .toggle-wp[item-left], // deprecated +.item-wp .toggle-wp[item-start] { + padding: $toggle-wp-item-start-padding; } .item-wp.item-toggle ion-label { diff --git a/src/components/virtual-scroll/test/cards/main.html b/src/components/virtual-scroll/test/cards/main.html index 27e43d56dc..d708cd164b 100644 --- a/src/components/virtual-scroll/test/cards/main.html +++ b/src/components/virtual-scroll/test/cards/main.html @@ -15,7 +15,7 @@
- +

{{ item.name }}

diff --git a/src/components/virtual-scroll/test/list/main.html b/src/components/virtual-scroll/test/list/main.html index 390077810c..4fb594693e 100644 --- a/src/components/virtual-scroll/test/list/main.html +++ b/src/components/virtual-scroll/test/list/main.html @@ -25,13 +25,13 @@ - +

{{item.id}}, top: {{itemBounds.top}}, bottom: {{itemBounds.bottom}}, height: {{itemBounds.height}}

- diff --git a/src/components/virtual-scroll/test/media/pages/root-page/root-page.html b/src/components/virtual-scroll/test/media/pages/root-page/root-page.html index 4a20da2fae..292b34f3f4 100644 --- a/src/components/virtual-scroll/test/media/pages/root-page/root-page.html +++ b/src/components/virtual-scroll/test/media/pages/root-page/root-page.html @@ -14,9 +14,9 @@ {{item.type}}-{{item.value}} - - - + + + diff --git a/src/components/virtual-scroll/virtual-scroll.ts b/src/components/virtual-scroll/virtual-scroll.ts index 18829b5e54..bf83ebd981 100644 --- a/src/components/virtual-scroll/virtual-scroll.ts +++ b/src/components/virtual-scroll/virtual-scroll.ts @@ -128,7 +128,7 @@ import { VirtualHeader } from './virtual-header'; * * * - * + * * * * {% raw %} {{ item.firstName }} {{ item.lastName }}{% endraw %}