Avoid disabled depress

[rmm5t]

This gives the user a more consistent feedback experience when dealing with a disabled button. It also has the side effect of preventing a mis-colored inset when trying to press a disabled button.

For example, if I have a colored button that I want to appear gray when disabled, I might do something like this:

button
  +fancy-button(blue)
  &.disabled, &[disabled]
    +disable-fancy-button(gray)

This pull-request ensures that both the disabled button is no longer "pressable" and prevents a surprising blue inset color on a pressed, but grey, disabled button.

[jlong]

I've never seen the bracketed disabled syntax. Can you point me to some documentation?

[imathis]

Ryan, thanks for the patch, I think I'd rather approach this in a different way. Rather than disallow the buttons from being depressed when $fb-inset is true, I think it might be better to remove the box-shadow entirely. I'll have a look and see what makes sense.

John, the bracketed syntax is the attribute selector. You can select elements who have attributes like button[rel="cancel"] but you can also select all buttons where the rel attribute is defined, button[rel]. This is a way to select buttons where is set. The presence of the disabled attribute causes a button to be disabled and it need not be set to true or false in order for that to work.

[rmm5t]

Brandon, Ooh, good idea. +box-shadow(none) is simpler, cleaner, and actually looks better.

New branch here with that one-liner if it's easier for you in any way: https://github.com/rmm5t/fancy-buttons/commits/avoid-disabled-depress-2

[jlong]

Oh, cool. Didn't know that you could select without an operator like that. Nice.

[imathis]

This is in the latest gem release. v1.0.5 which you can get by doing gem install fancy-buttons

[rmm5t]

Brandon,

I just tried v1.0.5, but it doesn't look like preventing a disabled button press is in that release. Additionally, if you want your disabled buttons to have a different color than their enabled counterparts, the enabled color still shows through in the inset box-shadow. Here's an example of a disabled and depressed button:

This was generated with this sass:

button
  +fancy-button(red)
  &.disabled, &[disabled]
    +disable-fancy-button(gray)

[imathis]

Sorry, about that. It worked for my method, but I just used the global variable, I didn't test that mixin. Sorry about that, I'll put out another.

[imathis]

Ok, I've updated, fancy-buttons 1.0.6 should actually fix it.

[rmm5t]

Thanks Brandon!