The problem is that when the button is disabled it should add a class to its parent as well so that you can add cursor: not-allowed to the parent and leave pointer-events:none as it already is in the system
To Reproduce
Steps to reproduce the behavior:
Go to codesanbox
Click on press me
See cursor is normal instead of not-allowed as should be
Expected behavior
If you add :has like this:
li:has(> .disabled) {
cursor: not-allowed;
}
You will see the correct result, but it must be said that :has is not yet fully compatible, so I would add an additional class for these cases
At the moment I decided to use this solution:
var app = new Framework7({
....
actions: {
on: {
open: function () {
if (this.$el[0].classList.contains('popover')) {
this.$el[0].querySelectorAll('a.disabled').forEach(el => {
el.parentElement.classList.add('disabledCursor');
});
}
}
}
},
.....
Describe the bug
The problem is that when the button is disabled it should add a class to its parent as well so that you can add
cursor: not-allowed
to the parent and leavepointer-events:none
as it already is in the systemTo Reproduce
Steps to reproduce the behavior:
not-allowed
as should beExpected behavior
If you add
:has
like this:You will see the correct result, but it must be said that
:has
is not yet fully compatible, so I would add an additional class for these casesAt the moment I decided to use this solution:
In css:
By doing so I add a class to the parent automatically.