fix(select, autocomplete): no indication of active option in high contrast mode. (#10229)

Fixes users in high contrast mode not being able to distinguish the active option from all the other options.

Fixes #10207.
This commit is contained in:
Kristiyan Kostadinov
2018-03-06 10:36:12 -05:00
committed by Jeremy Elbourn
parent 3f8523cdce
commit be0f17e28a
+17
View File
@@ -27,6 +27,23 @@
padding-right: $mat-menu-side-padding * 2;
}
}
@include cdk-high-contrast {
$high-contrast-border-width: 1px;
// Add a margin to offset the border that we're adding to active option, in order
// to avoid the options shifting as the user is moving through the list.
margin: 0 $high-contrast-border-width;
&.mat-active {
// We use a border here, rather than an outline, because the outline will be cut off
// by the `overflow: hidden` on the panel wrapping the options, whereas a border
// will push the element inwards. This could be done using `outline-offset: -1px`,
// however the property isn't supported on IE11.
border: solid $high-contrast-border-width currentColor;
margin: 0;
}
}
}
// Collapses unwanted whitespace created by newlines in code like the following: