style form elements

app/stylesheets/partials/_blue.sass

@@ -4,18 +4,26 @@ $background_color: #0b61a4
 $module_border_color: #033e6b
 $module_background_color: #66a3d2
 
+$input_hover_border_color: #ff9200
+$input_focus_border_color: #fff
+
+$loud_button_background_color: #ff9200
+$loud_button_border_color: #ffad40
+$loud_button_color: #a65f00
+$loud_button_focus_border_color: #000
+
 // Used by Blueprint:
 
 $font_color: #fff
 
-$header_color: $font_color
+$header_color: inherit
 
-$link_color: $font_color
+$link_color: inherit
-$link_hover_color: $font_color
+$link_hover_color: inherit
-$link_focus_color: $font_color
+$link_focus_color: inherit
-$link_active_color: $font_color
+$link_active_color: inherit
-$link_visited_color: $font_color
+$link_visited_color: inherit
 
-$error_color: $font_color
+$error_color: inherit
 $error_bg_color: #e14f1c
 $error_border_color: #cd0a0a

app/stylesheets/screen.scss

@@ -4,6 +4,11 @@
 @import "blueprint";
 @import "compass";
 
+@mixin module {
+  background: $module_background_color;
+  border: 1px solid $module_border_color;
+}
+
 body {
   @include blueprint-typography(true);
   @include blueprint-utilities;
@@ -21,8 +26,32 @@ body {
   width: 800px;
 }
 
-form.bp {
+form {
-  @include blueprint-form; }
+  @include blueprint-form;
+  
+  input[type=text] {
+    @include module;
+    color: inherit;
+    &:hover {
+      border-color: $input_hover_border_color;
+    }
+    &:focus {
+      border-color: $input_focus_border_color;
+    }
+  }
+  
+  input[type=submit] {
+    background: $loud_button_background_color;
+    border: 1px solid $loud_button_border_color;
+    color: $loud_button_color;
+    cursor: pointer;
+    font-weight: bold;
+    padding: 5px;
+    &:focus {
+      border-color: $loud_button_focus_border_color;
+    }
+  }
+}
 
 .alert {
   @include error;

app/views/items/index.html.haml

@@ -1,4 +1,4 @@
-= form_tag items_path, :method => :get, :class => 'bp' do
+= form_tag items_path, :method => :get do
   = text_field_tag :q, @query
   = submit_tag 'Search', :name => nil
 - if @results

public/stylesheets/compiled/screen.css

@@ -81,7 +81,7 @@ a img {
   border: none;
 }
 
-/* line 7, ../../../app/stylesheets/screen.scss */
+/* line 12, ../../../app/stylesheets/screen.scss */
 body {
   line-height: 1.5;
   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
@@ -93,7 +93,7 @@ body {
 /* line 65, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_typography.scss */
 body h1, body h2, body h3, body h4, body h5, body h6 {
   font-weight: normal;
-  color: white;
+  color: inherit;
 }
 /* line 66, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_typography.scss */
 body h1 img, body h2 img, body h3 img, body h4 img, body h5 img, body h6 img {
@@ -154,23 +154,23 @@ body p img.right {
 /* line 77, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_typography.scss */
 body a {
   text-decoration: underline;
-  color: white;
+  color: inherit;
 }
 /* line 18, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss */
 body a:visited {
-  color: white;
+  color: inherit;
 }
 /* line 21, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss */
 body a:focus {
-  color: white;
+  color: inherit;
 }
 /* line 24, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss */
 body a:hover {
-  color: white;
+  color: inherit;
 }
 /* line 27, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss */
 body a:active {
-  color: white;
+  color: inherit;
 }
 /* line 78, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_typography.scss */
 body blockquote {
@@ -343,12 +343,12 @@ body .error {
   margin-bottom: 1em;
   border: 2px solid #dddddd;
   background: #e14f1c;
-  color: white;
+  color: inherit;
   border-color: #cd0a0a;
 }
 /* line 29, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_interaction.scss */
 body .error a {
-  color: white;
+  color: inherit;
 }
 /* line 6, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_interaction.scss */
 body .notice {
@@ -395,7 +395,7 @@ body .removed {
   color: white;
 }
 
-/* line 17, ../../../app/stylesheets/screen.scss */
+/* line 22, ../../../app/stylesheets/screen.scss */
 #container {
   margin: 0 auto;
   padding: 1em 2em 1em;
@@ -404,91 +404,118 @@ body .removed {
 }
 
 /* line 18, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */
-form.bp label {
+form label {
   font-weight: bold;
 }
 /* line 19, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */
-form.bp fieldset {
+form fieldset {
   padding: 1.4em;
   margin: 0 0 1.5em 0;
 }
 /* line 20, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */
-form.bp legend {
+form legend {
   font-weight: bold;
   font-size: 1.2em;
 }
 /* line 25, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */
-form.bp input.text, form.bp input.title, form.bp input[type=text], form.bp input[type=password] {
+form input.text, form input.title, form input[type=text], form input[type=password] {
   margin: 0.5em 0;
   background-color: white;
   padding: 5px;
 }
 /* line 26, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */
-form.bp input.title {
+form input.title {
   font-size: 1.5em;
 }
 /* line 30, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */
-form.bp input[type=checkbox], form.bp input.checkbox, form.bp input[type=radio], form.bp input.radio {
+form input[type=checkbox], form input.checkbox, form input[type=radio], form input.radio {
   position: relative;
   top: 0.25em;
 }
 /* line 32, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */
-form.bp textarea {
+form textarea {
   margin: 0.5em 0;
   padding: 5px;
 }
 /* line 33, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */
-form.bp select {
+form select {
   margin: 0.5em 0;
 }
 /* line 57, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */
-form.bp fieldset {
+form fieldset {
   border: 1px solid #cccccc;
 }
 /* line 60, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */
-form.bp input.text, form.bp input.title, form.bp input[type=text], form.bp input[type=password],
+form input.text, form input.title, form input[type=text], form input[type=password],
-form.bp textarea, form.bp select {
+form textarea, form select {
   border: 1px solid #bbbbbb;
 }
 /* line 62, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */
-form.bp input.text:focus, form.bp input.title:focus, form.bp input[type=text]:focus, form.bp input[type=password]:focus,
+form input.text:focus, form input.title:focus, form input[type=text]:focus, form input[type=password]:focus,
-form.bp textarea:focus, form.bp select:focus {
+form textarea:focus, form select:focus {
   border: 1px solid #666666;
 }
 /* line 46, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */
-form.bp input.text, form.bp input.title, form.bp input[type=text], form.bp input[type=password] {
+form input.text, form input.title, form input[type=text], form input[type=password] {
   width: 300px;
 }
 /* line 48, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */
-form.bp textarea {
+form textarea {
   width: 390px;
   height: 250px;
 }
+/* line 32, ../../../app/stylesheets/screen.scss */
+form input[type=text] {
+  background: #66a3d2;
+  border: 1px solid #033e6b;
+  color: inherit;
+}
+/* line 35, ../../../app/stylesheets/screen.scss */
+form input[type=text]:hover {
+  border-color: #ff9200;
+}
+/* line 38, ../../../app/stylesheets/screen.scss */
+form input[type=text]:focus {
+  border-color: white;
+}
+/* line 43, ../../../app/stylesheets/screen.scss */
+form input[type=submit] {
+  background: #ff9200;
+  border: 1px solid #ffad40;
+  color: #a65f00;
+  cursor: pointer;
+  font-weight: bold;
+  padding: 5px;
+}
+/* line 50, ../../../app/stylesheets/screen.scss */
+form input[type=submit]:focus {
+  border-color: black;
+}
 
-/* line 27, ../../../app/stylesheets/screen.scss */
+/* line 56, ../../../app/stylesheets/screen.scss */
 .alert {
   padding: 0.8em;
   margin-bottom: 1em;
   border: 2px solid #dddddd;
   background: #e14f1c;
-  color: white;
+  color: inherit;
   border-color: #cd0a0a;
 }
 /* line 29, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_interaction.scss */
 .alert a {
-  color: white;
+  color: inherit;
 }
 
-/* line 31, ../../../app/stylesheets/screen.scss */
+/* line 60, ../../../app/stylesheets/screen.scss */
 h1 a {
   text-decoration: none;
 }
-/* line 33, ../../../app/stylesheets/screen.scss */
+/* line 62, ../../../app/stylesheets/screen.scss */
 h1 a:hover {
   text-decoration: underline;
 }
 
-/* line 38, ../../../app/stylesheets/screen.scss */
+/* line 67, ../../../app/stylesheets/screen.scss */
 .item {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -501,7 +528,7 @@ h1 a:hover {
   vertical-align: top;
   width: 100px;
 }
-/* line 44, ../../../app/stylesheets/screen.scss */
+/* line 73, ../../../app/stylesheets/screen.scss */
 .item img {
   display: block;
   height: 80px;