freemarker-docgen-core/src/main/resources-gulp/org/freemarker/docgen/less/lib/components/search-form.less

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 * 
 *   http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
.search-form {
  @input-height: 26px;

  flex: 1 1 auto;

  height: @input-height;
  width: 100%;
  display: inline-block;

  &.offline {
    display: none;
  }

  @media (min-width: @screen-sm-min) {
    max-width: 300px;
  }

  fieldset {
    height: @input-height;
  }

//  .gsc-search-button,
  .search-btn {
    color: @brand-color;
    line-height: 1;

    background-color: #fff;
    background-image: none;

    border: 0;
    border-radius: 0;

    padding: 0 3px;

    width: 26px;
    height: @input-height - 2; //-2 to accomodate for border

    position: relative;
    top: -@input-height + 1;
    float: right;
    right: 1px;

    &:hover,
    &:focus {
      color: lighten(@link-color, 30%);
      cursor: pointer;
      outline: 0;
    }

    &::before {
      .icon();
      .icon-search();

      box-sizing: border-box;
      font-size: 16px;
      width: 18px;
      height: 18px;
      display: block;
    }
  }

  .search-input {
    .placeholder(0.6, @brand-color);

    -webkit-appearance: none;
    font-family: @font-sans-serif;

    background-image: none;
    background: #fff;

    font-size: 16px; // prevent zoom in on mobile
    line-height: 21px;

    border: 1px solid #aec0d6;
    border-radius: 0;

    box-sizing: border-box;
    padding: 3px 24px 3px 9px;
    height: @input-height;
    width: 100%;

    transition: border-color .2s ease-in;

    &:focus {
      outline: 0;
      border-color: @link-color;
    }
  }
}

.placeholder(@opacity, @color) {
  &::-moz-placeholder {
    color: @color;
    opacity: @opacity;
    font-size: 14px;
  }

  &:-ms-input-placeholder {
    color: @color;
    font-size: 14px;
    line-height: 21px;
  }

  &::-webkit-input-placeholder {
    color: @color;
    opacity: @opacity;
    font-size: 14px;
  }
}