_buttons.scss 980 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. .btn-circle {
  2. border-radius: 100%;
  3. height: 2.5rem;
  4. width: 2.5rem;
  5. font-size: 1rem;
  6. display: inline-flex;
  7. align-items: center;
  8. justify-content: center;
  9. &.btn-sm {
  10. height: 1.8rem;
  11. width: 1.8rem;
  12. font-size: 0.75rem;
  13. }
  14. &.btn-lg {
  15. height: 3.5rem;
  16. width: 3.5rem;
  17. font-size: 1.35rem;
  18. }
  19. }
  20. .btn-icon-split {
  21. padding: 0;
  22. overflow: hidden;
  23. display: inline-flex;
  24. align-items: stretch;
  25. justify-content: center;
  26. .icon {
  27. background: fade-out($black, .85);
  28. display: inline-block;
  29. padding: $btn-padding-y $btn-padding-x;
  30. }
  31. .text {
  32. display: inline-block;
  33. padding: $btn-padding-y $btn-padding-x;
  34. }
  35. &.btn-sm {
  36. .icon {
  37. padding: $btn-padding-y-sm $btn-padding-x-sm;
  38. }
  39. .text {
  40. padding: $btn-padding-y-sm $btn-padding-x-sm;
  41. }
  42. }
  43. &.btn-lg {
  44. .icon {
  45. padding: $btn-padding-y-lg $btn-padding-x-lg;
  46. }
  47. .text {
  48. padding: $btn-padding-y-lg $btn-padding-x-lg;
  49. }
  50. }
  51. }