Misago/static/cranefly/css/cranefly/buttons.less

// Buttons styles
// -------------------------

.btn {
  background: none;
  background-color: @bodyBackground;
  .box-shadow(none);

  color: @grayLight;
  font-weight: bold;

  i {
  	margin-right: 6px;
  }

  &:hover, &:active {
    background-color: @white;
    border-color: lighten(@grayLight, 5%);

    color: @grayDark;
  }

  &.btn-primary {
    background-color: @bluePale;
    border-color: darken(@bluePale, 5%);

    color: @white;
    text-shadow: 0px 1px 0px darken(@bluePale, 15%);

    &:hover, &:active {
      color: @white;

      &:enabled {
        background-color: saturate(@bluePale, 20%);
        border-color: darken(saturate(@bluePale, 20%), 5%);
      }
    }
  }

  &.btn-info {
    background-color: desaturate(@bluePale, 25%);
    border-color: darken(desaturate(@bluePale, 25%), 5%);

    color: @white;
    text-shadow: 0px 1px 0px darken(desaturate(@bluePale, 25%), 15%);

    &:hover, &:active {
      color: @white;

      &:enabled {
        background-color: desaturate(@bluePale, 10%);
        border-color: darken(desaturate(@bluePale, 10%), 5%);
      }
    }
  }

  &.btn-success {
    background-color: desaturate(@green, 15%);
    border-color: darken(desaturate(@green, 15%), 5%);

    color: @white;
    text-shadow: 0px 1px 0px darken(@green, 15%);

    &:hover, &:active {
      color: @white;

      &:enabled {
        background-color: @green;
        border-color: darken(@green, 5%);
      }
    }
  }

  &.btn-warning {
    background-color: desaturate(@orange, 15%);
    border-color: darken(desaturate(@orange, 15%), 5%);

    color: @white;
    text-shadow: 0px 1px 0px darken(@orange, 15%);

    &:hover, &:active {
      color: @white;

      &:enabled {
        background-color: @orange;
        border-color: darken(@orange, 5%);
      }
    }
  }

  &.btn-danger {
    background-color: @red;
    border-color: darken(@red, 5%);

    color: @white;
    text-shadow: 0px 1px 0px darken(@red, 15%);

    &:hover, &:active {
      color: @white;

      &:enabled {
        background-color: saturate(@red, 20%);
        border-color: darken(saturate(@red, 20%), 5%);
      }
    }
  }

  &.btn-inverse {
    background-color: @textColor;
    border-color: darken(@textColor, 5%);

    color: @white;
    text-shadow: 0px 1px 0px darken(@textColor, 15%);

    &:hover, &:active {
    	background-color: lighten(@textColor, 10%);

      &:enabled {
        background-color: darken(@textColor, 5%);
        border-color: darken(@textColor, 10%);
      }
    }
  }

  &.btn-link {
    background: none;
    border: none;

    color: @grayLight;

    &:hover, &:active, &:focus {
    	color: @textColor;

      &:enabled {
        text-decoration: none;
      }
    }
  }

  &.btn-icon {
  	padding-left: 0px !important;
  	padding-right: 0px !important;
  	width: 32px;

  	text-align: center;

  	i {
  		margin: 0px;
  	}
  }
}

a.btn-link {
  &:hover, &:active, &:focus {
    color: @textColor;
    text-decoration: none;
  }
}