PolicyGenius - Style Guide

Date Field

.mod-example style='max-width: 600px;'
  .date-field
    label Date of birth
    .field
      .selectbox
        select
          option selected='selected' disabled='disabled' Month
          option January
          option February
          option March
          option April
          option May
          option June
          option July
          option August
          option September
          option October
          option November
          option December
      .selectbox
        select
          option selected='selected' disabled='disabled' Day
          option 1
          option 2
          option 3
          option 4
          option 5
          option 6
          option 7
          option 8
          option 9
          option 10
      input type='text' placeholder='Year (YYYY)' maxlength='4'
.mod-example style='max-width: 600px;'
  .date-field
    label Date of birth
    .field
      .selectbox
        select
          option selected='selected' disabled='disabled' Month
          option January
          option February
          option March
          option April
          option May
          option June
          option July
          option August
          option September
          option October
          option November
          option December
      .selectbox
        select
          option selected='selected' disabled='disabled' Day
          option 1
          option 2
          option 3
          option 4
          option 5
          option 6
          option 7
          option 8
          option 9
          option 10
      .selectbox
        select
          option selected='selected' disabled='disabled' Year
          option 2016
          option 2015
          option 2014
          option 2013
          option 2012
          option 2011
          option 2010
          option 2009
          option 2008
          option 2007
.mod-example style='max-width: 600px;'
  .date-field
    label Choose Date
    .field
      .selectbox
        select
          option selected='selected' disabled='disabled' Month
          option January
          option February
          option March
          option April
          option May
          option June
          option July
          option August
          option September
          option October
          option November
          option December
      .selectbox
        select
          option selected='selected' disabled='disabled' Year
          option 2016
          option 2015
          option 2014
          option 2013
          option 2012
          option 2011
          option 2010
          option 2009
          option 2008
          option 2007

Focus state

.mod-example style='max-width: 600px;'
  .date-field.focused
    label Date of birth
    .field
      .selectbox
        select
          option selected='selected' disabled='disabled' Month
          option January
          option February
          option March
      .selectbox
        select
          option selected='selected' disabled='disabled' Day
          option 1
          option 2
          option 3
      input type='text' placeholder='Year (YYYY)' maxlength='4'
.mod-example style='background: #00A4A5; padding: 24px; max-width: 648px;'
  .date-field.no-border
    label Date of birth
    .field
      .selectbox
        select
          option selected='selected' disabled='disabled' Month
          option January
          option February
          option March
      .selectbox
        select
          option selected='selected' disabled='disabled' Day
          option 1
          option 2
          option 3
      input type='text' placeholder='Year (YYYY)' maxlength='4'