No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_button.scss 1.3KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. //
  2. // Icon buttons
  3. //
  4. // General styles
  5. .btn {
  6. position: relative;
  7. text-transform: $btn-text-transform;
  8. transition: $transition-base;
  9. letter-spacing: $btn-letter-spacing;
  10. font-size: $input-btn-font-size;
  11. will-change: transform;
  12. &:hover {
  13. @include box-shadow($btn-hover-box-shadow);
  14. transform: translateY($btn-hover-translate-y);
  15. }
  16. &:not(:last-child) {
  17. margin-right: .5rem;
  18. }
  19. // Icons
  20. i:not(:first-child),
  21. svg:not(:first-child) {
  22. margin-left: .5rem;
  23. }
  24. i:not(:last-child),
  25. svg:not(:last-child) {
  26. margin-right: .5rem;
  27. }
  28. }
  29. // Remove translateY and margin animation when btn is included in a btn-group or input-group
  30. .btn-group,
  31. .input-group {
  32. .btn {
  33. margin-right: 0;
  34. transform: translateY(0);
  35. }
  36. }
  37. // Size variations
  38. .btn-sm {
  39. font-size: $input-btn-font-size-sm;
  40. }
  41. .btn-lg {
  42. font-size: $input-btn-font-size-lg;
  43. }
  44. // Some quick fixes (to revise)
  45. // Fixes
  46. [class*="btn-outline-"] {
  47. border-width: 1px;
  48. }
  49. .btn-outline-secondary {
  50. color: darken(theme-color("secondary"), 50%);
  51. }
  52. .btn-inner--icon {
  53. i:not(.fa) {
  54. position: relative;
  55. top: 2px;
  56. }
  57. }
  58. .btn-link {
  59. font-weight: $btn-font-weight;
  60. box-shadow: none;
  61. &:hover {
  62. box-shadow: none;
  63. transform: none;
  64. }
  65. }
  66. .btn-neutral {
  67. color: theme-color("primary");
  68. }