WSE search

example of typography

by hxtpoe

HTML

<link rel="stylesheet" href="http://ui.ioki.pl/pe-bootstrap-lab-wse/_dist/wse/css/strap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container">
  <div class="row">
    <div class="page wse-typo-default-font-size col-md-4">
    <h1 id="typography" class="wse-typo-h1">Search Menu</h1>

    <div class="wse-input-group nse-whiteframe-6dp">
      <input class="wse-field" placeholder="What do you think?" />
    </div>
    
    <div class="wse-input-group nse-whiteframe-6dp">
      <div class="wse-input-addon">
      <i class="fa fa-picture-o"></i>
      </div>
      <input class="wse-field" placeholder="What do you think?" />
    </div>
    
    <div class="wse-input-group nse-whiteframe-6dp">
      <input class="wse-field" placeholder="What do you think?" />
      <div class="wse-input-addon">
        <i class="fa fa-picture-o"></i>
      </div>
    </div>
    
    <div class="wse-input-group nse-whiteframe-6dp">
      <div class="wse-input-addon">
        <i class="fa fa-tachometer"></i>
      </div>
      <input class="wse-field" placeholder="What do you think?" />
      <div class="wse-input-addon">
        <i class="fa fa-picture-o"></i>
      </div>
    </div>
</div>

   <div class="page wse-typo-default-font-size col-md-4">
    <h1 id="typography" class="wse-typo-h1">Search Menu</h1>

    <div class="wse-input-group">
      <input class="wse-field" placeholder="What do you think?" />
    </div>

    <div class="wse-input-group">
      <textarea class="wse-form-control" placeholder="What do you think?" ></textarea>
    </div>

    <div class="wse-input-group">
      <div class="wse-input-addon">
      <i class="fa fa-picture-o"></i>
      </div>
      <input class="wse-field" placeholder="What do you think?" />
    </div>
    
    <div class="wse-input-group">
      <input class="wse-field" placeholder="What do you think?" />
      <div class="wse-input-addon">
        <i...

SCSS

.wse-typo-default-font-size {
  font-size: 16px;
}
.wse-typo-bigger-font-size {
  font-size: 22px;
}
.wse-input-group {
  width: 300px;
  display: table;
  margin: 20px;
}

@mixin wse-form-control() {
  width: 100%;
  font-size: 1em;
  background-color: #EFEFEF;
  border: 0;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.625em;
  padding-bottom: 0.625em;
  
  &:focus {
     outline: none;
  }

}

.wse-form-control {
  @include wse-form-control();
}

@mixin wse-field() {
  border: 0;
  font-size: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.625em;
  padding-bottom: 0.625em;
  background-color: #EFEFEF;
  display: table-cell;
  width: 100%;  
}

@mixin wse-addon() {
  font-size: 1em;
  padding-top: 0.625em;
  padding-bottom: 0.625em;
  background-color:  #003359;
  text-align: center;
  display: table-cell;
  width: 2.5em;
}

.wse-input-addon {
  @include wse-addon();
  color: white;
  
  &:hover {
    color: white;
  }
}

.wse-field {
  @include wse-field();
  
  &:focus {
     outline: none;
  }
}

.box {
  padding: 15px;
}

.page {
  padding: 20px;
}