imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace Sass variable with CSS custom property: --selected-message-border-width (#10876)

Browse source
This commit is contained in:
Suguru Hirahara 2023-05-18 04:18:59 +00:00 • committed by GitHub
parent 8779219727
commit 9f574cc764
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_common.pcss
View file

@ -25,8 +25,6 @@ limitations under the License.
$hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */ $hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
$selected-message-border-width: 4px;
:root { :root {
font-size: 10px; font-size: 10px;

10
res/css/views/rooms/_EventTile.pcss
View file

@ -170,8 +170,10 @@ $left-gutter: 64px;
&[data-layout="irc"], &[data-layout="irc"],
&[data-layout="group"] { &[data-layout="group"] {
--selected-message-border-width: 4px;
/* TODO: adjust the values for IRC layout */ /* TODO: adjust the values for IRC layout */
--EventTile-box-shadow-offset-x: calc(50px + $selected-message-border-width); --EventTile-box-shadow-offset-x: calc(50px + var(--selected-message-border-width));
--EventTile-box-shadow-spread-radius: -50px; --EventTile-box-shadow-spread-radius: -50px;
.mx_EventTile_e2eIcon { .mx_EventTile_e2eIcon {
position: absolute; position: absolute;
@ -447,7 +449,9 @@ $left-gutter: 64px;
&.mx_EventTile_isEditing > .mx_EventTile_line { &.mx_EventTile_isEditing > .mx_EventTile_line {
.mx_EditMessageComposer { .mx_EditMessageComposer {
/* add space for the stroke on box-shadow */ /* add space for the stroke on box-shadow */
padding-inline-start: calc($selected-message-border-width + var(--EditMessageComposer-padding-inline)); padding-inline-start: calc(
var(--selected-message-border-width) + var(--EditMessageComposer-padding-inline)
);
} }
} }
@ -592,7 +596,7 @@ $left-gutter: 64px;
&.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, &.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
&.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, &.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
&.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { &.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-inline-start: calc($left-gutter + 18px + $selected-message-border-width); padding-inline-start: calc($left-gutter + 18px + var(--selected-message-border-width));
} }
} }
} }