Adjust disabled toggle

[bjarnef]

In languages view in v8 the default language toggle looks disabled because of the following css:

.umb-permission--disabled {
    opacity: .8;
}

I think the umb-toggle (button element) should have a disabled state, where browsers doesn't focus on disabled elements (as with a diabled checkbox) when using keyboard tab key and it doesn't have the box shadow in disabled state as in active and focus state.

Browsers also have a default cursor style on disabled elements, but we can also control this using something like this:

.umb-toggle:disabled, .umb-toggle:disabled .umb-toggle__toggle {
    cursor: not-allowed;
}

Furthermore it seems the checkmark or cross icons needs to adjusted so they are centered vertically.

[nul800sebastiaan]

Thanks for the PR, we'll have a look soon! 👍

[bjarnef]

@nul800sebastiaan I think the PR can be cherry picked to dev-v7 except commit 0d8450e

[nul800sebastiaan]

Fixed in #3967

[nul800sebastiaan]

Cherry picked for v7: d53d0b4