tablesort-indicator.css

Same filename in other branches
  1. 9 core/themes/seven/css/components/tablesort-indicator.css
  2. 9 core/themes/claro/css/components/tablesort-indicator.css
  3. 9 core/themes/bartik/css/components/tablesort-indicator.css
  4. 8.9.x core/themes/seven/css/components/tablesort-indicator.css
  5. 8.9.x core/themes/claro/css/components/tablesort-indicator.css
  6. 8.9.x core/themes/bartik/css/components/tablesort-indicator.css
  7. 11.x core/themes/claro/css/components/tablesort-indicator.css

Tablesort indicator styles.

File

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

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Tablesort indicator styles.
  10. */
  11. .tablesort {
  12. position: absolute;
  13. top: 50%;
  14. inset-inline-end: 1rem;
  15. width: 0.875rem;
  16. height: var(--space-m);
  17. margin-block-start: -0.5rem;
  18. opacity: 0.5;
  19. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
  20. background-repeat: no-repeat;
  21. background-position: 0 50%;
  22. background-size: auto;
  23. }
  24. [dir="rtl"] .tablesort {
  25. /* Horizontally flip the element. */
  26. transform: scaleX(-1);
  27. }
  28. @media (forced-colors: active) {
  29. .tablesort {
  30. background: linktext;
  31. -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
  32. mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
  33. -webkit-mask-repeat: no-repeat;
  34. mask-repeat: no-repeat;
  35. -webkit-mask-position: 0 50%;
  36. mask-position: 0 50%;
  37. }
  38. }
  39. .tablesort--asc {
  40. opacity: 1;
  41. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
  42. }
  43. @media (forced-colors: active) {
  44. .tablesort--asc {
  45. background: linktext;
  46. -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
  47. mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
  48. }
  49. }
  50. .tablesort--desc {
  51. opacity: 1;
  52. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
  53. }
  54. @media (forced-colors: active) {
  55. .tablesort--desc {
  56. background: linktext;
  57. -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
  58. mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
  59. }
  60. }

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