Skip to content

Commit

Permalink
Limit active disabled button styles to default button (#6744)
Browse files Browse the repository at this point in the history
* Remove upstream-patched disabled button styling

See: uswds/uswds#4077

* Limit active disabled button styles to default button

**Why**: Because the styling was only implemented with the expectation of use with the default button, and conflicts with other button states (e.g. unstyled buttons used as the submit buttons on some forms).

Previously: #6564

changelog: Improvements, Forms, Use pressed state appearance for buttons disabled on form submission
  • Loading branch information
aduth committed Aug 16, 2022
1 parent f7eab89 commit e52a20c
Showing 1 changed file with 3 additions and 13 deletions.
16 changes: 3 additions & 13 deletions app/assets/stylesheets/components/_btn.scss
Expand Up @@ -10,21 +10,11 @@
// of a link.
display: inline;
width: auto;

// Temporary: To be backported to design system. Unstyled buttons should not ever show the default
// opaque disabled background color. Typically a button would not be both disabled and active, but
// it is possible in some browsers when e.g. disabling a button in response to its own click.
&.usa-button:disabled:hover,
&.usa-button:disabled.usa-button--hover,
&.usa-button:disabled:active,
&.usa-button:disabled.usa-button--active,
&.usa-button:disabled:focus,
&.usa-button:disabled.usa-focus {
background-color: transparent;
}
}

.usa-button:disabled.usa-button--active,
.usa-button--disabled.usa-button--active {
@include set-text-and-bg('primary-darker', $context: 'Button');
&:not(.usa-button--unstyled, .usa-button--secondary, .usa-button--accent-cool, .usa-button--accent-warm, .usa-button--base, .usa-button--outline, .usa-button--inverse) {
@include set-text-and-bg('primary-darker', $context: 'Button');
}
}

0 comments on commit e52a20c

Please sign in to comment.