fieldset disabled styles

[samburgers]

Adds disabled styles for <fieldset disabled>

[stern-shawn]

👍
Would love to have this added. As it is now with Bulma, I'm having to manually assign the disabled attribute to all elements in a fieldset to ensure expected styling.

[samburgers]

Some further explanation to the pull request in hope to get it merged.

Example markup:

<fieldset disabled>
    <div class="field">
        <label class="label">
            Email
        </label>
        <p class="control has-icons-left">
            <input class="input" type="text" placeholder="Email">
            <span class="icon is-small is-left">
                <i class="fa fa-envelope-o"></i>
            </span>
        </p>
    </div>
    <div class="field">
        <label class="label">
            Password
        </label>
        <p class="control has-icons-left">
            <input class="input" type="password" placeholder="Password">
            <span class="icon is-small is-left">
                <i class="fa fa-lock"></i>
            </span>
        </p>
    </div>
    <div class="field is-grouped">
        <p class="control">
            <button class="button is-success">
                Sign In
            </button>
        </p>
        <p class="control">
            <button class="button">
                Login
            </button>
        </p>
    </div>
</fieldset>

Current behaviour:

<fieldset disabled> naturally disables form/button elements in all browsers, but they visually appear still active in Bulma:

Proposed change:

This pull request scaffolds the Bulma pre-existing disabled styles for inputs and buttons for when a surrounding <fieldset> element is set to disabled.

Tested with modifiers such as is-loading class:

Reasoning:

Disabling inputs on a fieldset level is handy for multi-step forms, and reactive view frameworks.

Caveats:

The <fieldset> element could also do with a border reset, which I have also submitted a pull request here:
jgthms/minireset.css#12

Alternatives:

All of this could be alternatively be managed with a .fieldset class to perhaps align a bit closer to Bulma conventions, however this could lead to confusion or misalignment with browser behaviour.

[jgthms]

I like it!

Can you:

• not build the CSS file
• update the Changelog
• add some documentation

Thanks.

[urin]

Also it may be better to modify disabled style of pagination.sass also.

[jgthms]

You forgot the comma on the previous line in each selector.

[samburgers]

Thanks, I just caught that too... pushing down a fix and also resetting the fieldset element. As for adding to the documentation, would you prefer a snippet example in the /forms/general page? Or a small snippet under each "Disabled" section on each form element page?

[jgthms]

Both! Since users might be reading one page or the other, but not both.

On the general page you can add a section called “Disabled forms” where you put a whole form.

On the other pages, just put a link to this new section (with an anchor) with the phrase “You can also disable an input/button/select… by placing it within a disabled form”.

Something like that. Also try to put it behind a flag (search for “vernum” in the docs).

If that’s too much, just put something here, I’ll take care of the rest.

Oh and update the change log please. Thanks! 👍

[diomed]

@samburgers do you plan to revisit and update this?

[samburgers]

Thanks for the bump, will revis this weekend!