mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-23 19:25:48 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improve CSS rules of zoom buttons on live location (#8728)

Browse source 
* Use flex to stop redundant margin-top from appearing

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

* 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 <luixxiul@users.noreply.github.com>

* 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 <luixxiul@users.noreply.github.com>

* Use SASS variables and remove a redundant declaration

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

26
res/css/components/views/location/_ZoomButtons.scss
View file

@ -18,28 +18,28 @@ limitations under the License.
position: absolute;
bottom: $spacing-32;
right: $spacing-24;
}
display: flex;
flex-direction: column;
row-gap: $spacing-8;
.mx_ZoomButtons_button {
@mixin ButtonResetDefault;
.mx_ZoomButtons_button {
$ZoomButtons_button-size: 24px;
margin-top: $spacing-8;
border-radius: 4px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 24px;
width: 24px;
height: $ZoomButtons_button-size;
width: $ZoomButtons_button-size;
background: $background;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
}
.mx_ZoomButtons_icon {
height: 10px;
width: 10px;
.mx_ZoomButtons_icon {
$ZoomButtons_icon-size: 10px;
height: $ZoomButtons_icon-size;
width: $ZoomButtons_icon-size;
color: $primary-content;
}
}
}