app.buttons.less 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. .btn{
  2. font-weight: 500;
  3. border-radius: @btn-border-radius;
  4. outline: 0!important;
  5. }
  6. .btn-link{
  7. color: @text-color;
  8. &.active{
  9. webkit-box-shadow:none;
  10. box-shadow:none;
  11. }
  12. }
  13. .btn-default{
  14. .button-variant(@text-color, @btn-default-bg, @btn-default-border);
  15. background-color: #fff;
  16. border-bottom-color: darken(@btn-default-border, 2%);
  17. .box-shadow(0 1px 1px rgba(90,90,90,0.1));
  18. &.btn-bg{
  19. border-color:rgba(0,0,0,0.1);
  20. background-clip: padding-box;
  21. }
  22. }
  23. .btn-primary{
  24. .button-variant(#fff, @brand-primary, @brand-primary);
  25. }
  26. .btn-success{
  27. .button-variant(#fff, @brand-success, @brand-success);
  28. }
  29. .btn-info{
  30. .button-variant(#fff, @brand-info, @brand-info);
  31. }
  32. .btn-warning{
  33. .button-variant(#fff, @brand-warning, @brand-warning);
  34. }
  35. .btn-danger{
  36. .button-variant(#fff, @brand-danger, @brand-danger);
  37. }
  38. .btn-dark{
  39. .button-variant(#fff, @brand-dark, @brand-dark);
  40. }
  41. .btn-black{
  42. .button-variant(#fff, @brand-black, @brand-black);
  43. }
  44. .btn-icon{
  45. padding: 0 !important;
  46. text-align: center;
  47. width:34px;
  48. height: 34px;
  49. i{
  50. top: -1px;
  51. position: relative;
  52. line-height: 34px;
  53. }
  54. &.btn-sm{
  55. width: 30px;
  56. height: 30px;
  57. i{
  58. line-height: 30px;
  59. }
  60. }
  61. &.btn-lg{
  62. width: 45px;
  63. height: 45px;
  64. i{
  65. line-height: 45px;
  66. }
  67. }
  68. }
  69. .btn-rounded{
  70. border-radius: 50px;
  71. padding-left: 15px;
  72. padding-right: 15px;
  73. &.btn-lg{
  74. padding-left: 25px;
  75. padding-right: 25px;
  76. }
  77. }
  78. .btn{
  79. > i{
  80. &.pull-left,
  81. &.pull-right{
  82. line-height: @line-height-base;
  83. }
  84. }
  85. }
  86. .btn-block {
  87. padding-left: 12px;
  88. padding-right: 12px;
  89. }
  90. .btn-group-vertical > .btn:first-child:not(:last-child){
  91. border-top-right-radius: @border-radius-base;
  92. }
  93. .btn-group-vertical > .btn:last-child:not(:first-child){
  94. border-bottom-left-radius: @border-radius-base;
  95. }
  96. .btn-addon {
  97. i{
  98. margin: -7px -12px;
  99. margin-right: 12px;
  100. background-color: rgba(0, 0, 0, 0.1);
  101. width: 34px;
  102. height: 34px;
  103. line-height: 34px;
  104. text-align: center;
  105. float: left;
  106. position: relative;
  107. border-radius: @btn-border-radius 0 0 @btn-border-radius;
  108. &.pull-right{
  109. margin-right: -12px;
  110. margin-left: 12px;
  111. border-radius: 0 @btn-border-radius @btn-border-radius 0;
  112. }
  113. }
  114. &.btn-sm{
  115. i{
  116. margin: -6px -10px;
  117. margin-right: 10px;
  118. width: 30px;
  119. height: 30px;
  120. line-height: 30px;
  121. &.pull-right{
  122. margin-right: -10px;
  123. margin-left: 10px;
  124. }
  125. }
  126. }
  127. &.btn-lg{
  128. i{
  129. margin: -11px -16px;
  130. margin-right: 16px;
  131. width: 45px;
  132. height: 45px;
  133. line-height: 45px;
  134. &.pull-right{
  135. margin-right: -16px;
  136. margin-left: 16px;
  137. }
  138. }
  139. }
  140. &.btn-default{
  141. i{
  142. background-color: transparent;
  143. border-right: 1px solid @border-color;
  144. }
  145. }
  146. }
  147. .btn-groups .btn{
  148. margin-bottom: 5px;
  149. }