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_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_hover_color: $font_color
$link_focus_color: $font_color
$link_active_color: $font_color
$link_visited_color: $font_color
$link_color: inherit
$link_hover_color: inherit
$link_focus_color: inherit
$link_active_color: inherit
$link_visited_color: inherit
$error_color: $font_color
$error_color: inherit
$error_bg_color: #e14f1c
$error_border_color: #cd0a0a

View file

@ -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 {
@include blueprint-form; }
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;

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

View file

@ -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.bp textarea, form.bp select {
form input.text, form input.title, form input[type=text], form input[type=password],
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.bp textarea:focus, form.bp select:focus {
form input.text:focus, form input.title:focus, form input[type=text]:focus, form input[type=password]: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;