buttons.less 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. //
  2. // Buttons
  3. // --------------------------------------------------
  4. // Button loading style
  5. .btn.btn-loading {
  6. &,
  7. &:link,
  8. &:active,
  9. &:visited,
  10. &:hover,
  11. &:focus {
  12. // make text transparent, but still take place in button
  13. color: transparent;
  14. // position loader over the text
  15. .loader {
  16. height: 20px;
  17. margin-top: -20px;
  18. & > div {
  19. width: 20px;
  20. height: 20px;
  21. }
  22. }
  23. }
  24. &.btn-default .loader > div {
  25. border-top-color: @btn-default-color;
  26. border-bottom-color: @btn-default-color;
  27. }
  28. &.btn-primary .loader > div {
  29. border-top-color: @btn-primary-color;
  30. border-bottom-color: @btn-primary-color;
  31. }
  32. &.btn-success .loader > div {
  33. border-top-color: @btn-success-color;
  34. border-bottom-color: @btn-success-color;
  35. }
  36. &.btn-info .loader > div {
  37. border-top-color: @btn-info-color;
  38. border-bottom-color: @btn-info-color;
  39. }
  40. &.btn-warning .loader > div {
  41. border-top-color: @btn-warning-color;
  42. border-bottom-color: @btn-warning-color;
  43. }
  44. &.btn-danger .loader > div {
  45. border-top-color: @btn-danger-color;
  46. border-bottom-color: @btn-danger-color;
  47. }
  48. }
  49. // Icons in buttons
  50. .btn .material-icon {
  51. margin-right: 3px;
  52. position: relative;
  53. bottom: 1px;
  54. }
  55. // Btn with larger icon
  56. .btn-icon .material-icon {
  57. margin: -1px -4px;
  58. width: 20px;
  59. height: 20px;
  60. font-size: 20px;
  61. line-height: 20px;
  62. }
  63. .btn-icon .btn-text {
  64. margin-left: @padding-small-horizontal;
  65. }
  66. .btn-icon .btn-text-left {
  67. margin-right: @padding-small-horizontal;
  68. }
  69. // Block btn icon
  70. .btn-block.btn-icon {
  71. padding-left: 0px;
  72. padding-right: 0px;
  73. }
  74. .btn-icons-family {
  75. .material-icon + .material-icon {
  76. margin-left: @padding-small-horizontal;
  77. }
  78. }