Skip Navigation

lzb posts

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; } }