purecss 0.0.11 → 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,5 +1,5 @@
1
1
  /*!
2
- Pure v0.1.1-pre
2
+ Pure v0.2.1-pre
3
3
  Copyright 2013 Yahoo! Inc. All rights reserved.
4
4
  Licensed under the BSD License.
5
5
  https://github.com/yui/pure/blob/master/LICENSE.md
@@ -158,228 +158,310 @@ Copyright (c) Nicolas Gallagher and Jonathan Neal
158
158
  vertical-align: top; /* 2 */
159
159
  }
160
160
 
161
- .pure-form input,
161
+ .pure-form input[type="text"],
162
+ .pure-form input[type="password"],
163
+ .pure-form input[type="email"],
164
+ .pure-form input[type="url"],
165
+ .pure-form input[type="date"],
166
+ .pure-form input[type="month"],
167
+ .pure-form input[type="time"],
168
+ .pure-form input[type="datetime"],
169
+ .pure-form input[type="datetime-local"],
170
+ .pure-form input[type="week"],
171
+ .pure-form input[type="number"],
172
+ .pure-form input[type="search"],
173
+ .pure-form input[type="tel"],
174
+ .pure-form input[type="color"],
162
175
  .pure-form select,
163
176
  .pure-form textarea {
164
- padding: 0.5em 0.6em;
165
- display: inline-block;
166
- border: 1px solid #ccc;
167
- font-size: 0.8em;
168
- box-shadow: inset 0 1px 3px #ddd;
169
- border-radius: 4px;
170
- -webkit-transition: 0.3s linear border;
171
- -moz-transition: 0.3s linear border;
172
- -ms-transition: 0.3s linear border;
173
- -o-transition: 0.3s linear border;
174
- transition: 0.3s linear border;
175
- -webkit-box-sizing: border-box;
176
- -moz-box-sizing: border-box;
177
- box-sizing: border-box;
178
- -webkit-font-smoothing: antialiased;
179
- }
180
-
181
- .pure-form input:focus,
177
+ padding: 0.5em 0.6em;
178
+ display: inline-block;
179
+ border: 1px solid #ccc;
180
+ font-size: 0.8em;
181
+ box-shadow: inset 0 1px 3px #ddd;
182
+ border-radius: 4px;
183
+ -webkit-transition: 0.3s linear border;
184
+ -moz-transition: 0.3s linear border;
185
+ -ms-transition: 0.3s linear border;
186
+ -o-transition: 0.3s linear border;
187
+ transition: 0.3s linear border;
188
+ -webkit-box-sizing: border-box;
189
+ -moz-box-sizing: border-box;
190
+ box-sizing: border-box;
191
+ -webkit-font-smoothing: antialiased;
192
+ }
193
+
194
+ .pure-form input[type="text"]:focus,
195
+ .pure-form input[type="password"]:focus,
196
+ .pure-form input[type="email"]:focus,
197
+ .pure-form input[type="url"]:focus,
198
+ .pure-form input[type="date"]:focus,
199
+ .pure-form input[type="month"]:focus,
200
+ .pure-form input[type="time"]:focus,
201
+ .pure-form input[type="datetime"]:focus,
202
+ .pure-form input[type="datetime-local"]:focus,
203
+ .pure-form input[type="week"]:focus,
204
+ .pure-form input[type="number"]:focus,
205
+ .pure-form input[type="search"]:focus,
206
+ .pure-form input[type="tel"]:focus,
207
+ .pure-form input[type="color"]:focus,
182
208
  .pure-form select:focus,
183
209
  .pure-form textarea:focus {
184
- outline: 0;
185
- outline: thin dotted \9; /* IE6-9 */
186
- border-color: #129FEA;
210
+ outline: 0;
211
+ outline: thin dotted \9; /* IE6-9 */
212
+ border-color: #129FEA;
187
213
  }
214
+
188
215
  .pure-form input[type="file"]:focus,
189
216
  .pure-form input[type="radio"]:focus,
190
217
  .pure-form input[type="checkbox"]:focus {
191
- outline: thin dotted #333;
192
- outline: 1px auto #129FEA;
218
+ outline: thin dotted #333;
219
+ outline: 1px auto #129FEA;
193
220
  }
194
221
  .pure-form .pure-checkbox,
195
222
  .pure-form .pure-radio {
196
- margin: 0.5em 0;
197
- display: block;
198
- }
199
- .pure-form input[disabled],
223
+ margin: 0.5em 0;
224
+ display: block;
225
+ }
226
+ .pure-form input[type="text"][disabled],
227
+ .pure-form input[type="password"][disabled],
228
+ .pure-form input[type="email"][disabled],
229
+ .pure-form input[type="url"][disabled],
230
+ .pure-form input[type="date"][disabled],
231
+ .pure-form input[type="month"][disabled],
232
+ .pure-form input[type="time"][disabled],
233
+ .pure-form input[type="datetime"][disabled],
234
+ .pure-form input[type="datetime-local"][disabled],
235
+ .pure-form input[type="week"][disabled],
236
+ .pure-form input[type="number"][disabled],
237
+ .pure-form input[type="search"][disabled],
238
+ .pure-form input[type="tel"][disabled],
239
+ .pure-form input[type="color"][disabled],
200
240
  .pure-form select[disabled],
201
241
  .pure-form textarea[disabled],
202
242
  .pure-form input[readonly],
203
243
  .pure-form select[readonly],
204
244
  .pure-form textarea[readonly] {
205
- cursor: not-allowed;
206
- background-color: #eaeded;
207
- color: #cad2d3;
208
- border-color: transparent;
245
+ cursor: not-allowed;
246
+ background-color: #eaeded;
247
+ color: #cad2d3;
248
+ border-color: transparent;
209
249
  }
210
250
  .pure-form input:focus:invalid,
211
251
  .pure-form textarea:focus:invalid,
212
252
  .pure-form select:focus:invalid {
213
- color: #b94a48;
214
- border: 1px solid #ee5f5b;
253
+ color: #b94a48;
254
+ border: 1px solid #ee5f5b;
215
255
  }
216
256
  .pure-form input:focus:invalid:focus,
217
257
  .pure-form textarea:focus:invalid:focus,
218
258
  .pure-form select:focus:invalid:focus {
219
- border-color: #e9322d;
259
+ border-color: #e9322d;
220
260
  }
221
261
  .pure-form input[type="file"]:focus:invalid:focus,
222
262
  .pure-form input[type="radio"]:focus:invalid:focus,
223
263
  .pure-form input[type="checkbox"]:focus:invalid:focus {
224
- outline-color: #e9322d;
264
+ outline-color: #e9322d;
225
265
  }
226
266
  .pure-form select {
227
- border: 1px solid #ccc;
228
- background-color: white;
267
+ border: 1px solid #ccc;
268
+ background-color: white;
229
269
  }
230
270
  .pure-form select[multiple] {
231
- height: auto;
271
+ height: auto;
232
272
  }
233
273
  .pure-form label {
234
- margin: 0.5em 0 0.2em;
235
- color: #999;
236
- font-size:90%;
274
+ margin: 0.5em 0 0.2em;
275
+ color: #999;
276
+ font-size: 90%;
237
277
  }
238
278
  .pure-form fieldset {
239
- margin: 0;
240
- padding: 0.35em 0 0.75em;
241
- border: 0;
279
+ margin: 0;
280
+ padding: 0.35em 0 0.75em;
281
+ border: 0;
242
282
  }
243
283
  .pure-form legend {
244
- display: block;
245
- width: 100%;
246
- padding: 0.3em 0;
247
- margin-bottom: 0.3em;
248
- font-size: 125%;
249
- color: #333;
250
- border-bottom: 1px solid #e5e5e5;
251
- }
252
-
253
- .pure-form-stacked input[type='text'],
284
+ display: block;
285
+ width: 100%;
286
+ padding: 0.3em 0;
287
+ margin-bottom: 0.3em;
288
+ font-size: 125%;
289
+ color: #333;
290
+ border-bottom: 1px solid #e5e5e5;
291
+ }
292
+
293
+ .pure-form-stacked input[type="text"],
294
+ .pure-form-stacked input[type="password"],
295
+ .pure-form-stacked input[type="email"],
296
+ .pure-form-stacked input[type="url"],
297
+ .pure-form-stacked input[type="date"],
298
+ .pure-form-stacked input[type="month"],
299
+ .pure-form-stacked input[type="time"],
300
+ .pure-form-stacked input[type="datetime"],
301
+ .pure-form-stacked input[type="datetime-local"],
302
+ .pure-form-stacked input[type="week"],
303
+ .pure-form-stacked input[type="number"],
304
+ .pure-form-stacked input[type="search"],
305
+ .pure-form-stacked input[type="tel"],
306
+ .pure-form-stacked input[type="color"],
254
307
  .pure-form-stacked select,
255
308
  .pure-form-stacked label {
256
- display: block;
309
+ display: block;
257
310
  }
258
311
 
259
312
  .pure-form-aligned input,
260
313
  .pure-form-aligned textarea,
261
314
  .pure-form-aligned select,
262
- .pure-form-aligned .pure-help-inline, /* note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */
315
+ /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
316
+ .pure-form-aligned .pure-help-inline,
263
317
  .pure-form-message-inline {
264
- display: inline-block;
265
- *display: inline; /* IE7 inline-block hack */
266
- *zoom: 1;
267
- vertical-align: middle;
318
+ display: inline-block;
319
+ *display: inline;
320
+ *zoom: 1;
321
+ vertical-align: middle;
268
322
  }
269
323
 
270
- /* aligned Forms */
324
+ /* Aligned Forms */
271
325
  .pure-form-aligned .pure-control-group {
272
- margin-bottom: 0.5em;
326
+ margin-bottom: 0.5em;
273
327
  }
274
328
  .pure-form-aligned .pure-control-group label {
275
- text-align: right;
276
- display: inline-block;
277
- vertical-align: middle;
278
- width: 10em;
279
- margin: 0 1em 0 0;
329
+ text-align: right;
330
+ display: inline-block;
331
+ vertical-align: middle;
332
+ width: 10em;
333
+ margin: 0 1em 0 0;
280
334
  }
281
335
  .pure-form-aligned .pure-controls {
282
- margin: 1.5em 0 0 10em;
336
+ margin: 1.5em 0 0 10em;
283
337
  }
284
338
 
285
339
  /* Rounded Inputs */
286
340
  .pure-form .pure-input-rounded {
287
- border-radius: 20px;
288
- padding-left: 1em;
341
+ border-radius: 20px;
342
+ padding-left: 1em;
289
343
  }
290
344
 
291
345
  /* Grouped Inputs */
292
346
  .pure-form .pure-group fieldset {
293
- margin-bottom: 10px;
347
+ margin-bottom: 10px;
294
348
  }
295
349
  .pure-form .pure-group input {
296
- display: block;
297
- padding: 10px;
298
- margin: 0;
299
- border-radius: 0;
300
- position: relative;
301
- top: -1px;
350
+ display: block;
351
+ padding: 10px;
352
+ margin: 0;
353
+ border-radius: 0;
354
+ position: relative;
355
+ top: -1px;
302
356
  }
303
357
  .pure-form .pure-group input:focus {
304
- z-index: 2;
358
+ z-index: 2;
305
359
  }
306
360
  .pure-form .pure-group input:first-child {
307
- top: 1px;
308
- border-radius: 4px 4px 0 0;
361
+ top: 1px;
362
+ border-radius: 4px 4px 0 0;
309
363
  }
310
364
  .pure-form .pure-group input:last-child {
311
- top: -2px;
312
- border-radius: 0 0 4px 4px;
365
+ top: -2px;
366
+ border-radius: 0 0 4px 4px;
313
367
  }
314
368
  .pure-form .pure-group button {
315
- margin: 0.35em 0;
369
+ margin: 0.35em 0;
316
370
  }
317
371
 
318
372
  .pure-form .pure-input-1 {
319
- width: 100%;
373
+ width: 100%;
320
374
  }
321
375
  .pure-form .pure-input-2-3 {
322
- width: 66%;
376
+ width: 66%;
323
377
  }
324
378
  .pure-form .pure-input-1-2 {
325
- width: 50%;
379
+ width: 50%;
326
380
  }
327
381
  .pure-form .pure-input-1-3 {
328
- width: 33%;
382
+ width: 33%;
329
383
  }
330
384
  .pure-form .pure-input-1-4 {
331
- width: 25%;
385
+ width: 25%;
332
386
  }
333
387
 
334
388
  /* Inline help for forms */
335
- /* Note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */
389
+ /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
336
390
  .pure-form .pure-help-inline,
337
391
  .pure-form-message-inline {
338
- display: inline-block;
339
- padding-left: 0.3em;
340
- color: #666;
341
- vertical-align: middle;
342
- font-size: 90%;
392
+ display: inline-block;
393
+ padding-left: 0.3em;
394
+ color: #666;
395
+ vertical-align: middle;
396
+ font-size: 90%;
343
397
  }
344
398
 
345
399
  /* Block help for forms */
346
400
  .pure-form-message {
347
- display: block;
348
- color: #666;
349
- font-size: 90%;
401
+ display: block;
402
+ color: #666;
403
+ font-size: 90%;
350
404
  }
351
405
 
352
406
  @media only screen and (max-width : 480px) {
353
- .pure-form button[type='submit'] {
354
- margin: 0.7em 0 0;
355
- }
356
-
357
- .pure-form input[type='text'], .pure-form button, .pure-form label {
358
- margin-bottom: 0.3em;
359
- display: block;
360
- }
361
-
362
- .pure-group input[type='text'] {
363
- margin-bottom: 0;
364
- }
365
-
366
- .pure-form-aligned .pure-control-group label {
367
- margin-bottom: 0.3em;
368
- text-align: left;
369
- display: block;
370
- width: 100%;
371
- }
372
-
373
- .pure-form-aligned .pure-controls {
374
- margin: 1.5em 0 0 0;
375
- }
376
-
377
- /* note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */
378
- .pure-form .pure-help-inline,
379
- .pure-form-message-inline,
380
- .pure-form-message {
381
- display: block;
382
- font-size: 80%;
383
- padding: 0.2em 0 0.8em; /* increased bottom padding to make it group with its related input element */
384
- }
407
+ .pure-form button[type="submit"] {
408
+ margin: 0.7em 0 0;
409
+ }
410
+
411
+ .pure-form input[type="text"],
412
+ .pure-form input[type="password"],
413
+ .pure-form input[type="email"],
414
+ .pure-form input[type="url"],
415
+ .pure-form input[type="date"],
416
+ .pure-form input[type="month"],
417
+ .pure-form input[type="time"],
418
+ .pure-form input[type="datetime"],
419
+ .pure-form input[type="datetime-local"],
420
+ .pure-form input[type="week"],
421
+ .pure-form input[type="number"],
422
+ .pure-form input[type="search"],
423
+ .pure-form input[type="tel"],
424
+ .pure-form input[type="color"],
425
+ .pure-form label {
426
+ margin-bottom: 0.3em;
427
+ display: block;
428
+ }
429
+
430
+ .pure-group input[type="text"],
431
+ .pure-form input[type="password"],
432
+ .pure-form input[type="email"],
433
+ .pure-form input[type="url"],
434
+ .pure-form input[type="date"],
435
+ .pure-form input[type="month"],
436
+ .pure-form input[type="time"],
437
+ .pure-form input[type="datetime"],
438
+ .pure-form input[type="datetime-local"],
439
+ .pure-form input[type="week"],
440
+ .pure-form input[type="number"],
441
+ .pure-form input[type="search"],
442
+ .pure-form input[type="tel"],
443
+ .pure-form input[type="color"] {
444
+ margin-bottom: 0;
445
+ }
446
+
447
+ .pure-form-aligned .pure-control-group label {
448
+ margin-bottom: 0.3em;
449
+ text-align: left;
450
+ display: block;
451
+ width: 100%;
452
+ }
453
+
454
+ .pure-form-aligned .pure-controls {
455
+ margin: 1.5em 0 0 0;
456
+ }
457
+
458
+ /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
459
+ .pure-form .pure-help-inline,
460
+ .pure-form-message-inline,
461
+ .pure-form-message {
462
+ display: block;
463
+ font-size: 80%;
464
+ /* Increased bottom padding to make it group with its related input element. */
465
+ padding: 0.2em 0 0.8em;
466
+ }
385
467
  }
@@ -1,5 +1,5 @@
1
1
  /*!
2
- Pure v0.1.1-pre
2
+ Pure v0.2.1-pre
3
3
  Copyright 2013 Yahoo! Inc. All rights reserved.
4
4
  Licensed under the BSD License.
5
5
  https://github.com/yui/pure/blob/master/LICENSE.md