tableselect.css
Same filename in this branch
Same filename in other branches
- 9 core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
- 9 core/themes/seven/css/classy/components/tableselect.css
- 9 core/themes/claro/css/components/tableselect.css
- 9 core/themes/bartik/css/classy/components/tableselect.css
- 9 core/themes/starterkit_theme/css/components/tableselect.css
- 9 core/themes/classy/css/components/tableselect.css
- 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
- 8.9.x core/themes/seven/css/classy/components/tableselect.css
- 8.9.x core/themes/claro/css/components/tableselect.css
- 8.9.x core/themes/bartik/css/classy/components/tableselect.css
- 8.9.x core/themes/classy/css/components/tableselect.css
- 11.x core/profiles/demo_umami/themes/umami/css/classy/components/tableselect.css
- 11.x core/themes/claro/css/components/tableselect.css
- 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
- /*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
- /**
- * @file
- * Table select styles for Claro.
- *
- * @see tableselect.js
- */
-
- td.checkbox,
- th.checkbox {
- text-align: center;
- }
-
- tr.selected td {
- background-color: var(--color-bgblue-active);
- }
-
- .views-bulk-actions {
- position: relative;
- display: flex;
- flex: 1;
- flex-wrap: wrap;
- padding: var(--space-m) 2rem;
- color: var(--color-white);
- border: var(--details-border-size) solid var(--details-border-color);
- border-radius: 0.25rem;
- background-color: var(--color-text);
- }
-
- .views-bulk-actions[data-drupal-sticky-vbo="true"] {
- position: sticky;
- z-index: calc(var(--dropbutton-widget-z-index) + 1);
- bottom: var(--drupal-displace-offset-bottom, 0);
- animation: fade-in-bottom 320ms 1 forwards;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
- }
-
- .views-bulk-actions.views-form__header--bypass-animation {
- animation: none;
- }
-
- @supports (position: sticky) {
- .views-bulk-actions[data-drupal-sticky-vbo="true"] {
- position: sticky;
- }
- }
-
- @keyframes fade-in-bottom {
- 0% {
- transform: translateY(100%);
- }
- 100% {
- transform: translateY(0);
- }
- }
-
- .views-bulk-actions__item {
- align-self: center;
- margin-block: 0 var(--space-s);
- margin-inline: 0 var(--space-l);
- }
-
- .views-bulk-actions__item:last-of-type {
- margin-inline-end: 0;
- }
-
- .views-bulk-actions__item .form-element:hover {
- border: var(--input-border-size) solid var(--input-border-color);
- box-shadow: none;
- }
-
- .views-bulk-actions__item .button--primary:not(:disabled, .is-disabled) {
- background: var(--color-blue-400);
- }
-
- .views-bulk-actions__item .button--primary:not(:disabled, .is-disabled):hover {
- background: var(--color-blue-500);
- }
-
- .views-bulk-actions__item .form-item__label {
- display: inline;
- padding-inline-end: var(--space-xs);
- }
-
- .views-bulk-actions__item .form-item__label::after {
- content: ":";
- }
-
- .views-bulk-actions__item .form-element--type-select {
- min-height: 2rem;
- padding-block: calc(0.5rem - 1px);
- padding-inline: calc(1rem - 1px) calc(2.25rem - 1px);
- font-size: var(--font-size-xs);
- line-height: 1rem;
- }
-
- .views-bulk-actions__item input,
- .views-bulk-actions__item .button {
- margin-block: 0;
- }
-
- .views-bulk-actions__item--status {
- width: 100%;
- white-space: nowrap;
- font-size: var(--font-size-xs);
- font-weight: bold;
- }
-
- .views-field__skip-to-bulk-actions {
- display: block;
- white-space: nowrap;
- font-size: var(--font-size-xs);
- }
-
- @media screen and (min-width: 61rem) {
- .views-bulk-actions {
- flex-wrap: nowrap;
- }
- .views-bulk-actions__item {
- margin-bottom: 0;
- }
- .views-bulk-actions__item--status {
- width: auto;
- }
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.