@finqu/cool 1.0.0

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 (199) hide show
  1. package/README.md +1 -0
  2. package/build/.eslintrc.json +10 -0
  3. package/build/banner.js +14 -0
  4. package/build/build-plugins.js +92 -0
  5. package/build/rollup.config.js +78 -0
  6. package/dist/css/cool-grid.css +3672 -0
  7. package/dist/css/cool-grid.css.map +30 -0
  8. package/dist/css/cool-grid.min.css +7 -0
  9. package/dist/css/cool-grid.min.css.map +1 -0
  10. package/dist/css/cool-reboot.css +281 -0
  11. package/dist/css/cool-reboot.css.map +58 -0
  12. package/dist/css/cool-reboot.min.css +7 -0
  13. package/dist/css/cool-reboot.min.css.map +1 -0
  14. package/dist/css/cool.css +14841 -0
  15. package/dist/css/cool.css.map +144 -0
  16. package/dist/css/cool.min.css +7 -0
  17. package/dist/css/cool.min.css.map +1 -0
  18. package/dist/js/cool.bundle.js +15304 -0
  19. package/dist/js/cool.bundle.js.map +1 -0
  20. package/dist/js/cool.bundle.min.js +45 -0
  21. package/dist/js/cool.bundle.min.js.map +1 -0
  22. package/dist/js/cool.esm.js +4766 -0
  23. package/dist/js/cool.esm.js.map +1 -0
  24. package/dist/js/cool.esm.min.js +7 -0
  25. package/dist/js/cool.esm.min.js.map +1 -0
  26. package/dist/js/cool.js +4948 -0
  27. package/dist/js/cool.js.map +1 -0
  28. package/dist/js/cool.min.js +7 -0
  29. package/dist/js/cool.min.js.map +1 -0
  30. package/html/index.html +892 -0
  31. package/js/dist/collapse.js +321 -0
  32. package/js/dist/collapse.js.map +1 -0
  33. package/js/dist/common.js +1474 -0
  34. package/js/dist/common.js.map +1 -0
  35. package/js/dist/cooldropdown.js +467 -0
  36. package/js/dist/cooldropdown.js.map +1 -0
  37. package/js/dist/coolpopover.js +391 -0
  38. package/js/dist/coolpopover.js.map +1 -0
  39. package/js/dist/coolsectiontabs.js +256 -0
  40. package/js/dist/coolsectiontabs.js.map +1 -0
  41. package/js/dist/coolselect.js +796 -0
  42. package/js/dist/coolselect.js.map +1 -0
  43. package/js/dist/cooltooltip.js +360 -0
  44. package/js/dist/cooltooltip.js.map +1 -0
  45. package/js/dist/coolui.js +73 -0
  46. package/js/dist/coolui.js.map +1 -0
  47. package/js/dist/dropdown.js +1716 -0
  48. package/js/dist/dropdown.js.map +1 -0
  49. package/js/dist/popover.js +587 -0
  50. package/js/dist/popover.js.map +1 -0
  51. package/js/dist/sectiontabs.js +263 -0
  52. package/js/dist/sectiontabs.js.map +1 -0
  53. package/js/dist/select.js +2029 -0
  54. package/js/dist/select.js.map +1 -0
  55. package/js/dist/tooltip.js +555 -0
  56. package/js/dist/tooltip.js.map +1 -0
  57. package/js/index.esm.js +21 -0
  58. package/js/index.umd.js +21 -0
  59. package/js/src/abstract-ui-component.js +70 -0
  60. package/js/src/collapse.js +258 -0
  61. package/js/src/common.js +280 -0
  62. package/js/src/dialog.js +570 -0
  63. package/js/src/dropdown.js +443 -0
  64. package/js/src/popover.js +615 -0
  65. package/js/src/section-tabs.js +204 -0
  66. package/js/src/select.js +832 -0
  67. package/js/src/toast.js +581 -0
  68. package/js/src/tooltip.js +575 -0
  69. package/js/src/util/animate-css.js +22 -0
  70. package/js/src/util/index.js +112 -0
  71. package/js/src/util/perfect-scrollbar.js +1316 -0
  72. package/less/alert.less +345 -0
  73. package/less/badge.less +38 -0
  74. package/less/bootstrap-noconflict.less +23 -0
  75. package/less/bootstrap.less +23 -0
  76. package/less/button-group.less +153 -0
  77. package/less/buttons.less +287 -0
  78. package/less/dialog-noconflict.less +174 -0
  79. package/less/dialog.less +203 -0
  80. package/less/dropdown.less +209 -0
  81. package/less/forms.less +770 -0
  82. package/less/images.less +242 -0
  83. package/less/input-group.less +163 -0
  84. package/less/list-group.less +73 -0
  85. package/less/mixins/aspect-ratio.less +23 -0
  86. package/less/mixins/border-radius.less +24 -0
  87. package/less/mixins/box-shadow.less +4 -0
  88. package/less/mixins/buttons.less +17 -0
  89. package/less/mixins/caret.less +51 -0
  90. package/less/mixins/clearfix.less +10 -0
  91. package/less/mixins/gradients.less +34 -0
  92. package/less/mixins/nav-divider.less +7 -0
  93. package/less/mixins/object-fit.less +13 -0
  94. package/less/mixins/reset-text.less +16 -0
  95. package/less/mixins.less +11 -0
  96. package/less/package.json +11 -0
  97. package/less/pagination.less +69 -0
  98. package/less/popover.less +143 -0
  99. package/less/project.sublime-workspace +774 -0
  100. package/less/reboot.less +235 -0
  101. package/less/section.less +793 -0
  102. package/less/select.less +150 -0
  103. package/less/tables.less +737 -0
  104. package/less/tabs.less +162 -0
  105. package/less/tooltip.less +87 -0
  106. package/less/type.less +71 -0
  107. package/less/utilities/align.less +27 -0
  108. package/less/utilities/animate.less +3512 -0
  109. package/less/utilities/background.less +70 -0
  110. package/less/utilities/borders.less +16 -0
  111. package/less/utilities/color.less +70 -0
  112. package/less/utilities/cursor.less +8 -0
  113. package/less/utilities/display.less +38 -0
  114. package/less/utilities/embed.less +61 -0
  115. package/less/utilities/flex.less +76 -0
  116. package/less/utilities/jquery-ui.less +116 -0
  117. package/less/utilities/lazyload.less +29 -0
  118. package/less/utilities/overflow.less +11 -0
  119. package/less/utilities/pace.less +25 -0
  120. package/less/utilities/placeholder.less +60 -0
  121. package/less/utilities/position.less +42 -0
  122. package/less/utilities/scrollbar.less +152 -0
  123. package/less/utilities/spacing.less +197 -0
  124. package/less/utilities/text.less +68 -0
  125. package/less/utilities/transform.less +7 -0
  126. package/less/utilities.less +21 -0
  127. package/less/variables.less +343 -0
  128. package/package.json +71 -0
  129. package/scss/LISENCE +15 -0
  130. package/scss/_alert.scss +125 -0
  131. package/scss/_badge.scss +58 -0
  132. package/scss/_button-group.scss +124 -0
  133. package/scss/_buttons.scss +206 -0
  134. package/scss/_custom-forms.scss +423 -0
  135. package/scss/_dialog.scss +149 -0
  136. package/scss/_dropdown.scss +234 -0
  137. package/scss/_forms.scss +257 -0
  138. package/scss/_frame.scss +523 -0
  139. package/scss/_functions.scss +114 -0
  140. package/scss/_grid.scss +35 -0
  141. package/scss/_images.scss +312 -0
  142. package/scss/_input-group.scss +245 -0
  143. package/scss/_list-group.scss +82 -0
  144. package/scss/_mixins.scss +32 -0
  145. package/scss/_navbar.scss +214 -0
  146. package/scss/_pagination.scss +79 -0
  147. package/scss/_popover.scss +165 -0
  148. package/scss/_reboot.scss +279 -0
  149. package/scss/_root.scss +15 -0
  150. package/scss/_section.scss +851 -0
  151. package/scss/_select.scss +166 -0
  152. package/scss/_tables.scss +707 -0
  153. package/scss/_tabs.scss +175 -0
  154. package/scss/_toast.scss +182 -0
  155. package/scss/_tooltip.scss +101 -0
  156. package/scss/_type.scss +90 -0
  157. package/scss/_utilities.scss +21 -0
  158. package/scss/_variables.scss +697 -0
  159. package/scss/cool-grid.scss +29 -0
  160. package/scss/cool-reboot.scss +11 -0
  161. package/scss/cool.scss +36 -0
  162. package/scss/mixins/_alert-variant.scss +40 -0
  163. package/scss/mixins/_aspect-ratio.scss +29 -0
  164. package/scss/mixins/_background-variant.scss +25 -0
  165. package/scss/mixins/_badge-variant.scss +13 -0
  166. package/scss/mixins/_breakpoints.scss +102 -0
  167. package/scss/mixins/_buttons.scss +104 -0
  168. package/scss/mixins/_caret.scss +80 -0
  169. package/scss/mixins/_clearfix.scss +10 -0
  170. package/scss/mixins/_float.scss +14 -0
  171. package/scss/mixins/_forms.scss +51 -0
  172. package/scss/mixins/_gradients.scss +40 -0
  173. package/scss/mixins/_grid-framework.scss +72 -0
  174. package/scss/mixins/_grid.scss +60 -0
  175. package/scss/mixins/_nav-divider.scss +9 -0
  176. package/scss/mixins/_object-fit.scss +16 -0
  177. package/scss/mixins/_reset-text.scss +19 -0
  178. package/scss/mixins/_text-emphasis.scss +21 -0
  179. package/scss/mixins/_text-hide.scss +10 -0
  180. package/scss/mixins/_text-truncate.scss +8 -0
  181. package/scss/project.sublime-workspace +491 -0
  182. package/scss/utilities/_align.scss +41 -0
  183. package/scss/utilities/_animate.scss +3512 -0
  184. package/scss/utilities/_background.scss +14 -0
  185. package/scss/utilities/_borders.scss +146 -0
  186. package/scss/utilities/_clearfix.scss +6 -0
  187. package/scss/utilities/_collapse.scss +33 -0
  188. package/scss/utilities/_cursor.scss +10 -0
  189. package/scss/utilities/_display.scss +16 -0
  190. package/scss/utilities/_embed.scss +78 -0
  191. package/scss/utilities/_flex.scss +50 -0
  192. package/scss/utilities/_lazyload.scss +31 -0
  193. package/scss/utilities/_overflow.scss +6 -0
  194. package/scss/utilities/_perfect-scrollbar.scss +154 -0
  195. package/scss/utilities/_placeholder.scss +76 -0
  196. package/scss/utilities/_position.scss +30 -0
  197. package/scss/utilities/_sizing.scss +32 -0
  198. package/scss/utilities/_spacing.scss +92 -0
  199. package/scss/utilities/_text.scss +97 -0
package/html/index.html ADDED
@@ -0,0 +1,892 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html>
4
+
5
+ <head>
6
+ <meta charset="utf-8">
7
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
8
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
9
+
10
+ <title>Finqu UI</title>
11
+
12
+ <link rel="dns-prefetch" href="//cdn.finqu.com">
13
+ <link rel="dns-prefetch" href="//fonts.gstatic.com">
14
+
15
+ <meta name="application-name" content="Finqu UI">
16
+ <meta name="msapplication-TileColor" content="#212529">
17
+ <meta name="msapplication-TileImage" content="https://cdn.finqu.com/sites/public/images/favicons/mstile-144x144.png">
18
+ <meta name="theme-color" content="#212529">
19
+
20
+ <link rel="apple-touch-icon" sizes="57x57" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-57x57.png">
21
+ <link rel="apple-touch-icon" sizes="60x60" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-60x60.png">
22
+ <link rel="apple-touch-icon" sizes="72x72" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-72x72.png">
23
+ <link rel="apple-touch-icon" sizes="76x76" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-76x76.png">
24
+ <link rel="apple-touch-icon" sizes="114x114" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-114x114.png">
25
+ <link rel="apple-touch-icon" sizes="120x120" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-120x120.png">
26
+ <link rel="apple-touch-icon" sizes="144x144" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-144x144.png">
27
+ <link rel="apple-touch-icon" sizes="152x152" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-152x152.png">
28
+ <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.finqu.com/sites/public/images/favicons/apple-touch-icon-180x180.png">
29
+
30
+ <link rel="icon" type="image/png" href="https://cdn.finqu.com/sites/public/images/favicons/favicon-16x16.png" sizes="16x16">
31
+ <link rel="icon" type="image/png" href="https://cdn.finqu.com/sites/public/images/favicons/favicon-32x32.png" sizes="32x32">
32
+ <link rel="icon" type="image/png" href="https://cdn.finqu.com/sites/public/images/favicons/favicon-96x96.png" sizes="96x96">
33
+ <link rel="icon" type="image/png" href="https://cdn.finqu.com/sites/public/images/favicons/android-chrome-192x192.png" sizes="192x192">
34
+
35
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i" rel="stylesheet">
36
+ <link rel="stylesheet" href="../dist/css/cool.css">
37
+ <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
38
+ </head>
39
+
40
+ <body>
41
+
42
+ <header class="site-header">
43
+
44
+ <div class="navbar">
45
+
46
+ <div class="navbar-brand">
47
+
48
+ <div class="sidebar-left-toggler">
49
+
50
+ <div class="icon animated">
51
+ <span></span>
52
+ <span></span>
53
+ <span></span>
54
+ </div>
55
+
56
+ </div>
57
+
58
+ <div class="brand-container">
59
+
60
+ <a href="//business<?= CONFIG_MAINDOMAIN ?>" class="brand">
61
+
62
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440.72 120.53" width="100px">
63
+ <g id="Layer_2" data-name="Layer 2">
64
+ <g id="Layer_1-2" data-name="Layer 1">
65
+ <path d="M439.51 78.14Q428.32 53.06 417.08 28a19.65 19.65 0 0 0-4.76-6.61q-9.9-9-19.83-17.9a12.25 12.25 0 0 0-13.72-2.38q-11.24 4.71-22.24 10a12.31 12.31 0 0 0-7.35 11.84c0 2.1 0 4.21.06 6.3a2 2 0 0 1-1.24 2.11c-10.92 6.37-20.51 14.34-25.84 26-3.94 8.6 3.45 9.51 4.22 5.45 1.06-5.53 5-9.77 8.74-13.83 6.68-7.17 14.39-12.9 23.71-16.22a24.07 24.07 0 0 1 12.87-1.4 20.41 20.41 0 0 1 3.48 1.11c1.9.72 3.59.22 4.31-1.36a2.94 2.94 0 0 0-2-4c-2.26-.75-4.62-1.19-6.94-1.73a13 13 0 0 0-1.61-.19 9 9 0 0 1 3.79-4.5 10.16 10.16 0 0 1 14.43 13.17 10.39 10.39 0 0 1-13.44 4.68c-3.46-1.68-7-1.51-10.59-.57A41.48 41.48 0 0 0 350 44.34a2 2 0 0 0-.61 1.34c-.35 5.1.61 8.87 2.8 14.62.12.31 15.4 34 21.33 47.18a14.79 14.79 0 0 0 2.16 3.53 13.34 13.34 0 0 0 15.78 3.23q10.5-4.67 21-9.39c6.72-3 13.45-6 20.15-9 7-3.25 9.98-10.78 6.9-17.71zm-41.19 10.64a4.4 4.4 0 0 1-2.32 2.48h-.07a4.37 4.37 0 0 1-3.65-8 4.28 4.28 0 0 1 5.82 2.1 4.33 4.33 0 0 1 .22 3.42zM387.69 82c-1.48.7-2.4.41-3.33-1-3-4.56-6.18-9.06-9.36-13.53a6.56 6.56 0 0 0-2.24-1.7c-1.31-.7-2.79-1.11-4-1.91a2.59 2.59 0 0 1-1-2.05c.1-1.06 1.06-1.41 2.08-1.13 2.22.6 4.41 1.29 6.64 1.84a3.42 3.42 0 0 0 2-.06c4.33-1.68 8.63-3.42 12.93-5.17 5.53-2.25 11-4.53 16.57-6.8 1.61-.65 2.53-.16 2.94 1.53 1.26 5.17 2.5 10.35 3.81 15.5a2.06 2.06 0 0 1-1.36 2.78c-4.29 1.91-8.56 3.88-12.84 5.83S391.94 80 387.69 82zm27.36.62l-.25.11a4.38 4.38 0 1 1-3-8.23 4.56 4.56 0 0 1 5.62 2.44 4.43 4.43 0 0 1-2.37 5.65z" fill="#02a9dc"/>
66
+ <path d="M0 83.08V16.3Q0 10.95 2.81 8a10.19 10.19 0 0 1 7.71-3h37.69q9.32 0 9.31 8v.79q0 8.25-9.36 8.25H17.21v22.39h30.93q9.38 0 9.38 7.49v.45q0 7.93-9.38 7.87H17.75v24.62q0 9.48-8.8 9.48h-.56Q0 94.34 0 83.08zM65.39 85.16V35.53q0-9.32 8.64-9.39 8.64 0 8.71 9.39v49.63q0 9.18-8.51 9.18h-.1q-8.74 0-8.74-9.18zM65.39 14.42C64.45 8.29 68.27 5.09 74 5c5.76 0 9.61 3.19 8.71 9.38-.45 3.13-2.84 8-8.51 8h-.1c-5.79.07-8.23-4.79-8.71-7.96zM135.28 25.34q-14.11 0-22 11.5c-.49-2.82-1.26-10.64-11-10.64-5.31 0-8 3.37-8 9.33v49.63q0 9.18 8.77 9.18h2q8.53 0 8.54-9.25V50q4.61-8.84 14.76-8.84 6 0 9.16 3.88t3.21 10.63v29.42q0 9.25 8.77 9.25h2.08q8.5 0 8.51-9.18V53.07q0-12.39-6.2-20.06t-18.6-7.67zM273.69 94.34q14.1 0 22.06-11.5c.47 2.82 1.25 10.64 11 10.64 5.32 0 8-3.37 8-9.32V34.52q0-9.18-8.77-9.18h-2.05q-8.53 0-8.54 9.25v35.1q-4.6 8.84-14.77 8.84-5.94 0-9.15-3.88T268.21 64V34.59q0-9.26-8.77-9.25h-2.08q-8.51 0-8.51 9.18V66.6q0 12.41 6.2 20.07t18.64 7.67zM232.36 26.2c-10 0-10.44 7.75-11 10.37a21.78 21.78 0 0 0-8.71-8.08 27.21 27.21 0 0 0-13.14-3.15q-14 0-22.64 9.67t-8.64 25.77q0 15.45 8.64 25.15t22.38 9.68q14.6-.06 21.7-12.38v28.06q0 9.24 8.54 9.24h2q8.81 0 8.81-9.31V35.53c.01-5.98-2.67-9.33-7.94-9.33zm-13.07 38.33a14.92 14.92 0 0 1-5 11.42 16.92 16.92 0 0 1-11.92 4.59 15.64 15.64 0 0 1-12.36-5.49q-4.78-5.49-4.79-14.27T190 46.51q4.72-5.35 12.7-5.36c7.86 0 15 3.11 16.61 10.85.63 3.07-.02 12.53-.02 12.53z" fill="#ffffff"/>
67
+ </g>
68
+ </g>
69
+ </svg>
70
+
71
+ </a>
72
+
73
+ </div>
74
+
75
+ <div class="sidebar-right-toggler"></div>
76
+
77
+ </div>
78
+
79
+ <nav class="navbar-nav">
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.">
82
+ <i class="fas fa-fw fa-home icon"></i>
83
+ </a>
84
+
85
+ </nav>
86
+
87
+ </div>
88
+
89
+ </header>
90
+
91
+ <main class="site-main">
92
+
93
+ <aside class="sidebar-left visible">
94
+
95
+ <div class="sidebar-content">
96
+
97
+ <ul class="nav">
98
+
99
+ <li class="nav-parent">
100
+
101
+ <a href="#typography" class="nav-item">
102
+
103
+ <i class="fas fa-mug-hot nav-icon icon"></i>
104
+
105
+ <span class="nav-item-title">
106
+ Typography
107
+ </span>
108
+
109
+ </a>
110
+
111
+ </li>
112
+
113
+ <li class="nav-parent">
114
+
115
+ <a href="#buttons" class="nav-item">
116
+
117
+ <i class="fas fa-mug-hot nav-icon icon"></i>
118
+
119
+ <span class="nav-item-title">
120
+ Buttons
121
+ </span>
122
+
123
+ </a>
124
+
125
+ </li>
126
+
127
+ <li class="nav-parent">
128
+
129
+ <a href="#input-group" class="nav-item">
130
+
131
+ <i class="fas fa-mug-hot nav-icon icon"></i>
132
+
133
+ <span class="nav-item-title">
134
+ Input group
135
+ </span>
136
+
137
+ </a>
138
+
139
+ </li>
140
+
141
+ <li class="nav-parent">
142
+
143
+ <a href="#tooltip" class="nav-item">
144
+
145
+ <i class="fas fa-mug-hot nav-icon icon"></i>
146
+
147
+ <span class="nav-item-title">
148
+ Tooltip
149
+ </span>
150
+
151
+ </a>
152
+
153
+ </li>
154
+
155
+ <li class="nav-parent">
156
+
157
+ <a href="#popover" class="nav-item">
158
+
159
+ <i class="fas fa-mug-hot nav-icon icon"></i>
160
+
161
+ <span class="nav-item-title">
162
+ Popover
163
+ </span>
164
+
165
+ </a>
166
+
167
+ </li>
168
+
169
+ <li class="nav-parent">
170
+
171
+ <a href="#select" class="nav-item">
172
+
173
+ <i class="fas fa-mug-hot nav-icon icon"></i>
174
+
175
+ <span class="nav-item-title">
176
+ Select
177
+ </span>
178
+
179
+ </a>
180
+
181
+ </li>
182
+
183
+ <li class="nav-parent">
184
+
185
+ <a href="#dropdown" class="nav-item">
186
+
187
+ <i class="fas fa-mug-hot nav-icon icon"></i>
188
+
189
+ <span class="nav-item-title">
190
+ Dropdown
191
+ </span>
192
+
193
+ </a>
194
+
195
+ </li>
196
+
197
+ <li class="nav-parent">
198
+
199
+ <a href="#collapse" class="nav-item">
200
+
201
+ <i class="fas fa-mug-hot nav-icon icon"></i>
202
+
203
+ <span class="nav-item-title">
204
+ Collapse
205
+ </span>
206
+
207
+ </a>
208
+
209
+ </li>
210
+
211
+ <li class="nav-parent">
212
+
213
+ <a href="#toast" class="nav-item">
214
+
215
+ <i class="fas fa-mug-hot nav-icon icon"></i>
216
+
217
+ <span class="nav-item-title">
218
+ Toast
219
+ </span>
220
+
221
+ </a>
222
+
223
+ </li>
224
+
225
+ <li class="nav-parent">
226
+
227
+ <a href="#dialog" class="nav-item">
228
+
229
+ <i class="fas fa-mug-hot nav-icon icon"></i>
230
+
231
+ <span class="nav-item-title">
232
+ Dialog
233
+ </span>
234
+
235
+ </a>
236
+
237
+ </li>
238
+
239
+ <li class="nav-parent">
240
+
241
+ <a href="#section-tabs" class="nav-item">
242
+
243
+ <i class="fas fa-mug-hot nav-icon icon"></i>
244
+
245
+ <span class="nav-item-title">
246
+ Section tabs
247
+ </span>
248
+
249
+ </a>
250
+
251
+ </li>
252
+
253
+ </ul>
254
+
255
+ </div>
256
+
257
+ </aside>
258
+
259
+ <article class="content">
260
+
261
+ <div class="container-content">
262
+
263
+ <div class="content-inner">
264
+
265
+ <div class="section" id="typography">
266
+
267
+ <div class="section-title">Typography</div>
268
+
269
+ <div class="section-content">
270
+
271
+ <h1>Heading 1</h1>
272
+ <h2>Heading 2</h2>
273
+ <h3>Heading 3</h3>
274
+ <h4>Heading 4</h4>
275
+ <h5>Heading 5</h5>
276
+ <h6>Heading 6</h6>
277
+
278
+ </div>
279
+
280
+ </div>
281
+
282
+ <div class="section" id="buttons">
283
+
284
+ <div class="section-title">Buttons</div>
285
+
286
+ <div class="section-content">
287
+
288
+ <button class="btn btn-primary">Primary!</button>
289
+ <button class="btn btn-secondary">Secondary!</button>
290
+
291
+ <button class="btn btn-outline-primary">Primary!</button>
292
+ <button class="btn btn-outline-secondary">Secondary!</button>
293
+
294
+ </div>
295
+
296
+ </div>
297
+
298
+ <div class="section" id="input-group">
299
+
300
+ <div class="section-title">Input group</div>
301
+
302
+ <div class="section-content">
303
+
304
+ <div class="input-group">
305
+
306
+ <div class="input-group-prepend">
307
+
308
+ <div class="input-group-text">PRE</div>
309
+
310
+ </div>
311
+
312
+ <input type="text" class="form-control">
313
+
314
+ </div>
315
+
316
+ </div>
317
+
318
+ </div>
319
+
320
+ <div class="section" id="tooltip">
321
+
322
+ <div class="section-title">Tooltip</div>
323
+
324
+ <div class="section-content text-right">
325
+
326
+ <button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="left" 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.">
327
+ Tooltip left
328
+ </button>
329
+
330
+ <button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="top" 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.">
331
+ Tooltip top
332
+ </button>
333
+
334
+ <button class="btn btn-secondary" type="button" 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.">
335
+ Tooltip bottom
336
+ </button>
337
+
338
+ <button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="right" 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.">
339
+ Tooltip right
340
+ </button>
341
+
342
+ </div>
343
+
344
+ </div>
345
+
346
+ <div class="section" id="popover">
347
+
348
+ <div class="section-title">Popover</div>
349
+
350
+ <div class="section-content">
351
+
352
+ <button class="btn btn-primary" data-toggle="popover" data-title="Popover left" 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." data-trigger="click" data-placement="left">Popover left</button>
353
+
354
+ <button class="btn btn-primary" data-toggle="popover" data-title="Popover top" 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." data-trigger="click" data-placement="top">Popover top</button>
355
+
356
+ <button class="btn btn-primary" data-toggle="popover" data-title="Popover 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." data-trigger="click" data-placement="bottom">Popover bottom</button>
357
+
358
+ <button class="btn btn-primary" data-toggle="popover" data-title="Popover right" 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." data-trigger="click" data-placement="right">Popover right</button>
359
+
360
+ </div>
361
+
362
+ </div>
363
+
364
+ <div class="section" id="select">
365
+
366
+ <div class="section-title">Select</div>
367
+
368
+ <div class="section-content overflow-visible">
369
+
370
+ <div class="select-container">
371
+
372
+ <div class="select" data-toggle="select" data-name="test" data-type="checkbox" data-scroll-content-height="250">
373
+
374
+ <div class="select-header">
375
+
376
+ <span class="select-title">
377
+ Otsikko
378
+ </span>
379
+
380
+ <span class="select-icon">
381
+ <i class="fas fa-check text-green"></i>
382
+ </span>
383
+
384
+ </div>
385
+
386
+ <div class="select-content">
387
+
388
+ <div class="select-search">
389
+
390
+ <div class="select-search-input">
391
+ <input type="text" name="select-search" value placeholder="Hae">
392
+ </div>
393
+
394
+ <div class="select-search-icon" data-clear-search>
395
+ <i class="fas fa-search icon"></i>
396
+ </div>
397
+
398
+ </div>
399
+
400
+ <div class="select-scrollable-content">
401
+
402
+ <div class="select-item">
403
+
404
+ <div class="select-item-checkbox">
405
+
406
+ <div class="styled-checkbox">
407
+
408
+ <input type="checkbox" id="select-test-1" value="0" autocomplete="off">
409
+
410
+ <label for="select-test-1">
411
+
412
+ <span class="checkbox-inner">
413
+ <svg viewBox="0 0 18 18">
414
+ <polyline points="1.5 6 4.5 9 10.5 1"/>
415
+ </svg>
416
+ </span>
417
+
418
+ <span class="checkbox-label" data-label>
419
+ Item 1
420
+ </span>
421
+
422
+ </label>
423
+
424
+ </div>
425
+
426
+ </div>
427
+
428
+ </div>
429
+
430
+ <div class="select-item">
431
+
432
+ <div class="select-item-checkbox">
433
+
434
+ <div class="styled-checkbox">
435
+
436
+ <input type="checkbox" id="select-test-2" value="0" autocomplete="off">
437
+
438
+ <label for="select-test-2">
439
+
440
+ <span class="checkbox-inner">
441
+ <svg viewBox="0 0 18 18">
442
+ <polyline points="1.5 6 4.5 9 10.5 1"/>
443
+ </svg>
444
+ </span>
445
+
446
+ <span class="checkbox-label" data-label>
447
+ Item 2
448
+ </span>
449
+
450
+ </label>
451
+
452
+ </div>
453
+
454
+ </div>
455
+
456
+ </div>
457
+
458
+ <div class="select-item">
459
+
460
+ <div class="select-item-checkbox">
461
+
462
+ <div class="styled-checkbox">
463
+
464
+ <input type="checkbox" id="select-test-3" value="0" autocomplete="off">
465
+
466
+ <label for="select-test-3">
467
+
468
+ <span class="checkbox-inner">
469
+ <svg viewBox="0 0 18 18">
470
+ <polyline points="1.5 6 4.5 9 10.5 1"/>
471
+ </svg>
472
+ </span>
473
+
474
+ <span class="checkbox-label" data-label>
475
+ Item 3
476
+ </span>
477
+
478
+ </label>
479
+
480
+ </div>
481
+
482
+ </div>
483
+
484
+ </div>
485
+
486
+ <div class="select-item">
487
+
488
+ <div class="select-item-checkbox">
489
+
490
+ <div class="styled-checkbox">
491
+
492
+ <input type="checkbox" id="select-test-4" value="0" autocomplete="off">
493
+
494
+ <label for="select-test-4">
495
+
496
+ <span class="checkbox-inner">
497
+ <svg viewBox="0 0 18 18">
498
+ <polyline points="1.5 6 4.5 9 10.5 1"/>
499
+ </svg>
500
+ </span>
501
+
502
+ <span class="checkbox-label" data-label>
503
+ Item 4
504
+ </span>
505
+
506
+ </label>
507
+
508
+ </div>
509
+
510
+ </div>
511
+
512
+ </div>
513
+
514
+ <div class="select-item">
515
+
516
+ <div class="select-item-checkbox">
517
+
518
+ <div class="styled-checkbox">
519
+
520
+ <input type="checkbox" id="select-test-5" value="0" autocomplete="off">
521
+
522
+ <label for="select-test-5">
523
+
524
+ <span class="checkbox-inner">
525
+ <svg viewBox="0 0 18 18">
526
+ <polyline points="1.5 6 4.5 9 10.5 1"/>
527
+ </svg>
528
+ </span>
529
+
530
+ <span class="checkbox-label" data-label>
531
+ Item 5
532
+ </span>
533
+
534
+ </label>
535
+
536
+ </div>
537
+
538
+ </div>
539
+
540
+ </div>
541
+
542
+ </div>
543
+
544
+ <div class="select-footer">
545
+
546
+ <button class="btn btn-block btn-secondary" type="button" data-select-close>
547
+ Sulje
548
+ </button>
549
+
550
+ </div>
551
+
552
+ </div>
553
+
554
+ </div>
555
+
556
+ </div>
557
+
558
+ </div>
559
+
560
+ </div>
561
+
562
+ <div class="section" id="dropdown">
563
+
564
+ <div class="section-title">Dropdown</div>
565
+
566
+ <div class="section-content overflow-visible">
567
+
568
+ <div class="dropdown dropbottom">
569
+
570
+ <button class="btn btn-primary" type="button" data-toggle="dropdown">
571
+ Dropdown
572
+ </button>
573
+
574
+ <div class="dropdown-menu dropdown-menu-left">
575
+
576
+ <ul class="dropdown-list">
577
+
578
+ <li class="dropdown-item">Item 1</li>
579
+ <li class="dropdown-item">Item 2</li>
580
+ <li class="dropdown-item">Item 3</li>
581
+ <li class="dropdown-divider"></li>
582
+ <li class="dropdown-item">Item 4</li>
583
+ <li class="dropdown-item">Item 5</li>
584
+
585
+ </ul>
586
+
587
+ </div>
588
+
589
+ </div>
590
+
591
+ </div>
592
+
593
+ </div>
594
+
595
+ <div class="section" id="collapse">
596
+
597
+ <div class="section-title">
598
+
599
+ <button type="button" class="btn-text d-flex w-100 justify-content-between" data-toggle="collapse" data-target=".test-primary-collapse" aria-expanded="false">
600
+
601
+ <span>Collapse</span>
602
+ <span data-collapse-indicator=".test-primary-collapse" class="align-self-end">
603
+ <i class="fas fa-angle-down icon"></i>
604
+ </span>
605
+
606
+ </button>
607
+
608
+ </div>
609
+
610
+ <div class="section-content section-collapse">
611
+
612
+ <div class="collapse test-primary-collapse">
613
+
614
+ <p>
615
+ 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.
616
+ </p>
617
+
618
+ </div>
619
+
620
+ </div>
621
+
622
+ <div class="section-hr content-full-width"></div>
623
+
624
+ <div class="section-title">
625
+
626
+ <button type="button" class="btn-text d-flex w-100 justify-content-between" data-toggle="collapse" data-target=".test-secondary-collapse" aria-expanded="false">
627
+
628
+ <span>Collapse</span>
629
+ <span data-collapse-indicator=".test-secondary-collapse">
630
+ <i class="fas fa-angle-down icon"></i>
631
+ </span>
632
+
633
+ </button>
634
+
635
+ </div>
636
+
637
+ <div class="section-content section-collapse">
638
+
639
+ <div class="collapse test-secondary-collapse">
640
+
641
+ <p>
642
+ 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.
643
+ </p>
644
+
645
+ </div>
646
+
647
+ </div>
648
+
649
+ </div>
650
+
651
+ <div class="section" id="toast">
652
+
653
+ <div class="section-title">Toast</div>
654
+
655
+ <div class="section-content">
656
+
657
+ <button type="button" class="btn btn-primary" name="toast-test">
658
+ Toast
659
+ </button>
660
+
661
+ </div>
662
+
663
+ </div>
664
+
665
+ <div class="section" id="dialog">
666
+
667
+ <div class="section-title">Dialog</div>
668
+
669
+ <div class="section-content">
670
+
671
+ <button type="button" class="btn btn-primary" name="dialog-test">
672
+ Dialog
673
+ </button>
674
+
675
+ </div>
676
+
677
+ </div>
678
+
679
+ <div class="section" id="section-tabs">
680
+
681
+ <div class="section-title">
682
+
683
+ Section Tabs
684
+
685
+ </div>
686
+
687
+ <div class="section-tabs">
688
+
689
+ <ul class="tabs-container" data-toggle="section-tabs">
690
+
691
+ <li class="tab-item">
692
+
693
+ <a href="#section-tabs" class="tab-item-action active">
694
+ Item 1
695
+ </a>
696
+
697
+ </li>
698
+
699
+ <li class="tab-item">
700
+
701
+ <a href="#section-tabs" class="tab-item-action">
702
+ Item 2
703
+ </a>
704
+
705
+ </li>
706
+
707
+ <li class="tab-item">
708
+
709
+ <a href="#section-tabs" class="tab-item-action">
710
+ Item 3
711
+ </a>
712
+
713
+ </li>
714
+
715
+ <li class="tab-item">
716
+
717
+ <a href="#section-tabs" class="tab-item-action">
718
+ Item 4
719
+ </a>
720
+
721
+ </li>
722
+
723
+ <li class="tab-item">
724
+
725
+ <a href="#section-tabs" class="tab-item-action">
726
+ Item 5
727
+ </a>
728
+
729
+ </li>
730
+
731
+ <li class="tab-item dropdown-container">
732
+
733
+ <div class="dropdown dropbottom">
734
+
735
+ <button class="btn btn-icon" type="button" data-toggle="dropdown">
736
+ <i class="fas fa-lg fa-ellipsis-h icon"></i>
737
+ </button>
738
+
739
+ <div class="dropdown-menu dropdown-menu-right">
740
+
741
+ <ul class="dropdown-list"></ul>
742
+
743
+ </div>
744
+
745
+ </div>
746
+
747
+ </li>
748
+
749
+ </ul>
750
+
751
+ </div>
752
+
753
+ <div class="section-content">
754
+
755
+ <p>
756
+ 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.
757
+ </p>
758
+
759
+ </div>
760
+
761
+ </div>
762
+
763
+ </div>
764
+
765
+ </div>
766
+
767
+ </article>
768
+
769
+ </main>
770
+
771
+ <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
772
+ <script src="../dist/js/cool.js"></script>
773
+ <script type="text/javascript">
774
+
775
+ Cool.initialize({
776
+ popover: {
777
+ debug: false
778
+ },
779
+ select: {
780
+ debug: false,
781
+ faPro: false
782
+ },
783
+ dropdown: {
784
+ debug: false
785
+ },
786
+ tooltip: {
787
+ debug: false
788
+ },
789
+ collapse: {
790
+ debug: false
791
+ },
792
+ sectionTabs: {
793
+ debug: false
794
+ },
795
+ toast: {
796
+ debug: false,
797
+ faPro: false,
798
+ size: 'lg'
799
+ },
800
+ dialog: {
801
+ debug: true,
802
+ faPro: false,
803
+ actions: {
804
+ close: {
805
+ content: 'Sulje'
806
+ },
807
+ remove: {
808
+ content: 'Poista'
809
+ },
810
+ confirm: {
811
+ content: 'Vahvista'
812
+ }
813
+ },
814
+ callbacks: {
815
+ close: function(cb, dialog) {
816
+
817
+ console.log('Dialog close callback test');
818
+ console.log(dialog);
819
+ cb();
820
+ },
821
+ remove: function(cb, dialog) {
822
+
823
+
824
+ console.log('Dialog remove callback test');
825
+ console.log(dialog);
826
+ cb();
827
+ },
828
+ confirm: function(cb, dialog) {
829
+
830
+ console.log('Dialog confirm callback test');
831
+ console.log(dialog);
832
+ cb();
833
+ }
834
+ }
835
+ }
836
+ });
837
+
838
+ function toast(opts) {
839
+ return $('body').data('plugin_coolToast').init(opts);
840
+ };
841
+
842
+ $('[name="toast-test"]').on('click', () => {
843
+
844
+ let testToast = toast({
845
+ content: 'I have a toast'
846
+ });
847
+
848
+ console.log(testToast.$el);
849
+ });
850
+
851
+ function dialog(opts) {
852
+ return $('body').data('plugin_coolDialog').init(opts);
853
+ };
854
+
855
+ $('[name="dialog-test"]').on('click', () => {
856
+
857
+ let testDialog = dialog({
858
+ title: 'Dialog 1',
859
+ body: '<div class="mb-4">Lorem ipsum dolor dot 1</div><button type="button" class="btn btn-primary" name="dialog-inner-test">Dialog 2</button>',
860
+ footer: false
861
+ });
862
+
863
+ console.log(testDialog.$el);
864
+ });
865
+
866
+ $(document).on('click', '[name="dialog-inner-test"]', () => {
867
+
868
+ dialog({
869
+ title: 'Dialog 2',
870
+ body: 'Lorem ipsum dolor dot 2',
871
+ footer: true
872
+ });
873
+ });
874
+
875
+ $('.nav .nav-item').on('click', function(e) {
876
+
877
+ e.preventDefault();
878
+
879
+ let target = $(this).attr('href');
880
+
881
+ $('.content').animate({
882
+ scrollTop: $(target).offset().top
883
+ }, 800);
884
+
885
+ return false;
886
+ });
887
+
888
+ </script>
889
+
890
+ </body>
891
+
892
+ </html>