jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reduce height of NumberInput slider thumb

This commit is contained in:
Keavon Chambers 2023-04-28 18:14:47 -07:00
parent 1020eb6835
commit 0bd96bee1d
3 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/package-lock.json generated
View File

@ -19,7 +19,7 @@
"@types/license-checker-webpack-plugin": "^0.2.1",
"@types/node": "^18.16.2",
"@types/webpack": "^5.28.1",
"buffer": "^6.0.3",
"buffer": "^5.7.1",
"concurrently": "^8.0.1",
"license-checker-webpack-plugin": "^0.2.1",
"parcel": "^2.8.3",
@ -2277,9 +2277,9 @@
}
},
"node_modules/buffer": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
"integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
"dev": true,
"funding": [
{
@ -2297,7 +2297,7 @@
],
"dependencies": {
"base64-js": "^1.3.1",
"ieee754": "^1.2.1"
"ieee754": "^1.1.13"
}
},
"node_modules/buffer-crc32": {
@ -7122,13 +7122,13 @@
}
},
"buffer": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
"integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
"dev": true,
"requires": {
"base64-js": "^1.3.1",
"ieee754": "^1.2.1"
"ieee754": "^1.1.13"
}
},
"buffer-crc32": {

2
frontend/package.json
View File

@ -37,7 +37,7 @@
"@types/license-checker-webpack-plugin": "^0.2.1",
"@types/node": "^18.16.2",
"@types/webpack": "^5.28.1",
"buffer": "^6.0.3",
"buffer": "^5.7.1",
"concurrently": "^8.0.1",
"license-checker-webpack-plugin": "^0.2.1",
"parcel-transformer-svelte3-plus": "^0.2.9",

13
frontend/src/components/widgets/inputs/NumberInput.svelte
View File

@ -400,7 +400,7 @@
appearance: none;
border-radius: 2px;
width: 4px;
height: 24px;
height: 22px;
background: #494949; // Becomes var(--color-5-dullgray) with screen blend mode over var(--color-1-nearblack) background
}
@ -422,7 +422,7 @@
border: none;
border-radius: 2px;
width: 4px;
height: 24px;
height: 22px;
background: #494949; // Becomes var(--color-5-dullgray) with screen blend mode over var(--color-1-nearblack) background
}
@ -442,8 +442,8 @@
// This fake slider thumb stays in the location of the real thumb while we have to hide the real slider between mousedown and mouseup or mousemove.
// That's because the range input element moves to the pressed location immediately upon mousedown, but we don't want to show that yet.
// Instead, we want to wait until the user does something:
// Releasing the mouse means we reset the slider to its previous location, thus canceling the slider move. In that case, we focus the text entry.
// Moving the mouse left/right means we have begun dragging, so then we hide this fake one and continue showing the actual drag of the real slider.
// - Releasing the mouse means we reset the slider to its previous location, thus canceling the slider move. In that case, we focus the text entry.
// - Moving the mouse left/right means we have begun dragging, so then we hide this fake one and continue showing the actual drag of the real slider.
.fake-slider-thumb {
position: absolute;
left: 2px;
@ -459,9 +459,10 @@
position: absolute;
border-radius: 2px;
margin-left: -2px;
left: calc(var(--progress-factor) * 100%);
width: 4px;
height: 24px;
height: 22px;
top: 1px;
left: calc(var(--progress-factor) * 100%);
background: #5b5b5b; // Becomes var(--color-6-lowergray) with screen blend mode over var(--color-1-nearblack) background
}
}