challenge-tile.scss

@import 'tc-includes';

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

  // common css for both active and completed challenge for tile-view
  height: 350px;
  display: flex;
  flex-direction: row;

  .challenge-track {
    width: 5px;
    height: 91px;
    position: absolute;
    top: -1px;
    left: -1px;
    border-top-left-radius: 4px;
  }

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

    a.name {
      display: block;
      padding: 15px 20px 0px 20px;
      @include font-with-weight('Sofia Pro', 500);
      font-size: 14px;
      line-height: 20px;
      color: $gray-darkest;
      @include ellipsis;
      @include link;
      text-transform: uppercase;

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

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

  // challenge details section
  .challenge-details {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  // roles bar is common for both active and completed
  .roles {
    width: 101%;
    border: 1px solid #e0e0e0;
    border-top: none;
    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 {
    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-top: 40px;
        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;
        margin-bottom: 20px;
        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;
        }
      }

      .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-bottom: 25px;
          display: inline-block;
        }

        .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 {
    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: 12px;
        text-transform: uppercase;
        color: $accent-gray;
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 10px;
      }

      .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;
      }

      .marathon-score {
        margin-bottom: 70px;
        text-align: center;

        .score {
          margin-top: 28px;
          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;
        }
      }
    }
  }

  .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;
  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

  .challenge-track {
    width: 5px;
    height: 110px;
    position: absolute;
    top: -1px;
    left: -1px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }

  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 {
      display: block;
      @include font-with-weight('Sofia Pro', 500);
      font-size: 14px;
      line-height: 20px;
      color: $gray-darkest;
      @include ellipsis;
      @include link;
      text-transform: uppercase;

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

    p.subtrack-color {
      margin-bottom: 12px;
      @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;
      }
    }

    .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: inline-block;
      }

      .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;
        }
      }
    }
  }

  // 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-direction: row;
    header {
      flex: 2;
    }
    .challenge-details {
      flex: 1;
    }
  }
}

// Dynamic colors based on track
.DESIGN {
  .challenge-track { background-color: $design; }

  header .subtrack-color { color: $design; }
}
.DEVELOP {
  .challenge-track { background-color: $develop; }

  header .subtrack-color { color: $develop; }
}
.DATA_SCIENCE {
  .challenge-track { background-color: $data_science; }

  header .subtrack-color { color: $data_science; }
}
.COPILOT {
  .challenge-track { background-color: $copilot; }

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