@finqu/cool 1.2.29 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (221) hide show
  1. package/README.md +694 -1
  2. package/dist/css/cool.css +26902 -14322
  3. package/dist/css/cool.css.map +1 -154
  4. package/dist/css/cool.min.css +2 -7
  5. package/dist/css/cool.min.css.map +1 -1
  6. package/dist/js/cool.bundle.js +16191 -5588
  7. package/dist/js/cool.bundle.js.map +1 -1
  8. package/dist/js/cool.bundle.min.js +13 -8
  9. package/dist/js/cool.bundle.min.js.map +1 -1
  10. package/dist/js/cool.esm.js +4722 -4812
  11. package/dist/js/cool.esm.js.map +1 -1
  12. package/dist/js/cool.esm.min.js +4 -9
  13. package/dist/js/cool.esm.min.js.map +1 -1
  14. package/dist/js/cool.js +5143 -5240
  15. package/dist/js/cool.js.map +1 -1
  16. package/dist/js/cool.min.js +4 -9
  17. package/dist/js/cool.min.js.map +1 -1
  18. package/package.json +125 -60
  19. package/scss/LISENCE +1 -1
  20. package/scss/_badge.scss +134 -102
  21. package/scss/_button-group.scss +80 -129
  22. package/scss/_buttons.scss +257 -201
  23. package/scss/_dark.scss +637 -0
  24. package/scss/_dialog.scss +314 -123
  25. package/scss/_dropdown.scss +165 -233
  26. package/scss/_forms.scss +555 -200
  27. package/scss/_frame.scss +945 -624
  28. package/scss/_grid.scss +215 -35
  29. package/scss/_input-group.scss +326 -285
  30. package/scss/_list-group.scss +127 -82
  31. package/scss/_media.scss +439 -0
  32. package/scss/_navbar.scss +116 -284
  33. package/scss/_notification.scss +111 -9
  34. package/scss/_pagination.scss +82 -88
  35. package/scss/_popover.scss +61 -167
  36. package/scss/_reboot.scss +306 -284
  37. package/scss/_root.scss +848 -15
  38. package/scss/_section.scss +735 -977
  39. package/scss/_select.scss +559 -187
  40. package/scss/_tables.scss +471 -595
  41. package/scss/_tabs.scss +50 -178
  42. package/scss/_toast.scss +242 -147
  43. package/scss/_tooltip.scss +130 -101
  44. package/scss/_typography.scss +166 -0
  45. package/scss/_variables.scss +1154 -748
  46. package/scss/cool.scss +64 -32
  47. package/scss/utilities/_align.scss +51 -41
  48. package/scss/utilities/_animation.scss +165 -0
  49. package/scss/utilities/_background.scss +72 -14
  50. package/scss/utilities/_borders.scss +205 -146
  51. package/scss/utilities/_collapse.scss +20 -25
  52. package/scss/utilities/_cursor.scss +160 -22
  53. package/scss/utilities/_display.scss +116 -16
  54. package/scss/utilities/_embed.scss +89 -78
  55. package/scss/utilities/_fill.scss +79 -0
  56. package/scss/utilities/_filters.scss +233 -0
  57. package/scss/utilities/_flex.scss +216 -52
  58. package/scss/utilities/_grid.scss +136 -0
  59. package/scss/utilities/_opacity.scss +131 -0
  60. package/scss/utilities/_overflow.scss +242 -6
  61. package/scss/utilities/_perfect-scrollbar.scss +147 -141
  62. package/scss/utilities/_pointer-events.scss +125 -0
  63. package/scss/utilities/_position.scss +130 -30
  64. package/scss/utilities/_screen-readers.scss +95 -0
  65. package/scss/utilities/_shadows.scss +195 -0
  66. package/scss/utilities/_sizing.scss +288 -32
  67. package/scss/utilities/_spacing.scss +168 -92
  68. package/scss/utilities/_stroke.scss +124 -0
  69. package/scss/utilities/_text.scss +420 -99
  70. package/scss/utilities/_transform.scss +232 -0
  71. package/scss/utilities/_transitions.scss +147 -0
  72. package/scss/utilities/_user-select.scss +89 -10
  73. package/scss/utilities/_visibility.scss +62 -6
  74. package/scss/utilities/_z-index.scss +169 -0
  75. package/.babelrc.js +0 -20
  76. package/.browserslistrc +0 -13
  77. package/build/.eslintrc.json +0 -10
  78. package/build/banner.js +0 -14
  79. package/build/build-plugins.js +0 -92
  80. package/build/rollup.config.js +0 -46
  81. package/dist/css/cool-grid.css +0 -4390
  82. package/dist/css/cool-grid.css.map +0 -30
  83. package/dist/css/cool-grid.min.css +0 -7
  84. package/dist/css/cool-grid.min.css.map +0 -1
  85. package/dist/css/cool-reboot.css +0 -286
  86. package/dist/css/cool-reboot.css.map +0 -62
  87. package/dist/css/cool-reboot.min.css +0 -7
  88. package/dist/css/cool-reboot.min.css.map +0 -1
  89. package/html/index.html +0 -2703
  90. package/js/dist/collapse.js +0 -5535
  91. package/js/dist/collapse.js.map +0 -1
  92. package/js/dist/common.js +0 -21996
  93. package/js/dist/common.js.map +0 -1
  94. package/js/dist/cooldropdown.js +0 -467
  95. package/js/dist/cooldropdown.js.map +0 -1
  96. package/js/dist/coolpopover.js +0 -391
  97. package/js/dist/coolpopover.js.map +0 -1
  98. package/js/dist/coolsectiontabs.js +0 -256
  99. package/js/dist/coolsectiontabs.js.map +0 -1
  100. package/js/dist/coolselect.js +0 -796
  101. package/js/dist/coolselect.js.map +0 -1
  102. package/js/dist/cooltooltip.js +0 -360
  103. package/js/dist/cooltooltip.js.map +0 -1
  104. package/js/dist/coolui.js +0 -73
  105. package/js/dist/coolui.js.map +0 -1
  106. package/js/dist/dropdown.js +0 -27421
  107. package/js/dist/dropdown.js.map +0 -1
  108. package/js/dist/popover.js +0 -9472
  109. package/js/dist/popover.js.map +0 -1
  110. package/js/dist/sectiontabs.js +0 -4483
  111. package/js/dist/sectiontabs.js.map +0 -1
  112. package/js/dist/select.js +0 -37080
  113. package/js/dist/select.js.map +0 -1
  114. package/js/dist/tooltip.js +0 -8786
  115. package/js/dist/tooltip.js.map +0 -1
  116. package/js/index.esm.js +0 -21
  117. package/js/index.umd.js +0 -21
  118. package/js/src/abstract-ui-component.js +0 -81
  119. package/js/src/collapse.js +0 -286
  120. package/js/src/common.js +0 -296
  121. package/js/src/dialog.js +0 -579
  122. package/js/src/dropdown.js +0 -525
  123. package/js/src/popover.js +0 -632
  124. package/js/src/section-tabs.js +0 -215
  125. package/js/src/select.js +0 -1342
  126. package/js/src/toast.js +0 -581
  127. package/js/src/tooltip.js +0 -591
  128. package/js/src/util/animate-css.js +0 -22
  129. package/js/src/util/index.js +0 -122
  130. package/js/src/util/perfect-scrollbar.js +0 -1316
  131. package/less/alert.less +0 -345
  132. package/less/badge.less +0 -38
  133. package/less/bootstrap-noconflict.less +0 -23
  134. package/less/bootstrap.less +0 -23
  135. package/less/button-group.less +0 -153
  136. package/less/buttons.less +0 -287
  137. package/less/dialog-noconflict.less +0 -174
  138. package/less/dialog.less +0 -203
  139. package/less/dropdown.less +0 -209
  140. package/less/forms.less +0 -770
  141. package/less/images.less +0 -242
  142. package/less/input-group.less +0 -163
  143. package/less/list-group.less +0 -73
  144. package/less/mixins/aspect-ratio.less +0 -23
  145. package/less/mixins/border-radius.less +0 -24
  146. package/less/mixins/box-shadow.less +0 -4
  147. package/less/mixins/buttons.less +0 -17
  148. package/less/mixins/caret.less +0 -51
  149. package/less/mixins/clearfix.less +0 -10
  150. package/less/mixins/gradients.less +0 -34
  151. package/less/mixins/nav-divider.less +0 -7
  152. package/less/mixins/object-fit.less +0 -13
  153. package/less/mixins/reset-text.less +0 -16
  154. package/less/mixins.less +0 -11
  155. package/less/package.json +0 -11
  156. package/less/pagination.less +0 -69
  157. package/less/popover.less +0 -143
  158. package/less/project.sublime-workspace +0 -774
  159. package/less/reboot.less +0 -235
  160. package/less/section.less +0 -793
  161. package/less/select.less +0 -150
  162. package/less/tables.less +0 -737
  163. package/less/tabs.less +0 -162
  164. package/less/tooltip.less +0 -87
  165. package/less/type.less +0 -71
  166. package/less/utilities/align.less +0 -27
  167. package/less/utilities/animate.less +0 -3512
  168. package/less/utilities/background.less +0 -70
  169. package/less/utilities/borders.less +0 -16
  170. package/less/utilities/color.less +0 -70
  171. package/less/utilities/cursor.less +0 -8
  172. package/less/utilities/display.less +0 -38
  173. package/less/utilities/embed.less +0 -61
  174. package/less/utilities/flex.less +0 -76
  175. package/less/utilities/jquery-ui.less +0 -116
  176. package/less/utilities/lazyload.less +0 -29
  177. package/less/utilities/overflow.less +0 -11
  178. package/less/utilities/pace.less +0 -25
  179. package/less/utilities/placeholder.less +0 -60
  180. package/less/utilities/position.less +0 -42
  181. package/less/utilities/scrollbar.less +0 -152
  182. package/less/utilities/spacing.less +0 -197
  183. package/less/utilities/text.less +0 -68
  184. package/less/utilities/transform.less +0 -7
  185. package/less/utilities.less +0 -21
  186. package/less/variables.less +0 -343
  187. package/scss/_alert.scss +0 -102
  188. package/scss/_custom-forms.scss +0 -444
  189. package/scss/_functions.scss +0 -124
  190. package/scss/_images.scss +0 -361
  191. package/scss/_mixins.scss +0 -34
  192. package/scss/_type.scss +0 -129
  193. package/scss/_utilities.scss +0 -23
  194. package/scss/cool-grid.scss +0 -29
  195. package/scss/cool-reboot.scss +0 -11
  196. package/scss/mixins/_alert-variant.scss +0 -20
  197. package/scss/mixins/_aspect-ratio.scss +0 -29
  198. package/scss/mixins/_background-variant.scss +0 -25
  199. package/scss/mixins/_badge-variant.scss +0 -36
  200. package/scss/mixins/_breakpoints.scss +0 -102
  201. package/scss/mixins/_buttons.scss +0 -104
  202. package/scss/mixins/_caret.scss +0 -80
  203. package/scss/mixins/_clearfix.scss +0 -10
  204. package/scss/mixins/_float.scss +0 -14
  205. package/scss/mixins/_forms.scss +0 -67
  206. package/scss/mixins/_gradients.scss +0 -40
  207. package/scss/mixins/_grid-framework.scss +0 -72
  208. package/scss/mixins/_grid.scss +0 -60
  209. package/scss/mixins/_nav-divider.scss +0 -9
  210. package/scss/mixins/_notification-variant.scss +0 -7
  211. package/scss/mixins/_object-fit.scss +0 -16
  212. package/scss/mixins/_reset-text.scss +0 -19
  213. package/scss/mixins/_text-emphasis.scss +0 -21
  214. package/scss/mixins/_text-hide.scss +0 -10
  215. package/scss/mixins/_text-truncate.scss +0 -81
  216. package/scss/mixins/_visibility.scss +0 -7
  217. package/scss/project.sublime-workspace +0 -491
  218. package/scss/utilities/_animate.scss +0 -3512
  219. package/scss/utilities/_clearfix.scss +0 -6
  220. package/scss/utilities/_lazyload.scss +0 -31
  221. package/scss/utilities/_placeholder.scss +0 -77
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>