javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +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

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

@ -92,6 +92,13 @@
font-kerning: none; font-kerning: none;
} }
// Back Button Ripple effect
// --------------------------------------------------
ion-ripple-effect {
color: var(--ripple-color);
}
// Back Button with Color // Back Button with 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 color="secondary" class="custom"></ion-back-button>
<ion-back-button class="custom ion-focused"></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 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> </p>
<ion-toolbar> <ion-toolbar>
@ -195,6 +197,10 @@
--ion-toolbar-background: #222; --ion-toolbar-background: #222;
--ion-toolbar-color: #ddd; --ion-toolbar-color: #ddd;
} }
.ripple {
--ripple-color: red;
}
</style> </style>
</body> </body>