_buttons.scss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. .btn {
  2. &:focus {
  3. outline: none !important;
  4. }
  5. }
  6. .btn-circle {
  7. border: none;
  8. outline: none !important;
  9. overflow: hidden;
  10. width: 40px;
  11. height: 40px;
  12. @include border-radius(50%);
  13. i {
  14. font-size: 18px;
  15. position: relative;
  16. left: -1px;
  17. }
  18. }
  19. .btn-link {
  20. font-weight: bold;
  21. color: #333;
  22. @include transition(.5s);
  23. &:active,
  24. &:focus {
  25. text-decoration: none;
  26. color: #333;
  27. }
  28. &:hover {
  29. text-decoration: none;
  30. color: #333;
  31. background-color: #ddd;
  32. }
  33. }
  34. .btn-circle-lg {
  35. border: none;
  36. outline: none !important;
  37. overflow: hidden;
  38. width: 50px;
  39. height: 50px;
  40. @include border-radius(50% !important);
  41. i {
  42. font-size: 26px !important;
  43. position: relative !important;
  44. left: 0px !important;
  45. top: 6px !important;
  46. }
  47. }
  48. .btn:not(.btn-link):not(.btn-circle) {
  49. box-shadow: 0 2px 5px rgba(0,0,0,.16),0 2px 10px rgba(0,0,0,.12);
  50. @include border-radius(2px);
  51. border: none;
  52. font-size: 13px;
  53. outline: none;
  54. &:hover {
  55. outline: none;
  56. }
  57. i {
  58. font-size: 20px;
  59. position: relative;
  60. top: 3px;
  61. }
  62. span {
  63. position: relative;
  64. top: -2px;
  65. margin-left: 3px;
  66. }
  67. }
  68. .btn-warning,
  69. .btn-warning:hover,
  70. .btn-warning:active,
  71. .btn-warning:focus {
  72. background-color: #ff9600 !important;
  73. }
  74. .btn-danger,
  75. .btn-danger:hover,
  76. .btn-danger:active,
  77. .btn-danger:focus {
  78. background-color: #fb483a !important;
  79. }
  80. .btn-info,
  81. .btn-info:hover,
  82. .btn-info:active,
  83. .btn-info:focus {
  84. background-color: #00b0e4 !important;
  85. }
  86. .btn-success,
  87. .btn-success:hover,
  88. .btn-success:active,
  89. .btn-success:focus {
  90. background-color: #2b982b !important;
  91. }
  92. .btn-primary,
  93. .btn-primary:hover,
  94. .btn-primary:active,
  95. .btn-primary:focus {
  96. background-color: #1f91f3 !important;
  97. }
  98. .btn-default,
  99. .btn-default:hover,
  100. .btn-default:active,
  101. .btn-default:focus {
  102. background-color: #fff !important;
  103. }
  104. .btn-group,
  105. .btn-group-vertical {
  106. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
  107. .btn {
  108. box-shadow: none !important;
  109. @include border-radius(0);
  110. .caret {
  111. position: relative;
  112. bottom: 1px;
  113. }
  114. }
  115. .btn-group {
  116. box-shadow: none !important;
  117. }
  118. .btn + .dropdown-toggle {
  119. border-left: 1px solid rgba(0,0,0,0.08) !important;
  120. }
  121. }