newtheatre/history-project

.people-index
  @include grid-wrap
  transition: margin-top $element-transition

.people-index__filters
  z-index: $zindex-content-toolbar

  label
    display: block

  span
    // Label text
    font-size: 0.8em
    text-transform: uppercase
    font-weight: bold
    opacity: 0.6

  .input-text, .input-select
    padding: $baseline / 4 $baseline / 8
    margin-bottom: $baseline / 2

    color: $color-white
    background-color: transparent

    border: none
    $border-bottom-normal: 1px
    $border-bottom-focus: 2px
    border-bottom: $border-bottom-normal solid $color-white

    // Animate bottom border focus change

    &:focus
      outline: none
      border-bottom-width: $border-bottom-focus
      margin-bottom: ($baseline / 2) + $border-bottom-normal - $border-bottom-focus

    option
      // Forces background on dropdown items, otherwise we get white text on
      // white background.
      background: darken($color-background-alt, 10%)

    .people-filter-all
      color: #aaa

.people-index__filters__primary
  background: darken($color-background-alt, 10%)

  display: flex

  .people-index__filters__name, .people-index__filters__toggle
    padding: $baseline / 4 $baseline / 4 0 $baseline / 4

  .people-index__filters__name
    flex: 1

  .people-index__filters__toggle
    width: 15%

    position: relative

    i
      display: block
      position: absolute
      top: 50%
      left: 50%
      margin: -8px 0 0 -8px

      transition: transform $element-transition

  .people-index__filters__toggle--open
    i
      transform: rotate(180deg)

.people-index__filters__more
  background: $color-background-alt

  display: flex
  flex-wrap: wrap

  transition: max-height 0.4s ease-out
  will-change: max-height

  label
    // 2 by (3) grid of selects
    width: 50%
    padding: $baseline / 4 $baseline / 4 0

// Style page for mobile, only include stuff that's effort to override
@include respond-down(mob-land)
  .body--people-index
    .site-header
      margin-bottom: 0

  .people-index__filters
    // Shadow on bottom of fixed filter bar
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3)

  .people-index__filters--fixed
    position: fixed
    top: 0

  // Animated drawer
  .people-index__filters__more
    max-height: 0px
    overflow: hidden

  $max-height-hack: 245.391px
  .people-index__filters__more--open
    // HACK, hard-coded max-height
    max-height: $max-height-hack
  .people-index--push
    // HACK, also a hack
    margin-top: $max-height-hack + $baseline / 2 !important

  .people-index
    margin-top: $baseline / 2

    li:nth-child(2n-1)
      padding-left: 0

// Style page for tablets and up
@include respond-up(tab-port)
  .people-index
    min-height: 600px

  .people-index__filters
    position: absolute
    width: 300px
    @include abs-left-wrap-pad(0px)

  .people-index__filters--fixed
    position: fixed
    top: $baseline

  .people-index__filters__primary
    .people-index__filters__toggle
      display: none

  .people-index__filters__more
    label
      // Full width on desktop
      width: 100%

  .people-index__results
    margin-left: 300px
    padding-left: $baseline / 2


.people-index__results
  ol
    @include list-unformatted

    display: flex
    flex-wrap: wrap

  li
    width: 50%
    @include respond-up(tab-land)
      width: 33.333%
    padding-left: $baseline / 2
    margin-bottom: $baseline / 2

  .people-result
    display: block
    background: rgba($color-background-alt,0.2)

    &:hover
      background: rgba($color-background-alt,0.8)
      text-decoration: none

  .person-headshot
    float: left
    width: 3em
    padding: 0.5em
    border-radius: 100px

  .person-name
    font-size: $base-font-size
    font-weight: normal
    padding: 0.5em
    line-height: 1.8em

.people-index__results__intro
  // Box with people section info shown before search is performed
  background: $color-brand-alt
  padding: $baseline / 2