picasso 0.5.1 → 0.5.2

Sign up to get free protection for your applications and to get access to all the features.
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;