less-rails-liftkit 0.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.
Files changed (37) hide show
  1. data/.gitignore +7 -0
  2. data/.travis.yml +5 -0
  3. data/Gemfile +5 -0
  4. data/README.md +0 -0
  5. data/Rakefile +14 -0
  6. data/less-rails-liftkit.gemspec +19 -0
  7. data/lib/less/rails/liftkit/engine.rb +13 -0
  8. data/lib/less/rails/liftkit/version.rb +7 -0
  9. data/lib/less/rails/liftkit.rb +2 -0
  10. data/lib/less-rails-liftkit.rb +9 -0
  11. data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.blockify.js +86 -0
  12. data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.cycle.js +1503 -0
  13. data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.dropdown.js +71 -0
  14. data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.hashchange.js +390 -0
  15. data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.modal.js +133 -0
  16. data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.placeholder.js +106 -0
  17. data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.stickybox.js +116 -0
  18. data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.tabs.js +119 -0
  19. data/vendor/assets/javascripts/lift/liftkit/script.js +59 -0
  20. data/vendor/assets/javascripts/lift/liftkit/underscore.js +34 -0
  21. data/vendor/assets/javascripts/lift/liftkit.js +3 -0
  22. data/vendor/assets/stylesheets/lift/liftkit.css.less +1 -0
  23. data/vendor/frameworks/lift/liftkit/alerts.less +104 -0
  24. data/vendor/frameworks/lift/liftkit/buttons.less +160 -0
  25. data/vendor/frameworks/lift/liftkit/core.less +345 -0
  26. data/vendor/frameworks/lift/liftkit/fluid.less +93 -0
  27. data/vendor/frameworks/lift/liftkit/forms.less +401 -0
  28. data/vendor/frameworks/lift/liftkit/liftkit.less +64 -0
  29. data/vendor/frameworks/lift/liftkit/modal.less +34 -0
  30. data/vendor/frameworks/lift/liftkit/navigation.less +159 -0
  31. data/vendor/frameworks/lift/liftkit/responsive-fixed.less +238 -0
  32. data/vendor/frameworks/lift/liftkit/responsive-fluid.less +89 -0
  33. data/vendor/frameworks/lift/liftkit/scaffolding.less +116 -0
  34. data/vendor/frameworks/lift/liftkit/tables.less +54 -0
  35. data/vendor/frameworks/lift/liftkit/type.less +272 -0
  36. data/vendor/frameworks/lift/liftkit.less +1 -0
  37. metadata +114 -0
@@ -0,0 +1,401 @@
1
+ @extraSpace: (@gridGutterWidth * 2); // For our grid calculations
2
+
3
+ /*
4
+ * 1. Corrects font size not being inherited in all browsers
5
+ * 2. Addresses margins set differently in IE6/7, FF3/4, S5, Chrome
6
+ * 3. Improves appearance and consistency in all browsers
7
+ */
8
+
9
+ button,
10
+ input,
11
+ select,
12
+ textarea {
13
+ font-size: 100%; /* 1 */
14
+ margin: 0; /* 2 */
15
+ vertical-align: baseline; /* 3 */
16
+ *vertical-align: middle; /* 3 */
17
+ -webkit-font-smoothing: antialiased;
18
+ }
19
+
20
+ /*
21
+ * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
22
+ */
23
+
24
+ button,
25
+ input {
26
+ line-height: normal; /* 1 */
27
+ }
28
+
29
+ /*
30
+ * 1. Improves usability and consistency of cursor style between image-type 'input' and others
31
+ * 2. Corrects inability to style clickable 'input' types in iOS
32
+ * 3. Corrects inner spacing displayed oddly in IE7 without effecting normal text inputs
33
+ * Known issue: inner spacing remains in IE6
34
+ */
35
+
36
+ button,
37
+ input[type="button"],
38
+ input[type="reset"],
39
+ input[type="submit"] {
40
+ cursor: pointer; /* 1 */
41
+ *overflow: visible; /* 3 */
42
+ }
43
+
44
+ /*
45
+ * 1. Addresses box sizing set to content-box in IE8/9
46
+ * 2. Addresses excess padding in IE8/9
47
+ */
48
+
49
+ input[type="checkbox"],
50
+ input[type="radio"] {
51
+ box-sizing: border-box; /* 1 */
52
+ padding: 0; /* 2 */
53
+ }
54
+
55
+ /*
56
+ * 1. Addresses appearance set to searchfield in S5, Chrome
57
+ * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
58
+ */
59
+
60
+ input[type="search"] {
61
+ -webkit-appearance: textfield; /* 1 */
62
+ -moz-box-sizing: content-box;
63
+ -webkit-box-sizing: content-box; /* 2 */
64
+ box-sizing: content-box;
65
+ }
66
+
67
+ /*
68
+ * Corrects inner padding displayed oddly in S5, Chrome on OSX
69
+ */
70
+
71
+ input[type="search"]::-webkit-search-decoration {
72
+ -webkit-appearance: none;
73
+ }
74
+
75
+ /*
76
+ * Corrects inner padding and border displayed oddly in FF3/4
77
+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
78
+ */
79
+
80
+ button::-moz-focus-inner,
81
+ input::-moz-focus-inner {
82
+ border: 0;
83
+ padding: 0;
84
+ }
85
+
86
+
87
+ form {
88
+ margin: 0 0 @basespace;
89
+ }
90
+
91
+ // Groups of fields with labels on top (legends)
92
+ fieldset {
93
+ margin: 0 0 @basespace;
94
+ padding: @basespace 0 0;
95
+ border: none;
96
+
97
+ legend {
98
+ border: 0;
99
+ display: block;
100
+ font-size: @basesize * 1.5;
101
+ line-height: 1;
102
+ color: @typeColor;
103
+ padding: @basespace 0 0;
104
+ *margin-left: -10px;
105
+ *line-height: 1.5; /* IE6-7 */
106
+ }
107
+ }
108
+
109
+ // Parent element that clears floats and wraps labels and fields together
110
+ form .field {
111
+ margin-bottom: @basespace;
112
+ margin-left: -1 * @gridGutterWidth;
113
+ .clearfix();
114
+ }
115
+
116
+ // Set font for forms
117
+ label,
118
+ input,
119
+ select,
120
+ textarea {
121
+ @basesize: 15px;
122
+ @baseline: 1.3;
123
+ @basefont: Helvetica, Arial, sans-serif;
124
+ }
125
+
126
+ // Float labels left
127
+ label {
128
+ padding-top: 5px;
129
+ font-size: @basesize;
130
+ line-height: @baseline;
131
+ text-align: right;
132
+ color: @typeColor;
133
+ .formColumns(3);
134
+ }
135
+
136
+ // Checkboxs and radio buttons
137
+ input[type=checkbox],
138
+ input[type=radio] {
139
+ cursor: pointer;
140
+ }
141
+
142
+ // Inputs, Textareas, Selects
143
+ input,
144
+ textarea,
145
+ select,
146
+ .uneditable-input {
147
+ display: inline-block;
148
+ padding: 7px 7px 6px;
149
+ font-size: @basesize - 1;
150
+ line-height: @baseline;
151
+ color: @typeColor;
152
+ border: 1px solid @grayLight;
153
+ .border-radius(3px);
154
+ .formColumns(5);
155
+ }
156
+
157
+ input[type=search]{
158
+ padding-right: 0;
159
+ }
160
+
161
+ /* mini reset for non-html5 file types */
162
+ input[type=checkbox],
163
+ input[type=radio] {
164
+ width: auto;
165
+ height: auto;
166
+ padding: 0;
167
+ margin: 2px 5px 0 0;
168
+ *margin-top: 0; /* IE6-7 */
169
+ line-height: normal;
170
+ border: none;
171
+ }
172
+
173
+ input[type=file] {
174
+ background-color: @white;
175
+ padding: initial;
176
+ border: initial;
177
+ line-height: initial;
178
+ .box-shadow(none);
179
+ }
180
+
181
+ select,
182
+ input[type=file] {
183
+ height: @basespace * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
184
+ line-height: @baseline * 1.5;
185
+ *margin-top: 4px; /* For IE7, add top margin to align select with labels */
186
+ }
187
+
188
+ // Make multiple select elements height not fixed
189
+ select[multiple] {
190
+ height: inherit;
191
+ }
192
+
193
+ textarea {
194
+ overflow: auto;
195
+ vertical-align: top;
196
+ height: auto;
197
+ }
198
+
199
+ // Placeholder text gets special styles; can't be bundled together though for some reason
200
+ :-moz-placeholder {
201
+ color: @grayLight;
202
+ }
203
+ ::-webkit-input-placeholder {
204
+ color: @grayLight;
205
+ }
206
+
207
+ // Focus states
208
+ input[type=text],
209
+ textarea {
210
+ @transition: border linear .2s, box-shadow linear .2s;
211
+ .transition(@transition);
212
+ .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
213
+ }
214
+ input[type=text]:focus,
215
+ textarea:focus {
216
+ outline: 0;
217
+ border-color: @gray;
218
+ @shadow: inset 0 1px 3px rgba(0,0,0,.1);
219
+ .box-shadow(@shadow);
220
+ }
221
+ input[type=file]:focus,
222
+ input[type=checkbox]:focus,
223
+ select:focus {
224
+ .box-shadow(none); // override for file inputs
225
+ outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
226
+ }
227
+
228
+ // Error styles
229
+ form .field.error {
230
+ .border-radius(4px);
231
+ @error-text: desaturate(@danger, 25%);
232
+ > label {
233
+ color: @danger;
234
+ }
235
+ span.help-inline {
236
+ color: @danger;
237
+ }
238
+ input,
239
+ textarea {
240
+ border-color: @error-text;
241
+ &:focus {
242
+ border-color: darken(@error-text, 10%);
243
+ }
244
+ }
245
+ }
246
+
247
+ // Form element sizes
248
+
249
+ // Grid style input sizes
250
+ // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
251
+
252
+ .formColumns(@columnSpan: 1) {
253
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
254
+ display: inline;
255
+ float: left;
256
+ margin-left: @gridGutterWidth;
257
+ .box-sizing();
258
+ }
259
+
260
+ .formOffset(@columnOffset: 1) {
261
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
262
+ }
263
+
264
+ .help-inline,
265
+ label,
266
+ input,
267
+ textarea,
268
+ select {
269
+ // Default columns
270
+ &.s0 { .formColumns(0); }
271
+ &.s1 { .formColumns(1); }
272
+ &.s2 { .formColumns(2); }
273
+ &.s3 { .formColumns(3); }
274
+ &.s4 { .formColumns(4); }
275
+ &.s5 { .formColumns(5); }
276
+ &.s6 { .formColumns(6); }
277
+ &.s7 { .formColumns(7); }
278
+ &.s8 { .formColumns(8); }
279
+ &.s9 { .formColumns(9); }
280
+ &.s10 { .formColumns(10); }
281
+ &.s11 { .formColumns(11); }
282
+ &.s12 { .formColumns(12); }
283
+ &.s13 { .formColumns(13); }
284
+ &.s14 { .formColumns(14); }
285
+ &.s15 { .formColumns(15); }
286
+ &.s16 { .formColumns(16); }
287
+ }
288
+
289
+ .help-inline,
290
+ label,
291
+ input,
292
+ textarea,
293
+ select {
294
+ // Default columns
295
+ &.o0 { .formOffset(0); }
296
+ &.o1 { .formOffset(1); }
297
+ &.o2 { .formOffset(2); }
298
+ &.o3 { .formOffset(3); }
299
+ &.o4 { .formOffset(4); }
300
+ &.o5 { .formOffset(5); }
301
+ &.o6 { .formOffset(6); }
302
+ &.o7 { .formOffset(7); }
303
+ &.o8 { .formOffset(8); }
304
+ &.o9 { .formOffset(9); }
305
+ &.o10 { .formOffset(10); }
306
+ &.o11 { .formOffset(11); }
307
+ &.o12 { .formOffset(12); }
308
+ &.o13 { .formOffset(13); }
309
+ &.o14 { .formOffset(14); }
310
+ &.o15 { .formOffset(15); }
311
+ &.o16 { .formOffset(16); }
312
+ }
313
+
314
+ // Disabled and read-only inputs
315
+ input[disabled],
316
+ select[disabled],
317
+ textarea[disabled],
318
+ input[readonly],
319
+ select[readonly],
320
+ textarea[readonly] {
321
+ background-color: #f9f9f9;
322
+ border-color: @grayLight;
323
+ cursor: not-allowed;
324
+ }
325
+
326
+ // Actions (the buttons)
327
+ .actions {
328
+ .clearfix();
329
+ margin: 0 0 @basespace;
330
+ padding: (@basespace - 1) 0 @basespace;
331
+ border-top: 1px solid #ddd;
332
+ input[type="submit"],
333
+ input[type="button"],
334
+ button {
335
+ margin-right: @basespace/2;
336
+ }
337
+ .right {
338
+ float: right;
339
+ input[type="submit"],
340
+ input[type="button"],
341
+ button {
342
+ margin-right: 0;
343
+ margin-left: @basespace/2;
344
+ }
345
+ }
346
+ }
347
+
348
+
349
+ // Help Text
350
+ .help-inline {
351
+ font-size: @basesize - 1;
352
+ line-height: @baseline;
353
+ color: @grayLight;
354
+ clear: both;
355
+ display: block;
356
+ padding-top: 5px;
357
+ .formOffset(3);
358
+ *position: relative; /* IE6-7 */
359
+ *top: -5px; /* IE6-7 */
360
+ }
361
+
362
+
363
+ form .field.stack {
364
+ label {
365
+ padding-bottom: @basespace / 3;
366
+ display: block;
367
+ text-align: left;
368
+ }
369
+ }
370
+
371
+ form.stacked .field {
372
+ label {
373
+ padding-bottom: @basespace / 3;
374
+ display: block;
375
+ width: 100%;
376
+ text-align: left;
377
+ }
378
+
379
+ .help-inline {
380
+ .formOffset(0);
381
+ }
382
+
383
+ }
384
+
385
+ .list {
386
+ .formColumns(5);
387
+ label {
388
+ .formColumns(5);
389
+ .clearfix();
390
+ text-align: left;
391
+ font-size: @basesize - 1;
392
+ margin-left: 0;
393
+ padding-left: 20px;
394
+ }
395
+ input {
396
+ margin: 2px 5px 0 -18px;
397
+ }
398
+ span {
399
+ display: block;
400
+ }
401
+ }
@@ -0,0 +1,64 @@
1
+ /*!
2
+ * Liftkit
3
+ * Copyright 2011 Lift Interactive
4
+ * Licensed under the Apache License v2.0
5
+ * http://www.apache.org/licenses/LICENSE-2.0
6
+ */
7
+
8
+ @import "liftkit/core.less"; // Must import core.less
9
+ @import "liftkit/scaffolding.less";
10
+ @import "liftkit/type.less";
11
+ @import "liftkit/tables.less";
12
+ @import "liftkit/forms.less";
13
+ @import "liftkit/buttons.less";
14
+ @import "liftkit/alerts.less";
15
+ @import "liftkit/navigation.less";
16
+
17
+ @baseColor: #425eef;
18
+ @typeColor: @grayDark;
19
+ @headerColor: @grayDarker;
20
+ @linkColor: #425eef;
21
+ @linkColorHover: darken(@linkColor, 15);
22
+
23
+ @black: #000;
24
+ @grayDarker: lighten(@black, 10%);
25
+ @grayDark: lighten(@black, 25%);
26
+ @gray: lighten(@black, 50%);
27
+ @grayLight: lighten(@black, 75%);
28
+ @grayLighter: lighten(@black, 90%);
29
+ @white: #fff;
30
+
31
+ @primary: #425eef;
32
+ @secondary: #4297ef;
33
+ @success: #71b44c;
34
+ @warning: #f9b53f;
35
+ @danger: #da5444;
36
+
37
+ // Font-Families
38
+ @serif: Garamond, Georgia, Times, "Times New Roman", sans-serif;
39
+ @sansserif: Helvetica, Arial, sans-serif;
40
+
41
+ // Required for type, tables, forms
42
+ @basesize: 15px;
43
+ @baseline: 1.3;
44
+ @basefont: @sansserif;
45
+ @baseheaderfont: @sansserif;
46
+
47
+ // Required for scaffolding & forms
48
+ @gridColumns: 16;
49
+ @gridColumnWidth: 40px;
50
+ @gridGutterWidth: 20px;
51
+ @gridMarginWidth: 20px;
52
+
53
+ /*!
54
+ * Put your styles under here.
55
+ */
56
+
57
+
58
+ body {
59
+ background: #ddd;
60
+ }
61
+
62
+ .container {
63
+ background: #fff;
64
+ }
@@ -0,0 +1,34 @@
1
+ .modal {
2
+ display: none;
3
+ width: 500px;
4
+ background: #fff;
5
+ padding: 15px 30px;
6
+ .border-radius(5px);
7
+ .box-shadow(0 3px 6px rgba(0,0,0,0.25));
8
+
9
+ a.close-modal {
10
+ position: absolute;
11
+ top: -14px;
12
+ right: -14px;
13
+ display: block;
14
+ width: 28px;
15
+ height: 28px;
16
+ text-indent: -9999px;
17
+ background: #333;
18
+ border: 2px solid #fff;
19
+ .border-radius(20px);
20
+ .box-shadow(0 1px 3px rgba(0,0,0,0.2));
21
+
22
+ &:before {
23
+ content: "×";
24
+ font-size: 27px;
25
+ color: #fff;
26
+ line-height: 0;
27
+ text-indent: 0px;
28
+ font-weight: bold;
29
+ position: absolute;
30
+ top: 11px;
31
+ left: 6px;
32
+ }
33
+ }
34
+ }
@@ -0,0 +1,159 @@
1
+ //
2
+ // Navigation
3
+
4
+ // using display:inline-block; instead of float:left; in here. if you NEED floats, build a custom menu.
5
+
6
+ .nav
7
+ {
8
+ margin: 0 0 @basespace;
9
+ padding: 0;
10
+ list-style: none;
11
+ .clearfix();
12
+ &.center {
13
+ text-align: center;
14
+ }
15
+ > li {
16
+ margin: 0;
17
+ display: inline-block;
18
+ position: relative;
19
+ > a {
20
+ display: block;
21
+ }
22
+ }
23
+ a {
24
+ display: block;
25
+ color: @linkColor;
26
+ padding: (@basespace/2) @basespace;
27
+ line-height: 1;
28
+ text-decoration: none;
29
+ .transition(all 0.3s ease-in-out);
30
+ .border-radius(3px);
31
+ &:hover {
32
+ text-decoration: none;
33
+ background-color: lighten(@black, 90%);
34
+ }
35
+ }
36
+ .active > a {
37
+ color: @white;
38
+ background: @linkColor;
39
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
40
+ }
41
+
42
+ // dropdowns
43
+ li.dropdown {
44
+ ul {
45
+ top: @basespace;
46
+ left: -9999px;
47
+ height: 0;
48
+ overflow: hidden;
49
+ .opacity(0);
50
+ list-style-type: none;
51
+ padding: @basespace 0;
52
+ position: absolute;
53
+ .transition(opacity 0.3s ease-in-out);
54
+ a {
55
+ background: 0;
56
+ padding: (@basespace/4) @basespace;
57
+ white-space: nowrap;
58
+ &:hover {
59
+ color: @linkColorHover;
60
+ }
61
+ }
62
+ }
63
+ &:hover {
64
+ ul {
65
+ left: 0;
66
+ height: auto;
67
+ .opacity(100);
68
+ }
69
+ > a {
70
+ // replicate hovered style here so it is retained as pointer goes down into the dropdown list
71
+ }
72
+ }
73
+ }
74
+
75
+
76
+ // Basic Tabs
77
+ &.tabs {
78
+ border-bottom: 1px solid @grayLighter;
79
+ > li {
80
+ position: relative; // For the dropdowns mostly
81
+ top: 1px;
82
+ > a {
83
+ padding: (@basespace / 1.5) @basespace;
84
+ display: inline-block;
85
+ border: 1px solid transparent;
86
+ .border-radius(4px 4px 0 0);
87
+ &:hover {
88
+ text-decoration: none;
89
+ background-color: #eee;
90
+ }
91
+ }
92
+ &.active > a {
93
+ color: @gray;
94
+ background-color: @white;
95
+ border: 1px solid #ddd;
96
+ border-bottom-color: transparent;
97
+ text-shadow: none;
98
+ }
99
+ }
100
+ }
101
+
102
+ // Basic pill nav
103
+ &.pills {
104
+ > li{
105
+ margin: 0;
106
+ &:first-child {
107
+ margin-left: -(@basesize/2);
108
+ }
109
+ > a {
110
+ margin: 0;
111
+ padding: (@basespace/2) @basespace;
112
+ text-shadow: 0 1px 1px @white;
113
+ .border-radius(@basespace+5);
114
+ &:hover {
115
+ text-decoration: none;
116
+ background-color: #eee;
117
+ border-color: #eee #eee #ddd;
118
+ }
119
+ }
120
+ &.active a {
121
+ background: @linkColor;
122
+ color: @white;
123
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
124
+ }
125
+ }
126
+ }
127
+
128
+ &.vert {
129
+ a {
130
+ padding: @basespace/2;
131
+ .transition(0.25s);
132
+
133
+ &:hover {
134
+ .transition(0s);
135
+ }
136
+ }
137
+
138
+ li{
139
+ display: block;
140
+ ul {
141
+ margin: 0 0 0 20px;
142
+ padding: 0;
143
+ }
144
+ }
145
+ &.focused {
146
+ > li {
147
+ ul {
148
+ display: none;
149
+ }
150
+ &.active {
151
+ ul {
152
+ display: block;
153
+ }
154
+ }
155
+ }
156
+ }
157
+ }
158
+
159
+ }