buttons.less 2.2 KB

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