CSS Dialog Form Skin

To simplify the HTML structure of a dialog form, we can:

• limit the use of containers,

• use <br> for spacing,

• use utility classes sparingly,

• use CSS nesting for a consistent dialog form style.

index.html

<dialog open>
  <form method="dialog" data-ref="form" class="wg-form-skin1">
      [l 'Activity Name' for="i1"]
      [in type="text" name="name" placeholder="Short activity" .flex-1 #i1]
      [br]
  
      [l 'Target Time' for="i3"]
      [in type="text" name="timer" #i3 .flex-1] 
      [small 'e.g. 1h30m, 20m, 180m, etc.' .opacity-50]
      [br]
      [br]
      
      [ .flex .justify-end .gap-50
        [btn 'OK' value="ok"]
        [btn 'Cancel']
      ]
  </form>
</dialog>

style.css

.wg-form-skin1 {
  br{
    content: '';
  }
  br::after{
    content: '';
    padding-bottom: 0.6rem;
    display: block;
  }
  label{
    font-weight: bold;
    font-size: 0.95rem;
    padding-bottom:0.4rem;
    display: inline-flex;
  }
  input + small {
    display: inline-flex;
    padding-top: 0.2rem;
  }
  input{
    width: 100%;
    font-size: 1rem;
    padding: 0.4rem 0.6rem;
  }
}