ecosystem.scss

.ecosystem .jumbotron {
  height: 170px;
  @include desktop {
    height: 300px;
  }

  h1 {
    padding-top: rem(125px);
    #ecosystem-header {
      color: #CC2FAA;
    }
    #ecosystem-header-tools {
      color: not_quite_black;
    }
  }

  p.lead {
    margin-bottom: rem(25px);
    padding-top: rem(50px);
    color: $dark_grey;
  }

  .ecosystem-join {
    margin-bottom: rem(48px);
  }

  svg {
    margin-bottom: rem(20px);
  }
}

.ecosystem .main-background {
  height: 275px;

  @include desktop {
    height: 395px;
  }
}

.ecosystem .main-content {
  @include desktop {
    padding-top: 3.25rem;
  }
}

.ecosystem .main-content-wrapper {
  background-color: $light_grey;

  @include desktop {
    margin-top: 305px + $desktop_header_height;
  }
  margin-top: 275px;
}

.ecosystem.ecosystem-detail .main-content-wrapper {
  background-color: $white;
}

.ecosystem-cards-wrapper {
  margin-bottom: rem(18px);
  padding-top: rem(20px);
  .col-md-6 {
    @media (min-width: 768px) {
      flex: 0 0 100%;
      max-width: 100%;
    }

    @include max-width-desktop {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }
}

.ecosystem .main-content-menu {
  .navbar-nav .nav-link {
    font-size: rem(18px);
    color: $very_dark_grey;
    padding-right: 0;
    margin-right: rem(30px);

    &.selected {
      color: $orange;
      border-bottom: 1px solid $orange;
    }
  }

  .nav-item:last-of-type {
    @include desktop {
      position: absolute;
      right: 0;
      a {
        margin-right: 0;
      }
    }
  }
}

.ecosystem.ecosystem-detail .main-content {
  padding-bottom: 0;
}

.ecosystem article.pytorch-article {
  counter-reset: article-list;

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

  > ol > li {
    @include max-width-desktop {
      position: relative;

      &:before {
        counter-increment: article-list;
        content: counter(article-list, decimal-leading-zero);
        color: #B932CC;
        line-height: rem(40px);
        letter-spacing: -0.34px;
        font-size: rem(32px);
        font-weight: 300;
        position: absolute;
        left: -60px;
        top: -16px;
        padding: rem(10px) 0;
        background-color: $white;
        z-index: 10;
      }

      &:after {
        content: "";
        width: 2px;
        position: absolute;
        left: -42px;
        top: 0;
        height: 100%;
        background-color: #f3f3f3;
        z-index: 9;
      }
    }

    > h4 {
      color: $slate;
    }

    ul li {
      list-style-type: disc;
    }
  }
}

.ecosystem .quick-starts {
  background: #ecedf1;

  .title-block,
  #command,
  .option,
  .cloud-option {
    border-color: #ecedf1;
  }
}

.ecosystem  {
  .join-link {
    color: inherit;
    text-decoration: underline;
  }

  .join-notice {
    text-align: center;
    padding-top: rem(20px);
    padding-bottom: rem(40px);

    p {
      color: $dark_grey;
      margin-bottom: 0;
      line-height: rem(30px);
    }
  }

  .join-jumbotron {
    @include desktop {
      height: 262px;
    }
    border-bottom: 1px solid #C3C3C3;
    width: 90%;

    .container {
      max-width: 920px;
    }

    h1 {
      padding-top: rem(5px);
      color: $black;
      span {
        font-weight: 300;
        color: $purple;
      }
    }
  }

  .join-wrapper {
    background-color: $light_grey;

    .main-content {
      @include desktop {
        padding-top: 1.5rem;
      }
    }

    .container {
      max-width: 920px;
    }

    #success-response {
      color: $dark_grey;
    }
  }

  .join-intro {
    color: $dark_grey;
    line-height: 28px;
  }

  .requirements {

    span {
      color: $black;
      font-weight: bold;
    }

    .join-number {
      color: $purple;
      display: flex;
      align-items: center;
      @include desktop {
        padding-left: rem(10px);
      }
    }

    p {
      margin-bottom: 0;
      margin-top: rem(-7px);
      @include desktop {
        padding-left: rem(24px);
      }
    }

    .col-md-11 {
      @include desktop {
        border-left: 2px solid $light_grey;
      }
    }
  }

  .row.requirements {
    padding-bottom: rem(40px);
  }

  .ecosystem-form {
    padding-bottom: rem(48px);

    .mc-field-group {
      padding-bottom: rem(25px);

      .error-message {
        color: $orange;
      }
    }

    h3 {
      text-transform: uppercase;
      padding-top: rem(25px);
      padding-bottom: rem(30px);
    }

    label {
      color: $dark_grey;
    }

    input, textarea {
      width: 100%;
      border: none;
      border-bottom: 2px solid $purple;
      height: rem(44px);
      outline: none;
      padding-left: rem(15px);
    }

    ::placeholder {
      color: $dark_grey;
      opacity: 0.5;
      ;
    }

    .submit-project {
      @include desktop {
        padding-left: rem(18px);
        background-origin: content-box;
        background-size: 30px 15px;
      }
      padding-left: rem(12px);
      margin-top: rem(40px);
      background-color: $orange;
      color: $white;
      cursor: pointer;
      border: none;
      width: 30%;
      height: rem(45px);
      text-align: left;
      background-repeat: no-repeat;
      background-image: url(/assets/images/arrow-right-with-tail-white.svg);
      background-size: 30px 12px;
      background-position: right;
    }

    .submit-field {
      margin-top: -6px;
      text-align: center;
    }

    .large-input {
      height: rem(90px);
      padding-top: rem(10px);
    }

    #submitting-project {
      background-color: $dark_grey;
    }

    button {
      outline: none;
    }

    #mce-error-response {
      color: $orange;
      a {
        text-decoration: underline;
      }
    }
  }
}

.ecosystem .experimental {
  .ecosystem-card-title-container {
    display: inline-flex;
      .experimental-badge {
        text-transform: uppercase;
        margin-left: 15px;
        background-color: #e4e4e4;
        color: $not_quite_black;
        opacity: 0.75;
        font-size: rem(10px);
        letter-spacing: 1px;
        line-height: rem(22px);
        height: rem(20px);
        width: rem(96px);
        text-align: center;
        margin-top: rem(4px);
    }
  }
}

.ecosystem {
  .ecosystem-card-title-container {
    .card-title {
      padding-left: 0;
      font-size: 1.5rem;
      color: $slate;
    }
  }

  .star-list {
    list-style: none;
    padding-left: 0;
    li {
      display: inline;
    }
    li.github-stars-count-whole-number {
      display: none;
    }
  }


  .icon-count-container {
    display: inline-block;
    vertical-align: text-bottom;
    margin-left: rem(8px);
  }

  .github-logo {
    height: 15px;
    width: 13px;
    margin-left: 10px;
  }

  .github-stars-count {
    color: $mid_gray;
    position: relative;
    top: rem(4px);
    font-size: 14px;
    margin-left: 0.125rem;
    @include desktop {
      top: rem(3px);
      font-size: initial;
    }
  }
}

.ecosystem-divider {
  position: relative;
  margin-bottom: 4rem;
  margin-top: 1.5rem;
  top: 3rem;
}

.ecosystem{
  #dropdownSort, #dropdownSortLeft {
    margin-left: 0;
  }
}

.ecosystem{
  #dropdownSortLeft {
    top: inherit;
    right: inherit;
  }
}

.ecosystem-filter-menu {
  ul {
    list-style-type: none;
    padding-left: rem(20px);
    li {
      padding-right: rem(20px);
      word-break: break-all;

      a {
      color: $mid_gray;
      &:hover {
        color: $orange;
        }
      }
    }
  }
}

.ecosystem .ecosystem-filter {
  cursor: pointer;
  ul {
    list-style-type: none;
  }
}

.ecosystem #dropdownFilter, #dropdownSort, #dropdownSortLeft {
  color: $mid_gray;
  cursor: pointer;
  z-index: 1;
  position: absolute;
}

.ecosystem .pagination {
  .page {
    border: 1px solid #dee2e6;
    padding: 0.5rem 0.75rem;
  }

  .active .page {
    background-color: #dee2e6;
  }
}