add a different background color on op selected, based on user test feedback

This commit is contained in:
Robin Scholtes 2023-05-15 13:34:13 +12:00
parent 82837254ea
commit 9ec902a369
3 changed files with 14 additions and 2 deletions

View file

@ -57,6 +57,17 @@
color: #47d047;
}
.operation.selected {
background-color: var(--selected-operation-bg-colour);
}
@media only screen and (min-width: 768px){
.operation.selected {
background-color: var(--op-list-operation-bg-colour);
}
}
.operation.selected > .op-icon.check-icon {
display: inline-block;
}

View file

@ -55,7 +55,7 @@
--rec-list-operation-border-colour: #d3e8c0;
--selected-operation-font-color: #c09853;
--selected-operation-bg-colour: #fcf8e3;
--selected-operation-bg-colour: rgba(217, 237, 247, 0.5);
--selected-operation-border-colour: #fbeed5;
--breakpoint-font-colour: #b94a48;

View file

@ -613,7 +613,8 @@ class RecipeWaiter {
addSelectedClass(opDataName) {
const ops = document.querySelectorAll(`.operation[data-name="${opDataName}"]`);
// A selected operation can occur twice if it's in favourites and the original category op-list
// A selected operation can occur twice if it's in favourites
// and the original category op-list
ops.forEach((op => {
op.classList.add("selected");
}))