fleet/website/assets/styles/components/docs-nav-and-search.component.less

/**
 * <docs-nav-and-search>
 *
 */

[parasails-component='docs-nav-and-search'] {
  margin-bottom: 48px;
  margin-left: -8px;
  [purpose='docs-links'] {
    min-height: 36px;
    display: flex;
    align-items: center;
  }
  a {
    height: 29px;
    &[purpose='docs-top-nav-menu-link'] {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 4px 8px !important;//lesshint-disable-line importantRule
      margin-right: 16px !important;//lesshint-disable-line importantRule
      white-space: nowrap;
      &:last-of-type {
        margin-right: 0px !important;//lesshint-disable-line importantRule
      }
      color: #515774 !important;//lesshint-disable-line importantRule
      font-size: 14px !important;//lesshint-disable-line importantRule
      font-weight: 400 !important;//lesshint-disable-line importantRule
      line-height: 150% !important;//lesshint-disable-line importantRule
      text-decoration: none !important;//lesshint-disable-line importantRule
      text-decoration-line: none !important;//lesshint-disable-line importantRule
      &.active {
        border-radius: 8px;
        background: #f6f7f8;
        color: #192147 !important;//lesshint-disable-line importantRule
      }
      &:hover {
        border-radius: 8px;
        background: #f6f7f8;
        text-decoration: none;
      }
    }
  }
  width: 100%;
  [purpose='nav-bar-search'] {
    margin-left: 24px;
    // Note: We're using classes here to override the default Docsearch styles;
    button {
      width: 100%;
      cursor: text;
      margin: 0;
    }
    .DocSearch-Button {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      border: 1px solid @core-fleet-black-25;
      background-color: #FFF;
      padding: 8px 15px;
      height: 36px;
      margin: 0;
      width: 190px;
    }
    .DocSearch-Button:hover {
      box-shadow: none;
      border: 1px solid @core-fleet-black-25;
      color: @core-fleet-black-50;
    }
    .DocSearch-Search-Icon {
      margin-left: 0px;
      margin-right: 8px;
      height: 16px;
      width: 16px;
      color: @core-fleet-black-50;
      stroke-width: 3px;
    }
    .DocSearch-Button-Keys {
      display: none;
    }
    .input-group:focus-within {
      border: 1px solid @core-vibrant-blue;
    }
    .DocSearch-Button-Placeholder {
      font-size: 16px;
      line-height: 16px;
      font-weight: 400;
      padding-left: 0px;
    }
    [purpose='disabled-search'] {
      input {
        padding-top: 6px;
        padding-bottom: 6px;
        border: none;
        }
        &::placeholder {
          font-size: 16px;
          line-height: 24px;
          color: #8B8FA2;
        }
      .input-group {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        border: 1px solid @core-fleet-black-25;
        background: #FFF;
      }
      .input-group:focus-within {
        border: 1px solid @core-vibrant-blue;
      }
      .form-control {
        border-radius: 6px;
        padding: 6px;
        height: 36px;
        margin: 0;
        width: 212px;
      }
      .docsearch-input:focus-visible {
        outline: none;
      }
      .ds-input:focus {
        outline: rgba(0, 0, 0, 0);
      }
      .input-group-text {
        color: @core-fleet-black-50;
      }
      .form-control {
        height: 36px;
        padding: 0px;
        font-size: 16px;
      } &:focus {
        border: none;
      }
    }
    img {
      height: 16px;
      margin-right: 8px;
    }
    background: #FFF;
    &::placeholder {
      font-size: 16px;
      color: @core-fleet-black-50;
    }
  }
  @media (max-width: 991px) {
    margin-bottom: 32px;
    [purpose='nav-bar-search'] {
      margin-left: 24px;
      // Note: We're using classes here to override the default Docsearch styles;
      button {
        width: 100%;
        cursor: pointer;
        margin: 0;
      }
      .DocSearch-Button {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        border: none;
        background-color: transparent;
        padding: 0px;
        height: 36px;
        margin: 0;
        width: 16px;
      }
      .DocSearch-Button:hover {
        box-shadow: none;
        border: none;
        color: @core-fleet-black-50;
      }
      .DocSearch-Search-Icon {
        margin-left: 0px;
        margin-right: 8px;
        // padding: 8px 15px;
        height: 16px;
        width: 16px;
        color: @core-fleet-black-75;
        stroke-width: 3px;
      }
      .DocSearch-Button-Keys {
        display: none;
      }
      .input-group:focus-within {
        border: 1px solid @core-vibrant-blue;
      }
      .DocSearch-Button-Placeholder {
        font-size: 16px;
        line-height: 16px;
        font-weight: 400;
        padding-left: 0px;
        display: none;
      }
      [purpose='disabled-search'] {
        input {
          padding-top: 6px;
          padding-bottom: 6px;
          border: none;
          }
          &::placeholder {
            font-size: 16px;
            line-height: 24px;
            color: #8B8FA2;
          }
        .input-group {
          border-top-left-radius: 6px;
          border-bottom-left-radius: 6px;
          border-top-right-radius: 6px;
          border-bottom-right-radius: 6px;
          border: 1px solid @core-fleet-black-25;
          background: #FFF;
        }
        .input-group:focus-within {
          border: 1px solid @core-vibrant-blue;
        }
        .form-control {
          border-radius: 6px;
          padding: 6px;
          height: 36px;
          margin: 0;
          width: 212px;
        }
        .docsearch-input:focus-visible {
          outline: none;
        }
        .ds-input:focus {
          outline: rgba(0, 0, 0, 0);
        }
        .input-group-text {
          color: @core-fleet-black-50;
        }
        .form-control {
          height: 36px;
          padding: 0px;
          font-size: 16px;
        } &:focus {
          border: none;
        }
      }
      img {
        height: 16px;
        margin-right: 8px;
      }
      background: none;
      &::placeholder {
        font-size: 16px;
        color: @core-fleet-black-50;
      }
    }


  }
  @media (max-width: 768px) {
    [purpose='nav-link-container'] {
      max-width: calc(~'100% - 48px');
      overflow-x: scroll;
      scrollbar-width: none;
    }

  }
}