mysociety/alaveteli

/* Style for the requests page */

$in-progress: rgb(255, 216, 54);
$action-needed: rgb(224, 75, 75);
$complete: rgb(112, 203, 99);

.requests__header {
  background-color: #f3f1eb;
  border-bottom: 1px solid #ddd;
}

.request {
  border: 3px solid #e6e4df;
  padding: 1em;
  margin-bottom: 1em;
}

.request__title {
  font-size: 1.1875em; // 19px
  font-weight: 600;
  color: $primary-color;
}

.request--action_needed {
  .request__title a {
    color: $action-needed;
  }
}

.request--in-progress {
  .request__title a {
    color: $in-progress;
  }
}

.request--complete {
  .request__title a {
    color: $complete;
  }
}

.request__batch-request-count {
  color: #999;
}

.request__status,
.request__recipient,
.request__created,
.request__updated,
.request__due,
.request__responses {
  font-size: 0.875em; // 14px
  line-height: 1.5em;
}

.request__meta__label {
  font-size: 0.75em; // 12px
  line-height: 1em;
  color: #999;
}

.requests__sort,
.requests__filters {
  font-size: 0.8125em;
  label {
    color: #777;
    font-size: 1em;
  }
  select {
    font-size: 1em;
    border-color: transparent;
    background-color: transparent;
    cursor: pointer;
    &:hover,
    &:active,
    &:focus {
      border-color: #ccc;
      background-color: #fff;
    }
  }
}

.download-icon {
  background-image: image-url('alaveteli-pro/download.png');
  background-size: 13px 13px;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  height: 13px;
  width: 13px;
  margin-right: 0.3em;
  position: relative;
  top: 1px;
  @include image-replacement();
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    background-image: image-url('alaveteli-pro/download@2.png');
  }
}

/* Blank slate - when there are no requests to show */
.blank-slate {

}

.blank-slate__requests {
  @include respond-min( $dashboard-collapse ){
    background-image: image-url('alaveteli-pro/blank-slate-requests.png');
    background-repeat: no-repeat;
    background-size: 683px 348px;
    background-position: left bottom;
    min-height: 348px;
    padding: 2em 0;
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      background-image: image-url('alaveteli-pro/blank-slate-requests@2.png');
    }
  }
}

.blank-slate__message {
  background-color: #333;
  color: #fff;
  padding: 1.5em 2em 2em;
  margin-bottom: 2em;
  @include respond-min( $dashboard-collapse ){
    max-width: 32em;
    margin-left: 5em;
  }
  h2 {
    color: #fff;
    font-size: 1.3125em;
  }

  p {
    font-size: 0.875em;
    line-height: 1.4em;
  }
}

.embargo-status,
.batch-status {
  @include flexbox();
}

.embargo-status--content,
.batch-status--content {
  // embargo-indicator and embargo-text sit side by side, using flexbox for this.
  // If no flexbox support the layout is the same, but the text will wrap underneath the icon
  @include flex(1);
}

.embargo-status--icon,
.batch-status--icon {
  margin-right: 0.75em;
  margin-top: 0.2em; // compensate for *--content line-height
}

.embargo-indicator,
.batch-indicator {
  background-position: top left;
  background-repeat: no-repeat;
  display: inline-block;
  @include image-replacement();
  width: 20px;
}

.embargo-indicator {
  background-image: image-url('alaveteli-pro/embargo-lock.png');
  background-size: 20px 28px;
  height: 28px;
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    background-image: image-url('alaveteli-pro/embargo-lock@2.png');
  }
}

.batch-indicator {
  background-image: image-url('alaveteli-pro/batch-stack.png');
  background-size: 20px 24px;
  height: 24px;
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    background-image: image-url('alaveteli-pro/batch-stack@2.png');
  }
}

.embargo-indicator--small {
  background-image: image-url('alaveteli-pro/embargo-lock--small.png');
  background-size: 14px 19px;
  height: 19px;
  width: 14px;
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    background-image: image-url('alaveteli-pro/embargo-lock--small@2.png');
  }
}



.search-and-filter-overview {
  color: #999;
  strong {
    font-weight: normal;
    color: #333;
  }
}

.clear-icon {
  background-image: image-url('alaveteli-pro/clear-icon.png');
  background-size: 8px 8px;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  height: 8px;
  width: 8px;
  padding: 0.5em;
  margin-left: 0.3em;
  position: relative;
  top: 3px;
  @include image-replacement();
  opacity: 0.5;
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    background-image: image-url('alaveteli-pro/clear-icon@2.png');
  }
  &:hover,
  &:active,
  &:focus {
    opacity: 1;
  }
}

.request__phase-summary-icon {
  background-color: #ddd;

  // Add colours to the bar for the various different phases
  &.request__phase-summary-icon--in-progress {
    background-color: $in-progress;
  }

  &.request__phase-summary-icon--action-needed {
    background-color: $action-needed;
  }

  &.request__phase-summary-icon--complete {
    background-color: $complete;
  }
}

//Request navigation controls 

.request-navigation {

}

.request-navigation__button {
  padding: 0.5em 0.8em;
  font-size: 0.875em;
  color: #000;
  background-color: #e9e9e9;
  &:hover,
  &:active,
  &:focus {
    background-color: darken(#e9e9e9, 10%);
    color: #000;
    outline: 0;
  }
  &:disabled {
    &:after {
      opacity: 0.7;
    }
  }
}

.request-navigation__button--next {
  overflow: hidden;
  text-indent: -1000px;
  white-space: nowrap;
  width: 2.5em;
  &:after {
    content: "";
    display: block;

    border-style: solid;
    border-color: #777 transparent transparent transparent;
    border-width: 0.38889rem;

    position: absolute;
    margin: -0.1875rem 0 0 -0.38889rem;
    left: 50%;
    top: 50%;
  }
}

.request-navigation__button--prev {
  overflow: hidden;
  text-indent: -1000px;
  white-space: nowrap;
  width: 2.5em;
  margin-right: 1px;
  &:after {
    content: "";
    display: block;

    border-style: solid;
    border-color: transparent transparent #777 transparent;
    border-width: 0.38889rem;

    position: absolute;
    margin: -0.625rem 0 0 -0.38889rem;
    left: 50%;
    top: 50%;
  }
}

.request-navigation__button--current {
  white-space: nowrap;
  margin-left: 1px;
}