Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created October 13, 2013 21:28
Show Gist options
  • Save anonymous/6967629 to your computer and use it in GitHub Desktop.
Save anonymous/6967629 to your computer and use it in GitHub Desktop.
Download ZIP
--- 2nd level navigation ----
Raw
dabblet.css
* {
margin:0px;
padding:0px;
}
body {
font-family: "Segoe WP", "Helvetica Neue";
color: #333333;
font-size:14px;
background-color:#ececec;
}
select {
border: none;
background-color: #aaa;
background:none;
border:1px solid #777;
border-radius:6;
-webkit-appearance:none;
}
select,
button {
font-size:12px;
line-height:24px;
padding-left:10px;
padding-right:10px;
border-radius:3px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.03);
border:1px solid #d5d5d4;
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.5)),
color-stop(10%,rgba(249,249,249,0)),
color-stop(83%,rgba(224,224,224,0)),
color-stop(90%,rgba(221,221,221,0)),
color-stop(100%,rgba(198,198,198,0.28)));
color:#4b4b4b;
text-shadow:1px 1px 1px rgba(256,256,256,1);
}
input {
box-shadow: inset 2px 3px 0px rgba(0,0,0,0.03);
border:1px solid #d5d5d4;
line-height:25px
}
/*---- SEGMENTED BUTTON ---------- */
div.segmentedButton {
-display:inline;
}
div.segmentedButton button {
display:inline;
margin:0px;
display:block;
float:left;
margin-left:-1px;
border-radius:0px;
}
div.segmentedButton button:first-child {
border-radius:4px 0 0 4px;
}
div.segmentedButton button:last-child {
border-radius:0 4px 4px 0;
margin-right:10px;
}
button.active {
background-color:#72bf44;
font-weight:300;
color:white;
text-shadow:none;
border-top-color:rgba(255,255,255,0.5);
border-left:none;
border-right:none;
}
/*---- Header ------- */
div.header .top {
background: -webkit-gradient(linear, left top, left bottom, color-stop(79%,#3e3c3b), color-stop(100%,#333230));
padding:10px 20px 10px 30px;
}
.header .top li {
color:#bababa;
text-transform:uppercase;
font-weight:550;
line-height:30px;
text-shadow: -1px -1px 1px rgba(0,0,0,0.4);
padding-right:10px;
letter-spacing:1px;
}
.header .top li.active {
color:#72bf44;
font-weight:700;
}
.header ul.utilities {
float:right;
}
.header li {
display:inline;
}
div.header .secondLevel {
background: #ececec;
padding:0px 20px 0px 30px;
box-shadow:0px 1px 3px rgba(0,0,0, 0.4);
height:41px
}
/* --- 2nd level navigation ---- */
.header .secondLevel li {
color:#777;
text-transform:uppercase;
font-weight:550;
line-height:41px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
padding-right:10px;
padding-left:10px;
display:block;
float:left;
}
.header .secondLevel li:first-child {
padding-left:0px;
}
.header .secondLevel li.active {
color:white;
font-weight:700;
text-shadow: -1px -1px 1px rgba(0,0,0,0.2);
background-color: #72bf44;
}
.header ul.utilities {
float:right;
}
.header li {
display:inline;
}
/* -------- FUNCTION AREA -------------*/
.functionArea {
padding:10px 30px 30px 30px;
line-height:25px;
}
.functionArea label {
color:#777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
font-weight:300;
margin-left:20px;
}
.functionArea label.main {
text-transform:uppercase;
margin-left:0px;
}
div.panel {
position:absolute;
top:220px;
bottom:0px;
overflow:scroll;
scroll:auto;
background-color:#f3f3f3;
border-top:1px solid #cdcdcd;
border-right:1px solid #cdcdcd;
box-shadow:3px -5px 0px rgba(0,0,0, 0.03);
}
/* --- Filter pannel ---- */
div.filter.panel {
left:0;
width:40%;
}
div.panel .region {
border-top:1px solid rgba(255,255,255,0.8);
border-bottom:1px solid rgba(0,0,0,0.2);
}
div.panel .region h3 {
color:#777;
font-weight:300;
text-transform:uppercase;
text-shadow:1px 1px 1px rgba(255,255,255,1);
cursor:pointer;
background: url(https://dl.dropboxusercontent.com/u/5503063/visage-ris/region-closed.png) no-repeat center left;
background-position:10px;
line-height:35px;
padding-left:30px
}
div.panel .region.open h3 {
background: url(https://dl.dropboxusercontent.com/u/5503063/visage-ris/region-open.png) no-repeat center left;
background-position:7px;
}
div.panel .region p {
padding:6px 20px 6px 30px;
}
div.list.panel {
right:0;
width:58%;
box-shadow:-3px -5px 0px rgba(0,0,0, 0.03);
}
div.list.panel table {
width:100%;
border-collapse:collapse;
}
div.list.panel table thead {
width:100%;
text-transform:uppercase;
font-size:12px;
font-weight:300;
color:#888;
}
div.list.panel table td {
padding-left:8px;
}
div.list.panel table tbody tr:nth-child(odd) td {
background-color:white;
}
Raw
dabblet.html
<div class="header">
<div class="top">
<ul class="utilities">
<li>Recent
<li>P Dr. Brown
<li>S
</ul>
<ul class="main">
<li class="active">Search
<li>workflow
<li>appointments
<li>claiming
<li>other
<li>setup
</ul>
</div>
<div class="secondLevel">
<ul>
<li>Report Search
<li>Patient
<li class="active">Procedure
<li>Orders
</ul>
</div>
</div>
<div class="functionArea">
<p class="row">
<label class="main">search</label>
<input size="40">
<label>Date of Service</label>
<input>
<button>d</button>
<label>To</label>
<input>
<button>d</button>
<select>
<option>all</option>
</select>
</p>
<p class="function row">
<label class="main">Filters</label>
<div class="segmentedButton">
<button>All</button>
<button class="active">Arrived</button>
<button>rrrr</button>
<button>x</button>
</div>
<div class="segmentedButton">
<button class="primary">+</button>
<button>E</button>
</div>
</p>
</div>
<div class="panels">
<div class="list panel">
<div class="region">
<table>
<thead>
<td>Patient</td>
<td>Description</td>
<td>Id</td>
<td>Date of Service</td>
<td>Pool</td>
<td>Status</td>
<td>Priority</td>
</thead>
<tbody>
<tr>
<td>Walker, Chr.</td>
<td>RIBS (BOTH</td>
<td>34234235</td>
<td>23-Sep 2013</td>
<td></td>
<td>Scan Started</td>
<td>[]</td>
</tr>
<tr>
<td>Walker, Chr.</td>
<td>RIBS (BOTH</td>
<td>34234235</td>
<td>23-Sep 2013</td>
<td></td>
<td>Scan Started</td>
<td>[]</td>
</tr>
<tr>
<td>Walker, Chr.</td>
<td>RIBS (BOTH</td>
<td>34234235</td>
<td>23-Sep 2013</td>
<td></td>
<td>Scan Started</td>
<td>[]</td>
</tr>
<tr>
<td>Walker, Chr.</td>
<td>RIBS (BOTH</td>
<td>34234235</td>
<td>23-Sep 2013</td>
<td></td>
<td>Scan Started</td>
<td>[]</td>
</tr>
<tr>
<td>Walker, Chr.</td>
<td>RIBS (BOTH</td>
<td>34234235</td>
<td>23-Sep 2013</td>
<td></td>
<td>Scan Started</td>
<td>[]</td>
</tr>
<tr>
<td>Walker, Chr.</td>
<td>RIBS (BOTH</td>
<td>34234235</td>
<td>23-Sep 2013</td>
<td></td>
<td>Scan Started</td>
<td>[]</td>
</tr>
<tr>
<td>Walker, Chr.</td>
<td>RIBS (BOTH</td>
<td>34234235</td>
<td>23-Sep 2013</td>
<td></td>
<td>Scan Started</td>
<td>[]</td>
</tr>
<tr>
<td>Walker, Chr.</td>
<td>RIBS (BOTH</td>
<td>34234235</td>
<td>23-Sep 2013</td>
<td></td>
<td>Scan Started</td>
<td>[]</td>
</tr>
<tr>
<td>Walker, Chr.</td>
<td>RIBS (BOTH</td>
<td>34234235</td>
<td>23-Sep 2013</td>
<td></td>
<td>Scan Started</td>
<td>[]</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="filter panel">
<div class="region">
<p>Filter &lt;new filter&gt;
<input type="checkbox">
<label>use as default</label>
</p>
<p>
<button>Save as new</button>
<button>Save></button>
<button>Duplicate</button>
<button>Delete</button>
</p>
</div> <!-- end region -->
<div class="region open">
<h3>Patient</h3>
<p><input size=40></p>
<p><button>Clear</button></p>
</div> <!-- end region -->
<div class="region closed">
<h3>Referrer</h3>
</div> <!-- end region -->
<div class="region closed">
<h3>Facility</h3>
</div> <!-- end region -->
</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment