Inline edit component

A component that displays an icon and an input field, but without all the input-field-border stuff and such.

Example

html

<form class="inline-edit">
    <label class="inline-edit__label">
        <i class="icon icon-edit inline-edit__icon inline-edit__icon--ready"></i>
        <i class="icon loader inline-edit__icon inline-edit__icon--loading"></i>
        <i class="icon icon-check inline-edit__icon inline-edit__icon--loaded"></i>
        <i class="icon icon-close inline-edit__icon inline-edit__icon--error"></i>
        <input class="inline-edit__input" type="text" autocomplete="off" placeholder="edit" title="Edit something...">
    </label>
</form>

Variables

$inline-edit-color (Color)

scss

$inline-edit-color: $body-font-color !default;

Color of the input text.

$inline-edit-placeholder-color (Color)

scss

$inline-edit-placeholder-color: color(medium-gray) !default;

Color of the placeholder text.

$inline-edit-icon-ready-color (Color)

scss

$inline-edit-icon-ready-color: $inline-edit-color !default;

Color of the ready icon.

$inline-edit-icon-loading-color (Color)

scss

$inline-edit-icon-loading-color: $loader-color !default;

Color of the loading icon.

$inline-edit-icon-loaded-color (Color)

scss

$inline-edit-icon-loaded-color: color(success) !default;

Color of the loaded icon.

$inline-edit-icon-error-color (Color)

scss

$inline-edit-icon-error-color: color(alert) !default;

Color of the error icon.

$inline-edit-font-size (Number)

scss

$inline-edit-font-size: rem-calc(14) !default;

Input font size.

$inline-edit-icon-font-size (Number)

scss

$inline-edit-icon-font-size: $inline-edit-font-size !default;

Icon font size.

$inline-edit-icon-width (Number)

scss

$inline-edit-icon-width: $inline-edit-icon-font-size * 1.75 !default;

Icon width.