Misago/frontend/style/flavor/buttons.less

//
// Buttons Flavor
// --------------------------------------------------


// mixins
.misago-btn(@color, @bg, @color-hover, @bg-hover, @color-active, @bg-active) {
  &,
  &:disabled, &:disabled:hover,
  &.disabled, &.disabled:hover, &.disabled:active {
    background: @bg;
    border: 1px solid @bg;

    color: @color;

    .box-shadow(none);
  }

  &:disabled, &:disabled:hover,
  &.disabled, &.disabled:hover, &.disabled:active {
    .opacity(0.25);
  }

  &:hover, &:focus {
    background: @bg-hover;
    border: 1px solid @bg-hover;

    color: @color-hover;
  
    .box-shadow(none);
  }

  &:active:focus, &:active,
  .dropdown.open &,
  .dropdown.open &:focus,
  .dropdown.open &:active:focus,
  .dropdown.open &:hover {
    background: @bg-active;
    border: 1px solid @bg-active;

    color: @color-active;

    .box-shadow(none);
  }

  &.btn-loading {
    &, &:disabled, &:disabled:hover,
    &:hover, &:focus,
    &:active:focus, &:active {
      color: transparent;
    }
  }
}

.misago-btn-outline(@color, @bg, @border,
                    @color-hover, @bg-hover, @border-hover,
                    @color-active, @bg-active, @border-active) {
  &, &:disabled, &:disabled:hover,
  &.disabled, &.disabled:hover, &.disabled:active {
    background: @bg;
    border: 1px solid @border;

    color: @color;

    .box-shadow(none);
  }

  &:disabled, &:disabled:hover,
  &.disabled, &.disabled:hover, &.disabled:active {
    .opacity(0.25);
  }

  &:hover, &:focus {
    background: @bg-hover;
    border: 1px solid @border-hover;

    color: @color-hover;

    .box-shadow(none);
  }

  &:active:focus, &:active,
  .dropdown.open &,
  .dropdown.open &:focus,
  .dropdown.open &:active:focus,
  .dropdown.open &:hover {
    background: @bg-active;
    border: 1px solid @border-active;

    color: @color-active;

    .box-shadow(none);
  }

  &.btn-loading {
    &, &:disabled, &:disabled:hover,
    &:hover, &:focus,
    &:active:focus, &:active {
      background: @bg;
      border: 1px solid @border;

      color: transparent;

      .box-shadow(none);
    }
  }
}


// button styles
.btn-default {
  .misago-btn(
    @btn-default-color,
    @btn-default-bg,

    @btn-default-hover-color,
    @btn-default-hover-bg,

    @btn-default-active-color,
    @btn-default-active-bg
  );
}

.btn-primary {
  .misago-btn(
    @btn-primary-color,
    @btn-primary-bg,

    @btn-primary-hover-color,
    @btn-primary-hover-bg,

    @btn-primary-active-color,
    @btn-primary-active-bg
  );
}

.btn-success {
  .misago-btn(
    @btn-success-color,
    @btn-success-bg,

    @btn-success-hover-color,
    @btn-success-hover-bg,

    @btn-success-active-color,
    @btn-success-active-bg
  );
}

.btn-danger {
  .misago-btn(
    @btn-danger-color,
    @btn-danger-bg,

    @btn-danger-hover-color,
    @btn-danger-hover-bg,

    @btn-danger-active-color,
    @btn-danger-active-bg
  );
}


// outlined button styles
.btn-default.btn-outline {
  .misago-btn-outline(
    @btn-default-outline-color,
    @btn-default-outline-bg,
    @btn-default-outline-border,

    @btn-default-outline-hover-color,
    @btn-default-outline-hover-bg,
    @btn-default-outline-hover-border,

    @btn-default-outline-active-color,
    @btn-default-outline-active-bg,
    @btn-default-outline-active-border
  );
}

.btn-primary.btn-outline {
  .misago-btn-outline(
    @btn-primary-outline-color,
    @btn-primary-outline-bg,
    @btn-primary-outline-border,

    @btn-primary-outline-hover-color,
    @btn-primary-outline-hover-bg,
    @btn-primary-outline-hover-border,

    @btn-primary-outline-active-color,
    @btn-primary-outline-active-bg,
    @btn-primary-outline-active-border
  );
}


// sign in and register buttons in navbar
.navbar-misago {
  .btn-sign-in {
    border-radius: @navbar-btn-sign-in-radius;

    .misago-btn-outline(
      @navbar-btn-sign-in-color,
      @navbar-btn-sign-in-bg,
      @navbar-btn-sign-in-border,

      @navbar-btn-sign-in-hover-color,
      @navbar-btn-sign-in-hover-bg,
      @navbar-btn-sign-in-hover-border,

      @navbar-btn-sign-in-active-color,
      @navbar-btn-sign-in-active-bg,
      @navbar-btn-sign-in-active-border
    );
  }

  .btn-register {
    border-radius: @navbar-btn-register-radius;

    .misago-btn-outline(
      @navbar-btn-register-color,
      @navbar-btn-register-bg,
      @navbar-btn-register-border,

      @navbar-btn-register-hover-color,
      @navbar-btn-register-hover-bg,
      @navbar-btn-register-hover-border,

      @navbar-btn-register-active-color,
      @navbar-btn-register-active-bg,
      @navbar-btn-register-active-border
    );
  }
}