File tree Expand file tree Collapse file tree 1 file changed +10
-27
lines changed Expand file tree Collapse file tree 1 file changed +10
-27
lines changed Original file line number Diff line number Diff line change @@ -695,16 +695,21 @@ $_avatar-trailing-padding: 8px;
695
695
696
696
// Used as a state overlay.
697
697
& ::after {
698
- $offset : 2 px ;
698
+ $offset : 18 px ; /* size of the remove icon */
699
699
content : ' ' ;
700
700
display : block ;
701
701
opacity : 0 ;
702
702
position : absolute ;
703
- top : 0 - $offset ;
704
- bottom : 0 - $offset ;
705
- left : 8 px - $offset ;
706
- right : 8 px - $offset ;
703
+ top : 2 - $offset ;
704
+ bottom : 2 - $offset ;
705
+ left : 12 - $offset ;
706
+ right : 12 - $offset ;
707
707
border-radius : 50% ;
708
+ // Increases touch target to improve accessibility and fix b/286959517
709
+ z-index : 100 ;
710
+ pointer-events : all ;
711
+ height : 48px ;
712
+ width : 48px ;
708
713
}
709
714
710
715
.mat-icon {
@@ -715,28 +720,6 @@ $_avatar-trailing-padding: 8px;
715
720
}
716
721
}
717
722
718
- // Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517
719
- .mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing ,
720
- .mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing ,
721
- .mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action {
722
- & .mat-mdc-chip-remove ,
723
- & .mat-mdc-standard-chip .mdc-evolution-chip__action--trailing ,
724
- & .mdc-evolution-chip--with-avatar .mdc-evolution-chip__action--trailing {
725
- padding : 16px ;
726
- }
727
- }
728
-
729
- // Increases mdc-chip-remove trailing icon action touch-target in order to fix b/286959517
730
- .mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing ,
731
- .mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing ,
732
- .mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action {
733
- & .mat-mdc-chip-remove ,
734
- & .mat-mdc-standard-chip .mdc-evolution-chip__action--trailing ,
735
- & .mdc-evolution-chip--with-avatar .mdc-evolution-chip__action--trailing {
736
- padding : 16px ;
737
- }
738
- }
739
-
740
723
.mat-chip-edit-input {
741
724
cursor : text ;
742
725
display : inline-block ;
You can’t perform that action at this time.
0 commit comments