From fcb22c9fb8bf9804f1560db2b1087b3ae69b631c Mon Sep 17 00:00:00 2001 From: Matchu Date: Sat, 15 May 2010 20:26:25 -0400 Subject: [PATCH] style form elements --- app/stylesheets/partials/_blue.sass | 22 +++++-- app/stylesheets/screen.scss | 33 +++++++++- app/views/items/index.html.haml | 2 +- public/stylesheets/compiled/screen.css | 91 +++++++++++++++++--------- 4 files changed, 106 insertions(+), 42 deletions(-) diff --git a/app/stylesheets/partials/_blue.sass b/app/stylesheets/partials/_blue.sass index e845a40c..5e990b81 100644 --- a/app/stylesheets/partials/_blue.sass +++ b/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_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 diff --git a/app/stylesheets/screen.scss b/app/stylesheets/screen.scss index aee40bc7..c8a782a5 100644 --- a/app/stylesheets/screen.scss +++ b/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 { - @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; diff --git a/app/views/items/index.html.haml b/app/views/items/index.html.haml index e614e577..fef42b81 100644 --- a/app/views/items/index.html.haml +++ b/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 diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css index b9635082..59ac6425 100644 --- a/public/stylesheets/compiled/screen.css +++ b/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.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;