tableselect.css

Same filename in this branch
  1. 10 core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
  2. 10 core/themes/starterkit_theme/css/components/tableselect.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
  2. 9 core/themes/seven/css/classy/components/tableselect.css
  3. 9 core/themes/claro/css/components/tableselect.css
  4. 9 core/themes/bartik/css/classy/components/tableselect.css
  5. 9 core/themes/starterkit_theme/css/components/tableselect.css
  6. 9 core/themes/classy/css/components/tableselect.css
  7. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
  8. 8.9.x core/themes/seven/css/classy/components/tableselect.css
  9. 8.9.x core/themes/claro/css/components/tableselect.css
  10. 8.9.x core/themes/bartik/css/classy/components/tableselect.css
  11. 8.9.x core/themes/classy/css/components/tableselect.css
  12. 11.x core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
  13. 11.x core/themes/claro/css/components/tableselect.css
  14. 11.x core/themes/starterkit_theme/css/components/tableselect.css

Table select styles for Claro.

See also

tableselect.js

File

core/themes/claro/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 Claro.
  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) 2rem;
  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. }
  31. .views-bulk-actions[data-drupal-sticky-vbo="true"] {
  32. position: sticky;
  33. z-index: calc(var(--dropbutton-widget-z-index) + 1);
  34. bottom: var(--drupal-displace-offset-bottom, 0);
  35. animation: fade-in-bottom 320ms 1 forwards;
  36. border-bottom-right-radius: 0;
  37. border-bottom-left-radius: 0;
  38. }
  39. .views-bulk-actions.views-form__header--bypass-animation {
  40. animation: none;
  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. }
  60. .views-bulk-actions__item:last-of-type {
  61. margin-inline-end: 0;
  62. }
  63. .views-bulk-actions__item .form-element:hover {
  64. border: var(--input-border-size) solid var(--input-border-color);
  65. box-shadow: none;
  66. }
  67. .views-bulk-actions__item .button--primary:not(:disabled, .is-disabled) {
  68. background: var(--color-blue-400);
  69. }
  70. .views-bulk-actions__item .button--primary:not(:disabled, .is-disabled):hover {
  71. background: var(--color-blue-500);
  72. }
  73. .views-bulk-actions__item .form-item__label {
  74. display: inline;
  75. padding-inline-end: var(--space-xs);
  76. }
  77. .views-bulk-actions__item .form-item__label::after {
  78. content: ":";
  79. }
  80. .views-bulk-actions__item .form-element--type-select {
  81. min-height: 2rem;
  82. padding-block: calc(0.5rem - 1px);
  83. padding-inline: calc(1rem - 1px) calc(2.25rem - 1px);
  84. font-size: var(--font-size-xs);
  85. line-height: 1rem;
  86. }
  87. .views-bulk-actions__item input,
  88. .views-bulk-actions__item .button {
  89. margin-block: 0;
  90. }
  91. .views-bulk-actions__item--status {
  92. width: 100%;
  93. white-space: nowrap;
  94. font-size: var(--font-size-xs);
  95. font-weight: bold;
  96. }
  97. .views-field__skip-to-bulk-actions {
  98. display: block;
  99. white-space: nowrap;
  100. font-size: var(--font-size-xs);
  101. }
  102. @media screen and (min-width: 61rem) {
  103. .views-bulk-actions {
  104. flex-wrap: nowrap;
  105. }
  106. .views-bulk-actions__item {
  107. margin-bottom: 0;
  108. }
  109. .views-bulk-actions__item--status {
  110. width: auto;
  111. }
  112. }

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