Embed button for Bootstrap 3

btn-embed-bs3.scss

/**
 * Embed button for Bootstrap 3
 *
 * Description: Embed a button inside a Bootstrap 3 input field.
 *
 * Example (search field with embedded magnifying glass):
 * <div class="has-btn-embed has-btn-embed-right">
 *     <input type="search" class="form-control" id="s" name="s" />
 *     <button type="submit" class="btn btn-embed" aria-label="Search"><i class="fa fa-search" aria-hidden="true"></i></button>
 * </div>
 */
.has-btn-embed {
  $btn-embed-color: $input-color-placeholder !default;
  $btn-embed-padding-horizontal: $padding-base-horizontal !default;
  $btn-embed-padding-small-horizontal: $padding-small-horizontal !default;
  $btn-embed-padding-large-horizontal: $padding-large-horizontal !default;

  position: relative;

  &.has-btn-embed-left {
    .form-control {
      padding-left: $padding-base-horizontal + (2 * $btn-embed-padding-horizontal);
    }
    .form-control-sm {
      padding-left: $padding-small-horizontal + (2 * $btn-embed-padding-small-horizontal);
    }
    .form-control-lg {
      padding-left: $padding-large-horizontal + (2 * $btn-embed-padding-large-horizontal);
    }
    .btn-embed {
      left: 0;
    }
  }
  &.has-btn-embed-right {
    .form-control {
      padding-right: $padding-base-horizontal+ (2 * $btn-embed-padding-horizontal);
    }
    .form-control-sm {
      padding-right: $padding-small-horizontal + (2 * $btn-embed-padding-small-horizontal);
    }
    .form-control-lg {
      padding-right: $padding-large-horizontal + (2 * $btn-embed-padding-large-horizontal);
    }
    .btn-embed {
      right: 0;
    }
  }
  .btn-embed {
    background-color: transparent;
    position: absolute;
    top: 0;
    color: $btn-embed-color;
    font-size: $font-size-base;
    line-height: $line-height-base;
    height: $input-height-base;
    padding: $padding-base-vertical $btn-embed-padding-horizontal;
    margin-bottom: 0;
  }
  .btn-embed-sm {
    font-size: $font-size-small;
    line-height: $line-height-small;
    height: $input-height-small;
    padding: $padding-small-vertical $btn-embed-padding-small-horizontal;
  }
  .btn-embed-lg {
    font-size: $font-size-large;
    line-height: $line-height-large;
    height: $input-height-large;
    padding: $padding-large-vertical $btn-embed-padding-large-horizontal;
  }
}