tabbedContainer.css (1122B)
1 .tabContainer { 2 3 > .tabs { 4 margin-top: 0.25em; 5 padding-top: 0.25em; 6 7 > .tabContent { 8 9 display: none; 10 11 &.active { 12 display: block; 13 } 14 } 15 } 16 17 > .tabBar { 18 overflow: hidden; 19 width: 100%; 20 margin: 0; 21 padding: 0; 22 list-style: none; 23 display: flex; 24 25 > .tabLink { 26 display: flex; 27 flex: 1; 28 29 transition: all .35s ease; 30 31 color: var(--greyed-out); 32 text-decoration: none; 33 34 background: var(--bg-color); 35 36 border: 0px solid transparent; 37 border-bottom: 1px solid var(--bg-color); 38 margin: 0; 39 40 41 &.active { 42 border-bottom: 1px solid var(--accent); 43 background: inherit; 44 } 45 46 &:focus { 47 color: var(--color); 48 background: var(--trans-accent); 49 } 50 51 &:hover { 52 color: var(--color); 53 background: var(--trans-accent); 54 } 55 } 56 } 57 } 58