_index.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. /// Emits a CSS class, `.cdk-visually-hidden`. This class can be applied to an element
  2. /// to make that element visually hidden while remaining available to assistive technology.
  3. @mixin a11y-visually-hidden() {
  4. .cdk-visually-hidden {
  5. border: 0;
  6. clip: rect(0 0 0 0);
  7. height: 1px;
  8. margin: -1px;
  9. overflow: hidden;
  10. padding: 0;
  11. position: absolute;
  12. width: 1px;
  13. // This works around a Chrome bug that can cause the tab to crash when large amounts of
  14. // non-English text get wrapped: https://bugs.chromium.org/p/chromium/issues/detail?id=1201444
  15. white-space: nowrap;
  16. // Avoid browsers rendering the focus ring in some cases.
  17. outline: 0;
  18. // Avoid some cases where the browser will still render the native controls (see #9049).
  19. -webkit-appearance: none;
  20. -moz-appearance: none;
  21. // We need at least one of top/bottom/left/right in order to prevent cases where the
  22. // absolute-positioned element is pushed down and can affect scrolling (see #24597).
  23. // `left` was chosen here, because it's the least likely to break overrides where the
  24. // element might have been positioned (e.g. `mat-checkbox`).
  25. left: 0;
  26. [dir='rtl'] & {
  27. left: auto;
  28. right: 0;
  29. }
  30. }
  31. }
  32. /// @deprecated Use `a11y-visually-hidden`.
  33. @mixin a11y() {
  34. @include a11y-visually-hidden;
  35. }
  36. /// Applies styles for users in high contrast mode.
  37. ///
  38. /// @param {String} target Type of high contrast setting to target. Can be `active` or `none`.
  39. /// Defaults to `active`.
  40. /// @param {String} encapsulation No longer used and will be removed.
  41. @mixin high-contrast($target: active, $encapsulation: null) {
  42. // Historically we used to support `black-on-white` and `white-on-black` so we
  43. // allow them here anyway. They'll be coerced to `active` below.
  44. @if ($target != 'active' and $target != 'none' and $target != 'black-on-white' and
  45. $target != 'white-on-black') {
  46. @error 'Unknown cdk-high-contrast value "#{$target}" provided. ' +
  47. 'Allowed values are "active" and "none"';
  48. }
  49. @media (forced-colors: #{if($target == none, none, active)}) {
  50. @content;
  51. }
  52. }