javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(item): don't set ion-color properties

Browse Source 
references #14808
This commit is contained in:
Cam Wiegert
2018-09-18 09:39:20 -05:00
parent c7d4b022e3
commit a9af2f5682
3 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,10 +5,6 @@
// --------------------------------------------------
:host {
--ion-color-base: var(--ion-item-background-color, transparent);
--ion-color-contrast: #{$item-ios-text-color};
--ion-color-tint: #{$item-ios-background-color-active};
--ion-color-shade: #{$item-ios-border-bottom-color};
--transition: background-color 200ms linear;
--padding-start: #{$item-ios-padding-start};
--inner-padding-end: #{$item-ios-padding-end / 2};
@ -17,6 +13,14 @@
font-size: $item-ios-font-size;
}
:host(:not(.ion-color)) {
--background: var(--ion-item-background-color, transparent);
--background-activated: #{$item-ios-background-color-active};
--border-color: #{$item-ios-border-bottom-color};
--color: #{$item-ios-text-color};
--detail-push-color: #{$item-ios-border-bottom-color};
}
:host(.activated) {
--transition: none;
}

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

@ -6,10 +6,6 @@
// --------------------------------------------------
:host {
--ion-color-base: var(--ion-item-background-color, transparent);
--ion-color-contrast: #{$item-md-text-color};
--ion-color-tint: #{$item-md-background-color-active};
--ion-color-shade: #{$item-md-border-bottom-color};
--transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
--padding-start: #{$item-md-padding-start};
--inner-padding-end: #{$item-md-padding-end / 2};
@ -21,6 +17,15 @@
text-transform: none;
}
:host(:not(.ion-color)) {
--background: var(--ion-item-background-color, transparent);
--background-activated: #{$item-md-background-color-active};
--border-color: #{$item-md-border-bottom-color};
--color: #{$item-md-text-color};
--detail-push-color: #{$item-md-border-bottom-color};
}
// Material Design Item Lines
// --------------------------------------------------

10
core/src/components/item/item.scss
View File

@ -6,7 +6,7 @@
:host {
--min-height: #{$item-min-height};
--background: #{current-color(base)};
--background-active: #{current-color(tint)};
--background-activated: #{current-color(tint)};
--color: #{current-color(contrast)};
--detail-push-color: #{current-color(shade)};
--border-radius: 0;
@ -33,7 +33,7 @@
display: block;
color: #{current-color(contrast)};
color: var(--color);
font-family: $font-family-base;
@ -43,8 +43,8 @@
box-sizing: border-box;
}
:host(.activated) {
--background: var(--background-active);
:host(.activated) .item-native {
background: var(--background-activated);
}
:host(.item-disabled) {
@ -77,7 +77,7 @@
outline: none;
background-color: var(--background);
background: var(--background);
box-shadow: var(--box-shadow);
overflow: hidden;