buttons.less 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  1. .btn {
  2. display: inline-block;
  3. padding: 10px 15px;
  4. margin-bottom: 0;
  5. font-size: 14px;
  6. font-weight: normal;
  7. line-height: 1.428571429;
  8. text-align: center;
  9. white-space: nowrap;
  10. vertical-align: middle;
  11. cursor: pointer;
  12. background-image: none;
  13. border: 1px solid transparent;
  14. border-radius: 4px;
  15. -webkit-user-select: none;
  16. -moz-user-select: none;
  17. -ms-user-select: none;
  18. -o-user-select: none;
  19. user-select: none;
  20. }
  21. .btn:focus {
  22. outline: thin dotted;
  23. outline: 5px auto -webkit-focus-ring-color;
  24. outline-offset: -2px;
  25. }
  26. .btn:hover,
  27. .btn:focus {
  28. color: #333333;
  29. text-decoration: none;
  30. }
  31. .btn:active,
  32. .btn.active {
  33. background-image: none;
  34. outline: 0;
  35. -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  36. box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  37. }
  38. .btn.disabled,
  39. .btn[disabled],
  40. fieldset[disabled] .btn {
  41. pointer-events: none;
  42. cursor: not-allowed;
  43. opacity: 0.65;
  44. filter: alpha(opacity=65);
  45. -webkit-box-shadow: none;
  46. box-shadow: none;
  47. }
  48. .btn-default {
  49. color: @brand-white;
  50. background-color: @brand-primary;
  51. border-color: @brand-primary;
  52. }
  53. .btn-default:hover,
  54. .btn-default:focus,
  55. .btn-default:focus,
  56. .btn-default.active,
  57. .open .dropdown-toggle.btn-default {
  58. color: @brand-primary;
  59. background-color: @brand-white;
  60. border-color: @brand-primary;
  61. }
  62. /** pagination */
  63. ul.tblAjax__footer__toolbar__pagination {
  64. list-style-type: none;
  65. li {
  66. display: inline-block;
  67. }
  68. }
  69. ul.btn-group.tblAjax__footer__toolbar__pagination.smad-pagination li:not(:nth-child(1)) a,
  70. ul.btn-group.tblAjax__footer__toolbar__pagination.smad-pagination li:not(:nth-last-child(1)) a {
  71. border-radius: 0;
  72. }
  73. ul.btn-group.tblAjax__footer__toolbar__pagination.smad-pagination li:nth-last-child(1) a {
  74. -webkit-border-top-right-radius: 4px;
  75. -webkit-border-bottom-right-radius: 4px;
  76. -moz-border-radius-topright: 4px;
  77. -moz-border-radius-bottomright: 4px;
  78. border-top-right-radius: 4px;
  79. border-bottom-right-radius: 4px;
  80. }
  81. ul.btn-group.tblAjax__footer__toolbar__pagination.smad-pagination li:nth-child(1) a {
  82. -webkit-border-top-left-radius: 4px;
  83. -webkit-border-bottom-left-radius: 4px;
  84. -moz-border-radius-topleft: 4px;
  85. -moz-border-radius-bottomleft: 4px;
  86. border-top-left-radius: 4px;
  87. border-bottom-left-radius: 4px;
  88. }
  89. .tblAjax__footer__toolbar__pagination {
  90. .btn-default {
  91. color: @brand-primary;
  92. background-color: @brand-white;
  93. border-color: @brand-primary;
  94. }
  95. .btn-default:hover,
  96. .btn-default:focus,
  97. .btn-default:focus,
  98. .btn-default.active,
  99. .open .dropdown-toggle.btn-default {
  100. color: @brand-white;
  101. background-color: @brand-primary;
  102. border-color: @brand-primary;
  103. }
  104. .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  105. border-radius: 0;
  106. }
  107. }
  108. .footer_pagination_menu_items {
  109. display: inline-block;
  110. }
  111. .tblAjax__footer__toolbar__info {
  112. p {
  113. font-size: 12px;
  114. }
  115. }
  116. /* end pagination*/
  117. .btn-default:active:hover {
  118. color: @brand-primary;
  119. background-color: @brand-white;
  120. border-color: @brand-primary;
  121. }
  122. .btn-default:active,
  123. .btn-default.active,
  124. .open .dropdown-toggle.btn-default {
  125. color: @brand-primary;
  126. background-color: @brand-white;
  127. border-color: @brand-primary;
  128. }
  129. .btn-default.disabled,
  130. .btn-default[disabled],
  131. fieldset[disabled] .btn-default,
  132. .btn-default.disabled:hover,
  133. .btn-default[disabled]:hover,
  134. fieldset[disabled] .btn-default:hover,
  135. .btn-default.disabled:focus,
  136. .btn-default[disabled]:focus,
  137. fieldset[disabled] .btn-default:focus {
  138. color: mix(@brand-white, @brand-primary, 50%);
  139. background-color: @brand-white;
  140. border-color: mix(@brand-white, @brand-primary, 50%);
  141. }
  142. .btn-default.disabled:active,
  143. .btn-default[disabled]:active,
  144. fieldset[disabled] .btn-default:active,
  145. .btn-default.disabled.active,
  146. .btn-default[disabled].active,
  147. fieldset[disabled] .btn-default.active {
  148. color: @brand-primary;
  149. background-color: @brand-white;
  150. border-color: @brand-primary;
  151. }
  152. .btn-default .badge {
  153. color: @brand-primary!important;
  154. background-color: #fff;
  155. }
  156. .btn-primary {
  157. color: @brand-primary;
  158. background-color: @brand-white;
  159. border-color: @brand-primary;
  160. }
  161. .btn-primary:hover,
  162. .btn-primary:focus,
  163. .btn-primary:active,
  164. .btn-primary.active,
  165. .open .dropdown-toggle.btn-primary {
  166. color: @brand-white;
  167. background-color: @brand-primary;
  168. border-color: @brand-primary;
  169. }
  170. .btn-primary:active:hover {
  171. color: @brand-white;
  172. background-color: @brand-primary;
  173. border-color: @brand-primary;
  174. }
  175. .btn-primary:active,
  176. .btn-primary:focus,
  177. .btn-primary.active,
  178. .open .dropdown-toggle.btn-primary {
  179. color: @brand-white;
  180. background-color: @brand-primary;
  181. border-color: @brand-primary;
  182. }
  183. .btn-primary.disabled,
  184. .btn-primary[disabled],
  185. fieldset[disabled] .btn-primary,
  186. .btn-primary.disabled:hover,
  187. .btn-primary[disabled]:hover,
  188. fieldset[disabled] .btn-primary:hover,
  189. .btn-primary.disabled:focus,
  190. .btn-primary[disabled]:focus,
  191. fieldset[disabled] .btn-primary:focus,
  192. .btn-primary.disabled:active,
  193. .btn-primary[disabled]:active,
  194. fieldset[disabled] .btn-primary:active,
  195. .btn-primary.disabled.active,
  196. .btn-primary[disabled].active,
  197. fieldset[disabled] .btn-primary.active {
  198. color: @brand-white;
  199. background-color: @brand-primary;
  200. border-color: @brand-primary;
  201. }
  202. .btn-primary .badge {
  203. color: #428bca;
  204. background-color: #fff;
  205. }
  206. .btn-warning {
  207. color: @brand-white;
  208. background-color: @brand-grey;
  209. border-color: @brand-grey;
  210. }
  211. .btn-warning:hover,
  212. .btn-warning:focus,
  213. .btn-warning:active,
  214. .btn-warning.active,
  215. .open .dropdown-toggle.btn-warning {
  216. color: @brand-text;
  217. background-color: @brand-grey;
  218. border-color: @brand-grey;
  219. }
  220. .btn-warning:active:hover {
  221. color: @brand-text;
  222. background-color: @brand-grey;
  223. border-color: @brand-grey;
  224. }
  225. .btn-warning:active,
  226. .btn-warning:focus,
  227. .btn-warning.active,
  228. .open .dropdown-toggle.btn-warning {
  229. color: @brand-text;
  230. background-color: @brand-grey;
  231. border-color: @brand-grey;
  232. }
  233. .btn-warning.disabled,
  234. .btn-warning[disabled],
  235. fieldset[disabled] .btn-warning,
  236. .btn-warning.disabled:hover,
  237. .btn-warning[disabled]:hover,
  238. fieldset[disabled] .btn-warning:hover,
  239. .btn-warning.disabled:focus,
  240. .btn-warning[disabled]:focus,
  241. fieldset[disabled] .btn-warning:focus,
  242. .btn-warning.disabled:active,
  243. .btn-warning[disabled]:active,
  244. fieldset[disabled] .btn-warning:active,
  245. .btn-warning.disabled.active,
  246. .btn-warning[disabled].active,
  247. fieldset[disabled] .btn-warning.active {
  248. color: @brand-text;
  249. background-color: @brand-grey;
  250. border-color: @brand-grey;
  251. }
  252. .btn-warning .badge {
  253. color: #f0ad4e;
  254. background-color: #fff;
  255. }
  256. .btn-danger {
  257. color: #ffffff;
  258. background-color: #d9534f;
  259. border-color: #d43f3a;
  260. }
  261. .btn-danger:hover,
  262. .btn-danger:focus,
  263. .btn-danger:active,
  264. .btn-danger.active,
  265. .open .dropdown-toggle.btn-danger {
  266. color: #ffffff;
  267. background-color: #d2322d;
  268. border-color: #ac2925;
  269. }
  270. .btn-danger:active:hover {
  271. color: #ffffff;
  272. background-color: #d2322d;
  273. border-color: #ac2925;
  274. }
  275. .btn-danger:active,
  276. .btn-danger.active,
  277. .open .dropdown-toggle.btn-danger {
  278. background-image: none;
  279. }
  280. .btn-danger.disabled,
  281. .btn-danger[disabled],
  282. fieldset[disabled] .btn-danger,
  283. .btn-danger.disabled:hover,
  284. .btn-danger[disabled]:hover,
  285. fieldset[disabled] .btn-danger:hover,
  286. .btn-danger.disabled:focus,
  287. .btn-danger[disabled]:focus,
  288. fieldset[disabled] .btn-danger:focus,
  289. .btn-danger.disabled:active,
  290. .btn-danger[disabled]:active,
  291. fieldset[disabled] .btn-danger:active,
  292. .btn-danger.disabled.active,
  293. .btn-danger[disabled].active,
  294. fieldset[disabled] .btn-danger.active {
  295. background-color: #d9534f;
  296. border-color: #d43f3a;
  297. }
  298. .btn-danger .badge {
  299. color: #d9534f;
  300. background-color: #fff;
  301. }
  302. .btn-success {
  303. color: @brand-text;
  304. background-color: @brand-grey;
  305. border-color: @brand-grey;
  306. }
  307. .btn-success:hover,
  308. .btn-success:focus,
  309. .btn-success:active,
  310. .btn-success.active,
  311. .open .dropdown-toggle.btn-success {
  312. color: @brand-white;
  313. background-color: @brand-primary;
  314. border-color: @brand-primary;
  315. }
  316. .btn-success:active:hover {
  317. color: @brand-white;
  318. background-color: @brand-primary;
  319. border-color: @brand-primary;
  320. }
  321. .btn-success:active,
  322. .btn-success.active,
  323. .open .dropdown-toggle.btn-success {
  324. background-image: none;
  325. }
  326. .btn-success.disabled,
  327. .btn-success[disabled],
  328. fieldset[disabled] .btn-success,
  329. .btn-success.disabled:hover,
  330. .btn-success[disabled]:hover,
  331. fieldset[disabled] .btn-success:hover,
  332. .btn-success.disabled:focus,
  333. .btn-success[disabled]:focus,
  334. fieldset[disabled] .btn-success:focus,
  335. .btn-success.disabled:active,
  336. .btn-success[disabled]:active,
  337. fieldset[disabled] .btn-success:active,
  338. .btn-success.disabled.active,
  339. .btn-success[disabled].active,
  340. fieldset[disabled] .btn-success.active {
  341. color: @brand-white;
  342. background-color: @brand-primary;
  343. border-color: @brand-primary;
  344. }
  345. .btn-success .badge {
  346. color: #5cb85c;
  347. background-color: #fff;
  348. }
  349. .btn-info {
  350. color: @brand-secondary!important;
  351. background-color: @brand-white;
  352. border-color: @brand-secondary;
  353. }
  354. .btn-info:hover,
  355. .btn-info:focus,
  356. .btn-info:active,
  357. .btn-info.active,
  358. .open .dropdown-toggle.btn-info {
  359. color: @brand-white!important;
  360. background-color: @brand-secondary;
  361. border-color: @brand-secondary;
  362. }
  363. .btn-info:active:hover {
  364. color: @brand-white!important;
  365. background-color: @brand-secondary;
  366. border-color: @brand-secondary;
  367. }
  368. .btn-info:active,
  369. .btn-info.active,
  370. .open .dropdown-toggle.btn-info {
  371. color: @brand-white!important;
  372. background-color: @brand-secondary;
  373. border-color: @brand-secondary;
  374. }
  375. .btn-info.disabled,
  376. .btn-info[disabled],
  377. fieldset[disabled] .btn-info,
  378. .btn-info.disabled:hover,
  379. .btn-info[disabled]:hover,
  380. fieldset[disabled] .btn-info:hover,
  381. .btn-info.disabled:focus,
  382. .btn-info[disabled]:focus,
  383. fieldset[disabled] .btn-info:focus,
  384. .btn-info.disabled:active,
  385. .btn-info[disabled]:active,
  386. fieldset[disabled] .btn-info:active,
  387. .btn-info.disabled.active,
  388. .btn-info[disabled].active,
  389. fieldset[disabled] .btn-info.active {
  390. color: @brand-white!important;
  391. background-color: @brand-secondary;
  392. border-color: @brand-secondary;
  393. }
  394. .btn-info .badge {
  395. color: #5bc0de;
  396. background-color: #fff;
  397. }
  398. .btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  399. cursor: not-allowed;
  400. filter: alpha(opacity=65);
  401. -webkit-box-shadow: none;
  402. box-shadow: none;
  403. opacity: .65;
  404. }