Misago/misago/emberapp/app/styles/_misago/buttons.less

//
// Forum Buttons
// --------------------------------------------------


.misago-button-active-flavour(@btn-color, @btn-bg, @btn-border) {
  background: darken(@btn-bg, 15%);
  border-color: darken(@btn-bg, 15%);
  box-shadow: none;
  outline: none;
  position: relative;
  top: 2px;

  color: darken(@btn-color, 10%);
}


.misago-button-flavour(@btn-color, @btn-bg, @btn-border) {
  background: @btn-bg;
  border-color: @btn-bg;
  box-shadow: 0px 2px 0px @btn-border;

  color: @btn-color;

  &:hover {
    background: darken(@btn-bg, 10%);
    border-color: darken(@btn-bg, 10%);
    box-shadow: 0px 2px 0px darken(@btn-border, 10%);
    transition-duration: 0.5s;

    color: @btn-color;
  }

  &:active {
    transition-duration: 0.05s;
  }

  &.active, &:active {
    .misago-button-active-flavour(@btn-color, @btn-bg, @btn-border);
  }

  .glyphicon-chevron-down {
    position: relative;
    top: 2px;

    font-size: @font-size-small;
  }

  &.btn-flat {
    background: none;
    border: transparent;
    .box-shadow(none);
    position: static;

    color: @btn-default-color;
    font-weight: bold;

    &:hover {
      background-color: fadeOut(@btn-bg, 90%);
      transition-duration: 0.1s;

      color: @btn-bg;
      text-shadow: none;
    }

    &:active {
      background: fadeOut(@btn-bg, 40%);

      color: lighten(@btn-bg, 50%);
      text-shadow: none;
    }
  }
}


.btn {
  &.btn-default {
    .misago-button-flavour(@btn-default-color, @btn-default-bg, @btn-default-border);

    &.btn-flat {
      &:hover {
        background-color: fadeOut(@btn-default-color, 90%);

        color: @btn-default-color;
      }

      &:active {
        background: fadeOut(@btn-default-color, 40%);

        color: lighten(@btn-default-color, 50%);
      }
    }

    &.text-success {
      color: @brand-success;
    }

    &.text-primary {
      color: @brand-primary;
    }

    &.text-danger {
      color: @brand-danger;
    }

    &.text-warning {
      color: @brand-warning;
    }
  }

  &.btn-primary {
    .misago-button-flavour(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
  }

  &.btn-info {
    .misago-button-flavour(@btn-info-color, @btn-info-bg, @btn-info-border);
  }

  &.btn-success {
    .misago-button-flavour(@btn-success-color, @btn-success-bg, @btn-success-border);
  }

  &.btn-warning {
    .misago-button-flavour(@btn-warning-color, @btn-warning-bg, @btn-warning-border);
  }

  &.btn-danger {
    .misago-button-flavour(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
  }
}

.open .dropdown-toggle {
  &.btn-default {
    &, &:link, &:visited, &:hover , &:active {
      .misago-button-active-flavour(@btn-default-color, @btn-default-bg, @btn-default-border);
    }
  }

  &.btn-primary {
    &, &:link, &:visited, &:hover , &:active {
      .misago-button-active-flavour(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
    }
  }

  &.btn-info {
    &, &:link, &:visited, &:hover , &:active {
      .misago-button-active-flavour(@btn-info-color, @btn-info-bg, @btn-info-border);
    }
  }

  &.btn-success {
    &, &:link, &:visited, &:hover , &:active {
      .misago-button-active-flavour(@btn-success-color, @btn-success-bg, @btn-success-border);
    }
  }

  &.btn-warning {
    &, &:link, &:visited, &:hover , &:active {
      .misago-button-active-flavour(@btn-warning-color, @btn-warning-bg, @btn-warning-border);
    }
  }

  &.btn-danger {
    &, &:link, &:visited, &:hover , &:active {
      .misago-button-active-flavour(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
    }
  }
}