_buttons.scss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. // var for boxshadow of gradient buttons
  2. // Buttons
  3. .btn {
  4. // to change cursor of disabled button
  5. &:disabled{
  6. cursor: default;
  7. }
  8. // for white button
  9. &.btn-white{
  10. color: $body-color;
  11. &:hover,&:focus,&:active{
  12. color: $body-color !important;
  13. }
  14. }
  15. // box shadow for gradient colors
  16. &[class*="bg-gradient-"]:hover{
  17. box-shadow: $gradient-button-bs;
  18. }
  19. // For Boxshadow on hover of normal light, dark and secondary btn
  20. &.btn-secondary {
  21. color: $white;
  22. &:hover {
  23. box-shadow: 0 8px 25px -8px rgba($secondary, 1);
  24. }
  25. }
  26. &.btn-dark {
  27. &:hover {
  28. box-shadow: 0 8px 25px -8px rgba($dark, 1);
  29. }
  30. }
  31. &.btn-light {
  32. &:hover {
  33. box-shadow: 0 8px 25px -8px rgba($light, 1);
  34. }
  35. }
  36. // For Light,dark and secondary outline btns
  37. &.btn-outline-secondary,
  38. &.btn-outline-dark,
  39. &.btn-outline-light {
  40. border: 1px solid;
  41. }
  42. // Flat Secondary, Light and Dark
  43. &.btn-flat-secondary {
  44. &:hover {
  45. background-color: rgba($secondary, 0.1);
  46. }
  47. &:active,
  48. &:focus {
  49. background: $secondary
  50. }
  51. }
  52. &.btn-flat-dark {
  53. &:hover {
  54. background-color: rgba($dark, 0.1);
  55. }
  56. &:active,
  57. &:focus {
  58. background: $dark;
  59. color: $white;
  60. }
  61. }
  62. &.btn-flat-light {
  63. &:hover {
  64. background-color: rgba($light, 0.1);
  65. }
  66. &:active,
  67. &:focus {
  68. background: $light;
  69. }
  70. }
  71. // to remove extra spacing because of border in btn outline
  72. &[class*="btn-outline-"]{
  73. padding-top: calc(#{$btn-padding-y} - 1px);
  74. padding-bottom: calc(#{$btn-padding-y} - 1px);
  75. &.btn-sm{
  76. padding-top: calc(0.5rem - 1px);
  77. padding-bottom: calc(0.5rem - 1px);
  78. }
  79. }
  80. // Relief Buttons Secondary, Light and Dark
  81. &.btn-relief-secondary {
  82. background-color: $secondary;
  83. box-shadow: inset 0 -3px 0 0 rgba($pure-black, .2);
  84. color: $white;
  85. &:hover {
  86. color: $white;
  87. }
  88. &:active,
  89. &:focus {
  90. outline: none;
  91. transform: translateY(3px);
  92. }
  93. }
  94. &.btn-relief-light {
  95. box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, .2);
  96. color: $white;
  97. &:hover {
  98. color: $white;
  99. }
  100. &:active,
  101. &:focus {
  102. outline: none;
  103. transform: translateY(3px);
  104. }
  105. }
  106. &.btn-relief-dark {
  107. background-color: $dark;
  108. box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, .1);
  109. color: $white;
  110. &:hover {
  111. color: $white;
  112. }
  113. &:active,
  114. &:focus {
  115. outline: none;
  116. transform: translateY(3px);
  117. }
  118. }
  119. // For btn-icon
  120. &.btn-icon {
  121. padding: .715rem .736rem;
  122. }
  123. &.btn-sm{
  124. &.btn-icon{
  125. padding: .5rem;
  126. }
  127. }
  128. &.btn-lg{
  129. &.btn-icon{
  130. padding: 1rem;
  131. }
  132. }
  133. // Remove focus/active focus outline
  134. &.btn-square {
  135. @include button-square-variant(0);
  136. }
  137. &.btn-round {
  138. @include button-round-variant(2rem);
  139. }
  140. &:focus,
  141. &.focus,
  142. &:active,
  143. &.active {
  144. outline: none;
  145. box-shadow: none !important;
  146. }
  147. &.btn-icon {
  148. i {
  149. font-size: 1.1rem;
  150. }
  151. }
  152. }
  153. // For White Btn
  154. .btn.btn-outline-white,
  155. .btn-white{
  156. &:hover{
  157. color: $black !important;
  158. }
  159. }
  160. // Added cursor pointer as in latest bootstrap do not have this
  161. button,
  162. html [type="button"],
  163. [type="reset"],
  164. [type="submit"] {
  165. cursor: pointer;
  166. }
  167. // For Waves Padding
  168. .waves-button-input {
  169. padding: unset;
  170. }