javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item): fix margins on slotted content (avatar, thumbnail) (#17065)

Browse Source 
- style all slots margin by removing the `:not(.interactive)`
- updates toggle margin

fixes #16997
This commit is contained in:
Brandy Carney
2019-01-22 14:43:58 -05:00
committed by GitHub
parent a7a2fc59bf
commit 3612651334
3 changed files with 40 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
core/src/components/item/item.ios.scss
View File

@@ -70,19 +70,35 @@
// iOS Item Slots
// --------------------------------------------------
::slotted(:not(.interactive)[slot="start"]) {
::slotted([slot="start"]) {
@include margin($item-ios-slot-start-margin-top, $item-ios-slot-start-margin-end, $item-ios-slot-start-margin-bottom, $item-ios-slot-start-margin-start);
}
::slotted(:not(.interactive)[slot="end"]) {
::slotted([slot="end"]) {
@include margin($item-ios-slot-end-margin-top, $item-ios-slot-end-margin-end, $item-ios-slot-end-margin-bottom, $item-ios-slot-end-margin-start);
}
// iOS Slotted Icon
// --------------------------------------------------
::slotted(ion-icon[slot="start"]),
::slotted(ion-icon[slot="end"]) {
@include margin($item-ios-icon-slot-margin-top, $item-ios-icon-slot-margin-end, $item-ios-icon-slot-margin-bottom, $item-ios-icon-slot-margin-start);
}
// iOS Slotted Toggle
// --------------------------------------------------
::slotted(ion-toggle[slot="start"]),
::slotted(ion-toggle[slot="end"]) {
@include margin(0);
}
// iOS Stacked / Floating Labels
// --------------------------------------------------
:host(.item-label-stacked) ::slotted([slot="end"]),
:host(.item-label-floating) ::slotted([slot="end"]) {
@include margin($item-ios-label-slot-end-margin-top, $item-ios-label-slot-end-margin-end, $item-ios-label-slot-end-margin-bottom, $item-ios-label-slot-end-margin-start);
@@ -122,6 +138,16 @@
@include margin(($item-ios-padding-end / 2));
}
// iOS Radio / Toggle Item Label
// -----------------------------------------
:host(.item-radio) ::slotted(ion-label),
:host(.item-toggle) ::slotted(ion-label) {
@include margin-horizontal(0px, null);
}
// TODO: MOVE FROM RADIO
// iOS Radio Item Label: Checked
// -----------------------------------------
@@ -131,12 +157,6 @@
// }
:host(.item-radio) ::slotted(ion-label),
:host(.item-toggle) ::slotted(ion-label) {
@include margin-horizontal(0px, null);
}
// iOS Slotted Label
// --------------------------------------------------

14
core/src/components/item/item.md.scss
View File

@@ -86,11 +86,11 @@
// Material Design Item Slots
// --------------------------------------------------
::slotted(:not(.interactive)[slot="start"]) {
::slotted([slot="start"]) {
@include margin-horizontal($item-md-start-slot-margin-start, $item-md-start-slot-margin-end);
}
::slotted(:not(.interactive)[slot="end"]) {
::slotted([slot="end"]) {
@include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end);
}
@@ -99,7 +99,6 @@
// --------------------------------------------------
::slotted(ion-icon) {
color: $item-md-icon-slot-color;
font-size: $item-md-icon-slot-font-size;
@@ -118,6 +117,15 @@
}
// Material Design Slotted Toggle
// --------------------------------------------------
::slotted(ion-toggle[slot="start"]),
::slotted(ion-toggle[slot="end"]) {
@include margin(0);
}
// Material Design Slotted Note
// --------------------------------------------------

1
core/src/components/list/test/spec/index.html
View File

@@ -312,6 +312,7 @@
margin: 0;
}
body,
ion-list {
background: #e5e5e5 !important;
}