2024-01-19 10:37:05 +01:00
|
|
|
|
.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;
|
2024-02-07 11:44:56 +01:00
|
|
|
|
padding-inline-end: theme('spacing.4');
|
2024-01-19 10:37:05 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
2024-02-07 11:44:56 +01:00
|
|
|
|
opacity: 1;
|
2024-01-19 10:37:05 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&: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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-01-23 10:43:08 +01:00
|
|
|
|
.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');
|
2024-02-07 11:44:56 +01:00
|
|
|
|
// Force fields to stay within the width of the drilldown.
|
|
|
|
|
max-width: calc(260px - theme('spacing.4'));
|
2024-01-23 10:43:08 +01:00
|
|
|
|
}
|
|
|
|
|
|
2024-01-19 10:37:05 +01:00
|
|
|
|
.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;
|
2024-02-07 11:44:56 +01:00
|
|
|
|
line-height: 1.5;
|
2024-01-19 10:37:05 +01:00
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 0.5625rem;
|
|
|
|
|
font-weight: theme('fontWeight.bold');
|
|
|
|
|
border-radius: theme('borderRadius.full');
|
|
|
|
|
background-color: theme('colors.info.100');
|
2024-01-23 09:47:35 +01:00
|
|
|
|
border: 1px solid theme('colors.info.100');
|
2024-01-19 10:37:05 +01:00
|
|
|
|
color: theme('colors.white.DEFAULT');
|
|
|
|
|
|
2024-01-23 09:47:35 +01:00
|
|
|
|
// Reuse the same count component as a button badge.
|
2024-01-19 10:37:05 +01:00
|
|
|
|
.w-filter-button & {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: calc(-0.5 * #{$badge-size});
|
|
|
|
|
inset-inline-end: calc(-0.5 * #{$badge-size});
|
|
|
|
|
}
|
|
|
|
|
}
|