_buttons.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  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. background-color: white;
  11. color: $body-color;
  12. &:hover,&:focus,&:active{
  13. color: $body-color !important;
  14. }
  15. }
  16. &.btn-white.btn-primary {
  17. background-color: $primary;
  18. }
  19. // box shadow for gradient colors
  20. &[class*="bg-gradient-"]:hover{
  21. box-shadow: $gradient-button-bs;
  22. }
  23. // For Boxshadow on hover of normal light, dark and secondary btn
  24. &.btn-secondary {
  25. color: $white;
  26. &:hover {
  27. box-shadow: 0 8px 25px -8px rgba($secondary, 1);
  28. }
  29. }
  30. &.btn-dark {
  31. &:hover {
  32. box-shadow: 0 8px 25px -8px rgba($dark, 1);
  33. }
  34. }
  35. &.btn-light {
  36. &:hover {
  37. box-shadow: 0 8px 25px -8px rgba($light, 1);
  38. }
  39. }
  40. // For Light,dark and secondary outline btns
  41. &.btn-outline-secondary,
  42. &.btn-outline-dark,
  43. &.btn-outline-light {
  44. border: 1px solid;
  45. }
  46. // to remove extra spacing because of border in btn outline
  47. &[class*="btn-outline-"]{
  48. padding-top: calc(#{$btn-padding-y} - 1px);
  49. padding-bottom: calc(#{$btn-padding-y} - 1px);
  50. &.btn-sm{
  51. padding-top: calc(0.5rem - 1px);
  52. padding-bottom: calc(0.5rem - 1px);
  53. }
  54. }
  55. // For btn-icon
  56. &.btn-icon {
  57. padding: .715rem .736rem;
  58. }
  59. &.btn-sm{
  60. &.btn-icon{
  61. padding: .5rem;
  62. }
  63. }
  64. &.btn-lg{
  65. &.btn-icon{
  66. padding: 1rem;
  67. }
  68. }
  69. &.btn-round {
  70. @include button-round-variant(2rem);
  71. }
  72. &:focus,
  73. &.focus,
  74. &:active,
  75. &.active {
  76. outline: none;
  77. box-shadow: none !important;
  78. }
  79. &.btn-icon {
  80. i {
  81. font-size: 1.1rem;
  82. }
  83. }
  84. }
  85. // For White Btn
  86. .btn.btn-outline-white,
  87. .btn-white{
  88. &:hover{
  89. color: $black !important;
  90. }
  91. }
  92. // Added cursor pointer as in latest bootstrap do not have this
  93. button,
  94. html [type="button"],
  95. [type="reset"],
  96. [type="submit"] {
  97. cursor: pointer;
  98. }
  99. // For Waves Padding
  100. .waves-button-input {
  101. padding: unset;
  102. }