compass_twitter_bootstrap 0.1.1

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/.gitignore ADDED
@@ -0,0 +1,18 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ .DS_Store
7
+ Gemfile.lock
8
+ InstalledFiles
9
+ _yardoc
10
+ coverage
11
+ doc/
12
+ lib/bundler/man
13
+ pkg
14
+ rdoc
15
+ spec/reports
16
+ test/tmp
17
+ test/version_tmp
18
+ tmp
data/Gemfile ADDED
@@ -0,0 +1,6 @@
1
+ source 'http://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in compass_twitter_bootstrap.gemspec
4
+ gemspec
5
+
6
+ gem 'rake'
data/Rakefile ADDED
@@ -0,0 +1,2 @@
1
+ #!/usr/bin/env rake
2
+ require "bundler/gem_tasks"
@@ -0,0 +1,19 @@
1
+ # -*- encoding: utf-8 -*-
2
+ require File.expand_path('../lib/compass_twitter_bootstrap/version', __FILE__)
3
+
4
+ Gem::Specification.new do |gem|
5
+ gem.authors = ["Vincent"]
6
+ gem.email = ["vrwaller@gmail.com"]
7
+ gem.description = %q{Compass/SCSS version of the twitter bootstrap}
8
+ gem.summary = %q{Compass Twitter Bootstrap}
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_twitter_bootstrap"
15
+ gem.require_paths = ["lib"]
16
+ gem.version = CompassTwitterBootstrap::VERSION
17
+
18
+ gem.add_runtime_dependency "compass"
19
+ end
@@ -0,0 +1,7 @@
1
+ require "compass_twitter_bootstrap/version"
2
+ require 'compass'
3
+ Compass::Frameworks.register("afadf", :path => "#{File.dirname(__FILE__)}/..")
4
+
5
+ module CompassTwitterBootstrap
6
+ STYLESHEETS = File.expand_path("../stylesheets", __FILE__)
7
+ end
@@ -0,0 +1,3 @@
1
+ module CompassTwitterBootstrap
2
+ VERSION = "0.1.1"
3
+ end
@@ -0,0 +1,24 @@
1
+ /*!
2
+ * Bootstrap v1.1.1
3
+ *
4
+ * Copyright 2011 Twitter, Inc
5
+ * Licensed under the Apache License v2.0
6
+ * http://www.apache.org/licenses/LICENSE-2.0
7
+ *
8
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
9
+ * Date: @DATE
10
+ */
11
+
12
+ @import "compass";
13
+ // CSS Reset
14
+ @import "compass_twitter_bootstrap/reset";
15
+
16
+ // Core
17
+ @import "compass_twitter_bootstrap/preboot";
18
+ @import "compass_twitter_bootstrap/scaffolding";
19
+
20
+ // Styled patterns and elements
21
+ @import "compass_twitter_bootstrap/type";
22
+ @import "compass_twitter_bootstrap/forms";
23
+ @import "compass_twitter_bootstrap/tables";
24
+ @import "compass_twitter_bootstrap/patterns";
@@ -0,0 +1,369 @@
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
+ .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[type=text],
65
+ input[type=password],
66
+ textarea,
67
+ select,
68
+ .uneditable-input {
69
+ display: inline-block;
70
+ width: 210px;
71
+ padding: 4px;
72
+ font-size: 13px;
73
+ line-height: $baseline;
74
+ height: $baseline;
75
+ color: $gray;
76
+ border: 1px solid #ccc;
77
+ @include border-radius(3px);
78
+ }
79
+ select,
80
+ input[type=file] {
81
+ height: $baseline * 1.5;
82
+ line-height: $baseline * 1.5;
83
+ }
84
+ textarea {
85
+ height: auto;
86
+ }
87
+ .uneditable-input {
88
+ background-color: #eee;
89
+ display: block;
90
+ border-color: #ccc;
91
+ @include box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
92
+ }
93
+
94
+ // Placeholder text gets special styles; can't be bundled together though for some reason
95
+ :-moz-placeholder {
96
+ color: $grayLight;
97
+ }
98
+ ::-webkit-input-placeholder {
99
+ color: $grayLight;
100
+ }
101
+
102
+ // Focus states
103
+ input[type=text],
104
+ input[type=password],
105
+ select, textarea {
106
+ $transition: border linear .2s, box-shadow linear .2s;
107
+ @include transition($transition);
108
+ @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
109
+ }
110
+ input[type=text]:focus,
111
+ input[type=password]:focus,
112
+ textarea:focus {
113
+ outline: none;
114
+ border-color: rgba(82,168,236,.8);
115
+ $shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
116
+ @include box-shadow($shadow);
117
+ }
118
+
119
+ // Error styles
120
+ form div.error {
121
+ background: lighten($red, 57%);
122
+ padding: 10px 0;
123
+ margin: -10px 0 10px;
124
+ @include border-radius(4px);
125
+ $error-text: desaturate(lighten($red, 25%), 25%);
126
+ > label,
127
+ span.help-inline,
128
+ span.help-block {
129
+ color: $red;
130
+ }
131
+ input[type=text],
132
+ input[type=password],
133
+ textarea {
134
+ border-color: $error-text;
135
+ @include box-shadow(0 0 3px rgba(171,41,32,.25));
136
+ &:focus {
137
+ border-color: darken($error-text, 10%);
138
+ @include box-shadow(0 0 6px rgba(171,41,32,.5));
139
+ }
140
+ }
141
+ .input-prepend,
142
+ .input-append {
143
+ span.add-on {
144
+ background: lighten($red, 50%);
145
+ border-color: $error-text;
146
+ color: darken($error-text, 10%);
147
+ }
148
+ }
149
+ }
150
+
151
+ // Form element sizes
152
+ .input-mini, input.mini, textarea.mini, select.mini {
153
+ width: 60px;
154
+ }
155
+ .input-small, input.small, textarea.small, select.small {
156
+ width: 90px;
157
+ }
158
+ .input-medium, input.medium, textarea.medium, select.medium {
159
+ width: 150px;
160
+ }
161
+ .input-large, input.large, textarea.large, select.large {
162
+ width: 210px;
163
+ }
164
+ .input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
165
+ width: 270px;
166
+ }
167
+ .input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
168
+ width: 530px;
169
+ }
170
+ textarea.xxlarge {
171
+ overflow-y: scroll;
172
+ }
173
+
174
+ // Turn off focus for disabled (read-only) form elements
175
+ input[readonly]:focus,
176
+ textarea[readonly]:focus,
177
+ input.disabled {
178
+ background: #f5f5f5;
179
+ border-color: #ddd;
180
+ @include box-shadow(none);
181
+ }
182
+
183
+ // Actions (the buttons)
184
+ .actions {
185
+ background: #f5f5f5;
186
+ margin-top: $baseline;
187
+ margin-bottom: $baseline;
188
+ padding: ($baseline - 1) 20px $baseline 150px;
189
+ border-top: 1px solid #ddd;
190
+ @include border-radius(0 0 3px 3px);
191
+ .secondary-action {
192
+ float: right;
193
+ a {
194
+ line-height: 30px;
195
+ &:hover {
196
+ text-decoration: underline;
197
+ }
198
+ }
199
+ }
200
+ }
201
+
202
+ // Help Text
203
+ .help-inline,
204
+ .help-block {
205
+ font-size: 12px;
206
+ line-height: $baseline;
207
+ color: $grayLight;
208
+ }
209
+ .help-inline {
210
+ padding-left: 5px;
211
+ *position: relative; /* IE6-7 */
212
+ *top: -5px; /* IE6-7 */
213
+ }
214
+
215
+ // Big blocks of help text
216
+ .help-block {
217
+ display: block;
218
+ max-width: 600px;
219
+ }
220
+
221
+ // Inline Fields (input fields that appear as inline objects
222
+ .inline-inputs {
223
+ color: $gray;
224
+ span, input[type=text] {
225
+ display: inline-block;
226
+ }
227
+ input.mini {
228
+ width: 60px;
229
+ }
230
+ input.small {
231
+ width: 90px;
232
+ }
233
+ span {
234
+ padding: 0 2px 0 1px;
235
+ }
236
+ }
237
+
238
+ // Allow us to put symbols and text within the input field for a cleaner look
239
+ .input-prepend,
240
+ .input-append {
241
+ input[type=text],
242
+ input[type=password] {
243
+ @include border-radius(0 3px 3px 0);
244
+ }
245
+ .add-on {
246
+ background: #f5f5f5;
247
+ float: left;
248
+ display: block;
249
+ width: auto;
250
+ min-width: 16px;
251
+ padding: 4px 4px 4px 5px;
252
+ color: $grayLight;
253
+ font-weight: normal;
254
+ line-height: 18px;
255
+ height: 18px;
256
+ text-align: center;
257
+ text-shadow: 0 1px 0 #fff;
258
+ border: 1px solid #ccc;
259
+ border-right-width: 0;
260
+ @include border-radius(3px 0 0 3px);
261
+ }
262
+ .active {
263
+ background: lighten($green, 30);
264
+ border-color: $green;
265
+ }
266
+ }
267
+ .input-prepend {
268
+ .add-on {
269
+ *margin-top: 1px; /* IE6-7 */
270
+ }
271
+ }
272
+ .input-append {
273
+ input[type=text],
274
+ input[type=password] {
275
+ float: left;
276
+ @include border-radius(3px 0 0 3px);
277
+ }
278
+ .add-on {
279
+ @include border-radius(0 3px 3px 0);
280
+ border-right-width: 1px;
281
+ border-left-width: 0;
282
+ }
283
+ }
284
+
285
+ // Stacked options for forms (radio buttons or checkboxes)
286
+ .inputs-list {
287
+ margin: 0 0 5px;
288
+ width: 100%;
289
+ li {
290
+ display: block;
291
+ padding: 0;
292
+ width: 100%;
293
+ label {
294
+ display: block;
295
+ float: none;
296
+ width: auto;
297
+ padding: 0;
298
+ line-height: $baseline;
299
+ text-align: left;
300
+ white-space: normal;
301
+ strong {
302
+ color: $gray;
303
+ }
304
+ small {
305
+ font-size: 12px;
306
+ font-weight: normal;
307
+ }
308
+ }
309
+ ul.inputs-list {
310
+ margin-left: 25px;
311
+ margin-bottom: 10px;
312
+ padding-top: 0;
313
+ }
314
+ &:first-child {
315
+ padding-top: 5px;
316
+ }
317
+ }
318
+ input[type=radio],
319
+ input[type=checkbox] {
320
+ margin-bottom: 0;
321
+ }
322
+ }
323
+
324
+ // Stacked forms
325
+ .form-stacked {
326
+ padding-left: 20px;
327
+ fieldset {
328
+ padding-top: $baseline / 2;
329
+ }
330
+ legend {
331
+ margin-left: 0;
332
+ }
333
+ label {
334
+ display: block;
335
+ float: none;
336
+ width: auto;
337
+ font-weight: bold;
338
+ text-align: left;
339
+ line-height: 20px;
340
+ padding-top: 0;
341
+ }
342
+ .clearfix {
343
+ margin-bottom: $baseline / 2;
344
+ div.input {
345
+ margin-left: 0;
346
+ }
347
+ }
348
+ .inputs-list {
349
+ margin-bottom: 0;
350
+ li {
351
+ padding-top: 0;
352
+ label {
353
+ font-weight: normal;
354
+ padding-top: 0;
355
+ }
356
+ }
357
+ }
358
+ div.error {
359
+ padding-top: 10px;
360
+ padding-bottom: 10px;
361
+ padding-left: 10px;
362
+ margin-top: 0;
363
+ margin-left: -10px;
364
+ }
365
+ .actions {
366
+ margin-left: -20px;
367
+ padding-left: 20px;
368
+ }
369
+ }