Skip to content

Instantly share code, notes, and snippets.

@djdduty

djdduty/tabbed.css

Last active March 27, 2016 02:32
Show Gist options
  • Save djdduty/b01d57c8756114ffb816 to your computer and use it in GitHub Desktop.
Save djdduty/b01d57c8756114ffb816 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tabbed.css
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
dl.tabbed {
*zoom: 1;
position: relative;
}
dl.tabbed:before,
dl.tabbed:after {
display: table;
content: "";
}
dl.tabbed:after {
clear: both;
}
dl.tabbed dt,
dl.tabbed dd {
background-color: white;
border: 1px solid #ddd;
padding: 15px;
position: relative;
}
dl.tabbed dt {
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
background-color: white;
border-color: transparent;
border-bottom-width: 0;
float: left;
margin-right: 2px;
padding-top: 5px;
padding-bottom: 4px;
}
dl.tabbed dt:hover {
background-color: #eee;
cursor: pointer;
}
dl.tabbed dt.active {
border: 1px solid #ddd;
border-bottom-color: white;
background-color: white;
}
dl.tabbed dt.disabled:hover {
background-color: white;
}
dl.tabbed dd {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
display: none;
float: right;
margin-left: -100%;
margin-top: 29.5px;
width: 100%;
z-index: -1;
}
dl.tabbed dt.active + dd {
display: block;
}
dl.tabbed > aside {
padding-top: 6px;
padding-right: 16px;
float: right;
position: relative;
z-index: -2;
}
Raw
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta content="content" name="description">
<meta content="width=device-width, initial-scale=1" name="viewport">
<!-- End of Metadata -->
<title>Dashboard</title>
<!-- Styles -->
<!-- Scripts -->
</head>
<body role="application">
<article>
<nav>
<ul>
<a href="/provider/">Dispatching</a>
<a href="/provider/maps/">Maps</a>
<a href="/provider/calendar/">Calendar</a>
<a href="/provider/customers//">Customers</a>
<a href="/provider/drivers/">Drivers</a>
<a href="/provider/assets/">Assets</a>
<a href="/provider/trucks/">Trucks</a>
<a href="/provider/routes/">Routes</a>
<a href="/provider/reports/">Reports</a>
<a href="/provider/billing/">Billing</a>
<a href="/provider/settings/">Settings</a>
<a href="/provider/admin/">Admin</a>
<a href="/provider/logout">Logout</a>
</ul>
</nav>
<main class="loading">
<label class="loader">Loading, please wait.</label>
</main>
</article>
<footer></footer>
<script src="/static/dist/base.js?422afb61" type="text/javascript"></script>
<script type="text/javascript">
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", "http://localhost:6543/_debug_toolbar/static/css/toolbar_button.css")
document.getElementsByTagName("head")[0].appendChild(fileref)
</script>
<div id="pDebug">
<div style="display: block; " id="pDebugToolbarHandle">
<a title="Show Toolbar" id="pShowToolBarButton"
href="http://localhost:6543/_debug_toolbar/3834333336323030" target="pDebugToolbar">&#171; FIXME: Debug Toolbar</a>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment