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 { :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; --transition: background-color 200ms linear;
--padding-start: #{$item-ios-padding-start}; --padding-start: #{$item-ios-padding-start};
--inner-padding-end: #{$item-ios-padding-end / 2}; --inner-padding-end: #{$item-ios-padding-end / 2};
@ -17,6 +13,14 @@
font-size: $item-ios-font-size; 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) { :host(.activated) {
--transition: none; --transition: none;
} }

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

@ -6,10 +6,6 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :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); --transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
--padding-start: #{$item-md-padding-start}; --padding-start: #{$item-md-padding-start};
--inner-padding-end: #{$item-md-padding-end / 2}; --inner-padding-end: #{$item-md-padding-end / 2};
@ -21,6 +17,15 @@
text-transform: none; 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 // Material Design Item Lines
// -------------------------------------------------- // --------------------------------------------------

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

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