ef.js

Declarative DOM helper experiment

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
.root {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-2);
  padding: calc(var(--spacing-2) + var(--focus-shadow-radius)) var(--spacing-6);

  background-color: var(--color-panel-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 0 8px rgb(0 0 0 / 0.07);
}
.root :global(.action):not(:focus-visible) {
  border-color: transparent;
}

.logo {
  padding: 0;
  flex-shrink: 0;
}

.logoImage {
  height: 32px;
  width: auto;
}

.menu {
  flex-shrink: 1;
  display: flex;
  align-items: stretch;
  gap: var(--spacing-4);
  padding: var(--spacing-6) var(--focus-shadow-radius);
  margin: calc(var(--spacing-6) * -1) 0;

  list-style: none;
  overflow-x: auto;
}

.menu > li {
  display: block;
}