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

Improve the look of the spinner (#6083)

Browse source
This commit is contained in:
Šimon Brandner 2021-11-02 10:35:06 +01:00 • committed by GitHub
parent 73731cc478
commit f643839a00
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 32 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/views/elements/_InlineSpinner.scss
View file

@ -24,5 +24,5 @@ limitations under the License.
}
.mx_InlineSpinner_icon {
display: inline-block;
display: inline-block !important; // Override regular mx_Spinner_icon
}

29
res/css/views/elements/_Spinner.scss
View file

@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -37,8 +38,28 @@ limitations under the License.
}
.mx_Spinner_icon {
background-color: $primary-content;
mask: url('$(res)/img/spinner.svg');
mask-size: contain;
animation: 1.1s steps(12, end) infinite spin;
background-color: $quinary-content;
mask: url('$(res)/img/spinner/spinner-background.svg');
mask-size: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
&::before {
background-color: $secondary-content;
mask: url('$(res)/img/spinner/spinner-foreground.svg');
mask-size: 100%;
width: 100%;
height: 100%;
content: "";
display: flex;
animation: 1s linear spin infinite;
}
}