Style mentions as pills in rich text editor (#10448)
This commit is contained in:
parent
f933806b63
commit
6ac366ee5a
1 changed files with 30 additions and 2 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue