Question 171050 in CSS Question posted in
Some basic documentation can be found here.

How do I move the focus effect of a mat-icon-button in CSS?

I have this button

<button mat-icon-button color="black" style="height: 21px; bottom: 8px;" *ngIf="!transaction.HasMatch" (click)="matchPayable($event, transaction)">
   <mat-icon style="line-height: 20px;">playlist_add</mat-icon>
</button>

The problem is, that when I click on the button, the focus is not exactly around the icon as in this screenshot.
So the focus needs to be moved downwards, but I don’t know how.
It would be an alternative to remove the focus effect completely. Also I don’t know how to achieve this.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The easiest fix was the following:

            <button mat-icon-button color="black" style="height: 25px; width: 25px; left: 3px;" *ngIf="!transaction.HasMatch" (click)="matchPayable($event, transaction)">
            <mat-icon style="line-height: 10px;" >playlist_add</mat-icon>
        </button>

  2. 0

    Applying customized CSS to the ::ng-deep pseudo-element will allow you to change the focus position of a mat-icon-button. To move the focus impact lower in your situation, paste the CSS code shown below:

    ::ng-deep .mat-icon-button:focus:not(.cdk-focused) {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
  outline: none;
}

::ng-deep .mat-icon-button:focus:not(.cdk-focused)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px; /* adjust this value to move the focus effect downwards */
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: ripple 1s linear;
  z-index: -1;
}

@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 0.5;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

    The mat-icon-button element will receive a custom focus effect from this code that shifts the emphasis 5 pixels to the right. The bottom value can be changed to alter the focal effect up or down as necessary.

    You should be aware that ::ng-deep is a deprecated pseudo-selector and that a separate method should be used to apply styles to child components.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search