framework/less/lib/buttons.less

.btn {
  border: 0;
  .box-shadow(none);
  line-height: 20px;

  & .fa {
    font-size: 14px;
  }
}
.btn-group .btn + .btn {
  margin-left: 1px;
}
.btn-icon {
  padding-left: 9px;
  padding-right: 9px;
}
.btn-link {
  color: @fl-body-muted-color;

  &:hover,
    &:focus {
    text-decoration: none;
  }
}
.btn-primary {
  font-weight: bold;
  & .icon {
    display: none;
  }
}
.btn-user {
  & .avatar {
    margin: -2px 5px -2px -5px;
    .avatar-size(24px);
  }
}
.btn-more {
  padding: 1px 3px;
  border-radius: 2px;
  line-height: 1;
}
.btn-danger {
  .button-variant(#d66, #fdd, #fdd);
}

// Add to Bootstrap's mixin to make some general changes
.button-variant(@color; @background; @border) {
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: darken(@background, 5%);
  }
  &.active {
    .box-shadow(none);
  }
}

// Little round icon buttons
.btn-icon.btn-sm {
  border-radius: 16px;
  height: 32px;
  width: 32px;
  text-align: center;
  padding: 7px 0;

  & .label, & .icon-caret {
    display: none;
  }
  & .fa-ellipsis-v {
    font-size: 17px;
    vertical-align: middle;
  }

  @media @phone {
    width: 38px;
    height: 38px;
    border-radius: 38px / 2;
    padding: 10px 0;

    & .fa-ellipsis-v {
      font-size: 20px;
    }
  }
}

// Buttons that blend into the background
.btn-naked {
  background: transparent;
  &:hover {
    background: @fl-body-control-bg;
  }
}

.btn-rounded {
  border-radius: 18px;
}

.back-button {
  & .back {
    z-index: 3 !important; // z-index of an active .btn-group .btn is 2
    border-radius: @border-radius-base !important;
    .transition(border-radius 0.2s);
  }
  & .pin {
    opacity: 0;
    margin-left: -36px !important;
    .transition(~"opacity 0.2s, margin-left 0.2s");

    & .fa {
      .rotate(45deg);
    }
  }
  @media @desktop-hd {
    .has-pane.pane-pinned &, .has-pane.pane-showing & {
      & .back {
        border-radius: @border-radius-base 0 0 @border-radius-base !important;
      }
      & .pin {
        opacity: 1;
        margin-left: 1px !important;
      }
    }
    .has-pane.pane-pinned & .pin .fa {
      .rotate(0deg);
    }
  }
}