compass_twitter_bootstrap 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
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
+ }