mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-25 13:10:14 +01:00
83 lines
1.7 KiB
SCSS
83 lines
1.7 KiB
SCSS
$preview-size: 2.625rem; // 42px
|
|
|
|
.chooser {
|
|
&.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.
|
|
.button.chooser__choose-button {
|
|
@apply w-label-3;
|
|
display: flex;
|
|
align-items: center;
|
|
color: theme('colors.text-button-outline-default');
|
|
border-color: transparent;
|
|
padding: theme('spacing.[1.5]');
|
|
|
|
.icon {
|
|
@include svg-icon(theme('spacing.4'), 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: $preview-size;
|
|
height: $preview-size;
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
.chooser__title {
|
|
@apply w-body-text-large;
|
|
}
|
|
|
|
.chooser__image {
|
|
max-width: 165px;
|
|
max-height: 125px;
|
|
height: auto;
|
|
width: auto;
|
|
}
|
|
|
|
.chooser .w-dropdown__toggle--icon {
|
|
width: $preview-size;
|
|
height: $preview-size;
|
|
}
|
|
|
|
// Display these as inline block so that action icons such as comments can appear as close as possible
|
|
.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;
|
|
}
|