kloh-fr / formage Goto Github PK

Right now width of fields is fixed at 100% in all case:

input,
button,
select,
textarea {
    padding: $form-input-padding;
    width: 100%;

But in some cases we don't want that (for instance if we use a select tag for a lang switcher).
The idea is to specify a 100% width only if we're in a form or a fieldset:

form,
.form,
fieldset,
.fieldset {
    input,
    button,
    select,
    textarea {
        width: 100%;
    }
}

Note: be careful with buttons.

Today only color can be modified:

border: 1px solid rgba( $form-border-color, .2 );

Todo: include complete declaration in the variable instead of color only.

If $form-is-select is false, there is no arrow at all on select tag.

Root cause is from the following lines:

/* Avoid browser applying its styles */
#{$form-fields},
#{$form-buttons} {
    -webkit-appearance: none;
    -moz-appearance: none;
}

To do: exclude select from $form-fields variable selector.

Comment them for now. They should better thought.