form.less 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. @import "var";
  2. // Button.
  3. .btn {
  4. white-space: nowrap;
  5. }
  6. .btn-small {
  7. font-size: 0.9*@baseFontSize;
  8. padding: .4em .9em;
  9. }
  10. .btn-medium {
  11. font-size: @baseFontSize;
  12. padding: .4em .9em;
  13. }
  14. .btn-large {
  15. font-size: 1.2*@baseFontSize;
  16. }
  17. .btn-green {
  18. background-color: @btnGreenColor;
  19. border: 1px solid @btnGreenColor;
  20. &:hover {
  21. background-color: @btnHoverGreenColor;
  22. color: #FFF;
  23. }
  24. }
  25. .btn-blue {
  26. background-color: @btnBlueColor;
  27. border: 1px solid @btnBlueColor;
  28. &:hover {
  29. background-color: @btnHoverBlueColor;
  30. color: #FFF;
  31. }
  32. }
  33. .btn-red {
  34. color: #FFF;
  35. background-color: @btnRedColor;
  36. border: 1px solid @btnRedColor;
  37. &:hover {
  38. background-color: @btnHoverRedColor;
  39. color: #FFF;
  40. }
  41. }
  42. .btn-orange {
  43. background-color: @btnOrangeColor;
  44. border: 1px solid @btnOrangeColor;
  45. &:hover {
  46. background-color: @btnHoverOrangeColor;
  47. color: #FFF;
  48. }
  49. }
  50. .btn-black {
  51. background-color: @btnBlackColor;
  52. border: 1px solid @btnBlackColor;
  53. &:hover {
  54. background-color: @btnHoverBlackColor;
  55. color: #FFF;
  56. }
  57. }
  58. .btn-gray {
  59. background-color: @btnGrayColor;
  60. color: @baseFontColor;
  61. border: 1px solid @btnGrayBorderColor;
  62. &:hover {
  63. background-color: @btnGrayHoverColor;
  64. color: @baseFontColor;
  65. }
  66. }
  67. // status buttons
  68. .btn-active {
  69. box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset, 0 0 4px rgba(0, 0, 0, .15) inset
  70. }
  71. .btn-header {
  72. margin-top: -1px;
  73. color: white;
  74. padding: 0 10px;
  75. }
  76. .btn-link {
  77. overflow: visible;
  78. color: white;
  79. padding: .6em 1.2em;
  80. }
  81. .btn-radius {
  82. border-radius: .25em;
  83. }
  84. .btn-left-radius {
  85. border-top-left-radius: .25em;
  86. border-bottom-left-radius: .25em;
  87. }
  88. .btn-right-radius {
  89. border-top-right-radius: .25em;
  90. border-bottom-right-radius: .25em;
  91. }
  92. .btn-block {
  93. display: block;
  94. width: 100%;
  95. box-sizing: content-box;
  96. text-align: center;
  97. }
  98. .btn-comb {
  99. margin-left: -1px;
  100. }
  101. .btn-disabled {
  102. opacity: .6;
  103. cursor: not-allowed;
  104. box-shadow: none;
  105. background-image: none !important;
  106. border: none;
  107. &:hover {
  108. background-image: none !important;
  109. color: @btnHoverFontColor;
  110. }
  111. }
  112. // input form elements
  113. .ipt {
  114. &:focus {
  115. border-color: @iptFocusBorderColor;
  116. }
  117. }
  118. .ipt-radius {
  119. border-radius: .25em;
  120. }
  121. .ipt-small {
  122. font-size: .8*@baseFontSize;
  123. }
  124. .ipt-large {
  125. font-size: 1.2*@baseFontSize;
  126. }
  127. .ipt-textarea {
  128. height: auto !important;
  129. width: auto;
  130. }
  131. .ipt-disabled,
  132. input[disabled] {
  133. background-color: @iptDisabledColor !important;
  134. &:focus {
  135. background-color: @iptDisabledColor !important;
  136. }
  137. color: #888;
  138. cursor: not-allowed;
  139. }
  140. .ipt-readonly,
  141. input[readonly] {
  142. &:focus {
  143. background-color: @iptDisabledColor !important;
  144. }
  145. }
  146. .ipt-error {
  147. border-color: @iptErrorBorderColor !important;
  148. background-color: @iptErrorFocusColor !important;
  149. }
  150. .form {
  151. label {
  152. margin-right: 1em;
  153. }
  154. .help {
  155. color: @formHelpFontColor;
  156. padding-top: .6em;
  157. display: inline-block;
  158. }
  159. }
  160. .form-stack {
  161. label {
  162. display: block;
  163. }
  164. .field {
  165. margin-bottom: 1em;
  166. }
  167. }
  168. .form-align {
  169. label,
  170. .form-label {
  171. display: inline-block;
  172. width: 120px;
  173. text-align: right;
  174. margin-right: 1em;
  175. }
  176. .field {
  177. margin-bottom: 1em;
  178. }
  179. }
  180. label {
  181. &.text-left {
  182. text-align: left;
  183. }
  184. &.req {
  185. &:after {
  186. content: "*";
  187. color: @labelRedColor;
  188. }
  189. }
  190. }