javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 01:52:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item): slotted ion-icon receives custom color (#17585)

Browse Source 
* fix slotted icon color md

* fix same issue in item divider

* aevert "fix same issue in item divider"
a
ahis reverts commit c3748a8ed40d710d81cd8142d15b6b979ce0d9c3.
a
a Please enter the commit message for your changes. Lines starting
a with '#' will be ignored, and an empty message aborts the commit.
a
a On branch fix-slot-icon-color-md
a Changes to be committed:
a	modified:   core/src/components/item-divider/item-divider.md.scss
a

* Revert "fix slotted icon color md"

This reverts commit e80abea5cf41a54131b90d17f496a8aa5d32e75d.

* fix case where no color

* chore(): update selector to make it easier to override
This commit is contained in:
Liam DeBeasi
2019-03-01 12:38:34 -05:00
committed by GitHub
parent 5a197ca1eb
commit 14dd871a85
4 changed files with 23 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/src/components/item-divider/item-divider.md.scss
View File

@ -43,12 +43,15 @@
// -------------------------------------------------- // --------------------------------------------------
::slotted(ion-icon) { ::slotted(ion-icon) {
color: $item-md-icon-slot-color; color: $item-md-icon-slot-color;
font-size: $item-md-icon-slot-font-size; font-size: $item-md-icon-slot-font-size;
} }
:host(.ion-color) ::slotted(ion-icon) {
color: current-color(contrast);
}
::slotted(ion-icon[slot]) { ::slotted(ion-icon[slot]) {
@include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start); @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start);
} }

7
core/src/components/item-divider/test/preview/index.html
View File

@ -29,6 +29,13 @@
</ion-item-divider> </ion-item-divider>
<ion-list> <ion-list>
<ion-item-divider>
<ion-label>
Divider with a slotted icon
</ion-label>
<ion-icon name="trash" slot="start"></ion-icon>
</ion-item-divider>
<ion-item-divider> <ion-item-divider>
<ion-label> <ion-label>
Divider in List Divider in List

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

@ -104,6 +104,10 @@
font-size: $item-md-icon-slot-font-size; font-size: $item-md-icon-slot-font-size;
} }
:host(.ion-color) ::slotted(ion-icon) {
color: current-color(contrast);
}
::slotted(ion-icon[slot]) { ::slotted(ion-icon[slot]) {
@include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start); @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start);
} }

8
core/src/components/item/test/icons/index.html
View File

@ -21,6 +21,14 @@
</ion-header> </ion-header>
<ion-content id="content"> <ion-content id="content">
<ion-item color="primary" lines="none">
<ion-label>
ion-item w/ color
</ion-label>
<ion-icon name="trash" slot="start"></ion-icon>
</ion-item>
<ion-item detail> <ion-item detail>
<ion-label> <ion-label>
ion-item [detail] attr ion-item [detail] attr