neo-builder
Version:
the fastest tiny script packager written in javascript and supporting iife dynamic chaining w/o extra runtime
76 lines (66 loc) • 1.8 kB
CSS
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin : 0;
font-family : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size : 16px;
font-weight : 400;
line-height : 1.5;
color : #212529;
text-align : left;
background-color: #fff;
}
.container {
max-width : 600px;
margin-left : auto;
margin-right : auto;
padding-left : 15px;
padding-right: 15px;
}
.tabs {
display : flex;
flex-direction: column;
}
.tabs__links {
display : flex;
width : 100%;
overflow-x : auto;
overflow-y : hidden;
margin-left : auto;
margin-right : auto;
margin-bottom : 10px;
order : 0;
white-space : nowrap;
background-color: #fff;
border : 1px solid #e3f2fd;
box-shadow : 0 2px 4px 0 #e3f2fd;
}
.tabs__links>a {
display : inline-block;
text-decoration: none;
padding : 6px 10px;
text-align : center;
color : #1976d2;
}
.tabs__links>a:hover {
background-color: rgba(227, 242, 253, 0.3);
}
.tabs>#content-1:target~.tabs__links>a[href="#content-1"],
.tabs>#content-2:target~.tabs__links>a[href="#content-2"],
.tabs>#content-3:target~.tabs__links>a[href="#content-3"] {
background-color: #bbdefb;
cursor : default;
}
.tabs>textarea:not(.tabs__links) {
display: none;
order : 1;
}
.tabs>textarea:target {
display: block;
}
.tabs__links>a.active{
background-color: lightblue;
}