tab.css 456 B

12345678910111213141516171819202122232425262728
  1. .tab-container {
  2. display: flex;
  3. flex-direction: column;
  4. }
  5. .tab-bar {
  6. display: flex;
  7. flex-direction: row;
  8. border-bottom: 1px solid silver;
  9. padding: 5px 5px 0 15px;
  10. }
  11. .tab-bar-item {
  12. margin: 0 0.3em;
  13. padding: 0.3em 0.6em;
  14. border: 1px solid silver;
  15. border-bottom: none;
  16. background: silver;
  17. cursor: pointer;
  18. }
  19. .tab-bar-item.active {
  20. background: white;
  21. }
  22. .tab-panel {
  23. flex-grow: 1;
  24. }
  25. .tab-panel > :not(.active) {
  26. display: none;
  27. }