tableselect.css

Same filename in this branch
  1. 11.x core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
  2. 11.x core/themes/claro/css/components/tableselect.css
  3. 11.x core/themes/starterkit_theme/css/components/tableselect.css
  4. 11.x core/themes/admin/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. 9 core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
  5. 9 core/themes/seven/css/classy/components/tableselect.css
  6. 9 core/themes/claro/css/components/tableselect.css
  7. 9 core/themes/bartik/css/classy/components/tableselect.css
  8. 9 core/themes/starterkit_theme/css/components/tableselect.css
  9. 9 core/themes/classy/css/components/tableselect.css
  10. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
  11. 8.9.x core/themes/seven/css/classy/components/tableselect.css
  12. 8.9.x core/themes/claro/css/components/tableselect.css
  13. 8.9.x core/themes/bartik/css/classy/components/tableselect.css
  14. 8.9.x core/themes/classy/css/components/tableselect.css
  15. main core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
  16. main core/themes/claro/css/components/tableselect.css
  17. main core/themes/starterkit_theme/css/components/tableselect.css
  18. main core/themes/admin/migration/css/components/tableselect.css
  19. main core/themes/admin/css/components/tableselect.css
.block-system > .views-form .gin-details,
.view-content .views-form .gin-details {
  box-shadow: none;
}

.block-system > .views-form form,
.view-content .views-form form {
  display: flex;
  flex-direction: column;
}

.block-system > .views-form .views-table,
.view-content .views-form .views-table {
  order: -1;
  margin-block-start: 0;
}

.block-system > .views-form [data-drupal-selector*="edit-header"],
.view-content .views-form [data-drupal-selector*="edit-header"] {
  position: relative;
  order: 99;
  inset-inline-start: 0;
}

.block-system > .views-form [data-drupal-selector*="edit-header"] > .form-wrapper,
.view-content .views-form [data-drupal-selector*="edit-header"] > .form-wrapper {
  padding: var(--gin-spacing-m);
}

.block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] > *,
.view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] > * {
  margin-inline-end: var(--gin-spacing-xs);
}

.block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-type--select,
.block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-actions,
.view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-type--select,
.view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-actions {
  flex: 0 0 100%;
  max-width: 100%;
}

.block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-actions,
.view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-actions {
  justify-content: flex-end;
}

.block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-type--checkbox,
.view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-type--checkbox {
  align-self: center;
}

.block-system > .views-form [data-drupal-selector*="edit-header"] .form-item__label:not([for="edit-select-all"]),
.view-content .views-form [data-drupal-selector*="edit-header"] .form-item__label:not([for="edit-select-all"]) {
  display: block;
  float: inline-start;
  inset-block-start: 2px;
  margin-block-start: var(--gin-spacing-xxs);
  margin-inline-end: var(--gin-spacing-m);
  line-height: 1.75;
}

@keyframes fade-in-bottom {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}

.block-system > .views-form [data-drupal-selector*="edit-header"].is-sticky,
.view-content .views-form [data-drupal-selector*="edit-header"].is-sticky {
  z-index: 4;
  animation: fade-in-bottom 320ms 1 forwards;
}

.block-system > .views-form [data-drupal-selector*="edit-header"],
.block-system > .views-form .views-bulk-actions,
.view-content .views-form [data-drupal-selector*="edit-header"],
.view-content .views-form .views-bulk-actions {
  border: 0 none;
  border-radius: var(--gin-border-m);
  background: rgb(var(--gin-color-sticky-rgb), 0.95);
}

@supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
  .block-system > .views-form [data-drupal-selector*="edit-header"],
  .block-system > .views-form .views-bulk-actions,
  .view-content .views-form [data-drupal-selector*="edit-header"],
  .view-content .views-form .views-bulk-actions {
    opacity: 0.999; /* Fix Chrome issue with mask */
    background: rgb(var(--gin-color-sticky-rgb), 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .gin--dark-mode .block-system > .views-form [data-drupal-selector*="edit-header"],
  .gin--dark-mode .block-system > .views-form .views-bulk-actions,
  .gin--dark-mode .view-content .views-form [data-drupal-selector*="edit-header"],
  .gin--dark-mode .view-content .views-form .views-bulk-actions {
    background: rgb(27, 27, 29, 0.8);
  }
}

.block-system > .views-form [data-drupal-selector*="edit-header"].is-sticky,
.block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo="true"],
.view-content .views-form [data-drupal-selector*="edit-header"].is-sticky,
.view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo="true"] {
  position: sticky;
  opacity: 1;
  box-shadow: 0 2px 6px 2px rgb(0, 0, 0, 0.03);
  inset-inline-start: 0;
  inset-block-end: var(--gin-spacing-xs);
}

.views-bulk-actions {
  padding: var(--gin-spacing-m);
}

.views-bulk-actions__item {
  margin-inline-end: var(--gin-spacing-xs);
  color: var(--gin-color-text);
  font-weight: var(--gin-font-weight-semibold);
}

.views-bulk-actions__item:has(+ .views-bulk-actions__item.form-actions) {
  margin-inline-end: var(--gin-spacing-xs);
}

.views-bulk-actions__item--status {
  margin-inline-end: var(--gin-spacing-l);
  color: var(--gin-color-text-light);
}

.views-bulk-actions__item .button--primary:not(:disabled, .is-disabled) {
  background-color: var(--gin-color-primary);
}

.views-bulk-actions__item .button--primary:not(:disabled, .is-disabled):hover {
  background-color: var(--gin-color-primary-hover);
}

.views-bulk-actions__item .button--primary:not(:disabled, .is-disabled):active {
  background-color: var(--gin-color-primary-active);
}

File

View on git.drupalcode.org

core/themes/admin/migration/css/components/tableselect.css

View source 
  1. .block-system > .views-form .gin-details,

  2. .view-content .views-form .gin-details {

  3.   box-shadow: none;

  4. }

  5. 

  6. .block-system > .views-form form,

  7. .view-content .views-form form {

  8.   display: flex;

  9.   flex-direction: column;

  10. }

  11. 

  12. .block-system > .views-form .views-table,

  13. .view-content .views-form .views-table {

  14.   order: -1;

  15.   margin-block-start: 0;

  16. }

  17. 

  18. .block-system > .views-form [data-drupal-selector*="edit-header"],

  19. .view-content .views-form [data-drupal-selector*="edit-header"] {

  20.   position: relative;

  21.   order: 99;

  22.   inset-inline-start: 0;

  23. }

  24. 

  25. .block-system > .views-form [data-drupal-selector*="edit-header"] > .form-wrapper,

  26. .view-content .views-form [data-drupal-selector*="edit-header"] > .form-wrapper {

  27.   padding: var(--gin-spacing-m);

  28. }

  29. 

  30. .block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] > *,

  31. .view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] > * {

  32.   margin-inline-end: var(--gin-spacing-xs);

  33. }

  34. 

  35. .block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-type--select,

  36. .block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-actions,

  37. .view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-type--select,

  38. .view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-actions {

  39.   flex: 0 0 100%;

  40.   max-width: 100%;

  41. }

  42. 

  43. .block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-actions,

  44. .view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-actions {

  45.   justify-content: flex-end;

  46. }

  47. 

  48. .block-system > .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-type--checkbox,

  49. .view-content .views-form [data-drupal-selector*="edit-header"] [data-drupal-selector*="edit-views-bulk-operations-bulk-form"] .form-type--checkbox {

  50.   align-self: center;

  51. }

  52. 

  53. .block-system > .views-form [data-drupal-selector*="edit-header"] .form-item__label:not([for="edit-select-all"]),

  54. .view-content .views-form [data-drupal-selector*="edit-header"] .form-item__label:not([for="edit-select-all"]) {

  55.   display: block;

  56.   float: inline-start;

  57.   inset-block-start: 2px;

  58.   margin-block-start: var(--gin-spacing-xxs);

  59.   margin-inline-end: var(--gin-spacing-m);

  60.   line-height: 1.75;

  61. }

  62. 

  63. @keyframes fade-in-bottom {

  64.   0% {

  65.     transform: translateY(100%);

  66.   }

  67. 

  68.   100% {

  69.     transform: translateY(0);

  70.   }

  71. }

  72. 

  73. .block-system > .views-form [data-drupal-selector*="edit-header"].is-sticky,

  74. .view-content .views-form [data-drupal-selector*="edit-header"].is-sticky {

  75.   z-index: 4;

  76.   animation: fade-in-bottom 320ms 1 forwards;

  77. }

  78. 

  79. .block-system > .views-form [data-drupal-selector*="edit-header"],

  80. .block-system > .views-form .views-bulk-actions,

  81. .view-content .views-form [data-drupal-selector*="edit-header"],

  82. .view-content .views-form .views-bulk-actions {

  83.   border: 0 none;

  84.   border-radius: var(--gin-border-m);

  85.   background: rgb(var(--gin-color-sticky-rgb), 0.95);

  86. }

  87. 

  88. @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {

  89.   .block-system > .views-form [data-drupal-selector*="edit-header"],

  90.   .block-system > .views-form .views-bulk-actions,

  91.   .view-content .views-form [data-drupal-selector*="edit-header"],

  92.   .view-content .views-form .views-bulk-actions {

  93.     opacity: 0.999; /* Fix Chrome issue with mask */

  94.     background: rgb(var(--gin-color-sticky-rgb), 0.9);

  95.     -webkit-backdrop-filter: blur(12px);

  96.     backdrop-filter: blur(12px);

  97.   }

  98. 

  99.   .gin--dark-mode .block-system > .views-form [data-drupal-selector*="edit-header"],

  100.   .gin--dark-mode .block-system > .views-form .views-bulk-actions,

  101.   .gin--dark-mode .view-content .views-form [data-drupal-selector*="edit-header"],

  102.   .gin--dark-mode .view-content .views-form .views-bulk-actions {

  103.     background: rgb(27, 27, 29, 0.8);

  104.   }

  105. }

  106. 

  107. .block-system > .views-form [data-drupal-selector*="edit-header"].is-sticky,

  108. .block-system > .views-form .views-bulk-actions[data-drupal-sticky-vbo="true"],

  109. .view-content .views-form [data-drupal-selector*="edit-header"].is-sticky,

  110. .view-content .views-form .views-bulk-actions[data-drupal-sticky-vbo="true"] {

  111.   position: sticky;

  112.   opacity: 1;

  113.   box-shadow: 0 2px 6px 2px rgb(0, 0, 0, 0.03);

  114.   inset-inline-start: 0;

  115.   inset-block-end: var(--gin-spacing-xs);

  116. }

  117. 

  118. .views-bulk-actions {

  119.   padding: var(--gin-spacing-m);

  120. }

  121. 

  122. .views-bulk-actions__item {

  123.   margin-inline-end: var(--gin-spacing-xs);

  124.   color: var(--gin-color-text);

  125.   font-weight: var(--gin-font-weight-semibold);

  126. }

  127. 

  128. .views-bulk-actions__item:has(+ .views-bulk-actions__item.form-actions) {

  129.   margin-inline-end: var(--gin-spacing-xs);

  130. }

  131. 

  132. .views-bulk-actions__item--status {

  133.   margin-inline-end: var(--gin-spacing-l);

  134.   color: var(--gin-color-text-light);

  135. }

  136. 

  137. .views-bulk-actions__item .button--primary:not(:disabled, .is-disabled) {

  138.   background-color: var(--gin-color-primary);

  139. }

  140. 

  141. .views-bulk-actions__item .button--primary:not(:disabled, .is-disabled):hover {

  142.   background-color: var(--gin-color-primary-hover);

  143. }

  144. 

  145. .views-bulk-actions__item .button--primary:not(:disabled, .is-disabled):active {

  146.   background-color: var(--gin-color-primary-active);

  147. }

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