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

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

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

  font-weight: bold;
  
  i {
    .opacity(60);
    position: relative;
    bottom: 1px;
  }

  &:hover, &:active {
    background-color: @white;
    border-color: lighten(@grayLight, 5%);
  
    i {
      .opacity(90);
    }
  }

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

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

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

    i {
      background-image: url("@{iconWhiteSpritePath}");
    }
  }

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

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

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

    i {
      background-image: url("@{iconWhiteSpritePath}");
    }
  }

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

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

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

    i {
      background-image: url("@{iconWhiteSpritePath}");
    }
  }

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

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

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

    i {
      background-image: url("@{iconWhiteSpritePath}");
    }
  }

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

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

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

    i {
      background-image: url("@{iconWhiteSpritePath}");
    }
  }

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

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

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

    i {
      background-image: url("@{iconWhiteSpritePath}");
    }
  }

  &.btn-link {
    background: none;
    border: none;
    .opacity(70);

    color: @textColor;

    &:hover, &:active, &:focus {
      &:enabled {
        .opacity(90);
        
        text-decoration: none;
      }
    }
  }


  &.btn-primary, &.btn-info, &.btn-success, &.btn-warning, &.btn-danger, &.btn-inverse, &.btn-link {
    i {
      .opacity(100);
    }
  }
}

a.btn-link {
  &:hover, &:active, &:focus {
    .opacity(90);

    color: @textColor;
    text-decoration: none;
  }
}