graphics-radial-tool-source.mustache revision 3b28a6cd6294fa40166327b097529ae5da1698ce
<style>
.example{
position:relative;
background-color:#000;
font-family:verdana;
color: #ccc;
height: 250px;
}
.example #mygraphiccontainer {
position:absolute;
top:20px;
left:20px;
width:250px;
height:233px;
background-color:#333;
/*border: 3px solid #ff0000;*/
}
.example .code-div{
position:absolute;
top:70px;
left:305px;
text-align:left;
}
.example .code{
height:200px;
width:240px;
}
.example .code-div label{
display: inline-block;
color:#ccc;
width: 7em;
text-align: right;
}
.example #output-grad input{
width: 5em;
}
/*gradient controls*/
.example .grad-c{
position:absolute;
top:50px;
left:50px;
width:1px;
height:1px;
cursor: move;
}
.example .grad-f{
position:absolute;
top:40px;
left:40px;
width:20px;
height:20px;
background-color:#ff8800;
-moz-border-radius:10px;
-webkit-border-radius:10px;
cursor: move;
}
.example .grad-r{ /* is contained within .grad-c */
position:absolute;
top:-50px;
left:-50px;
width:100px;
height:100px;
background-color:#300060;
-moz-border-radius:50px;
-webkit-border-radius:50px;
opacity:0.8;
filter:alpha(opacity=80);
}
.example #grad-control{
position:relative;
width:100px;
height:100px;
border:solid 1px #555;
}
.example #grad-control label{
position:absolute;
width:100px;
top: 100%;
padding-top: 0.3em;
text-align:center;
color: #555;
}
.example #output-grad {
position:absolute;
left:200px;
top:-53px;
width:200px;
}
.example #output-grad ul{
list-style: none;
/* -moz-padding-start: 0;
padding-start: 0;
*/
margin: 0;
padding: 0;
}
.example #output-grad li{
padding:0.3em;
}
.example #output-grad li span {
display: inline-block;
width: 5em;
color: #fff;
margin-left: 0.5em;
}
.example #output-grad .textarea-box{
position: relative;
width: 100%;
margin-top: 0.3em;
}
.example #output-grad textarea {
position:absolute;
right: 0;
top: 0;
width:323px;
height:343px;
visibility: hidden;
}
.example #output-grad ul {
margin-bottom: 1.3em;
}
.example #output-grad #btn-close-code{
visibility: hidden;
}
</style>
<body class="yui3-skin-sam">
<div id="mygraphiccontainer">
</div>
<div class="code-div">
<div id="output-grad">
<ul>
<li><label>cx:</label> <span id='out-cx'>0.5</span></li>
<li><label>cy:</label> <span id='out-cy'>0.5</span></li>
<li><label>fx:</label> <span id='out-fx'>0.5</span></li>
<li><label>fy:</label> <span id='out-fy'>0.5</span></li>
<li><label>r:</label> <span id='out-r'>0.5</span></li>
<li><label>Center color:</label> <input type="text" id='center-color' value="#ff8800" /></li>
<li><label>Outer color:</label> <input type="text" id='outer-color' value="#300060" /></li>
</ul>
<button id="btn-get-code" class='yui3-button'>Get Code Snippet</button>
<button id="btn-close-code" class='yui3-button'>Close</button>
<div class="textarea-box"><textarea></textarea></div>
</div>
<div id="grad-control" title="Represents the boundary of the object">
<label>Interactive Control</label>
<div class="grad-c">
<div id="resize-r" class="grad-r" title="Drag to set 'cx,cy' properties. Resize to set 'r' property."></div>
</div>
<div class="grad-f" title="Drag to set 'fx,fy' properties."></div>
</div>
</div>
<script src="{{{componentAssets}}}/js/radial-tool.js"></script>