Foundation-sites: Disabled buttons are hoverable

[Vuurvlieg]

Disabled buttons should not be hoverable right? In v6.3.0 it is, see this example

[IamManchanda]

Yup specially success and warning !!
https://codepen.io/IamManchanda/pen/XpmrQB

[IamManchanda]

@ncoden

I am trying to solve this

before

@mixin button-disabled($color: $primary-color) {
  opacity: $button-opacity-disabled;
  cursor: not-allowed;

  &:hover, &:focus {
    background-color: $color;
    color: $button-color;
  }
}

and now after my code change

@mixin button-disabled($color: $primary-color) {
  opacity: $button-opacity-disabled;
  background-color: $color;
  color: $button-color;
  cursor: not-allowed;
}

But the output,

Although this disables hover and focus functionality but also
removes the black color from success and warning

I think i am missing a color-pick-contrast, a parameter and an @if statement so please help me out for the same

What i think the best way will be to apply the default background and color for these buttons
so how can we do that ?

[ncoden]

Look at how @mixin button-style is made. You want almost the same bahavior, except you do not want to apply a special style for :hover and :focus, but the default styles.

I think you have the following solutions:

• Apply all properties on the default state (like you started) and use @function color-pick-contrast like in @mixin button-style. It works with default classes because button[disabled] is declared after (scss/components/_button.scss:265, but what if it is used on the default state (specificity 0.0.0) of a button with :hover and :focus (specificity 0.1.0) declared after ? It would not work.
• Simply generate styles by using @mixin button-style but with your own "disabled" values, and add the missing properties (cursor and opacity).

What do you think ?

[Vuurvlieg]

@IamManchanda Thanks for trying to solve, any update?

[IamManchanda]

@Vuurvlieg i am very sorry .... i missed these comments ..... yup will try to solve now.... heartly sorry!

[IamManchanda]

@ncoden

I choosed first option and here is what i did to remove that specificity issue

@mixin button-disabled($color: $primary-color) {
  opacity: $button-opacity-disabled;
  cursor: not-allowed;
  background-color: $color;
  &:hover, &:focus {
    box-shadow:none;
  }
}

It works now. Is this ohk ?
{{ Looking for your's review/approval before PR }}

==> Although i am not sure about this box-shadow implementation ( via CSS Tricks )

---

Again i am very sorry @Vuurvlieg .... i simply missed this... my mistake

---

Update: There is no need to use that color-pick-contrast, as already in use so removed it!

[ncoden]

@IamManchanda Please open a PR if you want your code to be reviewed. It is made for that. To review code. You do not have to wait your code to be perfect.

Only publish code inside a comment if it is prototype / example / something without complete implementation.

I will review the code you provided on your PR. There is a lot of things to say. :)

[IamManchanda]

There is a lot of things to say. :)

This make me worried ...... :stuck_out_tongue_winking_eye: :laughing:
Ohk opening it!

[Vuurvlieg]

I see a lot of new comments (and PR), so thanks @IamManchanda and @ncoden for trying to solve this issue!

[IamManchanda]

FTFY #9648