Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-06 08:31:48 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement ripple effect for material themes

Browse source
This commit is contained in:
eugene-sinitsyn 2020-03-04 19:31:08 +03:00
parent b03633ba9f
commit 690bd322c2
12 changed files with 70 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/app/@theme/styles/_ripple.scss Normal file
View file

@ -0,0 +1,21 @@
@mixin ngx-ripple() {
.mat-ripple {
overflow: hidden;
position: relative;
&:not(:empty) {
transform: translateZ(0);
}
}
.mat-ripple-element {
position: absolute;
border-radius: 50%;
pointer-events: none;
transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
transform: scale(0);
// switch ripple color depending on selected theme
background-color: nb-theme(background-alternative-color-4);
opacity: .1;
}
}

2
src/app/@theme/styles/styles.scss
View file

@ -18,6 +18,7 @@
@import './layout';
@import './overrides';
@import './ripple';
// install the framework and custom global styles
@include nb-install() {
@ -31,4 +32,5 @@
@include ngx-pace-theme();
@include nb-overrides();
@include ngx-ripple();
};