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
|
@@ -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;
|
|
@@ -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,39 @@ 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;
|
|
1393
1410
|
-webkit-box-sizing: border-box;
|
|
1394
1411
|
-moz-box-sizing: border-box;
|
|
1395
1412
|
box-sizing: border-box;
|
|
@@ -1401,14 +1418,335 @@ body {
|
|
|
1401
1418
|
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
|
|
1402
1419
|
-moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
|
|
1403
1420
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
|
|
1421
|
+
margin: 10px;
|
|
1404
1422
|
}
|
|
1405
|
-
.select-demo-
|
|
1423
|
+
.select-demo-size-11:focus {
|
|
1406
1424
|
outline: 0;
|
|
1407
1425
|
border: 1px solid #319fda;
|
|
1408
1426
|
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
|
|
1409
1427
|
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
|
|
1410
1428
|
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0;
|
|
1411
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;
|
|
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;
|
|
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;
|
|
@@ -2037,20 +2375,96 @@ body {
|
|
|
2037
2375
|
</a></li></ul></li></ul></nav></aside><section class="content"><article id="" class="section"><div class="docs"><h2>Inputs</h2>
|
|
2038
2376
|
<p> Estilos para inputs de textos y selects.
|
|
2039
2377
|
</p>
|
|
2040
|
-
<h3>
|
|
2041
|
-
<div class="preview"> <input type="text" class="text-input-demo-
|
|
2378
|
+
<h3>Ejemplo</h3>
|
|
2379
|
+
<div class="preview"> <input type="text" class="text-input-demo-size-11" placeholder="El texto es de 11px">
|
|
2380
|
+
|
|
2381
|
+
<br>
|
|
2382
|
+
|
|
2383
|
+
<select class="select-demo-size-11">
|
|
2384
|
+
<option value="1">1</option>
|
|
2385
|
+
<option value="2">2</option>
|
|
2386
|
+
<option value="3">3</option>
|
|
2387
|
+
</select>
|
|
2388
|
+
|
|
2389
|
+
<br>
|
|
2390
|
+
|
|
2391
|
+
<textarea class="textarea-input-demo-size-11"> </textarea>
|
|
2392
|
+
|
|
2393
|
+
<br>
|
|
2394
|
+
|
|
2395
|
+
<input type="text" class="text-input-demo-size-13" placeholder="El texto es de 13px">
|
|
2396
|
+
|
|
2397
|
+
<br>
|
|
2398
|
+
|
|
2399
|
+
<select class="select-demo-size-13">
|
|
2400
|
+
<option value="1">1</option>
|
|
2401
|
+
<option value="2">2</option>
|
|
2402
|
+
<option value="3">3</option>
|
|
2403
|
+
</select>
|
|
2404
|
+
|
|
2405
|
+
<br>
|
|
2406
|
+
|
|
2407
|
+
<textarea class="textarea-input-demo-size-13"> </textarea>
|
|
2408
|
+
|
|
2409
|
+
<br>
|
|
2042
2410
|
|
|
2043
|
-
<
|
|
2411
|
+
<input type="text" class="text-input-demo-size-16" placeholder="El texto es de 16px">
|
|
2412
|
+
|
|
2413
|
+
<br>
|
|
2414
|
+
|
|
2415
|
+
<select class="select-demo-size-16">
|
|
2044
2416
|
<option value="1">1</option>
|
|
2045
2417
|
<option value="2">2</option>
|
|
2046
2418
|
<option value="3">3</option>
|
|
2047
|
-
</select
|
|
2419
|
+
</select>
|
|
2420
|
+
|
|
2421
|
+
<br>
|
|
2422
|
+
|
|
2423
|
+
<textarea class="textarea-input-demo-size-16"> </textarea></div><pre><code> <input type="text" class="text-input-demo-size-11" placeholder="El texto es de 11px">
|
|
2424
|
+
|
|
2425
|
+
<br>
|
|
2426
|
+
|
|
2427
|
+
<select class="select-demo-size-11">
|
|
2428
|
+
<option value="1">1</option>
|
|
2429
|
+
<option value="2">2</option>
|
|
2430
|
+
<option value="3">3</option>
|
|
2431
|
+
</select>
|
|
2432
|
+
|
|
2433
|
+
<br>
|
|
2434
|
+
|
|
2435
|
+
<textarea class="textarea-input-demo-size-11"> </textarea>
|
|
2436
|
+
|
|
2437
|
+
<br>
|
|
2438
|
+
|
|
2439
|
+
<input type="text" class="text-input-demo-size-13" placeholder="El texto es de 13px">
|
|
2440
|
+
|
|
2441
|
+
<br>
|
|
2442
|
+
|
|
2443
|
+
<select class="select-demo-size-13">
|
|
2444
|
+
<option value="1">1</option>
|
|
2445
|
+
<option value="2">2</option>
|
|
2446
|
+
<option value="3">3</option>
|
|
2447
|
+
</select>
|
|
2448
|
+
|
|
2449
|
+
<br>
|
|
2450
|
+
|
|
2451
|
+
<textarea class="textarea-input-demo-size-13"> </textarea>
|
|
2452
|
+
|
|
2453
|
+
<br>
|
|
2454
|
+
|
|
2455
|
+
<input type="text" class="text-input-demo-size-16" placeholder="El texto es de 16px">
|
|
2456
|
+
|
|
2457
|
+
<br>
|
|
2048
2458
|
|
|
2049
|
-
<select class="select-demo-
|
|
2459
|
+
<select class="select-demo-size-16">
|
|
2050
2460
|
<option value="1">1</option>
|
|
2051
2461
|
<option value="2">2</option>
|
|
2052
2462
|
<option value="3">3</option>
|
|
2053
|
-
</select>
|
|
2463
|
+
</select>
|
|
2464
|
+
|
|
2465
|
+
<br>
|
|
2466
|
+
|
|
2467
|
+
<textarea class="textarea-input-demo-size-16"> </textarea></code></pre>
|
|
2054
2468
|
<h3>Sass</h3>
|
|
2055
2469
|
<h4>Import</h4>
|
|
2056
2470
|
<p> <code>@import "picasso/components/inputs";</code>
|
|
@@ -2081,9 +2495,10 @@ body {
|
|
|
2081
2495
|
</div><div class="code"><pre><code>@import "compass/css3/border-radius";
|
|
2082
2496
|
@import "compass/css3/box-sizing";
|
|
2083
2497
|
@import "compass/css3/box-shadow";
|
|
2498
|
+
@import "../utils/rem";
|
|
2084
2499
|
|
|
2085
|
-
$text-input-default-width:
|
|
2086
|
-
$text-input-default-height:
|
|
2500
|
+
$text-input-default-width: auto !default;
|
|
2501
|
+
$text-input-default-height: 2.3em !default;
|
|
2087
2502
|
$text-input-default-border-color: #DDD !default;
|
|
2088
2503
|
$text-input-default-border-focus-color: #319fda !default;
|
|
2089
2504
|
$text-input-default-border-radius: 3px 3px 3px 3px !default;
|
|
@@ -2106,9 +2521,12 @@ $text-input-default-font-size: 11px !default;
|
|
|
2106
2521
|
|
|
2107
2522
|
@mixin input-layout($width: $text-input-default-width, $height: $text-input-default-height) {
|
|
2108
2523
|
width: $width;
|
|
2109
|
-
height
|
|
2110
|
-
line-height:
|
|
2111
|
-
|
|
2524
|
+
@include rem('height', $height);
|
|
2525
|
+
line-height: 1em;
|
|
2526
|
+
padding: 0.38em;
|
|
2527
|
+
|
|
2528
|
+
|
|
2529
|
+
|
|
2112
2530
|
}
|
|
2113
2531
|
|
|
2114
2532
|
@mixin input-visual(
|
|
@@ -2119,10 +2537,9 @@ $text-input-default-font-size: 11px !default;
|
|
|
2119
2537
|
$font-size: $text-input-default-font-size
|
|
2120
2538
|
) {
|
|
2121
2539
|
border: 1px solid $border-color;
|
|
2122
|
-
border-top: 1px solid darken($border-color,
|
|
2540
|
+
border-top: 1px solid darken($border-color, 20%);
|
|
2123
2541
|
color: $text-color;
|
|
2124
|
-
|
|
2125
|
-
|
|
2542
|
+
@include rem('font-size', $font-size);
|
|
2126
2543
|
@include box-sizing(border-box);
|
|
2127
2544
|
@include border-radius($border-radius);
|
|
2128
2545
|
@include box-shadow(0 1px 2px 0 rgba(0, 0, 0, 0.2) inset);
|
|
@@ -2132,6 +2549,19 @@ $text-input-default-font-size: 11px !default;
|
|
|
2132
2549
|
border:1px solid $border-focus-color;
|
|
2133
2550
|
@include box-shadow(rgba(0,0,0,0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0);
|
|
2134
2551
|
}
|
|
2552
|
+
&::-webkit-input-placeholder{
|
|
2553
|
+
color: #AAA;
|
|
2554
|
+
font-style: italic;
|
|
2555
|
+
|
|
2556
|
+
}
|
|
2557
|
+
&::-moz-placeholder{
|
|
2558
|
+
color: #AAA;
|
|
2559
|
+
font-style: italic;
|
|
2560
|
+
}
|
|
2561
|
+
&:-ms-input-placeholder{
|
|
2562
|
+
color: #AAA;
|
|
2563
|
+
font-style: italic;
|
|
2564
|
+
}
|
|
2135
2565
|
}</code></pre></div></article></section></section><div class="bar bottom"><div class="settings container"><button title="Desktop (1280)" data-width='1280' class="desktop ir">Desktop</button><button title="Laptop (1024)" data-width='1024' class="laptop ir">Laptop</button><button title="Tablet (768)" data-width='768' class="tablet ir">Tablet</button><button title="Smart phone (320)" data-width='320' class="smartphone ir">Smart phone</button><button title="Feature phone (240)" data-width='240' class="featurephone ir">Feature phone</button><button title="Auto (100%)" data-width="100%" class="auto is-active">Auto</button></div></div><!--[if !IE]><!-->
|
|
2136
2566
|
<script src="docs.js"></script><!--<![endif]-->
|
|
2137
2567
|
</body></html><!-- Generated with StyleDocco (http://jacobrask.github.com/styledocco). -->
|