0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-25 13:10:14 +01:00
wagtail/client/scss/components/_bulk_actions.scss
Sage Abdullah 1ad22f530d Enforce bulk action checkbox column via CSS
10px was never the right width.

Using CSS instead of the column's width attribute allows us to use media queries to change the width responsively
2024-01-02 09:00:58 +00:00

75 lines
1.4 KiB
SCSS

.bulk-actions-filter-checkbox {
.table-headers & {
> div {
display: flex;
align-items: center;
}
.bulk-actions-choices,
.bulk-actions-choices > ul {
display: flex;
align-items: center;
}
.bulk-actions-choices li {
margin: 0 0.5em;
}
}
}
.bulk-actions-choices {
&.footer {
@include transition(transform 0.1s ease 0.1s);
&.hidden {
transform: translateY(200px);
visibility: hidden;
}
.button {
font-weight: 600;
}
}
.footer__container {
display: flex;
justify-content: space-around;
width: 100%;
align-items: center;
padding: 1.25em;
border-radius: 4px 4px 0 0;
margin-inline-start: 30px;
input[type='checkbox'] {
margin-inline-end: 1.25em;
}
.bulk-actions-buttons {
border-inline-start: 1px solid theme('colors.icon-secondary');
padding-inline-start: 1.5em;
.bulk-action-btn {
max-width: 160px;
overflow-x: hidden;
text-overflow: ellipsis;
}
}
.num-objects {
margin: 0 5px;
}
.num-objects-in-listing {
color: theme('colors.text-link-default');
background-color: transparent;
border: 0;
font-family: $font-sans;
padding: 0;
}
.button:not(:hover) {
background-color: theme('colors.surface-page');
}
}
}