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

fix(item): detail context based in text color

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-10-04 18:51:58 +02:00
parent f00be0db07
commit e51f1f36f1
5 changed files with 26 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,6 @@
--background-activated: #{$item-ios-background-color-active};
--border-color: #{$item-ios-border-bottom-color};
--color: #{$item-ios-text-color};
--detail-icon-color: #{$item-ios-border-bottom-color};
--highlight-height: 0;
--highlight-color-focused: #{$item-ios-input-highlight-color};
--highlight-color-valid: #{$item-ios-input-highlight-color-valid};
@ -125,16 +124,6 @@
@include margin(($item-ios-padding-end / 2));
}
// iOS Item Detail Push
// --------------------------------------------------
.item-detail-icon {
color: var(--detail-icon-color);
font-size: 20px;
}
// TODO: MOVE FROM RADIO
// iOS Radio Item Label: Checked
// -----------------------------------------

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

@ -6,6 +6,10 @@
// --------------------------------------------------
:host {
--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};
--transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
--padding-start: #{$item-md-padding-start};
--background: var(--ion-item-background-color, transparent);
@ -14,7 +18,6 @@
--border-color: #{$item-md-border-bottom-color};
--inner-padding-end: #{$item-md-padding-end / 2};
--inner-border-width: #{0 0 $item-md-border-bottom-width 0};
--detail-icon-color: #{$item-md-border-bottom-color};
--highlight-height: 2px;
--highlight-color-focused: #{$item-md-input-highlight-color};
--highlight-color-valid: #{$item-md-input-highlight-color-valid};
@ -67,16 +70,6 @@
--show-inset-highlight: 0;
}
// Material Design Item Detail Push
// --------------------------------------------------
.item-detail-icon {
color: var(--detail-icon-color);
font-size: 20px;
}
// Material Design Item Slots
// --------------------------------------------------

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

@ -15,7 +15,8 @@
* @prop --color: Color of the item
*
* @prop --detail-icon-color: Color of the item detail icon
*
* @prop --detail-icon-opacity: Opacity of the item detail icon
* @prop --detail-icon-font-size: Font size of the item detail icon
* @prop --inner-border-width: Width of the item inner border
* @prop --inner-box-shadow: Box shadow of the item inner
* @prop --inner-padding-bottom: Bottom padding of the item inner
@ -52,6 +53,9 @@
--inner-box-shadow: none;
--show-full-highlight: 0;
--show-inset-highlight: 0;
--detail-icon-color: currentColor;
--detail-icon-font-size: 20px;
--detail-icon-opacity: 0.25;
@include font-smoothing();
@ -83,10 +87,6 @@
border-color: current-color(shade);
}
:host(.ion-color) .item-detail-icon {
color: current-color(shade);
}
// Activated Item
// --------------------------------------------------
@ -188,6 +188,17 @@ button, a {
box-sizing: border-box;
}
// Item Detail Icon
// -----------------------------------------
.item-detail-icon {
color: var(--detail-icon-color);
font-size: var(--detail-icon-font-size);
opacity: var(--detail-icon-opacity);
}
// Item Slots
// -----------------------------------------

2
core/src/components/item/test/buttons/index.html
View File

@ -31,7 +31,7 @@
<ion-label>a[ion-item] secondary</ion-label>
</ion-item>
<ion-item button id="attachClick">
<ion-item button color="dark" id="attachClick">
<ion-label>button[ion-item]</ion-label>
</ion-item>

10
core/src/components/item/test/colors/index.html
View File

@ -30,7 +30,7 @@
</ion-label>
</ion-item>
<ion-item color="dark">
<ion-item button color="dark">
<ion-label>
<h1>Heading</h1>
<p>Paragraph</p>
@ -49,13 +49,13 @@
</ion-label>
</ion-item>
<ion-item onclick="testClick(event)" color="secondary">
<ion-item button onclick="testClick(event)" color="secondary">
<ion-label>
button[ion-item]
</ion-label>
</ion-item>
<ion-item onclick="testClick(event)" color="secondary" class="activated">
<ion-item button onclick="testClick(event)" color="secondary" class="activated">
<ion-label>
button[ion-item].activated secondary
</ion-label>
@ -70,7 +70,7 @@
<ion-button slot="end" fill="outline">Outline</ion-button>
</ion-item>
<ion-item onclick="testClick(event)" color="dark">
<ion-item button onclick="testClick(event)" color="dark">
<ion-button slot="start">
<ion-icon slot="start" name="home"></ion-icon>
Left Icon
@ -83,7 +83,7 @@
</ion-label>
</ion-item>
<ion-item onclick="testClick(event)" disabled color="dark">
<ion-item button onclick="testClick(event)" disabled color="dark">
<ion-button slot="start">
<ion-icon slot="start" name="home"></ion-icon>
Left Icon