motorized-bootstrap 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,17 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source :rubygems
2
+
3
+ # Specify your gem's dependencies in motorized-bootstrap.gemspec
4
+ gemspec
@@ -0,0 +1,29 @@
1
+ = Motorized Bootstrap
2
+
3
+ Rails engine, supplying Twitter's bootstrap in SCSS.
4
+
5
+ == Usage
6
+
7
+ In application.css.scss, add the following:
8
+
9
+ @import "bootstrap";
10
+
11
+ == Thanks
12
+
13
+ Thanks to {Teddy Zetterlund's SCSS version of bootstrap!}[https://github.com/teddyzetterlund/twitter-bootstrap-scss]
14
+
15
+ == Copyright and License
16
+
17
+ Copyright 2011 Twitter, Inc.
18
+
19
+ Licensed under the Apache License, Version 2.0 (the "License");
20
+ you may not use this work except in compliance with the License.
21
+ You may obtain a copy of the License in the LICENSE file, or at:
22
+
23
+ http://www.apache.org/licenses/LICENSE-2.0
24
+
25
+ Unless required by applicable law or agreed to in writing, software
26
+ distributed under the License is distributed on an "AS IS" BASIS,
27
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
28
+ See the License for the specific language governing permissions and
29
+ limitations under the License.
@@ -0,0 +1,3 @@
1
+ #!/usr/bin/env rake
2
+
3
+ require "bundler/gem_tasks"
@@ -0,0 +1,57 @@
1
+ /* Responsive.less
2
+ * Adjusted grid styles to handle some common screen sizes
3
+ * ------------------------------------------------------- */
4
+
5
+
6
+ // MOBILE PORTRAIT & LANDSCAPE
7
+ // ---------------------------
8
+ // For devices narrower than 480px
9
+ @media only screen and (max-width: 480px) {
10
+
11
+ // Remove fixed width of containers
12
+ .container {
13
+ width: auto;
14
+ padding: 0 10px;
15
+ }
16
+
17
+ // Undo the floating of columns
18
+ .row {
19
+ margin-left: 0;
20
+ }
21
+ .row [class^="span"] {
22
+ float: none;
23
+ width: 100%;
24
+ display: block;
25
+ margin-left: 0;
26
+ }
27
+
28
+ // Stack form elements instead of floating them
29
+ fieldset legend {
30
+ margin-left: 0;
31
+ }
32
+ label {
33
+ float: none;
34
+ width: auto;
35
+ text-align: left;
36
+ }
37
+ div.input {
38
+ margin-left: 0;
39
+ width: 100%;
40
+ }
41
+ .input-xxlarge,
42
+ input.xxlarge,
43
+ textarea.xxlarge,
44
+ select.xxlarge {
45
+ width: 80%;
46
+ }
47
+
48
+ // Adjust modal
49
+ .modal-backdrop {
50
+ padding: 10px;
51
+ }
52
+ .modal {
53
+ width: 100%;
54
+ margin: 0;
55
+ left: auto;
56
+ }
57
+ }
@@ -0,0 +1,23 @@
1
+ /*!
2
+ * Bootstrap @VERSION
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
+ // CSS Reset
13
+ @import "reset";
14
+
15
+ // Core
16
+ @import "preboot";
17
+ @import "scaffolding";
18
+
19
+ // Styled patterns and elements
20
+ @import "type";
21
+ @import "forms";
22
+ @import "tables";
23
+ @import "patterns";
@@ -0,0 +1,387 @@
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 font-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 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 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
+ @include placeholder;
125
+ // Focus states
126
+ input,
127
+ select, textarea {
128
+ $transition: border linear .2s, box-shadow linear .2s;
129
+ @include transition($transition);
130
+ @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
131
+ }
132
+ input:focus,
133
+ textarea:focus {
134
+ outline: none;
135
+ border-color: rgba(82,168,236,.8);
136
+ $shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
137
+ @include box-shadow($shadow);
138
+ }
139
+
140
+ // Error styles
141
+ form div.error {
142
+ background: lighten($red, 57%);
143
+ padding: 10px 0;
144
+ margin: -10px 0 10px;
145
+ @include border-radius(4px);
146
+ $error-text: desaturate(lighten($red, 25%), 25%);
147
+ > label,
148
+ span.help-inline,
149
+ span.help-block {
150
+ color: $red;
151
+ }
152
+ input,
153
+ textarea {
154
+ border-color: $error-text;
155
+ @include box-shadow(0 0 3px rgba(171,41,32,.25));
156
+ &:focus {
157
+ border-color: darken($error-text, 10%);
158
+ @include box-shadow(0 0 6px rgba(171,41,32,.5));
159
+ }
160
+ }
161
+ .input-prepend,
162
+ .input-append {
163
+ span.add-on {
164
+ background: lighten($red, 50%);
165
+ border-color: $error-text;
166
+ color: darken($error-text, 10%);
167
+ }
168
+ }
169
+ }
170
+
171
+ // Form element sizes
172
+ .input-mini, input.mini, textarea.mini, select.mini {
173
+ width: 60px;
174
+ }
175
+ .input-small, input.small, textarea.small, select.small {
176
+ width: 90px;
177
+ }
178
+ .input-medium, input.medium, textarea.medium, select.medium {
179
+ width: 150px;
180
+ }
181
+ .input-large, input.large, textarea.large, select.large {
182
+ width: 210px;
183
+ }
184
+ .input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
185
+ width: 270px;
186
+ }
187
+ .input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
188
+ width: 530px;
189
+ }
190
+ textarea.xxlarge {
191
+ overflow-y: scroll;
192
+ }
193
+
194
+ // Turn off focus for disabled (read-only) form elements
195
+ input[readonly]:focus,
196
+ textarea[readonly]:focus,
197
+ input.disabled {
198
+ background: #f5f5f5;
199
+ border-color: #ddd;
200
+ @include box-shadow(none);
201
+ }
202
+
203
+ // Actions (the buttons)
204
+ .actions {
205
+ background: #f5f5f5;
206
+ margin-top: $baseline;
207
+ margin-bottom: $baseline;
208
+ padding: ($baseline - 1) 20px $baseline 150px;
209
+ border-top: 1px solid #ddd;
210
+ @include border-radius(0 0 3px 3px);
211
+ .secondary-action {
212
+ float: right;
213
+ a {
214
+ line-height: 30px;
215
+ &:hover {
216
+ text-decoration: underline;
217
+ }
218
+ }
219
+ }
220
+ }
221
+
222
+ // Help Text
223
+ .help-inline,
224
+ .help-block {
225
+ font-size: 12px;
226
+ line-height: $baseline;
227
+ color: $grayLight;
228
+ }
229
+ .help-inline {
230
+ padding-left: 5px;
231
+ *position: relative; /* IE6-7 */
232
+ *top: -5px; /* IE6-7 */
233
+ }
234
+
235
+ // Big blocks of help text
236
+ .help-block {
237
+ display: block;
238
+ max-width: 600px;
239
+ }
240
+
241
+ // Inline Fields (input fields that appear as inline objects
242
+ .inline-inputs {
243
+ color: $gray;
244
+ span, input {
245
+ display: inline-block;
246
+ }
247
+ input.mini {
248
+ width: 60px;
249
+ }
250
+ input.small {
251
+ width: 90px;
252
+ }
253
+ span {
254
+ padding: 0 2px 0 1px;
255
+ }
256
+ }
257
+
258
+ // Allow us to put symbols and text within the input field for a cleaner look
259
+ .input-prepend,
260
+ .input-append {
261
+ input {
262
+ @include border-radius(0 3px 3px 0);
263
+ }
264
+ .add-on {
265
+ background: #f5f5f5;
266
+ float: left;
267
+ display: block;
268
+ width: auto;
269
+ min-width: 16px;
270
+ padding: 4px 4px 4px 5px;
271
+ color: $grayLight;
272
+ font-weight: normal;
273
+ line-height: 18px;
274
+ height: 18px;
275
+ text-align: center;
276
+ text-shadow: 0 1px 0 #fff;
277
+ border: 1px solid #ccc;
278
+ border-right-width: 0;
279
+ @include border-radius(3px 0 0 3px);
280
+ }
281
+ .active {
282
+ background: lighten($green, 30);
283
+ border-color: $green;
284
+ }
285
+ }
286
+ .input-prepend {
287
+ .add-on {
288
+ *margin-top: 1px; /* IE6-7 */
289
+ }
290
+ }
291
+ .input-append {
292
+ input {
293
+ float: left;
294
+ @include border-radius(3px 0 0 3px);
295
+ }
296
+ .add-on {
297
+ @include border-radius(0 3px 3px 0);
298
+ border-right-width: 1px;
299
+ border-left-width: 0;
300
+ }
301
+ }
302
+
303
+ // Stacked options for forms (radio buttons or checkboxes)
304
+ .inputs-list {
305
+ margin: 0 0 5px;
306
+ width: 100%;
307
+ li {
308
+ display: block;
309
+ padding: 0;
310
+ width: 100%;
311
+ label {
312
+ display: block;
313
+ float: none;
314
+ width: auto;
315
+ padding: 0;
316
+ line-height: $baseline;
317
+ text-align: left;
318
+ white-space: normal;
319
+ strong {
320
+ color: $gray;
321
+ }
322
+ small {
323
+ font-size: 12px;
324
+ font-weight: normal;
325
+ }
326
+ }
327
+ ul.inputs-list {
328
+ margin-left: 25px;
329
+ margin-bottom: 10px;
330
+ padding-top: 0;
331
+ }
332
+ &:first-child {
333
+ padding-top: 5px;
334
+ }
335
+ }
336
+ input[type=radio],
337
+ input[type=checkbox] {
338
+ margin-bottom: 0;
339
+ }
340
+ }
341
+
342
+ // Stacked forms
343
+ .form-stacked {
344
+ padding-left: 20px;
345
+ fieldset {
346
+ padding-top: $baseline / 2;
347
+ }
348
+ legend {
349
+ margin-left: 0;
350
+ }
351
+ label {
352
+ display: block;
353
+ float: none;
354
+ width: auto;
355
+ font-weight: bold;
356
+ text-align: left;
357
+ line-height: 20px;
358
+ padding-top: 0;
359
+ }
360
+ .clearfix {
361
+ margin-bottom: $baseline / 2;
362
+ div.input {
363
+ margin-left: 0;
364
+ }
365
+ }
366
+ .inputs-list {
367
+ margin-bottom: 0;
368
+ li {
369
+ padding-top: 0;
370
+ label {
371
+ font-weight: normal;
372
+ padding-top: 0;
373
+ }
374
+ }
375
+ }
376
+ div.error {
377
+ padding-top: 10px;
378
+ padding-bottom: 10px;
379
+ padding-left: 10px;
380
+ margin-top: 0;
381
+ margin-left: -10px;
382
+ }
383
+ .actions {
384
+ margin-left: -20px;
385
+ padding-left: 20px;
386
+ }
387
+ }