EzFind initial

EzFind initial

by pj_js15

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
EzyFind components:

<div class="bg-gray">
  <h5>
    Buttons
  </h5>
  <button type="button" class="btn btn-primary ezfind-btn">Primary</button>
</div>

<div class="bg-gray">
  <h5>
    Dropdown with expanded options
  </h5>
  
  <div class="searchable-select">
    
  
    <select class="selectpicker" size="5">
      <option data-content="First Line<br>Second Line">Mustard</option>
      <option data-content="House Number Street<br>City, State<br>Zip Code">Ketchup</option>
      <option data-content="Single line address">Third <br /> AddressThird <br /> AddressThird <br /> Address</option>
    </select>
  </div>
</div>

<div class="bg-gray">
  <h5>
  Dropdowns
  </h5>
  <div class="dropdown show">
    <a class="btn btn-secondary dropdown-toggle ezfind-dropdown two-line" 
      href="#" role="button" id="dropdownMenuLink" 
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="color-gray">SEARCH</span> <br />REGO LOOKUP
        <i class="fa fa-angle-down"></i>
    </a>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else <br /> <span class="color-gray">here</span></a>
    </div>
  </div>
  
  <div class="dropdown show">
    <a class="btn btn-secondary dropdown-toggle ezfind-dropdown" 
      href="#" role="button" id="dropdownMenuLink" 
    ...

SCSS

:root {
  /* CSS variables */
  --brand-primary: #2F4887;
  
  --gray-base: #000;
  --gray-dark: #3F3F3F;
  --gray: #DBDBDB;
  --gray-light: #BBBACC;
  
  --white: #FFF;
  
  
  
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.bg-gray {
  background-color: #F5F8FA;
  border: 1px solid #CCC;
  color: #2F4887;
  padding: 15px 40px 50px 40px;
}

.ezfind-btn, .ezfind-btn:hover {
  background-color: #2F4887;
  border: 2px solid #FFF;
  border-radius: 18px;
  color: #FFF;
}

.color-gray{
  color: #9A9A9A;
}

/*
.ezfind-dropdown, .ezfind-dropdown:hover{
  background-color: #2F4887 !important;
  border: 2px solid #FFF !important;
  border-radius: 18px;
  color: #FFF;
}*/

.btn-secondary{
 .dropdown-toggle:focus{
    box-shadow: 0 0 0 0.2rem rgba(185, 207, 255, 1);
  }  
}

.dropdown{
  display: inline;    
  
  .dropdown-toggle.ezfind-dropdown, 
  .dropdown-toggle.ezfind-dropdown:hover{
    background-color: #FFF !important;
    border: 2px solid #2F4887 !important;
    border-radius: 12px;
    color: #353535;
    font-size: 15px;
    text-align: left;
    
    &.two-line{
      font-size: 12px;
    }
    &.two-line > i.fa{
      float: right;
      margin-top: -8px;
      margin-left: 10px;
    }
  }
  .dropdown-toggle.ezfind-dropdown:after { 
    display: none !important; 
  }
  //alternating rows
  a.dropdown-item{
    font-size: 12px;
    
    &:nth-child(even){
      background-color: #FFF;
    }
    &:nth-child(odd){
      background-color: #FAFBFA;
    }
  }
  
}

.recently-viewed-vehicle{
  background-color: #2F4887;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 5px 0 10px 10px;
    
    .info{
      //border: 1px solid white;
      color: #FFF;
      flex: 1 0 30%;
      padding: 5px;
      
      &.plate{
        flex: 0 0 130px;
      }
    }
    .info:first-child{
      flex: 1 0 100%;
      height: 35px;
    }
   
    .btn-close{
      cursor:...