From 9f574cc764e5a833d7b763b7577b9c9697d0ff6d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 18 May 2023 04:18:59 +0000 Subject: [PATCH] Replace Sass variable with CSS custom property: --selected-message-border-width (#10876) --- res/css/_common.pcss | 2 -- res/css/views/rooms/_EventTile.pcss | 10 +++++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index d40efc178b..3cad47ccfe 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -25,8 +25,6 @@ limitations under the License. $hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */ -$selected-message-border-width: 4px; - :root { font-size: 10px; diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 7b22a116cb..75aec20489 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -170,8 +170,10 @@ $left-gutter: 64px; &[data-layout="irc"], &[data-layout="group"] { + --selected-message-border-width: 4px; + /* 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; .mx_EventTile_e2eIcon { position: absolute; @@ -447,7 +449,9 @@ $left-gutter: 64px; &.mx_EventTile_isEditing > .mx_EventTile_line { .mx_EditMessageComposer { /* 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_unverified.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)); } } }