compass-bootstrap 0.0.2 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.mkdn +9 -3
- data/lib/compass-bootstrap.rb +1 -1
- data/lib/compass-bootstrap/version.rb +1 -1
- data/stylesheets/compass-bootstrap/_compass_bootstrap.scss +26 -0
- data/stylesheets/compass-bootstrap/_forms.scss +393 -0
- data/stylesheets/compass-bootstrap/_patterns.scss +818 -0
- data/stylesheets/compass-bootstrap/_preboot.scss +276 -0
- data/stylesheets/compass-bootstrap/_reset.scss +137 -0
- data/stylesheets/compass-bootstrap/_scaffolding.scss +110 -0
- data/stylesheets/compass-bootstrap/_tables.scss +148 -0
- data/stylesheets/compass-bootstrap/_type.scss +188 -0
- data/templates/project/_forms.scss +393 -0
- data/templates/project/_patterns.scss +818 -0
- data/templates/project/_preboot.scss +276 -0
- data/templates/project/_reset.scss +137 -0
- data/templates/project/_scaffolding.scss +110 -0
- data/templates/project/_tables.scss +148 -0
- data/templates/project/_type.scss +188 -0
- data/templates/project/compass_bootstrap.scss +26 -0
- data/templates/project/manifest.rb +11 -0
- data/templates/project/screen.sass +0 -0
- metadata +19 -5
- data/stylesheets/_compass_bootstrap.scss +0 -1734
- data/stylesheets/_compass_bootstrap_mixins.scss +0 -43
- data/templates/project/screen.scss +0 -2
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Tables.scss
|
|
3
|
+
* Tables for, you guessed it, tabular data
|
|
4
|
+
* ---------------------------------------- */
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
// BASELINE STYLES
|
|
8
|
+
// ---------------
|
|
9
|
+
|
|
10
|
+
table {
|
|
11
|
+
width: 100%;
|
|
12
|
+
margin-bottom: $baseline;
|
|
13
|
+
padding: 0;
|
|
14
|
+
border-collapse: separate;
|
|
15
|
+
font-size: 13px;
|
|
16
|
+
th, td {
|
|
17
|
+
padding: 10px 10px 9px;
|
|
18
|
+
line-height: $baseline * .75;
|
|
19
|
+
text-align: left;
|
|
20
|
+
vertical-align: middle;
|
|
21
|
+
border-bottom: 1px solid #ddd;
|
|
22
|
+
}
|
|
23
|
+
th {
|
|
24
|
+
padding-top: 9px;
|
|
25
|
+
font-weight: bold;
|
|
26
|
+
border-bottom-width: 2px;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
// ZEBRA-STRIPING
|
|
32
|
+
// --------------
|
|
33
|
+
|
|
34
|
+
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
|
35
|
+
.zebra-striped {
|
|
36
|
+
tbody {
|
|
37
|
+
tr:nth-child(odd) td {
|
|
38
|
+
background-color: #f9f9f9;
|
|
39
|
+
}
|
|
40
|
+
tr:hover td {
|
|
41
|
+
background-color: #f5f5f5;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Tablesorting styles w/ jQuery plugin
|
|
46
|
+
.header {
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
&:after {
|
|
49
|
+
content: "";
|
|
50
|
+
float: right;
|
|
51
|
+
margin-top: 7px;
|
|
52
|
+
border-width: 0 4px 4px;
|
|
53
|
+
border-style: solid;
|
|
54
|
+
border-color: #000 transparent;
|
|
55
|
+
visibility: hidden;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
// Style the sorted column headers (THs)
|
|
59
|
+
.headerSortUp,
|
|
60
|
+
.headerSortDown {
|
|
61
|
+
background-color: rgba(141,192,219,.25);
|
|
62
|
+
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
|
63
|
+
@include border-radius(3px 3px 0 0);
|
|
64
|
+
}
|
|
65
|
+
// Style the ascending (reverse alphabetical) column header
|
|
66
|
+
.header:hover {
|
|
67
|
+
&:after {
|
|
68
|
+
visibility:visible;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
// Style the descending (alphabetical) column header
|
|
72
|
+
.headerSortDown,
|
|
73
|
+
.headerSortDown:hover {
|
|
74
|
+
&:after {
|
|
75
|
+
visibility:visible;
|
|
76
|
+
@include bt-opacity(60);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
// Style the ascending (reverse alphabetical) column header
|
|
80
|
+
.headerSortUp {
|
|
81
|
+
&:after {
|
|
82
|
+
border-bottom: none;
|
|
83
|
+
border-left: 4px solid transparent;
|
|
84
|
+
border-right: 4px solid transparent;
|
|
85
|
+
border-top: 4px solid #000;
|
|
86
|
+
visibility:visible;
|
|
87
|
+
@include bt-box-shadow(none); //can't add boxshadow to downward facing arrow :(
|
|
88
|
+
@include bt-opacity(60);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
table {
|
|
94
|
+
// Blue Table Headings
|
|
95
|
+
.blue {
|
|
96
|
+
color: $blue;
|
|
97
|
+
border-bottom-color: $blue;
|
|
98
|
+
}
|
|
99
|
+
.headerSortUp.blue,
|
|
100
|
+
.headerSortDown.blue {
|
|
101
|
+
background-color: lighten($blue, 40%);
|
|
102
|
+
}
|
|
103
|
+
// Green Table Headings
|
|
104
|
+
.green {
|
|
105
|
+
color: $green;
|
|
106
|
+
border-bottom-color: $green;
|
|
107
|
+
}
|
|
108
|
+
.headerSortUp.green,
|
|
109
|
+
.headerSortDown.green {
|
|
110
|
+
background-color: lighten($green, 40%);
|
|
111
|
+
}
|
|
112
|
+
// Red Table Headings
|
|
113
|
+
.red {
|
|
114
|
+
color: $red;
|
|
115
|
+
border-bottom-color: $red;
|
|
116
|
+
}
|
|
117
|
+
.headerSortUp.red,
|
|
118
|
+
.headerSortDown.red {
|
|
119
|
+
background-color: lighten($red, 50%);
|
|
120
|
+
}
|
|
121
|
+
// Yellow Table Headings
|
|
122
|
+
.yellow {
|
|
123
|
+
color: $yellow;
|
|
124
|
+
border-bottom-color: $yellow;
|
|
125
|
+
}
|
|
126
|
+
.headerSortUp.yellow,
|
|
127
|
+
.headerSortDown.yellow {
|
|
128
|
+
background-color: lighten($yellow, 40%);
|
|
129
|
+
}
|
|
130
|
+
// Orange Table Headings
|
|
131
|
+
.orange {
|
|
132
|
+
color: $orange;
|
|
133
|
+
border-bottom-color: $orange;
|
|
134
|
+
}
|
|
135
|
+
.headerSortUp.orange,
|
|
136
|
+
.headerSortDown.orange {
|
|
137
|
+
background-color: lighten($orange, 40%);
|
|
138
|
+
}
|
|
139
|
+
// Purple Table Headings
|
|
140
|
+
.purple {
|
|
141
|
+
color: $purple;
|
|
142
|
+
border-bottom-color: $purple;
|
|
143
|
+
}
|
|
144
|
+
.headerSortUp.purple,
|
|
145
|
+
.headerSortDown.purple {
|
|
146
|
+
background-color: lighten($purple, 40%);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
/* Typography.scss
|
|
2
|
+
* Headings, body text, lists, code, and more for a versatile and durable typography system
|
|
3
|
+
* ---------------------------------------------------------------------------------------- */
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
// BODY TEXT
|
|
7
|
+
// ---------
|
|
8
|
+
|
|
9
|
+
p {
|
|
10
|
+
@include shorthand(normal,$basefont,$baseline);
|
|
11
|
+
margin-bottom: $baseline / 2;
|
|
12
|
+
small {
|
|
13
|
+
font-size: $basefont - 2;
|
|
14
|
+
color: $grayLight;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
// HEADINGS
|
|
20
|
+
// --------
|
|
21
|
+
|
|
22
|
+
h1, h2, h3, h4, h5, h6 {
|
|
23
|
+
font-weight: bold;
|
|
24
|
+
color: $grayDark;
|
|
25
|
+
small {
|
|
26
|
+
color: $grayLight;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
h1 {
|
|
30
|
+
margin-bottom: $baseline;
|
|
31
|
+
font-size: 30px;
|
|
32
|
+
line-height: $baseline * 2;
|
|
33
|
+
small {
|
|
34
|
+
font-size: 18px;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
h2 {
|
|
38
|
+
font-size: 24px;
|
|
39
|
+
line-height: $baseline * 2;
|
|
40
|
+
small {
|
|
41
|
+
font-size: 14px;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
h3, h4, h5, h6 {
|
|
45
|
+
line-height: $baseline * 2;
|
|
46
|
+
}
|
|
47
|
+
h3 {
|
|
48
|
+
font-size: 18px;
|
|
49
|
+
small {
|
|
50
|
+
font-size: 14px;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
h4 {
|
|
54
|
+
font-size: 16px;
|
|
55
|
+
small {
|
|
56
|
+
font-size: 12px;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
h5 {
|
|
60
|
+
font-size: 14px;
|
|
61
|
+
}
|
|
62
|
+
h6 {
|
|
63
|
+
font-size: 13px;
|
|
64
|
+
color: $grayLight;
|
|
65
|
+
text-transform: uppercase;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
// COLORS
|
|
70
|
+
// ------
|
|
71
|
+
|
|
72
|
+
// Unordered and Ordered lists
|
|
73
|
+
ul, ol {
|
|
74
|
+
margin: 0 0 $baseline 25px;
|
|
75
|
+
}
|
|
76
|
+
ul ul,
|
|
77
|
+
ul ol,
|
|
78
|
+
ol ol,
|
|
79
|
+
ol ul {
|
|
80
|
+
margin-bottom: 0;
|
|
81
|
+
}
|
|
82
|
+
ul {
|
|
83
|
+
list-style: disc;
|
|
84
|
+
}
|
|
85
|
+
ol {
|
|
86
|
+
list-style: decimal;
|
|
87
|
+
}
|
|
88
|
+
li {
|
|
89
|
+
line-height: $baseline;
|
|
90
|
+
color: $gray;
|
|
91
|
+
}
|
|
92
|
+
ul.unstyled {
|
|
93
|
+
list-style: none;
|
|
94
|
+
margin-left: 0;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// Description Lists
|
|
98
|
+
dl {
|
|
99
|
+
margin-bottom: $baseline;
|
|
100
|
+
dt, dd {
|
|
101
|
+
line-height: $baseline;
|
|
102
|
+
}
|
|
103
|
+
dt {
|
|
104
|
+
font-weight: bold;
|
|
105
|
+
}
|
|
106
|
+
dd {
|
|
107
|
+
margin-left: $baseline / 2;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// MISC
|
|
112
|
+
// ----
|
|
113
|
+
|
|
114
|
+
// Horizontal rules
|
|
115
|
+
hr {
|
|
116
|
+
margin: 0 0 19px;
|
|
117
|
+
border: 0;
|
|
118
|
+
border-bottom: 1px solid #eee;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// Emphasis
|
|
122
|
+
strong {
|
|
123
|
+
font-style: inherit;
|
|
124
|
+
font-weight: bold;
|
|
125
|
+
line-height: inherit;
|
|
126
|
+
}
|
|
127
|
+
em {
|
|
128
|
+
font-style: italic;
|
|
129
|
+
font-weight: inherit;
|
|
130
|
+
line-height: inherit;
|
|
131
|
+
}
|
|
132
|
+
.muted {
|
|
133
|
+
color: $grayLight;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
// Blockquotes
|
|
137
|
+
blockquote {
|
|
138
|
+
margin-bottom: $baseline;
|
|
139
|
+
border-left: 5px solid #eee;
|
|
140
|
+
padding-left: 15px;
|
|
141
|
+
p {
|
|
142
|
+
@include shorthand(300,14px,$baseline);
|
|
143
|
+
margin-bottom: 0;
|
|
144
|
+
}
|
|
145
|
+
small {
|
|
146
|
+
display: block;
|
|
147
|
+
@include shorthand(300,12px,$baseline);
|
|
148
|
+
color: $grayLight;
|
|
149
|
+
&:before {
|
|
150
|
+
content: '\2014 \00A0';
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// Addresses
|
|
156
|
+
address {
|
|
157
|
+
display: block;
|
|
158
|
+
line-height: $baseline;
|
|
159
|
+
margin-bottom: $baseline;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
// Inline and block code styles
|
|
163
|
+
code, pre {
|
|
164
|
+
padding: 0 3px 2px;
|
|
165
|
+
font-family: Monaco, Andale Mono, Courier New, monospace;
|
|
166
|
+
font-size: 12px;
|
|
167
|
+
@include border-radius(3px);
|
|
168
|
+
}
|
|
169
|
+
code {
|
|
170
|
+
background-color: lighten($orange, 40%);
|
|
171
|
+
color: rgba(0,0,0,.75);
|
|
172
|
+
padding: 1px 3px;
|
|
173
|
+
}
|
|
174
|
+
pre {
|
|
175
|
+
background-color: #f5f5f5;
|
|
176
|
+
display: block;
|
|
177
|
+
padding: $baseline - 1;
|
|
178
|
+
margin: 0 0 $baseline;
|
|
179
|
+
line-height: $baseline;
|
|
180
|
+
font-size: 12px;
|
|
181
|
+
border: 1px solid #ccc;
|
|
182
|
+
border: 1px solid rgba(0,0,0,.15);
|
|
183
|
+
@include border-radius(3px);
|
|
184
|
+
white-space: pre;
|
|
185
|
+
white-space: pre-wrap;
|
|
186
|
+
word-wrap: break-word;
|
|
187
|
+
|
|
188
|
+
}
|
|
@@ -0,0 +1,393 @@
|
|
|
1
|
+
/* Forms.less
|
|
2
|
+
* Base styles for various input types, form layouts, and states
|
|
3
|
+
* ------------------------------------------------------------- */
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
// FORM STYLES
|
|
7
|
+
// -----------
|
|
8
|
+
|
|
9
|
+
form {
|
|
10
|
+
margin-bottom: $baseline;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// Groups of fields with labels on top (legends)
|
|
14
|
+
fieldset {
|
|
15
|
+
margin-bottom: $baseline;
|
|
16
|
+
padding-top: $baseline;
|
|
17
|
+
legend {
|
|
18
|
+
display: block;
|
|
19
|
+
margin-left: 150px;
|
|
20
|
+
font-size: 20px;
|
|
21
|
+
line-height: 1;
|
|
22
|
+
*margin: 0 0 5px 145px; /* IE6-7 */
|
|
23
|
+
*line-height: 1.5; /* IE6-7 */
|
|
24
|
+
color: $grayDark;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// Parent element that clears floats and wraps labels and fields together
|
|
29
|
+
form .clearfix {
|
|
30
|
+
margin-bottom: $baseline;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Set font for forms
|
|
34
|
+
label,
|
|
35
|
+
input,
|
|
36
|
+
select,
|
|
37
|
+
textarea {
|
|
38
|
+
@include sans-serif(normal,13px,normal);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Float labels left
|
|
42
|
+
label {
|
|
43
|
+
padding-top: 6px;
|
|
44
|
+
font-size: 13px;
|
|
45
|
+
line-height: 18px;
|
|
46
|
+
float: left;
|
|
47
|
+
width: 130px;
|
|
48
|
+
text-align: right;
|
|
49
|
+
color: $grayDark;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Shift over the inside div to align all label's relevant content
|
|
53
|
+
div.input {
|
|
54
|
+
margin-left: 150px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Checkboxs and radio buttons
|
|
58
|
+
input[type=checkbox],
|
|
59
|
+
input[type=radio] {
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Inputs, Textareas, Selects
|
|
64
|
+
input,
|
|
65
|
+
textarea,
|
|
66
|
+
select,
|
|
67
|
+
.uneditable-input {
|
|
68
|
+
display: inline-block;
|
|
69
|
+
width: 210px;
|
|
70
|
+
height: $baseline;
|
|
71
|
+
padding: 4px;
|
|
72
|
+
font-size: 13px;
|
|
73
|
+
line-height: $baseline;
|
|
74
|
+
color: $gray;
|
|
75
|
+
border: 1px solid #ccc;
|
|
76
|
+
@include border-radius(3px);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* mini reset for non-html5 file types */
|
|
80
|
+
input[type=checkbox],
|
|
81
|
+
input[type=radio] {
|
|
82
|
+
width: auto;
|
|
83
|
+
height: auto;
|
|
84
|
+
padding: 0;
|
|
85
|
+
margin: 3px 0;
|
|
86
|
+
*margin-top: 0; /* IE6-7 */
|
|
87
|
+
line-height: normal;
|
|
88
|
+
border: none;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
input[type=file] {
|
|
92
|
+
background-color: #fff;
|
|
93
|
+
padding: initial;
|
|
94
|
+
border: initial;
|
|
95
|
+
line-height: initial;
|
|
96
|
+
@include bt-box-shadow(none);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
input[type=button],
|
|
100
|
+
input[type=reset],
|
|
101
|
+
input[type=submit] {
|
|
102
|
+
width: auto;
|
|
103
|
+
height: auto;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
select,
|
|
107
|
+
input[type=file] {
|
|
108
|
+
height: $baseline * 1.5;
|
|
109
|
+
line-height: $baseline * 1.5;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
textarea {
|
|
113
|
+
height: auto;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.uneditable-input {
|
|
117
|
+
background-color: #eee;
|
|
118
|
+
display: block;
|
|
119
|
+
border-color: #ccc;
|
|
120
|
+
@include bt-box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// Placeholder text gets special styles; can't be bundled together though for some reason
|
|
124
|
+
:-moz-placeholder {
|
|
125
|
+
color: $grayLight;
|
|
126
|
+
}
|
|
127
|
+
::-webkit-input-placeholder {
|
|
128
|
+
color: $grayLight;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// Focus states
|
|
132
|
+
input,
|
|
133
|
+
select, textarea {
|
|
134
|
+
$transition: border linear .2s, box-shadow linear .2s;
|
|
135
|
+
@include transition($transition);
|
|
136
|
+
@include bt-box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
|
|
137
|
+
}
|
|
138
|
+
input:focus,
|
|
139
|
+
textarea:focus {
|
|
140
|
+
outline: none;
|
|
141
|
+
border-color: rgba(82,168,236,.8);
|
|
142
|
+
$shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
|
|
143
|
+
@include bt-box-shadow($shadow);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
// Error styles
|
|
147
|
+
form div.error {
|
|
148
|
+
background: lighten($red, 57%);
|
|
149
|
+
padding: 10px 0;
|
|
150
|
+
margin: -10px 0 10px;
|
|
151
|
+
@include border-radius(4px);
|
|
152
|
+
$error-text: desaturate(lighten($red, 25%), 25%);
|
|
153
|
+
> label,
|
|
154
|
+
span.help-inline,
|
|
155
|
+
span.help-block {
|
|
156
|
+
color: $red;
|
|
157
|
+
}
|
|
158
|
+
input,
|
|
159
|
+
textarea {
|
|
160
|
+
border-color: $error-text;
|
|
161
|
+
@include bt-box-shadow(0 0 3px rgba(171,41,32,.25));
|
|
162
|
+
&:focus {
|
|
163
|
+
border-color: darken($error-text, 10%);
|
|
164
|
+
@include bt-box-shadow(0 0 6px rgba(171,41,32,.5));
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
.input-prepend,
|
|
168
|
+
.input-append {
|
|
169
|
+
span.add-on {
|
|
170
|
+
background: lighten($red, 50%);
|
|
171
|
+
border-color: $error-text;
|
|
172
|
+
color: darken($error-text, 10%);
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
// Form element sizes
|
|
178
|
+
.input-mini, input.mini, textarea.mini, select.mini {
|
|
179
|
+
width: 60px;
|
|
180
|
+
}
|
|
181
|
+
.input-small, input.small, textarea.small, select.small {
|
|
182
|
+
width: 90px;
|
|
183
|
+
}
|
|
184
|
+
.input-medium, input.medium, textarea.medium, select.medium {
|
|
185
|
+
width: 150px;
|
|
186
|
+
}
|
|
187
|
+
.input-large, input.large, textarea.large, select.large {
|
|
188
|
+
width: 210px;
|
|
189
|
+
}
|
|
190
|
+
.input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
|
|
191
|
+
width: 270px;
|
|
192
|
+
}
|
|
193
|
+
.input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
|
|
194
|
+
width: 530px;
|
|
195
|
+
}
|
|
196
|
+
textarea.xxlarge {
|
|
197
|
+
overflow-y: scroll;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
// Turn off focus for disabled (read-only) form elements
|
|
201
|
+
input[readonly]:focus,
|
|
202
|
+
textarea[readonly]:focus,
|
|
203
|
+
input.disabled {
|
|
204
|
+
background: #f5f5f5;
|
|
205
|
+
border-color: #ddd;
|
|
206
|
+
@include bt-box-shadow(none);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
// Actions (the buttons)
|
|
210
|
+
.actions {
|
|
211
|
+
background: #f5f5f5;
|
|
212
|
+
margin-top: $baseline;
|
|
213
|
+
margin-bottom: $baseline;
|
|
214
|
+
padding: ($baseline - 1) 20px $baseline 150px;
|
|
215
|
+
border-top: 1px solid #ddd;
|
|
216
|
+
@include border-radius(0 0 3px 3px);
|
|
217
|
+
.secondary-action {
|
|
218
|
+
float: right;
|
|
219
|
+
a {
|
|
220
|
+
line-height: 30px;
|
|
221
|
+
&:hover {
|
|
222
|
+
text-decoration: underline;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
// Help Text
|
|
229
|
+
.help-inline,
|
|
230
|
+
.help-block {
|
|
231
|
+
font-size: 12px;
|
|
232
|
+
line-height: $baseline;
|
|
233
|
+
color: $grayLight;
|
|
234
|
+
}
|
|
235
|
+
.help-inline {
|
|
236
|
+
padding-left: 5px;
|
|
237
|
+
*position: relative; /* IE6-7 */
|
|
238
|
+
*top: -5px; /* IE6-7 */
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
// Big blocks of help text
|
|
242
|
+
.help-block {
|
|
243
|
+
display: block;
|
|
244
|
+
max-width: 600px;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
// Inline Fields (input fields that appear as inline objects
|
|
248
|
+
.inline-inputs {
|
|
249
|
+
color: $gray;
|
|
250
|
+
span, input {
|
|
251
|
+
display: inline-block;
|
|
252
|
+
}
|
|
253
|
+
input.mini {
|
|
254
|
+
width: 60px;
|
|
255
|
+
}
|
|
256
|
+
input.small {
|
|
257
|
+
width: 90px;
|
|
258
|
+
}
|
|
259
|
+
span {
|
|
260
|
+
padding: 0 2px 0 1px;
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
// Allow us to put symbols and text within the input field for a cleaner look
|
|
265
|
+
.input-prepend,
|
|
266
|
+
.input-append {
|
|
267
|
+
input {
|
|
268
|
+
@include border-radius(0 3px 3px 0);
|
|
269
|
+
}
|
|
270
|
+
.add-on {
|
|
271
|
+
background: #f5f5f5;
|
|
272
|
+
float: left;
|
|
273
|
+
display: block;
|
|
274
|
+
width: auto;
|
|
275
|
+
min-width: 16px;
|
|
276
|
+
padding: 4px 4px 4px 5px;
|
|
277
|
+
color: $grayLight;
|
|
278
|
+
font-weight: normal;
|
|
279
|
+
line-height: 18px;
|
|
280
|
+
height: 18px;
|
|
281
|
+
text-align: center;
|
|
282
|
+
text-shadow: 0 1px 0 #fff;
|
|
283
|
+
border: 1px solid #ccc;
|
|
284
|
+
border-right-width: 0;
|
|
285
|
+
@include border-radius(3px 0 0 3px);
|
|
286
|
+
}
|
|
287
|
+
.active {
|
|
288
|
+
background: lighten($green, 30);
|
|
289
|
+
border-color: $green;
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
.input-prepend {
|
|
293
|
+
.add-on {
|
|
294
|
+
*margin-top: 1px; /* IE6-7 */
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
.input-append {
|
|
298
|
+
input {
|
|
299
|
+
float: left;
|
|
300
|
+
@include border-radius(3px 0 0 3px);
|
|
301
|
+
}
|
|
302
|
+
.add-on {
|
|
303
|
+
@include border-radius(0 3px 3px 0);
|
|
304
|
+
border-right-width: 1px;
|
|
305
|
+
border-left-width: 0;
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
// Stacked options for forms (radio buttons or checkboxes)
|
|
310
|
+
.inputs-list {
|
|
311
|
+
margin: 0 0 5px;
|
|
312
|
+
width: 100%;
|
|
313
|
+
li {
|
|
314
|
+
display: block;
|
|
315
|
+
padding: 0;
|
|
316
|
+
width: 100%;
|
|
317
|
+
label {
|
|
318
|
+
display: block;
|
|
319
|
+
float: none;
|
|
320
|
+
width: auto;
|
|
321
|
+
padding: 0;
|
|
322
|
+
line-height: $baseline;
|
|
323
|
+
text-align: left;
|
|
324
|
+
white-space: normal;
|
|
325
|
+
strong {
|
|
326
|
+
color: $gray;
|
|
327
|
+
}
|
|
328
|
+
small {
|
|
329
|
+
font-size: 12px;
|
|
330
|
+
font-weight: normal;
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
ul.inputs-list {
|
|
334
|
+
margin-left: 25px;
|
|
335
|
+
margin-bottom: 10px;
|
|
336
|
+
padding-top: 0;
|
|
337
|
+
}
|
|
338
|
+
&:first-child {
|
|
339
|
+
padding-top: 5px;
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
input[type=radio],
|
|
343
|
+
input[type=checkbox] {
|
|
344
|
+
margin-bottom: 0;
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
// Stacked forms
|
|
349
|
+
.form-stacked {
|
|
350
|
+
padding-left: 20px;
|
|
351
|
+
fieldset {
|
|
352
|
+
padding-top: $baseline / 2;
|
|
353
|
+
}
|
|
354
|
+
legend {
|
|
355
|
+
margin-left: 0;
|
|
356
|
+
}
|
|
357
|
+
label {
|
|
358
|
+
display: block;
|
|
359
|
+
float: none;
|
|
360
|
+
width: auto;
|
|
361
|
+
font-weight: bold;
|
|
362
|
+
text-align: left;
|
|
363
|
+
line-height: 20px;
|
|
364
|
+
padding-top: 0;
|
|
365
|
+
}
|
|
366
|
+
.clearfix {
|
|
367
|
+
margin-bottom: $baseline / 2;
|
|
368
|
+
div.input {
|
|
369
|
+
margin-left: 0;
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
.inputs-list {
|
|
373
|
+
margin-bottom: 0;
|
|
374
|
+
li {
|
|
375
|
+
padding-top: 0;
|
|
376
|
+
label {
|
|
377
|
+
font-weight: normal;
|
|
378
|
+
padding-top: 0;
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
div.error {
|
|
383
|
+
padding-top: 10px;
|
|
384
|
+
padding-bottom: 10px;
|
|
385
|
+
padding-left: 10px;
|
|
386
|
+
margin-top: 0;
|
|
387
|
+
margin-left: -10px;
|
|
388
|
+
}
|
|
389
|
+
.actions {
|
|
390
|
+
margin-left: -20px;
|
|
391
|
+
padding-left: 20px;
|
|
392
|
+
}
|
|
393
|
+
}
|