tablesort-indicator.pcss.css

Same filename in other branches
  1. 8.9.x core/themes/claro/css/components/tablesort-indicator.pcss.css
  2. 10 core/themes/claro/css/components/tablesort-indicator.pcss.css
  3. 11.x core/themes/claro/css/components/tablesort-indicator.pcss.css

Tablesort indicator styles.

File

core/themes/claro/css/components/tablesort-indicator.pcss.css

View source
  1. /**
  2. * @file
  3. * Tablesort indicator styles.
  4. */
  5. .tablesort {
  6. position: absolute;
  7. top: 50%;
  8. right: 1rem;
  9. width: 0.875rem; /* 14px */
  10. height: 1rem; /* 16px */
  11. margin-top: -0.5rem; /* -8px */
  12. opacity: 0.5;
  13. background: url(../../images/icons/000f33/sort--inactive--ltr.svg) no-repeat 0 50%;
  14. background-size: auto;
  15. @media (forced-colors: active) {
  16. background: linktext;
  17. mask-image: url(../../images/icons/000f33/sort--inactive--ltr.svg);
  18. mask-repeat: no-repeat;
  19. mask-position: 0 50%;
  20. }
  21. }
  22. /* stylelint-disable-next-line selector-type-no-unknown */
  23. _:-ms-fullscreen, /* Only IE 11 */
  24. .tablesort {
  25. position: static;
  26. float: right;
  27. margin-top: 0.125rem; /* 2px */
  28. margin-right: -1.5rem; /* -24px */
  29. }
  30. [dir="rtl"] .tablesort {
  31. right: auto;
  32. left: 1rem; /* 16px */
  33. background-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
  34. @media (forced-colors: active) {
  35. background: linktext;
  36. mask-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
  37. mask-repeat: no-repeat;
  38. mask-position: 0 50%;
  39. }
  40. }
  41. /* stylelint-disable-next-line selector-type-no-unknown */
  42. _:-ms-fullscreen, /* Only IE 11 */
  43. [dir="rtl"] .tablesort {
  44. float: left;
  45. margin-right: 0;
  46. margin-left: -1.5rem; /* -24px */
  47. }
  48. .tablesort--asc,
  49. [dir="rtl"] .tablesort--asc {
  50. opacity: 1;
  51. background-image: url(../../images/icons/003ecc/sort--asc.svg);
  52. @media (forced-colors: active) {
  53. background: linktext;
  54. mask-image: url(../../images/icons/003ecc/sort--asc.svg);
  55. }
  56. }
  57. .tablesort--desc,
  58. [dir="rtl"] .tablesort--desc {
  59. opacity: 1;
  60. background-image: url(../../images/icons/003ecc/sort--desc.svg);
  61. @media (forced-colors: active) {
  62. background: linktext;
  63. mask-image: url(../../images/icons/003ecc/sort--desc.svg);
  64. }
  65. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.