compass-blueprint 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE +22 -0
- data/README.md +29 -0
- data/Rakefile +2 -0
- data/compass-blueprint.gemspec +18 -0
- data/framework/blueprint/stylesheets/_blueprint.scss +37 -0
- data/framework/blueprint/stylesheets/blueprint/_buttons.scss +101 -0
- data/framework/blueprint/stylesheets/blueprint/_colors.scss +36 -0
- data/framework/blueprint/stylesheets/blueprint/_debug.scss +28 -0
- data/framework/blueprint/stylesheets/blueprint/_fancy-type.scss +88 -0
- data/framework/blueprint/stylesheets/blueprint/_form.scss +66 -0
- data/framework/blueprint/stylesheets/blueprint/_grid.scss +258 -0
- data/framework/blueprint/stylesheets/blueprint/_ie.scss +111 -0
- data/framework/blueprint/stylesheets/blueprint/_interaction.scss +66 -0
- data/framework/blueprint/stylesheets/blueprint/_link-icons.scss +37 -0
- data/framework/blueprint/stylesheets/blueprint/_liquid.scss +152 -0
- data/framework/blueprint/stylesheets/blueprint/_print.scss +86 -0
- data/framework/blueprint/stylesheets/blueprint/_reset.scss +3 -0
- data/framework/blueprint/stylesheets/blueprint/_rtl.scss +121 -0
- data/framework/blueprint/stylesheets/blueprint/_scaffolding.scss +52 -0
- data/framework/blueprint/stylesheets/blueprint/_typography.scss +90 -0
- data/framework/blueprint/stylesheets/blueprint/_utilities.scss +37 -0
- data/framework/blueprint/stylesheets/blueprint/reset/_utilities.scss +80 -0
- data/framework/blueprint/templates/basic/grid.png +0 -0
- data/framework/blueprint/templates/basic/ie.sass +4 -0
- data/framework/blueprint/templates/basic/manifest.rb +30 -0
- data/framework/blueprint/templates/basic/partials/_base.sass +10 -0
- data/framework/blueprint/templates/basic/print.sass +4 -0
- data/framework/blueprint/templates/basic/screen.sass +12 -0
- data/framework/blueprint/templates/buttons/buttons.sass +49 -0
- data/framework/blueprint/templates/buttons/buttons/cross.png +0 -0
- data/framework/blueprint/templates/buttons/buttons/key.png +0 -0
- data/framework/blueprint/templates/buttons/buttons/tick.png +0 -0
- data/framework/blueprint/templates/buttons/manifest.rb +17 -0
- data/framework/blueprint/templates/link_icons/link_icons.sass +13 -0
- data/framework/blueprint/templates/link_icons/link_icons/doc.png +0 -0
- data/framework/blueprint/templates/link_icons/link_icons/email.png +0 -0
- data/framework/blueprint/templates/link_icons/link_icons/external.png +0 -0
- data/framework/blueprint/templates/link_icons/link_icons/feed.png +0 -0
- data/framework/blueprint/templates/link_icons/link_icons/im.png +0 -0
- data/framework/blueprint/templates/link_icons/link_icons/pdf.png +0 -0
- data/framework/blueprint/templates/link_icons/link_icons/visited.png +0 -0
- data/framework/blueprint/templates/link_icons/link_icons/xls.png +0 -0
- data/framework/blueprint/templates/link_icons/manifest.rb +23 -0
- data/framework/blueprint/templates/project/grid.png +0 -0
- data/framework/blueprint/templates/project/ie.sass +16 -0
- data/framework/blueprint/templates/project/manifest.rb +30 -0
- data/framework/blueprint/templates/project/partials/_base.sass +11 -0
- data/framework/blueprint/templates/project/print.sass +8 -0
- data/framework/blueprint/templates/project/screen.sass +46 -0
- data/framework/blueprint/templates/semantic/grid.png +0 -0
- data/framework/blueprint/templates/semantic/ie.sass +16 -0
- data/framework/blueprint/templates/semantic/manifest.rb +33 -0
- data/framework/blueprint/templates/semantic/partials/_base.sass +10 -0
- data/framework/blueprint/templates/semantic/partials/_form.sass +6 -0
- data/framework/blueprint/templates/semantic/partials/_page.sass +17 -0
- data/framework/blueprint/templates/semantic/partials/_two_col.sass +38 -0
- data/framework/blueprint/templates/semantic/print.sass +5 -0
- data/framework/blueprint/templates/semantic/screen.sass +14 -0
- data/lib/compass-blueprint.rb +4 -0
- data/lib/compass-blueprint/version.rb +5 -0
- metadata +119 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2012 Scott Davis
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
# Compass::Blueprint
|
2
|
+
|
3
|
+
TODO: Write a gem description
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
gem 'compass-blueprint'
|
10
|
+
|
11
|
+
And then execute:
|
12
|
+
|
13
|
+
$ bundle
|
14
|
+
|
15
|
+
Or install it yourself as:
|
16
|
+
|
17
|
+
$ gem install compass-blueprint
|
18
|
+
|
19
|
+
## Usage
|
20
|
+
|
21
|
+
TODO: Write usage instructions here
|
22
|
+
|
23
|
+
## Contributing
|
24
|
+
|
25
|
+
1. Fork it
|
26
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
27
|
+
3. Commit your changes (`git commit -am 'Added some feature'`)
|
28
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
29
|
+
5. Create new Pull Request
|
data/Rakefile
ADDED
@@ -0,0 +1,18 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
require File.expand_path('../lib/compass-blueprint/version', __FILE__)
|
3
|
+
|
4
|
+
Gem::Specification.new do |gem|
|
5
|
+
gem.authors = ["Scott Davis"]
|
6
|
+
gem.email = ["jetviper21@gmail.com"]
|
7
|
+
gem.description = %q{Compass extension for blueprint css framework}
|
8
|
+
gem.summary = %q{Blueprint for compass}
|
9
|
+
gem.homepage = ""
|
10
|
+
|
11
|
+
gem.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
12
|
+
gem.files = `git ls-files`.split("\n")
|
13
|
+
gem.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
14
|
+
gem.name = "compass-blueprint"
|
15
|
+
gem.require_paths = ["lib"]
|
16
|
+
gem.version = Compass::Blueprint::VERSION
|
17
|
+
gem.add_dependency 'compass'
|
18
|
+
end
|
@@ -0,0 +1,37 @@
|
|
1
|
+
@import "blueprint/colors";
|
2
|
+
@import "blueprint/grid";
|
3
|
+
@import "blueprint/typography";
|
4
|
+
@import "blueprint/utilities";
|
5
|
+
@import "blueprint/form";
|
6
|
+
@import "blueprint/interaction";
|
7
|
+
@import "blueprint/debug";
|
8
|
+
@import "blueprint/print";
|
9
|
+
@import "blueprint/ie";
|
10
|
+
|
11
|
+
// ### Usage examples:
|
12
|
+
//
|
13
|
+
// As a top-level mixin, apply to any page that includes the stylesheet:
|
14
|
+
// <pre class="source-code sass">
|
15
|
+
// +blueprint
|
16
|
+
// </pre>
|
17
|
+
//
|
18
|
+
// Scoped by a presentational class:
|
19
|
+
// <pre class="source-code sass">
|
20
|
+
// body.blueprint
|
21
|
+
// +blueprint(true)
|
22
|
+
// </pre>
|
23
|
+
//
|
24
|
+
// Scoped by semantic selectors:
|
25
|
+
// <pre class="source-code sass">
|
26
|
+
// body#page-1, body#page-2, body.a-special-page-type
|
27
|
+
// +blueprint(true)
|
28
|
+
// </pre>
|
29
|
+
|
30
|
+
@mixin blueprint($nested: false) {
|
31
|
+
@include blueprint-typography($nested);
|
32
|
+
@include blueprint-utilities;
|
33
|
+
@include blueprint-grid;
|
34
|
+
@include blueprint-debug;
|
35
|
+
@include blueprint-interaction;
|
36
|
+
@include blueprint-form;
|
37
|
+
}
|
@@ -0,0 +1,101 @@
|
|
1
|
+
@import "compass/css3/inline-block";
|
2
|
+
@import "compass/utilities/general/float";
|
3
|
+
|
4
|
+
// Button Font
|
5
|
+
$blueprint-button-font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif !default;
|
6
|
+
|
7
|
+
// Default Button Colors
|
8
|
+
$blueprint-button-border-color: #dedede !default;
|
9
|
+
$blueprint-button-background-color: #f5f5f5 !default;
|
10
|
+
$blueprint-button-font-color: #565656 !default;
|
11
|
+
|
12
|
+
// Default Button Hover Colors
|
13
|
+
$blueprint-button-hover-border-color: #c2e1ef !default;
|
14
|
+
$blueprint-button-hover-background-color: #dff4ff !default;
|
15
|
+
$blueprint-button-hover-font-color: #336699 !default;
|
16
|
+
|
17
|
+
// Default Button Active Colors
|
18
|
+
$blueprint-button-active-border-color: #6299c5 !default;
|
19
|
+
$blueprint-button-active-background-color: #6299c5 !default;
|
20
|
+
$blueprint-button-active-font-color: white !default;
|
21
|
+
|
22
|
+
//**
|
23
|
+
// Sets the colors for a button
|
24
|
+
// @param border-highlight-color
|
25
|
+
// The highlight color defaults to whatever is the value of the border-color but it's one shade lighter.
|
26
|
+
@mixin button-colors(
|
27
|
+
$font-color: $blueprint-button-font-color,
|
28
|
+
$bg-color: $blueprint-button-background-color,
|
29
|
+
$border-color: $blueprint-button-border-color,
|
30
|
+
$border-highlight-color: $border-color + #101010
|
31
|
+
) {
|
32
|
+
background-color: $bg-color;
|
33
|
+
border-color: $border-highlight-color $border-color $border-color $border-highlight-color;
|
34
|
+
color: $font-color;
|
35
|
+
}
|
36
|
+
|
37
|
+
//**
|
38
|
+
// Sets the colors for a button in the active state
|
39
|
+
// @param border-highlight-color
|
40
|
+
// The highlight color defaults to whatever is the value of the border-color but it's one shade lighter.
|
41
|
+
@mixin button-active-colors(
|
42
|
+
$font-color: $blueprint-button-active-font-color,
|
43
|
+
$bg-color: $blueprint-button-active-background-color,
|
44
|
+
$border-color: $blueprint-button-active-border-color,
|
45
|
+
$border-highlight-color: $border-color + #101010
|
46
|
+
) {
|
47
|
+
&:active {
|
48
|
+
@include button-colors($font-color, $bg-color, $border-color, $border-highlight-color);
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
//**
|
53
|
+
// Sets the colors for a button in the hover state.
|
54
|
+
// @param border-highlight-color
|
55
|
+
// The highlight color defaults to whatever is the value of the border-color but it's one shade lighter.
|
56
|
+
@mixin button-hover-colors(
|
57
|
+
$font-color: $blueprint-button-hover-font-color,
|
58
|
+
$bg-color: $blueprint-button-hover-background-color,
|
59
|
+
$border-color: $blueprint-button-hover-border-color,
|
60
|
+
$border-highlight-color: $border-color + #101010
|
61
|
+
) {
|
62
|
+
&:hover {
|
63
|
+
@include button-colors($font-color, $bg-color, $border-color, $border-highlight-color);
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
@mixin button-base($float: false) {
|
68
|
+
@if $float { @include float($float); display: block; }
|
69
|
+
@else { @include inline-block; }
|
70
|
+
margin: 0.7em 0.5em 0.7em 0;
|
71
|
+
border-width: 1px; border-style: solid;
|
72
|
+
font-family: $blueprint-button-font-family; font-size: 100%; line-height: 130%; font-weight: bold;
|
73
|
+
text-decoration: none;
|
74
|
+
cursor: pointer;
|
75
|
+
img {
|
76
|
+
margin: 0 3px -3px 0 !important;
|
77
|
+
padding: 0;
|
78
|
+
border: none;
|
79
|
+
width: 16px;
|
80
|
+
height: 16px;
|
81
|
+
float: none;
|
82
|
+
}
|
83
|
+
}
|
84
|
+
|
85
|
+
@mixin anchor-button($float: false) {
|
86
|
+
@include button-base($float);
|
87
|
+
padding: 5px 10px 5px 7px;
|
88
|
+
}
|
89
|
+
|
90
|
+
@mixin button-button($float: false) {
|
91
|
+
@include button-base($float);
|
92
|
+
width: auto;
|
93
|
+
overflow: visible;
|
94
|
+
padding: 4px 10px 3px 7px;
|
95
|
+
&[type] {
|
96
|
+
padding: 4px 10px 4px 7px;
|
97
|
+
line-height: 17px; }
|
98
|
+
*:first-child+html &[type] {
|
99
|
+
padding: 4px 10px 3px 7px;
|
100
|
+
}
|
101
|
+
}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
$font-color: #333333 !default;
|
2
|
+
$quiet-color: lighten($font-color, 20%) !default;
|
3
|
+
$loud-color: darken($font-color, 13.33%) !default;
|
4
|
+
$header-color: darken($font-color, 6.67%) !default;
|
5
|
+
$alt-text-color: #666666 !default;
|
6
|
+
$blueprint-background-color: #eeeeee !default;
|
7
|
+
$blueprint-border-color: #ddd !default;
|
8
|
+
|
9
|
+
$link-color: #06c !default;
|
10
|
+
$link-hover-color: #09f !default;
|
11
|
+
$link-focus-color: $link-hover-color !default;
|
12
|
+
$link-active-color: lighten(adjust-hue($link-color, 75deg), 10%) !default;
|
13
|
+
$link-visited-color: darken($link-color, 10%) !default;
|
14
|
+
|
15
|
+
$feedback-border-color: #dddddd !default;
|
16
|
+
$success-color: #264409 !default;
|
17
|
+
$success-bg-color: #e6efc2 !default;
|
18
|
+
$success-border-color: #c6d880 !default;
|
19
|
+
$notice-color: #514721 !default;
|
20
|
+
$notice-bg-color: #fff6bf !default;
|
21
|
+
$notice-border-color: #ffd324 !default;
|
22
|
+
$info-color: #205791 !default;
|
23
|
+
$info-bg-color: #d5edf8 !default;
|
24
|
+
$info-border-color: #92cae4 !default;
|
25
|
+
$error-color: #8a1f11 !default;
|
26
|
+
$error-bg-color: #fbe3e4 !default;
|
27
|
+
$error-border-color: #fbc2c4 !default;
|
28
|
+
|
29
|
+
$highlight-color: yellow !default;
|
30
|
+
$added-color: white !default;
|
31
|
+
$added-bg-color: #006600 !default;
|
32
|
+
$removed-color: white !default;
|
33
|
+
$removed-bg-color: #990000 !default;
|
34
|
+
|
35
|
+
$blueprint-table-header-color: #c3d9ff !default;
|
36
|
+
$blueprint-table-stripe-color: #e5ecf9 !default;
|
@@ -0,0 +1,28 @@
|
|
1
|
+
@import "compass/layout/grid-background";
|
2
|
+
@import "grid", "typography";
|
3
|
+
|
4
|
+
// Shows a background that can be used to check grid alignment.
|
5
|
+
// By default this is a pure css version that only works in browsers
|
6
|
+
// that support gradients and multiple backgrounds, but you can pass
|
7
|
+
// an image url if you prefer.
|
8
|
+
@mixin showgrid($image: false) {
|
9
|
+
@if $image {
|
10
|
+
background: image-url($image);
|
11
|
+
}
|
12
|
+
@else {
|
13
|
+
@include grid-background(
|
14
|
+
$total : $blueprint-grid-columns,
|
15
|
+
$column : $blueprint-grid-width,
|
16
|
+
$gutter : $blueprint-grid-margin,
|
17
|
+
$baseline : $blueprint-font-size * 1.5
|
18
|
+
);
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
@mixin blueprint-debug($grid-image: false) {
|
23
|
+
// Use this class on any column or container to see the grid.
|
24
|
+
// TODO: prefix this with the project path.
|
25
|
+
.showgrid {
|
26
|
+
@include showgrid($grid-image);
|
27
|
+
}
|
28
|
+
}
|
@@ -0,0 +1,88 @@
|
|
1
|
+
@charset "utf-8";
|
2
|
+
@import "typography";
|
3
|
+
|
4
|
+
$alternate-text-font : "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif !default;
|
5
|
+
|
6
|
+
// To install the fancy type plugin:
|
7
|
+
//
|
8
|
+
// 1. Import the fancy-type module: `@import "blueprint/fancy-type"`
|
9
|
+
// 2. Mix in `fancy-type` to your project's body or at the top level of your stylesheet:<br>
|
10
|
+
// `body { @include fancy-type; }`
|
11
|
+
@mixin fancy-type {
|
12
|
+
@include fancy-paragraphs;
|
13
|
+
.caps { @include caps; }
|
14
|
+
.dquo { @include dquo; }
|
15
|
+
.alt { @include alt; }
|
16
|
+
}
|
17
|
+
|
18
|
+
// For great looking type, use this code instead of asdf:
|
19
|
+
// `<span class="alt">asdf</span>`
|
20
|
+
// Best used on prepositions and ampersands.
|
21
|
+
|
22
|
+
@mixin alt {
|
23
|
+
color: $alt-text-color;
|
24
|
+
font-family: $alternate-text-font;
|
25
|
+
font-style: italic;
|
26
|
+
font-weight: normal;
|
27
|
+
}
|
28
|
+
|
29
|
+
// For great looking quote marks in titles, replace "asdf" with:
|
30
|
+
// `<span class="dquo">“</span>asdf”`
|
31
|
+
// (That is, when the title starts with a quote mark).
|
32
|
+
// Note: you may have to change this value depending on your font size.
|
33
|
+
|
34
|
+
@mixin dquo($offset: 0.5em) {
|
35
|
+
margin-left: -$offset;
|
36
|
+
}
|
37
|
+
|
38
|
+
// Reduced size type with [incremental leading](http://www.markboulton.co.uk/journal/comments/incremental-leading/)
|
39
|
+
//
|
40
|
+
// This could be used for side notes. For smaller type, you don't necessarily want to
|
41
|
+
// follow the 1.5x vertical rhythm -- the line-height is too much.
|
42
|
+
//
|
43
|
+
// Using this mixin, reduces your font size and line-height so that for
|
44
|
+
// every four lines of normal sized type, there is five lines of the sidenote. eg:
|
45
|
+
//
|
46
|
+
// Arguments:
|
47
|
+
// * `$font-size` - The desired font size in pixels. This will be converted to ems for you. Defaults to 10px.
|
48
|
+
// * `$base-font-size` - The base font size in pixels. Defaults to 12px
|
49
|
+
// * `$old-line-height` - The old line height. Defaults to 1.5 times the base-font-size
|
50
|
+
|
51
|
+
@mixin incr(
|
52
|
+
$font-size: 10px,
|
53
|
+
$base-font-size: $blueprint-font-size,
|
54
|
+
$old-line-height: $base-font-size * 1.5
|
55
|
+
) {
|
56
|
+
font-size: 1em * $font-size / $base-font-size;
|
57
|
+
line-height: 1em * $old-line-height / $font-size * 4 / 5;
|
58
|
+
margin-bottom: 1.5em;
|
59
|
+
}
|
60
|
+
|
61
|
+
// Surround uppercase words and abbreviations with this class.
|
62
|
+
// Based on work by [Jørgen Arnor Gårdsø Lom](http://twistedintellect.com/)
|
63
|
+
|
64
|
+
@mixin caps {
|
65
|
+
font-variant: small-caps;
|
66
|
+
letter-spacing: 1px;
|
67
|
+
text-transform: lowercase;
|
68
|
+
font-size: 1.2em;
|
69
|
+
line-height: 1%;
|
70
|
+
font-weight: bold;
|
71
|
+
padding: 0 2px;
|
72
|
+
}
|
73
|
+
|
74
|
+
// This mixin is automatically included when you include `fancy-type`
|
75
|
+
@mixin fancy-paragraphs {
|
76
|
+
p + p { @include sibling-indentation; }
|
77
|
+
p.incr,
|
78
|
+
.incr p { @include incr; }
|
79
|
+
}
|
80
|
+
|
81
|
+
// Indentation instead of line shifts for sibling paragraphs. Mixin to a selector like `p + p`
|
82
|
+
@mixin sibling-indentation {
|
83
|
+
text-indent: 2em;
|
84
|
+
margin-top: -1.5em;
|
85
|
+
/* Don't want this in forms. */
|
86
|
+
form & { text-indent: 0; }
|
87
|
+
}
|
88
|
+
|
@@ -0,0 +1,66 @@
|
|
1
|
+
@import "colors";
|
2
|
+
|
3
|
+
// Mixin for producing Blueprint "inline" forms. Should be used with the blueprint-form mixin.
|
4
|
+
@mixin blueprint-inline-form {
|
5
|
+
line-height: 3;
|
6
|
+
p {
|
7
|
+
margin-bottom: 0;
|
8
|
+
}
|
9
|
+
}
|
10
|
+
|
11
|
+
@mixin blueprint-form {
|
12
|
+
@include blueprint-form-layout;
|
13
|
+
@include blueprint-form-borders;
|
14
|
+
@include blueprint-form-sizes;
|
15
|
+
}
|
16
|
+
|
17
|
+
@mixin blueprint-form-layout {
|
18
|
+
label { font-weight: bold; }
|
19
|
+
fieldset { padding: 1.4em; margin: 0 0 1.5em 0; }
|
20
|
+
legend { font-weight: bold; font-size: 1.2em; }
|
21
|
+
input {
|
22
|
+
&.text,
|
23
|
+
&.title,
|
24
|
+
&[type=email],
|
25
|
+
&[type=text],
|
26
|
+
&[type=password] { margin: 0.5em 0; background-color: white; padding: 5px; }
|
27
|
+
&.title { font-size: 1.5em; }
|
28
|
+
}
|
29
|
+
textarea { margin: 0.5em 0; padding: 5px; }
|
30
|
+
select { margin: 0.5em 0; }
|
31
|
+
}
|
32
|
+
|
33
|
+
@mixin blueprint-form-sizes
|
34
|
+
(
|
35
|
+
$input-width: 300px,
|
36
|
+
$textarea-width: 390px,
|
37
|
+
$textarea-height: 250px
|
38
|
+
) {
|
39
|
+
input {
|
40
|
+
&.text,
|
41
|
+
&.title,
|
42
|
+
&[type=email],
|
43
|
+
&[type=text],
|
44
|
+
&[type=password] { width: $input-width; }
|
45
|
+
}
|
46
|
+
textarea { width: $textarea-width; height: $textarea-height; }
|
47
|
+
}
|
48
|
+
|
49
|
+
@mixin blueprint-form-borders
|
50
|
+
(
|
51
|
+
$unfocused-border-color: #bbbbbb,
|
52
|
+
$focus-border-color: #666666,
|
53
|
+
$fieldset-border-color: #cccccc
|
54
|
+
) {
|
55
|
+
fieldset {
|
56
|
+
border: 1px solid $fieldset-border-color; }
|
57
|
+
input.text, input.title, input[type=email], input[type=text], input[type=password],
|
58
|
+
textarea {
|
59
|
+
background-color:#fff;
|
60
|
+
border: 1px solid $unfocused-border-color;
|
61
|
+
&:focus {
|
62
|
+
border-color: $focus-border-color;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
select { background-color:#fff; border-width:1px; border-style:solid; }
|
66
|
+
}
|