@import "../scripts/libs/bootstrap/less/mixins.less"; /* Bootstrap Mixins */
@import "mixins/flexbox.less";

.social-button(@url: "images/social/mail.png") {
  font-size: 0;
  line-height: 2.4rem;
  background-image: url("/@{url}");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 67%;
}

// Based on bootstrap's .button-variant() mixin
.button-variant(@color; @background) {
  padding: 5px 10px;
  font-weight: 300;
  vertical-align: baseline;
  color: @color;
  background-color: @background;
  border: none;

  &:hover,
  &:focus,
  &:active,
  &.active {
    color: @color;
    background-color: darken(@background, 4%);
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: @background;
    }
  }
}

@import "../scripts/libs/bootstrap/less/mixins.less"; /* Bootstrap Mixins */
@import "mixins/flexbox.less";

.social-button(@url: "images/social/mail.png") {
  font-size: 0;
  line-height: 2.4rem;
  background-image: url("/@{url}");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 67%;
}

// Based on bootstrap's .button-variant() mixin
.button-variant(@color; @background) {
  padding: 5px 10px;
  font-weight: 300;
  vertical-align: baseline;
  color: @color;
  background-color: @background;
  border: none;

  &:hover,
  &:focus,
  &:active,
  &.active {
    color: @color;
    background-color: darken(@background, 4%);
    outline: 0;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: @background;
    }
  }
}

Remove outline from focused buttons
Remove outline from focused buttons
