tableselect.css

Same filename in this branch
  1. main core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
  2. main core/themes/claro/css/components/tableselect.css
  3. main core/themes/starterkit_theme/css/components/tableselect.css
  4. main core/themes/admin/migration/css/components/tableselect.css
  5. main core/themes/admin/css/components/tableselect.css
  6. main core/themes/default_admin/migration/css/components/tableselect.css
Same filename and directory in other branches
  1. 10 core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
  2. 10 core/themes/claro/css/components/tableselect.css
  3. 10 core/themes/starterkit_theme/css/components/tableselect.css
  4. 11.x core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
  5. 11.x core/themes/claro/css/components/tableselect.css
  6. 11.x core/themes/starterkit_theme/css/components/tableselect.css
  7. 9 core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
  8. 9 core/themes/seven/css/classy/components/tableselect.css
  9. 9 core/themes/claro/css/components/tableselect.css
  10. 9 core/themes/bartik/css/classy/components/tableselect.css
  11. 9 core/themes/starterkit_theme/css/components/tableselect.css
  12. 9 core/themes/classy/css/components/tableselect.css
  13. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
  14. 8.9.x core/themes/seven/css/classy/components/tableselect.css
  15. 8.9.x core/themes/claro/css/components/tableselect.css
  16. 8.9.x core/themes/bartik/css/classy/components/tableselect.css
  17. 8.9.x core/themes/classy/css/components/tableselect.css
  18. 11.x core/themes/admin/migration/css/components/tableselect.css
  19. 11.x core/themes/admin/css/components/tableselect.css
  20. 11.x core/themes/default_admin/migration/css/components/tableselect.css
  21. 11.x core/themes/default_admin/css/components/tableselect.css

Table select styles for default_admin.

See also

tableselect.js

File

core/themes/default_admin/css/components/tableselect.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. * Table select styles for default_admin.
  10. *
  11. * @see tableselect.js
  12. */
  13. td.checkbox,
  14. th.checkbox {
  15. text-align: center;
  16. }
  17. tr.selected td {
  18. background-color: var(--color-bgblue-active);
  19. }
  20. .views-bulk-actions {
  21. position: relative;
  22. display: flex;
  23. flex: 1;
  24. flex-wrap: wrap;
  25. padding: var(--space-m);
  26. color: var(--color-white);
  27. border: var(--details-border-size) solid var(--details-border-color);
  28. border-radius: 0.25rem;
  29. background-color: var(--color-text);
  30. &[data-drupal-sticky-vbo="true"] {
  31. position: sticky;
  32. z-index: calc(var(--dropbutton-widget-z-index) + 1);
  33. bottom: var(--drupal-displace-offset-bottom, 0);
  34. animation: fade-in-bottom 320ms 1 forwards;
  35. border-bottom-right-radius: 0;
  36. border-bottom-left-radius: 0;
  37. }
  38. &.views-form__header--bypass-animation {
  39. animation: none;
  40. }
  41. }
  42. @supports (position: sticky) {
  43. .views-bulk-actions[data-drupal-sticky-vbo="true"] {
  44. position: sticky;
  45. }
  46. }
  47. @keyframes fade-in-bottom {
  48. 0% {
  49. transform: translateY(100%);
  50. }
  51. 100% {
  52. transform: translateY(0);
  53. }
  54. }
  55. .views-bulk-actions__item {
  56. align-self: center;
  57. margin-block: 0 var(--space-s);
  58. margin-inline: 0 var(--space-l);
  59. margin-inline-end: var(--space-xs);
  60. color: var(--gin-color-text);
  61. font-weight: var(--font-weight-semibold);
  62. &:has(+ .views-bulk-actions__item.form-actions) {
  63. margin-inline-end: var(--space-xs);
  64. }
  65. &:last-of-type {
  66. margin-inline-end: 0;
  67. }
  68. & .form-element {
  69. &:hover {
  70. border: var(--input-border-size) solid var(--input-border-color);
  71. box-shadow: none;
  72. }
  73. }
  74. & .button--primary:not(:disabled, .is-disabled) {
  75. background-color: var(--gin-color-primary);
  76. &:hover {
  77. background-color: var(--gin-color-primary-hover);
  78. }
  79. &:focus {
  80. background: var(--button--focus-bg-color--primary);
  81. }
  82. &:active {
  83. background-color: var(--gin-color-primary-active);
  84. }
  85. }
  86. & .form-item__label {
  87. display: inline;
  88. padding-inline-end: var(--space-xs);
  89. &::after {
  90. content: ":";
  91. }
  92. }
  93. & .form-element--type-select {
  94. min-height: 2rem;
  95. padding-block: calc(0.5rem - 1px);
  96. padding-inline: calc(1rem - 1px) calc(2.25rem - 1px);
  97. font-size: var(--font-size-xs);
  98. line-height: 1rem;
  99. }
  100. & input,
  101. & .button {
  102. margin-block: 0;
  103. }
  104. &.form-actions {
  105. margin-block-end: 0;
  106. }
  107. }
  108. .views-bulk-actions__item--status {
  109. width: 100%;
  110. margin-inline-end: var(--space-l);
  111. white-space: nowrap;
  112. color: var(--gin-color-text-light);
  113. font-size: var(--font-size-xs);
  114. font-weight: bold;
  115. }
  116. .views-field__skip-to-bulk-actions {
  117. display: block;
  118. white-space: nowrap;
  119. font-size: var(--font-size-xs);
  120. }
  121. @media screen and (min-width: 61rem) {
  122. .views-bulk-actions {
  123. flex-wrap: nowrap;
  124. }
  125. .views-bulk-actions__item {
  126. margin-bottom: 0;
  127. }
  128. .views-bulk-actions__item--status {
  129. width: auto;
  130. }
  131. }
  132. .ui-autocomplete {
  133. z-index: 2000;
  134. }
  135. .block-system > .views-form .gin-details,
  136. .view-content .views-form .gin-details {
  137. box-shadow: none;
  138. }
  139. .block-system > .views-form form,
  140. .view-content .views-form form {
  141. display: flex;
  142. flex-direction: column;
  143. }
  144. .block-system > .views-form .views-table,
  145. .view-content .views-form .views-table {
  146. order: -1;
  147. margin-block-start: 0;
  148. }
  149. .block-system > .views-form [data-drupal-selector*="edit-header"],
  150. .view-content .views-form [data-drupal-selector*="edit-header"] {
  151. position: relative;
  152. order: 99;
  153. inset-inline-start: 0;
  154. }
  155. .block-system > .views-form [data-drupal-selector*="edit-header"] > .form-wrapper,
  156. .view-content .views-form [data-drupal-selector*="edit-header"] > .form-wrapper {
  157. padding: var(--space-m);
  158. }
  159. .block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] > *,
  160. .view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] > * {
  161. margin-inline-end: var(--space-xs);
  162. }
  163. .block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-type--select,
  164. .block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-actions,
  165. .view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-type--select,
  166. .view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-actions {
  167. flex: 0 0 100%;
  168. max-width: 100%;
  169. }
  170. .block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-actions,
  171. .view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-actions {
  172. justify-content: flex-end;
  173. }
  174. .block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-type--checkbox,
  175. .view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-type--checkbox {
  176. align-self: center;
  177. }
  178. .block-system > .views-form [data-drupal-selector*="edit-header"] .form-item__label:not([for="edit-select-all"]),
  179. .view-content .views-form [data-drupal-selector*="edit-header"] .form-item__label:not([for="edit-select-all"]) {
  180. display: block;
  181. float: inline-start;
  182. inset-block-start: 2px;
  183. margin-block-start: var(--space-xxs);
  184. margin-inline-end: var(--space-m);
  185. line-height: 1.75;
  186. }
  187. @keyframes fade-in-bottom {
  188. 0% {
  189. transform: translateY(100%);
  190. }
  191. 100% {
  192. transform: translateY(0);
  193. }
  194. }
  195. .block-system > .views-form [data-drupal-selector*="edit-header"].is-sticky,
  196. .view-content .views-form [data-drupal-selector*="edit-header"].is-sticky {
  197. z-index: 4;
  198. animation: fade-in-bottom 320ms 1 forwards;
  199. }
  200. .block-system > .views-form [data-drupal-selector*="edit-header"],
  201. .block-system > .views-form .views-bulk-actions,
  202. .view-content .views-form [data-drupal-selector*="edit-header"],
  203. .view-content .views-form .views-bulk-actions {
  204. border: 0 none;
  205. border-radius: var(--gin-border-m);
  206. background: rgb(var(--gin-color-sticky-rgb), 0.95);
  207. @supports (backdrop-filter: blur()) {
  208. opacity: 0.999;
  209. /* Fix Chrome issue with mask */
  210. background: rgb(var(--gin-color-sticky-rgb), 0.9);
  211. backdrop-filter: blur(0.75rem);
  212. .gin--dark-mode
  213. }
  214. }
  215. .block-system > .views-form [data-drupal-selector*="edit-header"].is-sticky,
  216. .block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo="true"],
  217. .view-content .views-form [data-drupal-selector*="edit-header"].is-sticky,
  218. .view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo="true"] {
  219. position: sticky;
  220. opacity: 1;
  221. box-shadow: 0 2px 6px 2px rgb(0, 0, 0, 0.03);
  222. inset-inline-start: 0;
  223. inset-block-end: var(--space-xs);
  224. }

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