Style enhancements.

crowdint · Nov 20, 2011 · 23a8a0e · 23a8a0e
1 parent 7968294
commit 23a8a0e
Show file tree

Hide file tree

Showing 10 changed files with 258 additions and 117 deletions.
diff --git a/app/stylesheets/screen.scss b/app/stylesheets/screen.scss
@@ -86,6 +86,8 @@ ul#primary-nav li.secondary {
   background-position-x:right;
   padding: 0.4em 18px 0.4em 0.4em;
   @include border-radius(5px);
+  @include box-shadow(#000 0 0 4px inset);
+  text-shadow: black 0 1px 0;
 }
 ul#primary-nav li.secondary ul {
   visibility: hidden;
@@ -403,17 +405,17 @@ ul#projects {
 }
 
 ul#projects li {
-  @include background(linear-gradient(top, $aluminium-1, $aluminium-2));
-  @include box-shadow(0 1px 2px #aaaaaa);
+  background: #efefef;
+  @include background(linear-gradient(top, #efefef, #dfe1e2));
+  @include box-shadow(0 1px 2px #aaaaaa inset);
   text-shadow: white 0 1px 0;
-  background-color: #d3d7cf;
-  border: 1px solid $aluminium-1;
-  border-top: 1px solid $aluminium-2;
   margin: 10px 0;
   padding: 10px;
+  @include border-radius(5px);
+  border: 1px solid $darkgrey*1.5;
 }
 ul#projects li:hover {
-  @include background(linear-gradient(top, $aluminium-2, $aluminium-3));
+  @include background(linear-gradient(top, darken(#efefef, 10%), darken(#dfe1e2, 10%)));
 }
 
 ul#projects li h2 {
@@ -429,20 +431,23 @@ ul#projects li:hover {
 }
 
 a.button {
-  @include border-radius(2px);
-  @include background(linear-gradient(top, $aluminium-1, $aluminium-2));
-  @include box-shadow(0 1px 2px $aluminium-2);
-  border: 1px solid $aluminium-3;
-  display: inline-block;
+  background: #efefef;
+  @include background(linear-gradient(top, #efefef, #dfe1e2));
+  @include box-shadow(0 1px 2px #aaaaaa);
+  text-shadow: white 0 1px 0;
   padding: 5px;
+  @include border-radius(5px);
+  border: 1px solid $darkgrey*1.5;
   text-decoration: none;
   font-weight: bold;
 }
 
+
+
 a.button:hover {
   @include background(linear-gradient(top, $chameleon-2, $chameleon-3));
   color: white;
-  text-decoration: underline;
+  text-shadow: $darkgrey 0 1px 0;
 }
 .tags{
   color:$sky-blue-3;
@@ -546,3 +551,96 @@ div.note {
   padding: 5px;
   margin-bottom: 10px;
 }
+
+/* Form Styles */
+.form-wrapper  {
+  padding: 10px;
+
+  h3 {
+    margin-left: 160px;
+  }
+
+  input[type=text],
+  input[type=email],
+  input[type=password],
+  select
+  textarea {
+    @include transition(border linear 0.2s, box-shadow linear 0.2s);
+    @include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  input[type=text]:focus,
+  input[type=email]:focus,
+  input[type=password]:focus,
+  select:focus,
+  textarea:focus {
+    outline: 0;
+    border-color: rgba(114, 159, 207, 0.8);
+    @include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(114, 159, 207, 0.6));
+  }
+
+  input[type=text],
+  input[type=email],
+  input[type=password],
+  select {
+    display: inline-block;
+    width: 210px;
+    height: 14px;
+    padding: 4px;
+    font-size: 14px;
+    color: gray;
+    border: 1px solid #CCC;
+    @include border-radius(3px);
+  }
+  select {
+    height: 26px;
+    min-width: 220px;
+    width: auto;
+    margin: auto;
+  }
+
+  div.field-wrapper label {
+    width: 150px;
+    text-align: right;
+    display: block;
+    zoom: 1;
+    height: 14px;
+    float: left;
+  }
+
+  div.field-wrapper:before, div.field-wrapper:after {
+    display: table;
+    content: "";
+    zoom: 1;
+  }
+
+  div.field-wrapper:after {
+    clear: both;
+  }
+
+  div.field {
+    margin-left: 160px;
+  }
+
+  div.date-wrapper select {
+    min-width: 0px;
+    width: auto;
+  }
+
+  div.field-wrapper div.help {
+    color: $darkgrey;
+    margin-left: 160px;
+    margin-top: -10px;
+    margin-bottom: 10px;
+    font-size: 0.85em;
+    font-style: italic;
+  }
+
+  div.actions, div.secondary-actions {
+    padding-left: 160px;
+  }
+
+  div.secondary-actions a {
+    display: block;
+  }
+}
diff --git a/app/views/devise/confirmations/new.html.erb b/app/views/devise/confirmations/new.html.erb
@@ -1,14 +1,17 @@
 <% content_for :title_bar do %>
   <h1>Resend confirmation instructions</h1>
 <% end %>
-
+<div class="form-wrapper">
 <%= form_for(resource, :as => resource_name, :url => confirmation_path(resource_name), :html => { :method => :post }) do |f| %>
   <%= devise_error_messages! %>
 
-  <p><%= f.label :email %><br />
-  <%= f.email_field :email %></p>
+  <div class="field-wrapper">
+    <%= f.label :email %>
+    <div class="field"><%= f.email_field :email %></div>
+  </div>
 
-  <p><%= f.submit "Resend confirmation instructions" %></p>
+  <div class="actions"><%= f.submit "Resend confirmation instructions" %></div>
 <% end %>
 
 <%= render :partial => "devise/shared/links" %>
+</div>
diff --git a/app/views/devise/passwords/edit.html.erb b/app/views/devise/passwords/edit.html.erb
@@ -1,18 +1,23 @@
 <% content_for :title_bar do %>
   <h1>Change your password</h1>
 <% end %>
-
+<div class="form-wrapper">
 <%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :put }) do |f| %>
   <%= devise_error_messages! %>
   <%= f.hidden_field :reset_password_token %>
 
-  <p><%= f.label :password, "New password" %><br />
-  <%= f.password_field :password %></p>
+  <div class="field-wrapper">
+    <%= f.label :password, "New password" %>
+    <div class="field"><%= f.password_field :password %></div>
+  </div>
 
-  <p><%= f.label :password_confirmation, "Confirm new password" %><br />
-  <%= f.password_field :password_confirmation %></p>
+  <div class="field-wrapper">
+    <%= f.label :password_confirmation, "Confirm new password" %>
+    <div class="field"><%= f.password_field :password_confirmation %></div>
+  </div>
 
-  <p><%= f.submit "Change my password" %></p>
+  <div class="actions"><%= f.submit "Change my password" %></div>
 <% end %>
 
 <%= render :partial => "devise/shared/links" %>
+</div>
diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
@@ -1,14 +1,17 @@
 <% content_for :title_bar do %>
   <h1>Forgot your password?</h1>
 <% end %>
-
+<div class="form-wrapper">
 <%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post }) do |f| %>
   <%= devise_error_messages! %>
 
-  <p><%= f.label :email %><br />
-  <%= f.email_field :email %></p>
+  <div class="field-wrapper">
+    <%= f.label :email %>
+    <div class="field"><%= f.email_field :email %></div>
+  </div>
 
-  <p><%= f.submit "Send me reset password instructions" %></p>
+  <div class="actions"><%= f.submit "Send me reset password instructions" %></div>
 <% end %>
 
 <%= render :partial => "devise/shared/links" %>
+</div>
diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
@@ -1,49 +1,60 @@
 <% content_for :title_bar do %>
   <h1>Edit <%= resource_name.to_s.humanize %></h1>
 <% end %>
-
+<div class="form-wrapper">
 <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| %>
   <%= devise_error_messages! %>
 
-  <p><%= f.label :name %><br />
-  <%= f.text_field :name %></p>
+  <div class="field-wrapper">
+    <%= f.label :name %>
+    <div class="field"><%= f.text_field :name %></div>
+  </div>
 
-  <p><%= f.label :initials %><br />
-  <%= f.text_field :initials %></p>
+  <div class="field-wrapper">
+    <%= f.label :initials %>
+    <div class="field"><%= f.text_field :initials %></div>
+  </div>
 
-  <p><%= f.label :email %><br />
-  <%= f.email_field :email %></p>
+  <div class="field-wrapper">
+    <%= f.label :email %>
+    <div class="field"><%= f.email_field :email %></div>
+  </div>
 
-  <p><%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
-  <%= f.password_field :password %></p>
+  <div class="field-wrapper">
+    <%= f.label :password %>
+    <div class="field"><%= f.password_field :password %></div>
+    <div class="help">Leave blank if you don't want to change it</div>
+  </div>
 
-  <p><%= f.label :password_confirmation %><br />
-  <%= f.password_field :password_confirmation %></p>
+  <div class="field-wrapper">
+    <%= f.label :password_confirmation %>
+    <div class="field"><%= f.password_field :password_confirmation %></div>
+  </div>
 
   <h3>Notify me when my stories are:</h3>
-  <p>
+  <div class="field">
     <%= f.check_box :email_delivery %>
     <%= f.label :email_delivery, 'delivered' %>
-  </p>
+  </div>
 
-  <p>
+  <div class="field">
     <%= f.check_box :email_acceptance %>
     <%= f.label :email_acceptance, 'accepted' %>
-  </p>
+  </div>
 
-  <p>
+  <div class="field">
     <%= f.check_box :email_rejection %>
     <%= f.label :email_rejection, 'rejected' %>
-  </p>
+  </div>
 
-  <p><%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
-  <%= f.password_field :current_password %></p>
+  <div class="field-wrapper">
+    <%= f.label :current_password %>
+    <div class="field"><%= f.password_field :current_password %></div>
+    <div class="help">We need your current password to confirm your changes.</div>
+  </div>
 
-  <p><%= f.submit "Update" %></p>
+  <div class="actions"><%= f.submit "Update" %></div>
 <% end %>
-
-<h3>Cancel my account</h3>
-
-<p>Unhappy? <%= link_to "Cancel my account", registration_path(resource_name), :confirm => "Are you sure?", :method => :delete %>.</p>
+<div class="secondary-actions"><%= link_to "Cancel my account", registration_path(resource_name), :confirm => "Are you sure?", :method => :delete %></div>
 
 <%= link_to "Back", :back %>
diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
@@ -1,20 +1,27 @@
 <% content_for :title_bar do %>
   <h1>Sign up</h1>
 <% end %>
-
+<div class="form-wrapper">
 <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
   <%= devise_error_messages! %>
 
-  <p><%= f.label :name %><br />
-  <%= f.text_field :name %></p>
+  <div class="field-wrapper">
+    <%= f.label :name %>
+    <div class="field"><%= f.text_field :name %></div>
+  </div>
 
-  <p><%= f.label :initials %><br />
-  <%= f.text_field :initials %></p>
+  <div class="field-wrapper">
+    <%= f.label :initials %>
+    <div class="field"><%= f.text_field :initials %></div>
+  </div>
 
-  <p><%= f.label :email %><br />
-  <%= f.email_field :email %></p>
+  <div class="field-wrapper">
+    <%= f.label :email %>
+    <div class="field"><%= f.email_field :email %></div>
+  </div>
 
-  <p><%= f.submit "Sign up" %></p>
+  <div class="actions"><%= f.submit "Sign up" %></div>
 <% end %>
 
 <%= render :partial => "devise/shared/links" %>
+</div>
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
@@ -1,19 +1,24 @@
 <% content_for :title_bar do %>
   <h1>Sign in</h1>
 <% end %>
-
+<div class="form-wrapper">
 <%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
-  <p><%= f.label :email %><br />
-  <%= f.email_field :email %></p>
+  <div class="field-wrapper">
+    <%= f.label :email %>
+    <div class="field"><%= f.email_field :email %></div>
+  </div>
+
+  <div class="field-wrapper">
+    <%= f.label :password %>
+    <div class="field"><%= f.password_field :password %></div>
+  </div>
 
-  <p><%= f.label :password %><br />
-  <%= f.password_field :password %></p>
 
   <% if devise_mapping.rememberable? -%>
-    <p><%= f.check_box :remember_me %> <%= f.label :remember_me %></p>
+    <div class="field"><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
   <% end -%>
 
-  <p><%= f.submit "Sign in" %></p>
+  <div class="actions"><%= f.submit "Sign in" %></div>
 <% end %>
-
 <%= render :partial => "devise/shared/links" %>
+</div>