picasso 0.5.1 → 0.5.2
Sign up to get free protection for your applications and to get access to all the features.
- 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). -->
|