From 631fd875094cd58e6d7d99e130c657f1180baa17 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara <luixxiul@users.noreply.github.com> Date: Mon, 4 Apr 2022 06:34:39 +0000 Subject: [PATCH] Normalize call buttons (#8129) - Set a mixin to use it on call events and toasts Fixes https://github.com/vector-im/element-web/issues/21493 Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --- res/css/_common.scss | 22 +++++++++++++++ res/css/views/messages/_CallEvent.scss | 28 ++++++-------------- res/css/views/toasts/_IncomingCallToast.scss | 15 +---------- 3 files changed, 31 insertions(+), 34 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index a4b470d052..4ead7381fc 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -670,3 +670,25 @@ legend { line-height: inherit; cursor: pointer; } + +@define-mixin CallButton { + box-sizing: border-box; + font-weight: 600; + height: $font-24px; + line-height: $font-24px; + margin-right: 0; + + span { + display: flex; + align-items: center; + + &::before { + content: ''; + display: inline-block; + background-color: $button-fg-color; + mask-position: center; + mask-repeat: no-repeat; + margin-right: 8px; + } + } +} diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss index 2587e73e50..b5ef5b0bc1 100644 --- a/res/css/views/messages/_CallEvent.scss +++ b/res/css/views/messages/_CallEvent.scss @@ -147,30 +147,18 @@ limitations under the License. align-items: center; color: $secondary-content; margin-right: 16px; - gap: 8px; + gap: 12px; // See mx_IncomingCallToast_buttons min-width: max-content; .mx_CallEvent_content_button { - padding: 0px 12px; + @mixin CallButton; + padding: 0 12px; - span { - padding: 1px 0; - display: flex; - align-items: center; - - &::before { - content: ''; - display: inline-block; - background-color: $button-fg-color; - mask-position: center; - mask-repeat: no-repeat; - mask-size: 16px; - width: 16px; - height: 16px; - margin-right: 8px; - - flex-shrink: 0; - } + span::before { + mask-size: 16px; + width: 16px; + height: 16px; + flex-shrink: 0; } } diff --git a/res/css/views/toasts/_IncomingCallToast.scss b/res/css/views/toasts/_IncomingCallToast.scss index cb05b1a977..5fd244c277 100644 --- a/res/css/views/toasts/_IncomingCallToast.scss +++ b/res/css/views/toasts/_IncomingCallToast.scss @@ -90,27 +90,14 @@ limitations under the License. gap: 12px; .mx_IncomingCallToast_button { - height: 24px; + @mixin CallButton; padding: 0px 8px; flex-shrink: 0; flex-grow: 1; - margin-right: 0; font-size: $font-15px; - line-height: $font-24px; span { padding: 8px 0; - display: flex; - align-items: center; - - &::before { - content: ''; - display: inline-block; - background-color: $button-fg-color; - mask-position: center; - mask-repeat: no-repeat; - margin-right: 8px; - } } &.mx_IncomingCallToast_button_accept span::before {