kopia lustrzana https://github.com/wagtail/wagtail
Update chooser styles to match designs
rodzic
1f15f52a6d
commit
9798306f0e
|
@ -1,3 +1,5 @@
|
||||||
|
$preview-size: 2.625rem; // 42px
|
||||||
|
|
||||||
.chooser {
|
.chooser {
|
||||||
&.blank .chosen {
|
&.blank .chosen {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -10,16 +12,16 @@
|
||||||
|
|
||||||
// Very subdued button style specifically for choosers, as there can be a lot of
|
// Very subdued button style specifically for choosers, as there can be a lot of
|
||||||
// chooser fields left unused on a page editing form.
|
// chooser fields left unused on a page editing form.
|
||||||
.chooser__choose-button {
|
.button.chooser__choose-button {
|
||||||
|
@apply w-label-3;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
color: theme('colors.text-button-outline-default');
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
padding-inline-start: 0;
|
padding: theme('spacing.[1.5]');
|
||||||
// So the outline is slightly more separated from the text.
|
|
||||||
padding-inline-end: $focus-outline-width;
|
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
@include svg-icon(theme('spacing.5'), initial);
|
@include svg-icon(theme('spacing.4'), initial);
|
||||||
color: inherit;
|
color: inherit;
|
||||||
margin-inline-end: 5px;
|
margin-inline-end: 5px;
|
||||||
}
|
}
|
||||||
|
@ -41,8 +43,8 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 60px;
|
width: $preview-size;
|
||||||
height: 60px;
|
height: $preview-size;
|
||||||
// Prevent this item from getting smaller if the title is long.
|
// Prevent this item from getting smaller if the title is long.
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background-color: theme('colors.border-button-small-outline-default');
|
background-color: theme('colors.border-button-small-outline-default');
|
||||||
|
@ -52,12 +54,6 @@
|
||||||
@media (forced-colors: active) {
|
@media (forced-colors: active) {
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: theme('spacing.7');
|
|
||||||
height: theme('spacing.7');
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chooser__title {
|
.chooser__title {
|
||||||
|
@ -65,14 +61,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.chooser__image {
|
.chooser__image {
|
||||||
max-width: 200px;
|
max-width: 165px;
|
||||||
max-height: 140px;
|
max-height: 125px;
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 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
|
// 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_task_chooser,
|
||||||
.w-field--admin_page_chooser,
|
.w-field--admin_page_chooser,
|
||||||
.w-field--document_chooser_widget,
|
.w-field--document_chooser_widget,
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
{% endcomment %}
|
{% endcomment %}
|
||||||
|
|
||||||
<div data-controller="w-dropdown" class="{% classnames 'w-dropdown' classname %}" {{ attrs }}>
|
<div data-controller="w-dropdown" class="{% classnames 'w-dropdown' classname %}" {{ attrs }}>
|
||||||
<button type="button" class="{% classnames 'w-dropdown__toggle' toggle_label|yesno:',w-dropdown__toggle--icon' toggle_classname %}" data-w-dropdown-target="toggle" {% if toggle_aria_label %}aria-label="{{ toggle_aria_label }}"{% endif %} {% if toggle_describedby %}aria-describedby="{{ toggle_describedby }}"{% endif %} {% if toggle_tippy_offset %}data-tippy-offset="{{ toggle_tippy_offset }}"{% endif %}>
|
<button type="button" class="{% classnames 'w-dropdown__toggle' toggle_label|yesno:',w-dropdown__toggle--icon' toggle_classname %}" data-w-dropdown-target="toggle"{% if toggle_aria_label %} aria-label="{{ toggle_aria_label }}"{% endif %}{% if toggle_describedby %} aria-describedby="{{ toggle_describedby }}"{% endif %}{% if toggle_tippy_offset %} data-tippy-offset="{{ toggle_tippy_offset }}"{% endif %}>
|
||||||
{{ toggle_label }}
|
{{ toggle_label }}
|
||||||
{% if toggle_icon %}
|
{% if toggle_icon %}
|
||||||
{% icon name=toggle_icon classname="w-dropdown__toggle-icon" %}
|
{% icon name=toggle_icon classname="w-dropdown__toggle-icon" %}
|
||||||
|
|
Ładowanie…
Reference in New Issue