sass-twitter-bootstrap-rails 0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (28) hide show
  1. data/.gitignore +17 -0
  2. data/Gemfile +4 -0
  3. data/README.md +54 -0
  4. data/Rakefile +2 -0
  5. data/lib/sass-twitter-bootstrap-rails.rb +1 -0
  6. data/lib/sass-twitter-bootstrap/rails.rb +6 -0
  7. data/lib/sass-twitter-bootstrap/rails/engine.rb +6 -0
  8. data/lib/sass-twitter-bootstrap/rails/version.rb +7 -0
  9. data/sass-twitter-bootstrap-rails.gemspec +22 -0
  10. data/vendor/assets/javascripts/twitter/bootstrap-alerts.js +113 -0
  11. data/vendor/assets/javascripts/twitter/bootstrap-buttons.js +62 -0
  12. data/vendor/assets/javascripts/twitter/bootstrap-dropdown.js +55 -0
  13. data/vendor/assets/javascripts/twitter/bootstrap-modal.js +260 -0
  14. data/vendor/assets/javascripts/twitter/bootstrap-popover.js +86 -0
  15. data/vendor/assets/javascripts/twitter/bootstrap-scrollspy.js +107 -0
  16. data/vendor/assets/javascripts/twitter/bootstrap-tabs.js +80 -0
  17. data/vendor/assets/javascripts/twitter/bootstrap-twipsy.js +310 -0
  18. data/vendor/assets/javascripts/twitter/bootstrap.js +1 -0
  19. data/vendor/assets/stylesheets/twitter/bootstrap.scss +29 -0
  20. data/vendor/assets/stylesheets/twitter/forms.scss +478 -0
  21. data/vendor/assets/stylesheets/twitter/mixins.scss +220 -0
  22. data/vendor/assets/stylesheets/twitter/patterns.scss +1060 -0
  23. data/vendor/assets/stylesheets/twitter/reset.scss +141 -0
  24. data/vendor/assets/stylesheets/twitter/scaffolding.scss +108 -0
  25. data/vendor/assets/stylesheets/twitter/tables.scss +224 -0
  26. data/vendor/assets/stylesheets/twitter/type.scss +187 -0
  27. data/vendor/assets/stylesheets/twitter/variables.scss +60 -0
  28. metadata +84 -0
@@ -0,0 +1 @@
1
+ //= require_tree .
@@ -0,0 +1,29 @@
1
+ /*!
2
+ * Bootstrap v1.4.0
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
+ *
10
+ * Converted to Sass by @johnwlong.
11
+ *
12
+ * Date: @DATE
13
+ */
14
+
15
+ // CSS Reset
16
+ @import "reset.scss";
17
+
18
+ // Core
19
+ @import "variables.scss";
20
+ @import "mixins.scss";
21
+
22
+ // Grid system and page structure
23
+ @import "scaffolding.scss";
24
+
25
+ // Styled patterns and elements
26
+ @import "type.scss";
27
+ @import "forms.scss";
28
+ @import "tables.scss";
29
+ @import "patterns.scss";
@@ -0,0 +1,478 @@
1
+ /* Forms.scss
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
+ padding-left: 150px;
20
+ font-size: $basefont * 1.5;
21
+ line-height: 1;
22
+ color: $grayDark;
23
+ *padding: 0 0 5px 145px; /* IE6-7 */
24
+ *line-height: 1.5; /* IE6-7 */
25
+ }
26
+ }
27
+
28
+ // Parent element that clears floats and wraps labels and fields together
29
+ form .clearfix {
30
+ margin-bottom: $baseline;
31
+ @include clearfix();
32
+ }
33
+
34
+ // Set font for forms
35
+ label,
36
+ input,
37
+ select,
38
+ textarea {
39
+ @include sans-serif-font(normal,13px,normal);
40
+ }
41
+
42
+ // Float labels left
43
+ label {
44
+ padding-top: 6px;
45
+ font-size: $basefont;
46
+ line-height: $baseline;
47
+ float: left;
48
+ width: 130px;
49
+ text-align: right;
50
+ color: $grayDark;
51
+ }
52
+
53
+ // Shift over the inside div to align all label's relevant content
54
+ form .input {
55
+ margin-left: 150px;
56
+ }
57
+
58
+ // Checkboxs and radio buttons
59
+ input[type=checkbox],
60
+ input[type=radio] {
61
+ cursor: pointer;
62
+ }
63
+
64
+ // Inputs, Textareas, Selects
65
+ input,
66
+ textarea,
67
+ select,
68
+ .uneditable-input {
69
+ display: inline-block;
70
+ width: 210px;
71
+ height: $baseline;
72
+ padding: 4px;
73
+ font-size: $basefont;
74
+ line-height: $baseline;
75
+ color: $gray;
76
+ border: 1px solid #ccc;
77
+ @include border-radius(3px);
78
+ }
79
+
80
+ // remove padding from select
81
+ select {
82
+ padding: initial;
83
+ }
84
+
85
+ // mini reset for non-html5 file types
86
+ input[type=checkbox],
87
+ input[type=radio] {
88
+ width: auto;
89
+ height: auto;
90
+ padding: 0;
91
+ margin: 3px 0;
92
+ *margin-top: 0; /* IE6-7 */
93
+ line-height: normal;
94
+ border: none;
95
+ }
96
+
97
+ input[type=file] {
98
+ background-color: $white;
99
+ padding: initial;
100
+ border: initial;
101
+ line-height: initial;
102
+ @include box-shadow(none);
103
+ }
104
+
105
+ input[type=button],
106
+ input[type=reset],
107
+ input[type=submit] {
108
+ width: auto;
109
+ height: auto;
110
+ }
111
+
112
+ select,
113
+ input[type=file] {
114
+ height: $baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
115
+ *height: auto; // Reset for IE7
116
+ line-height: $baseline * 1.5;
117
+ *margin-top: 4px; /* For IE7, add top margin to align select with labels */
118
+ }
119
+
120
+ // Make multiple select elements height not fixed
121
+ select[multiple] {
122
+ height: inherit;
123
+ background-color: $white; // Fixes Chromium bug of unreadable items
124
+ }
125
+
126
+ textarea {
127
+ height: auto;
128
+ }
129
+
130
+ // For text that needs to appear as an input but should not be an input
131
+ .uneditable-input {
132
+ background-color: $white;
133
+ display: block;
134
+ border-color: #eee;
135
+ @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
136
+ cursor: not-allowed;
137
+ }
138
+
139
+ // Placeholder text gets special styles; can't be bundled together though for some reason
140
+ :-moz-placeholder {
141
+ color: $grayLight;
142
+ }
143
+ ::-webkit-input-placeholder {
144
+ color: $grayLight;
145
+ }
146
+
147
+ // Focus states
148
+ input,
149
+ textarea {
150
+ $transition: border linear .2s, box-shadow linear .2s;
151
+ @include transition($transition);
152
+ @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
153
+ }
154
+ input:focus,
155
+ textarea:focus {
156
+ outline: 0;
157
+ border-color: rgba(82,168,236,.8);
158
+ $shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
159
+ @include box-shadow($shadow);
160
+ }
161
+ input[type=file]:focus,
162
+ input[type=checkbox]:focus,
163
+ select:focus {
164
+ @include box-shadow(none); // override for file inputs
165
+ outline: 1px dotted #666; // Select elements don't get box-shadow styles, so instead we do outline
166
+ }
167
+
168
+ // FORM FIELD FEEDBACK STATES
169
+ // --------------------------
170
+
171
+ // Mixin for form field states
172
+ @mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
173
+ // Set the text color
174
+ > label,
175
+ .help-block,
176
+ .help-inline {
177
+ color: $textColor;
178
+ }
179
+ // Style inputs accordingly
180
+ input,
181
+ textarea {
182
+ color: $textColor;
183
+ border-color: $borderColor;
184
+ &:focus {
185
+ border-color: darken($borderColor, 10%);
186
+ @include box-shadow(0 0 6px lighten($borderColor, 20%));
187
+ }
188
+ }
189
+ // Give a small background color for input-prepend/-append
190
+ .input-prepend .add-on,
191
+ .input-append .add-on {
192
+ color: $textColor;
193
+ background-color: $backgroundColor;
194
+ border-color: $textColor;
195
+ }
196
+ }
197
+ // Error
198
+ form .clearfix.error {
199
+ @include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
200
+ }
201
+ // Warning
202
+ form .clearfix.warning {
203
+ @include formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
204
+ }
205
+ // Success
206
+ form .clearfix.success {
207
+ @include formFieldState(#468847, #57a957, lighten(#57a957, 30%));
208
+ }
209
+
210
+
211
+ // Form element sizes
212
+ // TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
213
+ .input-mini,
214
+ input.mini,
215
+ textarea.mini,
216
+ select.mini {
217
+ width: 60px;
218
+ }
219
+ .input-small,
220
+ input.small,
221
+ textarea.small,
222
+ select.small {
223
+ width: 90px;
224
+ }
225
+ .input-medium,
226
+ input.medium,
227
+ textarea.medium,
228
+ select.medium {
229
+ width: 150px;
230
+ }
231
+ .input-large,
232
+ input.large,
233
+ textarea.large,
234
+ select.large {
235
+ width: 210px;
236
+ }
237
+ .input-xlarge,
238
+ input.xlarge,
239
+ textarea.xlarge,
240
+ select.xlarge {
241
+ width: 270px;
242
+ }
243
+ .input-xxlarge,
244
+ input.xxlarge,
245
+ textarea.xxlarge,
246
+ select.xxlarge {
247
+ width: 530px;
248
+ }
249
+ textarea.xxlarge {
250
+ overflow-y: auto;
251
+ }
252
+
253
+ // Grid style input sizes
254
+ // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
255
+ @mixin formColumns($columnSpan: 1 ) {
256
+ display: inline-block;
257
+ float: none;
258
+ width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 10;
259
+ margin-left: 0;
260
+
261
+ }
262
+ input,
263
+ textarea {
264
+ // Default columns
265
+ &.span1 { @include formColumns(1); }
266
+ &.span2 { @include formColumns(2); }
267
+ &.span3 { @include formColumns(3); }
268
+ &.span4 { @include formColumns(4); }
269
+ &.span5 { @include formColumns(5); }
270
+ &.span6 { @include formColumns(6); }
271
+ &.span7 { @include formColumns(7); }
272
+ &.span8 { @include formColumns(8); }
273
+ &.span9 { @include formColumns(9); }
274
+ &.span10 { @include formColumns(10); }
275
+ &.span11 { @include formColumns(11); }
276
+ &.span12 { @include formColumns(12); }
277
+ &.span13 { @include formColumns(13); }
278
+ &.span14 { @include formColumns(14); }
279
+ &.span15 { @include formColumns(15); }
280
+ &.span16 { @include formColumns(16); }
281
+ }
282
+
283
+ // Disabled and read-only inputs
284
+ input[disabled],
285
+ select[disabled],
286
+ textarea[disabled],
287
+ input[readonly],
288
+ select[readonly],
289
+ textarea[readonly] {
290
+ background-color: #f5f5f5;
291
+ border-color: #ddd;
292
+ cursor: not-allowed;
293
+ }
294
+
295
+ // Actions (the buttons)
296
+ .actions {
297
+ background: #f5f5f5;
298
+ margin-top: $baseline;
299
+ margin-bottom: $baseline;
300
+ padding: ($baseline - 1) 20px $baseline 150px;
301
+ border-top: 1px solid #ddd;
302
+ @include border-radius(0 0 3px 3px);
303
+ .secondary-action {
304
+ float: right;
305
+ a {
306
+ line-height: 30px;
307
+ &:hover {
308
+ text-decoration: underline;
309
+ }
310
+ }
311
+ }
312
+ }
313
+
314
+ // Help Text
315
+ .help-inline,
316
+ .help-block {
317
+ font-size: $basefont;
318
+ line-height: $baseline;
319
+ color: $grayLight;
320
+ }
321
+ .help-inline {
322
+ padding-left: 5px;
323
+ *position: relative; /* IE6-7 */
324
+ *top: -5px; /* IE6-7 */
325
+ }
326
+
327
+ // Big blocks of help text
328
+ .help-block {
329
+ display: block;
330
+ max-width: 600px;
331
+ }
332
+
333
+ // Inline Fields (input fields that appear as inline objects
334
+ .inline-inputs {
335
+ color: $gray;
336
+ span {
337
+ padding: 0 2px 0 1px;
338
+ }
339
+ }
340
+
341
+ // Allow us to put symbols and text within the input field for a cleaner look
342
+ .input-prepend,
343
+ .input-append {
344
+ input {
345
+ @include border-radius(0 3px 3px 0);
346
+ }
347
+ .add-on {
348
+ position: relative;
349
+ background: #f5f5f5;
350
+ border: 1px solid #ccc;
351
+ z-index: 2;
352
+ float: left;
353
+ display: block;
354
+ width: auto;
355
+ min-width: 16px;
356
+ height: 18px;
357
+ padding: 4px 4px 4px 5px;
358
+ margin-right: -1px;
359
+ font-weight: normal;
360
+ line-height: 18px;
361
+ color: $grayLight;
362
+ text-align: center;
363
+ text-shadow: 0 1px 0 $white;
364
+ @include border-radius(3px 0 0 3px);
365
+ }
366
+ .active {
367
+ background: lighten($green, 30);
368
+ border-color: $green;
369
+ }
370
+ }
371
+ .input-prepend {
372
+ .add-on {
373
+ *margin-top: 1px; /* IE6-7 */
374
+ }
375
+ }
376
+ .input-append {
377
+ input {
378
+ float: left;
379
+ @include border-radius(3px 0 0 3px);
380
+ }
381
+ .add-on {
382
+ @include border-radius(0 3px 3px 0);
383
+ margin-right: 0;
384
+ margin-left: -1px;
385
+ }
386
+ }
387
+
388
+ // Stacked options for forms (radio buttons or checkboxes)
389
+ .inputs-list {
390
+ margin: 0 0 5px;
391
+ width: 100%;
392
+ li {
393
+ display: block;
394
+ padding: 0;
395
+ width: 100%;
396
+ }
397
+ label {
398
+ display: block;
399
+ float: none;
400
+ width: auto;
401
+ padding: 0;
402
+ margin-left: 20px;
403
+ line-height: $baseline;
404
+ text-align: left;
405
+ white-space: normal;
406
+ strong {
407
+ color: $gray;
408
+ }
409
+ small {
410
+ font-size: $basefont - 2;
411
+ font-weight: normal;
412
+ }
413
+ }
414
+ .inputs-list {
415
+ margin-left: 25px;
416
+ margin-bottom: 10px;
417
+ padding-top: 0;
418
+ }
419
+ &:first-child {
420
+ padding-top: 6px;
421
+ }
422
+ li + li {
423
+ padding-top: 2px;
424
+ }
425
+ input[type=radio],
426
+ input[type=checkbox] {
427
+ margin-bottom: 0;
428
+ margin-left: -20px;
429
+ float: left;
430
+ }
431
+ }
432
+
433
+ // Stacked forms
434
+ .form-stacked {
435
+ padding-left: 20px;
436
+ fieldset {
437
+ padding-top: $baseline / 2;
438
+ }
439
+ legend {
440
+ padding-left: 0;
441
+ }
442
+ label {
443
+ display: block;
444
+ float: none;
445
+ width: auto;
446
+ font-weight: bold;
447
+ text-align: left;
448
+ line-height: 20px;
449
+ padding-top: 0;
450
+ }
451
+ .clearfix {
452
+ margin-bottom: $baseline / 2;
453
+ div.input {
454
+ margin-left: 0;
455
+ }
456
+ }
457
+ .inputs-list {
458
+ margin-bottom: 0;
459
+ li {
460
+ padding-top: 0;
461
+ label {
462
+ font-weight: normal;
463
+ padding-top: 0;
464
+ }
465
+ }
466
+ }
467
+ div.clearfix.error {
468
+ padding-top: 10px;
469
+ padding-bottom: 10px;
470
+ padding-left: 10px;
471
+ margin-top: 0;
472
+ margin-left: -10px;
473
+ }
474
+ .actions {
475
+ margin-left: -20px;
476
+ padding-left: 20px;
477
+ }
478
+ }