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

fix(item): use the global activated background for md ripple color (#16752)

Browse Source 
fixes #16585
This commit is contained in:
Brandy Carney
2019-04-24 11:36:12 -04:00
committed by GitHub
parent 33acd78469
commit 95945c05a5
5 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
core/src/components/fab-button/fab-button.scss
View File

@ -4,17 +4,6 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
--transition: background-color, opacity 100ms linear;
--ripple-color: currentColor;
--border-radius: #{$fab-border-radius};
--border-width: 0;
--border-style: none;
--border-color: initial;
--padding-top: 0;
--padding-end: 0;
--padding-bottom: 0;
--padding-start: 0;
/** /**
* @prop --background: Background of the button * @prop --background: Background of the button
* @prop --background-activated: Background of the button when activated * @prop --background-activated: Background of the button when activated
@ -40,6 +29,17 @@
* @prop --padding-bottom: Padding bottom of the button * @prop --padding-bottom: Padding bottom of the button
* @prop --padding-start: Padding start of the button * @prop --padding-start: Padding start of the button
*/ */
--transition: background-color, opacity 100ms linear;
--ripple-color: currentColor;
--border-radius: #{$fab-border-radius};
--border-width: 0;
--border-style: none;
--border-color: initial;
--padding-top: 0;
--padding-end: 0;
--padding-bottom: 0;
--padding-start: 0;
@include margin(0); @include margin(0);
display: block; display: block;

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

@ -57,7 +57,7 @@
--detail-icon-color: initial; --detail-icon-color: initial;
--detail-icon-font-size: 20px; --detail-icon-font-size: 20px;
--detail-icon-opacity: 0.25; --detail-icon-opacity: 0.25;
--ripple-color: currentColor; --ripple-color: var(--ion-item-background-activated, currentColor);
@include font-smoothing(); @include font-smoothing();

3
core/src/themes/test/css-variables/css/dark.css
View File

@ -24,4 +24,7 @@
--ion-background-color-rgb: 23,23,23; --ion-background-color-rgb: 23,23,23;
--ion-background-color-rgb: 0,0,0; --ion-background-color-rgb: 0,0,0;
--ion-text-color-rgb: 255,255,255; --ion-text-color-rgb: 255,255,255;
--ion-item-background: #1b2025;
--ion-item-background-activated: #051b35;
} }

1
core/src/themes/test/css-variables/css/vibrant.css
View File

@ -77,4 +77,5 @@
--ion-background-color: #778899; --ion-background-color: #778899;
--ion-item-background: #fff; --ion-item-background: #fff;
--ion-item-border-color: #5bff76; --ion-item-border-color: #5bff76;
--ion-item-background-activated: #5bff76;
} }

4
core/src/themes/test/css-variables/index.html
View File

@ -141,11 +141,11 @@
<ion-label>Super Metroid</ion-label> <ion-label>Super Metroid</ion-label>
<ion-note slot="end">Note</ion-note> <ion-note slot="end">Note</ion-note>
</ion-item> </ion-item>
<ion-item> <ion-item href="#">
<ion-label>Mega Man X</ion-label> <ion-label>Mega Man X</ion-label>
<ion-note slot="end">Note</ion-note> <ion-note slot="end">Note</ion-note>
</ion-item> </ion-item>
<ion-item> <ion-item href="#" class="activated">
<ion-label>The Legend of Zelda</ion-label> <ion-label>The Legend of Zelda</ion-label>
<ion-note slot="end">Note</ion-note> <ion-note slot="end">Note</ion-note>
</ion-item> </ion-item>