_home.scss

// discussion - views - home layout
// ====================

// home - layout
.view-discussion-home {
  @include padding-left($baseline);

  section {
    border-bottom: 1px solid $forum-color-border;
  }

  .label {
    @extend %t-copy-sub2;
    display: block;
  }

  .label-settings {
    padding-top: $baseline;
    padding-bottom: ($baseline/2);
  }

  .home-header {
    margin: 0;
  }

  .home-title {
    font-size: $forum-large-font-size;
    color: $black;
    margin-bottom: ($baseline/4);
  }
  .home-description {
    @extend %t-copy-sub2;
    margin-bottom: ($baseline/2);
  }
  .home-stats {
    padding: $baseline 0;

    .label-area {
      display: inline-block;
      min-width: ($baseline*5);
      width: 25%;
      vertical-align: middle;

      .profile-link {
        font-weight: 700;
      }
    }

    .stats-grouping {
      @include padding-left($baseline);
      display: inline-block;
      width: 70%;

      .profile-stat {
        @extend %t-copy-sub2;
        display: inline-block;
        width: 32.5%;
        vertical-align: middle;

        .count {
          font-size: $forum-x-large-font-size;
          display: inline-block;
          padding: 0 ($baseline/2);
          vertical-align: middle;
        }

        .profile-stat-label{
          vertical-align: middle;
        }
      }
    }
  }

  .home-helpgrid {
    border-bottom: none;
    border-radius: $forum-border-radius;
    border: 1px solid $forum-color-border;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  }

  .helpgrid-row {
    border-bottom: 1px solid $forum-color-border;

    .row-title {
      padding: ($baseline*1.5) $baseline;
      background-color: #dedede;
      font-size: $forum-small-font-size;
    }

    .row-item-full, .row-item {
      font-size: $forum-small-font-size;
      padding: 0 ($baseline/2);
      width: 26%;
      vertical-align: middle;

      .icon {
        padding: 0 ($baseline/2);
        font-size: 24px;
        vertical-align: middle;
        // TODO: don't use table-cell for layout purposes as it switches the screenreader mode
        display: table-cell;
      }

      .fa-stack .icon {
        padding: 0 ($baseline/2);
      }

      .row-description {
        vertical-align: middle;
        // TODO: don't use table-cell for layout purposes as it switches the screenreader mode
        display: table-cell;
      }
    }

    .row-item-full {

      .notification-checkbox {
        @include margin-right($baseline/2);
        display: inline-block;
        @include padding($baseline/4, 0, $baseline/2, 0);
        border-radius: $forum-border-radius;
        border: 1px solid gray;

        .email-setting {
          display: inline-block;
          text-align: center;
          vertical-align: middle;
          @include margin-left($baseline/2);
        }

        .icon {
          display: inline-block;
        }

        .email-setting:checked ~ .icon {
          color: $green;
        }
      }

      .row-description {
        display: inline-block;
        width:80%;
      }
    }
  }

  .helpgrid-row-navigation {
    .fa-bars {color: $light-gray;}
    .fa-search {color: $light-gray;}
    .fa-sort {color: $light-gray;}
  }

  .helpgrid-row-participation {
    .fa-plus {color: $green;}
    .fa-flag {color: $pink;}
    .fa-star {color: $blue;}
  }

  .helpgrid-row-notification {
    .fa-square {color: $green;}
    .fa-envelope {color: $light-gray;}
  }
}