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

SizeInput: update style to match spec

Browse Source
This commit is contained in:
rektdeckard
2020-07-29 12:23:13 -04:00
parent c538766794
commit 2ad1e01641
2 changed files with 30 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,56 +1,63 @@
.size-bar { .size-bar {
position: relative; position: relative;
display: flex; display: flex;
align-items: center;
flex: 2; flex: 2;
margin: 4px; align-items: center;
padding: 8px 16px; height: 48px;
border: 1px solid black; margin: 0 4px;
border-radius: 24px; padding: 0 24px;
background-color: white; color: white;
font-family: sans-serif; border-radius: 8px;
font-size: 13.333px; background-color: #494650;
height: 17px; font-family: "Manrope", sans-serif;
font-size: 16px;
} }
.size-bar:focus-within { .size-bar:focus-within {
outline: none; outline: none;
border: 1px solid violet;
border-radius: 24px;
} }
.size-bar input { .size-bar input {
flex: 1; flex: 1;
margin-left: 16px;
border: none; border: none;
margin: 0 0 0 12px;
-webkit-appearance: none; /* Override default CSS styles */ -webkit-appearance: none; /* Override default CSS styles */
appearance: none; appearance: none;
height: 1px; /* Specified height */ height: 1px; /* Specified height */
background: black; /* Grey background */
outline: none; /* Remove outline */ outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
} }
.size-bar input::-webkit-slider-thumb { .size-bar input::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */ -webkit-appearance: none; /* Override default look */
appearance: none; appearance: none;
width: 12px; /* Set a specific slider handle width */ width: 14px; /* Set a specific slider handle width */
height: 12px; /* Slider handle height */ height: 14px; /* Slider handle height */
background: black; /* Green background */ border-radius: 50%;
background: white; /* Green background */
cursor: pointer; /* Cursor on hover */ cursor: pointer; /* Cursor on hover */
transition: height 0.1s, width 0.1s;
} }
.size-bar input::-moz-range-thumb { .size-bar input::-moz-range-thumb {
width: 12px; /* Set a specific slider handle width */ width: 14px; /* Set a specific slider handle width */
height: 12px; /* Slider handle height */ height: 14px; /* Slider handle height */
background: black; /* Green background */ background: black; /* Green background */
cursor: pointer; /* Cursor on hover */ cursor: pointer; /* Cursor on hover */
transition: height 0.1s, width 0.1s;
} }
.size-bar input:focus { .size-bar input:focus::-moz-range-thumb {
outline: none; outline: none;
width: 20px; /* Set a specific slider handle width */
height: 20px; /* Slider handle height */
transition: height 0.1s, width 0.1s;
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
} }
.size-bar input::placeholder { .size-bar input:focus::-webkit-slider-thumb {
color: black; outline: none;
width: 20px; /* Set a specific slider handle width */
height: 20px; /* Slider handle height */
transition: height 0.1s, width 0.1s;
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
} }

2
src/components/SizeInput/SizeInput.tsx
View File

@@ -20,7 +20,7 @@ const SizeInput: React.FC<SizeInputProps> = () => {
return ( return (
<div className="size-bar"> <div className="size-bar">
<label htmlFor="size-input">{`Size: ${size}px`}</label> <label htmlFor="size-input">{`${size}px`}</label>
<input <input
id="size-input" id="size-input"
value={size} value={size}