FB - IA CMS Plugin Wizard Steps

by Paulo Ávila

HTML

<ol id="fb-ia-setup-wizard">
  <li>
    <div>
      <h4>First step</h4>
    </div>
  </li>
  <li>
    <div>
      <h4>2nd step</h4>
      <p>This step is a bit longer because it has many steps and is a little big more complicated than the rest.</p>
      </div>  
  </li>
  <li>
    <div>
      <h4>Last step</h4>
    </div>
  </li>
</ol>

CSS

#fb-ia-setup-wizard {
  padding: 0;
  list-style: none;
	counter-reset: fb-ia-setup-wizard-counter;
}
#fb-ia-setup-wizard li:hover {
  background-color: yellow;
}
#fb-ia-setup-wizard div {
  position: relative;
//  margin-left: 20px;
//  padding: 0 0 0 10px;
margin: 0 20px;
//  border: 1px solid black;
  border-left: 2px solid red;
//  border-bottom: 1px solid green;
}
#fb-ia-setup-wizard div:before {
  position: absolute;
  top: 10px;
  left: -15px;
  width: 1em;
  height: 1em;
  //margin-top: 10px;
  font-size: 18pt;
  font-weight: bold;
  text-align: center;
  border: 2px solid gray;
  border-radius: 50%;
  background-color: white;
  content: counter(fb-ia-setup-wizard-counter);
	counter-increment: fb-ia-setup-wizard-counter;
}
#fb-ia-setup-wizard li:first-child div:before {
  top: 0;
}
#fb-ia-setup-wizard li:first-child h4 {
  padding-top: 0;
}
#fb-ia-setup-wizard h4 {
  margin: 0;
  padding: 10px 0;
}
#fb-ia-setup-wizard h4,
#fb-ia-setup-wizard p {
  padding-left: 40px;
  margin: 0;
//border: 1px solid blue;
}

JavaScript

// https://www.firebase.com/docs/hosting/guide/