Add support for a toolbar-input

[developit]

Add toolbar-input. I couldnt decide on markup for a generic input with inset icon. This at least partly addresses #14.

JSFiddle: http://jsfiddle.net/developit/aqu10kd9/ *

Preview:

Markup:

<label class="toolbar-input">
    <span class="icon icon-search"></span>
    <input type="search" class="form-control" placeholder="Search...">
</label>

* the zoom border effect is not included in this PR

[connors]

@developit Awesome! However, I don't think this feature should be specific to toolbars. Icon inputs should be a feature available anywhere in the application.

So the base markup structure should probably be something like:

<div class="form-icon-text-group form-group">
  <span class="icon icon-search"></span>
  <input type="search" class="form-control" placeholder="Search...">
</div>

Then the SASS could be something like:

.form-icon-text-group {
  position: relative;

  .icon {
    position: absolute;
    top: 4px;
    left: 10px;
    z-index: 1;
  }

  .form-control {
    padding-left: 25px;
  }
}

Lastly, to get things working in the toolbar, all you have to do is remove the .form-group class.

[developit]

Agreed regarding a generic solution. That markup works for me.

[szechyjs]

any updates on this?