integrations-panel.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. .integrations-panel {
  2. background-color: var(--white);
  3. height: 100%;
  4. }
  5. .integrations-panel-header {
  6. display: flex;
  7. justify-content: space-between;
  8. align-items: center;
  9. padding: var(--spacing-03) var(--spacing-04);
  10. }
  11. .integrations-panel-title {
  12. font-size: var(--font-size-02);
  13. color: var(--content-primary);
  14. margin-bottom: 0;
  15. }
  16. .integrations-panel-card-button {
  17. all: unset;
  18. background-color: var(--white);
  19. width: 100%;
  20. &:hover {
  21. background-color: var(--bg-light-secondary) !important;
  22. }
  23. }
  24. .integrations-panel-card-contents {
  25. display: flex;
  26. margin: 0 var(--spacing-04);
  27. padding: var(--spacing-04) 0;
  28. gap: var(--spacing-04);
  29. border-bottom: 1px solid var(--border-divider);
  30. }
  31. .integrations-panel-card-header {
  32. display: flex;
  33. justify-content: space-between;
  34. align-items: center;
  35. .material-symbols {
  36. background: linear-gradient(
  37. 245.63deg,
  38. #214475 0%,
  39. #254c84 28.54%,
  40. #6597e0 96.69%
  41. );
  42. color: transparent;
  43. background-clip: text;
  44. }
  45. }
  46. .integrations-panel-card-inner {
  47. flex: 1;
  48. }
  49. .integrations-panel-card-premium-badge {
  50. color: var(--content-primary);
  51. font-weight: 600;
  52. }
  53. .integrations-panel-card-title {
  54. font-size: var(--font-size-02);
  55. color: var(--content-primary);
  56. }
  57. .integrations-panel-card-description {
  58. font-size: var(--font-size-01);
  59. color: var(--content-secondary);
  60. margin-bottom: 0;
  61. }