form.less 3.3 KB

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