MapX search tool

Non functional mockup

by fxi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<div class="wrapper">
  <form class="form-group">
    <label>Text</label>
    <input  class="form-control" type="text" placeholder="Search Text">
    <label>Location</label>
    <input class="form-control" type="text" placeholder="Search Location">
    <label>Dates</label>
    <input  class="form-control" type="text" placeholder="Search date">
    <hr>
   
    <label>Results</label>
    <ul class="nested">
      <li>
        <label>Views</label>
        <ul>
          <li>Geology survey <button class="btn btn-default">Add</button></li>
          <li>Mining concesssions <button class="btn btn-default">Add</button></li>
          <li>Events <button class="btn btn-default">Add</button> </li>
          <li>EPT pseudo-absence <button class="btn btn-default">Add</button></li>
          <li>Overlap between zomes <button class="btn btn-default">Add</button></li>
          <li>Acled</li>
        </ul>
      </li>
      <li>
        <label>Project</label>
        <ul>
          <li>QWT Switzerland <button class="btn btn-default">open</button></li>
          <li>QWT hungary <button class="btn btn-default">open</button></li>
          <li>Test project <button class="btn btn-default">open</button></li>
        </ul>
      </li>
      <li>
        <label>Source</label>
        <ul>
          <li>Geology</li>
          <li>Conflict 2018</li>
          <li>WRT events</li>
        </ul>
      </li>
    </ul>
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
   ...

CSS

body {
  background: #B0F8FF;
  font-size: 10pt;
  font-family: sans-serif;
  color: #777;
}

.wrapper {
  transform: scale(0.8);
  width: 50%;
  margin: 10% auto;
  padding: 50px;
  border-radius: 10px;
  background: #fff;
}

ul.nested {
  list-style: none;
  margin: 0;
  padding: 5px 20px;
  width: 100%;
}

ul li {
  padding: 5px;
}

ul li ul {
  list-style: none;
  margin: 0;
  padding: 0 20px;
}

label {
  font: bold 12pt Arial;
}

label:hover {
  color: #FA6900;
  cursor: pointer;
}

ul li ul li:hover {
  color: #fff;
  cursor: pointer;
  background: #00BCD1;
  border-radius: 5px;
}

ul:not(.nested)>li {
  display: flex;
  justify-content: space-between;
}