kube-rails 0.0.5 → 0.0.6

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.
@@ -1,150 +1,233 @@
1
-
2
1
  /* =Grid
3
2
  -----------------------------------------------------------------------------*/
4
- .row {
5
- margin-bottom: @baseLine/@em;
3
+ .units-container,
4
+ .units-row-end,
5
+ .units-row {
6
+ .clearfixing;
6
7
  }
7
- .container.row {
8
- margin-bottom: 0;
8
+ .units-container { /* it's the trick to not collapse padding-top in the child element */
9
+ padding-top: 1px;
10
+ margin-top: -1px;
9
11
  }
10
- .container:after,
11
- .row:after {
12
- content: ".";
13
- display: block;
14
- height: 0;
15
- clear: both;
16
- visibility: hidden;
12
+ .units-container,
13
+ .units-row-end,
14
+ .units-row {
15
+ .box-sizing(border-box);
16
+ }
17
+ .units-row {
18
+ margin-bottom: 1.5em;
19
+ }
20
+ .units-row-end {
21
+ margin-bottom: 0;
17
22
  }
18
23
 
19
- .half,
20
- .third,
21
- .quarter,
22
- .fifth,
23
- .sixth,
24
- .twothird,
25
- .twofifth,
26
- .threefifth,
27
- .fourfifth,
28
- .fivesixth,
29
- .threequarter {
24
+ .width-100, .unit-100 { width: 100%; }
25
+ .width-80, .unit-80 { width: 80%; }
26
+ .width-75, .unit-75 { width: 75%; }
27
+ .width-70, .unit-70 { width: 70%; }
28
+ .width-66, .unit-66 { width: 66.6%; }
29
+ .width-60, .unit-60 { width: 60%; }
30
+ .width-50, .unit-50 { width: 50%; }
31
+ .width-40, .unit-40 { width: 40%; }
32
+ .width-33, .unit-33 { width: 33.3%; }
33
+ .width-30, .unit-30 { width: 30%; }
34
+ .width-25, .unit-25 { width: 25%; }
35
+ .width-20, .unit-20 { width: 20%; }
36
+
37
+ input.width-100,
38
+ input.unit-100 { width: 98.6%; }
39
+ textarea.width-100,
40
+ textarea.unit-100 { width: 98.8%; }
41
+ select.width-100,
42
+ select.unit-100 { width: 99.4%; }
43
+
44
+ .width-100,
45
+ .width-80,
46
+ .width-75,
47
+ .width-70,
48
+ .width-66,
49
+ .width-60,
50
+ .width-50,
51
+ .width-40,
52
+ .width-33,
53
+ .width-30,
54
+ .width-25,
55
+ .width-20,
56
+ .units-row .unit-100,
57
+ .units-row .unit-80,
58
+ .units-row .unit-75,
59
+ .units-row .unit-70,
60
+ .units-row .unit-66,
61
+ .units-row .unit-60,
62
+ .units-row .unit-50,
63
+ .units-row .unit-40,
64
+ .units-row .unit-33,
65
+ .units-row .unit-30,
66
+ .units-row .unit-25,
67
+ .units-row .unit-20,
68
+ .units-row-end .unit-100,
69
+ .units-row-end .unit-80,
70
+ .units-row-end .unit-75,
71
+ .units-row-end .unit-70,
72
+ .units-row-end .unit-66,
73
+ .units-row-end .unit-60,
74
+ .units-row-end .unit-50,
75
+ .units-row-end .unit-40,
76
+ .units-row-end .unit-33,
77
+ .units-row-end .unit-30,
78
+ .units-row-end .unit-25,
79
+ .units-row-end .unit-20 {
80
+ .box-sizing(border-box);
81
+ }
82
+ .units-row .unit-80,
83
+ .units-row .unit-75,
84
+ .units-row .unit-70,
85
+ .units-row .unit-66,
86
+ .units-row .unit-60,
87
+ .units-row .unit-50,
88
+ .units-row .unit-40,
89
+ .units-row .unit-33,
90
+ .units-row .unit-30,
91
+ .units-row .unit-25,
92
+ .units-row .unit-20,
93
+ .units-row-end .unit-100,
94
+ .units-row-end .unit-80,
95
+ .units-row-end .unit-75,
96
+ .units-row-end .unit-70,
97
+ .units-row-end .unit-66,
98
+ .units-row-end .unit-60,
99
+ .units-row-end .unit-50,
100
+ .units-row-end .unit-40,
101
+ .units-row-end .unit-33,
102
+ .units-row-end .unit-30,
103
+ .units-row-end .unit-25,
104
+ .units-row-end .unit-20 {
105
+ float: left;
30
106
  margin-left: @gridGutterWidth/(@gridWidth/100)*1%;
31
- float: left;
32
- min-height: 1px;
33
107
  }
34
- .half:first-child,
35
- .third:first-child,
36
- .quarter:first-child,
37
- .fifth:first-child,
38
- .sixth:first-child,
39
- .twothird:first-child,
40
- .twofifth:first-child,
41
- .threefifth:first-child,
42
- .fourfifth:first-child,
43
- .fivesixth:first-child,
44
- .threequarter:first-child {
108
+ .units-row .unit-80:first-child,
109
+ .units-row .unit-75:first-child,
110
+ .units-row .unit-70:first-child,
111
+ .units-row .unit-66:first-child,
112
+ .units-row .unit-60:first-child,
113
+ .units-row .unit-50:first-child,
114
+ .units-row .unit-40:first-child,
115
+ .units-row .unit-33:first-child,
116
+ .units-row .unit-30:first-child,
117
+ .units-row .unit-25:first-child,
118
+ .units-row .unit-20:first-child,
119
+ .units-row-end .unit-100:first-child,
120
+ .units-row-end .unit-80:first-child,
121
+ .units-row-end .unit-75:first-child,
122
+ .units-row-end .unit-70:first-child,
123
+ .units-row-end .unit-66:first-child,
124
+ .units-row-end .unit-60:first-child,
125
+ .units-row-end .unit-50:first-child,
126
+ .units-row-end .unit-40:first-child,
127
+ .units-row-end .unit-33:first-child,
128
+ .units-row-end .unit-30:first-child,
129
+ .units-row-end .unit-25:first-child,
130
+ .units-row-end .unit-20:first-child {
45
131
  margin-left: 0;
46
132
  }
47
-
48
- .sixth { .column(6); }
49
- .fifth { .column(5); }
50
- .quarter { .column(4); }
51
- .third { .column(3); }
52
- .half { .column(2); }
53
-
54
- .threequarter { .columns(3, 4); }
55
- .twothird { .columns(2, 3); }
56
- .twofifth { .columns(2, 5); }
57
- .threefifth { .columns(3, 5); }
58
- .fourfifth { .columns(4, 5); }
59
- .fivesixth { .columns(5, 6); }
60
-
61
-
62
- .push-half,
63
- .push-threequarter,
64
- .push-quarter,
65
- .push-third,
66
- .push-twothird,
67
- .push-fifth,
68
- .push-twofifth,
69
- .push-threefifth,
70
- .push-fourfifth,
71
- .push-sixth,
72
- .push-fivesixth {
133
+ .units-row .unit-80,
134
+ .units-row-end .unit-80 { .columns(4, 5); }
135
+ .units-row .unit-75,
136
+ .units-row-end .unit-75 { .columns(3, 4); }
137
+ .units-row .unit-70,
138
+ .units-row-end .unit-70 { .columns(7, 10); }
139
+ .units-row .unit-66,
140
+ .units-row-end .unit-66 { .columns(2, 3); }
141
+ .units-row .unit-60,
142
+ .units-row-end .unit-60 { .columns(3, 5); }
143
+ .units-row .unit-50,
144
+ .units-row-end .unit-50 { .column(2); }
145
+ .units-row .unit-40,
146
+ .units-row-end .unit-40 { .columns(2, 5); }
147
+ .units-row .unit-30,
148
+ .units-row-end .unit-30 { .columns(3, 10); }
149
+ .units-row .unit-33,
150
+ .units-row-end .unit-33 { .column(3); }
151
+ .units-row .unit-25,
152
+ .units-row-end .unit-25 { .column(4); }
153
+ .units-row .unit-20,
154
+ .units-row-end .unit-20 { .column(5); }
155
+
156
+ .unit-push-80,
157
+ .unit-push-75,
158
+ .unit-push-70,
159
+ .unit-push-66,
160
+ .unit-push-60,
161
+ .unit-push-50,
162
+ .unit-push-40,
163
+ .unit-push-33,
164
+ .unit-push-30,
165
+ .unit-push-25,
166
+ .unit-push-20 {
73
167
  position: relative;
74
168
  }
75
-
76
-
77
- .push-half { .column-push(2); }
78
- .push-third { .column-push(3); }
79
- .push-quarter { .column-push(4); }
80
- .push-fifth { .column-push(5); }
81
- .push-sixth { .column-push(6); }
82
-
83
- .push-threequarter { .columns-push(3, 4); }
84
- .push-twothird { .columns-push(2, 3); }
85
- .push-twofifth { .columns-push(2, 5); }
86
- .push-threefifth { .columns-push(3, 5); }
87
- .push-fourfifth { .columns-push(4, 5); }
88
- .push-fivesixth { .columns-push(5, 6); }
89
-
90
-
91
- .split .half,
92
- .split .third,
93
- .split .quarter,
94
- .split .fifth,
95
- .split .sixth,
96
- .split .twothird,
97
- .split .twofifth,
98
- .split .threefifth,
99
- .split .fourfifth,
100
- .split .fivesixth,
101
- .split .threequarter {
102
- margin-left: 0;
103
-
169
+ .unit-push-30 { .columns-push(3, 10); }
170
+ .unit-push-80 { .columns-push(4, 5); }
171
+ .unit-push-75 { .columns-push(3, 4); }
172
+ .unit-push-70 { .columns-push(7, 10); }
173
+ .unit-push-66 { .columns-push(2, 3); }
174
+ .unit-push-60 { .columns-push(3, 5); }
175
+ .unit-push-50 { .column-push(2); }
176
+ .unit-push-40 { .columns-push(2, 5); }
177
+ .unit-push-33 { .column-push(3); }
178
+ .unit-push-25 { .column-push(4); }
179
+ .unit-push-20 { .column-push(5); }
180
+
181
+ .unit-push-right {
182
+ float: right;
104
183
  }
105
184
 
106
- .split .half { width: 50%; }
107
- .split .threequarter { width: 75%; }
108
- .split .quarter { width: 25%; }
109
- .split .third { width: 33.3%; }
110
- .split .twothird { width: 66.6%; }
111
- .split .fifth { width: 20%; }
112
- .split .twofifth { width: 40%; }
113
- .split .threefifth { width: 60%; }
114
- .split .fourfifth { width: 80%; }
115
- .split .sixth { width: 16.6%; }
116
- .split .fivesixth { width: 83.4%; }
185
+ .centered,
186
+ .unit-centered {
187
+ float: none !important;
188
+ margin: 0 auto !important;
189
+ }
117
190
 
118
- .inner {
191
+ .unit-padding {
119
192
  padding: @baseLine/@em;
120
193
  }
121
- .inner-left {
122
- padding-left: @baseLine/@em;
123
- }
124
- .inner-right {
125
- padding-right: @baseLine/@em;
126
- }
127
- .inner-nobottom {
128
- padding-bottom: 1px;
129
- }
130
- .inner-double {
131
- padding: (@baseLine*2)/@em;
132
- }
133
- .inner-double-left {
134
- padding-left: (@baseLine*2)/@em;
135
- }
136
- .inner-double-right {
137
- padding-right: (@baseLine*2)/@em;
138
- }
139
- .inner-double-nobottom {
140
- padding-bottom: 1px;
194
+ .units-padding .unit-100,
195
+ .units-padding .unit-80,
196
+ .units-padding .unit-75,
197
+ .units-padding .unit-70,
198
+ .units-padding .unit-66,
199
+ .units-padding .unit-60,
200
+ .units-padding .unit-50,
201
+ .units-padding .unit-40,
202
+ .units-padding .unit-33,
203
+ .units-padding .unit-30,
204
+ .units-padding .unit-25,
205
+ .units-padding .unit-20 {
206
+ padding: @baseLine/@em;
141
207
  }
142
208
 
143
- .row .push-right {
144
- float: right;
209
+ .units-split .unit-80,
210
+ .units-split .unit-75,
211
+ .units-split .unit-70,
212
+ .units-split .unit-66,
213
+ .units-split .unit-60,
214
+ .units-split .unit-50,
215
+ .units-split .unit-40,
216
+ .units-split .unit-33,
217
+ .units-split .unit-30,
218
+ .units-split .unit-25,
219
+ .units-split .unit-20 {
220
+ margin-left: 0;
145
221
  }
222
+ .units-split .unit-80 { width: 80%; }
223
+ .units-split .unit-75 { width: 75%; }
224
+ .units-split .unit-70 { width: 70%; }
225
+ .units-split .unit-66 { width: 66.6%; }
226
+ .units-split .unit-60 { width: 60%; }
227
+ .units-split .unit-50 { width: 50%; }
228
+ .units-split .unit-40 { width: 40%; }
229
+ .units-split .unit-33 { width: 33.3%; }
230
+ .units-split .unit-30 { width: 30%; }
231
+ .units-split .unit-25 { width: 25%; }
232
+ .units-split .unit-20 { width: 20%; }
146
233
 
147
- .row .centered {
148
- float: none;
149
- margin: 0 auto;
150
- }
@@ -0,0 +1,90 @@
1
+ /* =Goodies
2
+ -----------------------------------------------------------------------------*/
3
+ .first-letter::first-letter {
4
+ font-size: 4em;
5
+ line-height: 0.75em;
6
+ float: left;
7
+ position: relative;
8
+ padding-right: 6px;
9
+ margin-top: -2px;
10
+ font-weight: normal;
11
+ color: @colorBody;
12
+ }
13
+ .supersmall {
14
+ font-size: @superSmallFontSize;
15
+ }
16
+ .small {
17
+ font-size: @smallFontSize;
18
+ }
19
+ .big {
20
+ font-size: @bigFontSize;
21
+ }
22
+ input.big {
23
+ padding: 2px 0;
24
+ font-size: @bigFontSize;
25
+ }
26
+ .text-centered {
27
+ text-align: center;
28
+ }
29
+ .text-right {
30
+ text-align: right;
31
+ }
32
+ .text-uppercase {
33
+ text-transform: uppercase;
34
+ }
35
+ .nowrap {
36
+ white-space: nowrap;
37
+ }
38
+ .zero {
39
+ margin: 0 !important;
40
+ padding: 0 !important;
41
+ }
42
+ .clear {
43
+ clear: both;
44
+ }
45
+ .last {
46
+ margin-right: 0 !important;
47
+ }
48
+ .pause {
49
+ margin-bottom: 0.75em !important;
50
+ }
51
+ .end {
52
+ margin-bottom: 0 !important;
53
+ }
54
+ .handle {
55
+ cursor: move;
56
+ }
57
+ .normal {
58
+ font-weight: normal;
59
+ }
60
+ .bold {
61
+ font-weight: bold;
62
+ }
63
+ .italic {
64
+ font-style: italic;
65
+ }
66
+ .req,
67
+ .required {
68
+ font-weight: normal;
69
+ color: @colorRed;
70
+ }
71
+ .highlight {
72
+ background-color: #ffff9e !important;
73
+ }
74
+ .close {
75
+ padding: 4px 6px;
76
+ line-height: 1;
77
+ font-size: 18px;
78
+ cursor: pointer;
79
+ color: @colorBlack;
80
+ text-decoration: none;
81
+ opacity: 0.4;
82
+
83
+ &:before {
84
+ content: '\00D7';
85
+ }
86
+ &:hover {
87
+ color: @colorBlack;
88
+ opacity: 1;
89
+ }
90
+ }
@@ -0,0 +1,24 @@
1
+ /* =Images
2
+ -----------------------------------------------------------------------------*/
3
+ .image-left {
4
+ float: left;
5
+ margin: 0 @floatingMargin @floatingMargin 0;
6
+ }
7
+ .image-right {
8
+ float: right;
9
+ margin: 0 0 @floatingMargin @floatingMargin;
10
+ }
11
+ .image-left img,
12
+ .image-right img {
13
+ position: relative;
14
+ top: .4em;
15
+ }
16
+ .image-centered {
17
+ text-align: center;
18
+ }
19
+ .image-container {
20
+ .clearfixing();
21
+ }
22
+ .image-content {
23
+ overflow: hidden;
24
+ }
@@ -1,21 +1,34 @@
1
+ /*
2
+ Kube Professional CSS-framework Version 2.0.0
3
+
4
+ Copyright (c) 2013, Imperavi Inc.
5
+
6
+ http://imperavi.com/kube/
7
+ */
8
+
1
9
  @import "variables.less";
2
10
  @import "mixins.less";
3
11
 
4
- @import "base.less";
12
+ @import "reset.less";
5
13
  @import "typo.less";
6
14
  @import "code.less";
7
-
8
15
  @import "tables.less";
16
+ @import "lists.less";
9
17
  @import "forms.less";
10
-
18
+ @import "colors.less";
19
+ @import "labels.less";
11
20
  @import "buttons.less";
21
+ @import "helpers.less";
22
+ @import "images.less";
12
23
  @import "navs.less";
13
- @import "labels.less";
24
+ @import "messages.less";
14
25
 
15
26
  @import "grid.less";
16
27
  @import "blocks.less";
17
28
 
18
- @import "goodies.less";
19
-
20
- @import "responsive.less";
21
-
29
+ @import "responsive-utils.less";
30
+ @import "responsive-media.less";
31
+ @import "responsive-grid.less";
32
+ @import "responsive-blocks.less";
33
+ @import "responsive-navs.less";
34
+ @import "responsive-forms.less";
@@ -1,14 +1,69 @@
1
- .label {
1
+ .label,
2
+ .label-badge {
2
3
  border-radius: 2em;
3
4
  border: 1px solid #ddd;
4
5
  font-size: .7em;
5
6
  display: inline-block;
6
- font-weight: 600;
7
- line-height: 1.8em;
8
- padding: 0 1em;
7
+ position: relative;
8
+ top: -1px;
9
+ line-height: 1;
10
+ padding: 3px 8px;
9
11
  color: #000;
12
+ background-color: #fff;
10
13
  text-decoration: none;
11
14
  }
12
- .label:hover {
13
- border-color: #bbb;
14
- }
15
+ .label-badge {
16
+ top: -4px;
17
+ left: -1px;
18
+ }
19
+ .label-data {
20
+ color: @colorGrayLight;
21
+ background: none;
22
+ border: none;
23
+ padding: 0;
24
+ }
25
+ a.label:hover {
26
+ color: #000;
27
+ .opacity(60);
28
+ }
29
+ .label-black {
30
+ background-color: #000;
31
+ }
32
+ .label-red {
33
+ background-color: #ef6465;
34
+ }
35
+ .label-orange {
36
+ background-color: #f48a30;
37
+ }
38
+ .label-green {
39
+ background-color: #90af45;
40
+ }
41
+ .label-blue {
42
+ background-color: #1c7ab4;
43
+ }
44
+ .label-yellow {
45
+ background-color: #f3c835;
46
+ }
47
+ .label-black,
48
+ .label-red,
49
+ .label-orange,
50
+ .label-green,
51
+ .label-blue,
52
+ .label-yellow {
53
+ border: none;
54
+ color: #fff;
55
+ padding: 4px 8px;
56
+ }
57
+
58
+ a.label-black:hover,
59
+ a.label-red:hover,
60
+ a.label-orange:hover,
61
+ a.label-green:hover,
62
+ a.label-blue:hover,
63
+ a.label-yellow:hover {
64
+ color: #fff;
65
+ }
66
+ .label-small {
67
+ font-size: .6em;
68
+ padding: 3px 5px;
69
+ }
@@ -0,0 +1,29 @@
1
+ /* =Lists
2
+ -----------------------------------------------------------------------------*/
3
+
4
+
5
+ // Simple
6
+ .lists-simple {
7
+ margin-left: 0;
8
+ list-style: none;
9
+ }
10
+ .lists-simple ul,
11
+ .lists-simple ol {
12
+ list-style: none;
13
+ margin-left: 1.5em;
14
+ }
15
+
16
+
17
+ // Dash
18
+ .lists-dash {
19
+ margin-left: 18px;
20
+ }
21
+ .lists-dash li {
22
+ list-style-type: none;
23
+ }
24
+ .lists-dash li:before{
25
+ content: "\2013";
26
+ position: relative;
27
+ margin-left: -10px;
28
+ left: -7px;
29
+ }