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. &[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. &:last-of-type {
  60. margin-inline-end: 0;
  61. }
  62. & .form-element {
  63. &:hover {
  64. border: var(--input-border-size) solid var(--input-border-color);
  65. box-shadow: none;
  66. }
  67. }
  68. & .button--primary:not(:disabled, .is-disabled) {
  69. background: var(--color-blue-400);
  70. &:hover {
  71. background: var(--color-blue-500);
  72. }
  73. }
  74. & .form-item__label {
  75. display: inline;
  76. padding-inline-end: var(--space-xs);
  77. &::after {
  78. content: ":";
  79. }
  80. }
  81. & .form-element--type-select {
  82. min-height: 2rem;
  83. padding-block: calc(0.5rem - 1px);
  84. padding-inline: calc(1rem - 1px) calc(2.25rem - 1px);
  85. font-size: var(--font-size-xs);
  86. line-height: 1rem;
  87. }
  88. & input,
  89. & .button {
  90. margin-block: 0;
  91. }
  92. }
  93. .views-bulk-actions__item--status {
  94. width: 100%;
  95. white-space: nowrap;
  96. font-size: var(--font-size-xs);
  97. font-weight: bold;
  98. }
  99. .views-field__skip-to-bulk-actions {
  100. display: block;
  101. white-space: nowrap;
  102. font-size: var(--font-size-xs);
  103. }
  104. @media screen and (min-width: 61rem) {
  105. .views-bulk-actions {
  106. flex-wrap: nowrap;
  107. }
  108. .views-bulk-actions__item {
  109. margin-bottom: 0;
  110. }
  111. .views-bulk-actions__item--status {
  112. width: auto;
  113. }
  114. }
  115. .ui-autocomplete {
  116. z-index: 501;
  117. }

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