buttons.less 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. //
  2. // Buttons
  3. // --------------------------------------------------
  4. // Button loading style
  5. .btn.btn-loading {
  6. &, &:link, &:active, &:visited, &:hover, &:focus {
  7. // make text transparent, but still take place in button
  8. color: transparent;
  9. // position loader over the text
  10. .loader {
  11. height: 20px;
  12. margin-top: -20px;
  13. & > div {
  14. width: 20px;
  15. height: 20px;
  16. }
  17. }
  18. }
  19. &.btn-default .loader > div {
  20. border-top-color: @btn-default-color;
  21. border-bottom-color: @btn-default-color;
  22. }
  23. &.btn-primary .loader > div {
  24. border-top-color: @btn-primary-color;
  25. border-bottom-color: @btn-primary-color;
  26. }
  27. &.btn-success .loader > div {
  28. border-top-color: @btn-success-color;
  29. border-bottom-color: @btn-success-color;
  30. }
  31. &.btn-info .loader > div {
  32. border-top-color: @btn-info-color;
  33. border-bottom-color: @btn-info-color;
  34. }
  35. &.btn-warning .loader > div {
  36. border-top-color: @btn-warning-color;
  37. border-bottom-color: @btn-warning-color;
  38. }
  39. &.btn-danger .loader > div {
  40. border-top-color: @btn-danger-color;
  41. border-bottom-color: @btn-danger-color;
  42. }
  43. }
  44. // Icons in buttons
  45. .btn .material-icon {
  46. margin-right: 3px;
  47. position: relative;
  48. bottom: 1px;
  49. }
  50. // Btn with icon only
  51. .btn-icon .material-icon {
  52. margin: -1px -4px;
  53. width: 20px;
  54. height: 20px;
  55. font-size: 20px;
  56. line-height: 20px;
  57. }