@finqu/cool 1.2.0 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/dist/css/cool-grid.css +2 -2
  2. package/dist/css/cool-grid.css.map +3 -3
  3. package/dist/css/cool-grid.min.css +1 -1
  4. package/dist/css/cool-grid.min.css.map +1 -1
  5. package/dist/css/cool-reboot.css +2 -2
  6. package/dist/css/cool-reboot.css.map +6 -6
  7. package/dist/css/cool-reboot.min.css +1 -1
  8. package/dist/css/cool-reboot.min.css.map +1 -1
  9. package/dist/css/cool.css +2668 -726
  10. package/dist/css/cool.css.map +18 -18
  11. package/dist/css/cool.min.css +2 -2
  12. package/dist/css/cool.min.css.map +1 -1
  13. package/dist/js/cool.bundle.js +119 -32
  14. package/dist/js/cool.bundle.js.map +1 -1
  15. package/dist/js/cool.bundle.min.js +2 -2
  16. package/dist/js/cool.bundle.min.js.map +1 -1
  17. package/dist/js/cool.esm.js +119 -32
  18. package/dist/js/cool.esm.js.map +1 -1
  19. package/dist/js/cool.esm.min.js +2 -2
  20. package/dist/js/cool.esm.min.js.map +1 -1
  21. package/dist/js/cool.js +119 -32
  22. package/dist/js/cool.js.map +1 -1
  23. package/dist/js/cool.min.js +2 -2
  24. package/dist/js/cool.min.js.map +1 -1
  25. package/html/dropdown-test.html +200 -0
  26. package/html/index.html +480 -5
  27. package/js/dist/collapse.js +1 -1
  28. package/js/dist/common.js +677 -545
  29. package/js/dist/common.js.map +1 -1
  30. package/js/dist/dropdown.js +3188 -1819
  31. package/js/dist/dropdown.js.map +1 -1
  32. package/js/dist/popover.js +1 -1
  33. package/js/dist/sectiontabs.js +1 -1
  34. package/js/dist/select.js +2842 -2649
  35. package/js/dist/select.js.map +1 -1
  36. package/js/dist/tooltip.js +1 -1
  37. package/js/src/common.js +8 -0
  38. package/js/src/dialog.js +6 -1
  39. package/js/src/dropdown.js +77 -5
  40. package/js/src/select.js +31 -31
  41. package/package.json +21 -21
  42. package/scss/_alert.scss +79 -82
  43. package/scss/_badge.scss +16 -22
  44. package/scss/_dialog.scss +1 -0
  45. package/scss/_dropdown.scss +1 -4
  46. package/scss/_frame.scss +23 -3
  47. package/scss/_functions.scss +10 -0
  48. package/scss/_images.scss +7 -1
  49. package/scss/_navbar.scss +40 -0
  50. package/scss/_section.scss +14 -0
  51. package/scss/_type.scss +37 -6
  52. package/scss/_variables.scss +4 -3
  53. package/scss/cool-grid.scss +1 -1
  54. package/scss/cool-reboot.scss +1 -1
  55. package/scss/cool.scss +1 -1
  56. package/scss/mixins/_alert-variant.scss +13 -28
  57. package/scss/mixins/_badge-variant.scss +27 -5
  58. package/scss/mixins/_text-truncate.scss +77 -4
  59. package/scss/utilities/_cursor.scss +2 -2
  60. package/scss/utilities/_text.scss +4 -2
package/html/index.html CHANGED
@@ -78,7 +78,7 @@
78
78
 
79
79
  <nav class="navbar-nav">
80
80
 
81
- <a href="#" class="nav-item btn btn-icon disable-hover active" data-toggle="tooltip" data-placement="bottom" data-content="Hi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda esse molestiae corporis reiciendis voluptates vitae qui autem, repudiandae odit. Excepturi, omnis? Blanditiis quae modi unde temporibus id, sed amet nisi.">
81
+ <a href="#" class="nav-item btn btn-icon disable-hover active pulse" data-toggle="tooltip" data-placement="bottom" data-content="Hi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda esse molestiae corporis reiciendis voluptates vitae qui autem, repudiandae odit. Excepturi, omnis? Blanditiis quae modi unde temporibus id, sed amet nisi.">
82
82
  <i class="fas fa-fw fa-home icon"></i>
83
83
  </a>
84
84
 
@@ -262,6 +262,34 @@
262
262
 
263
263
  </a>
264
264
 
265
+ </li>
266
+
267
+ <li class="nav-parent">
268
+
269
+ <a href="#alerts" class="nav-item">
270
+
271
+ <i class="fas fa-mug-hot nav-icon icon"></i>
272
+
273
+ <span class="nav-item-title">
274
+ Alerts
275
+ </span>
276
+
277
+ </a>
278
+
279
+ </li>
280
+
281
+ <li class="nav-parent">
282
+
283
+ <a href="#badges" class="nav-item">
284
+
285
+ <i class="fas fa-mug-hot nav-icon icon"></i>
286
+
287
+ <span class="nav-item-title">
288
+ Badges
289
+ </span>
290
+
291
+ </a>
292
+
265
293
  </li>
266
294
 
267
295
  </ul>
@@ -289,6 +317,12 @@
289
317
  <h5>Heading 5</h5>
290
318
  <h6>Heading 6</h6>
291
319
 
320
+ <p class="mt-4">Truncate</p>
321
+
322
+ <p class="text-truncate text-truncate-lines-2">
323
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
324
+ </p>
325
+
292
326
  </div>
293
327
 
294
328
  </div>
@@ -1046,13 +1080,82 @@
1046
1080
 
1047
1081
  <div class="section-content overflow-visible">
1048
1082
 
1049
- <div class="dropdown dropbottom">
1083
+ <div class="dropdown dropleft">
1084
+
1085
+ <button class="btn btn-primary" type="button" data-toggle="dropdown">
1086
+ Dropdown left
1087
+ </button>
1088
+
1089
+ <div class="dropdown-menu dropdown-menu-right">
1090
+
1091
+ <ul class="dropdown-list">
1092
+
1093
+ <li class="dropdown-item">Item 1</li>
1094
+ <li class="dropdown-item">Item 2</li>
1095
+ <li class="dropdown-item">Item 3</li>
1096
+ <li class="dropdown-divider"></li>
1097
+ <li class="dropdown-item">Item 4</li>
1098
+ <li class="dropdown-item">Item 5</li>
1099
+
1100
+ </ul>
1101
+
1102
+ </div>
1103
+
1104
+ </div>
1105
+
1106
+ <div class="dropdown dropup">
1107
+
1108
+ <button class="btn btn-primary" type="button" data-toggle="dropdown">
1109
+ Dropdown up
1110
+ </button>
1111
+
1112
+ <div class="dropdown-menu dropdown-menu-right">
1113
+
1114
+ <ul class="dropdown-list">
1115
+
1116
+ <li class="dropdown-item">Item 1</li>
1117
+ <li class="dropdown-item">Item 2</li>
1118
+ <li class="dropdown-item">Item 3</li>
1119
+ <li class="dropdown-divider"></li>
1120
+ <li class="dropdown-item">Item 4</li>
1121
+ <li class="dropdown-item">Item 5</li>
1122
+
1123
+ </ul>
1124
+
1125
+ </div>
1126
+
1127
+ </div>
1128
+
1129
+ <div class="dropdown dropbottom">
1130
+
1131
+ <button class="btn btn-primary" type="button" data-toggle="dropdown">
1132
+ Dropdown bottom
1133
+ </button>
1134
+
1135
+ <div class="dropdown-menu dropdown-menu-right">
1136
+
1137
+ <ul class="dropdown-list">
1138
+
1139
+ <li class="dropdown-item">Item 1</li>
1140
+ <li class="dropdown-item">Item 2</li>
1141
+ <li class="dropdown-item">Item 3</li>
1142
+ <li class="dropdown-divider"></li>
1143
+ <li class="dropdown-item">Item 4</li>
1144
+ <li class="dropdown-item">Item 5</li>
1145
+
1146
+ </ul>
1147
+
1148
+ </div>
1149
+
1150
+ </div>
1151
+
1152
+ <div class="dropdown dropright">
1050
1153
 
1051
1154
  <button class="btn btn-primary" type="button" data-toggle="dropdown">
1052
- Dropdown
1155
+ Dropdown right
1053
1156
  </button>
1054
1157
 
1055
- <div class="dropdown-menu dropdown-menu-left">
1158
+ <div class="dropdown-menu dropdown-menu-right">
1056
1159
 
1057
1160
  <ul class="dropdown-list">
1058
1161
 
@@ -1316,6 +1419,378 @@
1316
1419
 
1317
1420
  </div>
1318
1421
 
1422
+ <div class="section" id="alerts">
1423
+
1424
+ <div class="section-title">
1425
+
1426
+ Alerts
1427
+
1428
+ </div>
1429
+
1430
+ <div class="section-content">
1431
+
1432
+ <div class="alert">
1433
+
1434
+ <div class="alert-icon">
1435
+
1436
+ <i class="fas fa-fw fa-hourglass icon"></i>
1437
+
1438
+ </div>
1439
+
1440
+ <div class="alert-content-container">
1441
+
1442
+ <div class="alert-content">
1443
+ <p><strong>Title here</strong></p>
1444
+
1445
+ <p>Alert text!</p>
1446
+
1447
+ </div>
1448
+
1449
+ <div class="alert-action">
1450
+
1451
+ <a href="#" class="btn btn-secondary">
1452
+ Alert action
1453
+ </a>
1454
+
1455
+ </div>
1456
+
1457
+ </div>
1458
+
1459
+ </div>
1460
+
1461
+ <div class="alert alert-info">
1462
+
1463
+ <div class="alert-icon">
1464
+
1465
+ <i class="fas fa-fw fa-hourglass icon"></i>
1466
+
1467
+ </div>
1468
+
1469
+ <div class="alert-content-container">
1470
+
1471
+ <div class="alert-content">
1472
+
1473
+ Alert text!
1474
+
1475
+ </div>
1476
+
1477
+ </div>
1478
+
1479
+ </div>
1480
+
1481
+ <div class="alert alert-success">
1482
+
1483
+ <div class="alert-content-container">
1484
+
1485
+ <div class="alert-content">
1486
+
1487
+ Alert text!
1488
+
1489
+ </div>
1490
+
1491
+ <div class="alert-action">
1492
+
1493
+ <a href="#" class="btn btn-secondary">
1494
+ Alert action
1495
+ </a>
1496
+
1497
+ </div>
1498
+
1499
+ </div>
1500
+
1501
+ </div>
1502
+
1503
+ <div class="alert alert-warning">
1504
+
1505
+ <div class="alert-content-container">
1506
+
1507
+ <div class="alert-content">
1508
+
1509
+ Alert text!
1510
+
1511
+ </div>
1512
+
1513
+ </div>
1514
+
1515
+ </div>
1516
+
1517
+ <div class="alert alert-danger">
1518
+
1519
+ <div class="alert-icon">
1520
+
1521
+ <i class="fas fa-fw fa-times icon"></i>
1522
+
1523
+ </div>
1524
+
1525
+ <div class="alert-content-container">
1526
+
1527
+ <div class="alert-content">
1528
+
1529
+ Alert text!
1530
+
1531
+ </div>
1532
+
1533
+ <div class="alert-action">
1534
+
1535
+ <a href="#" class="btn btn-secondary">
1536
+ Alert action
1537
+ </a>
1538
+
1539
+ </div>
1540
+
1541
+ </div>
1542
+
1543
+ </div>
1544
+
1545
+ <div class="alert alert-danger alert-sm">
1546
+
1547
+ <div class="alert-icon">
1548
+
1549
+ <i class="fas fa-fw fa-times icon"></i>
1550
+
1551
+ </div>
1552
+
1553
+ <div class="alert-content-container">
1554
+
1555
+ <div class="alert-content">
1556
+
1557
+ Alert text!
1558
+
1559
+ </div>
1560
+
1561
+ <div class="alert-action">
1562
+
1563
+ <a href="#" class="btn btn-secondary btn-sm">
1564
+ Alert action
1565
+ </a>
1566
+
1567
+ </div>
1568
+
1569
+ </div>
1570
+
1571
+ </div>
1572
+
1573
+ <div class="alert alert-danger alert-sm">
1574
+
1575
+ <div class="alert-content-container">
1576
+
1577
+ <div class="alert-content">
1578
+
1579
+ Alert text!
1580
+
1581
+ </div>
1582
+
1583
+ <div class="alert-action">
1584
+
1585
+ <a href="#" class="btn btn-secondary btn-sm">
1586
+ Alert action
1587
+ </a>
1588
+
1589
+ </div>
1590
+
1591
+ </div>
1592
+
1593
+ </div>
1594
+
1595
+ <div class="alert alert-danger alert-sm">
1596
+
1597
+ <div class="alert-content-container">
1598
+
1599
+ <div class="alert-content">
1600
+
1601
+ Alert text!
1602
+
1603
+ </div>
1604
+
1605
+ </div>
1606
+
1607
+ </div>
1608
+
1609
+ <div class="alert-icon">
1610
+
1611
+ <i class="fas fa-fw fa-times icon"></i>
1612
+
1613
+ </div>
1614
+
1615
+ <div class="alert-icon alert-icon-info">
1616
+
1617
+ <i class="fas fa-fw fa-times icon"></i>
1618
+
1619
+ </div>
1620
+
1621
+ <div class="alert-icon alert-icon-success">
1622
+
1623
+ <i class="fas fa-fw fa-times icon"></i>
1624
+
1625
+ </div>
1626
+
1627
+ <div class="alert-icon alert-icon-warning">
1628
+
1629
+ <i class="fas fa-fw fa-times icon"></i>
1630
+
1631
+ </div>
1632
+
1633
+ <div class="alert-icon alert-icon-danger">
1634
+
1635
+ <i class="fas fa-fw fa-times icon"></i>
1636
+
1637
+ </div>
1638
+
1639
+ <h1 class="mt-3">
1640
+ <div class="alert-icon alert-icon-success">
1641
+
1642
+ <i class="fas fa-fw fa-times icon"></i>
1643
+
1644
+ </div>
1645
+
1646
+ Lorem ipsum
1647
+ </h1>
1648
+
1649
+ <h2>
1650
+ <div class="alert-icon alert-icon-success">
1651
+
1652
+ <i class="fas fa-fw fa-times icon"></i>
1653
+
1654
+ </div>
1655
+
1656
+ Lorem ipsum
1657
+ </h2>
1658
+
1659
+ <h3>
1660
+ <div class="alert-icon alert-icon-success">
1661
+
1662
+ <i class="fas fa-fw fa-times icon"></i>
1663
+
1664
+ </div>
1665
+
1666
+ Lorem ipsum
1667
+ </h3>
1668
+
1669
+ <h4>
1670
+ <div class="alert-icon alert-icon-success">
1671
+
1672
+ <i class="fas fa-fw fa-times icon"></i>
1673
+
1674
+ </div>
1675
+
1676
+ Lorem ipsum
1677
+ </h4>
1678
+
1679
+ <h5>
1680
+ <div class="alert-icon alert-icon-success">
1681
+
1682
+ <i class="fas fa-fw fa-times icon"></i>
1683
+
1684
+ </div>
1685
+
1686
+ Lorem ipsum
1687
+ </h5>
1688
+
1689
+ <h6>
1690
+ <div class="alert-icon alert-icon-success">
1691
+
1692
+ <i class="fas fa-fw fa-times icon"></i>
1693
+
1694
+ </div>
1695
+
1696
+ Lorem ipsum
1697
+ </h6>
1698
+ </div>
1699
+
1700
+ </div>
1701
+
1702
+ <div class="section" id="badges">
1703
+
1704
+ <div class="section-title">
1705
+
1706
+ Badges
1707
+
1708
+ </div>
1709
+
1710
+ <div class="section-content">
1711
+
1712
+ <p>Colors</p>
1713
+
1714
+ <span class="badge badge-white">Badge</span>
1715
+ <span class="badge badge-grey-lightest">Badge</span>
1716
+ <span class="badge badge-grey-lighter">Badge</span>
1717
+ <span class="badge badge-grey-light">Badge</span>
1718
+ <span class="badge badge-grey">Badge</span>
1719
+ <span class="badge badge-grey-dark">Badge</span>
1720
+ <span class="badge badge-grey-darker">Badge</span>
1721
+ <span class="badge badge-grey-darkest">Badge</span>
1722
+ <span class="badge badge-black">Badge</span>
1723
+ <span class="badge badge-blue-light">Badge</span>
1724
+ <span class="badge badge-blue">Badge</span>
1725
+ <span class="badge badge-blue-dark">Badge</span>
1726
+ <span class="badge badge-blue-grey">Badge</span>
1727
+ <span class="badge badge-green">Badge</span>
1728
+ <span class="badge badge-pink">Badge</span>
1729
+ <span class="badge badge-red">Badge</span>
1730
+ <span class="badge badge-yellow">Badge</span>
1731
+
1732
+ <p class="mt-3">Theme colors</p>
1733
+
1734
+ <span class="badge badge-primary">Badge</span>
1735
+ <span class="badge badge-secondary">Badge</span>
1736
+ <span class="badge badge-success">Badge</span>
1737
+ <span class="badge badge-info">Badge</span>
1738
+ <span class="badge badge-warning">Badge</span>
1739
+ <span class="badge badge-danger">Badge</span>
1740
+
1741
+ <p class="mt-3">Outline</p>
1742
+
1743
+ <span class="badge badge-outline-white">Badge</span>
1744
+ <span class="badge badge-outline-grey-lightest">Badge</span>
1745
+ <span class="badge badge-outline-grey-lighter">Badge</span>
1746
+ <span class="badge badge-outline-grey-light">Badge</span>
1747
+ <span class="badge badge-outline-grey">Badge</span>
1748
+ <span class="badge badge-outline-grey-dark">Badge</span>
1749
+ <span class="badge badge-outline-grey-darker">Badge</span>
1750
+ <span class="badge badge-outline-grey-darkest">Badge</span>
1751
+ <span class="badge badge-outline-black">Badge</span>
1752
+ <span class="badge badge-outline-blue-light">Badge</span>
1753
+ <span class="badge badge-outline-blue">Badge</span>
1754
+ <span class="badge badge-outline-blue-dark">Badge</span>
1755
+ <span class="badge badge-outline-blue-grey">Badge</span>
1756
+ <span class="badge badge-outline-green">Badge</span>
1757
+ <span class="badge badge-outline-pink">Badge</span>
1758
+ <span class="badge badge-outline-red">Badge</span>
1759
+ <span class="badge badge-outline-yellow">Badge</span>
1760
+ <span class="badge badge-outline-primary">Badge</span>
1761
+ <span class="badge badge-outline-secondary">Badge</span>
1762
+ <span class="badge badge-outline-success">Badge</span>
1763
+ <span class="badge badge-outline-info">Badge</span>
1764
+ <span class="badge badge-outline-warning">Badge</span>
1765
+ <span class="badge badge-outline-danger">Badge</span>
1766
+
1767
+ <p class="mt-3">Icons</p>
1768
+
1769
+ <span class="badge badge-primary"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
1770
+ <span class="badge badge-secondary"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
1771
+ <span class="badge badge-success"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
1772
+ <span class="badge badge-info"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
1773
+ <span class="badge badge-warning"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
1774
+ <span class="badge badge-danger"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
1775
+
1776
+ <p class="mt-3">Sizes</p>
1777
+
1778
+ <h1><span class="badge badge-primary"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h1>
1779
+
1780
+ <h2><span class="badge badge-secondary"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h2>
1781
+
1782
+ <h3><span class="badge badge-success"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h3>
1783
+
1784
+ <h4><span class="badge badge-info"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h4>
1785
+
1786
+ <h5><span class="badge badge-warning"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h5>
1787
+
1788
+ <h6><span class="badge badge-danger"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h6>
1789
+
1790
+ </div>
1791
+
1792
+ </div>
1793
+
1319
1794
  </div>
1320
1795
 
1321
1796
  </div>
@@ -1337,7 +1812,7 @@
1337
1812
  faPro: false
1338
1813
  },
1339
1814
  dropdown: {
1340
- debug: false
1815
+ debug: true
1341
1816
  },
1342
1817
  tooltip: {
1343
1818
  debug: false
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Cool UI collapse.js v1.1.9 (https://finqu.fi)
2
+ * Cool UI collapse.js v1.2.2 (https://finqu.fi)
3
3
  * Copyright 2011-2019 Finqu Oy
4
4
  * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
5
5
  */