style form elements
This commit is contained in:
parent
6bd2a47134
commit
fcb22c9fb8
4 changed files with 106 additions and 42 deletions
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue