Skip to content

Add support for a toolbar-input#33

Open
developit wants to merge 1 commit into
connors:masterfrom
developit:inset-icons
Open

Add support for a toolbar-input#33
developit wants to merge 1 commit into
connors:masterfrom
developit:inset-icons

Conversation

@developit

Copy link
Copy Markdown
Contributor

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:

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

connors commented Oct 31, 2015

Copy link
Copy Markdown
Owner

@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

Copy link
Copy Markdown
Contributor Author

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

@szechyjs

szechyjs commented Dec 1, 2016

Copy link
Copy Markdown

any updates on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants