trent/fcc-challenges
1
0
Fork 0
mirror of https://github.com/TrentSPalmer/fcc-challenges.git synced 2025-11-21 10:18:25 -08:00
Code Issues Projects Releases Wiki Activity

add drum-machine-react

Browse Source
This commit is contained in:
Trent Palmer
2020-05-26 07:01:12 -07:00
parent 06590ce07f
commit b659e8549a
55 changed files with 18652 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
drum-machine-react/src/VolumeContainer.css Normal file
View File

@@ -0,0 +1,54 @@
#volume-container {
margin: auto;
height: 300px;
width: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 32px;
}
#volume-input-container {
height: 210px;
}
#volume {
-webkit-appearance: none;
position: relative;
top: 75px;
left: -95px;
width: 205px;
height: 4px;
background: var(--global-black-color);
transform: rotate(270deg);
border-radius: 4px;
border: none;
}
#volume:focus {
outline: none;
}
#volume::-webkit-slider-thumb {
-webkit-appearance: none;
height: 30px;
width: 30px;
border: none;
border-radius: 50%;
cursor: pointer;
background: var(--global-black-color);
margin-top: -2px;
}
#volume::-moz-range-thumb {
height: 30px;
width: 30px;
border: none;
border-radius: 50%;
background: var(--global-black-color);
cursor: pointer;
}
.volumeIcon {
color: var(--global-black-color);
}