Button.less 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  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. border-color: @btn-border-hover;
  15. }
  16. &.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {
  17. cursor: default;
  18. .box-shadow(none);
  19. .opacity(@btn-box-disabled-opacity);
  20. }
  21. &.@{prefix}-active, &.@{prefix}-active:hover {
  22. .vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 5%));
  23. .box-shadow(@btn-box-shadow-active);
  24. border-color: darken(@btn-bg, 20%);
  25. }
  26. &:active {
  27. .vertical-gradient(darken(@btn-bg, 7%), darken(@btn-bg-hlight, 5%));
  28. .box-shadow(@btn-box-shadow-active);
  29. border-color: @btn-border-active;
  30. }
  31. }
  32. .@{prefix}-btn button {
  33. padding: @btn-padding;
  34. font-size: @font-size;
  35. line-height: @line-height;
  36. *line-height: @line-height - 4px;
  37. cursor: pointer;
  38. color: @btn-text;
  39. text-align: center;
  40. // Fixes for default inner padding of button
  41. overflow: visible; // IE7
  42. -webkit-appearance: none; // WebKit
  43. &::-moz-focus-inner { // Gecko
  44. border: 0;
  45. padding: 0;
  46. }
  47. }
  48. .@{prefix}-btn i {
  49. text-shadow: 1px 1px @btn-text-shadow;
  50. }
  51. .@{prefix}-primary.@{prefix}-btn-has-text {
  52. min-width: 50px;
  53. }
  54. .@{prefix}-primary {
  55. color: @btn-primary-text;
  56. border: 1px solid transparent;
  57. border-color: @btn-primary-border;
  58. .vertical-gradient(@btn-primary-bg, @btn-primary-bg-hlight);
  59. &:hover, &:focus {
  60. .vertical-gradient(darken(@btn-primary-bg, 5%), darken(@btn-primary-bg-hlight, 5%));
  61. border-color: @btn-primary-border-hover;
  62. }
  63. &.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {
  64. cursor: default;
  65. .box-shadow(none);
  66. .opacity(@btn-box-disabled-opacity);
  67. }
  68. &.@{prefix}-active, &.@{prefix}-active:hover, &:not(.@{prefix}-disabled):active {
  69. .vertical-gradient(darken(@btn-primary-bg, 10%), darken(@btn-primary-bg-hlight, 10%));
  70. .box-shadow(@btn-box-shadow-active);
  71. }
  72. }
  73. .@{prefix}-primary button, .@{prefix}-primary button i {
  74. color: @btn-primary-text;
  75. text-shadow: 1px 1px @btn-primary-text-shadow;
  76. }
  77. .@{prefix}-btn .@{prefix}-txt {
  78. font-size: inherit;
  79. line-height: inherit;
  80. color: inherit;
  81. }
  82. .@{prefix}-btn-large button {
  83. padding: 9px 14px;
  84. font-size: @font-size + 2px;
  85. line-height: normal;
  86. .border-radius(5px);
  87. }
  88. .@{prefix}-btn-large i {
  89. margin-top: 2px;
  90. }
  91. .@{prefix}-btn-small button {
  92. padding: 1px 5px;
  93. font-size: @font-size - 2px;
  94. *padding-bottom: 2px;
  95. }
  96. .@{prefix}-btn-small i {
  97. line-height: 20px;
  98. vertical-align: top;
  99. *line-height: 18px;
  100. }
  101. .@{prefix}-btn .@{prefix}-caret {
  102. margin-top: 8px;
  103. margin-left: 0;
  104. }
  105. .@{prefix}-btn-small .@{prefix}-caret {
  106. margin-top: 8px;
  107. margin-left: 0;
  108. }
  109. .@{prefix}-caret {
  110. .inline-block();
  111. width: 0; height: 0;
  112. vertical-align: top;
  113. border-top: 4px solid @btn-caret-border;
  114. border-right: 4px solid transparent;
  115. border-left: 4px solid transparent;
  116. content: "";
  117. }
  118. .@{prefix}-disabled .@{prefix}-caret {
  119. border-top-color: @text-disabled;
  120. }
  121. .@{prefix}-caret.@{prefix}-up {
  122. border-bottom: 4px solid @btn-caret-border;
  123. border-top: 0;
  124. }
  125. .@{prefix}-btn-flat {
  126. border: 0;
  127. background: transparent;
  128. .border-radius(0);
  129. .box-shadow(none);
  130. filter: none;
  131. }
  132. .@{prefix}-btn-flat:hover, .@{prefix}-btn-flat.@{prefix}-active, .@{prefix}-btn-flat:focus, .@{prefix}-btn-flat:active {
  133. border: 0;
  134. background: @menubar-bg-active;
  135. filter: none;
  136. .box-shadow(none);
  137. }
  138. .@{prefix}-btn-has-text .@{prefix}-ico {
  139. padding-right: 5px;
  140. }
  141. // RTL
  142. .@{prefix}-rtl .@{prefix}-btn button {
  143. direction: rtl;
  144. }