quick-start-module.scss

.quick-starts {
  background: $light_grey;

  .col-md-2-4 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }

  @media (min-width: 768px) {
    .col-md-2-4 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
    }
  }

  .start-locally-col {
    margin-bottom: rem(20px);
    .row.ptbuild,
    .row.os,
    .row.package,
    .row.language,
    .row.cuda {
      margin-bottom: rem(20px);
      @include desktop {
        margin-bottom: 0;
      }
    }

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

    @include desktop {
      margin-bottom: rem(40px);

      .row {
        margin-bottom: 0;
      }
    }

    @include max-width-desktop {
      margin-bottom: 0;
    }

    pre {
      font-size: 60% !important;
      background-color: #ffffff !important;
    }
  }

  .cloud-options-col {
    @include small-desktop {
      flex: 0 0 100%;
      max-width: 100%;
      margin-left: 0;
      margin-top: rem(20px);
    }
  }

  p {
    font-size: rem(18px);
    line-height: rem(28px);
  }

  .card-body {
    flex: 1 1 auto;
  }

  .cloud-option-image {
    margin-left: rem(15px);
    margin-right: rem(25px);
    margin-bottom: rem(5px);
  }

  .cloud-option-row {
    margin-left: 0;
    cursor: pointer;
  }

  .option {
    border: 2px solid $light_grey;
    font-size: rem(16px);
    color: $quick_start_grey;
    letter-spacing: -0.22px;
    line-height: rem(20px);
    background: $white;
    cursor: pointer;
  }

  .option:hover {
    background-color: $orange;
    color: $white;
  }

  .selected {
    background-color: $orange;
    color: $white;
  }

  .block {
    margin-bottom: rem(1px);
    height: rem(40px);
    display: flex;
    align-items: center;
  }

  .title-block {
    margin: rem(1px);
    height: rem(40px);
    border: 2px solid $light_grey;
    font-size: rem(16px);
    color: $quick_start_grey;
    line-height: rem(20px);
    display: flex;
    align-items: center;
  }

  .title-block:before {
    display: block;
    content: ".";
    color: transparent;
    border-left: 2px solid $smoky_grey;
    height: 100%;
    position: absolute;
    left: 0;
  }

  #command {
    color: #4a4a4a;
    background-color: $white;
    padding: rem(15px);
    border: 2px solid $light_grey;
    word-wrap: break-word;
    display: table-cell;
    vertical-align: middle;

    a {
      font-size: 125%;

      @include desktop {
        &:hover {
          color: $orange;
        }
      }
    }
  }

  .command-container {
    display: table;
    width: 100%;
    @include desktop {
      min-height: rem(84px);
    }
    pre {
      margin-bottom: 0px;
      padding: 0px;
      font-size: 75%;
      background-color: #f3f4f7;
    }
  }

  .command-block {
    height: rem(84px);
    word-wrap: break-word;
    color: $command_block_black;
  }

  .command-block:before {
    border-left: 2px solid $black;
  }

  .quick-start-link {
    color: $quick_start_grey;
  }

  .mobile-heading {
    @include desktop {
      display: none;
    }
    display: flex;
    align-items: center;
    font-weight: 400;
  }

  .command-mobile-heading {
    @include desktop {
      display: none;
    }
    display: flex;
    align-items: center;
    font-weight: 400;
    color: $black;
  }

  .headings {
    display: none;
    @include desktop {
      display: block;
    }
  }

  .cloud-options-col {
    margin-top: rem(20px);
    @include desktop {
      margin-top: 0;
    }
  }

  @media (max-width: 978px) {
    .os-text {
      margin-top: 0;
    }
  }
}

.quick-start-guides {
  font-size: rem(18px);
  letter-spacing: 0.25px;
  line-height: rem(36px);
  color: $medium_smoky_grey;

  .select-instructions {
    color: $slate;
    border-bottom: 2px solid $medium_smoky_grey;
    margin-bottom: rem(16px);
    display: inline-block;
    @include desktop {
      margin-bottom: 0;
    }
  }
}

.quick-start-module {
  .option-module {
    float: right;
  }

  padding-top: rem(40px);
  padding-bottom: rem(40px);

  @include desktop {
    padding-top: rem(80px);
    padding-bottom: rem(80px);
  }

  p {
    color: $dark_grey;
    font-size: 1.125em;
    letter-spacing: 0.25px;
    padding-bottom: rem(15px);
  }

  h3 {
    font-size: rem(24px);
    letter-spacing: 1.33px;
    line-height: rem(32px);
    text-transform: uppercase;
    margin-bottom: rem(20px);
  }
}

.quick-starts .cloud-option-body {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 0 0 rem(80px);

  @include animated_border_hover_state;

  @include desktop {
    padding-right: rem(32px);
  }

  @include small-desktop {
    padding-right: rem(20px);
  }

  position: relative;
  background-image: url($baseurl + "/assets/images/chevron-right-orange.svg");
  background-size: 6px 13px;
  background-position: center right 15px;
  background-repeat: no-repeat;

  @include desktop {
    background-size: 8px 14px;
  }

  &:before {
    opacity: 0.5;
    position: absolute;
    left: rem(30px);
    top: 21px;
  }

  &.aws:before {
    content: url($baseurl + "/assets/images/aws-logo.svg");
  }

  &.microsoft-azure:before {
    content: url($baseurl + "/assets/images/microsoft-azure-logo.svg");
  }

  &.google-cloud:before {
    content: url($baseurl + "/assets/images/google-cloud-logo.svg");
  }

  &.colab:before {
    content: url($baseurl + "/assets/images/colab-logo.svg");
  }

  @include desktop {
    &:hover:before {
      opacity: 1;
    }
  }
}

.quick-starts .cloud-option {
  background-color: $white;
  margin-bottom: rem(2px);
  border: 2px solid $light_grey;
  font-size: rem(18px);
  letter-spacing: -0.25px;
  line-height: rem(30px);
  color: $not_quite_black;

  @include small-desktop {
    font-size: rem(16px);
  }

  ul {
    display: none;
    width: 100%;
    margin: 0 0 rem(20px) 0;
    padding: 0;

    li {
      margin-top: 0;
      position:relative;
      padding-left: rem(80px);

      @include small-desktop {
        font-size: rem(16px);
      }

      a {
        color: $quick_start_grey;
        letter-spacing: -0.25px;
        line-height: 30px;

        @include desktop {
          &:hover {
            color: $orange;
          }
        }
      }

      @include desktop {
        &:hover:before {
          content: "\2022";
          color: $orange;
          position: absolute;
          left: 36px;
        }
      }

      &:first-of-type {
        margin-top: rem(20px);
      }
    }
  }

  &.open {
    .cloud-option-body {
      background-image: url($baseurl + "/assets/images/chevron-down-orange.svg");
      background-size: 14px 14px;
      border-bottom: 1px solid $orange;
      color: $not_quite_black;

      @include desktop {
        border-bottom: none;
      }

      &:after {
        width: 100%;
      }

      &:before {
        opacity: 1;
      }
    }

    ul {
      display: block;
    }
  }
}