Skip to content

Instantly share code, notes, and snippets.

@wrumsby

wrumsby/dabblet.css

Created July 23, 2012 03:26
Show Gist options
  • Save wrumsby/3161877 to your computer and use it in GitHub Desktop.
Save wrumsby/3161877 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
body {
background: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.sidebar {
border-color: #ddd;
border-style: solid;
border-width: 1px 0 0 1px;
box-shadow: -1px -1px 3px #ddd;
position: absolute;
right: 0;
bottom: 0;
font-size: 14px;
color: #333;
min-height: 31px;
width: 300px;
z-index: 10;
overflow-y: auto;
transition: top 0.3s ease-out;
}
.sidebar > div {
position: absolute;
width: 300px;
}
.sidebar.open {
top: 0;
}
.search,
.my-jobs,
.timer {
display: none;
}
.sidebar.open .search,
.sidebar.open .my-jobs,
.sidebar.open .timer {
display: block;
}
.sidebar-header {
margin: 0;
padding: 7px 20px;
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(to bottom, #fff, #eee);
border-color: #ccc;
border-style: solid;
border-width: 0px;
font-weight: bold;
text-shadow: 1px -1px 1px #ddd;
}
.sidebar.open .sidebar-header {
border-width: 1px 0;
padding: 6px 20px;
}
h2.sidebar-header {
font-size: 16px;
}
h3.sidebar-header {
font-size: 14px;
}
.sidebar-content {
padding: 8px 20px;
}
.my-jobs {
top: 0;
bottom: 170px;
right: 0;
}
.job-list-wrapper {
overflow-y: scroll;
position: absolute;
top: 34px;
bottom: 0;
width: 300px;
}
.job-list {
margin: 0;
padding: 0;
list-style: none;
}
.job {
border-color: #aaa;
border-style: dotted;
border-width: 0 0 1px 0;
background-color: #fafafa;
font-size: 12px;
}
.job:last-child {
border-bottom-width: 0;
}
.job-summary {
text-overflow: ellipsis;
}
.job-title {
display: block;
font-weight: bold;
color: #00A0C6;
text-decoration: none;
}
.job-detail {
display: none;
position: relative;
}
.job.expanded {
background-color: #e6e6e6;
box-shadow: inset 0 1px 4px #ddd;
}
.job.expanded .job-detail {
display: block;
}
.collapse {
position: absolute;
top: -30px;
right: 0px;
}
.timer {
background-color: #fff;
right: 0;
bottom: 31px;
height: 140px;
}
.footer {
background-color: #fff;
bottom: 0;
right: 0;
}
.footer .open-close {
float: right;
}
@media screen and (max-height: 240px) {
.sidebar.open {
top: inherit;
}
.sidebar.open .search,
.sidebar.open .my-jobs,
.sidebar.open .timer {
display: none;
}
.footer .open-close {
display: none;
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="sidebar">
<div class="search sidebar-section"></div>
<div class="my-jobs">
<h2 class="sidebar-header">My Jobs</h2>
<div class="job-list-wrapper">
<ul class="job-list">
<li class="job sidebar-content">
<div class="job-summary">
<a href="#" class="job-title" onclick="event.target.parentNode.parentNode.classList.toggle('expanded'); return false;">J00664 - GST Return Xero</a>
<span class="job-client">360 Environmental</span>
</div>
<div class="job-detail">
<a href="#" class="collapse" onclick="event.target.parentNode.parentNode.classList.toggle('expanded'); return false;">x</a>
</div>
</li>
<li class="job sidebar-content">
<div class="job-summary">
<a href="#" class="job-title" onclick="event.target.parentNode.parentNode.classList.toggle('expanded'); return false;">J00536 - Annual Accounts</a>
<span class="job-client">12 Mile Ridge Trust</span>
</div>
<div class="job-detail">
<a href="#" class="collapse" onclick="event.target.parentNode.parentNode.classList.toggle('expanded'); return false;">x</a>
</div>
</li>
<li class="job expanded sidebar-content">
<div class="job-summary">
<a href="#" class="job-title" onclick="event.target.parentNode.parentNode.classList.toggle('expanded'); return false;">J00663 - Profit Booster</a>
<span class="job-client">360 Environmental</span>
</div>
<div class="job-detail">
<a href="#" class="collapse" onclick="event.target.parentNode.parentNode.classList.toggle('expanded'); return false;">x</a>
<div>
Time spent: 14:50
</div>
<button class="primary">View&nbsp;Project</button>
<button> &nbsp;Start&nbsp;Timer</button>
</div>
</li>
<li class="job sidebar-content">
<div class="job-summary">
<a href="#" class="job-title" onclick="event.target.parentNode.parentNode.classList.toggle('expanded'); return false;">J00466 - Xero Consulting</a>
<span class="job-client">4 U Limited</span>
</div>
<div class="job-detail">
<a href="#" class="collapse" onclick="event.target.parentNode.parentNode.classList.toggle('expanded'); return false;">x</a>
</div>
</li>
<li class="job sidebar-content">
<div class="job-summary">
<a href="#" class="job-title" onclick="event.target.parentNode.parentNode.classList.toggle('expanded'); return false;">J00497 - ASIC Template</a>
<span class="job-client">A W L Long Childrens Trust</span>
</div><div class="job-detail">
<a href="#" class="collapse" onclick="event.target.parentNode.parentNode.classList.toggle('expanded'); return false;">x</a>
</div>
</li>
</ul>
</div>
</div>
<div class="timer">
<h2 class="sidebar-header">Timer</h2>
<div class="sidebar-content">
<button> &nbsp;Start&nbsp;Timer</button>
</div>
</div>
<div class="footer">
<h3 class="sidebar-header">
My Jobs
<a href="#" onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('open'); return false;" class="open-close">&lt;</a>
</h3>
</div>
</div>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment