Skip to content

Commit fad1dbd

Browse files
crisbetovictoriaaa234
authored andcommitted
fix(sort): arrow indicator not visible in high contrast mode (#12159)
Fixes the sorting header indicator not being visible in high contrast mode.
1 parent 35293f5 commit fad1dbd

File tree

1 file changed

+21
-0
lines changed

1 file changed

+21
-0
lines changed

src/lib/sort/sort-header.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '../../cdk/a11y/a11y';
2+
13
$mat-sort-header-arrow-margin: 6px;
24
$mat-sort-header-arrow-container-size: 12px;
35
$mat-sort-header-arrow-stem-size: 10px;
@@ -60,6 +62,11 @@ $mat-sort-header-arrow-hint-opacity: 0.38;
6062
margin: auto;
6163
display: flex;
6264
align-items: center;
65+
66+
@include cdk-high-contrast {
67+
width: 0;
68+
border-left: solid $mat-sort-header-arrow-thickness;
69+
}
6370
}
6471

6572
.mat-sort-header-indicator {
@@ -78,6 +85,13 @@ $mat-sort-header-arrow-hint-opacity: 0.38;
7885
width: $mat-sort-header-arrow-thickness;
7986
background: currentColor;
8087
transform: rotate(45deg);
88+
89+
@include cdk-high-contrast {
90+
width: 0;
91+
height: 0;
92+
border-top: solid $mat-sort-header-arrow-thickness;
93+
border-left: solid $mat-sort-header-arrow-thickness;
94+
}
8195
}
8296

8397
.mat-sort-header-pointer-left,
@@ -87,6 +101,13 @@ $mat-sort-header-arrow-hint-opacity: 0.38;
87101
height: $mat-sort-header-arrow-thickness;
88102
position: absolute;
89103
top: 0;
104+
105+
@include cdk-high-contrast {
106+
width: 0;
107+
height: 0;
108+
border-left: solid $mat-sort-header-arrow-pointer-length;
109+
border-top: solid $mat-sort-header-arrow-thickness;
110+
}
90111
}
91112

92113
.mat-sort-header-pointer-left {

0 commit comments

Comments
 (0)