Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 12:45:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Make the buttons easier to hit

Browse Source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-14 09:06:41 +02:00
parent de4a29cd3c
commit 6a285bed5a
No known key found for this signature in database
GPG Key ID: 9760693FDD98A790
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
res/css/views/elements/_ImageView.scss
View File

@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
$button-size: 32px;
$icon-size: 22px;
$button-gap: 24px;
.mx_ImageView {
display: flex;
width: 100%;
@ -66,16 +70,17 @@ limitations under the License.
pointer-events: initial;
display: flex;
align-items: center;
gap: calc($button-gap - ($button-size - $icon-size));
}
.mx_ImageView_button {
margin-left: 24px;
padding: calc(($button-size - $icon-size) / 2);
display: block;
&::before {
content: '';
height: 22px;
width: 22px;
height: $icon-size;
width: $icon-size;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
@ -109,11 +114,12 @@ limitations under the License.
}
.mx_ImageView_button_close {
padding: calc($button-size - $button-size);
border-radius: 100%;
background: #21262c; // same on all themes
&::before {
width: 32px;
height: 32px;
width: $button-size;
height: $button-size;
mask-image: url('$(res)/img/image-view/close.svg');
mask-size: 40%;
}