Increase clickable area of seek bar
This commit is contained in:
parent
76caba0385
commit
e0a73a583e
1 changed files with 13 additions and 1 deletions
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue