kube-rails 0.0.10 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,63 +1,55 @@
1
1
  /* =Forms
2
2
  -----------------------------------------------------------------------------*/
3
- @fieldsBottom: 1.65em;
3
+ .forms {
4
+ & label {
5
+ display: block;
6
+ margin-bottom: @fieldsBottom;
7
+ }
4
8
 
5
- .forms label {
6
- display: block;
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;
26
- }
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;
9
+ & fieldset {
10
+ padding-bottom: .5em;
11
+ border-radius: 4px;
12
+ }
13
+
14
+ & input[type="text"],
15
+ & input[type="password"],
16
+ & input[type="email"],
17
+ & input[type="url"],
18
+ & input[type="phone"],
19
+ & input[type="tel"],
20
+ & input[type="number"],
21
+ & input[type="datetime"],
22
+ & input[type="date"],
23
+ & input[type="search"],
24
+ & input[type="range"],
25
+ & input[type="file"],
26
+ & input[type="datetime-local"],
27
+ & textarea,
28
+ & select {
29
+ display: block;
30
+ }
31
+ }
32
+ .forms-inline,
33
+ .forms-inline-list {
34
+ & input[type="text"],
35
+ & input[type="password"],
36
+ & input[type="email"],
37
+ & input[type="url"],
38
+ & input[type="phone"],
39
+ & input[type="tel"],
40
+ & input[type="number"],
41
+ & input[type="datetime"],
42
+ & input[type="date"],
43
+ & input[type="search"],
44
+ & input[type="range"],
45
+ & input[type="file"],
46
+ & input[type="datetime-local"],
47
+ & textarea,
48
+ & select {
49
+ display: inline-block;
50
+ }
60
51
  }
52
+
61
53
  .forms-list,
62
54
  .forms-inline-list {
63
55
  margin: 0;
@@ -79,68 +71,10 @@
79
71
  }
80
72
  .forms-desc {
81
73
  margin-top: 4px;
82
- color: @colorGrayLight;
74
+ color: rgba(0, 0, 0, .4);
83
75
  font-size: @smallFontSize;
84
76
  line-height: 1.4em;
85
77
  }
86
- .forms fieldset {
87
- padding-bottom: .5em;
88
- border-radius: .5em;
89
- }
90
- fieldset.forms-row {
91
- padding: 0;
92
- border: none;
93
- margin-bottom: 0;
94
- }
95
- .forms-columnar {
96
- .clearfixing();
97
- }
98
- .forms-columnar input[type="range"],
99
- .forms-columnar input[type="file"],
100
- .forms-columnar select[multiple="multiple"] {
101
- display: inline-block;
102
- }
103
- .forms-columnar p {
104
- position: relative;
105
- padding-left: @columnarWidth + @columnarMargin;
106
- }
107
- .forms-columnar label {
108
- float: left;
109
- width: @columnarWidth;
110
- text-align: right;
111
- top: 0;
112
- left: 0;
113
- position: absolute;
114
- }
115
- .forms-columnar .forms-list,
116
- .forms-columnar .forms-inline-list {
117
- margin-left: @columnarWidth + @columnarMargin;
118
- }
119
- .forms-columnar .forms-list label,
120
- .forms-columnar .forms-inline-list label {
121
- position: static;
122
- float: none;
123
- width: auto;
124
- text-align: left;
125
- margin-right: 0;
126
- }
127
- .forms-columnar .forms-inline-list label {
128
- margin-right: @fieldsBottom;
129
- }
130
- .forms-push {
131
- position: relative;
132
- padding-left: @columnarWidth + @columnarMargin;
133
- }
134
- .forms-section {
135
- font-weight: bold;
136
- border-bottom: 1px solid #eee;
137
- padding: 0 0 10px 0;
138
- margin-bottom: 1em;
139
- line-height: 1;
140
- }
141
- .forms-columnar .forms-section {
142
- padding-left: @columnarWidth + @columnarMargin;
143
- }
144
78
 
145
79
 
146
80
  input[type="radio"],
@@ -148,7 +82,6 @@ input[type="checkbox"] {
148
82
  position: relative;
149
83
  top: -1px;
150
84
  }
151
-
152
85
  input[type="text"],
153
86
  input[type="password"],
154
87
  input[type="email"],
@@ -160,20 +93,7 @@ input[type="datetime"],
160
93
  input[type="date"],
161
94
  input[type="search"],
162
95
  input[type="datetime-local"],
163
- textarea,
164
- select[multiple="multiple"] {
165
- position: relative;
166
- z-index: 2;
167
- font-family: @inputFontFamily;
168
- border: 1px solid #ccc;
169
- margin: 0;
170
- padding: 3px 2px;
171
- background-color: white;
172
- color: @colorBody;
173
- font-size: 1em;
174
- line-height: 1;
175
- border-radius: 1px;
176
- box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
96
+ textarea {
177
97
  .transition(border ease .5s);
178
98
  }
179
99
  input[type="range"] {
@@ -187,10 +107,9 @@ select {
187
107
  margin-bottom: 0 !important;
188
108
  }
189
109
 
190
- /* Errors and Success */
110
+ /* States */
191
111
  .error,
192
112
  .success {
193
- margin-left: 5px;
194
113
  font-weight: normal;
195
114
  font-size: @smallFontSize;
196
115
  }
@@ -198,15 +117,16 @@ input.input-error,
198
117
  textarea.input-error,
199
118
  select.input-error,
200
119
  .input-error {
201
- border-color: #da3e5a;
202
- box-shadow: 0 0 0 2px rgba(218, 62, 90, .3),0 1px 2px rgba(0, 0, 0, .2) inset;
120
+ border-color: @colorRed;
121
+ box-shadow: 0 0 0 2px rgba(red(@colorRed), green(@colorRed), blue(@colorRed), .3),0 1px 2px rgba(0, 0, 0, .2) inset;
203
122
  }
204
123
  input.input-success,
205
124
  textarea.input-success,
206
125
  select.input-success,
207
126
  .input-success {
208
- border-color: #18a011 ;
209
- box-shadow: 0 0 0 2px rgba(24, 160, 17, .3),0 1px 2px rgba(0, 0, 0, .2) inset;
127
+ border-color: @colorGreen;
128
+ box-shadow: 0 0 0 2px rgba(red(@colorGreen), green(@colorGreen), blue(@colorGreen), .3),0 1px 2px rgba(0, 0, 0, .2) inset;
129
+
210
130
  }
211
131
  input.input-gray,
212
132
  textarea.input-gray,
@@ -230,26 +150,57 @@ input[type="search"] {
230
150
  margin-bottom: 0;
231
151
  border-radius: 15px;
232
152
  }
233
- .input-append,
234
- .input-prepend {
235
- display: inline-block;
153
+
154
+ /* Append & Prepend */
155
+ .input-groups {
156
+ display: table !important;
157
+ }
158
+ .input-groups input {
159
+ width: 100%;
160
+ }
161
+ .input-groups input,
162
+ .input-groups .input-append,
163
+ .input-groups .input-prepend,
164
+ .input-groups .btn-append {
165
+ display: table-cell !important;
166
+ }
167
+ .input-groups .btn-append,
168
+ .input-groups .input-append,
169
+ .input-groups .input-prepend {
170
+ width: 1%;
171
+ vertical-align: middle;
172
+ }
173
+ .input-groups .input-append,
174
+ .input-groups .input-prepend {
236
175
  background-color: #eee;
237
- height: 23px;
238
176
  border: 1px solid #ccc;
239
177
  margin: 0;
240
- padding: 1px 8px;
241
- color: #333;
178
+ padding: 0;
179
+ color: @colorBody;
180
+ line-height: 1;
242
181
  font-size: 1em;
243
- line-height: 23px;
182
+ white-space: nowrap;
244
183
  }
245
- .input-prepend {
246
- margin-right: -1px;
184
+ .input-groups .input-prepend {
185
+ border-right: none;
247
186
  }
248
- .input-append {
187
+ .input-groups .input-append {
249
188
  position: relative;
250
189
  z-index: 1;
251
- margin-left: -1px;
190
+ border-left: none;
252
191
  }
192
+ .input-groups .btn-append .btn {
193
+ display: block;
194
+ height: auto;
195
+ border-radius: 0 4px 4px 0;
196
+ }
197
+
198
+ /* =Mobile (Portrait)
199
+ -----------------------------------------------------------------------------*/
200
+ @media only screen and (max-width: 767px) {
201
+
202
+ .forms-list label {
203
+ display: inline-block;
204
+ }
253
205
 
254
- /* Placeholder */
255
- .placeholder(@colorGrayLight);
206
+ }
@@ -3,19 +3,14 @@
3
3
  .units-container,
4
4
  .units-row-end,
5
5
  .units-row {
6
- .clearfixing;
6
+ .clearfix;
7
7
  }
8
8
  .units-container { /* it's the trick to not collapse padding-top in the child element */
9
9
  padding-top: 1px;
10
10
  margin-top: -1px;
11
11
  }
12
- .units-container,
13
- .units-row-end,
14
- .units-row {
15
- .box-sizing(border-box);
16
- }
17
12
  .units-row {
18
- margin-bottom: 1.5em;
13
+ margin-bottom: @baseLine / @em;
19
14
  }
20
15
  .units-row-end {
21
16
  margin-bottom: 0;
@@ -26,9 +21,11 @@
26
21
  .width-75, .unit-75 { width: 75%; }
27
22
  .width-70, .unit-70 { width: 70%; }
28
23
  .width-66, .unit-66 { width: 66.6%; }
24
+ .width-65, .unit-65 { width: 65%; }
29
25
  .width-60, .unit-60 { width: 60%; }
30
26
  .width-50, .unit-50 { width: 50%; }
31
27
  .width-40, .unit-40 { width: 40%; }
28
+ .width-35, .unit-35 { width: 35%; }
32
29
  .width-33, .unit-33 { width: 33.3%; }
33
30
  .width-30, .unit-30 { width: 30%; }
34
31
  .width-25, .unit-25 { width: 25%; }
@@ -41,51 +38,15 @@ textarea.unit-100 { width: 98.8%; }
41
38
  select.width-100,
42
39
  select.unit-100 { width: 99.4%; }
43
40
 
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
41
  .units-row .unit-80,
83
42
  .units-row .unit-75,
84
43
  .units-row .unit-70,
85
44
  .units-row .unit-66,
45
+ .units-row .unit-65,
86
46
  .units-row .unit-60,
87
47
  .units-row .unit-50,
88
48
  .units-row .unit-40,
49
+ .units-row .unit-35,
89
50
  .units-row .unit-33,
90
51
  .units-row .unit-30,
91
52
  .units-row .unit-25,
@@ -95,40 +56,20 @@ select.unit-100 { width: 99.4%; }
95
56
  .units-row-end .unit-75,
96
57
  .units-row-end .unit-70,
97
58
  .units-row-end .unit-66,
59
+ .units-row-end .unit-65,
98
60
  .units-row-end .unit-60,
99
61
  .units-row-end .unit-50,
100
62
  .units-row-end .unit-40,
63
+ .units-row-end .unit-35,
101
64
  .units-row-end .unit-33,
102
65
  .units-row-end .unit-30,
103
66
  .units-row-end .unit-25,
104
67
  .units-row-end .unit-20 {
105
68
  float: left;
106
69
  margin-left: @gridGutterWidth/(@gridWidth/100)*1%;
107
- }
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 {
131
- margin-left: 0;
70
+ &:first-child {
71
+ margin-left: 0;
72
+ }
132
73
  }
133
74
  .units-row .unit-80,
134
75
  .units-row-end .unit-80 { .columns(4, 5); }
@@ -138,16 +79,20 @@ select.unit-100 { width: 99.4%; }
138
79
  .units-row-end .unit-70 { .columns(7, 10); }
139
80
  .units-row .unit-66,
140
81
  .units-row-end .unit-66 { .columns(2, 3); }
82
+ .units-row .unit-65,
83
+ .units-row-end .unit-65 { .columns(2, 3); }
141
84
  .units-row .unit-60,
142
85
  .units-row-end .unit-60 { .columns(3, 5); }
143
86
  .units-row .unit-50,
144
87
  .units-row-end .unit-50 { .column(2); }
145
88
  .units-row .unit-40,
146
89
  .units-row-end .unit-40 { .columns(2, 5); }
147
- .units-row .unit-30,
148
- .units-row-end .unit-30 { .columns(3, 10); }
90
+ .units-row .unit-35,
91
+ .units-row-end .unit-35 { .column(3); }
149
92
  .units-row .unit-33,
150
93
  .units-row-end .unit-33 { .column(3); }
94
+ .units-row .unit-30,
95
+ .units-row-end .unit-30 { .columns(3, 10); }
151
96
  .units-row .unit-25,
152
97
  .units-row-end .unit-25 { .column(4); }
153
98
  .units-row .unit-20,
@@ -157,9 +102,11 @@ select.unit-100 { width: 99.4%; }
157
102
  .unit-push-75,
158
103
  .unit-push-70,
159
104
  .unit-push-66,
105
+ .unit-push-65,
160
106
  .unit-push-60,
161
107
  .unit-push-50,
162
108
  .unit-push-40,
109
+ .unit-push-35,
163
110
  .unit-push-33,
164
111
  .unit-push-30,
165
112
  .unit-push-25,
@@ -171,14 +118,17 @@ select.unit-100 { width: 99.4%; }
171
118
  .unit-push-75 { .columns-push(3, 4); }
172
119
  .unit-push-70 { .columns-push(7, 10); }
173
120
  .unit-push-66 { .columns-push(2, 3); }
121
+ .unit-push-65 { .columns-push(2, 3); }
174
122
  .unit-push-60 { .columns-push(3, 5); }
175
123
  .unit-push-50 { .column-push(2); }
176
124
  .unit-push-40 { .columns-push(2, 5); }
125
+ .unit-push-35 { .column-push(3); }
177
126
  .unit-push-33 { .column-push(3); }
178
127
  .unit-push-25 { .column-push(4); }
179
128
  .unit-push-20 { .column-push(5); }
180
129
 
181
- .unit-push-right {
130
+ .units-row .unit-push-right,
131
+ .units-row-end .unit-push-right {
182
132
  float: right;
183
133
  }
184
134
 
@@ -189,30 +139,34 @@ select.unit-100 { width: 99.4%; }
189
139
  }
190
140
 
191
141
  .unit-padding {
192
- padding: @baseLine/@em;
142
+ padding: @baseLine / @em;
193
143
  }
194
144
  .units-padding .unit-100,
195
145
  .units-padding .unit-80,
196
146
  .units-padding .unit-75,
197
147
  .units-padding .unit-70,
198
148
  .units-padding .unit-66,
149
+ .units-padding .unit-65,
199
150
  .units-padding .unit-60,
200
151
  .units-padding .unit-50,
201
152
  .units-padding .unit-40,
153
+ .units-padding .unit-35,
202
154
  .units-padding .unit-33,
203
155
  .units-padding .unit-30,
204
156
  .units-padding .unit-25,
205
157
  .units-padding .unit-20 {
206
- padding: @baseLine/@em;
158
+ padding: @baseLine / @em;
207
159
  }
208
160
 
209
161
  .units-split .unit-80,
210
162
  .units-split .unit-75,
211
163
  .units-split .unit-70,
212
164
  .units-split .unit-66,
165
+ .units-split .unit-65,
213
166
  .units-split .unit-60,
214
167
  .units-split .unit-50,
215
168
  .units-split .unit-40,
169
+ .units-split .unit-35,
216
170
  .units-split .unit-33,
217
171
  .units-split .unit-30,
218
172
  .units-split .unit-25,
@@ -223,11 +177,104 @@ select.unit-100 { width: 99.4%; }
223
177
  .units-split .unit-75 { width: 75%; }
224
178
  .units-split .unit-70 { width: 70%; }
225
179
  .units-split .unit-66 { width: 66.6%; }
180
+ .units-split .unit-65 { width: 65%; }
226
181
  .units-split .unit-60 { width: 60%; }
227
182
  .units-split .unit-50 { width: 50%; }
228
183
  .units-split .unit-40 { width: 40%; }
184
+ .units-split .unit-35 { width: 35%; }
229
185
  .units-split .unit-33 { width: 33.3%; }
230
186
  .units-split .unit-30 { width: 30%; }
231
187
  .units-split .unit-25 { width: 25%; }
232
188
  .units-split .unit-20 { width: 20%; }
233
189
 
190
+
191
+ /* =Responsive
192
+ -----------------------------------------------------------------------------*/
193
+ @media only screen and (max-width: 767px) {
194
+
195
+ .units-row .unit-80,
196
+ .units-row .unit-75,
197
+ .units-row .unit-70,
198
+ .units-row .unit-66,
199
+ .units-row .unit-65,
200
+ .units-row .unit-60,
201
+ .units-row .unit-50,
202
+ .units-row .unit-40,
203
+ .units-row .unit-35,
204
+ .units-row .unit-33,
205
+ .units-row .unit-30,
206
+ .units-row .unit-25,
207
+ .units-row .unit-20,
208
+ .units-row-end .unit-80,
209
+ .units-row-end .unit-75,
210
+ .units-row-end .unit-70,
211
+ .units-row-end .unit-66,
212
+ .units-row-end .unit-65,
213
+ .units-row-end .unit-60,
214
+ .units-row-end .unit-50,
215
+ .units-row-end .unit-40,
216
+ .units-row-end .unit-35,
217
+ .units-row-end .unit-33,
218
+ .units-row-end .unit-30,
219
+ .units-row-end .unit-25,
220
+ .units-row-end .unit-20 {
221
+ width: 100%;
222
+ float: none;
223
+ margin-left: 0;
224
+ margin-bottom: @baseLine/@em;
225
+ }
226
+
227
+ .unit-push-80,
228
+ .unit-push-75,
229
+ .unit-push-70,
230
+ .unit-push-66,
231
+ .unit-push-65,
232
+ .unit-push-60,
233
+ .unit-push-50,
234
+ .unit-push-40,
235
+ .unit-push-35,
236
+ .unit-push-33,
237
+ .unit-push-30,
238
+ .unit-push-25,
239
+ .unit-push-20 {
240
+ left: 0;
241
+ }
242
+
243
+ .units-row-end .unit-push-right,
244
+ .units-row .unit-push-right {
245
+ float: none;
246
+ }
247
+
248
+ .units-mobile-50 .unit-80,
249
+ .units-mobile-50 .unit-75,
250
+ .units-mobile-50 .unit-70,
251
+ .units-mobile-50 .unit-66,
252
+ .units-mobile-50 .unit-65,
253
+ .units-mobile-50 .unit-60,
254
+ .units-mobile-50 .unit-40,
255
+ .units-mobile-50 .unit-30,
256
+ .units-mobile-50 .unit-35,
257
+ .units-mobile-50 .unit-33,
258
+ .units-mobile-50 .unit-25,
259
+ .units-mobile-50 .unit-20 {
260
+ float: left;
261
+ margin-left: @gridGutterWidth/(@gridWidth/100)*1%;
262
+ .column(2);
263
+ }
264
+ .units-mobile-50 .unit-80:first-child,
265
+ .units-mobile-50 .unit-75:first-child,
266
+ .units-mobile-50 .unit-70:first-child,
267
+ .units-mobile-50 .unit-66:first-child,
268
+ .units-mobile-50 .unit-65:first-child,
269
+ .units-mobile-50 .unit-60:first-child,
270
+ .units-mobile-50 .unit-40:first-child,
271
+ .units-mobile-50 .unit-35:first-child,
272
+ .units-mobile-50 .unit-30:first-child,
273
+ .units-mobile-50 .unit-33:first-child,
274
+ .units-mobile-50 .unit-25:first-child,
275
+ .units-mobile-50 .unit-20:first-child {
276
+ margin-left: 0;
277
+ }
278
+
279
+
280
+ }