mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Fix icon clipping on calling header buttons

Browse source
This commit is contained in:
Evan Hahn 2021-08-24 15:16:26 -05:00 • committed by GitHub
parent 48cc2b5f11
commit 547ccd167c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

5
stylesheets/_mixins.scss
View file

@ -155,11 +155,14 @@
// Icons // Icons
@mixin color-svg($svg, $color, $stretch: true) { @mixin color-svg($svg, $color, $stretch: true, $mask-origin: null) {
-webkit-mask: url($svg) no-repeat center; -webkit-mask: url($svg) no-repeat center;
@if $stretch { @if $stretch {
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
} }
@if $mask-origin {
-webkit-mask-origin: $mask-origin;
}
background-color: $color; background-color: $color;
} }

39
stylesheets/_modules.scss
View file

@ -5301,13 +5301,15 @@ button.module-image__border-overlay:focus {
} }
.module-calling-button { .module-calling-button {
$size: 22px; @mixin icon($path) {
@include color-svg($path, $color-white, $mask-origin: padding-box);
height: 24px;
width: 24px;
}
&__participants { &__participants {
@include color-svg('../images/icons/v2/group-solid-24.svg', $color-white); @include icon('../images/icons/v2/group-solid-24.svg');
display: inline-block; display: inline-block;
height: $size;
width: $size;
&--container { &--container {
@include button-reset; @include button-reset;
@ -5332,42 +5334,23 @@ button.module-image__border-overlay:focus {
} }
&__settings { &__settings {
@include color-svg( @include icon('../images/icons/v2/settings-solid-16.svg');
'../images/icons/v2/settings-solid-16.svg',
$color-white
);
height: $size;
width: $size;
} }
&__grid-view { &__grid-view {
@include color-svg( @include icon('../images/icons/v2/grid-view-solid-24.svg');
'../images/icons/v2/grid-view-solid-24.svg',
$color-white
);
height: $size;
width: $size;
} }
&__speaker-view { &__speaker-view {
@include color-svg( @include icon('../images/icons/v2/speaker-view-solid-24.svg');
'../images/icons/v2/speaker-view-solid-24.svg',
$color-white
);
height: $size;
width: $size;
} }
&__pip { &__pip {
@include color-svg('../images/icons/v2/pip-minimize-24.svg', $color-white); @include icon('../images/icons/v2/pip-minimize-24.svg');
height: $size;
width: $size;
} }
&__cancel { &__cancel {
@include color-svg('../images/icons/v2/x-24.svg', $color-white); @include icon('../images/icons/v2/x-24.svg');
height: $size;
width: $size;
} }
} }