mysociety/alaveteli

/* Layout for pages in making a new request */

/* /select_authority page */
#authority_selection {
  max-width: 40em;

  #query {
    width: 80%;
    width: calc(100% - 6em); // leave space for floated #submit button
  }

  input[type="submit"] {
    float: right;
  }
}

.new_info_request{
  @include grid-row();
}

#select_authority_help {
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 3em;
  }
}

/* /new/[body_name] page */
#request_header {
  @include grid-row($behavior: nest);
  /* Restrict width of form elements on wide screens */
  #request_header_body, #typeahead_response {
    @include grid-column(12);
    @include respond-min( $main_menu-mobile_menu_cutoff ){
      @include grid-column($columns:8);
      @include ie8{
        padding-right: 0.9375em;
      }
      @include lte-ie7 {
        width: 36.813em;
      }
    }
  }
}

.to_public_body,
.from_user {
  display:block;
  margin-bottom:15px;
}

#typeahead_response .close-button {
  float: right;
}

.request_body {
  @include grid-row($behavior: nest);
}

.request_subject {
  input[type=text] {
    width: 100%;
  }
}

#request_body_header {
  @include grid-column(12);
}

/* Advice sits on right hand side */
#request_advice, .preview-advice {
  @include grid-column(12);
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    @include grid-column($columns:4, $push:8);
    @include ie8{
      padding-left: 0.9375em;
    }
    @include lte-ie7 {
      width: 17.438em;
    }
  }
}

#request_form {
  @include grid-column(12);
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    @include grid-column($columns:8, $pull:4);
    @include ie8{
      padding-right: 0.9375em;
    }
    @include lte-ie7 {
      width: 36.813em;
    }
  }
}

.js-loaded {
  #request_form_questions {
    label {
      font-size: 1.1em;
      padding-left: 20px;

      input[type="radio"] {
        // Margin-left: Prevents double line questions to have an uneven vertical alignment.
        // Margin-bottom: Fixes the large gap between a question with two lines.
        margin: 0 3px 0 -20px;
      }
    }
  }
  .request_form_response {
    display: none;

    &.request_form_response--focused { display: block; }
  }
}

.no-js {
  #request_form_questions { display: none; }

  .request_form_response {
    display: none;

    &.request_form_response--allow { display: block; }
  }
}

.request_deny_response {
  padding: 1em 1.5em;
}

#outgoing_message_body {
  width: 100%;
}

.message-text-length {
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    float: right;
  }
}

/* Message preview */
.message-preview {
  @include grid-row($behavior: nest);
}

.preview-pane {
  @include grid-column(12);
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    @include grid-column($columns:8, $pull:4);
    @include ie8{
      padding-right: 0.9375em;
    }
    @include lte-ie7 {
      width: 36.813em;
    }
  }

  .correspondence_text {
    padding-left: 0;
  }
}


/* Batch request page*/

div.batch_public_body_toggle {
  display:none;
}

#body_selection {
  @include grid-row($behavior: nest);
  /* Equal columns */
  .body_list {
    @include grid-column(12);
    @include respond-min( $main_menu-mobile_menu_cutoff ){
      @include grid-column(5);
    }
    @include lte-ie7 {
      width: 22.313em;
    }
  }

  select {
    height: inherit;
  }

  #body_candidates {
    float: left;
    @include ie8{
      padding-right: 0.9375em;
    }
  }

  #body_selections {
    float: right;
    @include ie8{
      padding-left: 0.9375em;
    }
  }

  input[type='submit'] {
    margin: 10px 0;
    width: 45%;
  }

  #body_select_all_button, #body_deselect_button {
    float: right;
  }

  #body_submission {
    input[type='submit'] {
      margin: 10px 0;
      width:100%;
    }
  }

  .select_all_button {
    display: none;
  }

  .body_select {
    width: 100%;
  }

}

.batch_public_body_list {
  margin-left: 110px;
}

/* Request sent page */
.request-sent-message {
  margin-top: 1em;
  h1 {
    font-size: 1.3em;
    margin-top: 0;
    @include respond-min( $main_menu-mobile_menu_cutoff ){
      font-size: 2em;
      margin-bottom: 1em;
    }
  }

  .share-link img {
    display:block;
    margin: 1em auto;
    @include respond-min( $main_menu-mobile_menu_cutoff ){
      display: inline-block;
      margin: inherit;
    }
  }

}

.request-sent-message__row {
  @include grid-row($behavior: nest);
}

.request-sent-message__column-1 {
  @include grid-column(12);
  margin-bottom: 1em;
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    @include grid-column($columns:8);
    margin-bottom: 0;
    @include ie8{
      padding-right: 0.9375em;
    }
    @include lte-ie7 {
      width: 36.813em;
    }
  }
}

.request-sent-message__column-2 {
  @include grid-column(12);
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    @include grid-column($columns:4);
    @include ie8{
      padding-left: 0.9375em;
    }
    @include lte-ie7 {
      width: 17.438em;
    }
  }
}

.form_button {
  .button {
    margin-right: 1em;
    margin-bottom: 0.5em;
  }
}