_buttons.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. // var for box shadow of gradient buttons
  2. // Buttons
  3. .btn {
  4. box-shadow: none;
  5. font-weight: 500;
  6. // gradient button on hover transition
  7. &[class*='bg-gradient-'] {
  8. transition: all 0.2s ease;
  9. &:hover {
  10. transform: translateY(-2px);
  11. }
  12. }
  13. // Icon button padding
  14. &.btn-icon {
  15. padding: 0.715rem 0.736rem;
  16. }
  17. &.btn-sm {
  18. &.btn-icon {
  19. padding: 0.5rem;
  20. line-height: 0.5;
  21. }
  22. }
  23. &.btn-lg {
  24. &.btn-icon {
  25. padding: 1rem;
  26. line-height: 0.75;
  27. }
  28. }
  29. &:focus,
  30. &.focus,
  31. &:active,
  32. &.active {
  33. outline: none;
  34. box-shadow: none;
  35. }
  36. &:not(:disabled):not(.disabled):active:focus,
  37. &:not(:disabled):not(.disabled).active:focus {
  38. box-shadow: none !important;
  39. }
  40. // feather icons inside btn
  41. .feather {
  42. vertical-align: bottom;
  43. }
  44. }
  45. // For Waves Input Padding
  46. .btn.waves-input-wrapper {
  47. padding: 0;
  48. }
  49. @include media-breakpoint-down(sm) {
  50. .btn-sm-block {
  51. display: block;
  52. width: 100%;
  53. }
  54. }
  55. // Remove cursor-pointer from button if button is disabled
  56. // * setting it to inherit will auto adept cursor
  57. .waves-effect {
  58. cursor: inherit;
  59. }