Remove margin from E2E icon between avatar and hidden event (#8584)

* Remove margin from warning E2E icon between an avatar and a hidden event

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use a variable to ensure the same spacing around the E2E icon

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply the style to E2E icon

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Rename variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-15 15:50:35 +00:00 committed by GitHub
parent 1b426ce0c8
commit 1188f1a508
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -55,6 +55,7 @@ limitations under the License.
.mx_EventTile[data-layout=bubble] { .mx_EventTile[data-layout=bubble] {
--EventTile_bubble-margin-inline-start: 49px; --EventTile_bubble-margin-inline-start: 49px;
--EventTile_bubble-margin-inline-end: 60px; --EventTile_bubble-margin-inline-end: 60px;
--EventTile_bubble_gap-inline: 5px;
position: relative; position: relative;
margin-top: var(--gutterSize); margin-top: var(--gutterSize);
@ -268,12 +269,12 @@ limitations under the License.
} }
.mx_EventTile_line { .mx_EventTile_line {
--EventBubbleTile_line-margin-inline-end: -12px; --EventTile_bubble_line-margin-inline-end: -12px;
position: relative; position: relative;
display: flex; display: flex;
gap: 5px; gap: 5px var(--EventTile_bubble_gap-inline);
margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 -9px; margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 -9px;
border-top-left-radius: var(--cornerRadius); border-top-left-radius: var(--cornerRadius);
border-top-right-radius: var(--cornerRadius); border-top-right-radius: var(--cornerRadius);
@ -600,7 +601,7 @@ limitations under the License.
.mx_EventTile_avatar { .mx_EventTile_avatar {
position: static; position: static;
order: -1; order: -1;
margin-right: 5px; margin-inline-end: var(--EventTile_bubble_gap-inline); // Same spacing between E2E icon and a hidden event
} }
.mx_EventTile_line, .mx_EventTile_line,
@ -611,7 +612,8 @@ limitations under the License.
} }
.mx_EventTile_e2eIcon { .mx_EventTile_e2eIcon {
margin-left: 9px; margin-inline-start: 0; // mx_EventTile_avatar has margin-inline-end, so margin is not needed here
align-self: center;
} }
.mx_EventTile_line { .mx_EventTile_line {