style form elements

This commit is contained in:
Emi Matchu 2010-05-15 20:26:25 -04:00
parent 6bd2a47134
commit fcb22c9fb8
4 changed files with 106 additions and 42 deletions

View file

@ -4,18 +4,26 @@ $background_color: #0b61a4
$module_border_color: #033e6b $module_border_color: #033e6b
$module_background_color: #66a3d2 $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: // Used by Blueprint:
$font_color: #fff $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_bg_color: #e14f1c
$error_border_color: #cd0a0a $error_border_color: #cd0a0a

View file

@ -4,6 +4,11 @@
@import "blueprint"; @import "blueprint";
@import "compass"; @import "compass";
@mixin module {
background: $module_background_color;
border: 1px solid $module_border_color;
}
body { body {
@include blueprint-typography(true); @include blueprint-typography(true);
@include blueprint-utilities; @include blueprint-utilities;
@ -21,8 +26,32 @@ body {
width: 800px; 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 { .alert {
@include error; @include error;

View file

@ -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 = text_field_tag :q, @query
= submit_tag 'Search', :name => nil = submit_tag 'Search', :name => nil
- if @results - if @results

View file

@ -81,7 +81,7 @@ a img {
border: none; border: none;
} }
/* line 7, ../../../app/stylesheets/screen.scss */ /* line 12, ../../../app/stylesheets/screen.scss */
body { body {
line-height: 1.5; line-height: 1.5;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 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 */ /* 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 { body h1, body h2, body h3, body h4, body h5, body h6 {
font-weight: normal; 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 */ /* 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 { 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 */ /* line 77, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_typography.scss */
body a { body a {
text-decoration: underline; 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 */ /* 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 { 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 */ /* 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 { 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 */ /* 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 { 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 */ /* 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 { 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 */ /* line 78, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_typography.scss */
body blockquote { body blockquote {
@ -343,12 +343,12 @@ body .error {
margin-bottom: 1em; margin-bottom: 1em;
border: 2px solid #dddddd; border: 2px solid #dddddd;
background: #e14f1c; background: #e14f1c;
color: white; color: inherit;
border-color: #cd0a0a; border-color: #cd0a0a;
} }
/* line 29, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_interaction.scss */ /* line 29, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_interaction.scss */
body .error a { 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 */ /* line 6, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_interaction.scss */
body .notice { body .notice {
@ -395,7 +395,7 @@ body .removed {
color: white; color: white;
} }
/* line 17, ../../../app/stylesheets/screen.scss */ /* line 22, ../../../app/stylesheets/screen.scss */
#container { #container {
margin: 0 auto; margin: 0 auto;
padding: 1em 2em 1em; 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 */ /* 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; font-weight: bold;
} }
/* line 19, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */ /* 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; padding: 1.4em;
margin: 0 0 1.5em 0; 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 */ /* 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-weight: bold;
font-size: 1.2em; font-size: 1.2em;
} }
/* line 25, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */ /* 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; margin: 0.5em 0;
background-color: white; background-color: white;
padding: 5px; padding: 5px;
} }
/* line 26, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */ /* 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; font-size: 1.5em;
} }
/* line 30, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */ /* 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; position: relative;
top: 0.25em; top: 0.25em;
} }
/* line 32, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */ /* 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; margin: 0.5em 0;
padding: 5px; padding: 5px;
} }
/* line 33, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */ /* 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; margin: 0.5em 0;
} }
/* line 57, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */ /* 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; border: 1px solid #cccccc;
} }
/* line 60, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */ /* 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; border: 1px solid #bbbbbb;
} }
/* line 62, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */ /* 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; border: 1px solid #666666;
} }
/* line 46, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */ /* 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; width: 300px;
} }
/* line 48, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_form.scss */ /* 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; width: 390px;
height: 250px; 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 { .alert {
padding: 0.8em; padding: 0.8em;
margin-bottom: 1em; margin-bottom: 1em;
border: 2px solid #dddddd; border: 2px solid #dddddd;
background: #e14f1c; background: #e14f1c;
color: white; color: inherit;
border-color: #cd0a0a; border-color: #cd0a0a;
} }
/* line 29, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_interaction.scss */ /* line 29, ../../../../../.rvm/gems/ruby-1.9.1-p378/gems/compass-0.10.1/frameworks/blueprint/stylesheets/blueprint/_interaction.scss */
.alert a { .alert a {
color: white; color: inherit;
} }
/* line 31, ../../../app/stylesheets/screen.scss */ /* line 60, ../../../app/stylesheets/screen.scss */
h1 a { h1 a {
text-decoration: none; text-decoration: none;
} }
/* line 33, ../../../app/stylesheets/screen.scss */ /* line 62, ../../../app/stylesheets/screen.scss */
h1 a:hover { h1 a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* line 38, ../../../app/stylesheets/screen.scss */ /* line 67, ../../../app/stylesheets/screen.scss */
.item { .item {
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
@ -501,7 +528,7 @@ h1 a:hover {
vertical-align: top; vertical-align: top;
width: 100px; width: 100px;
} }
/* line 44, ../../../app/stylesheets/screen.scss */ /* line 73, ../../../app/stylesheets/screen.scss */
.item img { .item img {
display: block; display: block;
height: 80px; height: 80px;