mirror of
https://github.com/wagtail/wagtail.git
synced 2024-12-01 11:41:20 +01:00
95 lines
2.2 KiB
SCSS
95 lines
2.2 KiB
SCSS
.w-drilldown__contents {
|
||
max-height: min(480px, 70vh);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.w-drilldown .w-drilldown__toggle {
|
||
@apply w-label-1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-inline-start: theme('spacing.5');
|
||
padding-inline-end: theme('spacing.5');
|
||
border: 1px solid transparent;
|
||
|
||
&:hover {
|
||
background-color: transparent;
|
||
border-color: theme('colors.border-button-outline-hover');
|
||
color: theme('colors.text-link-hover');
|
||
cursor: pointer;
|
||
|
||
@media (forced-colors: active) {
|
||
border-color: Highlight;
|
||
}
|
||
}
|
||
|
||
.icon {
|
||
pointer-events: none;
|
||
width: theme('spacing.5');
|
||
height: theme('spacing.5');
|
||
opacity: 1;
|
||
margin-inline-end: 0;
|
||
}
|
||
}
|
||
|
||
.w-drilldown__submenu {
|
||
display: grid;
|
||
grid-template-columns: min-content 1fr;
|
||
padding-inline-end: theme('spacing.[2.5]');
|
||
}
|
||
|
||
.w-drilldown .w-drilldown__back {
|
||
@apply w-label-1;
|
||
position: relative;
|
||
padding: theme('spacing.[2.5]');
|
||
align-self: flex-start;
|
||
|
||
.icon {
|
||
pointer-events: none;
|
||
margin-inline-end: 0;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: transparent;
|
||
border-color: theme('colors.border-button-outline-hover');
|
||
color: theme('colors.text-link-hover');
|
||
cursor: pointer;
|
||
|
||
@media (forced-colors: active) {
|
||
border-color: Highlight;
|
||
}
|
||
}
|
||
}
|
||
|
||
.w-drilldown__submenu .w-field__wrapper {
|
||
// Align the margin-top with the submenu’s back button
|
||
// and reduce the default margin-bottom.
|
||
margin-top: theme('spacing.2');
|
||
margin-bottom: theme('spacing.2');
|
||
}
|
||
|
||
.w-drilldown__submenu .w-field__label {
|
||
@apply w-label-1;
|
||
margin-bottom: theme('spacing.3');
|
||
}
|
||
|
||
.w-drilldown__count {
|
||
$badge-size: theme('spacing.4');
|
||
width: $badge-size;
|
||
height: $badge-size;
|
||
line-height: $badge-size;
|
||
text-align: center;
|
||
font-size: 0.5625rem;
|
||
font-weight: theme('fontWeight.bold');
|
||
border-radius: theme('borderRadius.full');
|
||
background-color: theme('colors.info.100');
|
||
border: 1px solid theme('colors.info.100');
|
||
color: theme('colors.white.DEFAULT');
|
||
|
||
// Reuse the same count component as a button badge.
|
||
.w-filter-button & {
|
||
position: absolute;
|
||
top: calc(-0.5 * #{$badge-size});
|
||
inset-inline-end: calc(-0.5 * #{$badge-size});
|
||
}
|
||
}
|