kube-rails 0.0.10 → 0.2.0

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,59 +1,52 @@
1
- /* =Goodies
1
+ /* =Helpers
2
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;
3
+ .group {
4
+ .clearfix;
15
5
  }
16
6
  .small {
17
7
  font-size: @smallFontSize;
18
8
  }
19
- .big {
20
- font-size: @bigFontSize;
9
+ .nowrap,
10
+ .nowrap td {
11
+ white-space: nowrap;
21
12
  }
22
- input.big {
23
- padding: 2px 0;
24
- font-size: @bigFontSize;
13
+ .req,
14
+ .required {
15
+ font-weight: normal;
16
+ color: @colorRed;
25
17
  }
26
- .text-centered {
27
- text-align: center;
18
+ .color-gray {
19
+ color: #777;
28
20
  }
29
- .text-right {
30
- text-align: right;
21
+ .color-gray-light {
22
+ color: #999;
31
23
  }
32
- .text-uppercase {
33
- text-transform: uppercase;
24
+ .color-black {
25
+ color: #000;
34
26
  }
35
- .nowrap {
36
- white-space: nowrap;
27
+ .color-red,
28
+ .error {
29
+ color: @colorRed;
37
30
  }
38
- .zero {
39
- margin: 0 !important;
40
- padding: 0 !important;
31
+ .color-green,
32
+ .success {
33
+ color: @colorGreen;
34
+ }
35
+ .text-centered {
36
+ text-align: center;
41
37
  }
42
- .clear {
43
- clear: both;
38
+ .text-right {
39
+ text-align: right;
44
40
  }
45
41
  .last {
46
42
  margin-right: 0 !important;
47
43
  }
48
44
  .pause {
49
- margin-bottom: 0.75em !important;
45
+ margin-bottom: @baseLineHeight/2 + 0em !important;
50
46
  }
51
47
  .end {
52
48
  margin-bottom: 0 !important;
53
49
  }
54
- .handle {
55
- cursor: move;
56
- }
57
50
  .normal {
58
51
  font-weight: normal;
59
52
  }
@@ -63,28 +56,37 @@ input.big {
63
56
  .italic {
64
57
  font-style: italic;
65
58
  }
66
- .req,
67
- .required {
68
- font-weight: normal;
69
- color: @colorRed;
59
+ .left {
60
+ float: left;
70
61
  }
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;
62
+ .right {
63
+ float: right;
64
+ }
65
+
82
66
 
83
- &:before {
84
- content: '\00D7';
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%;
85
81
  }
86
- &:hover {
87
- color: @colorBlack;
88
- opacity: 1;
82
+ }
83
+
84
+
85
+ /* =Responsive
86
+ -----------------------------------------------------------------------------*/
87
+ @media only screen and (max-width: 767px) {
88
+ .left,
89
+ .right {
90
+ float: none;
89
91
  }
90
- }
92
+ }
@@ -1,34 +1,20 @@
1
- /*
2
- Kube Professional CSS-framework Version 2.0.0
1
+ @import "mixins.less";
2
+ @import "variables.less";
3
3
 
4
- Copyright (c) 2013, Imperavi Inc.
4
+ @import "normalize.less";
5
+ @import "typography.less";
5
6
 
6
- http://imperavi.com/kube/
7
- */
7
+ @import "grid.less";
8
+ @import "blocks.less";
8
9
 
9
- @import "variables.less";
10
- @import "mixins.less";
10
+ @import "navigation.less";
11
11
 
12
- @import "reset.less";
13
- @import "typo.less";
14
- @import "code.less";
15
12
  @import "tables.less";
16
- @import "lists.less";
17
13
  @import "forms.less";
18
- @import "colors.less";
19
- @import "labels.less";
14
+
20
15
  @import "buttons.less";
16
+
21
17
  @import "helpers.less";
22
- @import "images.less";
23
- @import "navs.less";
24
- @import "messages.less";
18
+ @import "prettyprint.less";
25
19
 
26
- @import "grid.less";
27
- @import "blocks.less";
28
20
 
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,35 +1,50 @@
1
- .gradient(@startColor: #555, @endColor: #333) {
2
- background-color: mix(@startColor, @endColor, 60%);
3
- background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
4
- background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
5
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
6
- background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
7
- background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
8
- background-image: linear-gradient(top, @startColor, @endColor); // The standard
9
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
10
- }
11
-
12
- .selection(@r, @g, @b) {
13
- ::selection {
14
- background: rgb(@r, @g, @b);
15
- }
16
- ::-moz-selection {
17
- background: rgb(@r, @g, @b);
18
- }
19
- img::selection {
20
- background: transparent;
1
+ .clearfix() {
2
+ &:after {
3
+ content: "";
4
+ display: table;
5
+ clear: both;
21
6
  }
22
- img::-moz-selection {
23
- background: transparent;
7
+
8
+ }
9
+ .btn-color(@color, @darken: 10%) {
10
+ background: @color;
11
+ &:hover {
12
+ background: darken(@color, @darken);
24
13
  }
25
14
  }
26
-
15
+ .opacity(@opacity: 100) {
16
+ filter: e(%("alpha(opacity=%d)", @opacity));
17
+ -moz-opacity: @opacity / 100;
18
+ opacity: @opacity / 100;
19
+ }
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; }
25
+ }
27
26
  .box-sizing(@box-model) {
28
- -webkit-box-sizing: @box-model;
29
- -moz-box-sizing: @box-model;
30
- box-sizing: @box-model;
27
+ -webkit-box-sizing: @box-model;
28
+ -moz-box-sizing: @box-model;
29
+ box-sizing: @box-model;
30
+ }
31
+ .vertical-align {
32
+ position: relative;
33
+ top: 50%;
34
+ -webkit-transform: translateY(-50%);
35
+ -ms-transform: translateY(-50%);
36
+ transform: translateY(-50%);
37
+ }
38
+ .gradient(@start: #555, @end: #333) {
39
+ background-color: mix(@start, @end, 60%);
40
+ background-image: -moz-linear-gradient(top, @start, @end); // FF 3.6+
41
+ background-image: -ms-linear-gradient(top, @start, @end); // IE10
42
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start), to(@end)); // Safari 4+, Chrome 2+
43
+ background-image: -webkit-linear-gradient(top, @start, @end); // Safari 5.1+, Chrome 10+
44
+ background-image: -o-linear-gradient(top, @start, @end); // Opera 11.10
45
+ 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
31
47
  }
32
-
33
48
  .border-top-radius(@radius) {
34
49
  border-top-right-radius: @radius;
35
50
  border-top-left-radius: @radius;
@@ -46,65 +61,15 @@
46
61
  border-bottom-left-radius: @radius;
47
62
  border-top-left-radius: @radius;
48
63
  }
49
-
50
-
51
- .transition(@transition) {
52
- -webkit-transition: @transition;
53
- -moz-transition: @transition;
54
- -o-transition: @transition;
55
- transition: @transition;
56
- }
57
- .transition-delay(@transition-delay) {
58
- -webkit-transition-delay: @transition-delay;
59
- -moz-transition-delay: @transition-delay;
60
- -o-transition-delay: @transition-delay;
61
- transition-delay: @transition-delay;
62
- }
63
- .transition-duration(@transition-duration) {
64
- -webkit-transition-duration: @transition-duration;
65
- -moz-transition-duration: @transition-duration;
66
- -o-transition-duration: @transition-duration;
67
- transition-duration: @transition-duration;
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;
68
69
  }
69
-
70
- .opacity(@opacity: 100) {
71
- filter: e(%("alpha(opacity=%d)", @opacity));
72
- -moz-opacity: @opacity / 100;
73
- opacity: @opacity / 100;
74
- }
75
-
76
- .placeholder(@color: @input-color-placeholder) {
77
- &:-moz-placeholder { color: @color; } // Firefox 4-18
78
- &::-moz-placeholder { color: @color; } // Firefox 19+
79
- &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
80
- &::-webkit-input-placeholder { color: @color; padding: 2px; } // Safari and Chrome
81
- }
82
-
83
- .clearfixing() {
84
- &:after {
85
- content: ".";
86
- display: block;
87
- height: 0;
88
- clear: both;
89
- visibility: hidden;
90
- }
91
- }
92
-
93
- // Colors
94
- @black-10: darken(#fff, 10%);
95
- @black-20: darken(#fff, 20%);
96
- @black-30: darken(#fff, 30%);
97
- @black-40: darken(#fff, 40%);
98
- @black-50: darken(#fff, 50%);
99
- @black-60: darken(#fff, 60%);
100
- @black-70: darken(#fff, 70%);
101
- @black-80: darken(#fff, 80%);
102
- @black-90: darken(#fff, 90%);
103
-
104
- // Retina
105
70
  .retina-image(@path, @w: auto, @h: auto) {
106
71
  background-image: url(@path);
107
- @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;
72
+ @at2x_path: ~'@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })';
108
73
 
109
74
  @media
110
75
  only screen and (-webkit-min-device-pixel-ratio: 2),
@@ -117,7 +82,87 @@
117
82
  background-size: @w @h;
118
83
  }
119
84
  }
120
-
85
+ .transition(@transition: all linear .2s) {
86
+ -moz-transition: @transition;
87
+ transition: @transition;
88
+ }
89
+ .blur(@radius) {
90
+ -webkit-filter: blur(@radius);
91
+ -moz-filter: blur(@radius);
92
+ -ms-filter: blur(@radius);
93
+ filter: blur(@radius);
94
+ }
95
+ .arrow-top(@color: #fff, @size: 5px, @left: 5px) {
96
+ &:after {
97
+ bottom: 100%;
98
+ border: solid transparent;
99
+ content: " ";
100
+ height: 0;
101
+ width: 0;
102
+ position: absolute;
103
+ pointer-events: none;
104
+ border-bottom-color: @color;
105
+ border-width: @size;
106
+ left: @left;
107
+ }
108
+ }
109
+ .arrow-bottom(@color: #fff, @size: 5px, @left: 5px) {
110
+ &:after {
111
+ top: 100%;
112
+ border: solid transparent;
113
+ content: " ";
114
+ height: 0;
115
+ width: 0;
116
+ position: absolute;
117
+ pointer-events: none;
118
+ border-top-color: @color;
119
+ border-width: @size;
120
+ left: @left;
121
+ }
122
+ }
123
+ .arrow-left(@color: #fff, @size: 5px, @top: 5px) {
124
+ &:after {
125
+ right: 100%;
126
+ border: solid transparent;
127
+ content: " ";
128
+ height: 0;
129
+ width: 0;
130
+ position: absolute;
131
+ pointer-events: none;
132
+ border-right-color: @color;
133
+ border-width: @size;
134
+ top: @top;
135
+ }
136
+ }
137
+ .arrow-right(@color: #fff, @size: 5px, @top: 5px) {
138
+ &:after {
139
+ left: 100%;
140
+ border: solid transparent;
141
+ content: " ";
142
+ height: 0;
143
+ width: 0;
144
+ position: absolute;
145
+ pointer-events: none;
146
+ border-left-color: @color;
147
+ border-width: @size;
148
+ top: @top;
149
+ }
150
+ }
151
+ .close(@r: 0, @g: 0, @b: 0) {
152
+ padding: 4px 6px;
153
+ line-height: 1;
154
+ font-size: 18px;
155
+ cursor: pointer;
156
+ color: rgba(@r, @g, @b, 1);
157
+ text-decoration: none;
158
+ .opacity(50);
159
+ &:before {
160
+ content: '\00D7';
161
+ }
162
+ &:hover {
163
+ .opacity(100);
164
+ }
165
+ }
121
166
  // Grid
122
167
  .block(@num) {
123
168
  width: ((@gridWidth - (@gridGutterWidth * @num)) / @num / (@gridWidth / 100)) * 1%;
@@ -137,4 +182,4 @@
137
182
 
138
183
  .columns-push(@factor, @num) {
139
184
  left: ((((@gridWidth - (@gridGutterWidth * (@num - 1))) / @num / (@gridWidth / 100)) * @factor) + ((@gridGutterWidth / (@gridWidth / 100)) * (@factor - 1)) + @gridGutterWidth/(@gridWidth/100)) * 1%;
140
- }
185
+ }
@@ -0,0 +1,244 @@
1
+ /* =Navs
2
+ -----------------------------------------------------------------------------*/
3
+
4
+ /* NavBar */
5
+ .navbar {
6
+ margin-bottom: @baseLineInEms;
7
+ .clearfix;
8
+ }
9
+ .navbar-left {
10
+ float: left;
11
+ }
12
+ .navbar-right {
13
+ float: right;
14
+ }
15
+ .navbar ul {
16
+ list-style: none;
17
+ margin: 0;
18
+ .clearfix;
19
+ }
20
+ .navbar ul li {
21
+ float: left;
22
+ margin-right: @baseLineInEms;
23
+ }
24
+ .navbar-right ul li {
25
+ margin-right: 0;
26
+ margin-left: @baseLineInEms;
27
+ }
28
+ .navbar ul li a,
29
+ .navbar ul li span {
30
+ display: block;
31
+ text-decoration: none;
32
+ }
33
+ .navbar ul li a:hover {
34
+ color: @colorLinkHover;
35
+ }
36
+ .navbar ul li.active a,
37
+ .navbar ul li span {
38
+ text-decoration: none;
39
+ cursor: text;
40
+ color: rgba(0, 0, 0, .4);
41
+ }
42
+
43
+
44
+ /* Fullwidth */
45
+ .fullwidth ul {
46
+ width: 100%;
47
+ }
48
+ .fullwidth li {
49
+ float: none !important;
50
+ margin: 0;
51
+ display: table-cell;
52
+ width: 1%;
53
+ text-align: center;
54
+ }
55
+ .fullwidth li a,
56
+ .fullwidth li span {
57
+ display: block;
58
+ }
59
+
60
+
61
+ /* Vertical */
62
+ .nav {
63
+ margin-bottom: @baseLineInEms;
64
+ }
65
+ .nav ul {
66
+ list-style: none;
67
+ margin: 0;
68
+ }
69
+ .nav ul li ul {
70
+ margin-left: 2em;
71
+ font-size: .95em;
72
+ }
73
+ .nav ul li a,
74
+ .nav ul li span {
75
+ display: block;
76
+ padding: 5px 0;
77
+ }
78
+ .nav ul li ul li a,
79
+ .nav ul li ul li span {
80
+ padding: 4px 0;
81
+ }
82
+ .nav ul li a {
83
+ text-decoration: none;
84
+ }
85
+ .nav ul li a:hover {
86
+ color: @colorLinkHover;
87
+ text-decoration: underline;
88
+ }
89
+ .nav ul li.active a,
90
+ .nav ul li span {
91
+ text-decoration: none;
92
+ cursor: text;
93
+ color: rgba(0, 0, 0, .4);
94
+ }
95
+
96
+ /* Stroked */
97
+ .nav-stroked li {
98
+ border-bottom: 1px solid #eee;
99
+ }
100
+ .nav-stroked li:last-child {
101
+ border-bottom: none;
102
+ }
103
+
104
+ /* Stacked */
105
+ .nav-stacked ul {
106
+ border: 1px solid #eee;
107
+ border-bottom: 0;
108
+ }
109
+ .nav-stacked ul li {
110
+ border-bottom: 1px solid #eee;
111
+ }
112
+ .nav-stacked ul li a,
113
+ .nav-stacked ul li span {
114
+ padding: 5px 10px;
115
+ }
116
+ .nav-stacked ul li a:hover {
117
+ background-color: #f5f5f5;
118
+ }
119
+
120
+ /* Stats */
121
+ .nav-stats li {
122
+ position: relative;
123
+ }
124
+ .nav-stats li a,
125
+ .nav-stats li span {
126
+ padding-right: 50px;
127
+ }
128
+ .nav-stats sup {
129
+ position: absolute;
130
+ top: 50%;
131
+ right: 0;
132
+ color: rgba(0, 0, 0, .4);
133
+ }
134
+ .nav-stats.nav-stacked sup {
135
+ right: .5em;
136
+ }
137
+
138
+
139
+ /* Breadcrumbs */
140
+ .breadcrumbs {
141
+ margin-bottom: @baseLineInEms;
142
+ .clearfix;
143
+ }
144
+ .breadcrumbs ul {
145
+ font-size: .9em;
146
+ color: rgba(0, 0, 0, .4);
147
+ list-style: none;
148
+ margin: 0;
149
+ .clearfix;
150
+ }
151
+ .breadcrumbs ul li {
152
+ float: left;
153
+ margin-right: 3px;
154
+ }
155
+ .breadcrumbs li + li:before {
156
+ content: " > ";
157
+ color: #aaa;
158
+ font-size: 12px;
159
+ margin: 0 3px;
160
+ position: relative;
161
+ top: -1px;
162
+ }
163
+ .breadcrumbs-sections li + li:before {
164
+ content: " | ";
165
+ top: 0;
166
+ }
167
+ .breadcrumbs-path li + li:before {
168
+ content: " / ";
169
+ top: 0;
170
+ }
171
+ .breadcrumbs ul li a {
172
+ color: @colorBlack;
173
+ text-decoration: none;
174
+ }
175
+ .breadcrumbs ul li.active a {
176
+ text-decoration: none;
177
+ cursor: text;
178
+ color: rgba(0, 0, 0, .4);
179
+ }
180
+ .breadcrumbs ul li a:hover {
181
+ color: @colorBlack;
182
+ text-decoration: underline;
183
+ }
184
+
185
+ /* =Pagination
186
+ -----------------------------------------------------------------------------*/
187
+ .pagination {
188
+ position: relative;
189
+ left: -9px;
190
+ margin-left: 0;
191
+ list-style: none;
192
+ .clearfix;
193
+ }
194
+ .pagination li {
195
+ float: left;
196
+ margin-right: 2px;
197
+ }
198
+ .pagination li a,
199
+ .pagination li span {
200
+ display: block;
201
+ padding: 7px 9px;
202
+ line-height: 1;
203
+ border-radius: 3px;
204
+ color: @colorBlack;
205
+ text-decoration: none;
206
+ }
207
+ .pagination span {
208
+ border: 1px solid #ddd;
209
+ }
210
+ .pagination li a:focus,
211
+ .pagination li a:hover {
212
+ text-decoration: none;
213
+ background-color: @colorBlack;
214
+ color: #fff;
215
+ }
216
+
217
+ /* =Responsive
218
+ -----------------------------------------------------------------------------*/
219
+ @media only screen and (max-width: 767px) {
220
+ .navbar-left,
221
+ .navbar-right,
222
+ .navbar ul li,
223
+ .navbar-right ul li,
224
+ .subnav-right ul,
225
+ .subnav ul li,
226
+ .subnav-right ul li {
227
+ float: none;
228
+ text-align: center;
229
+ }
230
+ .navbar ul li,
231
+ .navbar-right ul li,
232
+ .subnav ul li,
233
+ .subnav-right ul li {
234
+ margin-left: 0;
235
+ margin-right: 0;
236
+ }
237
+ .fullwidth ul {
238
+ width: auto;
239
+ }
240
+ .fullwidth li {
241
+ display: block;
242
+ width: auto;
243
+ }
244
+ }