_list-item-hcm-indicator.scss 764 B

1234567891011121314151617181920212223242526272829
  1. @use '@angular/cdk';
  2. // Renders a circle indicator when Windows Hich Constrast mode (HCM) is enabled. In some
  3. // situations, such as a selected option, the list item communicates the selected state by changing
  4. // its background color. Since that doesn't work in HCM, this mixin provides an alternative by
  5. // rendering a circle.
  6. @mixin private-high-contrast-list-item-indicator() {
  7. @include cdk.high-contrast {
  8. &::after {
  9. $size: 10px;
  10. content: '';
  11. position: absolute;
  12. top: 50%;
  13. right: 16px;
  14. transform: translateY(-50%);
  15. width: $size;
  16. height: 0;
  17. border-bottom: solid $size;
  18. border-radius: $size;
  19. }
  20. [dir='rtl'] {
  21. &::after {
  22. right: auto;
  23. left: 16px;
  24. }
  25. }
  26. }
  27. }