button.module.scss 987 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .icon-button {
  2. background-color: var(--white);
  3. border-radius: 10px;
  4. display: flex;
  5. align-items: center;
  6. justify-content: center;
  7. padding: 10px;
  8. cursor: pointer;
  9. transition: all 0.3s ease;
  10. overflow: hidden;
  11. user-select: none;
  12. outline: none;
  13. border: none;
  14. color: var(--black);
  15. &[disabled] {
  16. cursor: not-allowed;
  17. opacity: 0.5;
  18. }
  19. &.primary {
  20. background-color: var(--primary);
  21. color: white;
  22. path {
  23. fill: white !important;
  24. }
  25. }
  26. &:hover,
  27. &:focus {
  28. border-color: var(--primary);
  29. }
  30. }
  31. .shadow {
  32. box-shadow: var(--card-shadow);
  33. }
  34. .border {
  35. border: var(--border-in-light);
  36. }
  37. .icon-button-icon {
  38. width: 16px;
  39. height: 16px;
  40. display: flex;
  41. justify-content: center;
  42. align-items: center;
  43. }
  44. @media only screen and (max-width: 600px) {
  45. .icon-button {
  46. padding: 16px;
  47. }
  48. }
  49. .icon-button-text {
  50. margin-left: 5px;
  51. font-size: 12px;
  52. overflow: hidden;
  53. text-overflow: ellipsis;
  54. white-space: nowrap;
  55. }