|
40 | 40 | @include a11y-visually-hidden; |
41 | 41 | } |
42 | 42 |
|
43 | | -/// Emits the mixin's content nested under `$selector-context` if `$selector-context` |
44 | | -/// is non-empty. |
45 | | -/// @param {String} selector-context The selector under which to nest the mixin's content. |
46 | | -@mixin _optionally-nest-content($selector-context) { |
47 | | - @if ($selector-context == '') { |
48 | | - @content; |
49 | | - } |
50 | | - @else { |
51 | | - #{$selector-context} { |
52 | | - @content; |
53 | | - } |
54 | | - } |
55 | | -} |
56 | | - |
57 | | -/// Applies styles for users in high contrast mode. Note that this only applies |
58 | | -/// to Microsoft browsers. Chrome can be included by checking for the `html[hc]` |
59 | | -/// attribute, however Chrome handles high contrast differently. |
| 43 | +/// Applies styles for users in high contrast mode. |
60 | 44 | /// |
61 | | -/// @param {String} target Type of high contrast setting to target. Defaults to `active`, can be |
62 | | -/// `white-on-black` or `black-on-white`. |
63 | | -/// @param {String} encapsulation Whether to emit styles for view encapsulation. Values are: |
64 | | -/// * `on` - works for `Emulated`, `Native`, and `ShadowDom` |
65 | | -/// * `off` - works for `None` |
66 | | -/// * `any` - works for all encapsulation modes by emitting the CSS twice (default). |
67 | | -@mixin high-contrast($target: active, $encapsulation: 'any') { |
68 | | - @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') { |
| 45 | +/// @param {String} target Type of high contrast setting to target. Can be `active` or `none`. |
| 46 | +/// Defaults to `active`. |
| 47 | +/// @param {String} encapsulation No longer used and will be removed. |
| 48 | +@mixin high-contrast($target: active, $encapsulation: null) { |
| 49 | + // Historically we used to support `black-on-white` and `white-on-black` so we |
| 50 | + // allow them here anyway. They'll be coerced to `active` below. |
| 51 | + @if ($target != 'active' and $target != 'none' and $target != 'black-on-white' and |
| 52 | + $target != 'white-on-black') { |
69 | 53 | @error 'Unknown cdk-high-contrast value "#{$target}" provided. ' + |
70 | | - 'Allowed values are "active", "black-on-white", and "white-on-black"'; |
| 54 | + 'Allowed values are "active" and "none"'; |
71 | 55 | } |
72 | 56 |
|
73 | | - @if ($encapsulation != 'on' and $encapsulation != 'off' and $encapsulation != 'any') { |
74 | | - @error 'Unknown cdk-high-contrast encapsulation "#{$encapsulation}" provided. ' + |
75 | | - 'Allowed values are "on", "off", and "any"'; |
76 | | - } |
77 | | - |
78 | | - // If the selector context has multiple parts, such as `.section, .region`, just doing |
79 | | - // `.cdk-high-contrast-xxx #{&}` will only apply the parent selector to the first part of the |
80 | | - // context. We address this by nesting the selector context under .cdk-high-contrast. |
81 | | - @at-root { |
82 | | - $selector-context: #{&}; |
83 | | - |
84 | | - @if ($encapsulation != 'on') { |
85 | | - // Note that if this selector is updated, the same change has to be made inside |
86 | | - // `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations. |
87 | | - .cdk-high-contrast-#{$target} { |
88 | | - @include _optionally-nest-content($selector-context) { |
89 | | - @content; |
90 | | - } |
91 | | - } |
92 | | - } |
93 | | - |
94 | | - @if ($encapsulation != 'off') { |
95 | | - .cdk-high-contrast-#{$target} :host { |
96 | | - @include _optionally-nest-content($selector-context) { |
97 | | - @content; |
98 | | - } |
99 | | - } |
100 | | - } |
| 57 | + @media (forced-colors: #{if($target == none, none, active)}) { |
| 58 | + @content; |
101 | 59 | } |
102 | 60 | } |
0 commit comments