rapido-css 0.0.2.1 → 0.0.3

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.
@@ -17,40 +17,34 @@
17
17
  margin: 0;
18
18
  border: 0;
19
19
  }
20
+
20
21
  legend {
22
+ @include adjust-font-size-to($h5-size);
21
23
  display: block;
22
- width: 100%;
23
24
  padding: 0;
24
- @include adjust-font-size-to($h5-size);
25
+ width: 100%;
25
26
  font-weight: bold;
26
27
  border: 0;
27
28
  padding-bottom: rhythm(.5);
28
- margin-bottom: rhythm(.5) - 1;
29
+ margin-bottom: rhythm(.5);
29
30
  border-bottom: 1px solid #e5e5e5;
30
31
  small {
31
32
  font-size: em($base-font-size);
32
33
  color: $grayLight;
33
34
  }
34
35
  }
36
+
35
37
  label,
36
38
  input,
37
- button,
39
+ // button,
38
40
  select,
39
41
  textarea {
40
42
  line-height: 1em;
41
- }
42
- input,
43
- button,
44
- select,
45
- textarea {
46
43
  font-family: $base-font-family;
44
+ @include border-radius($base-border-radius);
47
45
  }
48
- label {
49
- display: block;
50
- margin-bottom: em($label-margin-bottom);
51
- font-weight: bold;
52
- cursor: auto;
53
- }
46
+
47
+ // input,
54
48
  textarea,
55
49
  input[type="text"],
56
50
  input[type="password"],
@@ -66,13 +60,14 @@
66
60
  input[type="search"],
67
61
  input[type="tel"],
68
62
  input[type="color"] {
69
- @include border-radius($base-border-radius);
70
63
  display: inline-block;
71
- padding: $input-padding;
64
+ padding: 0 $input-padding-side;
65
+ // padding: $input-padding;
72
66
  vertical-align: middle;
73
67
  height: $input-height;
74
68
  border-width: $input-border;
75
69
  border-style: solid;
70
+ line-height /*\**/: $input-height \9; // Ugly IE8 Hack
76
71
  @extend %input !optional;
77
72
 
78
73
  &:focus {outline: 0;}
@@ -83,6 +78,8 @@
83
78
  display: inline-block;
84
79
  }
85
80
 
81
+ label { display: block; }
82
+
86
83
  input,
87
84
  textarea {
88
85
  width: 240px;
@@ -97,7 +94,7 @@
97
94
 
98
95
  input[type="radio"],
99
96
  input[type="checkbox"] {
100
- margin: em(2px) 0 0;
97
+ margin: em(1px) 0 0;
101
98
  }
102
99
 
103
100
  input[type="file"],
@@ -110,9 +107,11 @@
110
107
  width: auto;
111
108
  }
112
109
 
113
- select, .select {
110
+ select,
111
+ .form__select {
114
112
  width: 240px;
115
113
  }
114
+
116
115
  select[multiple],
117
116
  select[size] {
118
117
  height: auto;
@@ -124,82 +123,6 @@
124
123
  @include placeholder();
125
124
  }
126
125
 
127
-
128
-
129
- // RADIO & CHECKBOX
130
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
131
- .radio,
132
- .checkbox,
133
- .select {
134
- min-height: em($base-line-height);
135
- padding-left: 20px;
136
- margin-bottom: 0;
137
- font-weight: normal;
138
- cursor: pointer;
139
- line-height: rhythm(1);
140
- }
141
- .select {padding-left: 0;}
142
-
143
- .radio input[type="radio"],
144
- .checkbox input[type="checkbox"] {
145
- float: left;
146
- margin-left: -20px;
147
- }
148
- .controls > .radio:first-child,
149
- .controls > .checkbox:first-child {
150
- }
151
- .radio.inline,
152
- .checkbox.inline {
153
- display: inline-block;
154
- margin-bottom: 0;
155
- vertical-align: middle;
156
- }
157
- .radio.inline + .radio.inline,
158
- .checkbox.inline + .checkbox.inline {
159
- margin-left: 20px;
160
- }
161
-
162
-
163
- // CUSTOM SELECT
164
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
165
- span.select {
166
- @extend %caret !optional;
167
- @include border-radius(3px);
168
- border-style: solid;
169
- border-width: $input-border;
170
- cursor: pointer;
171
- display: inline-block;
172
- height: $input-height;
173
- line-height: 1em;
174
- position: relative;
175
- width: 240px;
176
-
177
- select {
178
- @include appearance(none);
179
- background-color:transparent;
180
- background-image:none;
181
- border:none;
182
- box-shadow:none;
183
- cursor: pointer;
184
- padding: $input-padding;
185
- position: relative;
186
- width:100%;
187
- z-index: 3;
188
- line-height: 1em;
189
- }
190
-
191
- &:after {
192
- position: absolute;
193
- top: 50%;
194
- right: em($input-padding-side);
195
- content: "";
196
- display: block;
197
- }
198
-
199
- @extend %select !optional;
200
-
201
- }
202
-
203
126
  // DISABLED INPUTS
204
127
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
205
128
  input[disabled],
@@ -225,34 +148,137 @@
225
148
  border-color: darken(#ee5f5b, 10%);
226
149
  }
227
150
  }
151
+ }
228
152
 
229
- // HELP BLOCKS
230
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
231
- .help-block,
232
- .help-inline {
233
- color: lighten($text-color, 15%);
153
+
154
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
155
+ // Labels
156
+ // --------------------------------------------------------------------------------------------------------------------
157
+
158
+ .form__label {
159
+ font-weight: bold;
160
+ margin-bottom: em($label-margin-bottom);
161
+ cursor: auto;
162
+ }
163
+
164
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
165
+ // Radio & Checkbox
166
+ // --------------------------------------------------------------------------------------------------------------------
167
+
168
+ .form__radio,
169
+ .form__checkbox,
170
+ .form__select {
171
+ min-height: em($base-line-height);
172
+ padding-left: em($checkbox-padding-left);
173
+ font-weight: normal;
174
+ cursor: pointer;
175
+ }
176
+
177
+ .form__select {padding-left: 0;}
178
+
179
+ .form__radio input[type="radio"],
180
+ .form__checkbox input[type="checkbox"] {
181
+ float: left;
182
+ margin-left: -20px;
183
+ }
184
+ .form__radio.inline,
185
+ .form__checkbox.inline {
186
+ display: inline-block;
187
+ vertical-align: middle;
188
+ }
189
+ .form__radio.inline + .form__radio.inline,
190
+ .form__checkbox.inline + .form__checkbox.inline {
191
+ margin-left: 20px;
192
+ }
193
+
194
+
195
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
196
+ // Custom Select
197
+ // --------------------------------------------------------------------------------------------------------------------
198
+
199
+ .form__select {
200
+ @extend %caret !optional;
201
+ @include border-radius(3px);
202
+ border-style: solid;
203
+ border-width: $input-border;
204
+ cursor: pointer;
205
+ display: inline-block;
206
+ height: $input-height;
207
+ line-height: 1em;
208
+ position: relative;
209
+ width: 240px;
210
+
211
+ select {
212
+ @include appearance(none);
213
+ background-color:transparent;
214
+ background-image:none;
215
+ border:none;
216
+ box-shadow:none;
217
+ cursor: pointer;
218
+ padding: $input-padding;
219
+ position: relative;
220
+ width:100%;
221
+ z-index: 3;
222
+ line-height: 1em;
234
223
  }
235
- .help-block {
224
+
225
+ &:after {
226
+ @include position(absolute, em($input-padding-top) em($input-padding-side) 0 0);
236
227
  display: block;
237
- padding: rhythm(.5) 0 0;
238
- }
239
- .help-inline {
240
- @include inline-block();
241
- vertical-align: middle;
242
- padding-left: 5px;
243
228
  }
244
229
 
230
+ @extend %select !optional;
245
231
 
246
- // CONTROL GROUPS & CONTROLS
247
- // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
248
- .control-group {
249
- margin-bottom: em($control-margin-bottom);
232
+ }
250
233
 
251
- .control { @extend .clearfix; }
252
- }
253
234
 
235
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
236
+ // Help
237
+ // --------------------------------------------------------------------------------------------------------------------
238
+
239
+ .form__help--block,
240
+ .form__help--inline {
241
+ color: lighten($text-color, 15%);
242
+ }
243
+ .form__help--block {
244
+ display: block;
245
+ padding: rhythm(.5) 0 0;
246
+ }
247
+ .form__help--inline {
248
+ @include inline-block();
249
+ vertical-align: middle;
250
+ padding-left: 5px;
254
251
  }
255
252
 
253
+
254
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
255
+ // Addon
256
+ // --------------------------------------------------------------------------------------------------------------------
257
+
258
+ .form__addon {
259
+ display: inline-block;
260
+ width: auto;
261
+ min-width: em(16px);
262
+ padding: $input-padding;
263
+ line-height: 1em;
264
+ font-weight: normal;
265
+ float: left;
266
+ height: $input-height;
267
+ text-align: center;
268
+ border-width: $input-border;
269
+ border-style: solid;
270
+ @extend %input-addon !optional;
271
+ }
272
+
273
+
274
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
275
+ // Group & Controls
276
+ // --------------------------------------------------------------------------------------------------------------------
277
+
278
+ .form__group { margin-bottom: em($control-margin-bottom); }
279
+ .form__controls { @extend .clearfix; }
280
+
281
+
256
282
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
257
283
  // Form Actions
258
284
  // --------------------------------------------------------------------------------------------------------------------
@@ -266,61 +292,79 @@
266
292
  @extend .clearfix;
267
293
  }
268
294
 
295
+
269
296
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
270
- // Form Inline
297
+ // Append & Prepend
271
298
  // --------------------------------------------------------------------------------------------------------------------
272
- @if $forms-inline {
273
299
 
274
- .form--inline {
300
+ .form__controls--multi {
301
+ margin-left: $input-border;
275
302
 
276
- input,
277
- textarea,
278
- select,
279
- .help-inline,
280
- .uneditable-input,
281
- .input-prepend,
282
- .input-append {
303
+ > [type],
304
+ > [class] {
305
+ @include border-radius(0);
283
306
  float: left;
284
- margin-bottom: 0;
285
- vertical-align: middle;
286
- margin-right: em(8px);
287
- }
307
+ margin-left: -$input-border;
288
308
 
289
- .hide {
290
- display: none;
309
+ &:first-child { @include border-radius($base-border-radius 0 0 $base-border-radius); }
310
+ &:last-child { @include border-radius(0 $base-border-radius $base-border-radius 0); }
291
311
  }
292
312
 
293
- label {
294
- padding-top: em($input-padding-top);
295
- margin-right: em(8px);
313
+ > ul.btn-group + * {
314
+ margin-left: -($input-border * 2);
296
315
  }
297
316
 
298
- label,
299
- .btn-group {
300
- display: inline-block;
301
- float: left;
317
+ > [type] {
318
+ position: relative;
319
+ z-index: 2;
302
320
  }
303
321
 
304
- .input-append,
305
- .input-prepend {
306
- margin-bottom: 0;
307
- }
322
+ // Correct border radius
323
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
308
324
 
309
- .radio,
310
- .checkbox {
311
- padding-left: 0;
312
- margin-bottom: 0;
313
- vertical-align: middle;
314
- }
325
+ > .btn-group:first-child > li:first-child .btn { }
326
+ > .btn-group:first-child > li:last-child .btn { @include border-right-radius(0); }
327
+ > div.btn-group:first-child .btn { @include border-right-radius(0); }
315
328
 
316
- .radio input[type="radio"],
317
- .checkbox input[type="checkbox"] {
318
- float: left;
319
- margin-right: 3px;
320
- margin-left: 0;
329
+ > .btn-group:last-child > li:first-child .btn { @include border-left-radius(0); }
330
+ > .btn-group:last-child > li:last-child .btn { }
331
+ > div.btn-group:last-child > .btn { @include border-left-radius(0); }
332
+
333
+ /*
334
+ // DEBUG
335
+
336
+ > .btn-group:first-child > li:first-child .btn { background: red !important; }
337
+ > .btn-group:first-child > li:last-child .btn { background: blue !important; }
338
+ > div.btn-group:first-child .btn { background: green !important; }
339
+
340
+ > .btn-group:last-child > li:first-child .btn { background: purple !important; }
341
+ > .btn-group:last-child > li:last-child .btn { background: yellow !important; }
342
+ > div.btn-group:last-child > .btn { background: teal !important; }
343
+ */
344
+
345
+
346
+ }
347
+
348
+
349
+ // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
350
+ // Form Grid
351
+ // --------------------------------------------------------------------------------------------------------------------
352
+
353
+ @if $forms-grid {
354
+ .form--grid {
355
+ .form__group { min-height: $control-min-height; }
356
+ .form__multi { width: 100%; }
357
+ input, button {padding: 0 $input-padding-side;}
358
+
359
+ // $i: 100;
360
+ // @while $i > 0 {
361
+ // [data-width="#{$i}"] { @extend %width-#{$i}; }
362
+ // $i: $i - 5;
363
+ // }
321
364
  }
322
365
  }
323
- }
366
+
367
+
324
368
 
325
369
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
326
370
  // Form Aligned
@@ -329,88 +373,74 @@
329
373
  @if $forms-aligned {
330
374
 
331
375
  .form--aligned {
332
- @extend .clearfix;
333
376
 
334
- .control-label {
377
+ .form__label {
335
378
  float: left;
336
379
  width: em($horizontal-offset) - em(20px);
337
380
  padding-top: em($input-padding-top);
338
381
  text-align: right;
339
382
  }
340
383
 
341
- .controls {
342
- margin-left: em($horizontal-offset);
343
- }
344
-
345
- .help-block {
346
- margin-bottom: 0;
347
- }
384
+ .form__controls { margin-left: em($horizontal-offset); }
348
385
 
349
- input,
350
- select,
351
- textarea,
352
- .uneditable-input,
353
- .input-prepend,
354
- .input-append {
355
- // + .help-block {
356
- // margin: rhythm(.5) 0 0;
357
- // }
358
- }
359
-
360
- select {
361
- // margin-top: $input-padding-top;
362
- }
386
+ .form__help--block { margin-bottom: 0; }
363
387
 
364
- .controls > .radio:first-child,
365
- .controls > .checkbox:first-child {
366
- padding-top: em($input-padding-top) - em(2px);
388
+ .form__controls > .form__radio:first-child,
389
+ .form__controls > .form__checkbox:first-child {
390
+ margin-top: em($input-padding-top);
367
391
  }
368
392
 
369
- .controls > .radio.inline,
370
- .controls > .checkbox.inline{
371
- padding-top: em($input-padding-top) - em(2px);
393
+ .form__controls > .form__radio.inline,
394
+ .form__controls > .form__checkbox.inline{
395
+ margin-top: em($input-padding-top);
372
396
  }
373
397
 
374
- .form-actions {
398
+ .form__actions {
375
399
  padding-left: em($horizontal-offset);
376
400
  }
377
401
 
378
402
  @include media(palm) {
379
- .control-label {
403
+ .form__label {
380
404
  width: 100%;
381
405
  float: none;
382
406
  padding-top: 0;
383
407
  text-align: left;
384
408
  }
385
409
 
386
- .controls {
387
- margin-left: 0;
388
- }
389
-
390
- .form-actions {
391
- padding-left: 0;
392
- }
410
+ .form__controls { margin-left: 0; }
411
+ .form__actions { padding-left: 0; }
393
412
  }
394
413
  }
395
414
  }
396
415
 
416
+
397
417
  // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
398
- // Form Columns
418
+ // Form Inline
399
419
  // --------------------------------------------------------------------------------------------------------------------
400
420
 
401
- @if $forms-columns {
421
+ @if $forms-inline {
402
422
 
403
- .form--columns {
423
+ .form--inline {
404
424
 
405
- .control-group {
406
- min-height: $control-min-height;
407
- .input-append,
408
- .input-prepend {
409
- width: 100%;
410
- .add-on {
411
- padding: em($input-padding-top) 0;
412
- }
413
- }
425
+ > * {
426
+ float: left;
427
+ vertical-align: middle;
428
+ margin: 0 em(8px) 0 0;
429
+ padding-left: 0;
430
+ }
431
+
432
+ .form__help--inline,
433
+ .form__label,
434
+ .form__radio,
435
+ .form__checkbox {
436
+ padding-top: em($input-padding-top);
437
+ }
438
+
439
+ .form__radio input[type="radio"],
440
+ .form__checkbox input[type="checkbox"] {
441
+ float: left;
442
+ margin-right: em(4px);
443
+ margin-left: 0;
414
444
  }
415
445
  }
416
446
  }