mirror of
https://github.com/wagtail/wagtail.git
synced 2024-12-01 11:41:20 +01:00
111 lines
2.9 KiB
SCSS
111 lines
2.9 KiB
SCSS
.chooser {
|
|
// Add space to the end for hoverable area to extend outside of the field without impacting layout
|
|
padding-inline-end: theme('spacing.8');
|
|
margin-inline-end: calc(0 - theme('spacing.8'));
|
|
|
|
&.blank .chosen {
|
|
display: none;
|
|
}
|
|
|
|
&:not(.blank) .unchosen {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Very subdued button style specifically for choosers, as there can be a lot of
|
|
// chooser fields left unused on a page editing form.
|
|
.chooser__choose-button {
|
|
display: flex;
|
|
align-items: center;
|
|
border-color: transparent;
|
|
padding-inline-start: 0;
|
|
// So the outline is slightly more separated from the text.
|
|
padding-inline-end: $focus-outline-width;
|
|
|
|
.icon {
|
|
@include svg-icon(theme('spacing.5'), initial);
|
|
color: inherit;
|
|
margin-inline-end: 5px;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: theme('colors.surface-button-hover');
|
|
background-color: theme('colors.surface-page');
|
|
}
|
|
}
|
|
|
|
.chosen {
|
|
display: flex;
|
|
gap: theme('spacing.4');
|
|
align-items: center;
|
|
}
|
|
|
|
.chooser__preview {
|
|
display: grid;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 60px;
|
|
height: 60px;
|
|
// Prevent this item from getting smaller if the title is long.
|
|
flex-shrink: 0;
|
|
background-color: theme('colors.border-button-small-outline-default');
|
|
color: theme('colors.text-button');
|
|
border-radius: theme('borderRadius.sm');
|
|
|
|
@media (forced-colors: active) {
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.icon {
|
|
width: theme('spacing.7');
|
|
height: theme('spacing.7');
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.chooser__title {
|
|
@apply w-body-text-large;
|
|
}
|
|
|
|
.chooser__actions {
|
|
display: flex;
|
|
gap: theme('spacing.[1.5]');
|
|
|
|
.button {
|
|
// Subdued border as there can be a lot of chooser action buttons on a page.
|
|
border-color: theme('colors.border-button-small-outline-default');
|
|
}
|
|
|
|
// Hiding for devices capable of hover states only,
|
|
// with opacity only so keyboard focus can move to the first interactive element to reveal it.
|
|
@media (hover: hover) {
|
|
opacity: 0;
|
|
|
|
// Ensure the hovering over the comment icon will still show chooser actions.
|
|
// Uses a form-field class as well as widget classes, as all core and custom choosers use different widgets.
|
|
:is(.w-field--model_choice_field, .w-field--admin_task_chooser, .w-field--admin_page_chooser, .w-field--document_chooser_widget, .w-field--admin_image_chooser, .w-field--admin_snippet_chooser):is(:hover, :focus-within)
|
|
& {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chooser__image {
|
|
max-width: 200px;
|
|
max-height: 140px;
|
|
height: auto;
|
|
width: auto;
|
|
}
|
|
|
|
// Display these as inline block so that action icons such as comments can appear as close as possible
|
|
// We remove the padding here to let the chooser itself handle the padding
|
|
.w-field--admin_task_chooser,
|
|
.w-field--admin_page_chooser,
|
|
.w-field--document_chooser_widget,
|
|
.w-field--admin_image_chooser,
|
|
.w-field--admin_snippet_chooser {
|
|
display: inline-block;
|
|
padding-inline-end: 0;
|
|
}
|