(original) (raw)

.transformer-tabs { ul { list-style: none; padding: 0; margin: 0; border-bottom: 3px solid white; } li { display: inline-block; padding: 0; vertical-align: bottom; &:nth-child(1) .active { color: lighten(#9b59b6, 20%); border-bottom-color: #9b59b6; } &:nth-child(2) .active { color: lighten(#3498db, 20%); border-bottom-color: #3498db; } &:nth-child(3) .active { color: lighten(#e67e22, 20%); border-bottom-color: #e67e22; } &:nth-child(4) .active { color: lighten(#c0392b, 20%); border-bottom-color: #c0392b; } } a { display: inline-block; color: white; text-decoration: none; padding: 0.5rem; &.active { border-bottom: 3px solid transparent; position: relative; bottom: -3px; } } @media (max-width: 700px) { ul { border-bottom: 0; overflow: hidden; position: relative; background: #666; /* fallback */ background: linear-gradient(#666, #222); &::after { content: "☰"; position: absolute; top: 8px; right: 15px; z-index: 2; pointer-events: none; } &.open { a { position: relative; display: block; } } } li { display: block; } a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; &.active { border: 0; z-index: 1; background: #666; /* fallback */ background: linear-gradient(#666, #222); } } } } .tabs { > div { display: none; padding: 1rem; &:nth-of-type(1) { background: #9b59b6; } &:nth-of-type(2) { background: red; } &:nth-of-type(3) { background: #e67e22; } &:nth-of-type(4) { background: #c0392b; } } > .active { display: block; } } body { padding: 1rem; background: #333; color: white; font: 100%/1.4 Sans-Serif; }