From cda18a3dfbe2d947b6c7f0593fabd7c4f705ce1d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 13 Jun 2022 07:23:49 +0000 Subject: [PATCH] Improve CSS rules of zoom buttons on live location (#8728) * Use flex to stop redundant margin-top from appearing Signed-off-by: Suguru Hirahara * Remove ButtonResetDefault which resets nothing It should be avoided to use ButtonResetDefault where there is nothing to be reset, in order to prevent resources from being wasted. Signed-off-by: Suguru Hirahara * Ensure that unexpected regressions will never happen on the buttons and their icons Rules can be extracted when needed. Until then there is no point of exposing elements to possible regressions, which could easily happen on the current architecture. Signed-off-by: Suguru Hirahara * Use SASS variables and remove a redundant declaration Signed-off-by: Suguru Hirahara --- .../views/location/_ZoomButtons.scss | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/res/css/components/views/location/_ZoomButtons.scss b/res/css/components/views/location/_ZoomButtons.scss index 59d52477f9..d6e40e5a49 100644 --- a/res/css/components/views/location/_ZoomButtons.scss +++ b/res/css/components/views/location/_ZoomButtons.scss @@ -18,28 +18,28 @@ limitations under the License. position: absolute; bottom: $spacing-32; right: $spacing-24; -} - -.mx_ZoomButtons_button { - @mixin ButtonResetDefault; - - margin-top: $spacing-8; - border-radius: 4px; display: flex; - flex-direction: row; - justify-content: center; - align-items: center; + flex-direction: column; + row-gap: $spacing-8; - height: 24px; - width: 24px; + .mx_ZoomButtons_button { + $ZoomButtons_button-size: 24px; - background: $background; - box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25); -} - -.mx_ZoomButtons_icon { - height: 10px; - width: 10px; - - color: $primary-content; + border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; + height: $ZoomButtons_button-size; + width: $ZoomButtons_button-size; + background: $background; + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25); + + .mx_ZoomButtons_icon { + $ZoomButtons_icon-size: 10px; + + height: $ZoomButtons_icon-size; + width: $ZoomButtons_icon-size; + color: $primary-content; + } + } }