causeway-standard-theme/causeway/components/buttons.less

// Buttons
// --------------------------------------------------
.btn {
  border-radius: 0;
  border: none;
  outline: none;
  font-weight: bold;
  line-height: 1;
  margin-right: 10px;
  text-shadow: none;
  text-decoration: none;

  .glyphicon {
    vertical-align: middle;
    top: -2px;
  }
  &:last-child, &:last-of-type {
    margin-right: 0;
  }
  &:active,
  .active {
    .box-shadow(none);
  }
}

.btn-default {
  color: @white;
  padding: 6px 30px;
  @media @desktop{
    padding: 6px 12px;
  }
  background-color: @enterprise-blue;

  .caret {
    border-bottom-color: @white;
    border-top-color: @white;
    top: 0;
  }

  &:hover,
  &:active,
  &:focus,
  &.active {
    color: @white;
    background-color: @enterprise-dark-blue;
  }

  &:hover {
    &:active {
      color: @white;
      background-color: @enterprise-dark-blue;
    }
  }

  &[disabled] {
    color: @black060;
    background-color: @black040;
    outline: none;
    &:hover,
    &:active,
    &.active {
      color: @black060;
      background-color: @black040;
    }
  }
}

.btn-icon {
  padding: 6px 6px;
}

.btn-with-icon {
  .glyphicon {
    margin-left: 5px;
  }
}

.btn-arrow {
  background: url('../images/arrow-button.png') 0 0 transparent;
  border: none;
  margin: 0;
  padding: 0;
  height: 26px;
  width: 14px;

  &:focus {
    background-position: 0 0;
  }

  &:hover,
  &:active,
  &.active {
    background-position: 0 -26px;
  }

  &[disabled] {
    background-position: 0 -52px;
  }
}

.btn-text {
  background-color: transparent;
  clear: both;
  color: @black080;
  font-weight: normal;
  line-height: @line-height-base;
  padding: 0 10px;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  width: auto;
  .inline;
  &[disabled] {
    color: @black060;
    &:hover {
      text-decoration: none;
    }
  }

  &:active {
    .box-shadow(none);
  }
}
.btn-text, .btn-filter{
  &:hover {
    text-decoration: underline
  }
}
.btn-text, .btn-filter{
  &.active.focus, &.active:focus, &.focus, &:active.focus, &:active:focus, &:focus{
    outline: none;
  }
}  
.btn-text, .btn-group-text {
  + .btn-default {
    margin-left: 20px;
    .form-buttons-row & {
      margin-left: 20px;
    }
  }

}

.btn-group {
  &.btn-dropdown {
    > .btn {
        background-color: @enterprise-blue;
        border: none;
        color: @white;
    }
  }
  &.open {
    .dropdown-toggle {
      .box-shadow(none);
    }
    > .dropdown-toggle {
      &.btn-default {
        &:hover, &:active, &:focus {
          background-color: @blue;
          .box-shadow(none);
        }
      }
    }
  }

  > .btn {
    margin-right: 0;
    background-color: @black005;
    border: 1px solid @black020;
    color: @black080;

    &:hover, &:active, &:focus {
      background-color: @enterprise-dark-blue;
      color: @white;
      border-color: @blue;
    }
    &[disabled='disabled'] {
      background-color: @black040;
      color: @black060;
      border-color: @black040;
    }
  }
  
}

.btn-dropdown {
  margin-right: 10px;

  .btn {
    margin-right: 0;
  }

  > .btn-default .caret {
    border-bottom-color: @white;
    border-top-color: @white;
  }

  &.open > .btn-default {
    color: @white;
    background-color: @enterprise-blue;

    .caret {
      border-bottom-color: @white;
      border-top-color: @white;
    }
    &:hover {
      &:active {
        color: @white;
        background-color: @blue;
      }
    }
  }

  .dropdown-menu {
    min-width: 100%;

    > li > .btn {
      .btn-text;
      margin-left: 0;
      width: 100%;
      padding: 3px 20px;
      text-decoration: none;

      &:hover,
      &:focus {
        background-color: @enterprise-blue;
        color: @white;
      }
    }
  }
}


@media @desktop {

  .btn {
    min-height: 36px;
    &.btn-arrow {
      min-height: 0;
    }
  }
  .btn-icon {
    padding: 6px 14px;
  }

}