lzb posts
/**
* tab panel widget
*/
.tabPanel-widget {
position: relative; /* containing block for headings (top:0) */
/*background: #999;*/
}
/**
* because labels come first in source order – we use z-index to move them in front of the headings
*/
.tabPanel-widget > label {
position: absolute;
z-index: 1;
}
.tabPanel-widget > label,
.tabPanel-widget > h2 {
font-size: 1.1em;
width: 9em;
height: 3.5em; /*2em;*/
line-height: 3.5em; /*2em;*/
}
/**
* position:relative is for the markers (the down arrow in tabs)
*/
.tabPanel-widget > h2 {
/*position: relative;*/
margin: 0;
text-align: center;
background-color: #04619e;
color: #fff;
}
.tabPanel-widget > label {
border-right: 1px solid #fff;
}
/**
* all first level labels and headings after the very first ones
*/
.tabPanel-widget > label ~ label,
.tabPanel-widget > h2 ~ h2 {
position: absolute;
top: 0;
}
/**
* We target all the label/heading pairs
* we increment the :nth-child() params by 4 as well as the left value (according to “tab” width)
*/
.tabPanel-widget label:nth-child(1),
.tabPanel-widget h2:nth-child(3) {
left: 0em;
}
.tabPanel-widget label:nth-child(5),
.tabPanel-widget h2:nth-child(7) {
left: 9em;
}
.tabPanel-widget label:nth-child(9),
.tabPanel-widget h2:nth-child(11) {
left: 18em;
}
/**
* we visually hide all the panels
* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
*/
.tabPanel-widget input + h2 + div {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
/**
* we reveal a panel depending on which control is selected
*/
.tabPanel-widget input:checked + h2 + div {
position: static !important;
padding: 1em !important;
height: auto !important;
width: auto !important;
}
/**
* shows a hand cursor only to pointing device users
*/
.tabPanel-widget label:hover {
cursor: pointer;
}
.tabPanel-widget > div {
background-color: #f0f0f0;
padding: 1em;
}
/**
* we hide radio buttons and also remove them from the flow
*/
.tabPanel-widget input[name=”tabs”] {
opacity: 0;
position: absolute;
}
/**
* this is to style the tabs when they get focus (visual cue)
*/
/*.tabPanel-widget input[name=”tabs”]:focus + h2 {
outline: 1px dotted #000;
outline-offset: 10px;
}*/
/**
* reset of the above within the tab panel (for pointing-device users)
*/
.tabPanel-widget:hover h2 {
outline: none !important;
}
/**
* visual cue of the selection
*/
.tabPanel-widget input[name=”tabs”]:checked + h2 {
background-color: #333;
}
/**
* the marker for tabs (down arrow)
*/
.tabPanel-widget input[name=”tabs”]:checked + h2:after {
/*content: ”;
margin: auto;
position: absolute;
bottom: -10px;
left: 0;
right: 0;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;*/
}
/**
* Make it plain/simple below 45em (stack everything)
*/
@media screen and (max-width: 45em) {
/* hide unecessary label/control pairs */
.tabPanel-widget label,
.tabPanel-widget input[name=”tabs”] {
display: none;
}
/* reveal all panels */
.tabPanel-widget > input + h2 + div {
display: block !important;
position: static !important;
padding: 1em !important;
height: auto !important;
width: auto !important;
}
/* “unstyle” the heading */
.tabPanel-widget h2 {
width: auto;
position: static !important;
background: #999 !important;
}
/* “kill” the marker */
.tabPanel-widget h2:after {
display: none !important;
}
}