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

fix(back-button): MD ripple now accounts for --ripple-color (#23749)

Browse Source 
resolves #23748
This commit is contained in:
Liam DeBeasi
2021-08-09 16:21:38 -04:00
committed by GitHub
parent 067e621bbc
commit 6b18a89ac2
2 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/components/back-button/back-button.scss
View File

@ -92,6 +92,13 @@
font-kerning: none;
}
// Back Button Ripple effect
// --------------------------------------------------
ion-ripple-effect {
color: var(--ripple-color);
}
// Back Button with Color
// --------------------------------------------------
@ -241,4 +248,4 @@ ion-icon {
:host(.in-toolbar:not(.in-toolbar-color)) {
color: #{var(--ion-toolbar-color, var(--color))};
}
}

6
core/src/components/back-button/test/basic/index.html
View File

@ -78,6 +78,8 @@
<ion-back-button color="secondary" class="custom"></ion-back-button>
<ion-back-button class="custom ion-focused"></ion-back-button>
<ion-back-button color="secondary" class="custom ion-focused"></ion-back-button>
<ion-back-button class="ripple"></ion-back-button>
<ion-back-button class="ripple" color="primary"></ion-back-button>
</p>
<ion-toolbar>
@ -195,6 +197,10 @@
--ion-toolbar-background: #222;
--ion-toolbar-color: #ddd;
}
.ripple {
--ripple-color: red;
}
</style>
</body>