system-admin--modules.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/system-admin--modules.pcss.css
  2. 8.9.x core/themes/claro/css/components/system-admin--modules.pcss.css
  3. 11.x core/themes/claro/css/components/system-admin--modules.pcss.css

System admin module: modules page.

File

core/themes/claro/css/components/system-admin--modules.pcss.css

View source
  1. /**
  2. * @file
  3. * System admin module: modules page.
  4. */
  5. :root {
  6. --module-table-cell-padding-vertical: var(--space-m);
  7. --module-table-cell-padding-horizontal: calc(var(--space-m) - (var(--input-border-size) * 2));
  8. }
  9. .modules-table-filter,
  10. .permissions-table-filter {
  11. padding: 0.25rem var(--space-l);
  12. border: 1px solid var(--color-gray-200);
  13. border-radius: 2px 2px 0 0;
  14. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  15. }
  16. /* Visually hide the module filter input description. */
  17. .modules-table-filter .form-item__description,
  18. .permissions-table-filter .form-item__description {
  19. position: absolute !important;
  20. overflow: hidden;
  21. clip: rect(1px, 1px, 1px, 1px);
  22. width: 1px;
  23. height: 1px;
  24. word-wrap: normal;
  25. }
  26. .claro-details.claro-details--package-listing,
  27. .claro-details.module-list__module-details {
  28. margin-top: 2rem;
  29. margin-bottom: 0;
  30. border: none;
  31. box-shadow: none;
  32. }
  33. .claro-details__wrapper.claro-details__wrapper--package-listing {
  34. margin: 0;
  35. }
  36. .claro-details__summary.claro-details__summary--package-listing {
  37. color: var(--color-text);
  38. border-radius: 4px;
  39. background: var(--color-gray-050);
  40. font-size: 1.125rem; /* 18px */
  41. line-height: 1.424rem; /* 23px */
  42. }
  43. .module-list {
  44. margin-top: 0;
  45. }
  46. .module-list__module {
  47. color: var(--color-text);
  48. border-bottom: 1px solid var(--color-gray-200);
  49. background: none;
  50. }
  51. .module-list__module:hover {
  52. background: none;
  53. }
  54. .module-list__module td {
  55. height: auto;
  56. padding: var(--module-table-cell-padding-vertical) var(--module-table-cell-padding-horizontal);
  57. vertical-align: top;
  58. }
  59. /* Set width only on wider view where description is visible by default. */
  60. @media screen and (min-width: 60em) {
  61. td.module-list__module {
  62. width: 25%;
  63. }
  64. }
  65. .module-list__module-name {
  66. font-weight: bold;
  67. }
  68. .module-list__checkbox {
  69. padding-left: 0.6875rem; /* LTR */
  70. text-align: left; /* LTR */
  71. }
  72. [dir="rtl"] .module-list__checkbox {
  73. padding-right: 0.6875rem;
  74. padding-left: var(--module-table-cell-padding-horizontal);
  75. text-align: right;
  76. }
  77. .module-list__checkbox .form-type--checkbox {
  78. margin: 0;
  79. line-height: var(--details-line-height);
  80. }
  81. .module-list__checkbox .form-checkbox:not([disabled]) {
  82. cursor: pointer;
  83. }
  84. td.module-list__checkbox {
  85. width: 4%;
  86. }
  87. td.module-list__description {
  88. padding-top: 0;
  89. padding-right: 0;
  90. padding-bottom: 0;
  91. }
  92. .claro-details.module-list__module-details {
  93. margin: 0;
  94. }
  95. .claro-details__summary.module-list__module-summary {
  96. padding-top: var(--module-table-cell-padding-vertical);
  97. padding-bottom: var(--module-table-cell-padding-vertical);
  98. font-weight: normal;
  99. line-height: var(--details-line-height);
  100. }
  101. .claro-details__summary.module-list__module-summary::before {
  102. top: calc(var(--space-m) + var(--space-s));
  103. }
  104. .module-details__description {
  105. font-size: var(--space-s);
  106. line-height: 0.9375rem;
  107. }
  108. .claro-details__wrapper.module-details__wrapper {
  109. margin-top: 0;
  110. margin-bottom: 0;
  111. }
  112. .module-details__requirements {
  113. margin-bottom: var(--space-m);
  114. }
  115. .module-details__links {
  116. position: relative;
  117. /* Negative margin matches the value of action link's top padding. */
  118. margin-top: calc((var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) * -1);
  119. margin-bottom: var(--space-m);
  120. }
  121. .module-details__links .action-link + .action-link {
  122. margin-left: 0; /* LTR */
  123. }
  124. [dir="rtl"] .module-details__links .action-link + .action-link {
  125. margin-right: 0;
  126. }
  127. .claro-details .tableresponsive-toggle {
  128. padding: var(--space-m) var(--space-m) var(--space-m) 0;
  129. }
  130. .claro-details .tableresponsive-toggle::before {
  131. /* This adjustment is necessary for better alignment with the adjacent button
  132. text. */
  133. position: relative;
  134. top: -1px;
  135. display: inline-block;
  136. width: calc(var(--space-m) * 2);
  137. height: 1.25rem;
  138. content: "";
  139. cursor: pointer;
  140. vertical-align: text-top;
  141. background: url(../../images/icons/545560/plus.svg) no-repeat center;
  142. background-size: contain;
  143. }
  144. .claro-details .tableresponsive-toggle:hover {
  145. color: var(--color-absolutezero-hover);
  146. background-color: var(--color-bgblue-hover);
  147. }
  148. .claro-details .tableresponsive-toggle:hover::before {
  149. background-image: url(../../images/icons/0036b1/plus.svg);
  150. }
  151. .claro-details .tableresponsive-toggle-columns button {
  152. margin-top: var(--space-xs);
  153. text-decoration: none;
  154. color: var(--color-gray-800);
  155. font-weight: bold;
  156. }
  157. .claro-details .admin-missing {
  158. color: var(--color-maximumred);
  159. }

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