initiatived21/d21

/*------------------------------------*\
    #HELP
\*------------------------------------*/

/**
 * Help box on new pledge form page
 *
 * 1. Align help box with top of h1 heading
 */

.c-help {
  margin-top: $spacing;
  margin-bottom: $spacing;

  border: 1px solid $primary-color-lighter;
  border-radius: $border-radius;

  color: $text-color;

  @include media-query(l) {
    margin-top: 3px;  /* [1] */
  }
}

.c-help__title {
  position: relative;

  margin-top: 0;
  padding: $spacing--small $spacing;
  @include font-size(22px, 1.5);
  font-weight: normal;
  color: $white;
  background-color: $primary-color-lighter;

  user-select: none;
}

.c-help__chevron {
  display: none;

  position: absolute;
  top: $spacing--small;
  right: $spacing;
}


.c-help__wrapper {
  margin: $spacing--small $spacing $spacing;
}

.c-help__subheading {
  margin-top: $spacing;
  @include font-size(15px, 1.5);
  font-weight: bold;
}

.c-help__faq {
  .fa {
    margin-top: 3px;
    margin-left: 0;
    margin-right: 7px;
    color: $primary-color;

    @include font-size(56px, 1);
  }

  h3 {
    @include font-size(21px, 1.5);
    font-weight: normal;
    color: $primary-color;
  }

  a {
    color: $text-color;
  }
}

.c-help--controls {
  .c-help__title {
    cursor: pointer;
  }

  .c-help__chevron {
    display: block;
  }
}

.c-help--closed {
  .c-help__title {
    margin-bottom: 0;
  }
  .c-help__wrapper {
    display: none;
  }
}