kube-rails 0.0.5 → 0.0.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (27) hide show
  1. data/Rakefile +0 -1
  2. data/lib/kube/rails/version.rb +1 -1
  3. data/vendor/kube/blocks.less +26 -19
  4. data/vendor/kube/buttons.less +118 -26
  5. data/vendor/kube/colors.less +52 -0
  6. data/vendor/kube/forms.less +127 -119
  7. data/vendor/kube/grid.less +212 -129
  8. data/vendor/kube/helpers.less +90 -0
  9. data/vendor/kube/images.less +24 -0
  10. data/vendor/kube/kube.less +21 -8
  11. data/vendor/kube/labels.less +62 -7
  12. data/vendor/kube/lists.less +29 -0
  13. data/vendor/kube/master.less +234 -0
  14. data/vendor/kube/messages.less +34 -0
  15. data/vendor/kube/mixins.less +81 -7
  16. data/vendor/kube/navs.less +115 -14
  17. data/vendor/kube/reset.less +215 -0
  18. data/vendor/kube/responsive-blocks.less +42 -0
  19. data/vendor/kube/responsive-forms.less +23 -0
  20. data/vendor/kube/responsive-grid.less +80 -0
  21. data/vendor/kube/responsive-media.less +31 -0
  22. data/vendor/kube/responsive-navs.less +50 -0
  23. data/vendor/kube/responsive-utils.less +22 -0
  24. data/vendor/kube/tables.less +48 -27
  25. data/vendor/kube/typo.less +17 -20
  26. data/vendor/kube/variables.less +18 -18
  27. metadata +15 -2
data/Rakefile CHANGED
@@ -7,7 +7,6 @@ task :bundle do
7
7
  sh 'bundle install'
8
8
  sh 'gem build *.gemspec'
9
9
  sh 'gem install *.gem'
10
- sh 'rm *.gem'
11
10
  end
12
11
 
13
12
  task(:default).clear
data/lib/kube/rails/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Kube
2
2
  module Rails
3
- VERSION = "0.0.5"
3
+ VERSION = '0.0.6'
4
4
  end
5
5
  end
data/vendor/kube/blocks.less CHANGED
@@ -1,27 +1,34 @@
1
1
  /* =Blocks
2
2
  -----------------------------------------------------------------------------*/
3
- .block-two,
4
- .block-three,
5
- .block-four,
6
- .block-five,
7
- .block-six {
3
+ .blocks-2,
4
+ .blocks-3,
5
+ .blocks-4,
6
+ .blocks-5,
7
+ .blocks-6 {
8
+ padding-left: 0;
8
9
  list-style: none;
9
10
  margin-left: -@gridGutterWidth/(@gridWidth/100)*1%;
10
- margin-bottom: 0;
11
+ .box-sizing(border-box);
11
12
  .clearfixing;
12
13
  }
13
- .block-two > li,
14
- .block-three > li,
15
- .block-four > li,
16
- .block-five > li,
17
- .block-six > li {
18
- height: auto;
19
- float: left;
14
+ .blocks-2 > li,
15
+ .blocks-3 > li,
16
+ .blocks-4 > li,
17
+ .blocks-5 > li,
18
+ .blocks-6 > li {
19
+ height: auto;
20
+ float: left;
20
21
  margin-bottom: @baseLine/@em;
21
- margin-left: @gridGutterWidth/(@gridWidth/100)*1%;
22
+ margin-left: @gridGutterWidth/(@gridWidth/100)*1%;
23
+ .box-sizing(border-box);
24
+ }
25
+
26
+ .blocks-2 > li { .block(2); }
27
+ .blocks-3 > li { .block(3); }
28
+ .blocks-4 > li { .block(4); }
29
+ .blocks-5 > li { .block(5); }
30
+ .blocks-6 > li { .block(6); }
31
+
32
+ .block-first {
33
+ clear: both;
22
34
  }
23
- .block-two > li { .block(2); }
24
- .block-three > li { .block(3); }
25
- .block-four > li { .block(4); }
26
- .block-five > li { .block(5); }
27
- .block-six > li { .block(6); }
data/vendor/kube/buttons.less CHANGED
@@ -1,46 +1,118 @@
1
-
2
1
  .btn {
3
2
  text-decoration: none;
4
3
  color: #000;
5
4
  border-radius: 2px;
6
- font-family: 'Helvetica Neue', 'Source Sans Pro', Helvetica, Arial, sans-serif;
7
- border: 1px solid #ccc;
8
- padding: .5em 1.05em;
5
+ font-family: @buttonFontFamily;
6
+ border: 1px solid darken(#fff, 20);
7
+ border-bottom-color: darken(#fff, 30);
8
+ line-height: 1;
9
+ padding: .7em 1.1em .6em 1.1em;
9
10
  font-weight: 500;
10
11
  font-size: .85em;
11
- background: #f3f2f2;
12
- background: -moz-linear-gradient(top, #ffffff 0%, #f3f2f2 100%);
13
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f3f2f2));
14
- background: -webkit-linear-gradient(top, #ffffff 0%,#f3f2f2 100%);
15
- background: -o-linear-gradient(top, #ffffff 0%,#f3f2f2 100%);
16
- background: -ms-linear-gradient(top, #ffffff 0%,#f3f2f2 100%);
17
- background: linear-gradient(to bottom, #ffffff 0%,#f3f2f2 100%);
18
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f2f2',GradientType=0 );
19
- }
20
- .btn:hover {
21
- background: #fff;
22
- border: 1px solid #ddd;
12
+ .gradient(darken(#fff, 1), darken(#fff, 12));
13
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
14
+ box-shadow: none;
15
+ &:hover {
16
+ color: #000;
17
+ background: darken(#fff, 12);
18
+ }
19
+ }
20
+ .btn-black {
21
+ border-color: #000;
22
+ .gradient(lighten(#000, 30), #000);
23
+ }
24
+ .btn-red {
25
+ border-color: darken(#ef6465, 25);
26
+ border-bottom-color: darken(#ef6465, 35);
27
+ .gradient(#ef6465, darken(#ef6465, 20));
28
+ }
29
+ .btn-orange {
30
+ border-color: darken(#f48a30, 15);
31
+ border-bottom-color: darken(#f48a30, 25);
32
+ .gradient(#f48a30, darken(#f48a30, 10));
33
+ }
34
+ .btn-green {
35
+ border-color: darken(#90af45, 18);
36
+ border-bottom-color: darken(#90af45, 28);
37
+ .gradient(#90af45, darken(#90af45, 15));
38
+ }
39
+ .btn-blue {
40
+ border-color: darken(#1c7ab4, 17);
41
+ border-bottom-color: darken(#1c7ab4, 27);
42
+ .gradient(#1c7ab4, darken(#1c7ab4, 10));
43
+ }
44
+ .btn-yellow {
45
+ border-color: darken(#f3c835, 20);
46
+ border-bottom-color: darken(#f3c835, 30);
47
+ .gradient(#f3c835, darken(#f3c835, 15));
48
+ }
49
+ .btn-black {
50
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 1);
51
+ }
52
+ .btn-red,
53
+ .btn-orange,
54
+ .btn-green,
55
+ .btn-blue,
56
+ .btn-yellow {
57
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.24);
58
+ }
59
+ .btn-black,
60
+ .btn-red,
61
+ .btn-orange,
62
+ .btn-green,
63
+ .btn-blue,
64
+ .btn-yellow {
65
+ color: #fff;
66
+ }
67
+ .btn-black:hover,
68
+ .btn-red:hover,
69
+ .btn-orange:hover,
70
+ .btn-green:hover,
71
+ .btn-blue:hover,
72
+ .btn-yellow:hover {
73
+ color: rgba(255, 255, 255, .8);
74
+ }
75
+ .btn-black:hover {
76
+ background: #000;
77
+ }
78
+ .btn-red:hover {
79
+ background: darken(#ef6465, 20);
80
+ }
81
+ .btn-orange:hover {
82
+ background: darken(#f48a30, 10);
83
+ }
84
+ .btn-green:hover {
85
+ background: darken(#90af45, 15);
86
+ }
87
+ .btn-blue:hover {
88
+ background: darken(#1c7ab4, 10);
89
+ }
90
+ .btn-yellow:hover {
91
+ background: darken(#f3c835, 15);
23
92
  }
93
+
24
94
  .btn-small {
25
95
  font-size: .7em;
26
96
  }
27
97
  .btn-big {
28
98
  font-size: 1.2em;
99
+ line-height: @baseLine / @em;
100
+ padding-left: 1.5em;
101
+ padding-right: 1.5em;
29
102
  }
30
103
  .btn-round {
31
104
  border-radius: 20px;
32
105
  }
33
- .btn-full {
34
- width: 100%;
35
- }
106
+
36
107
  .btn-active,
37
108
  .btn-active:hover,
38
109
  .btn.disabled,
39
- .btn[disabled]
110
+ .btn[disabled],
40
111
  .btn-disabled,
41
112
  .btn-disabled:hover {
42
- background: #e3e3e3;
43
- border: 1px solid #ccc;
113
+ .opacity(100);
114
+ background: darken(#fff, 18);
115
+ border: 1px solid darken(#fff, 30);
44
116
  text-shadow: 0 1px 1px #fff;
45
117
  }
46
118
  .btn-active,
@@ -48,7 +120,7 @@
48
120
  color: #666;
49
121
  }
50
122
  .btn.disabled,
51
- .btn[disabled]
123
+ .btn[disabled],
52
124
  .btn-disabled,
53
125
  .btn-disabled:hover {
54
126
  color: #999;
@@ -58,26 +130,41 @@
58
130
  .btn:hover .halflings {
59
131
  color: @colorGrayDark;
60
132
  }
133
+ .btn-black:hover .halflings,
134
+ .btn-red:hover .halflings,
135
+ .btn-orange:hover .halflings,
136
+ .btn-green:hover .halflings,
137
+ .btn-blue:hover .halflings,
138
+ .btn-yellow:hover .halflings {
139
+ color: rgba(255, 255, 255, .8);
140
+ }
141
+ .btn-disabled:hover .halflings {
142
+ color: #999;
143
+ }
61
144
 
62
145
  .btn-active .halflings {
63
146
  color: #555;
64
147
  }
65
148
 
66
149
  /* Group */
150
+ .btn-single,
67
151
  .btn-group {
68
152
  display: inline-block;
69
153
  margin-right: 2px;
70
154
  .clearfixing();
71
155
  vertical-align: bottom;
72
156
  }
157
+ .btn-single > .btn,
158
+ .btn-single > input,
73
159
  .btn-group > .btn,
74
160
  .btn-group > input {
75
161
  float: left;
76
- -moz-border-radius: 0;
77
- -webkit-border-radius: 0;
78
162
  border-radius: 0;
79
163
  margin-left: -1px;
80
164
  }
165
+ .btn-single > .btn {
166
+ border-radius: 4px;
167
+ }
81
168
  .btn-group > .btn:first-child {
82
169
  border-radius: 4px 0 0 4px;
83
170
  }
@@ -92,10 +179,15 @@
92
179
  .btn-group > .input-search:last-child {
93
180
  border-radius: 0 15px 15px 0;
94
181
  }
95
-
182
+ .btn-append,
183
+ .btn-group .btn {
184
+ padding: .7em 1.1em .6em 1.1em;
185
+ }
96
186
 
97
187
  /* Append */
98
188
  .btn-append {
189
+ position: relative;
190
+ top: -1px;
99
191
  margin-left: -2px;
100
192
  border-radius: 0 4px 4px 0;
101
193
  }
data/vendor/kube/colors.less ADDED
@@ -0,0 +1,52 @@
1
+ /* =Colors
2
+ -----------------------------------------------------------------------------*/
3
+ .color-black {
4
+ color: @colorBlack;
5
+ }
6
+ .color-gray-dark {
7
+ color: @colorGrayDark;
8
+ }
9
+ .color-gray {
10
+ color: @colorGray;
11
+ }
12
+ .color-gray-light {
13
+ color: @colorGrayLight;
14
+ }
15
+ .color-white {
16
+ color: @colorWhite;
17
+ }
18
+ .color-red,
19
+ .error {
20
+ color: @colorRed;
21
+ }
22
+ .color-green,
23
+ .success {
24
+ color: @colorGreen;
25
+ }
26
+ .color-orange {
27
+ color: @colorOrange;
28
+ }
29
+ .color-green {
30
+ color: @colorGreen;
31
+ }
32
+ .color-blue {
33
+ color: @colorBlue;
34
+ }
35
+ .color-yellow {
36
+ color: @colorYellow;
37
+ }
38
+
39
+ /* Link Colors Hover */
40
+ a.color-white:focus,
41
+ a.color-white:hover {
42
+ color: darken(@colorWhite, 25%);
43
+ color: rgba(255, 255, 255, .6);
44
+ }
45
+ a.color-green:focus,
46
+ a.color-green:hover,
47
+ a.color-red:focus,
48
+ a.color-red:hover,
49
+ a.color-error:focus,
50
+ a.color-error:hover {
51
+ color: @colorBlack;
52
+ }
data/vendor/kube/forms.less CHANGED
@@ -1,138 +1,148 @@
1
1
  /* =Forms
2
2
  -----------------------------------------------------------------------------*/
3
+ @fieldsBottom: 1.65em;
4
+
3
5
  .forms label {
4
6
  display: block;
5
- margin-bottom: 2px;
6
- }
7
- .descr {
8
- color: @colorGrayLight;
9
- font-size: @smallFontSize;
10
- line-height: @baseLine/@em;
7
+ margin-bottom: @fieldsBottom;
8
+ }
9
+ .forms input[type="text"],
10
+ .forms input[type="password"],
11
+ .forms input[type="email"],
12
+ .forms input[type="url"],
13
+ .forms input[type="phone"],
14
+ .forms input[type="tel"],
15
+ .forms input[type="number"],
16
+ .forms input[type="datetime"],
17
+ .forms input[type="date"],
18
+ .forms input[type="search"],
19
+ .forms input[type="range"],
20
+ .forms input[type="file"],
21
+ .forms input[type="datetime-local"],
22
+ .forms textarea,
23
+ .forms select,
24
+ .forms button {
25
+ display: block;
11
26
  }
12
- div.descr {
13
- margin: 4px 0;
27
+ .forms-inline input[type="text"],
28
+ .forms-inline input[type="password"],
29
+ .forms-inline input[type="email"],
30
+ .forms-inline input[type="url"],
31
+ .forms-inline input[type="phone"],
32
+ .forms-inline input[type="tel"],
33
+ .forms-inline input[type="number"],
34
+ .forms-inline input[type="datetime"],
35
+ .forms-inline input[type="date"],
36
+ .forms-inline input[type="search"],
37
+ .forms-inline input[type="range"],
38
+ .forms-inline input[type="file"],
39
+ .forms-inline input[type="datetime-local"],
40
+ .forms-inline textarea,
41
+ .forms-inline select,
42
+ .forms-inline button,
43
+ .forms-inline-list input[type="text"],
44
+ .forms-inline-list input[type="password"],
45
+ .forms-inline-list input[type="email"],
46
+ .forms-inline-list input[type="url"],
47
+ .forms-inline-list input[type="phone"],
48
+ .forms-inline-list input[type="tel"],
49
+ .forms-inline-list input[type="number"],
50
+ .forms-inline-list input[type="datetime"],
51
+ .forms-inline-list input[type="date"],
52
+ .forms-inline-list input[type="search"],
53
+ .forms-inline-list input[type="range"],
54
+ .forms-inline-list input[type="file"],
55
+ .forms-inline-list input[type="datetime-local"],
56
+ .forms-inline-list textarea,
57
+ .forms-inline-list select,
58
+ .forms-inline-list button {
59
+ display: inline-block;
14
60
  }
15
- .columnar div.descr {
16
- margin-bottom: 10px;
61
+ .forms-list,
62
+ .forms-inline-list {
63
+ margin: 0;
64
+ padding: 0;
65
+ margin-bottom: @fieldsBottom;
66
+ list-style: none;
17
67
  }
18
- .forms ul {
19
- list-style: none;
20
- margin: 0;
68
+ .forms-list label,
69
+ .forms-inline-list li,
70
+ .forms-inline-list li label {
71
+ display: inline-block;
72
+ margin-bottom: 0;
21
73
  }
22
- .forms ul li {
23
- margin-bottom: 10px;
74
+ .forms-inline-list li label {
75
+ margin-right: @fieldsBottom;
24
76
  }
25
- .forms.columnar ul li {
26
- margin-bottom: 15px;
77
+ .forms-list li {
78
+ margin-bottom: 6px;
27
79
  }
28
-
29
- /* liner fieldset */
30
- fieldset.liner {
31
- border: none;
32
- padding: 0;
80
+ .forms-desc {
81
+ margin-top: 4px;
82
+ color: @colorGrayLight;
83
+ font-size: @smallFontSize;
84
+ line-height: 1.4em;
33
85
  }
34
- fieldset.liner legend {
35
- padding: 0;
36
- width: 100%;
37
- padding-bottom: 12px;
86
+ .forms fieldset {
87
+ padding-bottom: .5em;
88
+ border-radius: .5em;
38
89
  }
39
- fieldset.liner legend span {
90
+ fieldset.forms-row {
40
91
  padding: 0;
41
- padding-bottom: 8px;
42
- border-bottom: 1px solid #eee;
43
- display: block;
44
- }
45
- /* multicolumn */
46
- .forms ul.multicolumn {
47
- .clearfixing();
48
- }
49
- .forms ul.multicolumn li {
50
- float: left;
51
- margin-right: 12px;
52
- margin-bottom: 0;
53
- line-height: 1.8em;
54
- }
55
- .forms ul.multicolumn li label {
92
+ border: none;
56
93
  margin-bottom: 0;
57
94
  }
58
- .forms ul.multicolumn li.width-50 {
59
- width: 48%;
60
- margin-right: 2%;
95
+ .forms-columnar {
96
+ .clearfixing();
61
97
  }
62
- .forms ul.multicolumn li.width-33 {
63
- width: 31%;
64
- margin-right: 2%;
98
+ .forms-columnar input[type="range"],
99
+ .forms-columnar input[type="file"],
100
+ .forms-columnar select[multiple="multiple"] {
101
+ display: inline-block;
65
102
  }
66
- /* columnar */
67
- .forms.columnar legend {
68
- margin-bottom: 1em;
103
+ .forms-columnar p {
104
+ position: relative;
105
+ padding-left: @columnarWidth + @columnarMargin;
69
106
  }
70
- .forms.columnar label {
107
+ .forms-columnar label {
71
108
  float: left;
72
109
  width: @columnarWidth;
73
110
  text-align: right;
74
- margin-right: @columnarMargin;
111
+ top: 0;
112
+ left: 0;
113
+ position: absolute;
75
114
  }
76
- .forms.columnar .push,
77
- .forms.columnar div.descr {
115
+ .forms-columnar .forms-list,
116
+ .forms-columnar .forms-inline-list {
78
117
  margin-left: @columnarWidth + @columnarMargin;
79
118
  }
80
- .forms.columnar li fieldset label {
119
+ .forms-columnar .forms-list label,
120
+ .forms-columnar .forms-inline-list label {
121
+ position: static;
81
122
  float: none;
82
123
  width: auto;
83
124
  text-align: left;
84
125
  margin-right: 0;
85
126
  }
86
- .forms.columnar li fieldset {
87
- border: none;
88
- padding: 0;
89
- margin: 0;
90
- padding-left: @columnarWidth + @columnarMargin;
91
- position: relative;
92
- }
93
- .forms.columnar li fieldset section {
94
- padding: 0;
95
- position: absolute;
96
- width: @columnarWidth;
97
- text-align: right;
98
- left: 0;
99
- top: 0;
127
+ .forms-columnar .forms-inline-list label {
128
+ margin-right: @fieldsBottom;
100
129
  }
101
- .forms.columnar li fieldset section label {
102
- float: none;
103
- width: auto;
104
- margin-right: 0;
105
- text-align: right;
106
- }
107
- .forms.columnar li fieldset div.descr {
108
- margin-left: 0;
130
+ .forms-push {
131
+ position: relative;
132
+ padding-left: @columnarWidth + @columnarMargin;
109
133
  }
110
-
111
-
112
- /* section */
113
- .forms li.form-section {
134
+ .forms-section {
114
135
  font-weight: bold;
115
136
  border-bottom: 1px solid #eee;
116
- padding: 1.5em 0 .7em 0;
117
- font-size: 1.1em;
118
- margin-bottom: 1.5em;
137
+ padding: 0 0 10px 0;
138
+ margin-bottom: 1em;
139
+ line-height: 1;
119
140
  }
120
- .columnar li.form-section {
141
+ .forms-columnar .forms-section {
121
142
  padding-left: @columnarWidth + @columnarMargin;
122
143
  }
123
144
 
124
145
 
125
- /* tableforms */
126
- table.tableforms td {
127
- font-size: 90%;
128
- padding: 1px 10px 3px 0 !important;
129
- border: none;
130
- }
131
- table.tableforms tr.labels td {
132
- padding-top: .8em !important;
133
- font-weight: bold;
134
- }
135
-
136
146
  input[type="radio"],
137
147
  input[type="checkbox"] {
138
148
  position: relative;
@@ -144,25 +154,38 @@ input[type="password"],
144
154
  input[type="email"],
145
155
  input[type="url"],
146
156
  input[type="phone"],
147
- textarea {
157
+ input[type="tel"],
158
+ input[type="number"],
159
+ input[type="datetime"],
160
+ input[type="date"],
161
+ input[type="search"],
162
+ input[type="datetime-local"],
163
+ textarea,
164
+ select[multiple="multiple"] {
148
165
  position: relative;
149
166
  z-index: 2;
150
167
  font-family: @inputFontFamily;
151
- height: 23px;
152
168
  border: 1px solid #ccc;
153
169
  margin: 0;
154
- padding: 1px 2px;
170
+ padding: 3px 2px;
155
171
  background-color: white;
156
- color: #333;
157
- font-size: .95em;
172
+ color: @colorBody;
173
+ font-size: 1em;
158
174
  line-height: 1;
159
175
  border-radius: 1px;
160
176
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
161
177
  .transition(border ease .5s);
162
178
  }
179
+ input[type="range"] {
180
+ position: relative;
181
+ top: 3px;
182
+ }
163
183
  textarea {
164
184
  line-height: 1.4em;
165
185
  }
186
+ select {
187
+ margin-bottom: 0 !important;
188
+ }
166
189
 
167
190
  /* Errors and Success */
168
191
  .error,
@@ -222,26 +245,11 @@ input[type="search"] {
222
245
  .input-prepend {
223
246
  margin-right: -1px;
224
247
  }
225
-
226
248
  .input-append {
227
249
  position: relative;
228
250
  z-index: 1;
229
251
  margin-left: -1px;
230
252
  }
231
253
 
232
- /* Placeholders */
233
- ::-webkit-input-placeholder {
234
- color: @colorGrayLight;
235
- padding: 1px 2px;
236
- }
237
- /* FF19+ */
238
- ::-moz-placeholder {
239
- color: @colorGrayLight;
240
- }
241
- input:-moz-placeholder,
242
- textarea:-moz-placeholder {
243
- color: @colorGrayLight;
244
- }
245
- :-ms-input-placeholder {
246
- color: @colorGrayLight;
247
- }
254
+ /* Placeholder */
255
+ .placeholder(@colorGrayLight);