conveyal/modeify

<div class="FilterView">
  <div class="time-filters">
    <select select-value="days">
      <option value="M—F">Mon-Fri</option>
      <option value="Sat">Saturday</option>
      <option value="Sun">Sunday</option>
    </select>
    <label class="date-text">from</label>
    <select select-value="start_time" select-options="startTimes" select-parse-value="parseInt"></select>
    <label class="date-text">to</label>
    <select select-value="end_time" select-options="endTimes" select-parse-value="parseInt"></select>
  </div>

  <div class="btn-group mode-filters">
    <button class="btn btn-default icon-train" data-active="train" title="Metro"><i class="fa fa-check-circle"></i></button>
    <button class="btn btn-default icon-bus" data-active="bus" title="Bus"><i class="fa fa-check-circle"></i></button>
    <button class="btn btn-default icon-car" data-active="car" title="Car"><i class="fa fa-check-circle"></i></button>
    <button class="btn btn-default icon-bike" data-active="bike" title="Bike"><i class="fa fa-check-circle"></i></button>
    <button class="btn btn-default icon-cabi" data-active="bikeShare" title="Capital Bikeshare"><i class="fa fa-check-circle"></i></button>
    <button class="btn btn-default icon-walk" data-active="walk" title="Walk"><i class="fa fa-check-circle"></i></button>
  </div>

  <button class="btn btn-default submit" title="Search">
    <i data-hidden="loading" class="fa fa-search"></i>
    <i data-visible="loading" class="fa fa-refresh fa-spin"></i>
  </button>

  <!-- settings -->
  <div class="ExpandedSettings">
    <button class="btn btn-dark btn-block ExpandedSettings-show" on-tap="showSettings">More Settings <i class="fa fa-chevron-down"></i></button>
    <button class="btn btn-dark btn-block ExpandedSettings-hide" on-tap="hideSettings">Hide Settings <i class="fa fa-chevron-up"></i></button>

    <div class="ExpandedSettings-bike">
      <i class="icon-bike ExpandedSettings-typeIcon"></i>
      <label>speed</label>
      <select select-value="bikeSpeed" select-options="bikeSpeeds" select-parse-value="parseInt" on-change="saveProfile"></select>
      <label class="label-text">max time</label>
      <input name="maxBikeTime" type="text" placeholder="min" data-value="maxBikeTime" on-change="save"></input>

      <div style='margin-left: 41px; margin-top: 5px;'>
        <label>traffic stress tolerance</label>
        <select select-value="bikeTrafficStress" select-options="bikeTrafficStressLevels" select-parse-value="parseInt" on-change="saveProfile"></select>
      </div>
    </div>
    <div class="ExpandedSettings-walk">
      <i class="icon-walk ExpandedSettings-typeIcon"></i>
      <label>speed</label>
      <select select-value="walkSpeed" select-options="walkSpeeds" select-parse-value="parseInt" on-change="saveProfile"></select>
      <label class="label-text">max time</label>
      <input name="maxWalkTime" type="text" placeholder="min" data-value="maxWalkTime" on-change="save"></input>
    </div>
    <div class="ExpandedSettings-drive">
      <i class="icon-car ExpandedSettings-typeIcon"></i>
      <label>parking $</label>
      <input name="carParkingCost" type="text" placeholder="$" data-value="carParkingCost" on-change="save"></input>
      <label>per mile $</label>
      <input name="carCostPerMile" type="text" placeholder="$" data-value="carCostPerMile" on-change="save"></input>
    </div>
  </div>
</div>