PolicyGenius - Style Guide

Select Field

Simple Select Field

 
.mod-example
  .selectfield
    .field
      label for='select1' Nam metus
      .selectbox
        select id='select1'
          option Pellentesque habitant
          option Suspendisse id felis
          option Pellentesque habitant morbi

Simple Select Field with Placeholder

 
.mod-example
  .selectfield
    .field
      label Nam metus
      .selectbox
        select
          option value='' Aenean in lacus lacinia
          option value='1' Pellentesque habitant
          option value='2' Suspendisse id felis
          option value='3' Pellentesque habitant morbi

Select Field with Subheader

 
.mod-example
  .selectfield
    .field
      label for='select1'
        span Nam metus
        .sublabel Nam metus massa, tempor vel tortor et
      .selectbox
        select id='select1'
          option Pellentesque habitant
          option Suspendisse id felis
          option Pellentesque habitant morbi

Focus state

 
.mod-example
  .selectfield.focused
    .field
      label for='select1' Nam metus
      .selectbox
        select id='select1'
          option Pellentesque habitant
          option Suspendisse id felis
          option Pellentesque habitant morbi

Select Field with tooltip

 
.mod-example
  .selectfield
    .field
      .help.i-help
      label for='select1' Nam metus
      .selectbox
        select id='select1'
          option Pellentesque habitant
          option Suspendisse id felis
          option Pellentesque habitant morbi

Multicolumn selects

 
.mod-example
  .selectfield
    .field
      label for='select2' Nam metus
      .selectbox
        select id='select2'
          option Pellentesque habitant
          option Suspendisse id felis
          option Pellentesque habitant morbi
    .field
      label for='select3' Sed
      .selectbox
        select id='select3'
          option Pellentesque habitant
          option Suspendisse id felis
          option Pellentesque habitant morbi

Select2 Widget Example

 
.mod-example
  .selectfield
    .field
      label for='select2' Aenean ac bibendum nisi
      select.select2 id='select2'
        option disabled='disabled' selected='selected'
        option Pellentesque habitant
        option Suspendisse id felis
        option Pellentesque habitant morbi
        option Pellentesque habitant morbi Pellentesque habitant morbi Pellentesque habitant morbi
 
$('.select2').select2({
  placeholder: 'Aenean in lacus lacinia',
  dropdownAutoWidth: false,
  containerCssClass: 'policygenius-select2-container',
  dropdownCssClass: 'policygenius-select2-drop-down'
});
$(function() {
  $('select option').each(function() {
    var $this = $(this),
        $select = $this.parent();

    if ($this.index() == 0 && $this.val() == '') {
      $select.addClass('placeholder');
    }
  });

  $('select').on('change', function() {
    var $this = $(this);
    if ($this.val()) {
      $this.removeClass('placeholder');
    } else {
      $this.addClass('placeholder');
    }
  });
});

No-border version

 
.mod-example style='background: #00A4A5; padding: 24px;'
  .selectfield.no-border
    .field
      label for='select1' Nam metus
      .selectbox
        select id='select1'
          option Pellentesque habitant
          option Suspendisse id felis
          option Pellentesque habitant morbi