system-admin--admin-list.pcss.css

Same filename and directory in other branches
  1. 11.x core/themes/claro/css/components/system-admin--admin-list.pcss.css
  2. 10 core/themes/claro/css/components/system-admin--admin-list.pcss.css
  3. 8.9.x core/themes/claro/css/components/system-admin--admin-list.pcss.css

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

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