trent/fcc-challenges
1
0
Fork 0
mirror of https://github.com/TrentSPalmer/fcc-challenges.git synced 2024-11-21 19:31:29 -08:00
Code Issues Projects Releases Wiki Activity

drum-machine move selection menu scrollbar to left

Browse Source
This commit is contained in:
Trent Palmer 2020-05-27 13:21:17 -07:00
parent b137e5e185
commit fc53c8865c
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
drum-machine/README.md
View File

@ -10,10 +10,9 @@
### TODOS ### TODOS
* bind 'v' key to focus volume slider
* increase granularity of esc key function in selection menus back navigation * increase granularity of esc key function in selection menus back navigation
* add focus() to selectionMenuItems so that you can immediately begin scrolling with arrow keys * add focus() to selectionMenuItems so that you can immediately begin scrolling with arrow keys
* add tip for scrolling selectionMenuItems * add tip for scrolling selectionMenuItems
* move selectionMenu scroller to the left
* make sure metronome continues on volume, sound, or metronome BPM change * make sure metronome continues on volume, sound, or metronome BPM change
* add additional metronome speed values * add additional metronome speed values
* fix toolstips for menuselectionitems

12
drum-machine/drumMachine.css
View File

@ -135,24 +135,28 @@ body {
.selectionMenu { .selectionMenu {
margin: auto; margin: auto;
background-color: var(--global-third-color); background-color: var(--global-third-color);
border-radius: 1rem; border-radius: 5px;
width: 54vh; width: 54vh;
height: 45vh; height: 45vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
overflow: auto; overflow: auto;
scrollbar-color: black var(--global-fourth-color); scrollbar-color: var(--global-black-color) var(--global-second-color);
scrollbar-width: thin;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
direction: rtl;
} }
.selectionMenu::-webkit-scrollbar { .selectionMenu::-webkit-scrollbar {
background-color: var(--global-fourth-color); background-color: var(--global-third-color);
border-radius: 5px;
} }
.selectionMenu::-webkit-scrollbar-thumb { .selectionMenu::-webkit-scrollbar-thumb {
background-color: black; background-color: var(--global-black-color);
border-radius: 5px;
} }
.selectionMenuItem, .volumeSelectionMenuItem, .metronomeSelectionMenuItem { .selectionMenuItem, .volumeSelectionMenuItem, .metronomeSelectionMenuItem {