Files
farmOS-dev/web/themes/gin/styles/components/tableselect.scss
2024-12-10 15:08:16 +01:00

114 lines
2.3 KiB
SCSS

.block-system > .views-form,
.view-content .views-form {
.claro-details {
box-shadow: none;
}
form {
display: flex;
flex-direction: column;
}
.views-table {
order: -1;
margin-top: 0;
}
[data-drupal-selector*=edit-header] {
order: 99;
position: relative;
left: 0;
> .form-wrapper {
padding: var(--gin-spacing-m);
}
[data-drupal-selector*='edit-views-bulk-operations-bulk-form'] {
> * {
margin-right: var(--gin-spacing-xs);
}
.form-type--select,
.form-actions {
flex: 0 0 100%;
max-width: 100%;
}
.form-actions {
justify-content: flex-end;
}
.form-type--checkbox {
align-self: center;
}
}
.form-item__label:not([for='edit-select-all']) {
display: block;
float: left;
top: 2px;
margin-top: var(--gin-spacing-xxs);
margin-right: var(--gin-spacing-m);
line-height: 1.75;
}
&.is-sticky {
z-index: 4;
animation: fadeInBottom 320ms 1 forwards;
}
}
[data-drupal-selector*=edit-header],
.views-bulk-actions {
border: 0 none;
border-radius: var(--gin-border-m);
background: rgba(var(--gin-color-sticky-rgb), .95);
@supports (backdrop-filter: blur()) {
opacity: .999; /* Fix Chrome issue with mask */
background: rgba(var(--gin-color-sticky-rgb), .9);
backdrop-filter: blur(12px);
.gin--dark-mode & {
background: rgba($colorDarkAppBackground, .8);
}
}
}
[data-drupal-selector*=edit-header].is-sticky,
.views-bulk-actions[data-drupal-sticky-vbo="true"] {
opacity: 1;
position: sticky;
left: 0;
bottom: var(--gin-spacing-xs);
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .03);
}
}
.views-bulk-actions {
padding: var(--gin-spacing-m);
&__item {
color: var(--gin-color-text);
font-weight: var(--gin-font-weight-semibold);
margin-right: var(--gin-spacing-xs);
&--status {
color: var(--gin-color-text-light);
margin-right: var(--gin-spacing-l);
}
.button--primary:not(:disabled, .is-disabled) {
background-color: var(--gin-color-primary);
&:hover {
background-color: var(--gin-color-primary-hover);
}
&:active {
background-color: var(--gin-color-primary-active);
}
}
}
}