Increase clickable area of seek bar

This commit is contained in:
Travis Ralston 2021-06-25 00:19:57 -06:00
parent 76caba0385
commit e0a73a583e

View file

@ -29,7 +29,7 @@ limitations under the License.
height: 1px; height: 1px;
background: $quaternary-fg-color; background: $quaternary-fg-color;
outline: none; // remove blue selection border outline: none; // remove blue selection border
position: relative; // for progress bar support later on position: relative; // for before+after pseudo elements later on
cursor: pointer; cursor: pointer;
@ -88,4 +88,16 @@ limitations under the License.
&:disabled { &:disabled {
opacity: 0.5; opacity: 0.5;
} }
// Increase clickable area for the slider (approximately same size as browser default)
// We do it this way to keep the same padding and margins of the element, avoiding margin math.
// Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/
&:after {
content: '';
position: absolute;
top: -6px;
bottom: -6px;
left: 0;
right: 0;
}
} }