thomas-mcdonald/qa

%tag-list {
  margin: 0;
  padding: 0;
  list-style-type: none;

  li {
    float: left;
    margin-right: 6px;
  }
}

// questions#index
.question-list {
  @include make-md-column(12);

  .question-summary {
    @include make-row();
    border-bottom: 1px solid #eee;
    margin-top: 1px;
    padding-bottom: 10px;
  }
}

.mini-counts {
  $sm-width: 48px;
  $normal-width: 54px;
  $body-width: 46px;

  @include make-xs-column(2.25);
  @include make-sm-column(3);
  @include make-md-column(2.5);
  margin-top: 14px;

  // full screen question listing
  .fluid-count {
    margin: 0 auto;
    width: $normal-width * 3;
  }

  .mini-count {
    float: left;
    font-weight: 300;
    text-align: center;
    width: $normal-width;
    .num { font-size: 16px; }
    &.unanswered { color: darken(#f00, 3%); }
  }

  // page with sidebar
  #page-wrap & .mini-count {
    width: $body-width;
  }

  // rejig sizes on small screens.
  // also hide view count if on a sidebar page
  @media screen and (max-width: $screen-sm) {
    .fluid-count {
      width: $sm-width * 2;
    }

    .mini-count {
      width: $sm-width;
    }
  }

  // counts are stacked on extra small
  @media screen and (max-width: $screen-xs) {
    .mini-count {
      float: none;
    }
  }

  // hide the view count on mobile
  .mini-count:last-child {
    @extend .hidden-xs;
  }

  // hide it on small if page with sidebar
  #page-wrap & .mini-count:last-child {
    @extend .hidden-sm;
  }
}

.question-info {
  @include make-xs-column(9.75);
  @include make-sm-column(9);
  @include make-md-column(9.5); // leave wide for now

  h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 32px;
    margin: 0 0 5px;

    a:hover {
      text-decoration: none;
    }
  }

  .tags {
    float: left;
    @extend %tag-list;
  }

  > p {
    margin-bottom: 0;
  }

  .last-activity {
    float: right;
    font-size: 12px;

    span,
    a {
      margin-left: 1px;
    }

    .rep {
      font-weight: 600;
    }
  }
}

// new question form
#question-form {
  margin-bottom: 20px;

  #question_title {
    font-size: 30px;
    height: 42px;
    line-height: normal;
    margin-bottom: 10px;
  }

  #question_body {
    height: 250px;
  }
}

// question display on questions#show
.question {
  .tags {
    float: none;
    @extend .clearfix;
    @extend %tag-list;
  }

  .meta {
    padding-top: 10px;
  }
}

.sidebar-tags {
  h5 { margin: 0 0 6px; }

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

  li { margin-bottom: 6px; }
  span {
    color: #b1b1b1;
    font-size: 12px;
  }
}

.sidebar-question-stats {
  list-style-type: none;
  padding-left: 0;

  li span {
    font-weight: 600;
  }
}