You are here

system-admin--admin-list.pcss.css in Drupal 10

Admin list and admin item modules.

File

core/themes/claro/css/components/system-admin--admin-list.pcss.css
View source
  1. /**
  2. * @file
  3. * Admin list and admin item modules.
  4. */
  5. /**
  6. * Admin list (wrapper of admin items).
  7. */
  8. .admin-list {
  9. margin-top: 1em;
  10. margin-bottom: 2em;
  11. padding: 0;
  12. }
  13. .admin-list--panel {
  14. margin: -1em -1.5em;
  15. }
  16. /**
  17. * Admin item.
  18. */
  19. .admin-item {
  20. padding: 0.75em 1.5em 0.75em 3em;
  21. }
  22. [dir="rtl"] .admin-item {
  23. padding-right: 3em;
  24. padding-left: 1.5em;
  25. }
  26. .admin-item:not(:last-child) {
  27. border-bottom: calc(1em / 16) solid var(--color-gray-200);
  28. }
  29. .admin-item__title {
  30. font-weight: bold;
  31. }
  32. .admin-item__link {
  33. position: relative;
  34. display: inline-block;
  35. margin-left: -1.5em;
  36. padding-left: 1.5em;
  37. text-decoration: none;
  38. }
  39. [dir="rtl"] .admin-item__link {
  40. margin-right: -1.5em;
  41. margin-left: 0;
  42. padding-right: 1.5em;
  43. padding-left: 0;
  44. }
  45. .admin-item__link::before {
  46. position: absolute;
  47. top: 0;
  48. left: 0;
  49. display: block;
  50. width: 1em;
  51. height: 1.5em;
  52. content: "";
  53. background: transparent no-repeat 50% 50%;
  54. background-image: url(../../images/icons/003ecc/arrow-right.svg);
  55. }
  56. [dir="rtl"] .admin-item__link::before {
  57. right: 0;
  58. left: auto;
  59. transform: scaleX(-1);
  60. }
  61. @media (forced-colors: active) {
  62. .admin-item__link::before {
  63. mask-image: url(../../images/icons/003ecc/arrow-right.svg);
  64. mask-repeat: no-repeat;
  65. mask-position: center center;
  66. background-color: linktext;
  67. background-image: none;
  68. }
  69. }
  70. .admin-item__description {
  71. margin: 0.5em 0 0.25em;
  72. color: var(--color-gray-800);
  73. }
  74. [dir="rtl"] .admin-item__description {
  75. margin-right: 0;
  76. }