_form-field-high-contrast.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. @use '@angular/cdk';
  2. @mixin private-form-field-high-contrast() {
  3. $focus-indicator-width: 3px;
  4. $focus-indicator-style: dashed;
  5. .mat-form-field-appearance-fill {
  6. // The outline of the `fill` appearance is achieved through a background color
  7. // which won't be visible in high contrast mode. Add an outline to replace it.
  8. .mat-mdc-text-field-wrapper {
  9. @include cdk.high-contrast {
  10. outline: solid 1px;
  11. }
  12. }
  13. // Use GreyText for the disabled outline color which will account for the user's configuration.
  14. &.mat-form-field-disabled .mat-mdc-text-field-wrapper {
  15. @include cdk.high-contrast {
  16. outline-color: GrayText;
  17. }
  18. }
  19. }
  20. // If a form field with fill appearance is focused, update the outline to be
  21. // dashed and thicker to indicate focus.
  22. .mat-form-field-appearance-fill.mat-focused .mat-mdc-text-field-wrapper {
  23. @include cdk.high-contrast {
  24. outline: $focus-indicator-style $focus-indicator-width;
  25. }
  26. }
  27. // For form fields with outline appearance, we show a dashed thick border on top
  28. // of the solid notched-outline border to indicate focus.
  29. .mat-mdc-form-field.mat-focused .mdc-notched-outline {
  30. @include cdk.high-contrast {
  31. border: $focus-indicator-style $focus-indicator-width;
  32. }
  33. }
  34. }