vcomply-design-system 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (180) hide show
  1. package/README.md +22 -0
  2. package/css-build/css/alignment/alignment.css +33 -0
  3. package/css-build/css/animate/animate-fade-in-left.css +28 -0
  4. package/css-build/css/animate/animate-fade-in-right.css +28 -0
  5. package/css-build/css/animate/animate-fade-in.css +20 -0
  6. package/css-build/css/animate/animate-fade-out.css +20 -0
  7. package/css-build/css/animate/animate-slide-down.css +26 -0
  8. package/css-build/css/animate/animate-slide-left.css +26 -0
  9. package/css-build/css/animate/animate-slide-right.css +26 -0
  10. package/css-build/css/animate/animate-slide-up.css +26 -0
  11. package/css-build/css/animate/animation.css +58 -0
  12. package/css-build/css/animate/index.css +258 -0
  13. package/css-build/css/avatars/avatars.css +83 -0
  14. package/css-build/css/button/button.css +237 -0
  15. package/css-build/css/color/color.css +152 -0
  16. package/css-build/css/dialog/dialog.css +421 -0
  17. package/css-build/css/display/display.css +24 -0
  18. package/css-build/css/forms/check-box.css +97 -0
  19. package/css-build/css/forms/forms.css +336 -0
  20. package/css-build/css/forms/index.css +862 -0
  21. package/css-build/css/forms/radio.css +116 -0
  22. package/css-build/css/forms/range-slider.css +203 -0
  23. package/css-build/css/forms/switch.css +124 -0
  24. package/css-build/css/header/header.css +344 -0
  25. package/css-build/css/icons/icons.css +53 -0
  26. package/css-build/css/index.css +548 -0
  27. package/css-build/css/index2.css +313 -0
  28. package/css-build/css/layout/layout.css +19 -0
  29. package/css-build/css/left-menu/main-menu.css +98 -0
  30. package/css-build/css/left-menu/sub-menu.css +323 -0
  31. package/css-build/css/list/list.css +3 -0
  32. package/css-build/css/loader/v-loader.css +183 -0
  33. package/css-build/css/margin/index.css +112 -0
  34. package/css-build/css/margin/margin-bottom.css +25 -0
  35. package/css-build/css/margin/margin-left.css +25 -0
  36. package/css-build/css/margin/margin-right.css +40 -0
  37. package/css-build/css/margin/margin-top.css +25 -0
  38. package/css-build/css/margin/margin.css +25 -0
  39. package/css-build/css/mixin/mixin.css +7 -0
  40. package/css-build/css/mixin.css +0 -0
  41. package/css-build/css/no-data/no-data.css +36 -0
  42. package/css-build/css/padding/index.css +97 -0
  43. package/css-build/css/padding/padding-bottom.css +25 -0
  44. package/css-build/css/padding/padding-left.css +25 -0
  45. package/css-build/css/padding/padding-right.css +25 -0
  46. package/css-build/css/padding/padding-top.css +25 -0
  47. package/css-build/css/padding/padding.css +25 -0
  48. package/css-build/css/pagination/pagination.css +131 -0
  49. package/css-build/css/panel/panel.css +76 -0
  50. package/css-build/css/popover/popover.css +237 -0
  51. package/css-build/css/quick-links/quick-links.css +84 -0
  52. package/css-build/css/smiley/smiley.css +353 -0
  53. package/css-build/css/snack-bar/snack-bar.css +77 -0
  54. package/css-build/css/table/table.css +191 -0
  55. package/css-build/css/table-card/table-card.css +242 -0
  56. package/css-build/css/text/text.css +157 -0
  57. package/css-build/css/user-panel/user-panel.css +115 -0
  58. package/css-build/css/vx.css +4254 -0
  59. package/css-build/css/width/width.css +43 -0
  60. package/css-build/fonts/icon.eot +0 -0
  61. package/css-build/fonts/icon.svg +583 -0
  62. package/css-build/fonts/icon.ttf +0 -0
  63. package/css-build/fonts/icon.woff +0 -0
  64. package/css-build/images/1.jpg +0 -0
  65. package/css-build/images/2.jpg +0 -0
  66. package/css-build/images/3.jpg +0 -0
  67. package/css-build/images/4.jpg +0 -0
  68. package/css-build/images/example/graph-sec-menu.JPG +0 -0
  69. package/css-build/images/example/layout.svg +388 -0
  70. package/css-build/images/example/menu-icon-m.svg +56 -0
  71. package/css-build/images/example/primary-menu.svg +66 -0
  72. package/css-build/images/example/vcomply-icon-m.svg +43 -0
  73. package/css-build/images/favicon.ico +0 -0
  74. package/css-build/images/grid.JPG +0 -0
  75. package/css-build/images/no-data.svg +268 -0
  76. package/css-build/images/open-arrow-left.svg +3 -0
  77. package/css-build/images/plus-create-icon.svg +23 -0
  78. package/css-build/images/plus-incident-icon.svg +44 -0
  79. package/css-build/images/plus-risk-icon.svg +45 -0
  80. package/css-build/images/v-icon.svg +1 -0
  81. package/css-build/index.html +188 -0
  82. package/css-build/js/table.js +72 -0
  83. package/css-build/js/toolbar.js +48 -0
  84. package/css-build/less/alignment/alignment.less +43 -0
  85. package/css-build/less/animate/animate-fade-in-left.less +32 -0
  86. package/css-build/less/animate/animate-fade-in-right.less +32 -0
  87. package/css-build/less/animate/animate-fade-in.less +24 -0
  88. package/css-build/less/animate/animate-fade-out.less +24 -0
  89. package/css-build/less/animate/animate-slide-down.less +30 -0
  90. package/css-build/less/animate/animate-slide-left.less +30 -0
  91. package/css-build/less/animate/animate-slide-right.less +30 -0
  92. package/css-build/less/animate/animate-slide-up.less +30 -0
  93. package/css-build/less/animate/animation.less +58 -0
  94. package/css-build/less/animate/index.less +9 -0
  95. package/css-build/less/avatars/avatars.less +96 -0
  96. package/css-build/less/button/button.less +201 -0
  97. package/css-build/less/color/color.less +209 -0
  98. package/css-build/less/dialog/dialog.less +502 -0
  99. package/css-build/less/display/display.less +31 -0
  100. package/css-build/less/forms/check-box.less +117 -0
  101. package/css-build/less/forms/forms.less +386 -0
  102. package/css-build/less/forms/index.less +5 -0
  103. package/css-build/less/forms/radio.less +139 -0
  104. package/css-build/less/forms/range-slider.less +69 -0
  105. package/css-build/less/forms/switch.less +166 -0
  106. package/css-build/less/header/header.less +236 -0
  107. package/css-build/less/icons/icons.less +50 -0
  108. package/css-build/less/index.less +74 -0
  109. package/css-build/less/index2.less +396 -0
  110. package/css-build/less/layout/layout.less +16 -0
  111. package/css-build/less/left-menu/main-menu.less +123 -0
  112. package/css-build/less/left-menu/sub-menu.less +326 -0
  113. package/css-build/less/list/list.less +5 -0
  114. package/css-build/less/loader/v-loader.less +219 -0
  115. package/css-build/less/margin/index.less +5 -0
  116. package/css-build/less/margin/margin-bottom.less +25 -0
  117. package/css-build/less/margin/margin-left.less +25 -0
  118. package/css-build/less/margin/margin-right.less +40 -0
  119. package/css-build/less/margin/margin-top.less +25 -0
  120. package/css-build/less/margin/margin.less +25 -0
  121. package/css-build/less/mixin/mixin.less +27 -0
  122. package/css-build/less/mixin.less +1 -0
  123. package/css-build/less/no-data/no-data.less +52 -0
  124. package/css-build/less/padding/index.less +5 -0
  125. package/css-build/less/padding/padding-bottom.less +25 -0
  126. package/css-build/less/padding/padding-left.less +20 -0
  127. package/css-build/less/padding/padding-right.less +20 -0
  128. package/css-build/less/padding/padding-top.less +25 -0
  129. package/css-build/less/padding/padding.less +25 -0
  130. package/css-build/less/pagination/pagination.less +144 -0
  131. package/css-build/less/panel/panel.less +116 -0
  132. package/css-build/less/popover/popover.less +273 -0
  133. package/css-build/less/quick-links/quick-links.less +90 -0
  134. package/css-build/less/smiley/smiley.less +422 -0
  135. package/css-build/less/snack-bar/snack-bar.less +86 -0
  136. package/css-build/less/table/table.less +293 -0
  137. package/css-build/less/table-card/table-card.less +116 -0
  138. package/css-build/less/text/text.less +179 -0
  139. package/css-build/less/user-panel/user-panel.less +123 -0
  140. package/css-build/less/vx.less +28 -0
  141. package/css-build/less/width/width.less +37 -0
  142. package/css-build/less.js +11 -0
  143. package/css-build/pages/alignment.html +102 -0
  144. package/css-build/pages/avatars.html +555 -0
  145. package/css-build/pages/button.html +993 -0
  146. package/css-build/pages/checkbox.html +560 -0
  147. package/css-build/pages/color-palette.html +358 -0
  148. package/css-build/pages/common-layout.html +125 -0
  149. package/css-build/pages/dialog.html +738 -0
  150. package/css-build/pages/display.html +67 -0
  151. package/css-build/pages/font-family.html +281 -0
  152. package/css-build/pages/header.html +590 -0
  153. package/css-build/pages/icons.html +3715 -0
  154. package/css-build/pages/mein-menu-active.html +67 -0
  155. package/css-build/pages/mein-menu-sub-menu.html +110 -0
  156. package/css-build/pages/mein-menu-tooltip.html +70 -0
  157. package/css-build/pages/mein-menu.html +321 -0
  158. package/css-build/pages/no-data.html +277 -0
  159. package/css-build/pages/panel.html +423 -0
  160. package/css-build/pages/popover.html +666 -0
  161. package/css-build/pages/radio.html +418 -0
  162. package/css-build/pages/range-slider.html +279 -0
  163. package/css-build/pages/select-box.html +933 -0
  164. package/css-build/pages/smiley.html +355 -0
  165. package/css-build/pages/sub-menu.html +396 -0
  166. package/css-build/pages/switch.html +349 -0
  167. package/css-build/pages/tab-menu.html +301 -0
  168. package/css-build/pages/table-card.html +510 -0
  169. package/css-build/pages/table.html +2218 -0
  170. package/css-build/pages/text-box.html +325 -0
  171. package/css-build/pages/text.html +106 -0
  172. package/css-build/pages/v-loader.html +163 -0
  173. package/css-build/sw/pwabuilder-sw-register.js +14 -0
  174. package/css-build/sw/pwabuilder-sw.js +47 -0
  175. package/css-build/utility/code-prev.css +19 -0
  176. package/css-build/utility/prism.css +130 -0
  177. package/css-build/utility/prism.js +8 -0
  178. package/index.js +66 -0
  179. package/nodemon.json +4 -0
  180. package/package.json +24 -0
package/css-build/pages/select-box.html ADDED
@@ -0,0 +1,933 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com">
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
10
+ rel="stylesheet">
11
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
12
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/index.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-bottom.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
24
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-top.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/panel/panel.less" />
29
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
30
+ <link rel="stylesheet/less" type="text/css" href="../less/forms/forms.less" />
31
+ <link rel="stylesheet/less" type="text/css" href="../less/forms/switch.less" />
32
+ <link rel="stylesheet/less" type="text/css" href="../less/forms/radio.less" />
33
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
34
+ </head>
35
+
36
+ <body>
37
+ <section>
38
+ <div class="head vx-mb-5">
39
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Select box</h2>
40
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4"> A select box is a form element that surfaces a drop down list with a set of choices and displays the users selection when complete. Usage Use a select box for a list of items that a user does not need to see all the time. A common strategy is to combine an input field with a select box so that a user can enter a value and qualify it with a menu item. For example, the user might enter a number in an input field and select the units from the select box. </p>
41
+ </div>
42
+ <div class="vx-d-flex vx-align-start">
43
+ <div class="page-container">
44
+ <div class="container" id="defaultSelectLayout">
45
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Default Select box</h3>
46
+
47
+ <div class="preview-block">
48
+ <div class="action-buttons">
49
+ <button class="vx-btn md transparent">
50
+ <i class="icons">&#xe9b6;</i> Copy Code
51
+ </button>
52
+ <button class="vx-btn md transparent" data-tab="defaultSelect">
53
+ <i class="icons rotate">&#xea95;</i> View Code
54
+ </button>
55
+ </div>
56
+ <div class="preview-container vx-bg-white">
57
+ <div class="vx-form-group vx-pl-5 vx-pr-5">
58
+ <label class="vx-control-panel">Select 1</label>
59
+ <div class="select">
60
+ <select name="" id="">
61
+ <option value="Option 1">Option 1</option>
62
+ <option value="Option 2">Option 2</option>
63
+ <option value="Option 3">Option 3</option>
64
+ <option value="Option 4">Option 4</option>
65
+ <option value="Option 5">Option 5</option>
66
+ <option value="Option length">Option that has too long of a value to fit</option>
67
+ </select>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ <div class="code-view vx-mb-5" id="defaultSelect">
73
+ <div class="code-navigation">
74
+ <button class="active">HTML</button>
75
+ <button>CSS</button>
76
+ </div>
77
+ <code class="language-markup">
78
+ <script type="prism-html-markup">
79
+ <div class="vx-form-group">
80
+ <label class="vx-control-panel">Select 1</label>
81
+ <div class="select">
82
+ <select name="" id="">
83
+ <option value="Option 1">Option 1</option>
84
+ <option value="Option 2">Option 2</option>
85
+ </select>
86
+ </div>
87
+ </div>
88
+ </script>
89
+ </code>
90
+ </div>
91
+ </div>
92
+ <div class="container" id="smallSelectLayout">
93
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Small Select box</h3>
94
+
95
+ <div class="preview-block">
96
+ <div class="action-buttons">
97
+ <button class="vx-btn md transparent">
98
+ <i class="icons">&#xe9b6;</i> Copy Code
99
+ </button>
100
+ <button class="vx-btn md transparent" data-tab="smallSelect">
101
+ <i class="icons rotate">&#xea95;</i> View Code
102
+ </button>
103
+ </div>
104
+ <div class="preview-container vx-bg-white">
105
+ <div class="vx-form-group sm vx-pl-5 vx-pr-5">
106
+ <label class="vx-control-panel">Select 1</label>
107
+ <div class="select">
108
+ <select name="" id="">
109
+ <option value="Option 1">Option 1</option>
110
+ <option value="Option 2">Option 2</option>
111
+ <option value="Option 3">Option 3</option>
112
+ <option value="Option 4">Option 4</option>
113
+ <option value="Option 5">Option 5</option>
114
+ <option value="Option length">Option that has too long of a value to fit</option>
115
+ </select>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ <div class="code-view vx-mb-5" id="smallSelect">
121
+ <div class="code-navigation">
122
+ <button class="active">HTML</button>
123
+ <button>CSS</button>
124
+ </div>
125
+ <code class="language-markup">
126
+ <script type="prism-html-markup">
127
+ <div class="vx-form-group sm">
128
+ <label class="vx-control-panel">Select 1</label>
129
+ <div class="select">
130
+ <select name="" id="">
131
+ <option value="Option 1">Option 1</option>
132
+ <option value="Option 2">Option 2</option>
133
+ </select>
134
+ </div>
135
+ </div>
136
+ </script>
137
+ </code>
138
+ </div>
139
+ </div>
140
+ <div class="container" id="largeSelectLayout">
141
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Large Select box</h3>
142
+
143
+ <div class="preview-block">
144
+ <div class="action-buttons">
145
+ <button class="vx-btn md transparent">
146
+ <i class="icons">&#xe9b6;</i> Copy Code
147
+ </button>
148
+ <button class="vx-btn md transparent" data-tab="largeSelect">
149
+ <i class="icons rotate">&#xea95;</i> View Code
150
+ </button>
151
+ </div>
152
+ <div class="preview-container vx-bg-white">
153
+ <div class="vx-form-group lg vx-pl-5 vx-pr-5">
154
+ <label class="vx-control-panel">Select 1</label>
155
+ <div class="select">
156
+ <select name="" id="">
157
+ <option value="Option 1">Option 1</option>
158
+ <option value="Option 2">Option 2</option>
159
+ <option value="Option 3">Option 3</option>
160
+ <option value="Option 4">Option 4</option>
161
+ <option value="Option 5">Option 5</option>
162
+ <option value="Option length">Option that has too long of a value to fit</option>
163
+ </select>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ <div class="code-view vx-mb-5" id="largeSelect">
169
+ <div class="code-navigation">
170
+ <button class="active">HTML</button>
171
+ <button>CSS</button>
172
+ </div>
173
+ <code class="language-markup">
174
+ <script type="prism-html-markup">
175
+ <div class="vx-form-group">
176
+ <label class="vx-control-panel">Select 1</label>
177
+ <div class="select">
178
+ <select name="" id="">
179
+ <option value="Option 1">Option 1</option>
180
+ <option value="Option 2">Option 2</option>
181
+ </select>
182
+ </div>
183
+ </div>
184
+ </script>
185
+ </code>
186
+ </div>
187
+ </div>
188
+ <div class="container" id="disabledSelectLayout">
189
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Disabled Select box</h3>
190
+
191
+ <div class="preview-block">
192
+ <div class="action-buttons">
193
+ <button class="vx-btn md transparent">
194
+ <i class="icons">&#xe9b6;</i> Copy Code
195
+ </button>
196
+ <button class="vx-btn md transparent" data-tab="disabledSelect">
197
+ <i class="icons rotate">&#xea95;</i> View Code
198
+ </button>
199
+ </div>
200
+ <div class="preview-container vx-bg-white">
201
+ <div class="vx-form-group vx-pl-5 vx-pr-5">
202
+ <label class="vx-control-panel">Select 1</label>
203
+ <div class="select">
204
+ <select name="" id="" disabled>
205
+ <option value="Option 1">Option 1</option>
206
+ <option value="Option 2">Option 2</option>
207
+ <option value="Option 3">Option 3</option>
208
+ <option value="Option 4">Option 4</option>
209
+ <option value="Option 5">Option 5</option>
210
+ <option value="Option length">Option that has too long of a value to fit</option>
211
+ </select>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ <div class="code-view vx-mb-5" id="disabledSelect">
217
+ <div class="code-navigation">
218
+ <button class="active">HTML</button>
219
+ <button>CSS</button>
220
+ </div>
221
+ <code class="language-markup">
222
+ <script type="prism-html-markup">
223
+ <div class="vx-form-group">
224
+ <label class="vx-control-panel">Select 1</label>
225
+ <div class="select">
226
+ <select name="" id="" disabled>
227
+ <option value="Option 1">Option 1</option>
228
+ <option value="Option 2">Option 2</option>
229
+ </select>
230
+ </div>
231
+ </div>
232
+ </script>
233
+ </code>
234
+ </div>
235
+ </div>
236
+ <div class="container" id="errorSelectLayout">
237
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Select box with error</h3>
238
+
239
+ <div class="preview-block">
240
+ <div class="action-buttons">
241
+ <button class="vx-btn md transparent">
242
+ <i class="icons">&#xe9b6;</i> Copy Code
243
+ </button>
244
+ <button class="vx-btn md transparent" data-tab="errorSelect">
245
+ <i class="icons rotate">&#xea95;</i> View Code
246
+ </button>
247
+ </div>
248
+ <div class="preview-container vx-bg-white">
249
+ <div class="vx-form-group vx-pl-5 vx-pr-5">
250
+ <label class="vx-control-panel">Select 1</label>
251
+ <div class="select">
252
+ <select name="" id="" class="error">
253
+ <option value="Option 1">Option 1</option>
254
+ <option value="Option 2">Option 2</option>
255
+ <option value="Option 3">Option 3</option>
256
+ <option value="Option 4">Option 4</option>
257
+ <option value="Option 5">Option 5</option>
258
+ <option value="Option length">Option that has too long of a value to fit</option>
259
+ </select>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ <div class="code-view vx-mb-5" id="errorSelect">
265
+ <div class="code-navigation">
266
+ <button class="active">HTML</button>
267
+ <button>CSS</button>
268
+ </div>
269
+ <code class="language-markup">
270
+ <script type="prism-html-markup">
271
+ <div class="vx-form-group">
272
+ <label class="vx-control-panel">Select 1</label>
273
+ <div class="select">
274
+ <select name="" id="" class="error">
275
+ <option value="Option 1">Option 1</option>
276
+ <option value="Option 2">Option 2</option>
277
+ </select>
278
+ </div>
279
+ </div>
280
+ </script>
281
+ </code>
282
+ </div>
283
+ </div>
284
+ <div class="container" id="customelectLayout">
285
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Custom Select box</h3>
286
+
287
+ <div class="preview-block">
288
+ <div class="action-buttons">
289
+ <button class="vx-btn md transparent">
290
+ <i class="icons">&#xe9b6;</i> Copy Code
291
+ </button>
292
+ <button class="vx-btn md transparent" data-tab="customSelect">
293
+ <i class="icons rotate">&#xea95;</i> View Code
294
+ </button>
295
+ </div>
296
+ <div class="preview-container vx-bg-white visible">
297
+ <div class="vx-form-group vx-p-5">
298
+ <label class="vx-control-panel">Select 1</label>
299
+ <div class="select">
300
+ <input type="text" readonly placeholder="Please select a option" class="custom-select">
301
+ <div class="select-list" style="display: none;">
302
+ <div class="vx-radio-group vx-d-block">
303
+ <label class="vx-radio-item">
304
+ <input type="radio" name="radio">
305
+ <span class="radio">
306
+ <span class="inner"></span>
307
+ </span>
308
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
309
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
310
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
311
+ </svg>
312
+ <span class="value">Option 1</span>
313
+ </label>
314
+ <label class="vx-radio-item">
315
+ <input type="radio" name="radio">
316
+ <span class="radio">
317
+ <span class="inner"></span>
318
+ </span>
319
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
320
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
321
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
322
+ </svg>
323
+ <span class="value">Option 2</span>
324
+ </label>
325
+ <label class="vx-radio-item">
326
+ <input type="radio" name="radio">
327
+ <span class="radio">
328
+ <span class="inner"></span>
329
+ </span>
330
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
331
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
332
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
333
+ </svg>
334
+ <span class="value">Option 3</span>
335
+ </label>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ <div class="code-view vx-mb-5" id="customSelect">
343
+ <div class="code-navigation">
344
+ <button class="active">HTML</button>
345
+ <button>CSS</button>
346
+ </div>
347
+ <code class="language-markup">
348
+ <script type="prism-html-markup">
349
+ <div class="vx-form-group">
350
+ <label class="vx-control-panel">Select 1</label>
351
+ <div class="select">
352
+ <input type="text" readonly placeholder="Please select a option" class="custom-select">
353
+ <div class="select-list" style="display: none;">
354
+ <div class="vx-radio-group vx-d-block">
355
+ <label class="vx-radio-item">
356
+ <input type="radio" name="radio">
357
+ <span class="radio">
358
+ <span class="inner"></span>
359
+ </span>
360
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
361
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
362
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
363
+ </svg>
364
+ <span class="value">Option 1</span>
365
+ </label>
366
+ <label class="vx-radio-item">
367
+ <input type="radio" name="radio">
368
+ <span class="radio">
369
+ <span class="inner"></span>
370
+ </span>
371
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
372
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
373
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
374
+ </svg>
375
+ <span class="value">Option 2</span>
376
+ </label>
377
+ <label class="vx-radio-item">
378
+ <input type="radio" name="radio">
379
+ <span class="radio">
380
+ <span class="inner"></span>
381
+ </span>
382
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
383
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
384
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
385
+ </svg>
386
+ <span class="value">Option 3</span>
387
+ </label>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </script>
393
+ </code>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ <div class="page-quick-menu">
398
+ <div class="vx-sub-menu vx-p-0">
399
+ <h3 class="vx-title vx-lh-12 vx-tt-uppercase vx-fw-500 vx-m-0 vx-label-txt vx-d-flex vx-align-center vx-pr-3 vx-pl-3">Contents</h3>
400
+ <ul class="vx-p-0">
401
+ <li>
402
+ <a href="#defaultSelectLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Default Select box</a>
403
+ </li>
404
+ <li>
405
+ <a href="#smallSelectLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Small Select box</a>
406
+ </li>
407
+ <li>
408
+ <a href="#largeSelectLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Large Select box</a>
409
+ </li>
410
+ <li>
411
+ <a href="#disabledSelectLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Disabled Select box</a>
412
+ </li>
413
+ <li>
414
+ <a href="#disabledSelectLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Select box with error</a>
415
+ </li>
416
+ <li>
417
+ <a href="#customelectLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Custom Select box</a>
418
+ </li>
419
+ </ul>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </section>
424
+
425
+ <!-- <section>
426
+ <div class="container">
427
+ <div class="head vx-mb-5">
428
+ <h2 class="title vx-label-txt vx-m-0">File upload box</h2>
429
+ </div>
430
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">File box default</h3>
431
+ <div class="vx-form-group vx-pl-5">
432
+ <label class="vx-control-panel">Upload 1</label>
433
+ <input type="file" placeholder="Please Enter Form 1 value">
434
+ </div>
435
+ <div class="vx-d-block vx-w-100">
436
+ <div class="column">
437
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
438
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
439
+ The file input uses the native HTML File Input.
440
+ Usage
441
+ Use a file input field when the user needs to choose one or more files from their device storage.
442
+ </p>
443
+ </div>
444
+
445
+ <div class="column">
446
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be used</h3>
447
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
448
+ <input type="text" id="form5" class="code" value='<div class="vx-form-group">
449
+ <label class="vx-control-panel">Upload 1</label>
450
+ <input type="file" placeholder="Please Enter Form 1 value">
451
+ </div>'>
452
+ <button onclick="copyToClipboard5()" class="copy"><i class="icons">&#xe9b6;</i> Copy to clipboard</button>
453
+ <code class="language-markup">
454
+ <script type="prism-html-markup">
455
+ <div class="vx-form-group">
456
+ <label class="vx-control-panel">Upload 1</label>
457
+ <input type="file" placeholder="Please Enter Form 1 value">
458
+ </div>
459
+ </script>
460
+ </code>
461
+ </p>
462
+ </div>
463
+ </div>
464
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">File box small</h3>
465
+ <div class="vx-form-group sm vx-pl-5">
466
+ <label class="vx-control-panel">Upload 2</label>
467
+ <input type="file" placeholder="Please Enter Form 2 value">
468
+ </div>
469
+ <div class="vx-d-block vx-w-100">
470
+ <div class="column">
471
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
472
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
473
+ Add a text to describe the box size, space, animation color about the design.
474
+ </p>
475
+ </div>
476
+
477
+ <div class="column">
478
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be used</h3>
479
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
480
+ <input type="text" id="form6" class="code" value='<div class="vx-form-group sm">
481
+ <label class="vx-control-panel">Upload 2</label>
482
+ <input type="file" placeholder="Please Enter Form 2 value">
483
+ </div>'>
484
+ <button onclick="copyToClipboard6()" class="copy"><i class="icons">&#xe9b6;</i> Copy to clipboard</button>
485
+ <code class="language-markup">
486
+ <script type="prism-html-markup">
487
+ <div class="vx-form-group sm">
488
+ <label class="vx-control-panel">Upload 2</label>
489
+ <input type="file" placeholder="Please Enter Form 2 value">
490
+ </div>
491
+ </script>
492
+ </code>
493
+ </p>
494
+ </div>
495
+ </div>
496
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">File box large</h3>
497
+ <div class="vx-form-group lg vx-pl-5">
498
+ <label class="vx-control-panel">Upload 3</label>
499
+ <input type="file" placeholder="Please Enter Form 3 value">
500
+ </div>
501
+ <div class="vx-d-block vx-w-100">
502
+ <div class="column">
503
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
504
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
505
+ Add a text to describe the box size, space, animation color about the design.
506
+ </p>
507
+ </div>
508
+
509
+ <div class="column">
510
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be used</h3>
511
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
512
+ <input type="text" id="form7" class="code" value='<div class="vx-form-group lg">
513
+ <label class="vx-control-panel">Upload 3</label>
514
+ <input type="file" placeholder="Please Enter Form 3 value">
515
+ </div>'>
516
+ <button onclick="copyToClipboard7()" class="copy"><i class="icons">&#xe9b6;</i> Copy to clipboard</button>
517
+ <code class="language-markup">
518
+ <script type="prism-html-markup">
519
+ <div class="vx-form-group lg">
520
+ <label class="vx-control-panel">Upload 3</label>
521
+ <input type="file" placeholder="Please Enter Form 3 value">
522
+ </div>
523
+ </script>
524
+ </code>
525
+ </p>
526
+ </div>
527
+ </div>
528
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">File box default error</h3>
529
+ <div class="vx-form-group vx-pl-5">
530
+ <label class="vx-control-panel">Upload with error</label>
531
+ <input type="file" class="error" placeholder="Please Enter text box error value">
532
+ <span class="vx-txt-error">Select a file for this input box.</span>
533
+ </div>
534
+ <div class="vx-d-block vx-w-100">
535
+ <div class="column">
536
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
537
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
538
+ Add a text to describe the box size, space, animation color about the design.
539
+ </p>
540
+ </div>
541
+
542
+ <div class="column">
543
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be used</h3>
544
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
545
+ <input type="text" id="form8" class="code" value='<div class="vx-form-group">
546
+ <label class="vx-control-panel">Upload with error</label>
547
+ <input type="file" class="error" placeholder="Please Enter text box error value">
548
+ <span class="vx-txt-error">Select a file for this input box.</span>
549
+ </div>'>
550
+ <button onclick="copyToClipboard8()" class="copy"><i class="icons">&#xe9b6;</i> Copy to clipboard</button>
551
+ <code class="language-markup">
552
+ <script type="prism-html-markup">
553
+ <div class="vx-form-group">
554
+ <label class="vx-control-panel">Upload with error</label>
555
+ <input type="file" class="error" placeholder="Please Enter text box error value">
556
+ <span class="vx-txt-error">Select a file for this input box.</span>
557
+ </div>
558
+ </script>
559
+ </code>
560
+ </p>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </section>
565
+
566
+
567
+ <section>
568
+ <div class="container">
569
+ <div class="head vx-mb-5">
570
+ <h2 class="title vx-label-txt vx-m-0">Select box</h2>
571
+ </div>
572
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Select box default</h3>
573
+ <div class="vx-form-group vx-pl-5">
574
+ <label class="vx-control-panel">Select 1</label>
575
+ <div class="select">
576
+ <select name="" id="">
577
+ <option value="Option 1">Option 1</option>
578
+ <option value="Option 2">Option 2</option>
579
+ <option value="Option 3">Option 3</option>
580
+ <option value="Option 4">Option 4</option>
581
+ <option value="Option 5">Option 5</option>
582
+ <option value="Option length">Option that has too long of a value to fit</option>
583
+ </select>
584
+ </div>
585
+ </div>
586
+ <div class="vx-d-block vx-w-100">
587
+ <div class="column">
588
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
589
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
590
+ A select box is a form element that surfaces a drop down list with a set of choices and displays the users selection when complete.
591
+
592
+ Usage
593
+
594
+ Use a select box for a list of items that a user does not need to see all the time.
595
+
596
+ A common strategy is to combine an input field with a select box so that a user can enter a value and qualify it with a menu item. For example, the user might enter a number in an input field and select the units from the select box.
597
+ </p>
598
+ </div>
599
+
600
+ <div class="column">
601
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be used</h3>
602
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
603
+ <input type="text" id="form9" class="code" value='<div class="vx-form-group">
604
+ <label class="vx-control-panel">Select 1</label>
605
+ <div class="select">
606
+ <select name="" id="">
607
+ <option value="Option 1">Option 1</option>
608
+ </select>
609
+ </div>
610
+ </div>'>
611
+ <button onclick="copyToClipboard9()" class="copy"><i class="icons">&#xe9b6;</i> Copy to clipboard</button>
612
+ <code class="language-markup">
613
+ <script type="prism-html-markup">
614
+ <div class="vx-form-group">
615
+ <label class="vx-control-panel">Select 1</label>
616
+ <div class="select">
617
+ <select name="" id="">
618
+ <option value="Option 1">Option 1</option>
619
+ </select>
620
+ </div>
621
+ </div>
622
+ </script>
623
+ </code>
624
+ </p>
625
+ </div>
626
+ </div>
627
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Select box small</h3>
628
+ <div class="vx-form-group sm vx-pl-5">
629
+ <label class="vx-control-panel">Select 2</label>
630
+ <div class="select">
631
+ <select name="" id="">
632
+ <option value="Option 1">Option 1</option>
633
+ <option value="Option 2">Option 2</option>
634
+ <option value="Option 3">Option 3</option>
635
+ <option value="Option 4">Option 4</option>
636
+ <option value="Option 5">Option 5</option>
637
+ <option value="Option length">Option that has too long of a value to fit</option>
638
+ </select>
639
+ </div>
640
+ </div>
641
+ <div class="vx-d-block vx-w-100">
642
+ <div class="column">
643
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
644
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
645
+ Add a text to describe the box size, space, animation color about the design.
646
+ </p>
647
+ </div>
648
+ <div class="column">
649
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be used</h3>
650
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
651
+ <input type="text" id="form10" class="code" value='<div class="vx-form-group sm">
652
+ <label class="vx-control-panel">Select 2</label>
653
+ <div class="select">
654
+ <select name="" id="">
655
+ <option value="Option 1">Option 1</option>
656
+ </select>
657
+ </div>
658
+ </div>'>
659
+ <button onclick="copyToClipboard10()" class="copy"><i class="icons">&#xe9b6;</i> Copy to clipboard</button>
660
+ <code class="language-markup">
661
+ <script type="prism-html-markup">
662
+ <div class="vx-form-group sm">
663
+ <label class="vx-control-panel">Select 2</label>
664
+ <div class="select">
665
+ <select name="" id="">
666
+ <option value="Option 1">Option 1</option>
667
+ </select>
668
+ </div>
669
+ </div>
670
+ </script>
671
+ </code>
672
+ </p>
673
+ </div>
674
+ </div>
675
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Select box large</h3>
676
+ <div class="vx-form-group lg vx-pl-5">
677
+ <label class="vx-control-panel">Select 3</label>
678
+ <div class="select">
679
+ <select name="" id="">
680
+ <option value="Option 1">Option 1</option>
681
+ <option value="Option 2">Option 2</option>
682
+ <option value="Option 3">Option 3</option>
683
+ <option value="Option 4">Option 4</option>
684
+ <option value="Option 5">Option 5</option>
685
+ <option value="Option length">Option that has too long of a value to fit</option>
686
+ </select>
687
+ </div>
688
+ </div>
689
+ <div class="vx-d-block vx-w-100">
690
+ <div class="column">
691
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
692
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
693
+ Add a text to describe the box size, space, animation color about the design.
694
+ </p>
695
+ </div>
696
+ <div class="column">
697
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be used</h3>
698
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
699
+ <input type="text" id="form11" class="code" value='<div class="vx-form-group lg">
700
+ <label class="vx-control-panel">Select 3</label>
701
+ <div class="select">
702
+ <select name="" id="">
703
+ <option value="Option 1">Option 1</option>
704
+ </select>
705
+ </div>
706
+ </div>'>
707
+ <button onclick="copyToClipboard11()" class="copy"><i class="icons">&#xe9b6;</i> Copy to clipboard</button>
708
+ <code class="language-markup">
709
+ <script type="prism-html-markup">
710
+ <div class="vx-form-group lg">
711
+ <label class="vx-control-panel">Select 3</label>
712
+ <div class="select">
713
+ <select name="" id="">
714
+ <option value="Option 1">Option 1</option>
715
+ </select>
716
+ </div>
717
+ </div>
718
+ </script>
719
+ </code>
720
+ </p>
721
+ </div>
722
+ </div>
723
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Select box default error</h3>
724
+ <div class="vx-form-group vx-pl-5">
725
+ <label class="vx-control-panel">Text box error</label>
726
+ <div class="select">
727
+ <select name="" id="" class="error">
728
+ <option value="Option 1">Option 1</option>
729
+ <option value="Option 2">Option 2</option>
730
+ <option value="Option 3">Option 3</option>
731
+ <option value="Option 4">Option 4</option>
732
+ <option value="Option 5">Option 5</option>
733
+ <option value="Option length">Option that has too long of a value to fit</option>
734
+ </select>
735
+ </div>
736
+ <span class="vx-txt-error">Select a option for this select box.</span>
737
+ </div>
738
+ <div class="vx-d-block vx-w-100">
739
+ <div class="column">
740
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
741
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
742
+ Add a text to describe the box size, space, animation color about the design.
743
+ </p>
744
+ </div>
745
+ <div class="column">
746
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be used</h3>
747
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
748
+ <input type="text" id="form12" class="code" value='<div class="vx-form-group">
749
+ <label class="vx-control-panel">Text box error</label>
750
+ <div class="select">
751
+ <select name="" id="" class="error">
752
+ <option value="Option 1">Option 1</option>
753
+ </select>
754
+ </div>
755
+ </div>'>
756
+ <button onclick="copyToClipboard12()" class="copy"><i class="icons">&#xe9b6;</i> Copy to clipboard</button>
757
+ <code class="language-markup">
758
+ <script type="prism-html-markup">
759
+ <div class="vx-form-group">
760
+ <label class="vx-control-panel">Text box error</label>
761
+ <div class="select">
762
+ <select name="" id="" class="error">
763
+ <option value="Option 1">Option 1</option>
764
+ </select>
765
+ </div>
766
+ </div>
767
+ </script>
768
+ </code>
769
+ </p>
770
+ </div>
771
+ </div>
772
+ </div>
773
+ </section> -->
774
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
775
+ <script async src="../less.js"></script>
776
+ <script src="../utility/prism.js"></script>
777
+
778
+ <script>
779
+ function copyToClipboard1() {
780
+ var copyText = document.getElementById("form1");
781
+ copyText.select();
782
+ copyText.setSelectionRange(0, 999999999999999999999)
783
+ document.execCommand('copy');
784
+ alert("Copied the text");
785
+ }
786
+ function copyToClipboard2() {
787
+ var copyText = document.getElementById("form2");
788
+ copyText.select();
789
+ copyText.setSelectionRange(0, 999999999999999999999)
790
+ document.execCommand("copy");
791
+ alert("Copied the text");
792
+ }
793
+ function copyToClipboard3() {
794
+ var copyText = document.getElementById("form3");
795
+ copyText.select();
796
+ copyText.setSelectionRange(0, 999999999999999999999)
797
+ document.execCommand("copy");
798
+ alert("Copied the text");
799
+ }
800
+ function copyToClipboard4() {
801
+ var copyText = document.getElementById("form4");
802
+ copyText.select();
803
+ copyText.setSelectionRange(0, 999999999999999999999)
804
+ document.execCommand("copy");
805
+ alert("Copied the text");
806
+ }
807
+ function copyToClipboard5() {
808
+ var copyText = document.getElementById("form5");
809
+ copyText.select();
810
+ copyText.setSelectionRange(0, 999999999999999999999)
811
+ document.execCommand("copy");
812
+ alert("Copied the text");
813
+ }
814
+ function copyToClipboard6() {
815
+ var copyText = document.getElementById("form6");
816
+ copyText.select();
817
+ copyText.setSelectionRange(0, 999999999999999999999)
818
+ document.execCommand('copy');
819
+ alert("Copied the text");
820
+ }
821
+ function copyToClipboard7() {
822
+ var copyText = document.getElementById("form7");
823
+ copyText.select();
824
+ copyText.setSelectionRange(0, 999999999999999999999)
825
+ document.execCommand("copy");
826
+ alert("Copied the text");
827
+ }
828
+ function copyToClipboard8() {
829
+ var copyText = document.getElementById("form8");
830
+ copyText.select();
831
+ copyText.setSelectionRange(0, 999999999999999999999)
832
+ document.execCommand("copy");
833
+ alert("Copied the text");
834
+ }
835
+ function copyToClipboard9() {
836
+ var copyText = document.getElementById("form9");
837
+ copyText.select();
838
+ copyText.setSelectionRange(0, 999999999999999999999)
839
+ document.execCommand("copy");
840
+ alert("Copied the text");
841
+ }
842
+ function copyToClipboard9() {
843
+ var copyText = document.getElementById("form10");
844
+ copyText.select();
845
+ copyText.setSelectionRange(0, 999999999999999999999)
846
+ document.execCommand("copy");
847
+ alert("Copied the text");
848
+ }
849
+ function copyToClipboard9() {
850
+ var copyText = document.getElementById("form11");
851
+ copyText.select();
852
+ copyText.setSelectionRange(0, 999999999999999999999)
853
+ document.execCommand("copy");
854
+ alert("Copied the text");
855
+ }
856
+ function copyToClipboard9() {
857
+ var copyText = document.getElementById("form12");
858
+ copyText.select();
859
+ copyText.setSelectionRange(0, 999999999999999999999)
860
+ document.execCommand("copy");
861
+ alert("Copied the text");
862
+ }
863
+ function copyToClipboard9() {
864
+ var copyText = document.getElementById("form13");
865
+ copyText.select();
866
+ copyText.setSelectionRange(0, 999999999999999999999)
867
+ document.execCommand("copy");
868
+ alert("Copied the text");
869
+ }
870
+ function copyToClipboard9() {
871
+ var copyText = document.getElementById("form14");
872
+ copyText.select();
873
+ copyText.setSelectionRange(0, 999999999999999999999)
874
+ document.execCommand("copy");
875
+ alert("Copied the text");
876
+ }
877
+ function copyToClipboard9() {
878
+ var copyText = document.getElementById("form15");
879
+ copyText.select();
880
+ copyText.setSelectionRange(0, 999999999999999999999)
881
+ document.execCommand("copy");
882
+ alert("Copied the text");
883
+ }
884
+ $('.custom-select').click(function(){
885
+ $(this).siblings('.select-list').toggle();
886
+ })
887
+ $('.select-list').click(function(){
888
+ $(this).hide();
889
+ })
890
+ $(document).ready(function () {
891
+ $('button').click(function () {
892
+ var tab_id = $(this).attr('data-tab');
893
+ // $('preview-block button').removeClass('active');
894
+ $('.code-view vx-mb-5').removeClass('active');
895
+ // $(this).addClass('active');
896
+ $("#" + tab_id).toggleClass('active');
897
+ })
898
+ });
899
+ $('ul li a.vx-fs-3[href*="#"]')
900
+ .not('[href="#"]')
901
+ .not('[href="#0"]')
902
+ .click(function (event) {
903
+ if (
904
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
905
+ &&
906
+ location.hostname == this.hostname
907
+ ) {
908
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
909
+ $(this).addClass('active');
910
+ var target = $(this.hash);
911
+ console.log(target);
912
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
913
+ if (target.length) {
914
+ event.preventDefault();
915
+ $('html, body').animate({
916
+ scrollTop: target.offset().top - 110
917
+ }, 100, function () {
918
+ var $target = $(target);
919
+ $target.focus();
920
+ if ($target.is(":focus")) {
921
+ return false;
922
+ } else {
923
+ $target.attr('tabindex', '-1');
924
+ $target.focus();
925
+ };
926
+ });
927
+ }
928
+ }
929
+ });
930
+ </script>
931
+ </body>
932
+
933
+ </html>