Button.less 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. // Button
  2. .@{prefix}-btn {
  3. border: 1px solid mix(rgb(red(@btn-border-right), green(@btn-border-right), blue(@btn-border-right)), @panel-bg, 30%);
  4. border-color: @btn-border-top @btn-border-right @btn-border-bottom @btn-border-left;
  5. position: relative;
  6. text-shadow: @text-shadow;
  7. .inline-block();
  8. .border-radius(3px);
  9. .box-shadow(@btn-box-shadow);
  10. .vertical-gradient(@btn-bg, @btn-bg-hlight);
  11. &:hover, &:focus {
  12. color: @btn-text;
  13. .vertical-gradient(darken(@btn-bg, 5%), darken(@btn-bg-hlight, 5%));
  14. }
  15. &.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {
  16. cursor: default;
  17. .box-shadow(none);
  18. .opacity(@btn-box-disabled-opacity);
  19. }
  20. &.@{prefix}-active, &.@{prefix}-active:hover {
  21. .vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 10%));
  22. .box-shadow(@btn-box-shadow-active);
  23. }
  24. &:not(.@{prefix}-disabled):active {
  25. .vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 10%));
  26. .box-shadow(@btn-box-shadow-active);
  27. }
  28. }
  29. .@{prefix}-btn button {
  30. padding: 4px 10px;
  31. font-size: @font-size;
  32. line-height: @line-height;
  33. *line-height: @line-height - 4px;
  34. cursor: pointer;
  35. color: @btn-text;
  36. text-align: center;
  37. // Fixes for default inner padding of button
  38. overflow: visible; // IE7
  39. -webkit-appearance: none; // WebKit
  40. &::-moz-focus-inner { // Gecko
  41. border: 0;
  42. padding: 0;
  43. }
  44. }
  45. .@{prefix}-btn i {
  46. text-shadow: 1px 1px @btn-text-shadow;
  47. }
  48. .@{prefix}-primary {
  49. min-width: 50px;
  50. color: @btn-primary-text;
  51. border: 1px solid mix(rgb(red(@btn-border-right), green(@btn-border-right), blue(@btn-border-right)), @panel-bg, 30%);
  52. border-color: @btn-border-top @btn-border-right @btn-border-bottom @btn-border-left;
  53. .vertical-gradient(@btn-primary-bg, @btn-primary-bg-hlight);
  54. &:hover, &:focus {
  55. .vertical-gradient(darken(@btn-primary-bg, 5%), darken(@btn-primary-bg-hlight, 5%));
  56. }
  57. &.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {
  58. cursor: default;
  59. .box-shadow(none);
  60. .opacity(@btn-box-disabled-opacity);
  61. }
  62. &.@{prefix}-active, &.@{prefix}-active:hover, &:not(.@{prefix}-disabled):active {
  63. .vertical-gradient(darken(@btn-primary-bg, 10%), darken(@btn-primary-bg-hlight, 10%));
  64. .box-shadow(@btn-box-shadow-active);
  65. }
  66. }
  67. .@{prefix}-primary button, .@{prefix}-primary button i {
  68. color: @btn-primary-text;
  69. text-shadow: 1px 1px @btn-primary-text-shadow;
  70. }
  71. .@{prefix}-btn-large button {
  72. padding: 9px 14px;
  73. font-size: @font-size + 2px;
  74. line-height: normal;
  75. .border-radius(5px);
  76. }
  77. .@{prefix}-btn-large i {
  78. margin-top: 2px;
  79. }
  80. .@{prefix}-btn-small button {
  81. padding: 1px 5px;
  82. font-size: @font-size - 2px;
  83. *padding-bottom: 2px;
  84. }
  85. .@{prefix}-btn-small i {
  86. line-height: 20px;
  87. vertical-align: top;
  88. *line-height: 18px;
  89. }
  90. .@{prefix}-btn .@{prefix}-caret {
  91. margin-top: 8px;
  92. margin-left: 0;
  93. }
  94. .@{prefix}-btn-small .@{prefix}-caret {
  95. margin-top: 8px;
  96. margin-left: 0;
  97. }
  98. .@{prefix}-caret {
  99. .inline-block();
  100. width: 0; height: 0;
  101. vertical-align: top;
  102. border-top: 4px solid @btn-caret-border;
  103. border-right: 4px solid transparent;
  104. border-left: 4px solid transparent;
  105. content: "";
  106. }
  107. .@{prefix}-disabled .@{prefix}-caret {
  108. border-top-color: @text-disabled;
  109. }
  110. .@{prefix}-caret.@{prefix}-up {
  111. border-bottom: 4px solid @btn-caret-border;
  112. border-top: 0;
  113. }
  114. // RTL
  115. .@{prefix}-rtl .@{prefix}-btn button {
  116. direction: rtl;
  117. }