challenge-tile.scss

@import 'topcoder/tc-includes';

// Common styles between tile and list view


challenge-tile .challenge {

  .private-challenge-banner {
    width: 100%;
    flex: 1;
    display: flex;

    .title {
      @include sofia-pro-light;
      font-size: 18px;
      line-height: 23px;
      color: $gray-darkest;
      text-transform: uppercase;
    }

    img {
      width: auto;
    }

    span {
      @include font-with-weight('Sofia Pro', 400);
      font-size: 11px;
      line-height: 15px;
      text-transform: uppercase;
      color: $gray-dark;
      text-align: center;
    }
  }

  .invite-only-banner {
    width: 100%;
    flex: 1;
    display: flex;

    .title {
      @include sofia-pro-light;
      font-size: 18px;
      line-height: 23px;
      color: $gray-darkest;
      text-transform: uppercase;
    }

    img {
      width: auto;
    }

    span {
      @include font-with-weight('Sofia Pro', 400);
      font-size: 11px;
      line-height: 15px;
      text-transform: uppercase;
      color: $gray-dark;
      text-align: center;
    }
  }
}

// Default Challenge Tile Stylings
challenge-tile .challenge.tile-view {

  header {
    width: 270px;
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 10px;

    a.name,
    span.name {
      display: block;
      @include font-with-weight('Sofia Pro', 500);
      font-size: 12px;
      line-height: 16px;
      max-height: 48px;
      overflow: hidden;
      color: $gray-darkest;
      @include link;
      text-transform: uppercase;
      margin-bottom: 5px;

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

    p.subtrack-color {
      @include font-with-weight('Sofia Pro', 500);
      font-size: 10px;
      line-height: 14px;
      text-transform: uppercase;
      margin-bottom: 5px;
    }
  }

  .challenge-card__bottom {
    width: 268px;/* 2px adjustment for 2 1px borders */
    flex: 2;
    display: flex;
    flex-direction: column;
  }

  // challenge details section
  .challenge-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    flex: 2;
  }

  .private-challenge-banner {
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title {
      margin-bottom: 60px;
    }

    span {
      margin-top: 20px;
    }
  }

  .invite-only-banner {
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title {
      margin-bottom: 60px;
    }

    span {
      margin-top: 20px;
    }
  }

  // roles bar is common for both active and completed
  .roles {
    width: 100%;
    border-radius: 0px 0px 4px 4px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    min-height: 36px;
    padding: 0 20px;
    @include merriweather-sans-regular;
    font-size: 12px;
    line-height: 17px;
    background-color: $gray-lighter;

    span {
      padding: 0;
      @include ellipsis;
      span:first-child {
        color: $accent-gray;
        white-space: nowrap;
      }
    }

  }

  .active-challenge {
    height: 390px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    width: 270px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    background-color: $white;

    .challenge-details {
      .currentPhase {
        margin-bottom: 20px;
        @include font-with-weight('Sofia Pro', 300);
        font-size: 18px;
        line-height: 23px;
        text-transform: uppercase;
        color: $gray-darkest;
      }

      .challenge-calendar {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 75px;
        height: 63px;
        background-image: url(../../images/ico-calendar.svg);

        > p {
          @include font-with-weight('Sofia Pro', 700);
        }

        .ends-in {
          margin-top: 3px;
          font-size: 10px;
          line-height: 13px;
          text-transform: uppercase;
          color: #7F7F7F;
        }

        .time-remaining {
          margin-top: 5px;
          font-size: 24px;
          color: $gray-darkest;
        }

        .unit-of-time {
          margin-top: 1px;
          font-size: 10px;
          text-transform: lowercase;
          color: #7F7F7F;
        }

        &.challenge-late {
          .ends-in, .time-remaining, .unit-of-time {
            color: #ee6666;
          }
        }
      }

      .stalled-challenge {
        min-height: 83px;
        padding: 21px 20px 0px 20px;
        @include font-with-weight('Sofia Pro', 500);
        font-size: 12px;
        line-height: 18px;
        text-transform: uppercase;
        text-align: center;
        color: $accent-gray;
      }

      .phase-action {
        min-height: 55px;

        .submit {
          margin: 12px;
          display: block;
          text-align: center;

          &.btn-danger {
            color: #e66e66;
            background-color: $white;
            border-color: #e66e66;

            &:hover {
              background-color: #e66e66;
              color: $white;
            }

            &:active {
              background-color: #e0493e;
              box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.30);
            }
          }
        }

        .submitted {
          position: relative;
          height: 30px;
          line-height: 30px;
          margin-bottom: 25px;
          padding-left: 35px;
          padding-right: 20px;
          border: 1px solid #F0F0F0;
          border-radius: 4px;
          background-color: $white;
          @include font-with-weight;
          font-size: 12px;
          text-transform: uppercase;
          color: $gray-darkest;

          &:before {
            content: '';
            width: 15px;
            height: 15px;
            background: url(../../images/ico-checkmark.svg);
            background-size: 15px 15px;
            position: absolute;
            bottom: 6px;
            left: 14px;
          }
        }
      }
    }
  }


  .completed-challenge {
    height: 390px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 270px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    background-color: $white;
    position: relative;

    header {
      position: relative;

      .date-completed {
        @include font-with-weight('Sofia Pro', 500);
        font-size: 10px;
        line-height: 14px;
        text-transform: uppercase;
        color: $accent-gray;
        margin-bottom: 5px;
      }

      .winner-ribbon {
        position: absolute;
        z-index: 1;
        bottom: -33px;
        left: -2px;
        @include background-image-size(73px, 26px);
        background: url(../../images/ico-winner-ribbon.svg);
      }
    }

    .challenge-details {
      justify-content: space-between;
      align-items: center;

      &.DATA_SCIENCE {
        flex: 2;
        justify-content: center;
      }

      design-challenge-user-place {
        display: flex;
        flex-direction: column;
        flex: 2;

        .tile-view {
          flex: 2;
          justify-content: flex-end;
        }
      }

      dev-challenge-user-place {
        display: flex;
        flex-direction: column;
        flex: 2;

        .tile-view {
          flex: 2;
        }
      }

      .marathon-score {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

        .score {
          margin-bottom: 5px;
          @include font-with-weight;
          font-size: 32px;
          line-height: 38px;
          color: #3D3D3D;
        }

        p:last-child {
          @include font-with-weight;
          font-size: 12px;
          line-height: 14px;
          color: #A3A3AE;
          text-transform: uppercase;
        }
      }
    }
  }

  @media only screen and (max-width: 768px) {
    .active-challenge, .completed-challenge {
      height: auto;
      margin: auto;
    }
  }

  .past-design-details {
    img {
      height: 200px;
    }
  }
}

challenge-tile .challenge.list-view {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  padding: 20px 0;
  padding-left: 5px;
  min-height: 110px;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  background-color: $white;

  // common styles for active and completed

  header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 15px;
    border-right: 1px solid #F0F0F0;
    @media only screen and (min-width: 1000px) {
      padding: 0 30px;
    }

    a.name,
    span.name {
      display: block;
      @include font-with-weight('Sofia Pro', 500);
      font-size: 12px;
      line-height: 16px;
      max-height: 32px;
      overflow: hidden;
      color: $gray-darkest;
      @include link;
      text-transform: uppercase;

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

    p.subtrack-color {
      @include font-with-weight('Sofia Pro', 500);
      font-size: 12px;
      line-height: 14px;
      text-transform: uppercase;
    }

    .roles {
      max-width: 362px;
      @include font-with-weight('Merriweather Sans');
      font-size: 13px;
      line-height: 18px;
      color: $gray-darkest;
      @include ellipsis;


      span:first-child {
        color: $accent-gray;
        white-space: nowrap;
      }
    }
  }

  .challenge-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    border-right: 1px solid #F0F0F0;
    @media only screen and (min-width: 1000px) {
      padding: 0 10px 0 30px;
    }

    .challenge-info {
      .currentPhase {
        margin-bottom: 10px;
        @include font-with-weight('Sofia Pro', 300);
        font-size: 18px;
        color: $gray-darkest;
        text-transform: uppercase;
      }

      .ends-in {
        @include font-with-weight;
        font-size: 14px;
        color: #A3A3AE;
      }

      &.challenge-late {
        .ends-in, .time-remaining, .unit-of-time {
          color: #ee6666;
        }
      }
    }

    .marathon-score {
      text-align: center;

      .score {
        margin-bottom: 5px;
        @include font-with-weight;
        font-size: 32px;
        line-height: 38px;
        color: #3D3D3D;
      }

      p:last-child {
        @include sofia-pro-regular;
        font-size: 12px;
        line-height: 14px;
        color: #A3A3AE;
        text-transform: uppercase;
      }
    }

    .phase-action {
      .submit {
        display: block;
        margin: 6px 0;
        text-align: center;

        &.btn-danger {
          color: #e66e66;
          background-color: $white;
          border-color: #e66e66;

          &:hover {
            background-color: #e66e66;
            color: $white;
          }

          &:active {
            background-color: #e0493e;
            box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.30);
          }
        }
      }

      .submitted {
        position: relative;
        height: 30px;
        line-height: 30px;
        padding-left: 35px;
        padding-right: 20px;
        border: 1px solid #F0F0F0;
        border-radius: 4px;
        background-color: $white;
        @include sofia-pro-regular;
        font-size: 12px;
        text-transform: uppercase;
        color: $gray-darkest;

        &:before {
          content: '';
          width: 15px;
          height: 15px;
          background: url(../../images/ico-checkmark.svg);
          background-size: 15px 15px;
          position: absolute;
          bottom: 6px;
          left: 14px;
        }
      }
    }
  }

  .private-challenge-banner {
    flex-direction: column;
    justify-content: center;
  }

  .invite-only-banner {
    flex-direction: row;
    justify-content: space-between;

    .invite-only-banner__description {

      .title {
        margin-bottom: 10px;
      }

      span {
      }

    }
  }

  // specific styles for active challenges in list view
  .active-challenge {
    width: 100%;
    display: flex;
    flex-direction: row;

    header {
      max-width: 470px;
      flex: 1;
    }
    .challenge-details {
      flex: 2;
    }
  }

  // specific styles for completed challenges in list view
  .completed-challenge {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    overflow: hidden;
    header {
      flex: 2;
    }
    .challenge-details {
      flex: 1;
    }
  }
}

// Dynamic colors based on track
.DESIGN {
  &.tile-view {
    header {
      border-left: 3px solid $design;
      border-radius: 3px 0 0 0;
    }
  }

  &.challenge.list-view {
    border-left: 3px solid $design;
  }

  .subtrack-color {
    color: $design;
  }
}
.DEVELOP {
  &.tile-view {
    header {
      border-left: 3px solid $develop;
      border-radius: 3px 0 0 0;
    }
  }

  &.challenge.list-view {
    border-left: 3px solid $develop;
  }

  .subtrack-color {
    color: $develop;
  }
}
.DATA_SCIENCE {
  &.tile-view {
    header {
      border-left: 3px solid $data_science;
      border-radius: 3px 0 0 0;
    }
  }

  &.challenge.list-view {
    border-left: 3px solid $data_science;
  }

  .subtrack-color {
    color: $data_science;
  }
}
.COPILOT {
  &.tile-view {
    header {
      border-left: 3px solid $copilot;
      border-radius: 3px 0 0 0;
    }
  }

  &.challenge.list-view {
    border-left: 3px solid $copilot;
  }

  .subtrack-color {
    color: $copilot;
  }
}