kube-rails 0.3.1 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/Rakefile +14 -13
  4. data/lib/generators/kube/install/install_generator.rb +6 -7
  5. data/lib/generators/kube/themed/themed_generator.rb +28 -22
  6. data/lib/kube-rails.rb +8 -8
  7. data/lib/kube/rails/engine.rb +3 -3
  8. data/lib/kube/rails/kube.rb +2 -2
  9. data/lib/kube/rails/version.rb +1 -1
  10. data/vendor/kube/alerts.less +63 -0
  11. data/vendor/kube/blocks.less +31 -59
  12. data/vendor/kube/breadcrumbs.less +47 -0
  13. data/vendor/kube/buttons.less +138 -139
  14. data/vendor/kube/forms.less +283 -160
  15. data/vendor/kube/grid.less +143 -241
  16. data/vendor/kube/helpers.less +111 -49
  17. data/vendor/kube/kube.less +14 -5
  18. data/vendor/kube/labels.less +105 -0
  19. data/vendor/kube/messages.less +64 -0
  20. data/vendor/kube/mixins.less +238 -49
  21. data/vendor/kube/pagination.less +45 -0
  22. data/vendor/kube/reset.less +158 -0
  23. data/vendor/kube/tables.less +121 -33
  24. data/vendor/kube/typography.less +169 -201
  25. data/vendor/kube/variables.less +137 -55
  26. metadata +44 -26
  27. data/vendor/kube/navigation.less +0 -244
  28. data/vendor/kube/normalize.less +0 -225
  29. data/vendor/kube/prettyprint.less +0 -69
data/vendor/kube/grid.less CHANGED
@@ -1,262 +1,164 @@
1
1
  /* =Grid
2
2
  -----------------------------------------------------------------------------*/
3
- .units-container,
4
- .units-row {
5
- .clearfix;
6
- }
7
- .units-container { /* it's the trick to not collapse padding-top in the child element */
8
- padding-top: 1px;
9
- margin-top: -1px;
10
- }
11
- .units-row {
12
- margin-bottom: @baseLine / @em;
13
- }
3
+ row {
14
4
 
15
- .width-100, .unit-100 { width: 100%; }
16
- .width-90, .unit-90 { width: 90%; }
17
- .width-80, .unit-80 { width: 80%; }
18
- .width-75, .unit-75 { width: 75%; }
19
- .width-70, .unit-70 { width: 70%; }
20
- .width-66, .unit-66 { width: 66.6%; }
21
- .width-65, .unit-65 { width: 65%; }
22
- .width-60, .unit-60 { width: 60%; }
23
- .width-50, .unit-50 { width: 50%; }
24
- .width-40, .unit-40 { width: 40%; }
25
- .width-35, .unit-35 { width: 35%; }
26
- .width-33, .unit-33 { width: 33.3%; }
27
- .width-30, .unit-30 { width: 30%; }
28
- .width-25, .unit-25 { width: 25%; }
29
- .width-20, .unit-20 { width: 20%; }
30
- .width-10, .unit-10 { width: 10%; }
5
+ .row;
31
6
 
32
- input.width-100,
33
- input.unit-100 { width: 98.6%; }
34
- textarea.width-100,
35
- textarea.unit-100 { width: 98.8%; }
36
- select.width-100,
37
- select.unit-100 { width: 99.4%; }
7
+ margin-bottom: @base-line;
38
8
 
39
- .units-row .unit-90,
40
- .units-row .unit-80,
41
- .units-row .unit-75,
42
- .units-row .unit-70,
43
- .units-row .unit-66,
44
- .units-row .unit-65,
45
- .units-row .unit-60,
46
- .units-row .unit-50,
47
- .units-row .unit-40,
48
- .units-row .unit-35,
49
- .units-row .unit-33,
50
- .units-row .unit-30,
51
- .units-row .unit-25,
52
- .units-row .unit-20,
53
- .units-row .unit-10 {
54
- float: left;
55
- margin-left: @gridGutterWidth/(@gridWidth/100)*1%;
56
- &:first-child {
57
- margin-left: 0;
58
- }
59
- }
60
- .units-row .unit-90 { .columns(9, 10); }
61
- .units-row .unit-80 { .columns(4, 5); }
62
- .units-row .unit-75 { .columns(3, 4); }
63
- .units-row .unit-70 { .columns(7, 10); }
64
- .units-row .unit-66 { .columns(2, 3); }
65
- .units-row .unit-65 { .columns(2, 3); }
66
- .units-row .unit-60 { .columns(3, 5); }
67
- .units-row .unit-50 { .column(2); }
68
- .units-row .unit-40 { .columns(2, 5); }
69
- .units-row .unit-35 { .column(3); }
70
- .units-row .unit-33 { .column(3); }
71
- .units-row .unit-30 { .columns(3, 10); }
72
- .units-row .unit-25 { .column(4); }
73
- .units-row .unit-20 { .column(5); }
74
- .units-row .unit-10 { .columns(1, 10); }
9
+ & column {
75
10
 
76
- .unit-push-90,
77
- .unit-push-80,
78
- .unit-push-75,
79
- .unit-push-70,
80
- .unit-push-66,
81
- .unit-push-65,
82
- .unit-push-60,
83
- .unit-push-50,
84
- .unit-push-40,
85
- .unit-push-35,
86
- .unit-push-33,
87
- .unit-push-30,
88
- .unit-push-25,
89
- .unit-push-20,
90
- .unit-push-10 {
91
- position: relative;
92
- }
93
- .unit-push-90 { .columns-push(9, 10); }
94
- .unit-push-80 { .columns-push(4, 5); }
95
- .unit-push-75 { .columns-push(3, 4); }
96
- .unit-push-70 { .columns-push(7, 10); }
97
- .unit-push-66 { .columns-push(2, 3); }
98
- .unit-push-65 { .columns-push(2, 3); }
99
- .unit-push-60 { .columns-push(3, 5); }
100
- .unit-push-50 { .column-push(2); }
101
- .unit-push-40 { .columns-push(2, 5); }
102
- .unit-push-35 { .column-push(3); }
103
- .unit-push-33 { .column-push(3); }
104
- .unit-push-30 { .columns-push(3, 10); }
105
- .unit-push-25 { .column-push(4); }
106
- .unit-push-20 { .column-push(5); }
107
- .unit-push-10 { .columns-push(1, 10); }
11
+ margin: 0;
12
+ padding: 0;
13
+ margin-right: @grid-gutter;
108
14
 
109
- .units-row .unit-push-right {
110
- float: right;
111
- }
15
+ &:last-child {
16
+ margin-right: 0;
17
+ }
18
+ }
19
+ &[end] {
20
+ margin-bottom: 0;
21
+ }
22
+ &[split] {
23
+ column {
24
+ margin-right: 0;
25
+ }
26
+ }
27
+ &[centered] {
28
+ -webkit-justify-content: center;
29
+ -ms-flex-pack: center;
30
+ justify-content: center;
31
+ }
32
+ &[around] {
33
+ -webkit-justify-content: space-around;
34
+ -ms-flex-pack: distribute;
35
+ justify-content: space-around;
36
+ }
37
+ &[between] {
38
+ -webkit-justify-content: space-between;
39
+ -ms-flex-pack: justify;
40
+ justify-content: space-between;
41
+ }
112
42
 
113
- .centered,
114
- .unit-centered {
115
- float: none !important;
116
- margin: 0 auto !important;
117
43
  }
118
44
 
119
- .unit-padding {
120
- padding: @baseLine / @em;
121
- }
122
- .units-padding .unit-100,
123
- .units-padding .unit-90,
124
- .units-padding .unit-80,
125
- .units-padding .unit-75,
126
- .units-padding .unit-70,
127
- .units-padding .unit-66,
128
- .units-padding .unit-65,
129
- .units-padding .unit-60,
130
- .units-padding .unit-50,
131
- .units-padding .unit-40,
132
- .units-padding .unit-35,
133
- .units-padding .unit-33,
134
- .units-padding .unit-30,
135
- .units-padding .unit-25,
136
- .units-padding .unit-20,
137
- .units-padding .unit-10 {
138
- padding: @baseLine / @em;
45
+ column {
46
+ &[cols="1"] {
47
+ .col(1);
48
+ }
49
+ &[cols="2"] {
50
+ .col(2);
51
+ }
52
+ &[cols="3"] {
53
+ .col(3);
54
+ }
55
+ &[cols="4"] {
56
+ .col(4);
57
+ }
58
+ &[cols="5"] {
59
+ .col(5);
60
+ }
61
+ &[cols="6"] {
62
+ .col(6);
63
+ }
64
+ &[cols="7"] {
65
+ .col(7);
66
+ }
67
+ &[cols="8"] {
68
+ .col(8);
69
+ }
70
+ &[cols="9"] {
71
+ .col(9);
72
+ }
73
+ &[cols="10"] {
74
+ .col(10);
75
+ }
76
+ &[cols="11"] {
77
+ .col(11);
78
+ }
79
+ &[cols="12"] {
80
+ width: 100%;
81
+ }
82
+ &[offset="1"] {
83
+ .offset(1);
84
+ }
85
+ &[offset="2"] {
86
+ .offset(2);
87
+ }
88
+ &[offset="3"] {
89
+ .offset(3);
90
+ }
91
+ &[offset="4"] {
92
+ .offset(4);
93
+ }
94
+ &[offset="5"] {
95
+ .offset(5);
96
+ }
97
+ &[offset="6"] {
98
+ .offset(6);
99
+ }
100
+ &[offset="7"] {
101
+ .offset(7);
102
+ }
103
+ &[offset="8"] {
104
+ .offset(8);
105
+ }
106
+ &[offset="9"] {
107
+ .offset(9);
108
+ }
109
+ &[offset="10"] {
110
+ .offset(10);
111
+ }
112
+ &[offset="11"] {
113
+ .offset(11);
114
+ }
139
115
  }
140
116
 
141
- .units-split .unit-90,
142
- .units-split .unit-80,
143
- .units-split .unit-75,
144
- .units-split .unit-70,
145
- .units-split .unit-66,
146
- .units-split .unit-65,
147
- .units-split .unit-60,
148
- .units-split .unit-50,
149
- .units-split .unit-40,
150
- .units-split .unit-35,
151
- .units-split .unit-33,
152
- .units-split .unit-30,
153
- .units-split .unit-25,
154
- .units-split .unit-20,
155
- .units-split .unit-10 {
156
- margin-left: 0;
157
- }
158
- .units-split .unit-90 { width: 90%; }
159
- .units-split .unit-80 { width: 80%; }
160
- .units-split .unit-75 { width: 75%; }
161
- .units-split .unit-70 { width: 70%; }
162
- .units-split .unit-66 { width: 66.6%; }
163
- .units-split .unit-65 { width: 65%; }
164
- .units-split .unit-60 { width: 60%; }
165
- .units-split .unit-50 { width: 50%; }
166
- .units-split .unit-40 { width: 40%; }
167
- .units-split .unit-35 { width: 35%; }
168
- .units-split .unit-33 { width: 33.3%; }
169
- .units-split .unit-30 { width: 30%; }
170
- .units-split .unit-25 { width: 25%; }
171
- .units-split .unit-20 { width: 20%; }
172
- .units-split .unit-10 { width: 10%; }
117
+ .width-1 { .col(1); }
118
+ .width-2 { .col(2); }
119
+ .width-3 { .col(3);; }
120
+ .width-4 { .col(4); }
121
+ .width-5 { .col(5); }
122
+ .width-6 { .col(6); }
123
+ .width-7 { .col(7); }
124
+ .width-8 { .col(8); }
125
+ .width-9 { .col(9); }
126
+ .width-10 { .col(10); }
127
+ .width-11 { .col(11); }
128
+ .width-12 { width: 100%; }
173
129
 
174
130
 
175
- /* =Responsive
176
- -----------------------------------------------------------------------------*/
177
- @media only screen and (max-width: 767px) {
131
+ @media (max-width: @breakpoint-small) {
178
132
 
179
- .mobile-width-100 {
180
- width: 100%;
181
- }
133
+ row {
182
134
 
183
- .units-row .unit-90,
184
- .units-row .unit-80,
185
- .units-row .unit-75,
186
- .units-row .unit-70,
187
- .units-row .unit-66,
188
- .units-row .unit-65,
189
- .units-row .unit-60,
190
- .units-row .unit-50,
191
- .units-row .unit-40,
192
- .units-row .unit-35,
193
- .units-row .unit-33,
194
- .units-row .unit-30,
195
- .units-row .unit-25,
196
- .units-row .unit-20,
197
- .units-row .unit-10 {
198
- width: 100%;
199
- float: none;
200
- margin-left: 0;
201
- margin-bottom: @baseLine/@em;
202
- }
135
+ margin-bottom: 0;
203
136
 
204
- .unit-push-90,
205
- .unit-push-80,
206
- .unit-push-75,
207
- .unit-push-70,
208
- .unit-push-66,
209
- .unit-push-65,
210
- .unit-push-60,
211
- .unit-push-50,
212
- .unit-push-40,
213
- .unit-push-35,
214
- .unit-push-33,
215
- .unit-push-30,
216
- .unit-push-25,
217
- .unit-push-20,
218
- .unit-push-10 {
219
- left: 0;
220
- }
137
+ & [offset] {
138
+ margin-left: 0;
139
+ }
140
+ & column[cols] {
141
+ margin-right: 0;
142
+ width: 100%;
143
+ margin-bottom: @base-line;
144
+ }
221
145
 
222
- .units-row .unit-push-right {
223
- float: none;
224
- }
146
+ & row column:last-child {
147
+ margin-bottom: 0;
148
+ }
225
149
 
226
- .units-mobile-50 .unit-90,
227
- .units-mobile-50 .unit-80,
228
- .units-mobile-50 .unit-75,
229
- .units-mobile-50 .unit-70,
230
- .units-mobile-50 .unit-66,
231
- .units-mobile-50 .unit-65,
232
- .units-mobile-50 .unit-60,
233
- .units-mobile-50 .unit-40,
234
- .units-mobile-50 .unit-30,
235
- .units-mobile-50 .unit-35,
236
- .units-mobile-50 .unit-33,
237
- .units-mobile-50 .unit-25,
238
- .units-mobile-50 .unit-20,
239
- .units-mobile-50 .unit-10 {
240
- float: left;
241
- margin-left: @gridGutterWidth/(@gridWidth/100)*1%;
242
- .column(2);
243
150
  }
244
- .units-mobile-50 .unit-90:first-child,
245
- .units-mobile-50 .unit-80:first-child,
246
- .units-mobile-50 .unit-75:first-child,
247
- .units-mobile-50 .unit-70:first-child,
248
- .units-mobile-50 .unit-66:first-child,
249
- .units-mobile-50 .unit-65:first-child,
250
- .units-mobile-50 .unit-60:first-child,
251
- .units-mobile-50 .unit-40:first-child,
252
- .units-mobile-50 .unit-35:first-child,
253
- .units-mobile-50 .unit-30:first-child,
254
- .units-mobile-50 .unit-33:first-child,
255
- .units-mobile-50 .unit-25:first-child,
256
- .units-mobile-50 .unit-20:first-child,
257
- .units-mobile-50 .unit-10:first-child {
258
- margin-left: 0;
259
- }
260
-
261
151
 
262
- }
152
+ .width-1,
153
+ .width-2,
154
+ .width-3,
155
+ .width-4,
156
+ .width-5,
157
+ .width-6,
158
+ .width-7,
159
+ .width-8,
160
+ .width-9,
161
+ .width-10,
162
+ .width-11,
163
+ .width-12 { width: 100%; }
164
+ }
data/vendor/kube/helpers.less CHANGED
@@ -3,34 +3,67 @@
3
3
  .group {
4
4
  .clearfix;
5
5
  }
6
+ .hide {
7
+ display: none;
8
+ }
9
+ .visible {
10
+ visibility: visible;
11
+ }
12
+ .hidden {
13
+ visibility: hidden;
14
+ }
15
+ .centered {
16
+ margin: auto;
17
+ }
18
+ .highlight {
19
+ background-color: @color-highlighted-background;
20
+ }
21
+ .big {
22
+ font-size: @font-size-big;
23
+ }
6
24
  .small {
7
- font-size: @smallFontSize;
25
+ font-size: @font-size-small;
26
+ }
27
+ .smaller {
28
+ font-size: @font-size-smaller;
29
+ }
30
+ p,
31
+ ul,
32
+ ol,
33
+ dl,
34
+ blockquote,
35
+ hr,
36
+ pre,
37
+ table,
38
+ form,
39
+ fieldset,
40
+ figure,
41
+ address {
42
+ &.small {
43
+ line-height: @base-line-small;
44
+ }
45
+ &.smaller {
46
+ line-height: @base-line-smaller;
47
+ }
48
+ &.big {
49
+ line-height: @base-line-big;
50
+ }
8
51
  }
9
52
  .nowrap,
10
53
  .nowrap td {
11
54
  white-space: nowrap;
12
55
  }
13
- .req,
14
- .required {
15
- font-weight: normal;
16
- color: @colorRed;
17
- }
18
- .color-gray {
19
- color: #777;
20
- }
21
- .color-gray-light {
22
- color: #999;
23
- }
24
- .color-black {
25
- color: #000;
56
+ .req {
57
+ font-weight: bold;
58
+ color: @color-error;
59
+ font-size: 1.1em;
60
+ text-transform: none;
26
61
  }
27
- .color-red,
28
62
  .error {
29
- color: @colorRed;
63
+ color: @color-error;
30
64
  }
31
- .color-green,
32
65
  .success {
33
- color: @colorGreen;
66
+ color: @color-success;
34
67
  }
35
68
  .text-centered {
36
69
  text-align: center;
@@ -38,55 +71,84 @@
38
71
  .text-right {
39
72
  text-align: right;
40
73
  }
74
+ .text-left {
75
+ text-align: left !important;
76
+ }
77
+ .start {
78
+ margin-top: 0 !important;
79
+ }
41
80
  .last {
42
81
  margin-right: 0 !important;
43
82
  }
44
- .pause {
45
- margin-bottom: @baseLineHeight/2 + 0em !important;
46
- }
47
83
  .end {
48
84
  margin-bottom: 0 !important;
49
85
  }
50
86
  .normal {
51
- font-weight: normal;
87
+ font-weight: normal !important;
88
+ }
89
+ .light {
90
+ font-weight: 300 !important;
91
+ }
92
+ .thin {
93
+ font-weight: 100 !important;
52
94
  }
53
95
  .bold {
54
- font-weight: bold;
96
+ font-weight: bold !important;
55
97
  }
56
98
  .italic {
57
- font-style: italic;
99
+ font-style: italic !important;
58
100
  }
59
- .left {
60
- float: left;
101
+ .upper {
102
+ text-transform: uppercase;
61
103
  }
62
- .right {
63
- float: right;
104
+ .list-flat {
105
+ margin-left: 0;
106
+ list-style: none;
107
+ }
108
+ .muted {
109
+ color: rgba(0, 0, 0, .5);
110
+ }
111
+ .soft-muted {
112
+ color: rgba(0, 0, 0, .7);
113
+ }
114
+ .color-black {
115
+ color: rgba(0, 0, 0, 1);
116
+ }
117
+ a.color-black:hover {
118
+ color: rgba(0, 0, 0, .6);
119
+ }
120
+ .color-white {
121
+ color: rgba(255, 255, 255, 1);
122
+ }
123
+ a.color-white:hover {
124
+ color: rgba(255, 255, 255, .6);
64
125
  }
65
126
 
66
-
67
- /* Responsive embedded objects */
68
- .video-wrapper {
69
- height: 0;
70
- padding-bottom: 56.25%; // ratio 16:9
71
- position: relative;
72
- margin-bottom: @baseLineInEms;
73
- & iframe,
74
- & object,
75
- & embed {
76
- position: absolute;
77
- top: 0;
78
- left: 0;
79
- width: 100%;
80
- height: 100%;
127
+ // Responsive Utilities
128
+ @media (max-width: @breakpoint-small) {
129
+ .hide-for-small {
130
+ display: none;
81
131
  }
82
132
  }
83
-
84
-
85
- /* =Responsive
86
- -----------------------------------------------------------------------------*/
87
- @media only screen and (max-width: 767px) {
88
- .left,
133
+ @media (min-width: @breakpoint-small) {
134
+ .show-for-small {
135
+ display: none;
136
+ }
137
+ .left {
138
+ float: none;
139
+ float: left;
140
+ }
89
141
  .right {
90
142
  float: none;
143
+ float: right;
144
+ }
145
+ }
146
+
147
+ @media print {
148
+ .hide-for-print {
149
+ display: none !important;
150
+ }
151
+ .show-for-print {
152
+ display: block !important;
91
153
  }
92
154
  }