Style mentions as pills in rich text editor (#10448)

This commit is contained in:
alunturner 2023-04-03 10:16:29 +01:00 committed by GitHub
parent f933806b63
commit 6ac366ee5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -101,9 +101,37 @@ limitations under the License.
}
}
/* this selector represents what will become a pill */
/* this selector represents what will become a pill
nb despite there being mx_UserPill and mx_RoomPill classes appended to these pills
in the current composer, there don't appear to be any styles associated with those classes
in this repo */
a[data-mention-type] {
cursor: text;
/* these entries duplicate mx_Pill from _Pill.pcss */
padding: $font-1px 0.4em;
line-height: $font-17px;
border-radius: $font-16px;
vertical-align: text-top;
/* TODO turning this on hides the cursor from the composer for some
reason, so comment out for now and assess if it's needed when we add
the Avatars
display: inline-flex;
align-items: center; not required with the above turned off
Potential fix is using display: inline, width: fit-content
*/
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
color: $accent-fg-color;
background-color: $pill-bg-color;
/* combining the overrides from _BasicMessageComposer.pcss */
user-select: all;
position: relative;
cursor: unset; /* We don't want indicate clickability */
text-overflow: ellipsis;
white-space: nowrap;
}
}