Bootstrap-Searchbar.markdown

Bootstrap Searchbar

Short SASS/HAML snippet in creating a simple searchbar

A Pen by Ace Subido on CodePen.

License.

index.haml

.container
  .row
    .col-md-12
      %h1 Bootstrap Searchbar
      %p.lead A very simple searchbar using Bootstrap, SASS and Bourbon.
  .row
    .col-md-6      
      .search-box
        %form.search-form
          %input.form-control{type: 'text', placeholder: 'ex: Ruby, Rails, Java, CSS, Javascript, Node, C#, SQL, etc.'}
          %button.btn.btn-link.search-btn
            %i.glyphicon.glyphicon-search
        
    
  

style.sass

@import "bourbon"
.container
  padding: 40px

.search-box
  display: inline-block
  width: 100%
  border-radius: 3px
  padding: 4px 55px 4px 15px
  position: relative
  background: #fff
  border: 1px solid #ddd
  @include transition(all 200ms ease-in-out)

  &.hovered,
  &:hover,
  &:active
    border: 1px solid #aaa

  input[type=text]
    border: none
    box-shadow: none
    display: inline-block
    padding: 0
    background: transparent

    &:hover,
    &:focus,
    &:active
      box-shadow: none

  .search-btn
    position: absolute
    right: 2px
    top: 2px
    color: #aaa
    border-radius: 3px
    font-size: 21px
    padding: 5px 10px 1px
    @include transition(all 200ms ease-in-out)

    &:hover
      color: #fff
      background-color: #8FBE00