KARMA CSS

Basic Form

Form elements carry some very simple styles just to make them feel consistent, all input and select elements by default are the same height as buttons. This way they can be placed next to each other without looking odd.

<form>
    <div class="row">
        <div class="col-md-6">
            <label>Your name</label>
            <input class="full-width" type="text" placeholder="Bilbo Baggins">
        </div>
        <div class="col-md-6">
            <label>Date of birth</label>
            <input class="full-width" type="date">
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <label>Your email</label>
            <input class="full-width" type="email" placeholder="[email protected]">
        </div>
        <div class="col-md-6">
            <label>Reason for contacting</label>
            <select class="full-width">
                <option value="">--------</option>
                <option value="Option 1">Questions</option>
                <option value="Option 2">Admiration</option>
                <option value="Option 3">Can I get your number?</option>
            </select>
        </div>
    </div>
    <label>Message</label>
    <textarea class="full-width" placeholder="Hi Dave …"></textarea>
    <label class="pull-right">
        <input type="checkbox">Send a copy to yourself
    </label>
    <input class="button button-primary" type="submit" value="Submit">
</form>

Variables

Every style we impose on a form input, select and textarea can be changed within the variables, this allows you to highly customise the end result without a single line of css:

// forms
$input-use-full-width:          false !default; // false = max-width:100%, true = width:100%
$input-background:              rgb(255, 255, 255) !default;
$input-border-radius:           $global-radius !default;
$input-border:                  1px solid $border-color !default;
$input-font-size:               1.5rem !default;
$input-font-color:              $font-color !default;
$input-padding-y:               1rem !default;
$input-padding-x:               1rem !default;
$input-margin-bottom:           1.5rem !default;

$input-background-focus:        $input-background !default;
$input-border-color-focus:      map-get($colors, primary) !default;

$label-font-weight:             600 !default;