Skip to content

Instantly share code, notes, and snippets.

@strack
Created May 18, 2012 15:20
Show Gist options
  • Save strack/2725832 to your computer and use it in GitHub Desktop.
Save strack/2725832 to your computer and use it in GitHub Desktop.
Reporting Prototype
/**
* Reporting Prototype
*/
.rptsidebar{
position:relative;
width:65px;
height:200px;
margin-bottom:-3px;
border: #565656 solid 3px;
border-opacity: 0.2;
background-color:#333;
color:#CCC;
font: 13px/1.8 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
padding: 10px 5px 10px 5px;
}
.rotate{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
writing-mode: rl-bt;
position:relative;
top:72px;
width:200px;
left:-70px;
text-align:center;
}
<!--Report Structur-->
<div id="implCheck" class="reportbar">
<div id="implCheckSide" class="rptsidebar">
<p class="rotate">Implementation Check</p>
</div>
<div id="implCheckMain" class="rptmain"></div>
</div>
<div id="deployment" class="reportbar">
<div id="deploymentSide" class="rptsidebar">
<p class="rotate">Deployment</p>
</div>
<div id="deploymentMain" class="rptmain"></div>
</div>
<div id="usage" class="reportbar">
<div id="usageSide" class="rptsidebar">
<p class="rotate">Usage</p>
</div>
<div id="usageMain" class="rptmain"></div>
</div>
<div id="media" class="reportbar">
<div id="mediaSide" class="rptsidebar">
<p class="rotate">Media</p>
</div>
<div id="mediaMain" class="rptmain"></div>
</div>
<div id="solution" class="reportbar">
<div id="solutionSide" class="rptsidebar">
<p class="rotate">Solution</p>
</div>
<div id="solutionMain" class="rptmain"></div>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment