<style>
</style>
<div class='css-tool tool-background-generator row'>
<div class='tool-title'>Background</div>
<div class='display small-12 columns'><div class='text'>Hello World!</div></div>
<div class='inputs small-12 columns'>
<div class='input background-type'>
<div class='label'>Background Type</div>
<div class='field'>
<select>
<option value='none'>none</option>
<option value='solid' >solid</option>
<option value='diagonal' SELECTED >diagonal</option>
</select>
</div>
</div>
<div class='section solid'>
<div class='colors'>
<div class='row'>
<div class='input red small-4 columns'>
<div class='label'>Red (0-255)</div>
<div class='field'><input type='text' value='244' /></div>
</div><!-- end input -->
<div class='input green small-4 columns'>
<div class='label'>Green (0-255)</div>
<div class='field'><input type='text' value='22' /></div>
</div><!-- end input -->
<div class='input blue small-4 columns'>
<div class='label'>Blue (0-255)</div>
<div class='field'><input type='text' value='22' /></div>
</div><!-- end input -->
</div>
<div class='input opacity'>
<div class='label'>Alpha/Opacity (0.0 - 1.0)</div>
<div class='field'><input type='text' value='0.2' /></div>
</div><!-- end input -->
</div><!-- End Colors -->
</div><!-- section solid -->
<div class='section diagonal'>
<div class='input angle'>
<div class='label'>Angle (0-360)</div>
<div class='field'><input type='text' value='120' /></div>
</div><!-- end input -->
<div class='input diag-width'>
<div class='label'>Band Width (px)</div>
<div class='field'><input type='text' value='20' /></div>
</div><!-- end input -->
<div class='colors a'>
<div class='title'>Primary Color</div>
<div class='row'>
<div class='input red small-4 columns'>
<div class='label'>Red (0-255)</div>
<div class='field'><input type='text' value='244' /></div>
</div><!-- end input -->
<div class='input green small-4 columns'>
<div class='label'>Green (0-255)</div>
<div class='field'><input type='text' value='22' /></div>
</div><!-- end input -->
<div class='input blue small-4 columns'>
<div class='label'>Blue (0-255)</div>
<div class='field'><input type='text' value='22' /></div>
</div><!-- end input -->
</div>
<div class='input opacity'>
<div class='label'>Alpha/Opacity (0.0 - 1.0)</div>
<div class='field'><input type='text' value='0.2' /></div>
</div><!-- end input -->
</div><!-- End primary colors -->
<div class='colors b'>
<div class='title'>Secondary Color</div>
<div class='row'>
<div class='input red small-4 columns'>
<div class='label'>Red (0-255)</div>
<div class='field'><input type='text' value='244' /></div>
</div><!-- end input -->
<div class='input green small-4 columns'>
<div class='label'>Green (0-255)</div>
<div class='field'><input type='text' value='22' /></div>
</div><!-- end input -->
<div class='input blue small-4 columns'>
<div class='label'>Blue (0-255)</div>
<div class='field'><input type='text' value='22' /></div>
</div><!-- end input -->
</div>
<div class='input opacity'>
<div class='label'>Alpha/Opacity (0.0 - 1.0)</div>
<div class='field'><input type='text' value='0.4' /></div>
</div><!-- end input -->
</div><!-- End secondary colors -->
</div><!-- section diagonal -->
</div><!-- end inputs -->
<div class='code-area small-12 columns'>
<div class='label'>CSS</div>
<div class='field'>
<textarea></textarea>
</div>
</div>
</div><!-- end tool-box-shadow-generator -->
<script>
/* HANDLE background style dropdown change... */
$(function() {
// Handler for .ready() called.
$( ".tool-background-generator select ").on( "change", function() {
// get value of background type dropdown...
var background_style = $(".tool-background-generator .background-type select").val();
// slide up currently visible content
$( ".tool-background-generator " + ".section").slideUp('fast');
// slide down new section style
if(background_style == 'solid')
$( ".tool-background-generator .section.solid").slideDown();
else if(background_style == 'diagonal')
$( ".tool-background-generator .section.diagonal").slideDown();
});
});
</script>
|