chinwag/chinwagsocial
chinwag/chinwagsocial
2
0
Fork 0
Code Issues Pull requests Releases 14 Wiki Activity

fix: Fix inaccessible "Clear search" button (#35152)

Browse source
This commit is contained in:
diondiondion 2025-06-24 16:36:05 +02:00 • committed by GitHub
commit 8ba1487f30
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 82 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

82
app/javascript/styles/mastodon/components.scss
View file

@ -5670,18 +5670,47 @@ a.status-card {
}
}
.search__icon {
background: transparent;
border: 0;
padding: 0;
.search__icon-wrapper {
position: absolute;
top: 12px + 2px;
cursor: default;
pointer-events: none;
top: 14px;
display: grid;
margin-inline-start: 16px - 2px;
width: 20px;
height: 20px;
.icon {
width: 100%;
height: 100%;
}
&:not(.has-value) {
pointer-events: none;
}
}
.search__icon {
grid-area: 1 / 1;
transition: all 100ms linear;
transition-property: transform, opacity;
color: $darker-text-color;
}
.search__icon.icon-search {
.has-value & {
pointer-events: none;
opacity: 0;
transform: rotate(90deg);
}
}
.search__icon--clear-button {
background: transparent;
border: 0;
padding: 0;
width: 20px;
height: 20px;
border-radius: 100%;
&::-moz-focus-inner {
border: 0;
}
@ -5691,39 +5720,14 @@ a.status-card {
outline: 0 !important;
}
.icon {
position: absolute;
top: 0;
inset-inline-start: 0;
&:focus-visible {
box-shadow: 0 0 0 2px $ui-button-focus-outline-color;
}
&[aria-hidden='true'] {
pointer-events: none;
opacity: 0;
transition: all 100ms linear;
transition-property: transform, opacity;
width: 20px;
height: 20px;
color: $darker-text-color;
&.active {
pointer-events: auto;
opacity: 1;
}
}
.icon-search {
transform: rotate(90deg);
&.active {
pointer-events: none;
transform: rotate(0deg);
}
}
.icon-times-circle {
transform: rotate(0deg);
cursor: pointer;
&.active {
transform: rotate(90deg);
}
transform: rotate(-90deg);
}
}