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.
@@ -1,209 +1,332 @@
1
1
  /* =Forms
2
2
  -----------------------------------------------------------------------------*/
3
- .forms {
4
- & label {
5
- display: block;
6
- margin-bottom: @fieldsBottom;
3
+ form {
4
+ margin-bottom: @base-line;
5
+ }
6
+ select[multiple="multiple"],
7
+ textarea {
8
+ width: 100%;
9
+ }
10
+ input[type="email"],
11
+ input[type="number"],
12
+ input[type="search"],
13
+ input[type="text"],
14
+ input[type="tel"],
15
+ input[type="url"],
16
+ input[type="password"],
17
+ textarea,
18
+ select {
19
+ font-family: @font-family-base;
20
+ font-size: @font-size-btn-normal;
21
+ padding: @padding-input;
22
+ line-height: 1;
23
+ height: @input-height;
24
+ outline: none;
25
+ background: @color-input-background;
26
+ border: @input-border-size solid @color-input-border;
27
+ border-radius: @global-radius;
28
+ margin-bottom: 0;
29
+ color: @color-input;
30
+ &[disabled] {
31
+ resize: none;
32
+ opacity: 0.55;
33
+ cursor: default;
34
+ }
35
+ }
36
+ input[type="email"],
37
+ input[type="number"],
38
+ input[type="search"],
39
+ input[type="text"],
40
+ input[type="tel"],
41
+ input[type="url"],
42
+ input[type="password"] {
43
+ -webkit-appearance: none;
44
+ }
45
+ select[multiple],
46
+ textarea {
47
+ height: auto;
48
+ line-height: 1.5;
49
+ }
50
+ textarea {
51
+ font-size: @font-size + 0px;
52
+ }
53
+ textarea,
54
+ select,
55
+ input {
56
+ &:focus {
57
+ outline: none;
58
+ background: @color-input-background-focus;
59
+ border: @input-border-size solid @color-input-border-focus;
7
60
  }
61
+ }
8
62
 
9
- & fieldset {
10
- padding-bottom: .5em;
11
- border-radius: 4px;
63
+ // Fieldset
64
+ fieldset {
65
+ padding: 31px 32px;
66
+ margin-bottom: @base-line;
67
+ border: @fieldset-border-size solid @color-fieldset-border;
68
+ border-radius: @global-radius;
69
+ & *:last-child {
70
+ margin-bottom: 0 !important;
12
71
  }
72
+ }
73
+ legend {
74
+ font-weight: 500;
75
+ font-size: @font-size-small;
76
+ text-transform: uppercase;
77
+ padding: 0 1em;
78
+ margin-left: -1em;
79
+ top: 2px;
80
+ position: relative;
81
+ line-height: 0;
82
+ }
13
83
 
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 {
84
+ // Collection
85
+ .forms {
86
+ & section {
29
87
  display: block;
30
88
  }
31
- }
32
- .forms-inline,
33
- .forms-inline-list {
34
- & input[type="text"],
35
- & input[type="password"],
89
+ & section,
90
+ & p {
91
+ margin-bottom: @base-line;
92
+ }
93
+ & textarea,
94
+ & select,
36
95
  & input[type="email"],
37
- & input[type="url"],
38
- & input[type="phone"],
39
- & input[type="tel"],
40
96
  & input[type="number"],
41
- & input[type="datetime"],
42
- & input[type="date"],
43
97
  & input[type="search"],
44
- & input[type="range"],
45
- & input[type="file"],
46
- & input[type="datetime-local"],
98
+ & input[type="text"],
99
+ & input[type="tel"],
100
+ & input[type="url"],
101
+ & input[type="password"] {
102
+ width: 100%;
103
+ display: block;
104
+ }
105
+ & label {
106
+ font-size: @font-size-form-label;
107
+ display: block;
108
+ &.checkbox {
109
+ text-transform: none;
110
+ font-weight: normal;
111
+ cursor: pointer;
112
+ color: inherit;
113
+ font-size: inherit;
114
+ }
115
+ }
116
+ & .label-top {
117
+ padding-top: @base-line;
118
+ }
119
+ & .checkbox-list {
120
+ display: block;
121
+ & label {
122
+ font-size: inherit;
123
+ color: inherit;
124
+ display: inline-block;
125
+ margin-bottom: 0;
126
+ margin-right: 16px;
127
+ text-transform: none;
128
+ font-weight: normal;
129
+ }
130
+ }
131
+ & .checkbox-list-vertical {
132
+ & .checkbox {
133
+ margin-bottom: 8px;
134
+ &:last-child {
135
+ margin-bottom: 0;
136
+ }
137
+ }
138
+ }
139
+ & input,
47
140
  & textarea,
48
141
  & select {
49
- display: inline-block;
142
+ &.width-1 { .col(1); }
143
+ &.width-2 { .col(2); }
144
+ &.width-3 { .col(3); }
145
+ &.width-4 { .col(4); }
146
+ &.width-5 { .col(5); }
147
+ &.width-6 { .col(6); }
148
+ &.width-7 { .col(7); }
149
+ &.width-8 { .col(8); }
150
+ &.width-9 { .col(9); }
151
+ &.width-10 { .col(10); }
152
+ &.width-11 { .col(11); }
153
+ &.width-12 { width: 100%; }
50
154
  }
51
- }
155
+ &.form-inline,
156
+ & .form-inline {
52
157
 
53
- .forms-list,
54
- .forms-inline-list {
55
- margin: 0;
56
- padding: 0;
57
- margin-bottom: @fieldsBottom;
58
- list-style: none;
59
- }
60
- .forms-list label,
61
- .forms-inline-list li,
62
- .forms-inline-list li label {
63
- display: inline-block;
64
- margin-bottom: 0;
65
- }
66
- .forms-inline-list li label {
67
- margin-right: @fieldsBottom;
68
- }
69
- .forms-inline-list li {
70
- margin-bottom: 3px;
71
- }
72
- .forms-list li {
73
- margin-bottom: 6px;
74
- }
75
- .forms-desc {
76
- margin-top: 4px;
77
- color: rgba(0, 0, 0, .4);
78
- font-size: @smallFontSize;
79
- line-height: 1.4em;
158
+ & textarea,
159
+ & select,
160
+ & input[type="email"],
161
+ & input[type="number"],
162
+ & input[type="search"],
163
+ & input[type="text"],
164
+ & input[type="tel"],
165
+ & input[type="url"],
166
+ & input[type="password"],
167
+ & .tools-select {
168
+ width: auto;
169
+ display: inline-block;
170
+ }
171
+ }
80
172
  }
81
173
 
174
+ @media (max-width: @breakpoint-small) {
82
175
 
83
- input[type="radio"],
84
- input[type="checkbox"] {
85
- position: relative;
86
- top: -1px;
176
+ .forms {
177
+ & .label-top {
178
+ padding-top: 0;
179
+ }
180
+ & input,
181
+ & textarea,
182
+ & select {
183
+ &.width-1,
184
+ &.width-2,
185
+ &.width-3,
186
+ &.width-4,
187
+ &.width-5,
188
+ &.width-6,
189
+ &.width-7,
190
+ &.width-8,
191
+ &.width-9,
192
+ &.width-10,
193
+ &.width-11,
194
+ &.width-12 { width: 100%; }
195
+ }
196
+ }
87
197
  }
88
- input[type="text"],
89
- input[type="password"],
90
- input[type="email"],
91
- input[type="url"],
92
- input[type="phone"],
93
- input[type="tel"],
94
- input[type="number"],
95
- input[type="datetime"],
96
- input[type="date"],
97
- input[type="search"],
98
- input[type="datetime-local"],
99
- textarea {
100
- .transition(border ease .5s);
198
+
199
+
200
+ // Descriptions
201
+ .desc {
202
+ text-transform: none;
203
+ margin-top: 4px;
204
+ color: rgba(0, 0, 0, .5);
205
+ font-size: 12px;
206
+ line-height: @base-line-small;
207
+ font-weight: normal;
101
208
  }
102
- input[type="range"] {
103
- position: relative;
104
- top: 3px;
209
+ ul.desc {
210
+ margin-bottom: 8px;
105
211
  }
106
- textarea {
107
- line-height: 1.4em;
108
- }
109
- select {
110
- margin-bottom: 0 !important;
212
+ span.desc {
213
+ margin-left: 4px;
214
+ line-height: @base-line-small;
111
215
  }
112
216
 
113
- /* States */
217
+ // States
114
218
  .error,
115
219
  .success {
220
+ text-transform: none;
116
221
  font-weight: normal;
117
- font-size: @smallFontSize;
222
+ font-size: 12px;
223
+ display: inline-block;
224
+ }
225
+ span.error,
226
+ span.success {
227
+ margin-left: .4rem;
118
228
  }
119
229
  input.input-error,
120
230
  textarea.input-error,
121
231
  select.input-error,
122
232
  .input-error {
123
- border-color: @colorRed;
124
- box-shadow: 0 0 0 2px rgba(red(@colorRed), green(@colorRed), blue(@colorRed), .3),0 1px 2px rgba(0, 0, 0, .2) inset;
233
+ margin-top: -1px;
234
+ background: none;
235
+ background-color: rgba(red(@color-error), green(@color-error), blue(@color-error), .1);
236
+ border: @input-border-size solid @color-error;
125
237
  }
126
238
  input.input-success,
127
239
  textarea.input-success,
128
240
  select.input-success,
129
241
  .input-success {
130
- border-color: @colorGreen;
131
- box-shadow: 0 0 0 2px rgba(red(@colorGreen), green(@colorGreen), blue(@colorGreen), .3),0 1px 2px rgba(0, 0, 0, .2) inset;
242
+ margin-top: -1px;
243
+ background: none;
244
+ background-color: rgba(red(@color-success), green(@color-success), blue(@color-success), .1);
245
+ border: @input-border-size solid @color-success;
132
246
 
133
247
  }
134
- input.input-gray,
135
- textarea.input-gray,
136
- select.input-gray,
137
- .input-gray {
138
- border-color: #ccc;
139
- box-shadow: 0 0 0 2px rgba(204, 204, 204, .3),0 1px 2px rgba(0, 0, 0, .2) inset;
140
- }
141
248
 
142
- input:focus,
143
- textarea:focus {
144
- outline: none;
145
- border-color: #5ca9e4;
146
- box-shadow: 0 0 0 2px rgba(70, 161, 231, .3), 0 1px 2px rgba(0, 0, 0, .2) inset;
249
+ // Sizes
250
+ input.input-big {
251
+ font-size: @font-size-btn-big;
252
+ padding: @padding-input-big;
253
+ height: @input-height-big;
147
254
  }
148
-
149
- input.input-search,
150
- input[type="search"] {
151
- padding-right: 10px;
152
- padding-left: 10px;
153
- margin-bottom: 0;
154
- border-radius: 15px;
255
+ select.select-big {
256
+ font-size: @font-size-btn-big;
257
+ height: @input-height-big;
258
+ padding: 6px 10px;
155
259
  }
156
-
157
- /* Append & Prepend */
158
- .input-groups {
159
- display: table !important;
260
+ input.input-small {
261
+ font-size: @font-size-btn-small;
262
+ padding: @padding-input-small;
263
+ height: @input-height-small;
160
264
  }
161
- .input-groups input {
162
- width: 100%;
265
+ select.select-small {
266
+ font-size: @font-size-btn-small;
267
+ height: @input-height-small;
268
+ padding: 6px 10px;
163
269
  }
164
- .input-groups input,
165
- .input-groups .input-append,
166
- .input-groups .input-prepend,
167
- .input-groups .btn-append {
168
- display: table-cell !important;
169
- }
170
- .input-groups .btn-append,
171
- .input-groups .input-append,
172
- .input-groups .input-prepend {
173
- width: 1%;
174
- vertical-align: middle;
175
- }
176
- .input-groups .input-append,
177
- .input-groups .input-prepend {
178
- background-color: #eee;
179
- border: 1px solid #ccc;
180
- margin: 0;
181
- padding: 0 7px;
182
- color: rgba(0, 0, 0, .5);
183
- line-height: 1;
184
- font-size: @smallFontSize;
185
- white-space: nowrap;
186
- }
187
- .input-groups .input-prepend {
188
- border-right: none;
270
+
271
+ // Append
272
+ .input-append,
273
+ .input-prepend {
274
+
275
+ display: -webkit-box;
276
+ display: -moz-box;
277
+ display: -ms-flexbox;
278
+ display: -webkit-flex;
279
+ display: flex;
280
+
281
+ margin-bottom: @base-line;
282
+
283
+ & input {
284
+ flex: 1;
285
+ margin-bottom: 0 !important;
286
+ }
287
+ & span {
288
+ -webkit-flex-shrink: 0;
289
+ display: block;
290
+ font-weight: normal;
291
+ background-color: @background-input-append;
292
+ margin: 0;
293
+ padding: 0 1rem;
294
+ color: @color-input-append;
295
+ font-size: @font-size-small;
296
+ line-height: @input-height;
297
+ white-space: nowrap;
298
+ }
189
299
  }
190
- .input-groups .input-append {
191
- position: relative;
192
- z-index: 1;
193
- border-left: none;
300
+ .input-append {
301
+ & span {
302
+ position: relative;
303
+ z-index: 1;
304
+ border-left: none;
305
+ border-radius: 0 @global-radius @global-radius 0;
306
+ }
307
+ & input {
308
+ border-radius: @global-radius 0 0 @global-radius;
309
+ }
194
310
  }
195
- .input-groups .btn-append .btn {
196
- display: block;
197
- height: auto;
198
- border-radius: 0 4px 4px 0;
311
+ .input-prepend {
312
+ & span {
313
+ border-right: none;
314
+ border-radius: @global-radius 0 0 @global-radius;
315
+ }
316
+ & input {
317
+ border-radius: 0 @global-radius @global-radius 0;
318
+ }
199
319
  }
320
+ .btn-append {
200
321
 
201
- /* =Mobile (Portrait)
202
- -----------------------------------------------------------------------------*/
203
- @media only screen and (max-width: 767px) {
322
+ display: -webkit-box;
323
+ display: -moz-box;
324
+ display: -ms-flexbox;
325
+ display: -webkit-flex;
326
+ display: flex;
204
327
 
205
- .forms-list label {
206
- display: inline-block;
328
+ & button,
329
+ & .btn {
330
+ flex: 1;
207
331
  }
208
-
209
- }
332
+ }