pq.scss

@import "colours";
@import "design-patterns/alpha-beta";

$phase:live;
$success-colour: $button-colour;
$notice-colour: $govuk-blue;
$danger-colour: $error-colour;

//==============================================================================
// = Global Elements ===========================================================
//==============================================================================


body, main {
  font-size: 1.9rem;
  line-height: 1.3;
  color: $text-colour;
}

h1 {
  font-family: "nta",Arial,sans-serif;
  font-size: 28px;
  font-weight: bold;
  margin: 0;
  padding: 20px 0 10px;
}

h2 {
  font-size: 24px;
  font-family: "nta",Arial,sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 15px 0;
}

h3 {
  font-size: 1.9rem;
  font-weight: normal;
  font-family: "nta",Arial,sans-serif;
  color: #555;
  margin: 10px 0 0 0;
}

h4 {
  font-size: 1.9rem;
  font-weight: normal;
  color: $text-colour;
}

p { margin: 0 0 6px 0; }

textarea { resize: none; }

hr {
  color: $border-colour;
  height: 1px;
}

ul, nav ul {
  list-style-type: none;
  list-style: none;
  padding-left: 0;
}

footer {
  margin-top: 100px;
  a { text-decoration: underline; }
}

label {
  display: block;
  font-weight: normal;
  //clear: both;
}

//==============================================================================
// = GLOBAL CLASSES ============================================================
//==============================================================================

#contentOuter { margin: 0 auto; max-width: 960px; }

.row { margin: 0; }

.open { color: $page-colour; }

// == symbols =====

.fa-times-circle { color: $error-colour; }
.fa-warning { color: $error-colour; }

.fa-envelope {
  color: $page-colour;
  margin-left: 4px;
}
.fa-exclamation-triangle {
  color: $error-colour;
  margin-left: 5px;
}

.dropdown-menu li a:hover, .dropdown-menu li a:focus { background-color: $yellow;  }

.block-label:hover, .js-enabled .selected { border-color: $text-colour; }
.js-enabled .selected { background-color: $page-colour; }
.questions-list li { border-color: $border-colour; }
.progress-menu-form { border-color: #c2c2c2; }
.block-label { border-color: $panel-colour; }


#wrapper {
  max-width: 1024px; // width and alignment are unspecified in gov.uk_template
  margin-left: auto;
  margin-right: auto;
  border-bottom: none; // remove blue bar at bottom added by moj_template
  padding: 0 32px; // align to width of content
}

/*
  both gov.uk_template and moj_template add a hover underline.
  Until moj_template's border bottom is fixed
  (https://github.com/ministryofjustice/moj_template/pull/55) we need to cancel it.
*/

#global-header.with-proposition .header-wrapper .header-proposition #proposition-name:hover {
  border-bottom: none;
}

// only visible on the staging server to warn that it is not the live system
.staging_banner {
  background-color: $red;
  text-align: center;
  padding: 1em;
  height: auto;
  color: white;
  font-weight:bold;
}

// override gov.uk-template visited links colours,
// as this is an application, rather than a simple web page
@media screen {
  a:visited {
    color: $link-colour;
  }
}

button.close {
  float: none;
  margin: 0.5em;
}

.flag {
  border: 1.5px solid;
  font-weight: bold;
  font-size: 1.5rem;
  padding: 3px 5px;
  text-align: center;
  white-space: nowrap;
  margin: 0 10px 0 0;
  color: white;
  &.no-response { background-color: #f47738; color: #000; }
  &.accepted { background-color: #144D48; }
  &.answered { background-color: #006435; }
  &.draft-pending { background-color: #445729; }
  &.minister-cleared { background-color: #c1a87e; color: #000; }
  &.pod-cleared { background-color: #a1a8ff; color: #000; }
  &.rejected { background-color: #970214; }
  &.unassigned { background-color: #890BA2; }
  &.with-minister { background-color: #624B22; }
  &.with-pod { background-color: #2e358b; }
  &.transferred-out { background-color: #931F55; }
  &.transferred-in { background-color: #4F4F4F; }
}

//found in assignment/show and shared/_allocation_list
.strong { font-weight: 700; }

#pages,
.select2-container-multi .select2-choices li { width: 100%; }

a.button:hover,
a.button-secondary:hover { text-decoration: none; }
button, input[type="submit"] {
  &.link {
    background: none !important;
    border: none;
    padding: 0 !important;
    cursor: pointer;
    color: $link-colour;
    text-decoration: underline;
  }
}

.inline { display: inline-block; }

.select2-arrow {display:none!important;}
li.select2-search-field {border-bottom: none;}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { border-radius: 0px; }
.select2-container--default.select2-container--focus .select2-selection--multiple { border: 1px solid #aaa; }

.select2-results__option { min-height: 2em; }

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #4c2c92; }

.question-allocation-list {
  list-style: none;
  margin-bottom: 1em;
  li {
    margin: 0.8em 0 0.8em 1.2em;
  }
}

.allocation-info .button { margin: 30px 0 0 0; }

#pq-columns {
  .date.datetimepicker, p, select, hr, label.block-label {
    margin: 0 0 20px 0;
  }
}

//= Forms ====

.form-group.inline {
  .block-label {
    margin: .5em .5em 0 0;
    &:last-child { margin-right: 0; }
  }
}

textarea.form-control {
  width: 66%;
  min-width: 246px;
}

.form-control:focus  { border-color: $yellow; }

.form-group {
  clear: both;
  margin: 0 0 20px 0;
  .block-label { margin: 0 0 20px 0; }
}

.form-control,
.form-group select {
  border-style: solid;
  border-radius: 0;
  width: auto;
  height: auto; // override bootstrap
}

.form-control:focus,
.form-group select:focus {
  border-width: 3px;
  box-shadow: none;
}

.js-enabled .add-focus { outline-color: $yellow; }
.js-enabled .add-focus { outline: 3px solid $yellow; }

.block-label {
  display: block;
  float: none;
  clear: left;
  position: relative;
  border: 1px solid;
  padding: 18px 30px 15px 45px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  background-color: $panel-colour;

  input {
    position: absolute;
    top: 18px;
    left: 15px;
  }

  .inline & {
    clear: none;
    margin-right: 15px;
  }

  .js-enabled & {
    input:focus {
      outline: none;
    }
  }

  @media (min-width: 641px) {
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

// on all the "return to..." links
.admin-link {
  display: block;
  margin: 7.5px 0;
}

/* found in confirmation and assignment pages*/
.space-before { margin-top: 15px; }
.space-before-20 { margin-top: 20px; }
.space-before-30 { margin-top: 30px; }


// when printing pages, remove interactive components
@media print {
  .trim_area, .button, .button-secondary, td.edit { display: none; }
}

/* ============================================================================== */
/* ========= Components ========================================================= */
/* ============================================================================== */


// = linear list of questions (found on dashboard and filter views) =============

#select-all-questions {
  padding: 0;
  label {
    max-width: 655px;
    padding: .5em 0;
    border-bottom: 2px solid $grey-2;
    input[type="checkbox"] {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
  }
}

#count {
  max-width: 655px;
  background-color: $highlight-colour;
  padding: .7em 0 .7em .7em;
  border-left: 5px solid $border-colour;
  margin: .5em 0;
}

.questions-list {
  padding: 0 0 20px;
  > li {
    list-style: none;
    border-bottom: 2px solid $grey-2;
    padding: 30px 0 30px 0;
  }
  .pq-question {
    margin: 0;
    padding: 20px 0 0 0;
  }
  .status-bar {
    line-height: 32px;
    margin-bottom: 26px;
    padding: 0;
  }
  .pq-columns .col-md-7 { padding-left: 0; }
  .pq-inline-form { display: inline!important; }

  [aria-disabled="true"] {
    opacity: 0.5;
  }
}

.pq-header {

  .col-md-5 { padding: 0 0 5px 0; overflow: hidden; }

  h2 { padding-top: 0; }
  label.pq-select {
    input[type="checkbox"] {
      width: 24px;
      height: 24px;
      margin-right: 10px;
      float: left;
    }
    span {
      float: left;
      padding-top:5px;
    }
  }
}

.propose-links {
  padding-top: 1rem
}
.question-proposed {
  color: #555;
  font-size: 1.6rem;
  text-align: right;
}

.question h2 {
  color: #555;
  font-weight: bold;
}

.question-type {
  margin-left: 7px;
}

// = Alert messages ============================================================

@mixin alert($colour)
{
  margin-top: 20px;
  margin-bottom: 20px;
  border-left: 4px solid $colour;
  padding:15px;
  ul {
    margin-left: 0;
    padding-left: 1em;
  }
}

.pq-msg-success { @include alert($success-colour); }
.pq-msg-notice { @include alert($notice-colour); }
.pq-msg-error, .pq-msg-warning { @include alert($danger-colour); }

// = Date-time pickers =========================================================

.datepicker, .datetimepicker {
  border-radius: 0;
  border: 1px solid $border-colour;
  display: inline-block;
  width: 20rem;
  input {
    display: inline;
    width: 86%;
    border: none;
  }
}

// override jquery.date picker's colours to match the rest of the page
.xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
  background-color: $yellow!important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
  background-color: #2B8CC4!important;
}

.fa-calendar {
  cursor: pointer;
}

// Tables on setting pages (ministers, action officers, etc.) =========
.table {
  clear: both;
  thead tr th, tbody tr td {
    padding-left: 0; // bootstrap override
    font-size: 1.6rem;
  }
}

// specific columns
#admin-status { width: 100px; }
#minister-name { width: 30%; }

// = Button bar on some settings pages (action officers, etc.) =========
#admin-button-bar {
  float: right;
  margin-bottom: 10px;
  list-style-type: none;
  li {
    display: inline;
    margin-left: 25px;
  }
}

@media screen and (max-width: 641px) {
  #admin-button-bar {
    float: none;
    li {
      display: block;
      margin: 5px 0 18px;
    }
  }
}

// = Allocation rejection control ==================================================
/* used to show/hide allocation rejections*/
.question-allocation-list details .panel-indent {
  border-left: 5px solid #eee;
  padding-left: .5em;
  margin-top: .5em;
}

/* = New / In Progress Tabs ===================================================== */

.nav-tabs {
  margin-bottom: 20px; // spacing under horizontal tabs

  &.nav-stacked {
    border-bottom: 0; // no thin line under vertical tabs
  }
}

/* = Tab component ================================================================ */

// override bootstrap and make tabs work without JS

// without js, show all panes on the page
.tab-content > .tab-pane { display: block; }

// with js, all panes are invisible by default...
.js-enabled .tab-content > .tab-pane {
  display: none;
}

// override bootstrap and make tabs work without JS

// without js, show all panes on the page
.tab-content > .tab-pane { display: block; }

// with js, all panes are invisible by default...
.js-enabled .tab-content > .tab-pane {
  display: none;
}

// ... except the active one
.js-enabled .tab-content > .tab-pane.active {
  display: block;
}

/* = Pagination ================================================================= */

#pages {
  clear: both;
  display: block;
  width: 100%;
  margin: 0 15%;
}

.pagination > li > a,
.pagination > li > span {
  border-top: 0;
  border-bottom: none;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-radius: 0;
  border-right: 0;
}

/* ============================================================================== */
/* ========= Specific pages ===================================================== */
/* ============================================================================== */

/* = Dashboard page (/dashboard) ============================================ */

#dashboard, #preview {

  h2 {
    font-weight: bold;
  }

  // errors that show when commissioning failed
  .commissioning-error-message {
    display: none;
    color: $error-colour;
    padding: 1em 0 0 2em;
  }

  .form-commission { margin-bottom: 20px;
    padding: 20px 0 0 0;
    .col-md-7, .col-md-5 { padding-left: 0; }
    p { padding: 10px 0; }
  }

  .select2-search-choice div { line-height: 1em; }

}

/* = PQ Details Page (/pqs/[uin]) ============================================ */

#pq-details {

  h1 { display: inline-block; }

  #pq-details-progress { margin-left: 26px; }

  ul.nav-tabs li a {
    outline: 0;
    color: $text-colour;
  }

  // remove firefox's dotted line
  select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 black;
  }

  #pq-detail-area {
    margin-top: 15px;

    nav {
      z-index: 1;
      padding: 0;

      li.active a {
        border: 1px solid #c2c2c2;
        border-right: 0;
        border-radius: 6px 0 0 6px;
        background-color: #fff;
        @media screen and (max-width: 991px) {
          border-radius: 6px;
          border: 1px solid #c2c2c2;
        }
      }

      li a:link, li a:visited {
        color: black;
      }

      li a:focus {
        background-color: $yellow;
      }
    }

    #progress-panel {
      margin: 0;
      padding: 0;

      #choices {
        background-color: $light-blue;
        color: $page-colour;
        box-shadow: 0 2px 0 darkblue;
      }
      .button-cancel {
        margin: .5em .5em 0 0;
      }
      .progress-menu-form {
        border: 1px solid #c2c2c2;
        padding: 15px 15px 15px 30px;
        margin-left: -1px;
        min-height: 350px;
      }
      #progress-menu-fc-data .status {
        margin-bottom: .5em;
      }
    }
  }

}

/* = Report pages (/reports/...) ================================================ */

#filter-report {

  .col-md-9 { padding: 0; }
  .col-md-3 select{ width: 100%; }
  .button-secondary { float: right; margin-top: 10px; }
}

#minister-report,
#press-desk-report {
  table td {
    padding-top: 10px;
    padding-bottom: 13px;
  }
  .table-cell-centered { text-align: center; }
}

/* = Settings (/admin) ====================================================== */

#settings-home {
  h2 {
    border-bottom: 2px solid $panel-colour;
    padding-bottom: 7.5px;
    display: block;
  }

  ul li a {
    margin: 2px 0;
    padding: 3px 0;
    display: inline-block;
  }

  .col-md-4 {
    padding-left: 0;
    padding-right: 32px;
  }
}

/* = Early bird preview (/early_bird/preview) ================================ */

#earlybird-preview {
  h2 {
    margin: 20px 0 10px 0;
    font-weight: bold;
  }
  h3 {
    font-weight: bold;
    margin: 20px 0 10px 0;
  }
}

/* = Filter sidebar ========================================================== */

#dashboard, #preview {

  #sidebar {
    padding: 0;
    h2 {
      font-size: 1.9rem;
      padding: 0;
    }
    input[type="button"]{
      padding-left: 0;
      border: none;
      color: $link-colour;
      background-color: $page-colour;
    }

    #quick-links, #filters {
      margin: 7.5px 0;
      .filter-box {
        padding: 4px 8px;
        background-color: $panel-colour;
        margin: 8px 0;
        .collapsed { display: none; }
      }
      .datepicker, .datetimepicker {
        background-color: $white;
        width: 100%;
      }
      .form-control:focus {
        outline: 3px solid -webkit-focus-ring-color;
        border-radius: 1px;
      }
      .form-control:focus::placeholder {
        color: #0b0c0c;
      }
      .button-area {
        width: 100%;
        display: block;
        padding: 8px 0;
      }
      input[type="button"]:focus{
        background-color: $yellow;
        outline: 5px auto -webkit-focus-ring-color;
        border-radius: 1px;
      }
    }

    #quick-links {
      padding-bottom: 9px;
      border-bottom: 2px solid $grey-2;
      input[type="submit"] { margin: 0 10px 5px 0; }
      form { margin: 8px 0; }
      .form-label { font-size: 1.9rem;}

      #editDates .content{
        padding-bottom: 10px;
        margin-bottom: 22px;
        border-bottom: 2px solid $grey-2;
      }
      .content {
        .notice {
          background: $grey-4;
          border-left: 5px solid $grey-2;
          margin: 15px 0;
          padding: 0.7em 0 0.7em 0.7em;
        }
      }
      .collapsed {
        display: none;
        hr {
          height: 1px;
          background: #d2d3d5;
        }
      }
    }

    #filters {
      .filter-box {
        padding: 4px 8px;
        background-color: $panel-colour;
        margin: 0.5em 0;

        legend {
          padding: 0;
          font-weight: normal;
          font-size: 1.9rem;
        }
        input {
            font-size: 1.9rem;
        }
        .notice {
          display: none;
          width: 100%;
          span { color: #4c2c92; }
        }
        .right {
          float: right;
          border: none;
          margin-top: $gutter-half;
          background-color: inherit;
        }
        .view {
          width: 100%;
          text-align: left;
          background-clip: border-box;
          background-origin: padding-box;
          background-size: auto auto;
          background: $panel-colour image-url('option-select-toggle-sprite.png') no-repeat scroll;
        }
        .open { background-position: right -82px; }
        .closed { background-position: right 0; }
        .collapsed { display: none; }
        .content {
          .form-group { margin-bottom: 0; }
          > label {
            margin-top: $gutter-half;
          }
          .list {
            background-color: $page-colour;
            margin: 5px 0;
            label {
              padding: 8px;
              margin-bottom: 0; // Override bootstrap
              &:not(:last-child) { border-bottom: 1px solid $panel-colour; }
              input[type="radio"] {
                margin-right: 8px;
                width: 16px;
                height: 16px;
              }
            }
            label:hover { background: $yellow; }
          }
          #keywords { width: 100%; }
          .clearFilter { overflow: hidden; }
        }
      }
    }
  }
  @media (max-width: 991px) {
    #sidebar {
      #filters, #quick-links {
        width: 235px;
      }
    }
  }
}

#footer .footer-meta {
  .copyright {
    font-size: 1.6rem;
  }
  .footer-meta-inner {
    ul, .open-government-licence p {
      font-size: 1.6rem;
    }
  }
}