formtastic.css

/* -------------------------------------------------------------------------------------------------

It's *strongly* suggested that you don't modify this file.  Instead, load a new stylesheet after
this one in your layouts (eg formtastic_changes.css) and override the styles to suit your needs.
This will allow you to update formtastic.css with new releases without clobbering your own changes.

This stylesheet forms part of the Formtastic Rails Plugin
(c) 2008 Justin French

--------------------------------------------------------------------------------------------------*/


/* NORMALIZE AND RESET - obviously inspired by Yahoo's reset.css, but scoped to just form.formtastic
--------------------------------------------------------------------------------------------------*/
form.formtastic, form.formtastic ul, form.formtastic ol, form.formtastic li, form.formtastic fieldset, form.formtastic legend, form.formtastic input, form.formtastic textarea, form.formtastic select, form.formtastic p { margin:0; padding:0; }
form.formtastic fieldset { border:0; }
form.formtastic em, form.formtastic strong { font-style:normal; font-weight:normal; }
form.formtastic ol, form.formtastic ul { list-style:none; }
form.formtastic abbr, form.formtastic acronym { border:0; font-variant:normal; }
form.formtastic input, form.formtastic textarea, form.formtastic select { font-family:inherit; font-size:inherit; font-weight:inherit; }
form.formtastic input, form.formtastic textarea, form.formtastic select { font-size:100%; }
form.formtastic legend { white-space:normal; color:#000; }


/* SEMANTIC ERRORS
--------------------------------------------------------------------------------------------------*/
form.formtastic ul.errors { color:#cc0000; margin:0.5em 0 1.5em 25%; list-style:square; }
form.formtastic ul.errors li { padding:0; border:none; display:list-item; }


/* FIELDSETS & LISTS
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset { overflow:auto; } /* clearing contained floats */
form.formtastic fieldset.inputs { }
form.formtastic fieldset.buttons { padding-left:25%; }
form.formtastic fieldset ol { }
form.formtastic fieldset.buttons li { float:left; padding-right:0.5em; }

/* INPUT LIs
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li { margin-bottom:1.5em; }
form.formtastic fieldset > ol > li { overflow:auto; } /* clearing contained floats */

form.formtastic fieldset > ol > li.required { }
form.formtastic fieldset > ol > li.optional { }
form.formtastic fieldset > ol > li.error { }
  

/* LABELS
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li label { display:block; width:25%; float:left; padding-top:.2em; }
form.formtastic fieldset > ol > li > li label { line-height:100%; padding-top:0; }
form.formtastic fieldset > ol > li > li label input { line-height:100%; vertical-align:middle; margin-top:-0.1em;}


/* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets)
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li fieldset { position:relative; }
form.formtastic fieldset > ol > li fieldset legend { position:absolute; width:95%; padding-top:0.1em; left: 0px; }
form.formtastic fieldset > ol > li fieldset legend span { position:absolute; }
form.formtastic fieldset > ol > li fieldset legend.label label { position:absolute; }
form.formtastic fieldset > ol > li fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; }
form.formtastic fieldset > ol > li fieldset ol li { padding:0; border:0; }


/* INLINE HINTS
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li p.inline-hints { color:#666; margin:0.5em 0 0 25%; }


/* INLINE ERRORS
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li p.inline-errors { color:#cc0000; margin:0.5em 0 0 25%; }
form.formtastic fieldset > ol > li ul.errors { color:#cc0000; margin:0.5em 0 0 25%; list-style:square; }
form.formtastic fieldset > ol > li ul.errors li { padding:0; border:none; display:list-item; }


/* STRING & NUMERIC OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li.string input { max-width:74%; }
form.formtastic fieldset > ol > li.password input { max-width: 13em; }
form.formtastic fieldset > ol > li.numeric input { max-width:74%; }


/* TEXTAREA OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li.text textarea { width:74%; }


/* HIDDEN OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.hidden { display:none; }

/* BOOLEAN OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li.boolean label { padding-left:25%; width:auto; }
form.formtastic fieldset > ol > li.boolean label input { margin:0 0.5em 0 0.2em; }


/* RADIO OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li.radio { }
form.formtastic fieldset > ol > li.radio fieldset ol { margin-bottom:-0.6em; }
form.formtastic fieldset > ol > li.radio fieldset ol li { margin:0.1em 0 0.5em 0; }
form.formtastic fieldset > ol > li.radio fieldset ol li label { float:none; width:100%; }
form.formtastic fieldset > ol > li.radio fieldset ol li label input { margin-right:0.2em; }


/* CHECK BOXES (COLLECTION) OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li.check_boxes { }
form.formtastic fieldset > ol > li.check_boxes fieldset ol { margin-bottom:-0.6em; }
form.formtastic fieldset > ol > li.check_boxes fieldset ol li { margin:0.1em 0 0.5em 0; }
form.formtastic fieldset > ol > li.check_boxes fieldset ol li label { float:none; width:100%; }
form.formtastic fieldset > ol > li.check_boxes fieldset ol li label input { margin-right:0.2em; }



/* DATE & TIME OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li.date fieldset ol li,
form.formtastic fieldset > ol > li.time fieldset ol li,
form.formtastic fieldset > ol > li.datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; }

form.formtastic fieldset > ol > li.date fieldset ol li label,
form.formtastic fieldset > ol > li.time fieldset ol li label,
form.formtastic fieldset > ol > li.datetime fieldset ol li label { display:none; }

form.formtastic fieldset > ol > li.date fieldset ol li label input, 
form.formtastic fieldset > ol > li.time fieldset ol li label input, 
form.formtastic fieldset > ol > li.datetime fieldset ol li label input { display:inline; margin:0; padding:0;  }

input.html.erb

<%= f.inputs :name => "Categorisation" do %>
  <%= f.input :category_id, :as => :select, :collection => category_tree %>
  <%= f.input :location_id, :as => :select, :collection => location_tree %>
<% end %>

<%= f.inputs :name => "Basic Information" do %>
  <%= f.input :name %>
  <%= f.input :cached_slug %>
  <%= f.input :short_description %>
  <%= f.input :long_description %>
  <%= f.input :product_description %>
<% end %>

<%= f.inputs :name => "Contact Details" do %>
  <%= f.input :website %>
  <%= f.input :email %>
  <%= f.input :phone %>
  <%= f.input :freephone %>
  <%= f.input :mobile %>
  <%= f.input :fax %>
<% end %>

<%= f.inputs :name => "Geospatial (WGS '84)" do %>
  <%= f.input :latitude %>
  <%= f.input :longitude %>
<% end %>

<%= f.inputs :name => "Third Party Services" do %>
  <%= f.input :facebook_username %>
  <%= f.input :twitter_username %>
<% end %>

<%= f.inputs :name => "Physical Address" do %>
  <%= f.semantic_fields_for :physical_address do |pa| %>
    <%= pa.input :line_1 %>
    <%= pa.input :line_2 %>
    <%= pa.input :line_3 %>
    <%= pa.input :suburb %>
    <%= pa.input :city %>
    <%= pa.input :postcode %>
  <% end %>
<% end %>

<%= f.inputs :name => "Postal Address" do %>
  <%= f.semantic_fields_for :postal_address do |pa| %>
    <%= pa.input :line_1 %>
    <%= pa.input :line_2 %>
    <%= pa.input :line_3 %>
    <%= pa.input :suburb %>
    <%= pa.input :city %>
    <%= pa.input :postcode %>
  <% end %>
<% end %>

output.html

<form accept-charset="UTF-8" action="/admin/listings/localist" class="formtastic listing" id="edit_listing_1" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="HW9P6MgRg5p1sQun8PRj6OsUD/BZkpzq9b7Av6TVy1s=" /></div> 
 
  <fieldset class="inputs"><legend><span>Categorisation</span></legend><ol> 
  <li class="select optional" id="listing_category_id_input"><label for="listing_category_id">Category</label><select id="listing_category_id" name="listing[category_id]"><option value=""></option> 
</select></li> 
</ol></fieldset> 
<fieldset class="inputs"><legend><span>Basic Information</span></legend><ol> 
  <li class="string optional" id="listing_name_input"><label for="listing_name">Name</label><input id="listing_name" maxlength="255" name="listing[name]" size="50" type="text" value="Localist" /></li> 
  <li class="string optional" id="listing_cached_slug_input"><label for="listing_cached_slug">Cached slug</label><input id="listing_cached_slug" maxlength="255" name="listing[cached_slug]" size="50" type="text" value="localist" /></li> 
  <li class="text optional" id="listing_short_description_input"><label for="listing_short_description">Short description</label><textarea cols="50" id="listing_short_description" name="listing[short_description]" rows="20">Localist gives Aucklanders a way to champion their communities and support local organisations and businesses.</textarea></li> 
  <li class="text optional" id="listing_long_description_input"><label for="listing_long_description">Long description</label><textarea cols="50" id="listing_long_description" name="listing[long_description]" rows="20">Auckland's diverse mix of people and communities calls for a unique new business that can help bring them closer together. Localist gives Aucklanders a way to champion their communities and support local organisations and businesses.</textarea></li> 
  <li class="text optional" id="listing_product_description_input"><label for="listing_product_description">Product description</label><textarea cols="50" id="listing_product_description" name="listing[product_description]" rows="20">Soon, Localist will bring local knowledge and information into every home; and from there people will be able to share it. For businesses, it's a way to advertise to customers nearby and to build relationships with those customers.</textarea></li> 
</ol></fieldset> 
<fieldset class="inputs"><legend><span>Contact Details</span></legend><ol> 
  <li class="string optional" id="listing_website_input"><label for="listing_website">Website</label><input id="listing_website" maxlength="255" name="listing[website]" size="50" type="text" value="http://www.localist.co.nz/" /></li> 
  <li class="string optional" id="listing_email_input"><label for="listing_email">Email</label><input id="listing_email" maxlength="255" name="listing[email]" size="50" type="text" value="[email protected]" /></li> 
  <li class="string optional" id="listing_phone_input"><label for="listing_phone">Phone</label><input id="listing_phone" maxlength="255" name="listing[phone]" size="50" type="text" value="09 307 1241" /></li> 
  <li class="string optional" id="listing_freephone_input"><label for="listing_freephone">Freephone</label><input id="listing_freephone" maxlength="255" name="listing[freephone]" size="50" type="text" value="0800 2 LOCAL" /></li> 
  <li class="string optional" id="listing_mobile_input"><label for="listing_mobile">Mobile</label><input id="listing_mobile" maxlength="255" name="listing[mobile]" size="50" type="text" value="027 498 6949" /></li> 
  <li class="string optional" id="listing_fax_input"><label for="listing_fax">Fax</label><input id="listing_fax" maxlength="255" name="listing[fax]" size="50" type="text" value="09 307 1241" /></li> 
</ol></fieldset> 
<fieldset class="inputs"><legend><span>Geospatial (WGS '84)</span></legend><ol> 
  <li class="string optional" id="listing_latitude_input"><label for="listing_latitude">Latitude</label><input id="listing_latitude" name="listing[latitude]" size="50" type="text" value="-41.244772" /></li> 
  <li class="string optional" id="listing_longitude_input"><label for="listing_longitude">Longitude</label><input id="listing_longitude" name="listing[longitude]" size="50" type="text" value="172.617188" /></li> 
</ol></fieldset> 
<fieldset class="inputs"><legend><span>Third Party Services</span></legend><ol> 
  <li class="string optional" id="listing_facebook_username_input"><label for="listing_facebook_username">Facebook username</label><input id="listing_facebook_username" maxlength="255" name="listing[facebook_username]" size="50" type="text" value="LocalistNZ" /></li> 
  <li class="string optional" id="listing_twitter_username_input"><label for="listing_twitter_username">Twitter username</label><input id="listing_twitter_username" maxlength="255" name="listing[twitter_username]" size="50" type="text" value="LocalistNZ" /></li> 
</ol></fieldset> 
<fieldset class="inputs"><legend><span>Physical Address</span></legend><ol> 
  
    <li class="string optional" id="listing_physical_address_attributes_line_1_input"><label for="listing_physical_address_attributes_line_1">Line 1</label><input id="listing_physical_address_attributes_line_1" maxlength="255" name="listing[physical_address_attributes][line_1]" size="50" type="text" value="Level 4" /></li> 
    <li class="string optional" id="listing_physical_address_attributes_line_2_input"><label for="listing_physical_address_attributes_line_2">Line 2</label><input id="listing_physical_address_attributes_line_2" maxlength="255" name="listing[physical_address_attributes][line_2]" size="50" type="text" value="65 Upper Queen St" /></li> 
    <li class="string optional" id="listing_physical_address_attributes_line_3_input"><label for="listing_physical_address_attributes_line_3">Line 3</label><input id="listing_physical_address_attributes_line_3" maxlength="255" name="listing[physical_address_attributes][line_3]" size="50" type="text" /></li> 
    <li class="string optional" id="listing_physical_address_attributes_suburb_input"><label for="listing_physical_address_attributes_suburb">Suburb</label><input id="listing_physical_address_attributes_suburb" maxlength="255" name="listing[physical_address_attributes][suburb]" size="50" type="text" value="" /></li> 
    <li class="string optional" id="listing_physical_address_attributes_city_input"><label for="listing_physical_address_attributes_city">City</label><input id="listing_physical_address_attributes_city" maxlength="255" name="listing[physical_address_attributes][city]" size="50" type="text" value="Auckland" /></li> 
    <li class="string optional" id="listing_physical_address_attributes_postcode_input"><label for="listing_physical_address_attributes_postcode">Postcode</label><input id="listing_physical_address_attributes_postcode" maxlength="255" name="listing[physical_address_attributes][postcode]" size="50" type="text" value="1010" /></li> 
<input id="listing_physical_address_attributes_id" name="listing[physical_address_attributes][id]" type="hidden" value="1" /></ol></fieldset> 
<fieldset class="inputs"><legend><span>Postal Address</span></legend><ol> 
  
    <li class="string optional" id="listing_postal_address_attributes_line_1_input"><label for="listing_postal_address_attributes_line_1">Line 1</label><input id="listing_postal_address_attributes_line_1" maxlength="255" name="listing[postal_address_attributes][line_1]" size="50" type="text" value="PO Box 7707" /></li> 
    <li class="string optional" id="listing_postal_address_attributes_line_2_input"><label for="listing_postal_address_attributes_line_2">Line 2</label><input id="listing_postal_address_attributes_line_2" maxlength="255" name="listing[postal_address_attributes][line_2]" size="50" type="text" value="Wellesley St" /></li> 
    <li class="string optional" id="listing_postal_address_attributes_line_3_input"><label for="listing_postal_address_attributes_line_3">Line 3</label><input id="listing_postal_address_attributes_line_3" maxlength="255" name="listing[postal_address_attributes][line_3]" size="50" type="text" /></li> 
    <li class="string optional" id="listing_postal_address_attributes_suburb_input"><label for="listing_postal_address_attributes_suburb">Suburb</label><input id="listing_postal_address_attributes_suburb" maxlength="255" name="listing[postal_address_attributes][suburb]" size="50" type="text" value="" /></li> 
    <li class="string optional" id="listing_postal_address_attributes_city_input"><label for="listing_postal_address_attributes_city">City</label><input id="listing_postal_address_attributes_city" maxlength="255" name="listing[postal_address_attributes][city]" size="50" type="text" value="Auckland" /></li> 
    <li class="string optional" id="listing_postal_address_attributes_postcode_input"><label for="listing_postal_address_attributes_postcode">Postcode</label><input id="listing_postal_address_attributes_postcode" maxlength="255" name="listing[postal_address_attributes][postcode]" size="50" type="text" value="1141" /></li> 
<input id="listing_postal_address_attributes_id" name="listing[postal_address_attributes][id]" type="hidden" value="2" /></ol></fieldset> 
 
  <fieldset class="buttons"><ol> 
    <li class="commit"><input class="update" id="listing_submit" name="commit" type="submit" value="Update Listing" /></li> 
</ol></fieldset> 
</form>