Skip to content

Instantly share code, notes, and snippets.

@flaudisio
Created June 3, 2020 01:27
Show Gist options
  • Save flaudisio/2d4506de59f54a740125e6bbf039b02c to your computer and use it in GitHub Desktop.
Save flaudisio/2d4506de59f54a740125e6bbf039b02c to your computer and use it in GitHub Desktop.
.tabbed-set {
display: flex;
position: relative;
flex-wrap: wrap;
}
.tabbed-set .highlight {
background: #ddd;
}
.tabbed-set .tabbed-content {
display: none;
order: 99;
width: 100%;
}
.tabbed-set label {
width: auto;
margin: 0 0.5em;
padding: 0.25em;
font-size: 120%;
cursor: pointer;
}
.tabbed-set input {
position: absolute;
opacity: 0;
}
.tabbed-set input:nth-child(n+1) {
color: #333333;
}
.tabbed-set input:nth-child(n+1):checked + label {
color: #FF5252;
}
.tabbed-set input:nth-child(n+1):checked + label + .tabbed-content {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment