inform-el css variables

by juliendelort

HTML

<script src="https://unpkg.com/informel"></script>

<inform-el>
  <form>
    <label>
      First Name
      <inform-field>
        <input type="text" name="firstName" required pattern="^$"/>
      </inform-field>
    </label>
    <label>
      Last Name
      <inform-field>
        <input type="text" name="lastName" required pattern="^$"/>
      </inform-field>
    </label>
    <button type="submit">Submit</button>
  </form>
</inform-el>

<div id="result">

</div>

CSS

#result {
  margin-top: 10px;
}

label {
  display: block;
  margin-bottom: 20px;
}
body {
  background: #f6f8fa;
  font-family: arial;
  padding: 20px;
}


inform-el {
  --error-color: blue;
  --error-margin: 0 0 0 10px; 
  --error-display: inline-block;
  --error-font-size: 0.75rem;
  --error-font-family: 'courier new'
}

JavaScript

document.querySelector("inform-el").addEventListener("inform-submit", ({ detail: { values } }) => {
   document.querySelector('#result').textContent = JSON.stringify(values, null, '\t');
});