Larger hit target for large composition mode toggle

This commit is contained in:
Ken Powers 2019-08-20 15:15:13 -04:00 committed by Scott Nonnenberg
parent ea7d7217b5
commit 191f5860a8
2 changed files with 18 additions and 9 deletions

View file

@ -8,9 +8,11 @@
outline: inherit; outline: inherit;
} }
@mixin color-svg($svg, $color) { @mixin color-svg($svg, $color, $stretch: true) {
-webkit-mask: url($svg) no-repeat center; -webkit-mask: url($svg) no-repeat center;
-webkit-mask-size: 100%; @if $stretch {
-webkit-mask-size: 100%;
}
background-color: $color; background-color: $color;
} }

View file

@ -5083,25 +5083,33 @@
flex-grow: 1; flex-grow: 1;
} }
&__toggle-large { &__toggle-large {
width: 20px; width: 48px;
height: 20px; height: 24px;
border: none; border: none;
@include light-theme() { @include light-theme() {
@include color-svg('../images/expand-up.svg', $color-gray-45); @include color-svg('../images/expand-up.svg', $color-gray-45, false);
} }
@include dark-theme() { @include dark-theme() {
@include color-svg('../images/expand-up.svg', $color-gray-45); @include color-svg('../images/expand-up.svg', $color-gray-45, false);
} }
&--large-active { &--large-active {
@include light-theme() { @include light-theme() {
@include color-svg('../images/collapse-down.svg', $color-gray-45); @include color-svg(
'../images/collapse-down.svg',
$color-gray-45,
false
);
} }
@include dark-theme() { @include dark-theme() {
@include color-svg('../images/collapse-down.svg', $color-gray-45); @include color-svg(
'../images/collapse-down.svg',
$color-gray-45,
false
);
} }
} }
} }
@ -5113,7 +5121,6 @@
.composition-area-placeholder { .composition-area-placeholder {
flex-grow: 1; flex-grow: 1;
margin: { margin: {
top: 3px;
bottom: 6px; bottom: 6px;
} }
} }