system-admin--admin-list.css

Same filename in this branch
  1. main core/themes/claro/css/components/system-admin--admin-list.css
  2. main core/themes/admin/css/components/system-admin--admin-list.css
Same filename and directory in other branches
  1. 10 core/themes/claro/css/components/system-admin--admin-list.css
  2. 11.x core/themes/claro/css/components/system-admin--admin-list.css
  3. 9 core/themes/claro/css/components/system-admin--admin-list.css
  4. 8.9.x core/themes/claro/css/components/system-admin--admin-list.css
  5. 11.x core/themes/admin/css/components/system-admin--admin-list.css
  6. 11.x core/themes/default_admin/css/components/system-admin--admin-list.css

Admin list and admin item modules.

File

core/themes/default_admin/css/components/system-admin--admin-list.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. * Admin list and admin item modules.
  10. */
  11. /**
  12. * Admin list (wrapper of admin items).
  13. */
  14. .admin-list {
  15. margin-block: 1em 2em;
  16. /* Override specificity of .gin-layer-wrapper in layers.css. */
  17. &[class] {
  18. padding: var(--admin-space-s) 0;
  19. }
  20. .panel
  21. }
  22. .admin-list--panel {
  23. margin: -1em -1.5em;
  24. }
  25. /**
  26. * Admin item.
  27. */
  28. .admin-item {
  29. position: relative;
  30. margin: var(--admin-space-l) var(--admin-space-s);
  31. padding-block: var(--admin-space-density-s);
  32. padding-inline: var(--admin-space-l) calc(var(--admin-space-xs) + var(--admin-space-xl));
  33. &:not(:last-child)::after {
  34. position: absolute;
  35. display: block;
  36. width: calc(100% + var(--admin-space-l));
  37. height: 1px;
  38. content: "";
  39. opacity: 0.75;
  40. border-block-end: 1px solid var(--admin-color-border-table);
  41. inset-inline-start: calc(var(--admin-space-s) * -1);
  42. inset-block-end: calc(var(--admin-space-s) * -1);
  43. }
  44. &:first-child {
  45. margin-block-start: 0;
  46. }
  47. &:last-child {
  48. margin-block-end: 0;
  49. }
  50. }
  51. .admin-item--panel {
  52. margin-block: 0;
  53. margin-inline: calc(var(--admin-space-l) * -1);
  54. }
  55. .admin-item__title {
  56. font-size: var(--admin-font-size-m);
  57. font-weight: var(--admin-font-weight-semibold);
  58. }
  59. .admin-item__link {
  60. position: absolute;
  61. display: inline-block;
  62. width: 100%;
  63. height: 100%;
  64. margin: 0;
  65. padding: 0;
  66. -webkit-text-decoration: none;
  67. text-decoration: none;
  68. text-indent: -999em;
  69. inset-block-start: 0;
  70. inset-inline-start: 0;
  71. &:hover,
  72. &:focus {
  73. border-radius: var(--admin-radius-m);
  74. background: var(--admin-color-primary-soft);
  75. ~ .admin-item__title,
  76. ~ .admin-item__description {
  77. color: var(--admin-color-primary);
  78. }
  79. }
  80. /**
  81. * Admin item link icon.
  82. */
  83. &::before {
  84. position: absolute;
  85. inset-block-start: 50%;
  86. inset-inline-end: var(--admin-space-m);
  87. display: block;
  88. width: 1em;
  89. height: 1.5em;
  90. content: "";
  91. transform: translateY(-50%);
  92. background-color: var(--admin-color-primary);
  93. mask-image: var(--admin-icon-handle);
  94. mask-size: 1em 1em;
  95. mask-repeat: no-repeat;
  96. mask-position: center center;
  97. &:dir(rtl) {
  98. transform: translateY(-50%) scaleX(-1);
  99. }
  100. @media (forced-colors: active) {
  101. background-color: linktext;
  102. }
  103. }
  104. }
  105. .admin-item__description {
  106. margin-block: 0.5em 0.25em;
  107. margin-inline: 0;
  108. color: var(--admin-color-text-soft);
  109. font-size: var(--admin-font-size-s);
  110. }

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