index.less

/**
 * Buttons
 */

#components {
  // Base Mixin
  .btns(){
    .btn {
      position: relative;
      display: inline-block;
      border: none;
      border-style: solid;
      background: transparent;
      line-height: 0;
      text-decoration: none;
      letter-spacing: 0.4px;
      vertical-align: bottom;
      cursor: pointer;

      &:hover {
        text-decoration: none;
      }

      > [class*="gb-icon-"] {
        vertical-align: middle;
      }

      > .gb-icon-caret-down {
        position: relative;
        bottom: -1px;
        right: -4px;
      }
    }
  }

  // Button sizing mixin
  .btn-size (
    @btn-height
  , @btn-side-padding
  , @btn-border-width
  , @btn-border-bottom-width
  , @btn-font-size
  ){
    @btn-padding-top: ((@btn-height - (@btn-border-width + @btn-border-bottom-width)) / 2) + 1;

    height:               @btn-height;
    padding-top:          @btn-padding-top;
    padding-right:        @btn-side-padding;
    padding-bottom:       @btn-padding-top - 2;
    padding-left:         @btn-side-padding;
    border-width:         @btn-border-width;
    border-bottom-width:  @btn-border-bottom-width;
    font-size:            @btn-font-size;
  }

  // Button theming mixin
  .btn-theme( @bg, @color ){
    .btn-theme(
      @bg
    , lighten( @bg, 2% )
    , lighten( @bg, 1% )
    , darken( @bg, 12% )
    , @color
    );
  }

  .btn-theme( @bg, @bg-hover, @bg-active, @border-color, @color ){
    background-color: @bg;
    color: @color;
    &:hover {
      background-color: @bg-hover;
    }

    &:active {
      background-color: @bg-active;
    }

    border-color: @border-color;

    box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.1 );
  }

  // Button Groups Mixin
  .btn-groups( @btn-group-breakpoint: 640px ){
    .btn-group {
      display: block;
      border-width: 1px;
      border-style: solid;
      text-align: center;
    }

    .btn-group > .btn {
      display: block;
      border-width: 1px;
      border-style: solid;

      &:active {
        bottom: 0;
        margin-bottom: 0;
      }
    }

    .btn-group > input[type="radio"] {
      display: none;
    }

    .btn-group > .btn:hover {
      cursor: pointer;
    }

    @media (min-width: @btn-group-breakpoint) {
      .btn-group {
        display: inline-block;
      }

      .btn-group > .btn {
        float: left;
      }
    }
  }

  .btn-group-theme(
    @background
  , @background-hover
  , @background-active
  , @border-color
  , @text-color
  ){
    border-color: @border-color;

    & > .btn {
      color: @text-color;
      border-color: @border-color;
    }

    & > .btn:hover {
      background: @background-hover;
    }

    // selected radio
    & > input[type="radio"]:checked + .btn,
    & > .active.btn {
      background-color: @background-active;
    }
  }
}

// Utility classes
.btn-blank {
  border-color: transparent;
  &:hover {
    background-color: transparent;
  }
}

.btn-unstyled {
  outline: 0;
  background: none;
  border: 0;
  color: inherit;
}

.btn-borderless {
  background: none;
  border: none;
  outline: none;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-dropdown {
  border-bottom-width: 1px;
  padding-right: 48px;

  [class*="gb-icon-"],
  .gb-icon-caret-down {
    position: absolute;
    // TODO: generalize positioning
    right: 17px;
    top: 15px;

    font-size: 12px;
  }
}