andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SizeInput: fix slider bug that broke functionality on mobile

Browse Source 
We were, for some reason, preventing the default behavior of touch
events onTouchStart and onTouchEnd. This made the slider unusable with
drag actions on mobile. I can't remember why we did this to begin with,
probably something important...

The slider thumb size was also increased for better tap target size.
This commit is contained in:
rektdeckard
2020-09-25 23:58:48 -04:00
parent 5b42711c3e
commit 55ddcfc9a7
2 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/SizeInput/SizeInput.css
View File

@@ -12,6 +12,10 @@
font-size: 16px;
}
.size-bar label {
width: 40px;
}
.size-bar:focus-within {
outline: none;
}
@@ -36,9 +40,9 @@
.size-bar input::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 14px; /* Set a specific slider handle width */
height: 14px; /* Slider handle height */
padding: 6px;
width: 16px; /* Set a specific slider handle width */
height: 16px; /* Slider handle height */
margin: 6px;
border-radius: 50%;
background: white; /* Green background */
cursor: pointer; /* Cursor on hover */
@@ -46,24 +50,26 @@
}
.size-bar input::-moz-range-thumb {
width: 14px; /* Set a specific slider handle width */
height: 14px; /* Slider handle height */
padding: 6px;
background: black; /* Green background */
appearance: none;
width: 16px; /* Set a specific slider handle width */
height: 16px; /* Slider handle height */
margin: 6px;
border-radius: 50%;
background: white; /* Green background */
cursor: pointer; /* Cursor on hover */
transition: height 0.1s, width 0.1s;
}
.size-bar input:focus::-moz-range-thumb {
outline: none;
width: 20px; /* Set a specific slider handle width */
height: 20px; /* Slider handle height */
width: 24px; /* Set a specific slider handle width */
height: 24px; /* Slider handle height */
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
}
.size-bar input:focus::-webkit-slider-thumb {
outline: none;
width: 20px; /* Set a specific slider handle width */
height: 20px; /* Slider handle height */
width: 24px; /* Set a specific slider handle width */
height: 24px; /* Slider handle height */
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
}