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,238 @@
1
+ // Required for scaffolding
2
+ @gridColumns: 16;
3
+ @gridColumnWidth: 40px;
4
+ @gridGutterWidth: 20px;
5
+ @gridMarginWidth: 20px;
6
+ @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
7
+
8
+ // Center-align a block level element
9
+ .center-blockcolumns() {
10
+ display: block;
11
+ margin-left: auto;
12
+ margin-right: auto;
13
+ }
14
+
15
+ // Grid System
16
+ .fixed-container() {
17
+ width: @siteWidth;
18
+ margin-left: auto;
19
+ margin-right: auto;
20
+ .clearfix();
21
+ }
22
+ .columns(@columnSpan: 1) {
23
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
24
+ }
25
+
26
+ // Necessary grid styles for every column to make them appear next to each other horizontally
27
+ .gridColumn() {
28
+ display: inline;
29
+ float: left;
30
+ margin-left: @gridGutterWidth;
31
+ }
32
+
33
+ // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
34
+ .makeColumn(@columnSpan: 1) {
35
+ .gridColumn();
36
+ .columns(@columnSpan);
37
+ }
38
+
39
+ // Container (centered, fixed-width layouts)
40
+ .container {
41
+ padding: 0 @gridMarginWidth;
42
+ .fixed-container();
43
+ }
44
+
45
+ // Fluid layouts (left aligned, with sidebar, min- & max-width content)
46
+ .container-fluid {
47
+ position: relative;
48
+ min-width: 940px;
49
+ padding-left: 20px;
50
+ padding-right: 20px;
51
+ .clearfix();
52
+ > .sidebar {
53
+ float: left;
54
+ width: 220px;
55
+ }
56
+ // TODO in v2: rename this and .popover .content to be more specific
57
+ > .content {
58
+ margin-left: 240px;
59
+ }
60
+ }
61
+
62
+ .row {
63
+ .clearfix();
64
+ margin-left: -1 * @gridGutterWidth;
65
+ }
66
+
67
+ // Default columns
68
+ .span1 { .gridColumn(); .columns(1); }
69
+ .span2 { .gridColumn(); .columns(2); }
70
+ .span3 { .gridColumn(); .columns(3); }
71
+ .span4 { .gridColumn(); .columns(4); }
72
+ .span5 { .gridColumn(); .columns(5); }
73
+ .span6 { .gridColumn(); .columns(6); }
74
+ .span7 { .gridColumn(); .columns(7); }
75
+ .span8 { .gridColumn(); .columns(8); }
76
+ .span9 { .gridColumn(); .columns(9); }
77
+ .span10 { .gridColumn(); .columns(10); }
78
+ .span11 { .gridColumn(); .columns(11); }
79
+ .span12 { .gridColumn(); .columns(12); }
80
+ .span13 { .gridColumn(); .columns(13); }
81
+ .span14 { .gridColumn(); .columns(14); }
82
+ .span15 { .gridColumn(); .columns(15); }
83
+ .span16 { .gridColumn(); .columns(16); }
84
+ .span17 { .gridColumn(); .columns(17); }
85
+ .span18 { .gridColumn(); .columns(18); }
86
+ .span19 { .gridColumn(); .columns(19); }
87
+ .span20 { .gridColumn(); .columns(20); }
88
+ .span21 { .gridColumn(); .columns(21); }
89
+ .span22 { .gridColumn(); .columns(22); }
90
+ .span23 { .gridColumn(); .columns(23); }
91
+ .span24 { .gridColumn(); .columns(24); }
92
+
93
+ @media (min-width: 800px) and (max-width: 960px) {
94
+
95
+ @scale: 1.25;
96
+
97
+ // Recalculate widths
98
+ @siteWidth: (@gridColumns * (@gridColumnWidth / @scale )) + ((@gridGutterWidth / @scale) * (@gridColumns - 1));
99
+
100
+ .columns(@columnSpan: 1) {
101
+ width: ((@gridColumnWidth / @scale ) * @columnSpan) + ((@gridGutterWidth / @scale) * (@columnSpan - 1));
102
+ }
103
+ .gridColumn() {
104
+ display: inline;
105
+ float: left;
106
+ margin-left: @gridGutterWidth / @scale;
107
+ }
108
+ .row {
109
+ .clearfix();
110
+ margin-left: -1 * (@gridGutterWidth / @scale);
111
+ }
112
+ .container {
113
+ width: @siteWidth;
114
+ }
115
+
116
+ // Recalculate column widths
117
+ .span1 { .gridColumn(); .columns(1); }
118
+ .span2 { .gridColumn(); .columns(2); }
119
+ .span3 { .gridColumn(); .columns(3); }
120
+ .span4 { .gridColumn(); .columns(4); }
121
+ .span5 { .gridColumn(); .columns(5); }
122
+ .span6 { .gridColumn(); .columns(6); }
123
+ .span7 { .gridColumn(); .columns(7); }
124
+ .span8 { .gridColumn(); .columns(8); }
125
+ .span9 { .gridColumn(); .columns(9); }
126
+ .span10 { .gridColumn(); .columns(10); }
127
+ .span11 { .gridColumn(); .columns(11); }
128
+ .span12 { .gridColumn(); .columns(12); }
129
+ .span13 { .gridColumn(); .columns(13); }
130
+ .span14 { .gridColumn(); .columns(14); }
131
+ .span15 { .gridColumn(); .columns(15); }
132
+ .span16 { .gridColumn(); .columns(16); }
133
+ .span17 { .gridColumn(); .columns(17); }
134
+ .span18 { .gridColumn(); .columns(18); }
135
+ .span19 { .gridColumn(); .columns(19); }
136
+ .span20 { .gridColumn(); .columns(20); }
137
+ .span21 { .gridColumn(); .columns(21); }
138
+ .span22 { .gridColumn(); .columns(22); }
139
+ .span23 { .gridColumn(); .columns(23); }
140
+ .span24 { .gridColumn(); .columns(24); }
141
+
142
+ }
143
+
144
+ @media (min-width: 480px) and (max-width: 800px) {
145
+
146
+ @scale: 1.66;
147
+
148
+ // Recalculate widths
149
+ @siteWidth: (@gridColumns * (@gridColumnWidth / @scale )) + ((@gridGutterWidth / @scale) * (@gridColumns - 1));
150
+
151
+ .columns(@columnSpan: 1) {
152
+ width: ((@gridColumnWidth / @scale ) * @columnSpan) + ((@gridGutterWidth / @scale) * (@columnSpan - 1));
153
+ }
154
+ .gridColumn() {
155
+ display: inline;
156
+ float: left;
157
+ margin-left: @gridGutterWidth / @scale;
158
+ }
159
+ .row {
160
+ .clearfix();
161
+ margin-left: -1 * (@gridGutterWidth / @scale);
162
+ }
163
+ .container {
164
+ width: @siteWidth;
165
+ }
166
+
167
+ // Recalculate column widths
168
+ .span1 { .gridColumn(); .columns(1); }
169
+ .span2 { .gridColumn(); .columns(2); }
170
+ .span3 { .gridColumn(); .columns(3); }
171
+ .span4 { .gridColumn(); .columns(4); }
172
+ .span5 { .gridColumn(); .columns(5); }
173
+ .span6 { .gridColumn(); .columns(6); }
174
+ .span7 { .gridColumn(); .columns(7); }
175
+ .span8 { .gridColumn(); .columns(8); }
176
+ .span9 { .gridColumn(); .columns(9); }
177
+ .span10 { .gridColumn(); .columns(10); }
178
+ .span11 { .gridColumn(); .columns(11); }
179
+ .span12 { .gridColumn(); .columns(12); }
180
+ .span13 { .gridColumn(); .columns(13); }
181
+ .span14 { .gridColumn(); .columns(14); }
182
+ .span15 { .gridColumn(); .columns(15); }
183
+ .span16 { .gridColumn(); .columns(16); }
184
+ .span17 { .gridColumn(); .columns(17); }
185
+ .span18 { .gridColumn(); .columns(18); }
186
+ .span19 { .gridColumn(); .columns(19); }
187
+ .span20 { .gridColumn(); .columns(20); }
188
+ .span21 { .gridColumn(); .columns(21); }
189
+ .span22 { .gridColumn(); .columns(22); }
190
+ .span23 { .gridColumn(); .columns(23); }
191
+ .span24 { .gridColumn(); .columns(24); }
192
+
193
+ }
194
+
195
+ @media (max-width: 480px) {
196
+ // Remove width from containers
197
+ .container {
198
+ width: auto;
199
+ padding: 0 15px;
200
+ }
201
+ // Undo negative margin on rows
202
+ .row {
203
+ margin-left: 0;
204
+ }
205
+ // Make all columns even
206
+ [class*="span"] {
207
+ float: none;
208
+ display: block;
209
+ width: auto;
210
+ margin: 0;
211
+ }
212
+ // Resize modals
213
+ .modal {
214
+ width: auto;
215
+ margin: 0;
216
+ }
217
+
218
+ // Remove the horizontal form styles
219
+ .form-horizontal .control-group > label {
220
+ float: none;
221
+ width: auto;
222
+ padding-top: 0;
223
+ text-align: left;
224
+ }
225
+ // Move over all input controls and content
226
+ .form-horizontal .controls {
227
+ margin-left: 0;
228
+ }
229
+ // Move the options list down to align with labels
230
+ .form-horizontal .control-list {
231
+ padding-top: 0; // has to be padding because margin collaspes
232
+ }
233
+ // Move over buttons in .form-actions to align with .controls
234
+ .form-horizontal .form-actions {
235
+ padding-left: 0;
236
+ }
237
+
238
+ }
@@ -0,0 +1,89 @@
1
+ @siteWidth : 940px;
2
+ @gridWidth : 100%;
3
+ @siteMargin : 20px;
4
+ @gridColumns : 16;
5
+ @gridColumnWidth : (@gridWidth / @gridColumns);
6
+
7
+ .row {
8
+ width: 100%;
9
+ .clearfix();
10
+ }
11
+
12
+ .columns(@columnSpan: 1) {
13
+ width: (@gridColumnWidth * @columnSpan);
14
+ }
15
+
16
+ .span1 { .gridColumn(); .columns(1); }
17
+ .span2 { .gridColumn(); .columns(2); }
18
+ .span3 { .gridColumn(); .columns(3); }
19
+ .span4 { .gridColumn(); .columns(4); }
20
+ .span5 { .gridColumn(); .columns(5); }
21
+ .span6 { .gridColumn(); .columns(6); }
22
+ .span7 { .gridColumn(); .columns(7); }
23
+ .span8 { .gridColumn(); .columns(8); }
24
+ .span9 { .gridColumn(); .columns(9); }
25
+ .span10 { .gridColumn(); .columns(10); }
26
+ .span11 { .gridColumn(); .columns(11); }
27
+ .span12 { .gridColumn(); .columns(12); }
28
+ .span13 { .gridColumn(); .columns(13); }
29
+ .span14 { .gridColumn(); .columns(14); }
30
+ .span15 { .gridColumn(); .columns(15); }
31
+ .span16 { .gridColumn(); .columns(16); }
32
+ .span17 { .gridColumn(); .columns(17); }
33
+ .span18 { .gridColumn(); .columns(18); }
34
+ .span19 { .gridColumn(); .columns(19); }
35
+ .span20 { .gridColumn(); .columns(20); }
36
+ .span21 { .gridColumn(); .columns(21); }
37
+ .span22 { .gridColumn(); .columns(22); }
38
+ .span23 { .gridColumn(); .columns(23); }
39
+ .span24 { .gridColumn(); .columns(24); }
40
+
41
+ .gridColumn() {
42
+ display: inline;
43
+ float: left;
44
+ .box-sizing();
45
+ }
46
+
47
+ .container {
48
+ padding: 0 @siteMargin;
49
+ }
50
+
51
+ @media only screen and (min-width: 960px) {
52
+ .container {
53
+ width: @siteWidth;
54
+ .center-block();
55
+ }
56
+ }
57
+
58
+ @media only screen and (max-width: 400px) {
59
+ .container {
60
+ width: auto;
61
+ }
62
+
63
+ .span1,
64
+ .span2,
65
+ .span3,
66
+ .span4,
67
+ .span5,
68
+ .span6,
69
+ .span7,
70
+ .span8,
71
+ .span9,
72
+ .span10,
73
+ .span11,
74
+ .span12,
75
+ .span13,
76
+ .span14,
77
+ .span15,
78
+ .span16,
79
+ .span17,
80
+ .span18,
81
+ .span19,
82
+ .span20,
83
+ .span21,
84
+ .span22,
85
+ .span23,
86
+ .span24 {
87
+ width: 100% !important;
88
+ }
89
+ }
@@ -0,0 +1,116 @@
1
+ // Required for scaffolding
2
+ @gridColumns: 16;
3
+ @gridColumnWidth: 40px;
4
+ @gridGutterWidth: 20px;
5
+ @gridMarginWidth: 20px;
6
+ @extraSpace: (@gridGutterWidth * 2); // For our grid calculations
7
+ @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
8
+
9
+ //
10
+ // Scaffoling
11
+
12
+ // Center-align a block level element
13
+ .center-blockcolumns() {
14
+ display: block;
15
+ margin-left: auto;
16
+ margin-right: auto;
17
+ }
18
+
19
+ // Grid System
20
+ .fixed-container() {
21
+ width: @siteWidth;
22
+ margin-left: auto;
23
+ margin-right: auto;
24
+ .clearfix();
25
+ }
26
+ .columns(@columnSpan: 1) {
27
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
28
+ }
29
+ .offset(@columnOffset: 1) {
30
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
31
+ }
32
+
33
+ // Necessary grid styles for every column to make them appear next to each other horizontally
34
+ .gridColumn() {
35
+ display: inline;
36
+ float: left;
37
+ margin-left: @gridGutterWidth;
38
+ }
39
+
40
+ // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
41
+ .makeColumn(@columnSpan: 1) {
42
+ .gridColumn();
43
+ .columns(@columnSpan);
44
+ }
45
+
46
+ // Container (centered, fixed-width layouts)
47
+ .container {
48
+ padding: 0 @gridMarginWidth;
49
+ .fixed-container();
50
+ }
51
+
52
+ .new-width(@columns, @removePixels){
53
+ width: ((@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1))) - @removePixels;
54
+ }
55
+
56
+ // Fluid layouts (left aligned, with sidebar, min- & max-width content)
57
+ .container-fluid {
58
+ position: relative;
59
+ min-width: 940px;
60
+ padding-left: 20px;
61
+ padding-right: 20px;
62
+ .clearfix();
63
+ > .sidebar {
64
+ float: left;
65
+ width: 220px;
66
+ }
67
+ // TODO in v2: rename this and .popover .content to be more specific
68
+ > .content {
69
+ margin-left: 240px;
70
+ }
71
+ }
72
+
73
+ .row {
74
+ .clearfix();
75
+ margin-left: -1 * @gridGutterWidth;
76
+ }
77
+
78
+ // Default columns
79
+ .span1,.s1 { .gridColumn(); .columns(1); }
80
+ .span2,.s2 { .gridColumn(); .columns(2); }
81
+ .span3,.s3 { .gridColumn(); .columns(3); }
82
+ .span4,.s4 { .gridColumn(); .columns(4); }
83
+ .span5,.s5 { .gridColumn(); .columns(5); }
84
+ .span6,.s6 { .gridColumn(); .columns(6); }
85
+ .span7,.s7 { .gridColumn(); .columns(7); }
86
+ .span8,.s8 { .gridColumn(); .columns(8); }
87
+ .span9,.s9 { .gridColumn(); .columns(9); }
88
+ .span10,.s10 { .gridColumn(); .columns(10); }
89
+ .span11,.s11 { .gridColumn(); .columns(11); }
90
+ .span12,.s12 { .gridColumn(); .columns(12); }
91
+ .span13,.s13 { .gridColumn(); .columns(13); }
92
+ .span14,.s14 { .gridColumn(); .columns(14); }
93
+ .span15,.s15 { .gridColumn(); .columns(15); }
94
+ .span16,.s16 { .gridColumn(); .columns(16); }
95
+ .span17,.s17 { .gridColumn(); .columns(17); }
96
+ .span18,.s18 { .gridColumn(); .columns(18); }
97
+ .span19,.s19 { .gridColumn(); .columns(19); }
98
+ .span20,.s20 { .gridColumn(); .columns(20); }
99
+ .span21,.s21 { .gridColumn(); .columns(21); }
100
+ .span22,.s22 { .gridColumn(); .columns(22); }
101
+ .span23,.s23 { .gridColumn(); .columns(23); }
102
+ .span24,.s24 { .gridColumn(); .columns(24); }
103
+
104
+ // Offset column options
105
+ .offset1, .o1 { .offset(1); }
106
+ .offset2, .o2 { .offset(2); }
107
+ .offset3, .o3 { .offset(3); }
108
+ .offset4, .o4 { .offset(4); }
109
+ .offset5, .o5 { .offset(5); }
110
+ .offset6, .o6 { .offset(6); }
111
+ .offset7, .o7 { .offset(7); }
112
+ .offset8, .o8 { .offset(8); }
113
+ .offset9, .o9 { .offset(9); }
114
+ .offset10, .o10 { .offset(10); }
115
+ .offset11, .o11 { .offset(11); }
116
+ .offset12, .o12 { .offset(12); }
@@ -0,0 +1,54 @@
1
+ //
2
+ // Tables
3
+
4
+ // BASELINE STYLES
5
+ // ---------------
6
+ table {
7
+ color: @typeColor;
8
+ width: 100%;
9
+ margin-bottom: @basespace;
10
+ padding: 0;
11
+ border-spacing: 0;
12
+ border-collapse: separate; // Done so we can round those corners!
13
+ *border-collapse: collapse; /* IE7, collapse table to remove spacing */
14
+ font-size: @basesize;
15
+ border: 1px solid #ddd;
16
+ th, td {
17
+ padding: 10px 10px 9px;
18
+ line-height: @baseline;
19
+ text-align: left;
20
+ }
21
+ th {
22
+ padding-top: 9px;
23
+ font-weight: bold;
24
+ vertical-align: middle;
25
+ border-bottom: 1px solid #ddd;
26
+ color: @headerColor;
27
+ }
28
+ td {
29
+ vertical-align: top;
30
+ }
31
+ th + th,
32
+ td + td {
33
+ border-left: 1px solid #ddd;
34
+ }
35
+ tr + tr td {
36
+ border-top: 1px solid #ddd;
37
+ }
38
+ }
39
+
40
+
41
+ // ZEBRA-STRIPING
42
+ // --------------
43
+
44
+ // Default zebra-stripe styles (alternating gray and transparent backgrounds)
45
+ .striped {
46
+ tbody {
47
+ tr:nth-child(odd) td {
48
+ background-color: #f9f9f9;
49
+ }
50
+ tr:hover td {
51
+ background-color: #f5f5f5;
52
+ }
53
+ }
54
+ }