PolicyGenius - Style Guide

Two Fields

.mod-two-fields
  .field
    label for='password1' Phasellus
    div
      input type='text' id='password1' placeholder='Curabitur et magna erat'
  .field
    label for='password2' Suspendisse Phasellus
    div
      input type='text' id='password2' placeholder='Curabitur et magna erat'
Vivamus dictum justo
.mod-two-fields.error
  .field
    label for='password1' Phasellus
    div
      input type='text' id='password1' placeholder='Curabitur et magna erat'
  .field
    label for='password2' Suspendisse Phasellus
    div
      input type='text' id='password2' placeholder='Curabitur et magna erat'
.error-message.visible  Vivamus dictum justo
.mod-two-fields
  .field
    label for='name' In rhoncus orci et
    div
      input type='text' id='name' placeholder='Ut scelerisque'
  .field
    label Pellentesque habitant
    .toggle
      .content
        label.toggler
          input type='radio' name='example1'
          span.button Nunc
        label.toggler
          input type='radio' name='example1'
          span.button Nulla
.mod-two-fields
  .field
    label for='name' In rhoncus orci et
    .selectbox
      select
        option selected='selected' disabled='disabled' Select your insurance
        option Life insurance
        option Renters insurance
        option Long-term disability insurance
  .field
    label Pellentesque habitant
    .toggle
      .content
        label.toggler
          input type='radio' name='example1'
          span.button Nunc
        label.toggler
          input type='radio' name='example1'
          span.button Nulla

Focus state

.mod-two-fields.focused
  .field
    label for='name' In rhoncus orci et
    div
      input type='text' id='name' placeholder='Ut scelerisque'
  .field
    label Pellentesque habitant
    .toggle
      .content
        label.toggler
          input type='radio' name='example1'
          span.button Nunc
        label.toggler
          input type='radio' name='example1'
          span.button Nulla

No border example

.example style='background: #00A4A5; padding: 24px;'
  .mod-two-fields.no-border
    .field
      label for='name' In rhoncus orci et
      div
        input type='text' id='name' placeholder='Ut scelerisque'
    .field
      label Pellentesque habitant
      .toggle
        .content
          label.toggler
            input type='radio' name='example1'
            span.button Nunc
          label.toggler
            input type='radio' name='example1'
            span.button Nulla