Add :disabled rule to button css in Normalise/Reset

[chris-pearce]

In _normalise-reset.scss there's this declaration:

button,
html [type='button'], // [1]
[type='reset'],
[type='submit'] {
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-appearance: button; // [3]
    cursor: pointer; // [2]
}

If any of the above elements are disabled via the disabled attr then the cursor: not-allowed; rule from this declaration won't work:

:disabled {
    cursor: not-allowed;
    pointer-events: none;
}

As it is overridden by the cursor: pointer; rule.

Either review these rules or add this:

&:disabled {
    cursor: not-allowed;
}

So:

button,
html [type='button'], // [1]
[type='reset'],
[type='submit'] {
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-appearance: button; // [3]
    cursor: pointer; // [2]

    &:disabled {
         cursor: not-allowed;
    }
}

[chris-pearce]

I think it's best to just ditch:

:disabled {
    cursor: not-allowed;
    pointer-events: none;
}

As in most cases it won't apply due to specificity.

@DaveOrDead thoughts?

[chris-pearce]

I've added a new section to the CMDS settings as part of a CMDS PR:

/* 3. Disabled
   ========================================================================= */

/**
 * When an element is in a disabled state, typically applied via the `disabled`
 * attribute.
 */

$g-disabled-opacity: 0.6;

We could add another setting for cursor: not-allowed;? Or write it as a @mixin, e.g.:

@mixin disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[chris-pearce]

Closing, see #97.