roolith css framework

Form

Basic form styles are give below - field comes with three sizes. By default all form fields are 100% width - so it's depends on container size. Form input's have default style, hover and focus style.

Name Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="form-field">
    <label for="exampleName1" class="form-label">Name</label>
    <input type="text" name="exampleName1" id="exampleName1" class="form-input" placeholder="e.g James smith">
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>

Email address Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Select country Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="form-field">
    <label for="exampleCountry1" class="form-label">Select country</label>
    <select name="exampleCountry1" id="exampleCountry1" class="form-select">
        <option value="US">United state</option>
        <option value="UK">United Kingdom</option>
    </select>
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>

Select multiple Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Upload photo Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="form-field">
    <label for="examplePhoto1" class="form-label">Upload photo</label>
    <input type="file" name="examplePhoto1" id="examplePhoto1" class="form-file">
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>

I agree with the terms and conditions Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium commodi ea aliquam nisi illo eligendi facere, iure voluptates recusandae, dolorum harum. Explicabo cum, libero molestias eaque debitis asperiores, sint ratione.

<div class="form-field">
    <label class="form-checkbox-label small"><input type="checkbox" class="form-check-input"> I agree with the <a href="">terms and conditions</a> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium commodi ea aliquam nisi illo eligendi facere, iure voluptates recusandae, dolorum harum. Explicabo cum, libero molestias eaque debitis asperiores, sint ratione.</label>
</div>

Select gender

Male Female No gender

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="form-field">
    <label class="form-label">Select gender</label>
    <div class="form-radio-items">
        <label class="form-radio-item"><input type="radio" name="gender1" class="form-radio"> Male</label>
        <label class="form-radio-item"><input type="radio" name="gender1" class="form-radio"> Female</label>
        <label class="form-radio-item"><input type="radio" name="gender1" class="form-radio" disabled> <span class="dimmed">No gender</span></label>
    </div>
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>

Select gender

Male Female No gender

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="form-field vertical">
    <label class="form-label">Select gender</label>
    <div class="form-radio-items">
        <label class="form-radio-item"><input type="radio" name="gender2" class="form-radio"> Male</label>
        <label class="form-radio-item"><input type="radio" name="gender2" class="form-radio"> Female</label>
        <label class="form-radio-item"><input type="radio" name="gender2" class="form-radio"> No gender</label>
    </div>
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>

Message Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="form-field">
    <label for="message" class="form-label">Message</label>
    <textarea name="message" id="message" class="form-textarea" placeholder="e.g Write something here!"></textarea>
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>

Default field Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Small field Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Large field Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Readonly field Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="form-field">
    <label for="default_size" class="form-label">Default field</label>
    <input type="text" name="default_size" id="default_size" class="form-input" placeholder="e.g Default field">
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>

<div class="form-field small">
    <label for="small_field" class="form-label">Small field</label>
    <input type="text" name="small_field" id="small_field" class="form-input" placeholder="e.g Small field">
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>

<div class="form-field large">
    <label for="large_field" class="form-label">Large field</label>
    <input type="text" name="large_field" id="large_field" class="form-input" placeholder="e.g Large field">
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>

<div class="form-field">
    <label for="disabled_field" class="form-label">Readonly field</label>
    <input type="text" name="disabled_field" id="disabled_field" class="form-input" placeholder="e.g Disabled field" readonly>
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>

Error style Your error message here!

Success style Any success message here.

Warning style Field is fine with some warning

<div class="form-field error"></div>
<div class="form-field success"></div>
<div class="form-field warning"></div>

Form horizontal

Name

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Email address

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="row">
    <div class="columns large-3">
        <label for="name1" class="form-label right">Name</label>
    </div>
    <div class="columns large-4">
        <div class="form-field">
            <input type="text" name="name1" id="name1" class="form-input" placeholder="e.g James smith">
            <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
        </div>
    </div>
    <div class="columns large-3 newrow">
        <label for="email1" class="form-label right">Email address</label>
    </div>
    <div class="columns large-4">
        <div class="form-field">
            <input type="email" name="email1" id="email1" class="form-input" placeholder="e.g james@example.com">
            <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
        </div>
    </div>
    <div class="columns large-4 large-offset-3 newrow">
        <button type="submit" class="button button-primary">Send message</button>
    </div>
</div>

Form primary style

Just add form-primary to form tag!

Email address

Password

<form action="" class="form form-primary">
// Your html here
</form>

Search field

<div class="form-field form-field-search small">
    <span class="form-field-search-icon"><i class="icon icon-search icon-small"></i></span>
    <input type="text" name="" class="form-input" placeholder="Search ...">
</div>

<div class="form-field form-field-search">
    <span class="form-field-search-icon"><i class="icon icon-search"></i></span>
    <input type="text" name="" class="form-input" placeholder="Search ...">
</div>

<div class="form-field form-field-search large">
    <span class="form-field-search-icon"><i class="icon icon-search"></i></span>
    <input type="text" name="" class="form-input" placeholder="Search ...">
</div>

Search field with loading state

<div class="form-field form-field-search loading">
    <i class="form-field-search-icon ion-search"></i>
    <input type="text" name="" class="form-input" placeholder="Search ...">
    <i class="form-field-search-loading-icon"></i>
</div>

Search field with loading and autocomplete state

<div class="form-field form-field-search loading hint">
    <i class="form-field-search-icon ion-search"></i>
    <input type="text" name="" class="form-input" placeholder="Search ...">
    <i class="form-field-search-loading-icon"></i>

    <div class="form-field-search-hint">
        <ul>
            <li><a href="#">Afganistan</a></li>
            <li><a href="#">Srilanka <span class="badge badge-info">new</span></a></li>
            <li><a href="#">Bangladesh</a></li>
            <li><a href="#">United state</a></li>
        </ul>
    </div>
</div>

If you're looking for tag implementation, then see this.

SASS

Reference from _form.scss

$form-input-radius: $global-border-radius !default;

:root {
    --r-form-input-placeholder-color: var(--r-color-light-lighten-30);
    --r-form-input-background-color: var(--r-color-dark);
    --r-form-input-color: var(--r-color-white);
    --r-form-input-border-color: var(--r-color-dark-lighten-5);
    --r-form-input-hover-border-color: var(--r-color-link);
    --r-form-input-focus-border-color: var(--r-color-primary);
    --r-form-text-color: var(--r-color-light-lighten-15);
    --r-form-checkbox-label-color: var(--r-color-dark-lighten-20);
    --r-form-disable-input-color: var(--r-color-light-lighten-5);
    --r-form-primary-color: var(--r-color-light-lighten-2);
    --r-form-primary-border-color: var(--r-color-light-lighten-5);
    --r-form-primary-hover-color: var(--r-color-info);
    --r-form-primary-focus-color: var(--r-color-white);
    --r-form-error-color: var(--r-color-danger);
    --r-form-success-color: var(--r-color-success);
    --r-form-warning-color: var(--r-color-info);
}