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.
- data/.gitignore +2 -1
- data/README.md +9 -2
- data/docs/_picasso.html +352 -14
- data/docs/css/picasso-demos.css +352 -14
- data/docs/index.html +364 -17
- data/docs/picasso-_components.html +352 -14
- data/docs/picasso-_despegar.html +352 -14
- data/docs/picasso-_utils.html +352 -14
- data/docs/picasso-components-_accordions.html +352 -14
- data/docs/picasso-components-_arrows.html +352 -14
- data/docs/picasso-components-_bubbles.html +352 -14
- data/docs/picasso-components-_buttons.html +352 -14
- data/docs/picasso-components-_clusters.html +352 -14
- data/docs/picasso-components-_inputs.html +458 -28
- data/docs/picasso-components-_list-grids.html +352 -14
- data/docs/picasso-components-_navs.html +352 -14
- data/docs/picasso-components-_pagination.html +352 -14
- data/docs/picasso-components-_popups.html +352 -14
- data/docs/picasso-components-_tooltips.html +352 -14
- data/docs/picasso-components-buttons-_3d.html +352 -14
- data/docs/picasso-despegar-_mixins.html +352 -14
- data/docs/picasso-despegar-_variables.html +352 -14
- data/docs/picasso-utils-_clearfix.html +352 -14
- data/docs/picasso-utils-_grid.html +352 -14
- data/docs/picasso-utils-_ie.html +352 -14
- data/docs/picasso-utils-_rem.html +352 -14
- data/docs/picasso-utils-_sprite.html +352 -14
- data/docs/sass/picasso-demos.scss +43 -4
- data/lib/picasso/version.rb +1 -1
- data/stylesheets/picasso/components/_inputs.scss +65 -12
- metadata +3 -3
data/docs/index.html
CHANGED
|
@@ -1352,15 +1352,17 @@ body {
|
|
|
1352
1352
|
color: #cccccc;
|
|
1353
1353
|
}
|
|
1354
1354
|
|
|
1355
|
-
.text-input-demo-
|
|
1356
|
-
width:
|
|
1357
|
-
height:
|
|
1358
|
-
|
|
1359
|
-
|
|
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 #
|
|
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,259 @@ 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-
|
|
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-
|
|
1385
|
-
width:
|
|
1386
|
-
height:
|
|
1387
|
-
|
|
1388
|
-
|
|
1399
|
+
.select-demo-size-11 {
|
|
1400
|
+
width: auto;
|
|
1401
|
+
height: 2.3em;
|
|
1402
|
+
height: 2.3em;
|
|
1403
|
+
line-height: 1em;
|
|
1404
|
+
padding: 0.38em;
|
|
1405
|
+
border: 1px solid #dddddd;
|
|
1406
|
+
border-top: 1px solid #aaaaaa;
|
|
1407
|
+
color: #333333;
|
|
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;
|
|
1389
1449
|
border: 1px solid #dddddd;
|
|
1390
|
-
border-top: 1px solid #
|
|
1450
|
+
border-top: 1px solid #aaaaaa;
|
|
1391
1451
|
color: #333333;
|
|
1392
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;
|
|
1586
|
+
-webkit-box-sizing: border-box;
|
|
1587
|
+
-moz-box-sizing: border-box;
|
|
1588
|
+
box-sizing: border-box;
|
|
1589
|
+
-webkit-border-radius: 3px 3px 3px 3px;
|
|
1590
|
+
-moz-border-radius: 3px 3px 3px 3px;
|
|
1591
|
+
-ms-border-radius: 3px 3px 3px 3px;
|
|
1592
|
+
-o-border-radius: 3px 3px 3px 3px;
|
|
1593
|
+
border-radius: 3px 3px 3px 3px;
|
|
1594
|
+
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
|
|
1595
|
+
-moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
|
|
1596
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
|
|
1597
|
+
margin: 10px;
|
|
1598
|
+
}
|
|
1599
|
+
.textarea-input-demo-size-13:focus {
|
|
1600
|
+
outline: 0;
|
|
1601
|
+
border: 1px solid #319fda;
|
|
1602
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
|
|
1603
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
|
|
1604
|
+
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
|
|
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;
|
|
1393
1630
|
-webkit-box-sizing: border-box;
|
|
1394
1631
|
-moz-box-sizing: border-box;
|
|
1395
1632
|
box-sizing: border-box;
|
|
@@ -1401,14 +1638,115 @@ body {
|
|
|
1401
1638
|
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
|
|
1402
1639
|
-moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
|
|
1403
1640
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
|
|
1641
|
+
margin: 10px;
|
|
1404
1642
|
}
|
|
1405
|
-
.
|
|
1643
|
+
.text-input-demo-size-16:focus {
|
|
1406
1644
|
outline: 0;
|
|
1407
1645
|
border: 1px solid #319fda;
|
|
1408
1646
|
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
|
|
1409
1647
|
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
|
|
1410
1648
|
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
|
|
1411
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;
|
|
@@ -2057,8 +2395,8 @@ body {
|
|
|
2057
2395
|
|
|
2058
2396
|
</p>
|
|
2059
2397
|
<pre><code class="lang-ruby">require 'picasso'
|
|
2060
|
-
gem 'picasso', '~> 0.5.
|
|
2061
|
-
<p>Para versiones anteriores a 0.5.
|
|
2398
|
+
gem 'picasso', '~> 0.5.2'</code></pre>
|
|
2399
|
+
<p>Para versiones anteriores a 0.5.2, también se debe agregar como dependencia en el <code>config.rb</code>:
|
|
2062
2400
|
|
|
2063
2401
|
</p>
|
|
2064
2402
|
<pre><code class="lang-ruby">require 'magick'</code></pre>
|
|
@@ -2087,7 +2425,16 @@ gem 'picasso', '~> 0.5.0'</code></pre>
|
|
|
2087
2425
|
<h3>Linux</h3>
|
|
2088
2426
|
<pre><code class="lang-bash">$ (sudo) apt-get update
|
|
2089
2427
|
$ (sudo) apt-get install ruby-oily-png</code></pre>
|
|
2090
|
-
</div></article><article id="changelog" class="section"><div class="docs"><h1>Changelog</h1><a href="#changelog" class="permalink ir">Changelog</a><h2>0.5.
|
|
2428
|
+
</div></article><article id="changelog" class="section"><div class="docs"><h1>Changelog</h1><a href="#changelog" class="permalink ir">Changelog</a><h2>0.5.2</h2>
|
|
2429
|
+
<ul>
|
|
2430
|
+
<li>Refactor del componente <code>input()</code> utilizando un nuevo diseño.</li>
|
|
2431
|
+
</ul>
|
|
2432
|
+
<h2>0.5.1</h2>
|
|
2433
|
+
<ul>
|
|
2434
|
+
<li>Se quitan estilos repetidos en los botones 3D;</li>
|
|
2435
|
+
<li>Se elimina max-width para las imagenes y min-height en las grillas.</li>
|
|
2436
|
+
</ul>
|
|
2437
|
+
<h2>0.5.0 (!backward compatibility)</h2>
|
|
2091
2438
|
<ul>
|
|
2092
2439
|
<li>Se normalizan las variables de colores de Despegar;</li>
|
|
2093
2440
|
<li>Se eliminan los botones del tipo mini y glosy (se recomienda el uso de los del tipo 3d);</li>
|
|
@@ -1352,15 +1352,17 @@ body {
|
|
|
1352
1352
|
color: #cccccc;
|
|
1353
1353
|
}
|
|
1354
1354
|
|
|
1355
|
-
.text-input-demo-
|
|
1356
|
-
width:
|
|
1357
|
-
height:
|
|
1358
|
-
|
|
1359
|
-
|
|
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 #
|
|
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-
|
|
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-
|
|
1385
|
-
width:
|
|
1386
|
-
height:
|
|
1387
|
-
|
|
1388
|
-
|
|
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 #
|
|
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
|
-
.
|
|
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;
|