File: class.background.htm

<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>