Allow filter header to be tabbable (#3739)

This commit is contained in:
WithoutPants 2023-05-19 12:36:28 +10:00 committed by GitHub
parent 06e924d010
commit 0a14394113
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 4 deletions

View file

@ -130,7 +130,7 @@ const CriterionOptionList: React.FC<ICriterionList> = ({
function renderCard(c: CriterionOption, isPin: boolean) {
return (
<Card key={c.type} data-type={c.type} ref={criteriaRefs[c.type]!}>
<Accordion.Toggle eventKey={c.type} as={Card.Header}>
<Accordion.Toggle className="filter-item-header" eventKey={c.type}>
<span className="mr-auto">
<Icon
className="collapse-icon fa-fw"

View file

@ -108,7 +108,7 @@ input[type="range"].zoom-slider {
}
}
.add-filter-dialog .rating-stars {
.edit-filter-dialog .rating-stars {
font-size: 1.3em;
margin-left: 0.25em;
}
@ -148,13 +148,26 @@ input[type="range"].zoom-slider {
margin-left: 0;
}
.card-header {
.filter-item-header {
background-color: $card-cap-bg;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
color: inherit;
cursor: pointer;
display: flex;
margin-bottom: 0;
padding: 0.75rem 1.25rem;
&:focus {
border-color: $primary;
border-radius: calc(0.375rem - 1px);
box-shadow: inset 0 0 0 0.1rem rgba(19, 124, 189);
outline: 0;
}
}
}
.card-header .btn {
.filter-item-header .btn {
border: 0;
padding-bottom: 0;
padding-top: 0;

View file

@ -26,6 +26,7 @@ $popover-bg: $secondary;
$dark-text: #182026;
$textfield-bg: rgba(16, 22, 26, 0.3);
$card-bg: #30404d;
$card-cap-bg: rgba(#000, 0.03);
@import "node_modules/bootstrap/scss/bootstrap";