anjlab-bootstrap-rails 0.0.2

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