Merge pull request #7356 from IgniteUI/simeonoff/ripple-fix

fix(ripple): reset margin and border to avoid displacement

Author: rkaraivanov

projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss

@@ -59,6 +59,8 @@
         transform: translate3d(0, 0, 0) scale(0);
         will-change: opacity, transform;
         opacity: .5;
+        margin: 0 !important;
+        border: none !important;
     }
 
     %igx-ripple-wrapper {

projects/igniteui-angular/src/lib/directives/ripple/ripple.directive.ts

@@ -122,8 +122,8 @@ export class IgxRippleDirective {
 
         const rectBounds = target.getBoundingClientRect();
         const radius = Math.max(rectBounds.width, rectBounds.height);
-        let left = event.clientX - rectBounds.left - radius / 2;
-        let top = event.clientY - rectBounds.top - radius / 2;
+        let left = Math.round(event.clientX - rectBounds.left - radius / 2);
+        let top = Math.round(event.clientY - rectBounds.top - radius / 2);
 
         if (this._centered) {
             left = top = 0;

src/app/app.component.html

@@ -36,15 +36,15 @@
 
         <ng-template *ngIf="drawerState.miniVariant" igxDrawerMini>
             <nav>
-                <span *ngFor="let item of componentLinks" igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
+                <span *ngFor="let item of componentLinks" igxRipple igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
                     <igx-icon fontSet="material">{{item.icon}}</igx-icon>
                 </span>
 
-                <span *ngFor="let item of directiveLinks" igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
+                <span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
                     <igx-icon fontSet="material">{{item.icon}}</igx-icon>
                 </span>
 
-                <span *ngFor="let item of styleLinks" igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
+                <span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
                     <igx-icon fontSet="material">{{item.icon}}</igx-icon>
                 </span>
             </nav>