@finqu/cool 1.2.29 → 1.3.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 (206) hide show
  1. package/README.md +680 -1
  2. package/dist/css/cool.css +23575 -16644
  3. package/dist/css/cool.css.map +1 -154
  4. package/dist/css/cool.min.css +89 -3
  5. package/dist/css/cool.min.css.map +1 -1
  6. package/dist/js/cool.bundle.js +15402 -3800
  7. package/dist/js/cool.bundle.js.map +1 -1
  8. package/dist/js/cool.bundle.min.js +20 -8
  9. package/dist/js/cool.bundle.min.js.map +1 -1
  10. package/dist/js/cool.esm.js +4269 -3360
  11. package/dist/js/cool.esm.js.map +1 -1
  12. package/dist/js/cool.esm.min.js +9 -8
  13. package/dist/js/cool.esm.min.js.map +1 -1
  14. package/dist/js/cool.js +4271 -3362
  15. package/dist/js/cool.js.map +1 -1
  16. package/dist/js/cool.min.js +9 -8
  17. package/dist/js/cool.min.js.map +1 -1
  18. package/package.json +94 -61
  19. package/.babelrc.js +0 -20
  20. package/.browserslistrc +0 -13
  21. package/build/.eslintrc.json +0 -10
  22. package/build/banner.js +0 -14
  23. package/build/build-plugins.js +0 -92
  24. package/build/rollup.config.js +0 -46
  25. package/dist/css/cool-grid.css +0 -4390
  26. package/dist/css/cool-grid.css.map +0 -30
  27. package/dist/css/cool-grid.min.css +0 -7
  28. package/dist/css/cool-grid.min.css.map +0 -1
  29. package/dist/css/cool-reboot.css +0 -286
  30. package/dist/css/cool-reboot.css.map +0 -62
  31. package/dist/css/cool-reboot.min.css +0 -7
  32. package/dist/css/cool-reboot.min.css.map +0 -1
  33. package/html/index.html +0 -2703
  34. package/js/dist/collapse.js +0 -5535
  35. package/js/dist/collapse.js.map +0 -1
  36. package/js/dist/common.js +0 -21996
  37. package/js/dist/common.js.map +0 -1
  38. package/js/dist/cooldropdown.js +0 -467
  39. package/js/dist/cooldropdown.js.map +0 -1
  40. package/js/dist/coolpopover.js +0 -391
  41. package/js/dist/coolpopover.js.map +0 -1
  42. package/js/dist/coolsectiontabs.js +0 -256
  43. package/js/dist/coolsectiontabs.js.map +0 -1
  44. package/js/dist/coolselect.js +0 -796
  45. package/js/dist/coolselect.js.map +0 -1
  46. package/js/dist/cooltooltip.js +0 -360
  47. package/js/dist/cooltooltip.js.map +0 -1
  48. package/js/dist/coolui.js +0 -73
  49. package/js/dist/coolui.js.map +0 -1
  50. package/js/dist/dropdown.js +0 -27421
  51. package/js/dist/dropdown.js.map +0 -1
  52. package/js/dist/popover.js +0 -9472
  53. package/js/dist/popover.js.map +0 -1
  54. package/js/dist/sectiontabs.js +0 -4483
  55. package/js/dist/sectiontabs.js.map +0 -1
  56. package/js/dist/select.js +0 -37080
  57. package/js/dist/select.js.map +0 -1
  58. package/js/dist/tooltip.js +0 -8786
  59. package/js/dist/tooltip.js.map +0 -1
  60. package/js/index.esm.js +0 -21
  61. package/js/index.umd.js +0 -21
  62. package/js/src/abstract-ui-component.js +0 -81
  63. package/js/src/collapse.js +0 -286
  64. package/js/src/common.js +0 -296
  65. package/js/src/dialog.js +0 -579
  66. package/js/src/dropdown.js +0 -525
  67. package/js/src/popover.js +0 -632
  68. package/js/src/section-tabs.js +0 -215
  69. package/js/src/select.js +0 -1342
  70. package/js/src/toast.js +0 -581
  71. package/js/src/tooltip.js +0 -591
  72. package/js/src/util/animate-css.js +0 -22
  73. package/js/src/util/index.js +0 -122
  74. package/js/src/util/perfect-scrollbar.js +0 -1316
  75. package/less/alert.less +0 -345
  76. package/less/badge.less +0 -38
  77. package/less/bootstrap-noconflict.less +0 -23
  78. package/less/bootstrap.less +0 -23
  79. package/less/button-group.less +0 -153
  80. package/less/buttons.less +0 -287
  81. package/less/dialog-noconflict.less +0 -174
  82. package/less/dialog.less +0 -203
  83. package/less/dropdown.less +0 -209
  84. package/less/forms.less +0 -770
  85. package/less/images.less +0 -242
  86. package/less/input-group.less +0 -163
  87. package/less/list-group.less +0 -73
  88. package/less/mixins/aspect-ratio.less +0 -23
  89. package/less/mixins/border-radius.less +0 -24
  90. package/less/mixins/box-shadow.less +0 -4
  91. package/less/mixins/buttons.less +0 -17
  92. package/less/mixins/caret.less +0 -51
  93. package/less/mixins/clearfix.less +0 -10
  94. package/less/mixins/gradients.less +0 -34
  95. package/less/mixins/nav-divider.less +0 -7
  96. package/less/mixins/object-fit.less +0 -13
  97. package/less/mixins/reset-text.less +0 -16
  98. package/less/mixins.less +0 -11
  99. package/less/package.json +0 -11
  100. package/less/pagination.less +0 -69
  101. package/less/popover.less +0 -143
  102. package/less/project.sublime-workspace +0 -774
  103. package/less/reboot.less +0 -235
  104. package/less/section.less +0 -793
  105. package/less/select.less +0 -150
  106. package/less/tables.less +0 -737
  107. package/less/tabs.less +0 -162
  108. package/less/tooltip.less +0 -87
  109. package/less/type.less +0 -71
  110. package/less/utilities/align.less +0 -27
  111. package/less/utilities/animate.less +0 -3512
  112. package/less/utilities/background.less +0 -70
  113. package/less/utilities/borders.less +0 -16
  114. package/less/utilities/color.less +0 -70
  115. package/less/utilities/cursor.less +0 -8
  116. package/less/utilities/display.less +0 -38
  117. package/less/utilities/embed.less +0 -61
  118. package/less/utilities/flex.less +0 -76
  119. package/less/utilities/jquery-ui.less +0 -116
  120. package/less/utilities/lazyload.less +0 -29
  121. package/less/utilities/overflow.less +0 -11
  122. package/less/utilities/pace.less +0 -25
  123. package/less/utilities/placeholder.less +0 -60
  124. package/less/utilities/position.less +0 -42
  125. package/less/utilities/scrollbar.less +0 -152
  126. package/less/utilities/spacing.less +0 -197
  127. package/less/utilities/text.less +0 -68
  128. package/less/utilities/transform.less +0 -7
  129. package/less/utilities.less +0 -21
  130. package/less/variables.less +0 -343
  131. package/scss/LISENCE +0 -15
  132. package/scss/_alert.scss +0 -102
  133. package/scss/_badge.scss +0 -102
  134. package/scss/_button-group.scss +0 -129
  135. package/scss/_buttons.scss +0 -248
  136. package/scss/_custom-forms.scss +0 -444
  137. package/scss/_dialog.scss +0 -160
  138. package/scss/_dropdown.scss +0 -233
  139. package/scss/_forms.scss +0 -258
  140. package/scss/_frame.scss +0 -627
  141. package/scss/_functions.scss +0 -124
  142. package/scss/_grid.scss +0 -35
  143. package/scss/_images.scss +0 -361
  144. package/scss/_input-group.scss +0 -285
  145. package/scss/_list-group.scss +0 -82
  146. package/scss/_mixins.scss +0 -34
  147. package/scss/_navbar.scss +0 -290
  148. package/scss/_notification.scss +0 -13
  149. package/scss/_pagination.scss +0 -88
  150. package/scss/_popover.scss +0 -167
  151. package/scss/_reboot.scss +0 -284
  152. package/scss/_root.scss +0 -15
  153. package/scss/_section.scss +0 -977
  154. package/scss/_select.scss +0 -187
  155. package/scss/_tables.scss +0 -735
  156. package/scss/_tabs.scss +0 -178
  157. package/scss/_toast.scss +0 -182
  158. package/scss/_tooltip.scss +0 -101
  159. package/scss/_type.scss +0 -129
  160. package/scss/_utilities.scss +0 -23
  161. package/scss/_variables.scss +0 -823
  162. package/scss/cool-grid.scss +0 -29
  163. package/scss/cool-reboot.scss +0 -11
  164. package/scss/cool.scss +0 -37
  165. package/scss/mixins/_alert-variant.scss +0 -20
  166. package/scss/mixins/_aspect-ratio.scss +0 -29
  167. package/scss/mixins/_background-variant.scss +0 -25
  168. package/scss/mixins/_badge-variant.scss +0 -36
  169. package/scss/mixins/_breakpoints.scss +0 -102
  170. package/scss/mixins/_buttons.scss +0 -104
  171. package/scss/mixins/_caret.scss +0 -80
  172. package/scss/mixins/_clearfix.scss +0 -10
  173. package/scss/mixins/_float.scss +0 -14
  174. package/scss/mixins/_forms.scss +0 -67
  175. package/scss/mixins/_gradients.scss +0 -40
  176. package/scss/mixins/_grid-framework.scss +0 -72
  177. package/scss/mixins/_grid.scss +0 -60
  178. package/scss/mixins/_nav-divider.scss +0 -9
  179. package/scss/mixins/_notification-variant.scss +0 -7
  180. package/scss/mixins/_object-fit.scss +0 -16
  181. package/scss/mixins/_reset-text.scss +0 -19
  182. package/scss/mixins/_text-emphasis.scss +0 -21
  183. package/scss/mixins/_text-hide.scss +0 -10
  184. package/scss/mixins/_text-truncate.scss +0 -81
  185. package/scss/mixins/_visibility.scss +0 -7
  186. package/scss/project.sublime-workspace +0 -491
  187. package/scss/utilities/_align.scss +0 -41
  188. package/scss/utilities/_animate.scss +0 -3512
  189. package/scss/utilities/_background.scss +0 -14
  190. package/scss/utilities/_borders.scss +0 -146
  191. package/scss/utilities/_clearfix.scss +0 -6
  192. package/scss/utilities/_collapse.scss +0 -33
  193. package/scss/utilities/_cursor.scss +0 -22
  194. package/scss/utilities/_display.scss +0 -16
  195. package/scss/utilities/_embed.scss +0 -78
  196. package/scss/utilities/_flex.scss +0 -52
  197. package/scss/utilities/_lazyload.scss +0 -31
  198. package/scss/utilities/_overflow.scss +0 -6
  199. package/scss/utilities/_perfect-scrollbar.scss +0 -141
  200. package/scss/utilities/_placeholder.scss +0 -77
  201. package/scss/utilities/_position.scss +0 -30
  202. package/scss/utilities/_sizing.scss +0 -32
  203. package/scss/utilities/_spacing.scss +0 -92
  204. package/scss/utilities/_text.scss +0 -99
  205. package/scss/utilities/_user-select.scss +0 -14
  206. package/scss/utilities/_visibility.scss +0 -10
package/html/index.html DELETED
@@ -1,2703 +0,0 @@
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=Inter:400,500,600" rel="stylesheet">
36
- <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600" rel="stylesheet">
37
- <link rel="stylesheet" href="../dist/css/cool.css">
38
- <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
39
- </head>
40
-
41
- <body>
42
-
43
- <header class="site-header d-md-none">
44
-
45
- <div class="navbar">
46
-
47
- <div class="navbar-brand">
48
-
49
- <div class="sidebar-left-toggler">
50
-
51
- <div class="icon animated">
52
- <span></span>
53
- <span></span>
54
- <span></span>
55
- </div>
56
-
57
- </div>
58
-
59
- <div class="brand-container">
60
-
61
- <a href="//business<?= CONFIG_MAINDOMAIN ?>" class="brand">
62
-
63
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.86 88.82" width="32">
64
- <defs><style>.cls-1{fill:#f54e96;fill-rule:evenodd;}.cls-2{fill:#fff;}</style></defs><path class="cls-1" d="M14.14,2.88A9.8,9.8,0,0,1,21.64,0L81.83,3.35a7.47,7.47,0,0,1,7,7.57c0,3,0,63.78,0,65.75A12.18,12.18,0,0,1,76.71,88.82H10.92a7.47,7.47,0,0,1-7.57-7S.82,36.17,0,21.64a9.8,9.8,0,0,1,2.86-7.5L14.14,2.88Zm37.93,55V70.17a4.72,4.72,0,1,1-9.43,0V43.73A17.69,17.69,0,0,1,60.32,26.05h5.36a4.72,4.72,0,0,1,0,9.43H60.32a8.25,8.25,0,0,0-8.25,8.25v4.69H63.68a4.71,4.71,0,0,1,0,9.42ZM26.35,19a6.64,6.64,0,1,1-6.64-6.64A6.64,6.64,0,0,1,26.35,19Z"/><path class="cls-2" d="M26.35,19a6.64,6.64,0,1,0-6.64,6.64A6.64,6.64,0,0,0,26.35,19Z"/><path class="cls-2" d="M54.48,37.9a8.26,8.26,0,0,1,5.84-2.42h5.36a4.72,4.72,0,0,0,0-9.43H60.32A17.69,17.69,0,0,0,42.64,43.73V70.17a4.72,4.72,0,1,0,9.43,0V57.84H63.68a4.71,4.71,0,0,0,0-9.42H52.07V43.73A8.25,8.25,0,0,1,54.48,37.9Z"/>
65
- </svg>
66
-
67
- </a>
68
-
69
- </div>
70
-
71
- <div class="sidebar-right-toggler"></div>
72
-
73
- </div>
74
-
75
- <nav class="navbar-nav">
76
-
77
- <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.">
78
- <i class="fas fa-fw fa-home icon"></i>
79
- </a>
80
-
81
- </nav>
82
-
83
- </div>
84
-
85
- </header>
86
-
87
- <main class="site-main">
88
-
89
- <aside class="sidebar-left visible">
90
-
91
- <div class="sidebar-content">
92
-
93
- <ul class="nav">
94
-
95
- <li class="nav-parent">
96
-
97
- <a href="#typography" class="nav-item">
98
-
99
- <i class="fas fa-mug-hot nav-icon icon"></i>
100
-
101
- <span class="nav-item-title">
102
- Typography
103
- </span>
104
-
105
- </a>
106
-
107
- <span class="nav-additional-action">
108
-
109
- <i class="fas fa-plus icon"></i>
110
-
111
- </span>
112
-
113
- </li>
114
-
115
- <li class="nav-parent">
116
-
117
- <a href="#buttons" class="nav-item">
118
-
119
- <span class="nav-item-title">
120
- Buttons
121
- </span>
122
-
123
- <span data-collapse-indicator class="show">
124
- <i class="fas fa-angle-down icon"></i>
125
- </span>
126
-
127
- </a>
128
-
129
- </li>
130
-
131
- <li class="nav-parent">
132
-
133
- <a href="#input-group" class="nav-item">
134
-
135
- <span class="nav-item-title">
136
- Input group
137
- </span>
138
-
139
- </a>
140
-
141
- </li>
142
-
143
- <li class="nav-parent">
144
-
145
- <a href="#tooltip" class="nav-item">
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
- <span class="nav-item-title">
160
- Popover
161
- </span>
162
-
163
- </a>
164
-
165
- </li>
166
-
167
- <li class="nav-parent">
168
-
169
- <a href="#select" class="nav-item">
170
-
171
- <span class="nav-item-title">
172
- Select
173
- </span>
174
-
175
- </a>
176
-
177
- </li>
178
-
179
- <li class="nav-parent">
180
-
181
- <a href="#dropdown" class="nav-item">
182
-
183
- <span class="nav-item-title">
184
- Dropdown
185
- </span>
186
-
187
- </a>
188
-
189
- </li>
190
-
191
- <li class="nav-parent">
192
-
193
- <a href="#collapse" class="nav-item">
194
-
195
- <span class="nav-item-title">
196
- Collapse
197
- </span>
198
-
199
- </a>
200
-
201
- </li>
202
-
203
- <li class="nav-parent">
204
-
205
- <a href="#toast" class="nav-item">
206
-
207
- <span class="nav-item-title">
208
- Toast
209
- </span>
210
-
211
- </a>
212
-
213
- </li>
214
-
215
- <li class="nav-parent">
216
-
217
- <a href="#dialog" class="nav-item">
218
-
219
- <span class="nav-item-title">
220
- Dialog
221
- </span>
222
-
223
- </a>
224
-
225
- </li>
226
-
227
- <li class="nav-parent">
228
-
229
- <a href="#section-tabs" class="nav-item">
230
-
231
- <span class="nav-item-title">
232
- Section tabs
233
- </span>
234
-
235
- </a>
236
-
237
- </li>
238
-
239
- <li class="nav-parent">
240
-
241
- <a href="#images" class="nav-item">
242
-
243
- <span class="nav-item-title">
244
- Images
245
- </span>
246
-
247
- </a>
248
-
249
- </li>
250
-
251
- <li class="nav-parent">
252
-
253
- <a href="#alerts" class="nav-item">
254
-
255
- <span class="nav-item-title">
256
- Alerts
257
- </span>
258
-
259
- </a>
260
-
261
- </li>
262
-
263
- <li class="nav-parent">
264
-
265
- <a href="#badges" class="nav-item">
266
-
267
- <span class="nav-icon-wrapper">
268
- <i class="fas fa-mug-hot nav-icon icon"></i>
269
- </span>
270
-
271
- <span class="nav-item-title">
272
- Badges
273
- </span>
274
-
275
- </a>
276
-
277
- </li>
278
-
279
- </ul>
280
-
281
- </div>
282
-
283
- </aside>
284
-
285
- <article class="content">
286
-
287
- <div class="container-content">
288
-
289
- <div class="content-inner">
290
-
291
- <div class="section" id="typography">
292
-
293
- <div class="section-title">Typography</div>
294
-
295
- <div class="section-content">
296
-
297
- <h1>Heading 1</h1>
298
- <h2>Heading 2</h2>
299
- <h3>Heading 3</h3>
300
- <h4>Heading 4</h4>
301
- <h5>Heading 5</h5>
302
- <h6>Heading 6</h6>
303
-
304
- <p class="mt-4">Truncate</p>
305
-
306
- <p class="text-truncate text-truncate-lines-2">
307
- 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.
308
- </p>
309
-
310
- </div>
311
-
312
- </div>
313
-
314
- <div class="section" id="buttons">
315
-
316
- <div class="section-title">Buttons</div>
317
-
318
- <div class="section-content">
319
-
320
- <button class="btn btn-primary">Primary!</button>
321
- <button class="btn btn-secondary">Secondary!</button>
322
- <button class="btn btn-remove">Remove!</button>
323
-
324
- <button class="btn btn-outline-primary">Primary!</button>
325
- <button class="btn btn-outline-secondary">Secondary!</button>
326
-
327
- <p class="mt-4">Button toggle</p>
328
-
329
- <div class="btn-group-toggle d-inline-block">
330
-
331
- <div class="btn-group">
332
-
333
- <button type="button" class="btn btn-outline-secondary active">
334
-
335
- <input type="radio" name="btn-group-test-1" value="false" checked="true">
336
-
337
- <i class="fas fa-coins icon"></i>
338
-
339
- </button>
340
-
341
- <button type="button" class="btn btn-outline-secondary">
342
-
343
- <input type="radio" name="btn-group-test-1" value="true">
344
-
345
- <i class="fas fa-percent icon"></i>
346
-
347
- </button>
348
-
349
- </div>
350
-
351
- </div>
352
-
353
- <div class="btn-group-toggle d-inline-block">
354
-
355
- <div class="btn-group">
356
-
357
- <button type="button" class="btn btn-outline-primary active">
358
-
359
- <input type="radio" name="btn-group-test-2" value="false" checked="true">
360
-
361
- <i class="fas fa-coins icon"></i>
362
-
363
- </button>
364
-
365
- <button type="button" class="btn btn-outline-primary">
366
-
367
- <input type="radio" name="btn-group-test-2" value="true">
368
-
369
- <i class="fas fa-percent icon"></i>
370
-
371
- </button>
372
-
373
- </div>
374
-
375
- </div>
376
-
377
- <p class="mt-4">Button group in input</p>
378
-
379
- <div class="form-group">
380
-
381
- <div class="input-group">
382
-
383
- <input type="number" class="form-control">
384
-
385
- <div class="input-group-append btn-group-toggle">
386
-
387
- <button type="button" class="btn btn-outline-secondary active">
388
-
389
- <input type="radio" name="btn-group-test-3" value="false" checked="true">
390
-
391
- <i class="fas fa-coins icon"></i>
392
-
393
- </button>
394
-
395
- <button type="button" class="btn btn-outline-secondary">
396
-
397
- <input type="radio" name="btn-group-test-3" value="true">
398
-
399
- <i class="fas fa-percent icon"></i>
400
-
401
- </button>
402
-
403
- </div>
404
-
405
- </div>
406
-
407
- </div>
408
-
409
- <div class="form-group">
410
-
411
- <div class="input-group">
412
-
413
- <input type="number" class="form-control">
414
-
415
- <div class="input-group-append btn-group-toggle">
416
-
417
- <button type="button" class="btn btn-outline-primary active">
418
-
419
- <input type="radio" name="btn-group-test-4" value="false" checked="true">
420
-
421
- <i class="fas fa-coins icon"></i>
422
-
423
- </button>
424
-
425
- <button type="button" class="btn btn-outline-primary">
426
-
427
- <input type="radio" name="btn-group-test-4" value="true">
428
-
429
- <i class="fas fa-percent icon"></i>
430
-
431
- </button>
432
-
433
- </div>
434
-
435
- </div>
436
-
437
- </div>
438
-
439
- </div>
440
-
441
- </div>
442
-
443
- <div class="section" id="input-group">
444
-
445
- <div class="section-title">Input group</div>
446
-
447
- <div class="section-content">
448
-
449
- <div class="form-group">
450
-
451
- <div class="input-group">
452
-
453
- <div class="input-group-prepend">
454
-
455
- <div class="input-group-text">PRE</div>
456
-
457
- </div>
458
-
459
- <input type="text" class="form-control">
460
-
461
- </div>
462
-
463
- </div>
464
-
465
- <div class="form-group">
466
-
467
- <div class="input-group is-valid">
468
-
469
- <div class="input-group-prepend">
470
-
471
- <div class="input-group-text">Valid</div>
472
-
473
- </div>
474
-
475
- <input type="text" class="form-control">
476
-
477
- </div>
478
-
479
- </div>
480
-
481
- <div class="form-group">
482
-
483
- <div class="input-group is-invalid">
484
-
485
- <div class="input-group-prepend">
486
-
487
- <div class="input-group-text">Invalid</div>
488
-
489
- </div>
490
-
491
- <input type="text" class="form-control">
492
-
493
- </div>
494
-
495
- </div>
496
-
497
- </div>
498
-
499
- </div>
500
-
501
- <div class="section" id="tooltip">
502
-
503
- <div class="section-title">Tooltip</div>
504
-
505
- <div class="section-content text-right">
506
-
507
- <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.">
508
- Tooltip left
509
- </button>
510
-
511
- <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.">
512
- Tooltip top
513
- </button>
514
-
515
- <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.">
516
- Tooltip bottom
517
- </button>
518
-
519
- <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.">
520
- Tooltip right
521
- </button>
522
-
523
- </div>
524
-
525
- </div>
526
-
527
- <div class="section" id="popover">
528
-
529
- <div class="section-title">Popover</div>
530
-
531
- <div class="section-content">
532
-
533
- <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>
534
-
535
- <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>
536
-
537
- <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>
538
-
539
- <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>
540
-
541
- </div>
542
-
543
- </div>
544
-
545
- <div class="section" id="select">
546
-
547
- <div class="section-title">Select</div>
548
-
549
- <div class="section-content overflow-visible">
550
-
551
- <div class="select-container">
552
-
553
- <div class="select" data-toggle="select" data-name="test" data-type="checkbox" data-scroll-content-height="250">
554
-
555
- <div class="select-header">
556
-
557
- <span class="select-title">
558
- Default
559
- </span>
560
-
561
- <span class="select-icon">
562
- <i class="fas fa-check text-green"></i>
563
- </span>
564
-
565
- </div>
566
-
567
- <div class="select-content">
568
-
569
- <div class="select-search">
570
-
571
- <div class="select-search-input">
572
- <input type="text" name="select-search" value placeholder="Hae">
573
- </div>
574
-
575
- <div class="select-search-icon" data-clear-search>
576
- <i class="fas fa-search icon"></i>
577
- </div>
578
-
579
- </div>
580
-
581
- <div class="select-scrollable-content">
582
-
583
- <div class="select-item">
584
-
585
- <div class="select-item-checkbox">
586
-
587
- <div class="styled-checkbox">
588
-
589
- <input type="checkbox" id="select-test-1" value="1" autocomplete="off">
590
-
591
- <label for="select-test-1">
592
-
593
- <span class="checkbox-inner">
594
- <svg viewBox="0 0 18 18">
595
- <polyline points="1.5 6 4.5 9 10.5 1"/>
596
- </svg>
597
- </span>
598
-
599
- <span class="checkbox-label" data-label>
600
- Item 1
601
- </span>
602
-
603
- </label>
604
-
605
- </div>
606
-
607
- </div>
608
-
609
- </div>
610
-
611
- <div class="select-item">
612
-
613
- <div class="select-item-checkbox">
614
-
615
- <div class="styled-checkbox">
616
-
617
- <input type="checkbox" id="select-test-2" value="2" autocomplete="off">
618
-
619
- <label for="select-test-2">
620
-
621
- <span class="checkbox-inner">
622
- <svg viewBox="0 0 18 18">
623
- <polyline points="1.5 6 4.5 9 10.5 1"/>
624
- </svg>
625
- </span>
626
-
627
- <span class="checkbox-label" data-label>
628
- Item 2
629
- </span>
630
-
631
- </label>
632
-
633
- </div>
634
-
635
- </div>
636
-
637
- </div>
638
-
639
- <div class="select-item">
640
-
641
- <div class="select-item-checkbox">
642
-
643
- <div class="styled-checkbox">
644
-
645
- <input type="checkbox" id="select-test-3" value="3" autocomplete="off">
646
-
647
- <label for="select-test-3">
648
-
649
- <span class="checkbox-inner">
650
- <svg viewBox="0 0 18 18">
651
- <polyline points="1.5 6 4.5 9 10.5 1"/>
652
- </svg>
653
- </span>
654
-
655
- <span class="checkbox-label" data-label>
656
- Item 3
657
- </span>
658
-
659
- </label>
660
-
661
- </div>
662
-
663
- </div>
664
-
665
- </div>
666
-
667
- <div class="select-item">
668
-
669
- <div class="select-item-checkbox">
670
-
671
- <div class="styled-checkbox">
672
-
673
- <input type="checkbox" id="select-test-4" value="0" autocomplete="off">
674
-
675
- <label for="select-test-4">
676
-
677
- <span class="checkbox-inner">
678
- <svg viewBox="0 0 18 18">
679
- <polyline points="1.5 6 4.5 9 10.5 1"/>
680
- </svg>
681
- </span>
682
-
683
- <span class="checkbox-label" data-label>
684
- Item 4
685
- </span>
686
-
687
- </label>
688
-
689
- </div>
690
-
691
- </div>
692
-
693
- </div>
694
-
695
- <div class="select-item">
696
-
697
- <div class="select-item-checkbox">
698
-
699
- <div class="styled-checkbox">
700
-
701
- <input type="checkbox" id="select-test-5" value="0" autocomplete="off">
702
-
703
- <label for="select-test-5">
704
-
705
- <span class="checkbox-inner">
706
- <svg viewBox="0 0 18 18">
707
- <polyline points="1.5 6 4.5 9 10.5 1"/>
708
- </svg>
709
- </span>
710
-
711
- <span class="checkbox-label" data-label>
712
- Item 5
713
- </span>
714
-
715
- </label>
716
-
717
- </div>
718
-
719
- </div>
720
-
721
- </div>
722
-
723
- </div>
724
-
725
- <div class="select-footer">
726
-
727
- <button class="btn btn-block btn-secondary" type="button" data-select-close>
728
- Sulje
729
- </button>
730
-
731
- </div>
732
-
733
- </div>
734
-
735
- </div>
736
-
737
- </div>
738
-
739
- </div>
740
-
741
- <div class="section-content overflow-visible">
742
-
743
- <div class="select-container">
744
-
745
- <div class="select" data-toggle="select" data-name="test-js-render" data-type="checkbox" data-scroll-content-height="250" data-items='[
746
- {
747
- "id": "1",
748
- "label": "Test 1"
749
- },
750
- {
751
- "id": "2",
752
- "label": "Test 2"
753
- }
754
- ]' data-search-placeholder="Hae" data-btn-close-text="Sulje" data-show-search="true" data-show-footer="true">
755
-
756
- <div class="select-header">
757
-
758
- <span class="select-title">
759
- JS-render & HTML5 data-api
760
- </span>
761
-
762
- <span class="select-icon">
763
- <i class="fas fa-check text-green"></i>
764
- </span>
765
-
766
- </div>
767
-
768
- </div>
769
-
770
- </div>
771
-
772
- </div>
773
-
774
- <div class="section-content overflow-visible">
775
-
776
- <div class="select-container">
777
-
778
- <div class="select" data-name="selectJs">
779
-
780
- <div class="select-header">
781
-
782
- <span class="select-title">
783
- JS-render
784
- </span>
785
-
786
- <span class="select-icon">
787
- <i class="fas fa-angle-down"></i>
788
- </span>
789
-
790
- </div>
791
-
792
- </div>
793
-
794
- </div>
795
-
796
- </div>
797
-
798
- <div class="section-content overflow-visible">
799
-
800
- <div class="select-container">
801
-
802
- <div class="select" data-name="selectJsLabel" data-type="checkbox">
803
-
804
- <div class="select-header">
805
-
806
- <span class="select-title">
807
- JS-render & custom label
808
- </span>
809
-
810
- <span class="select-icon">
811
- <i class="fas fa-check text-green"></i>
812
- </span>
813
-
814
- </div>
815
-
816
- </div>
817
-
818
- </div>
819
-
820
- </div>
821
-
822
- <div class="section-content overflow-visible">
823
-
824
- <div class="select-container">
825
-
826
- <div class="select" data-name="selectJsAppend" data-type="checkbox">
827
-
828
- <div class="select-header">
829
-
830
- <span class="select-title">
831
- JS-render, custom label, append items after initialize
832
- </span>
833
-
834
- <span class="select-icon">
835
- <i class="fas fa-check text-green"></i>
836
- </span>
837
-
838
- </div>
839
-
840
- </div>
841
-
842
- </div>
843
-
844
- </div>
845
-
846
- <div class="section-content overflow-visible">
847
-
848
- <div class="select-container">
849
-
850
- <div class="select" data-name="selectJsLabelDynamicTitle">
851
-
852
- <div class="select-header">
853
-
854
- <span class="select-title"></span>
855
-
856
- <span class="select-icon">
857
- <i class="fas fa-check text-green"></i>
858
- </span>
859
-
860
- </div>
861
-
862
- </div>
863
-
864
- </div>
865
-
866
- </div>
867
-
868
- <div class="section-content overflow-visible">
869
-
870
- <div class="input-group">
871
-
872
- <div class="select-container form-control">
873
-
874
- <div class="select" data-name="selectJsDeselect">
875
-
876
- <div class="select-header">
877
-
878
- <span class="select-title">
879
- Js-render, deselect items
880
- </span>
881
-
882
- <span class="select-icon">
883
- <i class="fas fa-check text-green"></i>
884
- </span>
885
-
886
- </div>
887
-
888
- </div>
889
-
890
- </div>
891
-
892
- <div class="input-group-append">
893
-
894
- <button type="button" name="deselect-items" class="btn btn-secondary">
895
- Deselect items
896
- </button>
897
-
898
- </div>
899
-
900
- </div>
901
-
902
- </div>
903
-
904
- <div class="section-content overflow-visible">
905
-
906
- <div class="input-group">
907
-
908
- <div class="select-container form-control">
909
-
910
- <div class="select" data-name="selectJsEmpty">
911
-
912
- <div class="select-header">
913
-
914
- <span class="select-title">
915
- Js-render, empty select, append items
916
- </span>
917
-
918
- <span class="select-icon">
919
- <i class="fas fa-check text-green"></i>
920
- </span>
921
-
922
- </div>
923
-
924
- </div>
925
-
926
- </div>
927
-
928
- <div class="input-group-append">
929
-
930
- <button type="button" name="append-items" class="btn btn-secondary">
931
- <i class="fas fa-plus icon"></i>
932
- </button>
933
-
934
- </div>
935
-
936
- </div>
937
-
938
- </div>
939
-
940
- <div class="section-content overflow-visible">
941
-
942
- <div class="select-container form-control">
943
-
944
- <div class="select" data-name="selectExcludeItems">
945
-
946
- <div class="select-header">
947
-
948
- <span class="select-title">
949
- Js-render, exclude items
950
- </span>
951
-
952
- <span class="select-icon">
953
- <i class="fas fa-check text-green"></i>
954
- </span>
955
-
956
- </div>
957
-
958
- </div>
959
-
960
- </div>
961
-
962
- </div>
963
-
964
- <div class="section-content overflow-visible">
965
-
966
- <div class="select-container">
967
-
968
- <div class="select" data-name="selectConfirmCheck">
969
-
970
- <div class="select-header">
971
-
972
- <span class="select-title">
973
- JS-render, confirm check
974
- </span>
975
-
976
- <span class="select-icon">
977
- <i class="fas fa-angle-down"></i>
978
- </span>
979
-
980
- </div>
981
-
982
- </div>
983
-
984
- </div>
985
-
986
- </div>
987
-
988
- <div class="section-content overflow-visible">
989
-
990
- <div class="select-container">
991
-
992
- <div class="select" data-name="selectConfirmUncheck">
993
-
994
- <div class="select-header">
995
-
996
- <span class="select-title">
997
- JS-render, confirm uncheck
998
- </span>
999
-
1000
- <span class="select-icon">
1001
- <i class="fas fa-angle-down"></i>
1002
- </span>
1003
-
1004
- </div>
1005
-
1006
- </div>
1007
-
1008
- </div>
1009
-
1010
- </div>
1011
-
1012
- <div class="section-content overflow-visible">
1013
-
1014
- <div class="select-container">
1015
-
1016
- <div class="select" data-name="selectReset">
1017
-
1018
- <div class="select-header">
1019
-
1020
- <span class="select-title">
1021
- JS-render, reset
1022
- </span>
1023
-
1024
- <span class="select-icon">
1025
- <i class="fas fa-angle-down"></i>
1026
- </span>
1027
-
1028
- </div>
1029
-
1030
- </div>
1031
-
1032
- </div>
1033
-
1034
- </div>
1035
-
1036
- <div class="section-content overflow-visible">
1037
-
1038
- <div class="select-container">
1039
-
1040
- <div class="select" data-name="selectPreventUncheck">
1041
-
1042
- <div class="select-header">
1043
-
1044
- <span class="select-title">
1045
- JS-render, Prevent uncheck
1046
- </span>
1047
-
1048
- <span class="select-icon">
1049
- <i class="fas fa-angle-down"></i>
1050
- </span>
1051
-
1052
- </div>
1053
-
1054
- </div>
1055
-
1056
- </div>
1057
-
1058
- </div>
1059
-
1060
- <div class="section-content overflow-visible">
1061
-
1062
- <div class="select-container">
1063
-
1064
- <div class="select" data-name="selectItemDetails">
1065
-
1066
- <div class="select-header">
1067
-
1068
- <span class="select-title">
1069
- JS-render, Get item details (Printed to console)
1070
- </span>
1071
-
1072
- <span class="select-icon">
1073
- <i class="fas fa-angle-down"></i>
1074
- </span>
1075
-
1076
- </div>
1077
-
1078
- </div>
1079
-
1080
- </div>
1081
-
1082
- </div>
1083
-
1084
- <div class="section-content overflow-visible">
1085
-
1086
- <div class="select-container">
1087
-
1088
- <div class="select" data-name="selectDataDeleted">
1089
-
1090
- <div class="select-header">
1091
-
1092
- <span class="select-title">
1093
- JS-render, Deleted data
1094
- </span>
1095
-
1096
- <span class="select-icon">
1097
- <i class="fas fa-angle-down"></i>
1098
- </span>
1099
-
1100
- </div>
1101
-
1102
- </div>
1103
-
1104
- </div>
1105
-
1106
- </div>
1107
-
1108
- <div class="section-content overflow-visible">
1109
-
1110
- <div class="select-container">
1111
-
1112
- <div class="select" data-name="selectSetDataJs" data-set-data="{&quot;selectSetDataJs&quot;:&quot;name&quot;}">
1113
-
1114
- <div class="select-header">
1115
-
1116
- <span class="select-title">
1117
- JS-render, Set data
1118
- </span>
1119
-
1120
- <span class="select-icon">
1121
- <i class="fas fa-angle-down"></i>
1122
- </span>
1123
-
1124
- </div>
1125
-
1126
- </div>
1127
-
1128
- </div>
1129
-
1130
- </div>
1131
-
1132
- <div class="section-content overflow-visible">
1133
-
1134
- <div class="select-container">
1135
-
1136
- <div class="select" data-name="selectSetDataExcludeJs" data-set-data="{&quot;selectSetDataExcludeJs&quot;:&quot;name&quot;}">
1137
-
1138
- <div class="select-header">
1139
-
1140
- <span class="select-title">
1141
- JS-render, Set data, Exclude
1142
- </span>
1143
-
1144
- <span class="select-icon">
1145
- <i class="fas fa-angle-down"></i>
1146
- </span>
1147
-
1148
- </div>
1149
-
1150
- </div>
1151
-
1152
- </div>
1153
-
1154
- </div>
1155
-
1156
- <div class="section-content overflow-visible">
1157
-
1158
- <div class="select-container">
1159
-
1160
- <div class="select" data-name="selectSetDataHtml" data-set-data="{&quot;selectSetDataHtml&quot;:&quot;name&quot;}">
1161
-
1162
- <div class="select-header">
1163
-
1164
- <span class="select-title">
1165
- Html, Set data
1166
- </span>
1167
-
1168
- <span class="select-icon">
1169
- <i class="fas fa-angle-down"></i>
1170
- </span>
1171
-
1172
- </div>
1173
-
1174
- <div class="select-content">
1175
-
1176
- <div class="select-scrollable-content">
1177
-
1178
- <div class="select-item">
1179
-
1180
- <div class="select-item-radio">
1181
-
1182
- <div class="styled-radio">
1183
-
1184
- <input type="radio" id="select-sort-by-name" value="name" autocomplete="off">
1185
-
1186
- <label for="select-sort-by-name">
1187
-
1188
- <span class="radio-inner">
1189
- <svg viewBox="0 0 18 18">
1190
- <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
1191
- </svg>
1192
- </span>
1193
-
1194
- <span class="radio-label">Name</span>
1195
-
1196
- </label>
1197
-
1198
- </div>
1199
-
1200
- </div>
1201
-
1202
- </div>
1203
-
1204
- <div class="select-item">
1205
-
1206
- <div class="select-item-radio">
1207
-
1208
- <div class="styled-radio">
1209
-
1210
- <input type="radio" id="select-sort-by-price" value="price" autocomplete="off">
1211
-
1212
- <label for="select-sort-by-price">
1213
-
1214
- <span class="radio-inner">
1215
- <svg viewBox="0 0 18 18">
1216
- <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
1217
- </svg>
1218
- </span>
1219
-
1220
- <span class="radio-label">Price</span>
1221
-
1222
- </label>
1223
-
1224
- </div>
1225
-
1226
- </div>
1227
-
1228
- </div>
1229
-
1230
- </div>
1231
-
1232
- </div>
1233
-
1234
- </div>
1235
-
1236
- </div>
1237
-
1238
- </div>
1239
-
1240
- <div class="section-content overflow-visible">
1241
-
1242
- <div class="select-container">
1243
-
1244
- <div class="select" data-name="selectSetDataExcludeHtml" data-set-data="{&quot;selectSetDataExcludeHtml&quot;:&quot;name&quot;}" data-items-to-exclude="name">
1245
-
1246
- <div class="select-header">
1247
-
1248
- <span class="select-title">
1249
- Html, Set data, Exclude
1250
- </span>
1251
-
1252
- <span class="select-icon">
1253
- <i class="fas fa-angle-down"></i>
1254
- </span>
1255
-
1256
- </div>
1257
-
1258
- <div class="select-content">
1259
-
1260
- <div class="select-scrollable-content">
1261
-
1262
- <div class="select-item">
1263
-
1264
- <div class="select-item-radio">
1265
-
1266
- <div class="styled-radio">
1267
-
1268
- <input type="radio" id="select-sort-by-v2--name" value="name" autocomplete="off">
1269
-
1270
- <label for="select-sort-by-v2--name">
1271
-
1272
- <span class="radio-inner">
1273
- <svg viewBox="0 0 18 18">
1274
- <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
1275
- </svg>
1276
- </span>
1277
-
1278
- <span class="radio-label">Name</span>
1279
-
1280
- </label>
1281
-
1282
- </div>
1283
-
1284
- </div>
1285
-
1286
- </div>
1287
-
1288
- <div class="select-item">
1289
-
1290
- <div class="select-item-radio">
1291
-
1292
- <div class="styled-radio">
1293
-
1294
- <input type="radio" id="select-sort-by-v2-price" value="price" autocomplete="off">
1295
-
1296
- <label for="select-sort-by-v2-price">
1297
-
1298
- <span class="radio-inner">
1299
- <svg viewBox="0 0 18 18">
1300
- <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
1301
- </svg>
1302
- </span>
1303
-
1304
- <span class="radio-label">Price</span>
1305
-
1306
- </label>
1307
-
1308
- </div>
1309
-
1310
- </div>
1311
-
1312
- </div>
1313
-
1314
- </div>
1315
-
1316
- </div>
1317
-
1318
- </div>
1319
-
1320
- </div>
1321
-
1322
- </div>
1323
-
1324
- </div>
1325
-
1326
- <div class="section" id="dropdown">
1327
-
1328
- <div class="section-title">Dropdown</div>
1329
-
1330
- <div class="section-content overflow-visible">
1331
-
1332
- <div class="dropdown dropleft">
1333
-
1334
- <button class="btn btn-primary" type="button" data-toggle="dropdown">
1335
- Dropdown left
1336
- </button>
1337
-
1338
- <div class="dropdown-menu dropdown-menu-right">
1339
-
1340
- <ul class="dropdown-list">
1341
-
1342
- <li class="dropdown-item">Item 1</li>
1343
- <li class="dropdown-item">Item 2</li>
1344
- <li class="dropdown-item">Item 3</li>
1345
- <li class="dropdown-divider"></li>
1346
- <li class="dropdown-item">Item 4</li>
1347
- <li class="dropdown-item">Item 5</li>
1348
-
1349
- </ul>
1350
-
1351
- </div>
1352
-
1353
- </div>
1354
-
1355
- <div class="dropdown dropup">
1356
-
1357
- <button class="btn btn-primary" type="button" data-toggle="dropdown">
1358
- Dropdown up
1359
- </button>
1360
-
1361
- <div class="dropdown-menu dropdown-menu-right">
1362
-
1363
- <ul class="dropdown-list">
1364
-
1365
- <li class="dropdown-item">Item 1</li>
1366
- <li class="dropdown-item">Item 2</li>
1367
- <li class="dropdown-item">Item 3</li>
1368
- <li class="dropdown-divider"></li>
1369
- <li class="dropdown-item">Item 4</li>
1370
- <li class="dropdown-item">Item 5</li>
1371
-
1372
- </ul>
1373
-
1374
- </div>
1375
-
1376
- </div>
1377
-
1378
- <div class="dropdown dropbottom">
1379
-
1380
- <button class="btn btn-primary" type="button" data-toggle="dropdown">
1381
- Dropdown bottom
1382
- </button>
1383
-
1384
- <div class="dropdown-menu dropdown-menu-right">
1385
-
1386
- <ul class="dropdown-list">
1387
-
1388
- <li class="dropdown-item">Item 1</li>
1389
- <li class="dropdown-item">Item 2</li>
1390
- <li class="dropdown-item">Item 3</li>
1391
- <li class="dropdown-divider"></li>
1392
- <li class="dropdown-item">Item 4</li>
1393
- <li class="dropdown-item">Item 5</li>
1394
-
1395
- </ul>
1396
-
1397
- </div>
1398
-
1399
- </div>
1400
-
1401
- <div class="dropdown dropright">
1402
-
1403
- <button class="btn btn-primary" type="button" data-toggle="dropdown">
1404
- Dropdown right
1405
- </button>
1406
-
1407
- <div class="dropdown-menu dropdown-menu-right">
1408
-
1409
- <ul class="dropdown-list">
1410
-
1411
- <li class="dropdown-item">Item 1</li>
1412
- <li class="dropdown-item">Item 2</li>
1413
- <li class="dropdown-item">Item 3</li>
1414
- <li class="dropdown-divider"></li>
1415
- <li class="dropdown-item">Item 4</li>
1416
- <li class="dropdown-item">Item 5</li>
1417
-
1418
- </ul>
1419
-
1420
- </div>
1421
-
1422
- </div>
1423
-
1424
- </div>
1425
-
1426
- </div>
1427
-
1428
- <div class="section" id="collapse">
1429
-
1430
- <div class="section-title">
1431
-
1432
- <button type="button" class="btn-text d-flex w-100 justify-content-between" data-toggle="collapse" data-target=".test-primary-collapse" aria-expanded="false">
1433
-
1434
- <span>Collapse</span>
1435
- <span data-collapse-indicator=".test-primary-collapse" class="align-self-end">
1436
- <i class="fas fa-angle-down icon"></i>
1437
- </span>
1438
-
1439
- </button>
1440
-
1441
- </div>
1442
-
1443
- <div class="section-content section-collapse">
1444
-
1445
- <div class="collapse test-primary-collapse">
1446
-
1447
- <p>
1448
- 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.
1449
- </p>
1450
-
1451
- </div>
1452
-
1453
- </div>
1454
-
1455
- <div class="section-hr content-full-width"></div>
1456
-
1457
- <div class="section-title">
1458
-
1459
- <button type="button" class="btn-text d-flex w-100 justify-content-between" data-toggle="collapse" data-target=".test-secondary-collapse" aria-expanded="false">
1460
-
1461
- <span>Collapse</span>
1462
- <span data-collapse-indicator=".test-secondary-collapse">
1463
- <i class="fas fa-angle-down icon"></i>
1464
- </span>
1465
-
1466
- </button>
1467
-
1468
- </div>
1469
-
1470
- <div class="section-content section-collapse">
1471
-
1472
- <div class="collapse test-secondary-collapse">
1473
-
1474
- <p>
1475
- 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.
1476
- </p>
1477
-
1478
- </div>
1479
-
1480
- </div>
1481
-
1482
- <div class="section-hr content-full-width"></div>
1483
-
1484
- <div class="section-title">
1485
-
1486
- <button type="button" class="btn-text d-flex w-100 justify-content-between" data-toggle="collapse" data-target=".test-tertiary-collapse" aria-expanded="true">
1487
-
1488
- <span>Collapse open</span>
1489
- <span data-collapse-indicator=".test-tertiary-collapse">
1490
- <i class="fas fa-angle-down icon"></i>
1491
- </span>
1492
-
1493
- </button>
1494
-
1495
- </div>
1496
-
1497
- <div class="section-content section-collapse show">
1498
-
1499
- <div class="collapse show test-tertiary-collapse">
1500
-
1501
- <p>
1502
- 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.
1503
- </p>
1504
-
1505
- </div>
1506
-
1507
- </div>
1508
-
1509
- </div>
1510
-
1511
- <div class="section mt-5">
1512
-
1513
- <div class="section-title">
1514
-
1515
- <button type="button" class="btn-text d-flex w-100 justify-content-between" data-toggle="collapse" data-target=".test-collapse-hr" aria-expanded="true">
1516
-
1517
- <span>Collapse hr</span>
1518
- <span data-collapse-indicator=".test-secondary-collapse">
1519
- <i class="fas fa-angle-down icon"></i>
1520
- </span>
1521
-
1522
- </button>
1523
-
1524
- </div>
1525
-
1526
- <div class="section-content section-collapse show">
1527
-
1528
- <div class="collapse show test-collapse-hr">
1529
-
1530
- <div class="section-hr content-full-width"></div>
1531
-
1532
- <p>
1533
- 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.
1534
- </p>
1535
-
1536
- </div>
1537
-
1538
- </div>
1539
-
1540
- </div>
1541
-
1542
- <div class="section" id="toast">
1543
-
1544
- <div class="section-title">Toast</div>
1545
-
1546
- <div class="section-content">
1547
-
1548
- <button type="button" class="btn btn-primary" name="toast-test">
1549
- Toast
1550
- </button>
1551
-
1552
- </div>
1553
-
1554
- </div>
1555
-
1556
- <div class="section" id="dialog">
1557
-
1558
- <div class="section-title">Dialog</div>
1559
-
1560
- <div class="section-content">
1561
-
1562
- <button type="button" class="btn btn-primary" name="dialog-test">
1563
- Dialog
1564
- </button>
1565
-
1566
- <button type="button" class="btn btn-primary" name="dialog-scroll">
1567
- Dialog scroll
1568
- </button>
1569
-
1570
- </div>
1571
-
1572
- </div>
1573
-
1574
- <div class="section" id="section-tabs">
1575
-
1576
- <div class="section-title">
1577
-
1578
- Section Tabs
1579
-
1580
- </div>
1581
-
1582
- <div class="section-tabs">
1583
-
1584
- <ul class="tabs-container" data-toggle="section-tabs">
1585
-
1586
- <li class="tab-item">
1587
-
1588
- <a href="#section-tabs" class="tab-item-action active">
1589
- Item 1
1590
- </a>
1591
-
1592
- </li>
1593
-
1594
- <li class="tab-item">
1595
-
1596
- <a href="#section-tabs" class="tab-item-action">
1597
- Item 2
1598
- </a>
1599
-
1600
- </li>
1601
-
1602
- <li class="tab-item">
1603
-
1604
- <a href="#section-tabs" class="tab-item-action">
1605
- Item 3
1606
- </a>
1607
-
1608
- </li>
1609
-
1610
- <li class="tab-item">
1611
-
1612
- <a href="#section-tabs" class="tab-item-action">
1613
- Item 4
1614
- </a>
1615
-
1616
- </li>
1617
-
1618
- <li class="tab-item">
1619
-
1620
- <a href="#section-tabs" class="tab-item-action">
1621
- Item 5
1622
- </a>
1623
-
1624
- </li>
1625
-
1626
- <li class="tab-item">
1627
-
1628
- <a href="#section-tabs" class="tab-item-action">
1629
- Item 6
1630
- </a>
1631
-
1632
- </li>
1633
-
1634
- <li class="tab-item">
1635
-
1636
- <a href="#section-tabs" class="tab-item-action">
1637
- Item 7
1638
- </a>
1639
-
1640
- </li>
1641
-
1642
- <li class="tab-item">
1643
-
1644
- <a href="#section-tabs" class="tab-item-action">
1645
- Item 8
1646
- </a>
1647
-
1648
- </li>
1649
-
1650
- <li class="tab-item">
1651
-
1652
- <a href="#section-tabs" class="tab-item-action">
1653
- Item 9
1654
- </a>
1655
-
1656
- </li>
1657
-
1658
- <li class="tab-item">
1659
-
1660
- <a href="#section-tabs" class="tab-item-action">
1661
- Item 10
1662
- </a>
1663
-
1664
- </li>
1665
-
1666
- <li class="tab-item dropdown-container">
1667
-
1668
- <div class="dropdown dropbottom">
1669
-
1670
- <button class="btn btn-icon" type="button" data-toggle="dropdown">
1671
- <i class="fas fa-lg fa-ellipsis-h icon"></i>
1672
- </button>
1673
-
1674
- <div class="dropdown-menu dropdown-menu-right">
1675
-
1676
- <ul class="dropdown-list"></ul>
1677
-
1678
- </div>
1679
-
1680
- </div>
1681
-
1682
- </li>
1683
-
1684
- </ul>
1685
-
1686
- </div>
1687
-
1688
- <div class="section-content">
1689
-
1690
- <p>
1691
- 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.
1692
- </p>
1693
-
1694
- </div>
1695
-
1696
- </div>
1697
-
1698
- <div class="section" id="images">
1699
-
1700
- <div class="section-title">
1701
-
1702
- Images
1703
-
1704
- </div>
1705
-
1706
- <div class="section-content">
1707
-
1708
- <div class="image img-xl img-thumbnail img-placeholder mb-2">
1709
-
1710
- <img src="https://via.placeholder.com/120" class="cover" alt="">
1711
-
1712
- </div>
1713
-
1714
- <div class="image img-lg img-thumbnail img-placeholder mb-2">
1715
-
1716
- <img src="https://via.placeholder.com/90" class="cover" alt="">
1717
-
1718
- </div>
1719
-
1720
- <div class="image img-md img-thumbnail img-placeholder mb-2">
1721
-
1722
- <img src="https://via.placeholder.com/50" class="cover" alt="">
1723
-
1724
- </div>
1725
-
1726
- <div class="image img-sm img-thumbnail img-placeholder mb-2">
1727
-
1728
- <img src="https://via.placeholder.com/32" class="cover" alt="">
1729
-
1730
- </div>
1731
-
1732
- <div class="image img-xs img-thumbnail img-placeholder mb-2">
1733
-
1734
- <img src="https://via.placeholder.com/24" class="cover" alt="">
1735
-
1736
- </div>
1737
-
1738
- <div class="image img-xl img-thumbnail img-placeholder mb-2">
1739
-
1740
-
1741
-
1742
- </div>
1743
-
1744
- <div class="image img-lg img-thumbnail img-placeholder mb-2">
1745
-
1746
-
1747
- </div>
1748
-
1749
- <div class="image img-md img-thumbnail img-placeholder mb-2">
1750
-
1751
-
1752
- </div>
1753
-
1754
- <div class="image img-sm img-thumbnail img-placeholder mb-2">
1755
-
1756
- </div>
1757
-
1758
- <div class="image img-xs img-thumbnail img-placeholder mb-2">
1759
-
1760
- </div>
1761
-
1762
- </div>
1763
-
1764
- </div>
1765
-
1766
- <div class="section" id="alerts">
1767
-
1768
- <div class="section-title">
1769
-
1770
- Alerts
1771
-
1772
- </div>
1773
-
1774
- <div class="section-content">
1775
-
1776
- <div class="alert">
1777
-
1778
- <div class="alert-icon">
1779
-
1780
- <i class="fas fa-fw fa-hourglass icon"></i>
1781
-
1782
- </div>
1783
-
1784
- <div class="alert-content-container">
1785
-
1786
- <div class="alert-content">
1787
- <p><strong>Title here</strong></p>
1788
-
1789
- <p>Alert text!</p>
1790
-
1791
- </div>
1792
-
1793
- <div class="alert-action">
1794
-
1795
- <a href="#" class="btn btn-secondary">
1796
- Alert action
1797
- </a>
1798
-
1799
- </div>
1800
-
1801
- </div>
1802
-
1803
- </div>
1804
-
1805
- <div class="alert alert-info">
1806
-
1807
- <div class="alert-icon">
1808
-
1809
- <i class="fas fa-fw fa-hourglass icon"></i>
1810
-
1811
- </div>
1812
-
1813
- <div class="alert-content-container">
1814
-
1815
- <div class="alert-content">
1816
-
1817
- Alert text!
1818
-
1819
- </div>
1820
-
1821
- </div>
1822
-
1823
- </div>
1824
-
1825
- <div class="alert alert-success">
1826
-
1827
- <div class="alert-content-container">
1828
-
1829
- <div class="alert-content">
1830
-
1831
- Alert text!
1832
-
1833
- </div>
1834
-
1835
- <div class="alert-action">
1836
-
1837
- <a href="#" class="btn btn-secondary">
1838
- Alert action
1839
- </a>
1840
-
1841
- </div>
1842
-
1843
- </div>
1844
-
1845
- </div>
1846
-
1847
- <div class="alert alert-warning">
1848
-
1849
- <div class="alert-content-container">
1850
-
1851
- <div class="alert-content">
1852
-
1853
- Alert text!
1854
-
1855
- </div>
1856
-
1857
- </div>
1858
-
1859
- </div>
1860
-
1861
- <div class="alert alert-danger">
1862
-
1863
- <div class="alert-icon">
1864
-
1865
- <i class="fas fa-fw fa-times icon"></i>
1866
-
1867
- </div>
1868
-
1869
- <div class="alert-content-container">
1870
-
1871
- <div class="alert-content">
1872
-
1873
- Alert text!
1874
-
1875
- </div>
1876
-
1877
- <div class="alert-action">
1878
-
1879
- <a href="#" class="btn btn-secondary">
1880
- Alert action
1881
- </a>
1882
-
1883
- </div>
1884
-
1885
- </div>
1886
-
1887
- </div>
1888
-
1889
- <div class="alert alert-danger alert-sm">
1890
-
1891
- <div class="alert-icon">
1892
-
1893
- <i class="fas fa-fw fa-times icon"></i>
1894
-
1895
- </div>
1896
-
1897
- <div class="alert-content-container">
1898
-
1899
- <div class="alert-content">
1900
-
1901
- Alert text!
1902
-
1903
- </div>
1904
-
1905
- <div class="alert-action">
1906
-
1907
- <a href="#" class="btn btn-secondary btn-sm">
1908
- Alert action
1909
- </a>
1910
-
1911
- </div>
1912
-
1913
- </div>
1914
-
1915
- </div>
1916
-
1917
- <div class="alert alert-danger alert-sm">
1918
-
1919
- <div class="alert-content-container">
1920
-
1921
- <div class="alert-content">
1922
-
1923
- Alert text!
1924
-
1925
- </div>
1926
-
1927
- <div class="alert-action">
1928
-
1929
- <a href="#" class="btn btn-secondary btn-sm">
1930
- Alert action
1931
- </a>
1932
-
1933
- </div>
1934
-
1935
- </div>
1936
-
1937
- </div>
1938
-
1939
- <div class="alert alert-danger alert-sm">
1940
-
1941
- <div class="alert-content-container">
1942
-
1943
- <div class="alert-content">
1944
-
1945
- Alert text!
1946
-
1947
- </div>
1948
-
1949
- </div>
1950
-
1951
- </div>
1952
-
1953
- <div class="alert-icon">
1954
-
1955
- <i class="fas fa-fw fa-times icon"></i>
1956
-
1957
- </div>
1958
-
1959
- <div class="alert-icon alert-icon-info">
1960
-
1961
- <i class="fas fa-fw fa-times icon"></i>
1962
-
1963
- </div>
1964
-
1965
- <div class="alert-icon alert-icon-success">
1966
-
1967
- <i class="fas fa-fw fa-times icon"></i>
1968
-
1969
- </div>
1970
-
1971
- <div class="alert-icon alert-icon-warning">
1972
-
1973
- <i class="fas fa-fw fa-times icon"></i>
1974
-
1975
- </div>
1976
-
1977
- <div class="alert-icon alert-icon-danger">
1978
-
1979
- <i class="fas fa-fw fa-times icon"></i>
1980
-
1981
- </div>
1982
-
1983
- <h1 class="mt-3">
1984
- <div class="alert-icon alert-icon-success">
1985
-
1986
- <i class="fas fa-fw fa-times icon"></i>
1987
-
1988
- </div>
1989
-
1990
- Lorem ipsum
1991
- </h1>
1992
-
1993
- <h2>
1994
- <div class="alert-icon alert-icon-success">
1995
-
1996
- <i class="fas fa-fw fa-times icon"></i>
1997
-
1998
- </div>
1999
-
2000
- Lorem ipsum
2001
- </h2>
2002
-
2003
- <h3>
2004
- <div class="alert-icon alert-icon-success">
2005
-
2006
- <i class="fas fa-fw fa-times icon"></i>
2007
-
2008
- </div>
2009
-
2010
- Lorem ipsum
2011
- </h3>
2012
-
2013
- <h4>
2014
- <div class="alert-icon alert-icon-success">
2015
-
2016
- <i class="fas fa-fw fa-times icon"></i>
2017
-
2018
- </div>
2019
-
2020
- Lorem ipsum
2021
- </h4>
2022
-
2023
- <h5>
2024
- <div class="alert-icon alert-icon-success">
2025
-
2026
- <i class="fas fa-fw fa-times icon"></i>
2027
-
2028
- </div>
2029
-
2030
- Lorem ipsum
2031
- </h5>
2032
-
2033
- <h6>
2034
- <div class="alert-icon alert-icon-success">
2035
-
2036
- <i class="fas fa-fw fa-times icon"></i>
2037
-
2038
- </div>
2039
-
2040
- Lorem ipsum
2041
- </h6>
2042
- </div>
2043
-
2044
- </div>
2045
-
2046
- <div class="section" id="badges">
2047
-
2048
- <div class="section-title">
2049
-
2050
- Badges
2051
-
2052
- </div>
2053
-
2054
- <div class="section-content">
2055
-
2056
- <p>Colors</p>
2057
-
2058
- <span class="badge badge-white">Badge</span>
2059
- <span class="badge badge-grey-lightest">Badge</span>
2060
- <span class="badge badge-grey-lighter">Badge</span>
2061
- <span class="badge badge-grey-light">Badge</span>
2062
- <span class="badge badge-grey">Badge</span>
2063
- <span class="badge badge-grey-dark">Badge</span>
2064
- <span class="badge badge-grey-darker">Badge</span>
2065
- <span class="badge badge-grey-darkest">Badge</span>
2066
- <span class="badge badge-black">Badge</span>
2067
- <span class="badge badge-blue-light">Badge</span>
2068
- <span class="badge badge-blue">Badge</span>
2069
- <span class="badge badge-blue-dark">Badge</span>
2070
- <span class="badge badge-blue-grey">Badge</span>
2071
- <span class="badge badge-green">Badge</span>
2072
- <span class="badge badge-pink">Badge</span>
2073
- <span class="badge badge-red">Badge</span>
2074
- <span class="badge badge-yellow">Badge</span>
2075
-
2076
- <p class="mt-3">Theme colors</p>
2077
-
2078
- <span class="badge badge-primary">Badge</span>
2079
- <span class="badge badge-secondary">Badge</span>
2080
- <span class="badge badge-success">Badge</span>
2081
- <span class="badge badge-info">Badge</span>
2082
- <span class="badge badge-warning">Badge</span>
2083
- <span class="badge badge-danger">Badge</span>
2084
-
2085
- <p class="mt-3">Outline</p>
2086
-
2087
- <span class="badge badge-outline-white">Badge</span>
2088
- <span class="badge badge-outline-grey-lightest">Badge</span>
2089
- <span class="badge badge-outline-grey-lighter">Badge</span>
2090
- <span class="badge badge-outline-grey-light">Badge</span>
2091
- <span class="badge badge-outline-grey">Badge</span>
2092
- <span class="badge badge-outline-grey-dark">Badge</span>
2093
- <span class="badge badge-outline-grey-darker">Badge</span>
2094
- <span class="badge badge-outline-grey-darkest">Badge</span>
2095
- <span class="badge badge-outline-black">Badge</span>
2096
- <span class="badge badge-outline-blue-light">Badge</span>
2097
- <span class="badge badge-outline-blue">Badge</span>
2098
- <span class="badge badge-outline-blue-dark">Badge</span>
2099
- <span class="badge badge-outline-blue-grey">Badge</span>
2100
- <span class="badge badge-outline-green">Badge</span>
2101
- <span class="badge badge-outline-pink">Badge</span>
2102
- <span class="badge badge-outline-red">Badge</span>
2103
- <span class="badge badge-outline-yellow">Badge</span>
2104
- <span class="badge badge-outline-primary">Badge</span>
2105
- <span class="badge badge-outline-secondary">Badge</span>
2106
- <span class="badge badge-outline-success">Badge</span>
2107
- <span class="badge badge-outline-info">Badge</span>
2108
- <span class="badge badge-outline-warning">Badge</span>
2109
- <span class="badge badge-outline-danger">Badge</span>
2110
-
2111
- <p class="mt-3">Icons</p>
2112
-
2113
- <span class="badge badge-primary"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
2114
- <span class="badge badge-secondary"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
2115
- <span class="badge badge-success"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
2116
- <span class="badge badge-info"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
2117
- <span class="badge badge-warning"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
2118
- <span class="badge badge-danger"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span>
2119
-
2120
- <p class="mt-3">Sizing with font size</p>
2121
-
2122
- <h1><span class="badge badge-primary"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h1>
2123
-
2124
- <h2><span class="badge badge-secondary"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h2>
2125
-
2126
- <h3><span class="badge badge-success"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h3>
2127
-
2128
- <h4><span class="badge badge-info"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h4>
2129
-
2130
- <h5><span class="badge badge-warning"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h5>
2131
-
2132
- <h6><span class="badge badge-danger"><span class="alert-icon"><i class="fa fa-exclamation icon"></i></span> Badge</span></h6>
2133
-
2134
- <p class="mt-3">Sizing with class</p>
2135
-
2136
- <span class="badge badge-primary">
2137
-
2138
- <span class="alert-icon">
2139
- <i class="fa fa-exclamation icon"></i>
2140
- </span>
2141
-
2142
- default
2143
-
2144
- </span>
2145
-
2146
- <span class="badge badge-sm badge-primary">
2147
-
2148
- <span class="alert-icon">
2149
- <i class="fa fa-exclamation icon"></i>
2150
- </span>
2151
-
2152
- sm
2153
-
2154
- </span>
2155
-
2156
- <span class="badge badge-xs badge-primary">
2157
-
2158
- <span class="alert-icon">
2159
- <i class="fa fa-exclamation icon"></i>
2160
- </span>
2161
-
2162
- xs
2163
-
2164
- </span>
2165
-
2166
- </div>
2167
-
2168
- </div>
2169
-
2170
- </div>
2171
-
2172
- </div>
2173
-
2174
- </article>
2175
-
2176
- </main>
2177
-
2178
- <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
2179
- <script src="../dist/js/cool.js"></script>
2180
- <script type="text/javascript">
2181
-
2182
- Cool.initialize({
2183
- popover: {
2184
- debug: false
2185
- },
2186
- select: {
2187
- debug: false,
2188
- faPro: false
2189
- },
2190
- dropdown: {
2191
- debug: true
2192
- },
2193
- tooltip: {
2194
- debug: false
2195
- },
2196
- collapse: {
2197
- debug: false
2198
- },
2199
- sectionTabs: {
2200
- debug: false
2201
- },
2202
- toast: {
2203
- debug: false,
2204
- faPro: false,
2205
- size: 'lg'
2206
- },
2207
- dialog: {
2208
- debug: true,
2209
- faPro: false,
2210
- actions: {
2211
- close: {
2212
- content: 'Sulje'
2213
- },
2214
- remove: {
2215
- content: 'Poista'
2216
- },
2217
- confirm: {
2218
- content: 'Vahvista'
2219
- }
2220
- },
2221
- callbacks: {
2222
- close: function(cb, dialog) {
2223
-
2224
- console.log('Dialog close callback test');
2225
- console.log(dialog);
2226
- cb();
2227
- },
2228
- remove: function(cb, dialog) {
2229
-
2230
-
2231
- console.log('Dialog remove callback test');
2232
- console.log(dialog);
2233
- cb();
2234
- },
2235
- confirm: function(cb, dialog) {
2236
-
2237
- console.log('Dialog confirm callback test');
2238
- console.log(dialog);
2239
- cb();
2240
- }
2241
- }
2242
- }
2243
- });
2244
-
2245
- function toast(opts) {
2246
- return $('body').data('plugin_coolToast').init(opts);
2247
- };
2248
-
2249
- $('[name="toast-test"]').on('click', () => {
2250
-
2251
- let testToast = toast({
2252
- content: 'I have a toast'
2253
- });
2254
-
2255
- console.log(testToast.$el);
2256
- });
2257
-
2258
- function dialog(opts) {
2259
- return $('body').data('plugin_coolDialog').init(opts);
2260
- };
2261
-
2262
- $('[name="dialog-test"]').on('click', () => {
2263
-
2264
- let testDialog = dialog({
2265
- title: 'Dialog 1',
2266
- 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>',
2267
- footer: false
2268
- });
2269
-
2270
- console.log(testDialog.$el);
2271
- });
2272
-
2273
- $('[name="dialog-scroll"]').on('click', () => {
2274
-
2275
- dialog({
2276
- title: 'Dialog scroll',
2277
- body: '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.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.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.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.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.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.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.',
2278
- });
2279
- });
2280
-
2281
- $(document).on('click', '[name="dialog-inner-test"]', () => {
2282
-
2283
- dialog({
2284
- title: 'Dialog 2',
2285
- body: 'Lorem ipsum dolor dot 2',
2286
- footer: true
2287
- });
2288
- });
2289
-
2290
- $('.nav .nav-item').on('click', function(e) {
2291
-
2292
- e.preventDefault();
2293
-
2294
- let target = $(this).attr('href');
2295
-
2296
- $('.content').animate({
2297
- scrollTop: $(target).offset().top
2298
- }, 800);
2299
-
2300
- return false;
2301
- });
2302
-
2303
- $('[data-name="selectJs"]').coolSelect({
2304
- type: 'radio',
2305
- items: [
2306
- {
2307
- "id": 1,
2308
- "name": "Test 1"
2309
- },
2310
- {
2311
- "id": 2,
2312
- "name": "Test 2"
2313
- }
2314
- ],
2315
- scrollContentHeight: 370,
2316
- showValidStateIcon: false
2317
- });
2318
-
2319
- $('[data-name="selectJsLabel"]').coolSelect({
2320
- items: [
2321
- {
2322
- "id": "1",
2323
- "name": "Test 1",
2324
- "status": "1"
2325
- },
2326
- {
2327
- "id": "2",
2328
- "name": "Test 2",
2329
- "status": "0"
2330
- }
2331
- ],
2332
- showSearch: true,
2333
- showFooter: true,
2334
- searchPlaceholder: 'Search',
2335
- btnCloseText: 'Close',
2336
- scrollContentHeight: 370,
2337
- labelTemplate: (item) => {
2338
- return `
2339
- <div class="d-flex justify-content-between">
2340
- <div>
2341
- <span class="d-block" data-label>
2342
- ${item.name}
2343
- </span>
2344
- </div>
2345
- <div>
2346
- <span>
2347
- <i class="fas fa-fw fa-xs fa-circle icon ${item.status == 0 ? 'text-danger' : 'text-success'}"></i>
2348
- </span>
2349
- </div>
2350
- </div>
2351
- `
2352
- }
2353
- });
2354
-
2355
- $('[data-name="selectJsAppend"]').coolSelect({
2356
- items: [
2357
- {
2358
- "id": "1",
2359
- "name": "Test 1",
2360
- "status": "1"
2361
- },
2362
- {
2363
- "id": "2",
2364
- "name": "Test 2",
2365
- "status": "0"
2366
- }
2367
- ],
2368
- showSearch: true,
2369
- showFooter: true,
2370
- searchPlaceholder: 'Search',
2371
- btnCloseText: 'Close',
2372
- scrollContentHeight: 370,
2373
- labelTemplate: (item) => {
2374
- return `
2375
- <div class="d-flex justify-content-between">
2376
- <div>
2377
- <span class="d-block" data-label>
2378
- ${item.name}
2379
- </span>
2380
- </div>
2381
- <div>
2382
- <span>
2383
- <i class="fas fa-fw fa-xs fa-circle icon ${item.status == 0 ? 'text-danger' : 'text-success'}"></i>
2384
- </span>
2385
- </div>
2386
- </div>
2387
- `
2388
- },
2389
- onInit: function() {
2390
-
2391
- this.appendItems([
2392
- {
2393
- id: 3,
2394
- name: 'Test append 3',
2395
- status: 1
2396
- },
2397
- {
2398
- id: 4,
2399
- name: 'Test append 4',
2400
- status: 0
2401
- }
2402
- ], true);
2403
- }
2404
- });
2405
-
2406
- $('[data-name="selectJsLabelDynamicTitle"]').coolSelect({
2407
- setData: {
2408
- selectJsLabelDynamicTitle: [1]
2409
- },
2410
- items: [
2411
- {
2412
- "id": "1",
2413
- "name": "Test 1",
2414
- "status": "1"
2415
- },
2416
- {
2417
- "id": "2",
2418
- "name": "Test 2",
2419
- "status": "0"
2420
- }
2421
- ],
2422
- type: 'radio',
2423
- showSearch: true,
2424
- showFooter: true,
2425
- searchPlaceholder: 'Search',
2426
- btnCloseText: 'Close',
2427
- dynamicTitle: true,
2428
- dynamicTitleDefault: 'Choose',
2429
- scrollContentHeight: 370,
2430
- labelTemplate: (item) => {
2431
- return `
2432
- <div class="d-flex justify-content-between">
2433
- <div>
2434
- <span class="d-block" data-label>
2435
- ${item.name}
2436
- </span>
2437
- </div>
2438
- <div>
2439
- <span>
2440
- <i class="fas fa-fw fa-xs fa-circle icon ${item.status == 0 ? 'text-danger' : 'text-success'}"></i>
2441
- </span>
2442
- </div>
2443
- </div>
2444
- `
2445
- }
2446
- });
2447
-
2448
- $('[data-name="selectJsDeselect"]').coolSelect({
2449
- setData: {
2450
- selectJsDeselect: [1,2]
2451
- },
2452
- items: [
2453
- {
2454
- "id": "1",
2455
- "name": "Test 1",
2456
- "status": "1"
2457
- },
2458
- {
2459
- "id": "2",
2460
- "name": "Test 2",
2461
- "status": "0"
2462
- }
2463
- ],
2464
- type: 'checkbox',
2465
- showSearch: true,
2466
- showFooter: true,
2467
- searchPlaceholder: 'Search',
2468
- btnCloseText: 'Close',
2469
- scrollContentHeight: 370,
2470
- onInit: function() {
2471
-
2472
- $('[name="deselect-items"]').on('click', () => {
2473
-
2474
- this.deselectItems([1,2]);
2475
- });
2476
- }
2477
- });
2478
-
2479
- $('[data-name="selectJsEmpty"]').coolSelect({
2480
- items: [],
2481
- dynamicTitle: true,
2482
- dynamicTitleDefault: 'Choose',
2483
- dynamicTitleEmptyDefault: 'Add',
2484
- onInit: function() {
2485
-
2486
- $('[name="append-items"]').on('click', () => {
2487
-
2488
- this.appendItems([
2489
- {
2490
- id: 1,
2491
- name: 'Test 1'
2492
- },
2493
- {
2494
- id: 2,
2495
- name: 'Test 2'
2496
- }
2497
- ]);
2498
- });
2499
- }
2500
- });
2501
-
2502
- $('[data-name="selectExcludeItems"]').coolSelect({
2503
- type: 'radio',
2504
- items: [
2505
- {
2506
- "id": 1,
2507
- "name": "Test 1"
2508
- },
2509
- {
2510
- "id": 2,
2511
- "name": "Test 2"
2512
- }
2513
- ],
2514
- itemsToExclude: [2]
2515
- });
2516
-
2517
- $('[data-name="selectConfirmCheck"]').coolSelect({
2518
- type: 'checkbox',
2519
- items: [
2520
- {
2521
- "id": 1,
2522
- "name": "Test 1"
2523
- },
2524
- {
2525
- "id": 2,
2526
- "name": "Test 2"
2527
- }
2528
- ],
2529
- scrollContentHeight: 370,
2530
- confirmCheck: function(confirmCb, el) {
2531
-
2532
- dialog({
2533
- title: 'Select confirm check',
2534
- body: 'Lorem ipsum dolor dot 2',
2535
- actions: {
2536
- remove: {
2537
- visible: false
2538
- }
2539
- },
2540
- callbacks: {
2541
- confirm: function (cb) {
2542
-
2543
- confirmCb('confirmed');
2544
- cb();
2545
- },
2546
- close: function (cb) {
2547
-
2548
- confirmCb();
2549
- cb();
2550
- }
2551
- }
2552
- });
2553
- }
2554
- });
2555
-
2556
- $('[data-name="selectConfirmUncheck"]').coolSelect({
2557
- type: 'checkbox',
2558
- items: [
2559
- {
2560
- "id": 1,
2561
- "name": "Test 1"
2562
- },
2563
- {
2564
- "id": 2,
2565
- "name": "Test 2"
2566
- }
2567
- ],
2568
- scrollContentHeight: 370,
2569
- confirmUncheck: function(confirmCb, el) {
2570
-
2571
- dialog({
2572
- title: 'Select confirm uncheck',
2573
- body: 'Lorem ipsum dolor dot 2',
2574
- actions: {
2575
- remove: {
2576
- visible: false
2577
- }
2578
- },
2579
- callbacks: {
2580
- confirm: function (cb) {
2581
-
2582
- confirmCb('confirmed');
2583
- cb();
2584
- },
2585
- close: function (cb) {
2586
-
2587
- confirmCb();
2588
- cb();
2589
- }
2590
- }
2591
- });
2592
- }
2593
- });
2594
-
2595
- $('[data-name="selectReset"]').coolSelect({
2596
- type: 'checkbox',
2597
- items: [
2598
- {
2599
- "id": 1,
2600
- "name": "Test 1"
2601
- },
2602
- {
2603
- "id": 2,
2604
- "name": "Test 2"
2605
- }
2606
- ],
2607
- scrollContentHeight: 370,
2608
- onClose: function() {
2609
- this.reset();
2610
- }
2611
- });
2612
-
2613
- $('[data-name="selectPreventUncheck"]').coolSelect({
2614
- type: 'checkbox',
2615
- preventUncheck: true,
2616
- items: [
2617
- {
2618
- "id": 1,
2619
- "name": "Test 1"
2620
- },
2621
- {
2622
- "id": 2,
2623
- "name": "Test 2"
2624
- }
2625
- ],
2626
- scrollContentHeight: 370
2627
- });
2628
-
2629
- $('[data-name="selectItemDetails"]').coolSelect({
2630
- type: 'checkbox',
2631
- items: [
2632
- {
2633
- "id": 1,
2634
- "name": "Test 1",
2635
- "category": 1000,
2636
- "status": false
2637
- },
2638
- {
2639
- "id": 2,
2640
- "name": "Test 2",
2641
- "category": 2000,
2642
- "status": true
2643
- }
2644
- ],
2645
- scrollContentHeight: 370,
2646
- onSelect: function(data, plugin) {
2647
-
2648
- console.log(this);
2649
- console.log(data);
2650
- console.log(plugin);
2651
- }
2652
- });
2653
-
2654
- $('[data-name="selectDataDeleted"]').coolSelect({
2655
- setData: { 'selectDataDeleted': [1] },
2656
- type: 'checkbox',
2657
- scrollContentHeight: 370,
2658
- onSelect: function(data, plugin) {
2659
-
2660
- console.log(this);
2661
- console.log(data);
2662
- console.log(plugin);
2663
- }
2664
- });
2665
-
2666
- $('[data-name="selectSetDataJs"]').coolSelect({
2667
- type: 'checkbox',
2668
- items: [
2669
- {
2670
- "id": "name",
2671
- "name": "Test 1"
2672
- },
2673
- {
2674
- "id": "test",
2675
- "name": "Test 2"
2676
- }
2677
- ]
2678
- });
2679
-
2680
- $('[data-name="selectSetDataExcludeJs"]').coolSelect({
2681
- type: 'checkbox',
2682
- itemsToExclude: ['name'],
2683
- items: [
2684
- {
2685
- "id": "name",
2686
- "name": "Test 1"
2687
- },
2688
- {
2689
- "id": "test",
2690
- "name": "Test 2"
2691
- }
2692
- ]
2693
- });
2694
-
2695
- $('[data-name="selectSetDataHtml"]').coolSelect();
2696
-
2697
- $('[data-name="selectSetDataExcludeHtml"]').coolSelect();
2698
-
2699
- </script>
2700
-
2701
- </body>
2702
-
2703
- </html>