buttons.less 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. .button-colors (@btnColor) {
  2. background: @btnColor;
  3. border: 1px solid @btnColor;
  4. *border: 0;
  5. }
  6. .button-icon (@default, @hover: 100) {
  7. i {
  8. .opacity(@default);
  9. }
  10. &:hover, &:active {
  11. i {
  12. .opacity(@hover);
  13. }
  14. }
  15. }
  16. .button-style (@background, @highlight) {
  17. .button-colors(@background);
  18. color: darken(@white, 3%);
  19. text-shadow: 0px 1px 0px darken(@background, 5%);
  20. &:hover, &:active {
  21. .button-colors(@highlight);
  22. }
  23. }
  24. .btn {
  25. .button-colors(@btnBackground);
  26. .box-shadow(none);
  27. padding: 4px 10px;
  28. color: lighten(@gray, 10%);
  29. font-weight: bold;
  30. text-shadow: none;
  31. &:hover, &:active {
  32. .button-colors(@btnBackgroundHighlight);
  33. box-shadow: none;
  34. color: @linkColor;
  35. }
  36. .button-icon(70);
  37. &.btn-primary,
  38. &.btn-info,
  39. &.btn-success,
  40. &.btn-warning,
  41. &.btn-danger,
  42. &.btn-inverse {
  43. .button-icon(90);
  44. color: darken(@white, 5%);
  45. &:hover, &:active {
  46. color: @white;
  47. }
  48. }
  49. &.btn-primary {
  50. .button-colors(@btnPrimaryBackground);
  51. .button-style(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
  52. }
  53. &.btn-info {
  54. .button-colors(@btnInfoBackground);
  55. .button-style(@btnInfoBackground, @btnInfoBackgroundHighlight);
  56. }
  57. &.btn-success {
  58. .button-colors(@btnSuccessBackground);
  59. .button-style(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
  60. }
  61. &.btn-warning {
  62. .button-colors(@btnWarningBackground);
  63. .button-style(@btnWarningBackground, @btnWarningBackgroundHighlight);
  64. }
  65. &.btn-danger {
  66. .button-colors(@btnDangerBackground);
  67. .button-style(@btnDangerBackground, @btnDangerBackgroundHighlight);
  68. }
  69. &.btn-inverse {
  70. .button-colors(@btnInverseBackground);
  71. .button-style(@btnInverseBackground, @btnInverseBackgroundHighlight);
  72. }
  73. &.btn-link {
  74. background: none;
  75. border: none;
  76. &:hover, &:active {
  77. color: @linkColorHover;
  78. text-decoration: none;
  79. }
  80. }
  81. }