Search Interaction

by jayhilwig

HTML

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.red-cyan.min.css">
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- not working as external resource???-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


<div class="mdl-card mdl-shadow--2dp" style="height:400px">
  <div class="mdl-card__title">
    <span class=logo>Quora</span>
    <!-- Input right aligned -->
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label">
      <div class="mdl-textfield__expandable-holder">
        <input class="mdl-textfield__input" type="text" id="search-expandable2">
        <label class="mdl-textfield__label" for="search-expandable2">
          Search Topics or Answers
        </label>
      </div>
      <label class="mdl-button mdl-js-button mdl-button--icon alignRight" for="search-expandable2">
        <i class="material-icons">search</i>
      </label>
    </div>
  </div>
  <div class="mdl-card__supporting-text">
  </div>
  <div class="mdl-card__actions">
  </div>
</div>

<div style="height:24px"><!--spacer--></div>

<div class="mdl-card mdl-shadow--2dp" style="height:400px">
  <div class="mdl-card__title">
    <span class=logo>Quora</span>
    <!-- Input right aligned -->
    <form action="#" style="padding-left:132px">
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="sample3">
        <label class="mdl-textfield__label" style="font-size:11px" for="sample3">Search Topics or Answers</label>
      </div>
    </form>
  </div>
</div>

CSS

body {
  margin: 20px;
  background: white
}

.alignRight {
  position: absolute;
  left: 200px !important;
}

.alignRight2 {
  position: absolute;
  left: 120px !important;
  top: -2px !important;
}

.logo {
  color: rgb(244, 67, 54)
}