Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix action button disable css #1567

Merged
merged 2 commits into from Jan 25, 2021
Merged

Conversation

MGibson1
Copy link
Member

Overview

Closes #1550

Action-button does not sufficiently alter action-box buttons that are disabled. This introduces new theme variable disabledOpacity to allow setting opacity of disabled object. Unfortunately, not all disabled elements look good with the same color/opacity combinations, so this isn't applied to all &[disabled] rules.

I've also darkened the action-button for the light theme to comply with WCAG AA standards. Because light uses a new color to denote a button is disabled, opacity is set to 1. Other themes don't do this so they differentiate through opacity.

Files changed

  • box.scss: Use theme opacity and color to differentiate disabled vs enabled
  • variables.scss: Set reasonable colors/themes for disabled elements
    • light: uses a new color, darken relative to previous and so does not change opacity
    • dark/nord: Identical color is used for disabled elements, but opacity is reduced to 0.5. The same color is used because the previous colors are too difficult to distinguish

screen shots

Light

Screen Shot 2021-01-25 at 11 35 57

Dark

Screen Shot 2021-01-25 at 11 35 30

Nord

Screen Shot 2021-01-25 at 11 36 15

Color and/or opacity is used to delineate enabled vs disabled elements.
Both are required becaus some themes do not change color on disabled.
@MGibson1 MGibson1 requested a review from a team January 25, 2021 18:00
@MGibson1 MGibson1 merged commit a261697 into master Jan 25, 2021
@MGibson1 MGibson1 deleted the fix-action-button-disable-css branch January 25, 2021 18:03
cscharf pushed a commit that referenced this pull request Jan 25, 2021
* Darken light theme to comply with WCAG AA

* Adjust opacity on disabled

Color and/or opacity is used to delineate enabled vs disabled elements.
Both are required becaus some themes do not change color on disabled.
@kennymc-c
Copy link

kennymc-c commented Jan 27, 2021

The buttons are now correctly grayed out but the pointing hand still appears when I mouse-over. I noticed that this also happens with other items, e.g. if no password or card security code is assigned. Is it possible to fix this?

Edit: This seems to be fixed with 1.49.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Copy TOTP verification code button not grayed out in dark/nord theme and clickable
3 participants