app/assets/stylesheets/blacklight/_constraints.scss
.constraints-container {
@extend .mb-2;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.25rem;
}
.applied-filter {
@extend .mx-1;
.constraint-value {
cursor: default;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@media (max-width: breakpoint-min(sm)) {
max-width: breakpoint-min(sm) * .5;
}
@media (min-width: breakpoint-min(sm)) and (max-width: breakpoint-max(sm)) {
max-width: breakpoint-min(sm) * .5;
}
@media (min-width: breakpoint-min(md)) and (max-width: breakpoint-max(md)) {
max-width: breakpoint-min(md) * .5;
}
@media (min-width: breakpoint-min(lg)) {
max-width: breakpoint-min(lg) * .5;
}
&:hover, &:active {
background-color: theme-color("secondary");
border-color: theme-color("secondary");
box-shadow: none;
}
}
.filter-name:after {
color: $gray-500;
content: "❯";
font-size: 90%;
padding-left: $caret-width;
}
.remove:hover, .remove:active {
@extend .btn-danger;
}
}