PolicyGenius - Style Guide

Checkbox List

Pellentesque habitant

Suspendisse id felis nulla. Nulla facilisi. Mauris pharetra augue ac arcu dapibus aliquam.

 
.mod-example
  .checkbox-list
    .header
      h4 Pellentesque habitant
      p Suspendisse id felis nulla. Nulla facilisi. Mauris pharetra augue ac arcu dapibus aliquam.
    .content
      label.checkbox
        input type='checkbox' checked='checked'
        span Nunc mattis diam libero
      label.checkbox
        input type='checkbox' checked='checked'
        span Pellentesque habitant morbi
      label.checkbox
        input type='checkbox' disabled='disabled' checked='checked'
        span Fringilla
      label.checkbox
        input type='checkbox' disabled='disabled'
        span Sed lobortis et quam at
      label.checkbox
        input type='checkbox' checked='checked'
        span Donec lobortis dui
      label.checkbox
        input type='checkbox' checked='checked'
        span Mauris tristique

Deselect all

Have you ever been treated for or taken medication for any of the following?

 
.mod-example
  .checkbox-list
    .header
      h4 Have you ever been treated for or taken medication for any of the following?
    .content
      label.checkbox
        input type='checkbox'
        span High Sed lobortis
      label.checkbox
        input type='checkbox'
        span High Suspendisse
      label.checkbox
        input type='checkbox'
        span Pellentesque
      label.checkbox
        input type='checkbox' checked='checked'
        span Cras egestas
      label.checkbox
        input type='checkbox' checked='checked'
        span Quisque
      label.checkbox
        input type='checkbox'
        span Nullam
      label.checkbox
        input type='checkbox'
        span Maximus tincidunt
      label.checkbox
        input type='checkbox'
        span Nulla vitae
    .footer
      label.checkbox
        input type='checkbox' data-deselect-all=''
        span Nam metus massa, tempor vel tortor
 
$('.content input').on('change', function() {
  $deselectAll = $(this).parents('.content').next().find('input[data-deselect-all]');
  if ($deselectAll.is(':checked')) {
    $deselectAll.prop('checked', false);
  }
});

$('input[data-deselect-all]').on('change', function() {
  var $all = $(this).parents('.footer').prev().find('input:checked');
  if ($(this).is(':checked')) {
    $all.each(function() {
      $(this).prop('checked', false);
    });
  }
});

Focus state

Pellentesque habitant

Suspendisse id felis nulla. Nulla facilisi. Mauris pharetra augue ac arcu dapibus aliquam.

 
.mod-example
  .checkbox-list.focused
    .header
      h4 Pellentesque habitant
      p Suspendisse id felis nulla. Nulla facilisi. Mauris pharetra augue ac arcu dapibus aliquam.
    .content
      label.checkbox
        input type='checkbox' checked='checked'
        span Nunc mattis diam libero
      label.checkbox
        input type='checkbox' checked='checked'
        span Pellentesque habitant morbi
      label.checkbox
        input type='checkbox' disabled='disabled' checked='checked'
        span Fringilla
      label.checkbox
        input type='checkbox' disabled='disabled'
        span Sed lobortis et quam at

No-border version

Pellentesque habitant

Suspendisse id felis nulla. Nulla facilisi. Mauris pharetra augue ac arcu dapibus aliquam.

 
.mod-example style='background: #00A4A5; padding: 24px;'
  .checkbox-list.no-border
    .header
      h4 Pellentesque habitant
      p Suspendisse id felis nulla. Nulla facilisi. Mauris pharetra augue ac arcu dapibus aliquam.
    .content
      label.checkbox
        input type='checkbox' checked='checked'
        span Nunc mattis diam libero
      label.checkbox
        input type='checkbox' checked='checked'
        span Pellentesque habitant morbi
      label.checkbox
        input type='checkbox' disabled='disabled' checked='checked'
        span Fringilla
      label.checkbox
        input type='checkbox' disabled='disabled'
        span Sed lobortis et quam at