picasso 0.5.1 → 0.5.2

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.
Files changed (31) hide show
  1. data/.gitignore +2 -1
  2. data/README.md +9 -2
  3. data/docs/_picasso.html +352 -14
  4. data/docs/css/picasso-demos.css +352 -14
  5. data/docs/index.html +364 -17
  6. data/docs/picasso-_components.html +352 -14
  7. data/docs/picasso-_despegar.html +352 -14
  8. data/docs/picasso-_utils.html +352 -14
  9. data/docs/picasso-components-_accordions.html +352 -14
  10. data/docs/picasso-components-_arrows.html +352 -14
  11. data/docs/picasso-components-_bubbles.html +352 -14
  12. data/docs/picasso-components-_buttons.html +352 -14
  13. data/docs/picasso-components-_clusters.html +352 -14
  14. data/docs/picasso-components-_inputs.html +458 -28
  15. data/docs/picasso-components-_list-grids.html +352 -14
  16. data/docs/picasso-components-_navs.html +352 -14
  17. data/docs/picasso-components-_pagination.html +352 -14
  18. data/docs/picasso-components-_popups.html +352 -14
  19. data/docs/picasso-components-_tooltips.html +352 -14
  20. data/docs/picasso-components-buttons-_3d.html +352 -14
  21. data/docs/picasso-despegar-_mixins.html +352 -14
  22. data/docs/picasso-despegar-_variables.html +352 -14
  23. data/docs/picasso-utils-_clearfix.html +352 -14
  24. data/docs/picasso-utils-_grid.html +352 -14
  25. data/docs/picasso-utils-_ie.html +352 -14
  26. data/docs/picasso-utils-_rem.html +352 -14
  27. data/docs/picasso-utils-_sprite.html +352 -14
  28. data/docs/sass/picasso-demos.scss +43 -4
  29. data/lib/picasso/version.rb +1 -1
  30. data/stylesheets/picasso/components/_inputs.scss +65 -12
  31. metadata +3 -3
data/.gitignore CHANGED
@@ -17,4 +17,5 @@ test/version_tmp
17
17
  tmp
18
18
  .project
19
19
  .sass-cache
20
- node_modules
20
+ node_modules
21
+ .DS_Store
data/README.md CHANGED
@@ -21,10 +21,10 @@ En el `config.rb` agregar:
21
21
 
22
22
  ```ruby
23
23
  require 'picasso'
24
- gem 'picasso', '~> 0.5.0'
24
+ gem 'picasso', '~> 0.5.2'
25
25
  ```
26
26
 
27
- Para versiones anteriores a 0.5.0, también se debe agregar como dependencia en el `config.rb`:
27
+ Para versiones anteriores a 0.5.2, también se debe agregar como dependencia en el `config.rb`:
28
28
 
29
29
  ```ruby
30
30
  require 'magick'
@@ -72,6 +72,13 @@ $ (sudo) apt-get install ruby-oily-png
72
72
 
73
73
  # Changelog
74
74
 
75
+ ## 0.5.2
76
+ * Refactor del componente `input()` utilizando un nuevo diseño.
77
+
78
+ ## 0.5.1
79
+ * Se quitan estilos repetidos en los botones 3D;
80
+ * Se elimina max-width para las imagenes y min-height en las grillas.
81
+
75
82
  ## 0.5.0 (!backward compatibility)
76
83
  * Se normalizan las variables de colores de Despegar;
77
84
  * Se eliminan los botones del tipo mini y glosy (se recomienda el uso de los del tipo 3d);
data/docs/_picasso.html CHANGED
@@ -1352,15 +1352,17 @@ body {
1352
1352
  color: #cccccc;
1353
1353
  }
1354
1354
 
1355
- .text-input-demo-1 {
1356
- width: 200px;
1357
- height: 20px;
1358
- line-height: 20px;
1359
- padding: 1px;
1355
+ .text-input-demo-size-11 {
1356
+ width: auto;
1357
+ height: 2.3em;
1358
+ height: 2.3em;
1359
+ line-height: 1em;
1360
+ padding: 0.38em;
1360
1361
  border: 1px solid #dddddd;
1361
- border-top: 1px solid #919191;
1362
+ border-top: 1px solid #aaaaaa;
1362
1363
  color: #333333;
1363
1364
  font-size: 11px;
1365
+ font-size: 0.6875rem;
1364
1366
  -webkit-box-sizing: border-box;
1365
1367
  -moz-box-sizing: border-box;
1366
1368
  box-sizing: border-box;
@@ -1372,24 +1374,215 @@ body {
1372
1374
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1373
1375
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1374
1376
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1377
+ margin: 10px;
1375
1378
  }
1376
- .text-input-demo-1:focus {
1379
+ .text-input-demo-size-11:focus {
1377
1380
  outline: 0;
1378
1381
  border: 1px solid #319fda;
1379
1382
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1380
1383
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1381
1384
  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1382
1385
  }
1386
+ .text-input-demo-size-11::-webkit-input-placeholder {
1387
+ color: #AAA;
1388
+ font-style: italic;
1389
+ }
1390
+ .text-input-demo-size-11::-moz-placeholder {
1391
+ color: #AAA;
1392
+ font-style: italic;
1393
+ }
1394
+ .text-input-demo-size-11:-ms-input-placeholder {
1395
+ color: #AAA;
1396
+ font-style: italic;
1397
+ }
1383
1398
 
1384
- .select-demo-1 {
1385
- width: 200px;
1386
- height: 20px;
1387
- line-height: 20px;
1388
- padding: 1px;
1399
+ .select-demo-size-11 {
1400
+ width: auto;
1401
+ height: 2.3em;
1402
+ height: 2.3em;
1403
+ line-height: 1em;
1404
+ padding: 0.38em;
1389
1405
  border: 1px solid #dddddd;
1390
- border-top: 1px solid #919191;
1406
+ border-top: 1px solid #aaaaaa;
1391
1407
  color: #333333;
1392
1408
  font-size: 11px;
1409
+ font-size: 0.6875rem;
1410
+ -webkit-box-sizing: border-box;
1411
+ -moz-box-sizing: border-box;
1412
+ box-sizing: border-box;
1413
+ -webkit-border-radius: 3px 3px 3px 3px;
1414
+ -moz-border-radius: 3px 3px 3px 3px;
1415
+ -ms-border-radius: 3px 3px 3px 3px;
1416
+ -o-border-radius: 3px 3px 3px 3px;
1417
+ border-radius: 3px 3px 3px 3px;
1418
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1419
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1420
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1421
+ margin: 10px;
1422
+ }
1423
+ .select-demo-size-11:focus {
1424
+ outline: 0;
1425
+ border: 1px solid #319fda;
1426
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1427
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1428
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1429
+ }
1430
+ .select-demo-size-11::-webkit-input-placeholder {
1431
+ color: #AAA;
1432
+ font-style: italic;
1433
+ }
1434
+ .select-demo-size-11::-moz-placeholder {
1435
+ color: #AAA;
1436
+ font-style: italic;
1437
+ }
1438
+ .select-demo-size-11:-ms-input-placeholder {
1439
+ color: #AAA;
1440
+ font-style: italic;
1441
+ }
1442
+
1443
+ .textarea-input-demo-size-11 {
1444
+ width: auto;
1445
+ height: 100px;
1446
+ height: 6.25rem;
1447
+ line-height: 1em;
1448
+ padding: 0.38em;
1449
+ border: 1px solid #dddddd;
1450
+ border-top: 1px solid #aaaaaa;
1451
+ color: #333333;
1452
+ font-size: 11px;
1453
+ font-size: 0.6875rem;
1454
+ -webkit-box-sizing: border-box;
1455
+ -moz-box-sizing: border-box;
1456
+ box-sizing: border-box;
1457
+ -webkit-border-radius: 3px 3px 3px 3px;
1458
+ -moz-border-radius: 3px 3px 3px 3px;
1459
+ -ms-border-radius: 3px 3px 3px 3px;
1460
+ -o-border-radius: 3px 3px 3px 3px;
1461
+ border-radius: 3px 3px 3px 3px;
1462
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1463
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1464
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1465
+ margin: 10px;
1466
+ }
1467
+ .textarea-input-demo-size-11:focus {
1468
+ outline: 0;
1469
+ border: 1px solid #319fda;
1470
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1471
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1472
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1473
+ }
1474
+ .textarea-input-demo-size-11::-webkit-input-placeholder {
1475
+ color: #AAA;
1476
+ font-style: italic;
1477
+ }
1478
+ .textarea-input-demo-size-11::-moz-placeholder {
1479
+ color: #AAA;
1480
+ font-style: italic;
1481
+ }
1482
+ .textarea-input-demo-size-11:-ms-input-placeholder {
1483
+ color: #AAA;
1484
+ font-style: italic;
1485
+ }
1486
+
1487
+ .text-input-demo-size-13 {
1488
+ width: auto;
1489
+ height: 2.3em;
1490
+ height: 2.3em;
1491
+ line-height: 1em;
1492
+ padding: 0.38em;
1493
+ border: 1px solid #dddddd;
1494
+ border-top: 1px solid #aaaaaa;
1495
+ color: #333333;
1496
+ font-size: 13px;
1497
+ font-size: 0.8125rem;
1498
+ -webkit-box-sizing: border-box;
1499
+ -moz-box-sizing: border-box;
1500
+ box-sizing: border-box;
1501
+ -webkit-border-radius: 3px 3px 3px 3px;
1502
+ -moz-border-radius: 3px 3px 3px 3px;
1503
+ -ms-border-radius: 3px 3px 3px 3px;
1504
+ -o-border-radius: 3px 3px 3px 3px;
1505
+ border-radius: 3px 3px 3px 3px;
1506
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1507
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1508
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1509
+ margin: 10px;
1510
+ }
1511
+ .text-input-demo-size-13:focus {
1512
+ outline: 0;
1513
+ border: 1px solid #319fda;
1514
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1515
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1516
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1517
+ }
1518
+ .text-input-demo-size-13::-webkit-input-placeholder {
1519
+ color: #AAA;
1520
+ font-style: italic;
1521
+ }
1522
+ .text-input-demo-size-13::-moz-placeholder {
1523
+ color: #AAA;
1524
+ font-style: italic;
1525
+ }
1526
+ .text-input-demo-size-13:-ms-input-placeholder {
1527
+ color: #AAA;
1528
+ font-style: italic;
1529
+ }
1530
+
1531
+ .select-demo-size-13 {
1532
+ width: auto;
1533
+ height: 2.3em;
1534
+ height: 2.3em;
1535
+ line-height: 1em;
1536
+ padding: 0.38em;
1537
+ border: 1px solid #dddddd;
1538
+ border-top: 1px solid #aaaaaa;
1539
+ color: #333333;
1540
+ font-size: 13px;
1541
+ font-size: 0.8125rem;
1542
+ -webkit-box-sizing: border-box;
1543
+ -moz-box-sizing: border-box;
1544
+ box-sizing: border-box;
1545
+ -webkit-border-radius: 3px 3px 3px 3px;
1546
+ -moz-border-radius: 3px 3px 3px 3px;
1547
+ -ms-border-radius: 3px 3px 3px 3px;
1548
+ -o-border-radius: 3px 3px 3px 3px;
1549
+ border-radius: 3px 3px 3px 3px;
1550
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1551
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1552
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1553
+ margin: 10px;
1554
+ }
1555
+ .select-demo-size-13:focus {
1556
+ outline: 0;
1557
+ border: 1px solid #319fda;
1558
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1559
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1560
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1561
+ }
1562
+ .select-demo-size-13::-webkit-input-placeholder {
1563
+ color: #AAA;
1564
+ font-style: italic;
1565
+ }
1566
+ .select-demo-size-13::-moz-placeholder {
1567
+ color: #AAA;
1568
+ font-style: italic;
1569
+ }
1570
+ .select-demo-size-13:-ms-input-placeholder {
1571
+ color: #AAA;
1572
+ font-style: italic;
1573
+ }
1574
+
1575
+ .textarea-input-demo-size-13 {
1576
+ width: auto;
1577
+ height: 100px;
1578
+ height: 6.25rem;
1579
+ line-height: 1em;
1580
+ padding: 0.38em;
1581
+ border: 1px solid #dddddd;
1582
+ border-top: 1px solid #aaaaaa;
1583
+ color: #333333;
1584
+ font-size: 13px;
1585
+ font-size: 0.8125rem;
1393
1586
  -webkit-box-sizing: border-box;
1394
1587
  -moz-box-sizing: border-box;
1395
1588
  box-sizing: border-box;
@@ -1401,14 +1594,159 @@ body {
1401
1594
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1402
1595
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1403
1596
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1597
+ margin: 10px;
1404
1598
  }
1405
- .select-demo-1:focus {
1599
+ .textarea-input-demo-size-13:focus {
1406
1600
  outline: 0;
1407
1601
  border: 1px solid #319fda;
1408
1602
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1409
1603
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1410
1604
  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1411
1605
  }
1606
+ .textarea-input-demo-size-13::-webkit-input-placeholder {
1607
+ color: #AAA;
1608
+ font-style: italic;
1609
+ }
1610
+ .textarea-input-demo-size-13::-moz-placeholder {
1611
+ color: #AAA;
1612
+ font-style: italic;
1613
+ }
1614
+ .textarea-input-demo-size-13:-ms-input-placeholder {
1615
+ color: #AAA;
1616
+ font-style: italic;
1617
+ }
1618
+
1619
+ .text-input-demo-size-16 {
1620
+ width: auto;
1621
+ height: 2.3em;
1622
+ height: 2.3em;
1623
+ line-height: 1em;
1624
+ padding: 0.38em;
1625
+ border: 1px solid #dddddd;
1626
+ border-top: 1px solid #aaaaaa;
1627
+ color: #333333;
1628
+ font-size: 16px;
1629
+ font-size: 1rem;
1630
+ -webkit-box-sizing: border-box;
1631
+ -moz-box-sizing: border-box;
1632
+ box-sizing: border-box;
1633
+ -webkit-border-radius: 3px 3px 3px 3px;
1634
+ -moz-border-radius: 3px 3px 3px 3px;
1635
+ -ms-border-radius: 3px 3px 3px 3px;
1636
+ -o-border-radius: 3px 3px 3px 3px;
1637
+ border-radius: 3px 3px 3px 3px;
1638
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1639
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1640
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1641
+ margin: 10px;
1642
+ }
1643
+ .text-input-demo-size-16:focus {
1644
+ outline: 0;
1645
+ border: 1px solid #319fda;
1646
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1647
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1648
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1649
+ }
1650
+ .text-input-demo-size-16::-webkit-input-placeholder {
1651
+ color: #AAA;
1652
+ font-style: italic;
1653
+ }
1654
+ .text-input-demo-size-16::-moz-placeholder {
1655
+ color: #AAA;
1656
+ font-style: italic;
1657
+ }
1658
+ .text-input-demo-size-16:-ms-input-placeholder {
1659
+ color: #AAA;
1660
+ font-style: italic;
1661
+ }
1662
+
1663
+ .select-demo-size-16 {
1664
+ width: auto;
1665
+ height: 2.3em;
1666
+ height: 2.3em;
1667
+ line-height: 1em;
1668
+ padding: 0.38em;
1669
+ border: 1px solid #dddddd;
1670
+ border-top: 1px solid #aaaaaa;
1671
+ color: #333333;
1672
+ font-size: 16px;
1673
+ font-size: 1rem;
1674
+ -webkit-box-sizing: border-box;
1675
+ -moz-box-sizing: border-box;
1676
+ box-sizing: border-box;
1677
+ -webkit-border-radius: 3px 3px 3px 3px;
1678
+ -moz-border-radius: 3px 3px 3px 3px;
1679
+ -ms-border-radius: 3px 3px 3px 3px;
1680
+ -o-border-radius: 3px 3px 3px 3px;
1681
+ border-radius: 3px 3px 3px 3px;
1682
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1683
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1684
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1685
+ margin: 10px;
1686
+ }
1687
+ .select-demo-size-16:focus {
1688
+ outline: 0;
1689
+ border: 1px solid #319fda;
1690
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1691
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1692
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1693
+ }
1694
+ .select-demo-size-16::-webkit-input-placeholder {
1695
+ color: #AAA;
1696
+ font-style: italic;
1697
+ }
1698
+ .select-demo-size-16::-moz-placeholder {
1699
+ color: #AAA;
1700
+ font-style: italic;
1701
+ }
1702
+ .select-demo-size-16:-ms-input-placeholder {
1703
+ color: #AAA;
1704
+ font-style: italic;
1705
+ }
1706
+
1707
+ .textarea-input-demo-size-16 {
1708
+ width: auto;
1709
+ height: 100px;
1710
+ height: 6.25rem;
1711
+ line-height: 1em;
1712
+ padding: 0.38em;
1713
+ border: 1px solid #dddddd;
1714
+ border-top: 1px solid #aaaaaa;
1715
+ color: #333333;
1716
+ font-size: 16px;
1717
+ font-size: 1rem;
1718
+ -webkit-box-sizing: border-box;
1719
+ -moz-box-sizing: border-box;
1720
+ box-sizing: border-box;
1721
+ -webkit-border-radius: 3px 3px 3px 3px;
1722
+ -moz-border-radius: 3px 3px 3px 3px;
1723
+ -ms-border-radius: 3px 3px 3px 3px;
1724
+ -o-border-radius: 3px 3px 3px 3px;
1725
+ border-radius: 3px 3px 3px 3px;
1726
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1727
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1728
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1729
+ margin: 10px;
1730
+ }
1731
+ .textarea-input-demo-size-16:focus {
1732
+ outline: 0;
1733
+ border: 1px solid #319fda;
1734
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1735
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1736
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1737
+ }
1738
+ .textarea-input-demo-size-16::-webkit-input-placeholder {
1739
+ color: #AAA;
1740
+ font-style: italic;
1741
+ }
1742
+ .textarea-input-demo-size-16::-moz-placeholder {
1743
+ color: #AAA;
1744
+ font-style: italic;
1745
+ }
1746
+ .textarea-input-demo-size-16:-ms-input-placeholder {
1747
+ color: #AAA;
1748
+ font-style: italic;
1749
+ }
1412
1750
 
1413
1751
  .arrow-demo-1, .arrow-demo-3 {
1414
1752
  margin: 0 40px 0 0;
data/docs/css/picasso-demos.css CHANGED
@@ -1351,15 +1351,17 @@ body {
1351
1351
  color: #cccccc;
1352
1352
  }
1353
1353
 
1354
- .text-input-demo-1 {
1355
- width: 200px;
1356
- height: 20px;
1357
- line-height: 20px;
1358
- padding: 1px;
1354
+ .text-input-demo-size-11 {
1355
+ width: auto;
1356
+ height: 2.3em;
1357
+ height: 2.3em;
1358
+ line-height: 1em;
1359
+ padding: 0.38em;
1359
1360
  border: 1px solid #dddddd;
1360
- border-top: 1px solid #919191;
1361
+ border-top: 1px solid #aaaaaa;
1361
1362
  color: #333333;
1362
1363
  font-size: 11px;
1364
+ font-size: 0.6875rem;
1363
1365
  -webkit-box-sizing: border-box;
1364
1366
  -moz-box-sizing: border-box;
1365
1367
  box-sizing: border-box;
@@ -1371,24 +1373,215 @@ body {
1371
1373
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1372
1374
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1373
1375
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1376
+ margin: 10px;
1374
1377
  }
1375
- .text-input-demo-1:focus {
1378
+ .text-input-demo-size-11:focus {
1376
1379
  outline: 0;
1377
1380
  border: 1px solid #319fda;
1378
1381
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1379
1382
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1380
1383
  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1381
1384
  }
1385
+ .text-input-demo-size-11::-webkit-input-placeholder {
1386
+ color: #AAA;
1387
+ font-style: italic;
1388
+ }
1389
+ .text-input-demo-size-11::-moz-placeholder {
1390
+ color: #AAA;
1391
+ font-style: italic;
1392
+ }
1393
+ .text-input-demo-size-11:-ms-input-placeholder {
1394
+ color: #AAA;
1395
+ font-style: italic;
1396
+ }
1382
1397
 
1383
- .select-demo-1 {
1384
- width: 200px;
1385
- height: 20px;
1386
- line-height: 20px;
1387
- padding: 1px;
1398
+ .select-demo-size-11 {
1399
+ width: auto;
1400
+ height: 2.3em;
1401
+ height: 2.3em;
1402
+ line-height: 1em;
1403
+ padding: 0.38em;
1388
1404
  border: 1px solid #dddddd;
1389
- border-top: 1px solid #919191;
1405
+ border-top: 1px solid #aaaaaa;
1390
1406
  color: #333333;
1391
1407
  font-size: 11px;
1408
+ font-size: 0.6875rem;
1409
+ -webkit-box-sizing: border-box;
1410
+ -moz-box-sizing: border-box;
1411
+ box-sizing: border-box;
1412
+ -webkit-border-radius: 3px 3px 3px 3px;
1413
+ -moz-border-radius: 3px 3px 3px 3px;
1414
+ -ms-border-radius: 3px 3px 3px 3px;
1415
+ -o-border-radius: 3px 3px 3px 3px;
1416
+ border-radius: 3px 3px 3px 3px;
1417
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1418
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1419
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1420
+ margin: 10px;
1421
+ }
1422
+ .select-demo-size-11:focus {
1423
+ outline: 0;
1424
+ border: 1px solid #319fda;
1425
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1426
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1427
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1428
+ }
1429
+ .select-demo-size-11::-webkit-input-placeholder {
1430
+ color: #AAA;
1431
+ font-style: italic;
1432
+ }
1433
+ .select-demo-size-11::-moz-placeholder {
1434
+ color: #AAA;
1435
+ font-style: italic;
1436
+ }
1437
+ .select-demo-size-11:-ms-input-placeholder {
1438
+ color: #AAA;
1439
+ font-style: italic;
1440
+ }
1441
+
1442
+ .textarea-input-demo-size-11 {
1443
+ width: auto;
1444
+ height: 100px;
1445
+ height: 6.25rem;
1446
+ line-height: 1em;
1447
+ padding: 0.38em;
1448
+ border: 1px solid #dddddd;
1449
+ border-top: 1px solid #aaaaaa;
1450
+ color: #333333;
1451
+ font-size: 11px;
1452
+ font-size: 0.6875rem;
1453
+ -webkit-box-sizing: border-box;
1454
+ -moz-box-sizing: border-box;
1455
+ box-sizing: border-box;
1456
+ -webkit-border-radius: 3px 3px 3px 3px;
1457
+ -moz-border-radius: 3px 3px 3px 3px;
1458
+ -ms-border-radius: 3px 3px 3px 3px;
1459
+ -o-border-radius: 3px 3px 3px 3px;
1460
+ border-radius: 3px 3px 3px 3px;
1461
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1462
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1463
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1464
+ margin: 10px;
1465
+ }
1466
+ .textarea-input-demo-size-11:focus {
1467
+ outline: 0;
1468
+ border: 1px solid #319fda;
1469
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1470
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1471
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1472
+ }
1473
+ .textarea-input-demo-size-11::-webkit-input-placeholder {
1474
+ color: #AAA;
1475
+ font-style: italic;
1476
+ }
1477
+ .textarea-input-demo-size-11::-moz-placeholder {
1478
+ color: #AAA;
1479
+ font-style: italic;
1480
+ }
1481
+ .textarea-input-demo-size-11:-ms-input-placeholder {
1482
+ color: #AAA;
1483
+ font-style: italic;
1484
+ }
1485
+
1486
+ .text-input-demo-size-13 {
1487
+ width: auto;
1488
+ height: 2.3em;
1489
+ height: 2.3em;
1490
+ line-height: 1em;
1491
+ padding: 0.38em;
1492
+ border: 1px solid #dddddd;
1493
+ border-top: 1px solid #aaaaaa;
1494
+ color: #333333;
1495
+ font-size: 13px;
1496
+ font-size: 0.8125rem;
1497
+ -webkit-box-sizing: border-box;
1498
+ -moz-box-sizing: border-box;
1499
+ box-sizing: border-box;
1500
+ -webkit-border-radius: 3px 3px 3px 3px;
1501
+ -moz-border-radius: 3px 3px 3px 3px;
1502
+ -ms-border-radius: 3px 3px 3px 3px;
1503
+ -o-border-radius: 3px 3px 3px 3px;
1504
+ border-radius: 3px 3px 3px 3px;
1505
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1506
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1507
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1508
+ margin: 10px;
1509
+ }
1510
+ .text-input-demo-size-13:focus {
1511
+ outline: 0;
1512
+ border: 1px solid #319fda;
1513
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1514
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1515
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1516
+ }
1517
+ .text-input-demo-size-13::-webkit-input-placeholder {
1518
+ color: #AAA;
1519
+ font-style: italic;
1520
+ }
1521
+ .text-input-demo-size-13::-moz-placeholder {
1522
+ color: #AAA;
1523
+ font-style: italic;
1524
+ }
1525
+ .text-input-demo-size-13:-ms-input-placeholder {
1526
+ color: #AAA;
1527
+ font-style: italic;
1528
+ }
1529
+
1530
+ .select-demo-size-13 {
1531
+ width: auto;
1532
+ height: 2.3em;
1533
+ height: 2.3em;
1534
+ line-height: 1em;
1535
+ padding: 0.38em;
1536
+ border: 1px solid #dddddd;
1537
+ border-top: 1px solid #aaaaaa;
1538
+ color: #333333;
1539
+ font-size: 13px;
1540
+ font-size: 0.8125rem;
1541
+ -webkit-box-sizing: border-box;
1542
+ -moz-box-sizing: border-box;
1543
+ box-sizing: border-box;
1544
+ -webkit-border-radius: 3px 3px 3px 3px;
1545
+ -moz-border-radius: 3px 3px 3px 3px;
1546
+ -ms-border-radius: 3px 3px 3px 3px;
1547
+ -o-border-radius: 3px 3px 3px 3px;
1548
+ border-radius: 3px 3px 3px 3px;
1549
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1550
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1551
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1552
+ margin: 10px;
1553
+ }
1554
+ .select-demo-size-13:focus {
1555
+ outline: 0;
1556
+ border: 1px solid #319fda;
1557
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1558
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1559
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1560
+ }
1561
+ .select-demo-size-13::-webkit-input-placeholder {
1562
+ color: #AAA;
1563
+ font-style: italic;
1564
+ }
1565
+ .select-demo-size-13::-moz-placeholder {
1566
+ color: #AAA;
1567
+ font-style: italic;
1568
+ }
1569
+ .select-demo-size-13:-ms-input-placeholder {
1570
+ color: #AAA;
1571
+ font-style: italic;
1572
+ }
1573
+
1574
+ .textarea-input-demo-size-13 {
1575
+ width: auto;
1576
+ height: 100px;
1577
+ height: 6.25rem;
1578
+ line-height: 1em;
1579
+ padding: 0.38em;
1580
+ border: 1px solid #dddddd;
1581
+ border-top: 1px solid #aaaaaa;
1582
+ color: #333333;
1583
+ font-size: 13px;
1584
+ font-size: 0.8125rem;
1392
1585
  -webkit-box-sizing: border-box;
1393
1586
  -moz-box-sizing: border-box;
1394
1587
  box-sizing: border-box;
@@ -1400,14 +1593,159 @@ body {
1400
1593
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1401
1594
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1402
1595
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1596
+ margin: 10px;
1403
1597
  }
1404
- .select-demo-1:focus {
1598
+ .textarea-input-demo-size-13:focus {
1405
1599
  outline: 0;
1406
1600
  border: 1px solid #319fda;
1407
1601
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1408
1602
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1409
1603
  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1410
1604
  }
1605
+ .textarea-input-demo-size-13::-webkit-input-placeholder {
1606
+ color: #AAA;
1607
+ font-style: italic;
1608
+ }
1609
+ .textarea-input-demo-size-13::-moz-placeholder {
1610
+ color: #AAA;
1611
+ font-style: italic;
1612
+ }
1613
+ .textarea-input-demo-size-13:-ms-input-placeholder {
1614
+ color: #AAA;
1615
+ font-style: italic;
1616
+ }
1617
+
1618
+ .text-input-demo-size-16 {
1619
+ width: auto;
1620
+ height: 2.3em;
1621
+ height: 2.3em;
1622
+ line-height: 1em;
1623
+ padding: 0.38em;
1624
+ border: 1px solid #dddddd;
1625
+ border-top: 1px solid #aaaaaa;
1626
+ color: #333333;
1627
+ font-size: 16px;
1628
+ font-size: 1rem;
1629
+ -webkit-box-sizing: border-box;
1630
+ -moz-box-sizing: border-box;
1631
+ box-sizing: border-box;
1632
+ -webkit-border-radius: 3px 3px 3px 3px;
1633
+ -moz-border-radius: 3px 3px 3px 3px;
1634
+ -ms-border-radius: 3px 3px 3px 3px;
1635
+ -o-border-radius: 3px 3px 3px 3px;
1636
+ border-radius: 3px 3px 3px 3px;
1637
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1638
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1639
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1640
+ margin: 10px;
1641
+ }
1642
+ .text-input-demo-size-16:focus {
1643
+ outline: 0;
1644
+ border: 1px solid #319fda;
1645
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1646
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1647
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1648
+ }
1649
+ .text-input-demo-size-16::-webkit-input-placeholder {
1650
+ color: #AAA;
1651
+ font-style: italic;
1652
+ }
1653
+ .text-input-demo-size-16::-moz-placeholder {
1654
+ color: #AAA;
1655
+ font-style: italic;
1656
+ }
1657
+ .text-input-demo-size-16:-ms-input-placeholder {
1658
+ color: #AAA;
1659
+ font-style: italic;
1660
+ }
1661
+
1662
+ .select-demo-size-16 {
1663
+ width: auto;
1664
+ height: 2.3em;
1665
+ height: 2.3em;
1666
+ line-height: 1em;
1667
+ padding: 0.38em;
1668
+ border: 1px solid #dddddd;
1669
+ border-top: 1px solid #aaaaaa;
1670
+ color: #333333;
1671
+ font-size: 16px;
1672
+ font-size: 1rem;
1673
+ -webkit-box-sizing: border-box;
1674
+ -moz-box-sizing: border-box;
1675
+ box-sizing: border-box;
1676
+ -webkit-border-radius: 3px 3px 3px 3px;
1677
+ -moz-border-radius: 3px 3px 3px 3px;
1678
+ -ms-border-radius: 3px 3px 3px 3px;
1679
+ -o-border-radius: 3px 3px 3px 3px;
1680
+ border-radius: 3px 3px 3px 3px;
1681
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1682
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1683
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1684
+ margin: 10px;
1685
+ }
1686
+ .select-demo-size-16:focus {
1687
+ outline: 0;
1688
+ border: 1px solid #319fda;
1689
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1690
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1691
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1692
+ }
1693
+ .select-demo-size-16::-webkit-input-placeholder {
1694
+ color: #AAA;
1695
+ font-style: italic;
1696
+ }
1697
+ .select-demo-size-16::-moz-placeholder {
1698
+ color: #AAA;
1699
+ font-style: italic;
1700
+ }
1701
+ .select-demo-size-16:-ms-input-placeholder {
1702
+ color: #AAA;
1703
+ font-style: italic;
1704
+ }
1705
+
1706
+ .textarea-input-demo-size-16 {
1707
+ width: auto;
1708
+ height: 100px;
1709
+ height: 6.25rem;
1710
+ line-height: 1em;
1711
+ padding: 0.38em;
1712
+ border: 1px solid #dddddd;
1713
+ border-top: 1px solid #aaaaaa;
1714
+ color: #333333;
1715
+ font-size: 16px;
1716
+ font-size: 1rem;
1717
+ -webkit-box-sizing: border-box;
1718
+ -moz-box-sizing: border-box;
1719
+ box-sizing: border-box;
1720
+ -webkit-border-radius: 3px 3px 3px 3px;
1721
+ -moz-border-radius: 3px 3px 3px 3px;
1722
+ -ms-border-radius: 3px 3px 3px 3px;
1723
+ -o-border-radius: 3px 3px 3px 3px;
1724
+ border-radius: 3px 3px 3px 3px;
1725
+ -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1726
+ -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1727
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
1728
+ margin: 10px;
1729
+ }
1730
+ .textarea-input-demo-size-16:focus {
1731
+ outline: 0;
1732
+ border: 1px solid #319fda;
1733
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1734
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1735
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
1736
+ }
1737
+ .textarea-input-demo-size-16::-webkit-input-placeholder {
1738
+ color: #AAA;
1739
+ font-style: italic;
1740
+ }
1741
+ .textarea-input-demo-size-16::-moz-placeholder {
1742
+ color: #AAA;
1743
+ font-style: italic;
1744
+ }
1745
+ .textarea-input-demo-size-16:-ms-input-placeholder {
1746
+ color: #AAA;
1747
+ font-style: italic;
1748
+ }
1411
1749
 
1412
1750
  .arrow-demo-1, .arrow-demo-3 {
1413
1751
  margin: 0 40px 0 0;