18F/e-QIP-prototype

$breakpoints: (
  1225px: 0.08,
  1180px: 0.26,
  1145px: 0.18,
  1123px: 0.36,
  1060px: 0.46,
  1000px: 0.08,
  800px: 0.08,
  730px: 0.36,
  600px: 0.62,
  452px: 0.76
);

@keyframes openbox {
  0% {
    max-height: 0;
  }

  99% {
    max-height: 75vh;
  }

  100% {
    max-height: none;
    visibility: visible;
  }
}

@keyframes closebox {
  0% {
    max-height: 75vh;
  }

  100% {
    max-height: 0;
    padding-top: 0;
    visibility: hidden;
  }
}

.accordion {

  > .caption {
    display: block;
    padding: 1rem 10%;
    background-color: $color-white;
    border-bottom: solid 1px #e5e5e5;
    font-weight: 600;
    color: $eapp-grey-darker;

    .svg {
      height: 2.5rem !important;
      vertical-align: bottom;
      margin-right: 1rem;
    }
  }

  > strong {
    display: block;
    line-height: 5rem;

    /* For screen readers we want the text to be "navigatable"
       but for non-screenreaders do not display it */
    &.aria-description {
      opacity: 0;
      min-height: 0;
      max-height: 0;
    }
  }

  .item {
    background-color: $color-white;
    margin-top: 0.8rem;

    .details {
      line-height: 1.6;
      padding: 4rem;
      overflow: hidden;
      border: 3px solid $color-gray-lightest;
      border-top: none;

      @media all and (max-width: 980px) {
        padding: 2rem;
      }

      h2 {
        margin-top: 10rem;
      }

      > .close {
        display: block;
        text-align: right;
        padding: 1rem;
        cursor: pointer;
        text-decoration: none;
        margin-bottom: 2.2rem;
        width: 6rem;
        float: right;
        opacity: 1;
        transition: opacity 300ms ease-in;

        span {
          text-decoration: underline;
        }
      }
    }
  }

  .item:first-child {
    margin-top: 0;
  }

  .byline {
    width: 100%;
    padding: 1rem;
    border: 3px solid $color-gray-lightest;

    .incomplete {
      padding: 1rem 2rem;
      background: $eapp-red-lightest;
      border: 2px solid $eapp-red-light;
      border-radius: 6px;
      max-width: 64rem;
      line-height: 2.5rem;
      p {
        margin-bottom: 0;
      }
    }
  }

  .summary-container {
    background-color: $color-gray-lightest;
  }

  .summary {
    transition: color 0.3s;

    .left,
    .right {
      display: inline-block;
      position: relative;
      cursor: pointer;
      text-decoration: none;
      overflow: hidden;
      vertical-align: top;
      transition: color 0.3s;
      padding: 2rem .4rem 1rem;

      .button-with-icon {
        display: block;
        text-align: center;
        width: 7rem;
        border: none !important;
        top: -.5rem;
        position: relative;

        > * {
          display: block;
          line-height: 1;
        }
      }
    }

    .summary-item-content {
      .context {
        display: inline-block;
        max-width: 49%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: -.5rem;
        vertical-align: text-top;
        margin-left: .5rem;
      }
    }

    .left {
      width: 90%;
      color: #000;
      padding-left: 2.4rem;

      @media all and (max-width: 980px) {
        width: 80%;
      }

      .toggle {
        color: $eapp-blue;
      }

      .button-with-icon {
        float: right;
      }

      > a {
        text-decoration: none;
      }

      .dates {
        float: right;
      }

      // All but the first anchor
      > a:nth-child(n + 2) {
        display: block;
        padding-bottom: 1rem;
        padding-top: .25rem;
      }

      div {
        display: inline-block;
      }

      > span:nth-of-type(2) {

        > a > span:last-of-type,
        > span:last-of-type {

          > strong,
          > strong * {
            &.italic {
              font-style: italic;
            }

            p {
              margin-bottom: 0.3rem;
            }
          }

          &.has-content > strong,
          &.has-content > strong * {
            max-width: 40rem;
          }
        }

        > .dates {
          float: right;
          text-align: right;
        }
      }

      .svg.incomplete {
        height: 1.9rem;
        width: auto;
        margin-right: 1.5rem;
        margin-left: 0;
        margin-bottom: -.3rem;
      }

      &:hover {
        color: $eapp-blue;

        > span:last-of-type > span {
          text-decoration: underline;
        }
      }

      &:hover a {
        color: $eapp-blue;

        > span:last-of-type > span {
          text-decoration: underline;
        }
      }
    }

    .right {
      background-color: $color-gray-light;
      color: $color-white;
      float: right;
      width: 10%;

      @media all and (max-width: 980px) {
        width: 20%;
      }

      &:hover {
        background-color: $eapp-red;
      }
    }
  }

  .details.open,
  .details.close {
    &.animate {
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
    }
  }

  .details.open {
    &.animate {
      animation-name: openbox;
    }
  }

  .details.close {
    &.static {
      max-height: 0;
      padding-top: 0;
      visibility: hidden;
    }

    &.animate {
      animation-name: closebox;
    }
  }
}

.addendum {
  padding-top: 4.6rem;

  .add {
    margin: 0 !important;
  }
}

button.usa-button-outline {
  color: $eapp-blue;
  font-size: 1.8rem;
  font-weight: $eapp-bold;
  min-width: 20rem;
  box-shadow: inset 0 0 0 3px $eapp-blue;
  border-radius: 5px;
  padding: 1.7rem 2.3rem 1.7rem 2.3rem;
  background: #fff;
  margin: 3.4rem 10% -1.6rem 0;

  &:hover {
    color: #1a4c88;
    box-shadow: inset 0 0 0 3px #1a4c88, 0 1px 5px 0 rgba(0, 0, 0, 0.6);
  }

  i {
    margin-left: 1rem;
  }
}

.gap button.usa-button-outline {
  margin: 1rem 0;
}

@media screen and (max-width: 1000px) {
  .accordion .summary .summary-item-content .context,
  .accordion .summary .summary-item-content .dates {
    display: block;
    margin-left: 0;
    float: none !important;
    text-align: left !important;
  }
}

@media screen and (min-width: 1000px) {
  .accordion > .items > .item.sticky-accordion {
    .summary-container {
      .summary {
        z-index: 1001;
        box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.4);
        background-color: $color-gray-lightest;
        position: fixed;
        top: 6.7rem;

        .left.close,
        .left.open {
          transition: width 300ms ease-out;
          vertical-align: middle;

        }
      }
    }

    .details {
      /* Need to compensate for space used up by accordion row */
      padding-top: 8.6rem;

      > .close {
        opacity: 0;
        transition: opacity 300ms ease-out;
      }
    }
  }
}