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/kube.less CHANGED
@@ -1,20 +1,29 @@
1
+ /*
2
+ Kube Framework 5
3
+ */
4
+
1
5
  @import "mixins.less";
2
6
  @import "variables.less";
3
7
 
4
- @import "normalize.less";
8
+ // Base
9
+ @import "reset.less";
5
10
  @import "typography.less";
6
11
 
7
12
  @import "grid.less";
8
13
  @import "blocks.less";
9
14
 
10
- @import "navigation.less";
11
-
12
15
  @import "tables.less";
13
16
  @import "forms.less";
14
17
 
15
18
  @import "buttons.less";
19
+ @import "labels.less";
16
20
 
17
- @import "helpers.less";
18
- @import "prettyprint.less";
21
+ @import "messages.less";
22
+ @import "alerts.less";
19
23
 
24
+ // Navigation
25
+ @import "breadcrumbs.less";
26
+ @import "pagination.less";
20
27
 
28
+ // Helpers
29
+ @import "helpers.less";
data/vendor/kube/labels.less ADDED
@@ -0,0 +1,105 @@
1
+ /* =Labels
2
+ -----------------------------------------------------------------------------*/
3
+
4
+ @tag-padding-y: .2rem;
5
+ @tag-padding-x: .7rem;
6
+
7
+ .label,
8
+ .badge {
9
+ font-size: @font-size-label;
10
+ font-weight: normal;
11
+ display: inline;
12
+ line-height: 1;
13
+ color: #000;
14
+ text-align: center;
15
+ text-transform: uppercase;
16
+ text-decoration: none;
17
+ border-radius: @global-radius;
18
+ padding: @tag-padding-y @tag-padding-x;
19
+ position: relative;
20
+ & a {
21
+ color: #000;
22
+ text-decoration: none;
23
+ &:hover {
24
+ .transition;
25
+ color: rgba(0, 0, 0, .6);
26
+ }
27
+ }
28
+ &:empty {
29
+ display: none;
30
+ }
31
+ &[bold] {
32
+ font-weight: bold;
33
+ }
34
+ &[outline] {
35
+ background: none;
36
+ color: rgba(0, 0, 0, .7);
37
+ border: 1px solid rgba(0, 0, 0, .5);
38
+ padding: @tag-padding-y - .1rem @tag-padding-x - .1rem;
39
+ &[bold] {
40
+ border-width: 2px;
41
+ padding: @tag-padding-y - .2rem @tag-padding-x - .2rem;
42
+ }
43
+ }
44
+ &.label-default,
45
+ &.badge-default {
46
+ .make-label(#e4e4e4, #000);
47
+ }
48
+ &.label-primary,
49
+ &.badge-primary {
50
+ .make-label(@color-primary, #fff);
51
+ }
52
+ &.label-error,
53
+ &.badge-error {
54
+ .make-label(@color-error, #fff);
55
+ }
56
+ &.label-success,
57
+ &.badge-success {
58
+ .make-label(@color-success, #fff);
59
+ }
60
+ &.label-warning,
61
+ &.badge-warning {
62
+ .make-label(@color-warning, #000);
63
+ }
64
+ &.label-black,
65
+ &.badge-black {
66
+ .make-label(#000, #fff);
67
+ }
68
+ &.label-white,
69
+ &.badge-white {
70
+ .make-label(#fff, #000);
71
+ }
72
+ }
73
+ .badge {
74
+ border-radius: 30px;
75
+ min-width: 17px;
76
+ }
77
+
78
+ .title,
79
+ .large,
80
+ h1,
81
+ h2,
82
+ h3,
83
+ h4,
84
+ h5,
85
+ h6 {
86
+ & .label,
87
+ & .badge {
88
+ vertical-align: middle;
89
+ }
90
+ }
91
+ h3,
92
+ h4,
93
+ h5 {
94
+ & .label,
95
+ & .badge {
96
+ top: -1px;
97
+ }
98
+ }
99
+ h6 {
100
+ & .label,
101
+ & .badge {
102
+ top: -2px;
103
+ }
104
+ }
105
+
data/vendor/kube/messages.less ADDED
@@ -0,0 +1,64 @@
1
+ /* =Messages
2
+ -----------------------------------------------------------------------------*/
3
+ .message {
4
+
5
+ border-radius: @global-radius;
6
+ display: none;
7
+ position: fixed;
8
+ z-index: 2000;
9
+ top: @margin-half;
10
+ right: @margin-half;
11
+ max-width: 360px;
12
+ line-height: 1.45;
13
+ font-size: 94%;
14
+ padding: @base-line (@base-line * 1.5);
15
+ color: rgba(0, 0, 0, .9);
16
+ &.message-line {
17
+ top: 0;
18
+ right: 0;
19
+ left: 0;
20
+ width: 100%;
21
+ padding-right: 200px;
22
+ max-width: none;
23
+ border-radius: 0;
24
+ & footer {
25
+ position: absolute;
26
+ top: 0;
27
+ right: 2rem;
28
+ }
29
+ }
30
+ & ul,
31
+ & ol {
32
+ margin-top: 8px;
33
+ margin-bottom: 0;
34
+ }
35
+ & footer {
36
+ margin-top: 8px;
37
+ }
38
+ & a {
39
+ font-weight: bold;
40
+ }
41
+ &.message-primary,
42
+ &.message-error,
43
+ &.message-success {
44
+ color: rgba(255, 255, 255, .9);
45
+ & a {
46
+ color: rgba(255, 255, 255, .9);
47
+ &:hover {
48
+ color: rgba(255, 255, 255, .7);
49
+ }
50
+ }
51
+ }
52
+ &.message-primary {
53
+ background: @color-primary;
54
+ }
55
+ &.message-error {
56
+ background: @color-error;
57
+ }
58
+ &.message-warning {
59
+ background: @color-warning;
60
+ }
61
+ &.message-success {
62
+ background: @color-success;
63
+ }
64
+ }
data/vendor/kube/mixins.less CHANGED
@@ -1,41 +1,88 @@
1
- .clearfix() {
2
- &:after {
3
- content: "";
4
- display: table;
5
- clear: both;
1
+ .font(@font) {
2
+ body,
3
+ button,
4
+ select,
5
+ textarea,
6
+ input,
7
+ .btn {
8
+ font-family: @font;
6
9
  }
10
+ }
11
+ .clearfix() {
12
+ &:after {
13
+ content: "";
14
+ display: block;
15
+ clear: both;
16
+ }
17
+ }
18
+ .color-light(@color, @light: 5) {
7
19
 
20
+ @h: hue(@color);
21
+ @s: saturation(@color);
22
+ @l: lightness(@color) + @light;
23
+
24
+ color: hsl(@h,@s,@l);
8
25
  }
9
- .btn-color(@color, @darken: 10%) {
10
- background: @color;
11
- &:hover {
12
- background: darken(@color, @darken);
13
- }
26
+ .background-color-light(@color, @light: 5) {
27
+
28
+ @h: hue(@color);
29
+ @s: saturation(@color);
30
+ @l: lightness(@color) + @light;
31
+
32
+ background-color: hsl(@h,@s,@l);
33
+ }
34
+ .border-color-light(@color, @light: 5) {
35
+
36
+ @h: hue(@color);
37
+ @s: saturation(@color);
38
+ @l: lightness(@color) + @light;
39
+
40
+ border-color: hsl(@h,@s,@l);
41
+ }
42
+ .color-dark(@color, @dark: 5) {
43
+
44
+ @h: hue(@color);
45
+ @s: saturation(@color);
46
+ @l: lightness(@color) - @dark;
47
+
48
+ color: hsl(@h,@s,@l);
14
49
  }
15
- .opacity(@opacity: 100) {
16
- filter: e(%("alpha(opacity=%d)", @opacity));
17
- -moz-opacity: @opacity / 100;
18
- opacity: @opacity / 100;
50
+ .background-color-dark(@color, @dark: 5) {
51
+
52
+ @h: hue(@color);
53
+ @s: saturation(@color);
54
+ @l: lightness(@color) - @dark;
55
+
56
+ background-color: hsl(@h,@s,@l);
19
57
  }
20
- .selection(@r, @g, @b) {
21
- ::selection { background: rgb(@r, @g, @b); }
22
- ::-moz-selection { background: rgb(@r, @g, @b); }
23
- img::selection { background: transparent; }
24
- img::-moz-selection { background: transparent; }
58
+ .border-color-dark(@color, @dark: 5) {
59
+
60
+ @h: hue(@color);
61
+ @s: saturation(@color);
62
+ @l: lightness(@color) - @dark;
63
+
64
+ border-color: hsl(@h,@s,@l);
25
65
  }
66
+
26
67
  .box-sizing(@box-model) {
27
68
  -webkit-box-sizing: @box-model;
28
69
  -moz-box-sizing: @box-model;
29
70
  box-sizing: @box-model;
30
71
  }
31
- .vertical-align {
32
- position: relative;
33
- top: 50%;
34
- -webkit-transform: translateY(-50%);
35
- -ms-transform: translateY(-50%);
36
- transform: translateY(-50%);
72
+ .vertical-align() {
73
+ display: -webkit-box;
74
+ display: -moz-box;
75
+ display: -ms-flexbox;
76
+ display: -webkit-flex;
77
+ display: flex;
78
+ -webkit-align-items: center;
79
+ -ms-align-items: center;
80
+ align-items: center;
81
+ -webkit-justify-content: center;
82
+ -ms-justify-content: center;
83
+ justify-content: center;
37
84
  }
38
- .gradient(@start: #555, @end: #333) {
85
+ .gradient-vertical(@start: #555, @end: #333) {
39
86
  background-color: mix(@start, @end, 60%);
40
87
  background-image: -moz-linear-gradient(top, @start, @end); // FF 3.6+
41
88
  background-image: -ms-linear-gradient(top, @start, @end); // IE10
@@ -43,7 +90,41 @@
43
90
  background-image: -webkit-linear-gradient(top, @start, @end); // Safari 5.1+, Chrome 10+
44
91
  background-image: -o-linear-gradient(top, @start, @end); // Opera 11.10
45
92
  background-image: linear-gradient(top, @start, @end); // The standard
46
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start,@end)); // IE9 and down
93
+ }
94
+ .gradient-horizontal(@color1: #555, @color2: #333) {
95
+ background: @color1;
96
+ background: -moz-linear-gradient(left, @color1 0%, @color2 100%);
97
+ background: -webkit-gradient(linear, left top, right top, color-stop(0%,@color1), color-stop(100%,@color2));
98
+ background: -webkit-linear-gradient(left, @color1 0%,@color2 100%);
99
+ background: -o-linear-gradient(left, @color1 0%,@color2 100%);
100
+ background: -ms-linear-gradient(left, @color1 0%,@color2 100%);
101
+ background: linear-gradient(left, @color1 0%,@color2 100%);
102
+ }
103
+ .gradient-vertical-to-opacity(@color, @start-opacity: 1) {
104
+
105
+ @rgba-start: rgba(red(@color), green(@color), blue(@color), 0);
106
+ @rgba-end: rgba(red(@color), green(@color), blue(@color), @start-opacity);
107
+
108
+ background: -moz-linear-gradient(top, @rgba-start 0%, @rgba-end 100%);
109
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@rgba-start), color-stop(100%,@rgba-end));
110
+ background: -webkit-linear-gradient(top, @rgba-start 0%, @rgba-end 100%);
111
+ background: -o-linear-gradient(top, @rgba-start 0%, @rgba-end 100%);
112
+ background: -ms-linear-gradient(top, @rgba-start 0%, @rgba-end 100%);
113
+ background: linear-gradient(to bottom, @rgba-start 0%, @rgba-end 100%);
114
+ }
115
+ .gradient-horizontal-to-opacity(@color, @start-opacity: 1) {
116
+
117
+ @rgba-start: rgba(red(@color), green(@color), blue(@color), @start-opacity);
118
+ @rgba-end: rgba(red(@color), green(@color), blue(@color), 0);
119
+
120
+ background: -moz-linear-gradient(left, @rgba-start 0%, @rgba-end 100%);
121
+ background: -webkit-gradient(linear, left top, right top, color-stop(0%,@rgba-start), color-stop(100%,@rgba-end));
122
+ background: -webkit-linear-gradient(left, @rgba-start 0%,@rgba-end 100%);
123
+ background: -o-linear-gradient(left, @rgba-start 0%,@rgba-end 100%);
124
+ background: -ms-linear-gradient(left, @rgba-start 0%,@rgba-end 100%);
125
+ background: linear-gradient(to right, @rgba-start 0%,@rgba-end 100%);
126
+
127
+
47
128
  }
48
129
  .border-top-radius(@radius) {
49
130
  border-top-right-radius: @radius;
@@ -61,15 +142,9 @@
61
142
  border-bottom-left-radius: @radius;
62
143
  border-top-left-radius: @radius;
63
144
  }
64
- .bordered(@top-color: #eee, @right-color: #eee, @bottom-color: #eee, @left-color: #eee) {
65
- border-top: 1px solid @top-color;
66
- border-right: 1px solid @right-color;
67
- border-bottom: 1px solid @bottom-color;
68
- border-left: 1px solid @left-color;
69
- }
70
145
  .retina-image(@path, @w: auto, @h: auto) {
71
146
  background-image: url(@path);
72
- @at2x_path: ~'@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })';
147
+ @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;
73
148
 
74
149
  @media
75
150
  only screen and (-webkit-min-device-pixel-ratio: 2),
@@ -92,6 +167,13 @@
92
167
  -ms-filter: blur(@radius);
93
168
  filter: blur(@radius);
94
169
  }
170
+ .rotate(@deg) {
171
+ -webkit-transform: rotate(@deg);
172
+ -moz-transform: rotate(@deg);
173
+ -ms-transform: rotate(@deg);
174
+ -o-transform: rotate(@deg);
175
+ transform: rotate(@deg);
176
+ }
95
177
  .arrow-top(@color: #fff, @size: 5px, @left: 5px) {
96
178
  &:after {
97
179
  bottom: 100%;
@@ -151,35 +233,142 @@
151
233
  .close(@r: 0, @g: 0, @b: 0) {
152
234
  padding: 4px 6px;
153
235
  line-height: 1;
154
- font-size: 18px;
236
+ font-size: 20px;
155
237
  cursor: pointer;
156
238
  color: rgba(@r, @g, @b, 1);
157
239
  text-decoration: none;
158
- .opacity(50);
240
+ opacity: 0.5;
241
+ border: none;
159
242
  &:before {
160
243
  content: '\00D7';
161
244
  }
162
245
  &:hover {
163
- .opacity(100);
246
+ opacity: 1;
164
247
  }
165
248
  }
166
- // Grid
167
- .block(@num) {
168
- width: ((@gridWidth - (@gridGutterWidth * @num)) / @num / (@gridWidth / 100)) * 1%;
249
+ .striped(@color: rgba(255, 255, 255, .2); @angle: 45deg) {
250
+ background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
251
+ background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
252
+ background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
169
253
  }
170
-
171
- .column(@num) {
172
- width: ((@gridWidth - (@gridGutterWidth * (@num - 1))) / @num / (@gridWidth / 100)) * 1%;
254
+ .animation(@animation) {
255
+ -webkit-animation: @animation;
256
+ -o-animation: @animation;
257
+ animation: @animation;
173
258
  }
174
259
 
175
- .columns(@factor, @num) {
176
- width: (((@gridWidth - (@gridGutterWidth * (@num - 1))) / @num / (@gridWidth / 100)) * @factor) + ((@gridGutterWidth / (@gridWidth / 100)) * (@factor - 1)) * 1%;
260
+ // Grid
261
+ .row() {
262
+ display: -webkit-box;
263
+ display: -moz-box;
264
+ display: -ms-flexbox;
265
+ display: -webkit-flex;
266
+ display: flex;
267
+ -webkit-flex-wrap: nowrap;
268
+ -ms-flex-wrap: nowrap;
269
+ flex-wrap: nowrap;
270
+ -webkit-flex-basis: 100%;
271
+ -ms-flex-basis: 100%;
272
+ flex-basis: 100%;
273
+
274
+ @media (max-width: @breakpoint-small) {
275
+ -webkit-flex-direction: column;
276
+ -ms-flex-direction: column;
277
+ flex-direction: column;
278
+
279
+ }
280
+ }
281
+ .offset(@num) {
282
+ margin-left: calc((100%/@grid-columns*@num) + ((@grid-gutter/10)+0em)/2);
177
283
  }
284
+ .col(@num) {
285
+ width: (100%/@grid-columns*@num) * 1%;
286
+ }
287
+ .col-fixed(@width) {
288
+ -webkit-flex: 0 0 @width;
289
+ -ms-flex: 0 0 @width;
290
+ flex: 0 0 @width;
291
+ @media (max-width: @breakpoint-small) {
292
+ -webkit-flex: 0;
293
+ -ms-flex: 0;
294
+ flex: 0;
295
+ width: 100%;
296
+ }
297
+ }
298
+ .media-grid(@num) {
299
+ -webkit-column-count: @num;
300
+ -moz-column-count: @num;
301
+ column-count: @num;
302
+ -webkit-column-gap: @grid-gutter;
303
+ -moz-column-gap: @grid-gutter;
304
+ column-gap: @grid-gutter;
305
+
306
+ & > div {
307
+ display: inline-block;
308
+ width: 100%;
309
+ }
178
310
 
179
- .column-push(@num) {
180
- left: (((@gridWidth - (@gridGutterWidth * (@num - 1))) / @num / (@gridWidth / 100)) + @gridGutterWidth/(@gridWidth/100)) * 1%;
311
+ @media (max-width: @breakpoint-small) {
312
+ -webkit-column-count: 1;
313
+ -moz-column-count: 1;
314
+ column-count: 1;
315
+ }
181
316
  }
182
317
 
183
- .columns-push(@factor, @num) {
184
- left: ((((@gridWidth - (@gridGutterWidth * (@num - 1))) / @num / (@gridWidth / 100)) * @factor) + ((@gridGutterWidth / (@gridWidth / 100)) * (@factor - 1)) + @gridGutterWidth/(@gridWidth/100)) * 1%;
318
+ // Label
319
+ .make-label(@back, @text) {
320
+ background: @back;
321
+ color: @text;
322
+ &[outline] {
323
+ background: none;
324
+ color: @back;
325
+ border-color: @back;
326
+ }
327
+ & a {
328
+ color: @text;
329
+ text-decoration: none;
330
+ &:hover {
331
+ .transition;
332
+ color: rgba(red(@text), green(@text), blue(@text), .6);
333
+ }
334
+ }
185
335
  }
336
+
337
+ // Btn
338
+ .make-btn(@main-color, @hover-light: 5) {
339
+
340
+ color: rgba(255, 255, 255, .9);
341
+ background: @main-color;
342
+
343
+ &:hover {
344
+ color: rgba(255, 255, 255, .7);
345
+ .background-color-light(@main-color, @hover-light);
346
+ }
347
+ &[disabled] {
348
+
349
+ &:hover {
350
+ color: rgba(255, 255, 255, .9);
351
+ background: @main-color;
352
+ }
353
+ }
354
+ &[outline] {
355
+ background: none;
356
+ color: @main-color;
357
+ border-color: @main-color;
358
+
359
+ &:hover {
360
+ background: @main-color;
361
+ border-color: @main-color;
362
+ color: rgba(255, 255, 255, .9);
363
+ }
364
+ &[disabled] {
365
+
366
+ &:hover {
367
+ background: none;
368
+ border-color: @main-color;
369
+ color: @main-color;
370
+ }
371
+ }
372
+ }
373
+
374
+ }