PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Move &.mx_EventTile_isEditing and &.mx_EventTile_selected out of mx_EventTile:not([data-layout=bubble]) (#8980)

Browse source 
* Move &.mx_EventTile_isEditing and &.mx_EventTile_selected out of mx_EventTile:not([data-layout=bubble])

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

* Use common variables for selected lines and hovered lines

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

* Merge style blocks for mx_EventTile_line

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-13 00:24:06 +00:00 committed by GitHub
parent 49339b333d
commit a269e3ebad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
res/css/views/rooms/_EventTile.scss
View file

@ -162,6 +162,10 @@ $left-gutter: 64px;
&[data-layout=irc],
&[data-layout=group] {
// TODO: adjust the values for IRC layout
--EventTile-box-shadow-offset-x: calc(50px + $selected-message-border-width);
--EventTile-box-shadow-spread-radius: -50px;
.mx_EventTile_e2eIcon {
position: absolute;
}
@ -207,6 +211,24 @@ $left-gutter: 64px;
}
}
&.focus-visible:focus-within,
&.mx_EventTile_actionBarFocused,
&.mx_EventTile_isEditing,
&.mx_EventTile_selected {
.mx_EventTile_line {
background-color: $event-selected-color;
}
}
// this is used for the tile for the event which is selected via the URL.
&.mx_EventTile_isEditing,
&.mx_EventTile_selected {
> .mx_EventTile_line {
// TODO: ultimately we probably want some transition on here.
box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) $accent;
}
}
&.mx_EventTile_info {
.mx_EventTile_e2eIcon {
top: 0;
@ -218,24 +240,20 @@ $left-gutter: 64px;
}
&:hover {
// TODO: Adjust the values for IRC layout
--EventTile_hover_box-shadow-offset-x: calc(50px + $selected-message-border-width);
--EventTile_hover_box-shadow-spread-radius: -50px;
.mx_EventTile_line {
background-color: $event-selected-color;
}
&.mx_EventTile_verified .mx_EventTile_line {
box-shadow: inset var(--EventTile_hover_box-shadow-offset-x) 0 0 var(--EventTile_hover_box-shadow-spread-radius) $e2e-verified-color;
box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) $e2e-verified-color;
}
&.mx_EventTile_unverified .mx_EventTile_line {
box-shadow: inset var(--EventTile_hover_box-shadow-offset-x) 0 0 var(--EventTile_hover_box-shadow-spread-radius) $e2e-unverified-color;
box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) $e2e-unverified-color;
}
&.mx_EventTile_unknown .mx_EventTile_line {
box-shadow: inset var(--EventTile_hover_box-shadow-offset-x) 0 0 var(--EventTile_hover_box-shadow-spread-radius) $e2e-unknown-color;
box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) $e2e-unknown-color;
}
}
}
@ -435,23 +453,9 @@ $left-gutter: 64px;
font-size: $font-14px;
position: relative;
/* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here.
*/
&.mx_EventTile_isEditing > .mx_EventTile_line,
&.mx_EventTile_selected > .mx_EventTile_line {
box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $accent;
background-color: $event-selected-color;
}
&.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px);
}
&.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
&.mx_EventTile.focus-visible:focus-within .mx_EventTile_line {
background-color: $event-selected-color;
}
}
.mx_GenericEventListSummary {