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/panel.html ADDED
@@ -0,0 +1,423 @@
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
+ <title>Panel</title>
9
+ <link rel="preconnect" href="https://fonts.gstatic.com">
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
11
+ rel="stylesheet">
12
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
13
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/index.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/panel/panel.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
24
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-bottom.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-top.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
29
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
30
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
31
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
32
+ </head>
33
+
34
+ <body>
35
+ <section>
36
+ <div class="head vx-mb-5">
37
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Panels &amp; Accordion</h2>
38
+ <!-- <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
39
+ Accordions contain creation flows and allow lightweight editing of an element.
40
+ </p> -->
41
+ </div>
42
+ <div class="vx-d-flex vx-align-start">
43
+ <div class="page-container">
44
+ <div class="container" id="besicPanelLayout">
45
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Basic Panel</h3>
46
+ <!-- <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
47
+ Avatars are generally used to represent an entity, or a group of entity. It may consist of an image or short name if image is not available.
48
+ </p> -->
49
+ <div class="preview-block">
50
+ <div class="action-buttons">
51
+ <button class="vx-btn md transparent">
52
+ <i class="icons">&#xe9b6;</i> Copy Code
53
+ </button>
54
+ <button class="vx-btn md transparent" data-tab="besicPanel">
55
+ <i class="icons rotate">&#xea95;</i> View Code
56
+ </button>
57
+ </div>
58
+ <div class="preview-container vx-d-flex vx-justify-center">
59
+ <div class="vx-panel default">
60
+ <div class="vx-panel-head">
61
+ <h3 class="title vx-fs-sub-title vx-fw-400">Panel Heading</h3>
62
+ </div>
63
+ <div class="vx-panel-body">
64
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0">
65
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
66
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
67
+ when an unknown printer took a galley of type and scrambled it to make a type specimen book.
68
+ It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
69
+ It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
70
+ and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
71
+ </p>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ <div class="code-view vx-mb-5" id="besicPanel">
77
+ <div class="code-navigation">
78
+ <button class="active">HTML</button>
79
+ <button>CSS</button>
80
+ </div>
81
+ <code class="language-markup">
82
+ <script type="prism-html-markup">
83
+ <div class="vx-panel default">
84
+ <div class="vx-panel-head">
85
+ <h3 class="title vx-fs-sub-title vx-fw-400">Panel Heading</h3>
86
+ </div>
87
+ <div class="vx-panel-body">
88
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0">
89
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry...
90
+ </p>
91
+ </div>
92
+ </div>
93
+ </script>
94
+ </code>
95
+ </div>
96
+ </div>
97
+ <div class="container" id="besicPanelActiveLayout">
98
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Basic Active Panel</h3>
99
+ <!-- <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
100
+ Avatars are generally used to represent an entity, or a group of entity. It may consist of an image or short name if image is not available.
101
+ </p> -->
102
+ <div class="preview-block">
103
+ <div class="action-buttons">
104
+ <button class="vx-btn md transparent">
105
+ <i class="icons">&#xe9b6;</i> Copy Code
106
+ </button>
107
+ <button class="vx-btn md transparent" data-tab="besicPanelActive">
108
+ <i class="icons rotate">&#xea95;</i> View Code
109
+ </button>
110
+ </div>
111
+ <div class="preview-container vx-d-flex vx-justify-center">
112
+ <div class="vx-panel default active">
113
+ <div class="vx-panel-head">
114
+ <h3 class="title vx-fs-sub-title vx-fw-400">Panel Heading</h3>
115
+ </div>
116
+ <div class="vx-panel-body">
117
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0">Lorem Ipsum is simply dummy text of the printing
118
+ and
119
+ typesetting industry.
120
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
121
+ printer
122
+ took a galley of type and scrambled it to make a type specimen book. It has survived not only
123
+ five
124
+ centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
125
+ was
126
+ popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
127
+ and more
128
+ recently with desktop publishing software like Aldus PageMaker including versions of Lorem
129
+ Ipsum.</p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ <div class="code-view vx-mb-5" id="besicPanelActive">
135
+ <div class="code-navigation">
136
+ <button class="active">HTML</button>
137
+ <button>CSS</button>
138
+ </div>
139
+ <code class="language-markup">
140
+ <script type="prism-html-markup">
141
+ <div class="vx-panel default active">
142
+ <div class="vx-panel-head">
143
+ <h3 class="title vx-fs-sub-title vx-fw-400">Panel Heading</h3>
144
+ </div>
145
+ <div class="vx-panel-body">
146
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0">
147
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry...
148
+ </p>
149
+ </div>
150
+ </div>
151
+ </script>
152
+ </code>
153
+ </div>
154
+ </div>
155
+ <div class="container" id="accordionLayout">
156
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Accordion group</h3>
157
+ <!-- <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
158
+ Avatars are generally used to represent an entity, or a group of entity. It may consist of an image or short name if image is not available.
159
+ </p> -->
160
+ <div class="preview-block">
161
+ <div class="action-buttons">
162
+ <button class="vx-btn md transparent">
163
+ <i class="icons">&#xe9b6;</i> Copy Code
164
+ </button>
165
+ <button class="vx-btn md transparent" data-tab="accordion">
166
+ <i class="icons rotate">&#xea95;</i> View Code
167
+ </button>
168
+ </div>
169
+ <div class="preview-container vx-d-flex vx-justify-center">
170
+ <div class="vx-accordion-group">
171
+ <div class="vx-panel default accordionItem open">
172
+ <div class="vx-panel-head accordionItemHeading">
173
+ <h3 class="title vx-fs-sub-title vx-fw-400">Panel with action</h3>
174
+ <div class="action">
175
+ <button class="vx-btn md transparent">
176
+ <i class="icons">&#xe910;</i>
177
+ </button>
178
+ </div>
179
+ </div>
180
+ <div class="vx-panel-body">
181
+ <p class="vx-paragraph-text vx-fs-paragraph vx-m-0">Lorem Ipsum is simply dummy text of the
182
+ printing and
183
+ typesetting industry.
184
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
185
+ unknown
186
+ printer
187
+ took a galley of type and scrambled it to make a type specimen book. It has survived not
188
+ only five
189
+ centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
190
+ It was
191
+ popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
192
+ passages, and
193
+ more
194
+ recently with desktop publishing software like Aldus PageMaker including versions of Lorem
195
+ Ipsum.
196
+ </p>
197
+ </div>
198
+ </div>
199
+ <div class="vx-panel default accordionItem close">
200
+ <div class="vx-panel-head accordionItemHeading">
201
+ <h3 class="title vx-fs-sub-title vx-fw-400">Panel with action</h3>
202
+ <div class="action">
203
+ <button class="vx-btn md transparent">
204
+ <i class="icons">&#xe910;</i>
205
+ </button>
206
+ </div>
207
+ </div>
208
+ <div class="vx-panel-body">
209
+ <p class="vx-paragraph-text vx-fs-paragraph vx-m-0">Lorem Ipsum is simply dummy text of the
210
+ printing and
211
+ typesetting industry.
212
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
213
+ unknown
214
+ printer
215
+ took a galley of type and scrambled it to make a type specimen book. It has survived not
216
+ only five
217
+ centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
218
+ It was
219
+ popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
220
+ passages, and
221
+ more
222
+ recently with desktop publishing software like Aldus PageMaker including versions of Lorem
223
+ Ipsum.
224
+ </p>
225
+ </div>
226
+ </div>
227
+ <div class="vx-panel default accordionItem close">
228
+ <div class="vx-panel-head accordionItemHeading">
229
+ <h3 class="title vx-fs-sub-title vx-fw-400">Panel with action</h3>
230
+ <div class="action">
231
+ <button class="vx-btn md transparent">
232
+ <i class="icons">&#xe910;</i>
233
+ </button>
234
+ </div>
235
+ </div>
236
+ <div class="vx-panel-body">
237
+ <p class="vx-paragraph-text vx-fs-paragraph vx-m-0">Lorem Ipsum is simply dummy text of the
238
+ printing and
239
+ typesetting industry.
240
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
241
+ unknown
242
+ printer
243
+ took a galley of type and scrambled it to make a type specimen book. It has survived not
244
+ only five
245
+ centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
246
+ It was
247
+ popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
248
+ passages, and
249
+ more
250
+ recently with desktop publishing software like Aldus PageMaker including versions of Lorem
251
+ Ipsum.
252
+ </p>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ <div class="code-view vx-mb-5" id="accordion">
259
+ <div class="code-navigation">
260
+ <button class="active">HTML</button>
261
+ <button>CSS</button>
262
+ </div>
263
+ <code class="language-markup">
264
+ <script type="prism-html-markup">
265
+ <div class="vx-accordion-group">
266
+ <div class="vx-panel default accordionItem open">
267
+ <div class="vx-panel-head accordionItemHeading">
268
+ <h3 class="title vx-fs-sub-title vx-fw-400">Panel with action</h3>
269
+ <div class="action">
270
+ <button class="vx-btn md transparent">
271
+ <i class="icons">&#xe910;</i>
272
+ </button>
273
+ </div>
274
+ </div>
275
+ <div class="vx-panel-body">
276
+ <p class="vx-paragraph-text vx-fs-paragraph vx-m-0">Lorem Ipsum is simply dummy text of the
277
+ printing and
278
+ typesetting industry...
279
+ </p>
280
+ </div>
281
+ </div>
282
+ <div class="vx-panel default accordionItem close">
283
+ <div class="vx-panel-head accordionItemHeading">
284
+ <h3 class="title vx-fs-sub-title vx-fw-400">Panel with action</h3>
285
+ <div class="action">
286
+ <button class="vx-btn md transparent">
287
+ <i class="icons">&#xe910;</i>
288
+ </button>
289
+ </div>
290
+ </div>
291
+ <div class="vx-panel-body">
292
+ <p class="vx-paragraph-text vx-fs-paragraph vx-m-0">Lorem Ipsum is simply dummy text of the
293
+ printing and
294
+ typesetting industry...
295
+ </p>
296
+ </div>
297
+ </div>
298
+ <div class="vx-panel default accordionItem close">
299
+ <div class="vx-panel-head accordionItemHeading">
300
+ <h3 class="title vx-fs-sub-title vx-fw-400">Panel with action</h3>
301
+ <div class="action">
302
+ <button class="vx-btn md transparent">
303
+ <i class="icons">&#xe910;</i>
304
+ </button>
305
+ </div>
306
+ </div>
307
+ <div class="vx-panel-body">
308
+ <p class="vx-paragraph-text vx-fs-paragraph vx-m-0">Lorem Ipsum is simply dummy text of the
309
+ printing and
310
+ typesetting industry...
311
+ </p>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </script>
316
+ </code>
317
+ <br><br>
318
+ <code class="language-markup">
319
+ <script type="prism-html-markup">
320
+ var accItem = document.getElementsByClassName('accordionItem');
321
+ var accHD = document.getElementsByClassName('accordionItemHeading');
322
+ for (i = 0; i < accHD.length; i++) {
323
+ accHD[i].addEventListener('click', toggleItem, false);
324
+ }
325
+ function toggleItem() {
326
+ var itemClass = this.parentNode.className;
327
+ for (i = 0; i < accItem.length; i++) {
328
+ accItem[i].className = 'vx-panel default accordionItem close';
329
+ }
330
+ if (itemClass == 'vx-panel default accordionItem close') {
331
+ console.log(this.children.child);
332
+ this.parentNode.className = 'vx-panel default accordionItem open';
333
+ }
334
+ }
335
+ </script>
336
+ </code>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ <div class="page-quick-menu">
341
+ <div class="vx-sub-menu vx-p-0">
342
+ <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>
343
+ <ul class="vx-p-0">
344
+ <li>
345
+ <a href="#besicPanelLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Basic Panel</a>
346
+ </li>
347
+ <li>
348
+ <a href="#besicPanelActiveLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Basic Active Panel</a>
349
+ </li>
350
+ <li>
351
+ <a href="#accordionLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Accordion group</a>
352
+ </li>
353
+ </ul>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </section>
358
+
359
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
360
+ <script async src="../less.js"></script>
361
+ <script src="../utility/prism.js"></script>
362
+ <script>
363
+ var accItem = document.getElementsByClassName('accordionItem');
364
+ // var accBtn = document.getElementsByClassName('vx-btn');
365
+ var accHD = document.getElementsByClassName('accordionItemHeading');
366
+ for (i = 0; i < accHD.length; i++) {
367
+ accHD[i].addEventListener('click', toggleItem, false);
368
+ }
369
+ function toggleItem() {
370
+ // console.log(accBtn[i]);
371
+ var itemClass = this.parentNode.className;
372
+ for (i = 0; i < accItem.length; i++) {
373
+ accItem[i].className = 'vx-panel default accordionItem close';
374
+ // accBtn[i].innerHTML = '<i class="icons">&#xe912;</i>';
375
+ }
376
+ if (itemClass == 'vx-panel default accordionItem close') {
377
+ console.log(this.children.child);
378
+ this.parentNode.className = 'vx-panel default accordionItem open';
379
+ }
380
+ }
381
+
382
+ $(document).ready(function () {
383
+ $('button').click(function () {
384
+ var tab_id = $(this).attr('data-tab');
385
+ // $('preview-block button').removeClass('active');
386
+ $('.code-view vx-mb-5').removeClass('active');
387
+ // $(this).addClass('active');
388
+ $("#" + tab_id).toggleClass('active');
389
+ })
390
+ });
391
+ $('ul li a.vx-fs-3[href*="#"]').not('[href="#"]').not('[href="#0"]')
392
+ .click(function (event) {
393
+ if (
394
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
395
+ &&
396
+ location.hostname == this.hostname
397
+ ) {
398
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
399
+ $(this).addClass('active');
400
+ var target = $(this.hash);
401
+ console.log(target);
402
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
403
+ if (target.length) {
404
+ event.preventDefault();
405
+ $('html, body').animate({
406
+ scrollTop: target.offset().top - 110
407
+ }, 100, function () {
408
+ var $target = $(target);
409
+ $target.focus();
410
+ if ($target.is(":focus")) {
411
+ return false;
412
+ } else {
413
+ $target.attr('tabindex', '-1');
414
+ $target.focus();
415
+ };
416
+ });
417
+ }
418
+ }
419
+ });
420
+ </script>
421
+ </body>
422
+
423
+ </html>