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/popover.html ADDED
@@ -0,0 +1,666 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <link rel="preconnect" href="https://fonts.gstatic.com">
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
10
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
11
+
12
+ <link rel="stylesheet/less" type="text/css" href="../less/index.less" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
14
+
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/text/text.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
29
+ <link rel="stylesheet/less" type="text/css" href="../less/popover/popover.less" />
30
+ <link rel="stylesheet/less" type="text/css" href="../less/width/width.less" />
31
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
32
+ </head>
33
+ <body>
34
+ <section>
35
+ <div class="head vx-mb-5">
36
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Popover</h2>
37
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
38
+ The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.
39
+ </p>
40
+ </div>
41
+ <div class="vx-d-flex vx-align-start">
42
+ <div class="page-container">
43
+ <div class="container" id="actionPopoverLayout">
44
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Action Popover</h3>
45
+
46
+ <div class="preview-block">
47
+ <div class="action-buttons">
48
+ <button class="vx-btn md transparent">
49
+ <i class="icons">&#xe9b6;</i> Copy Code
50
+ </button>
51
+ <button class="vx-btn md transparent" data-tab="actionPopover">
52
+ <i class="icons rotate">&#xea95;</i> View Code
53
+ </button>
54
+ </div>
55
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
56
+ <button class="vx-btn primary outline md openActionPopover">Action Popover</button>
57
+ <div class="vx-popover actionPopoverList" style="display: none;z-index: 9;">
58
+ <ul class="popover-items">
59
+ <li><button><i class="icons">&#xe90c;</i> Edit</button></li>
60
+ <li><button><i class="icons">&#xe923;</i> Delete</button></li>
61
+ <li><button><i class="icons">&#xe9d4;</i> Done</button></li>
62
+ <li><button><i class="icons">&#xeafe;</i> Delegate</button></li>
63
+ <li><button><i class="icons">&#xeaec;</i> Owner</button></li>
64
+ <li><button><i class="icons">&#xeaeb;</i> Approver</button></li>
65
+ </ul>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ <div class="code-view vx-mb-5" id="actionPopover">
70
+ <div class="code-navigation">
71
+ <button class="active">HTML</button>
72
+ <button>CSS</button>
73
+ </div>
74
+ <code class="language-markup">
75
+ <script type="prism-html-markup">
76
+ <div class="vx-popover">
77
+ <ul class="popover-items">
78
+ <li><button><i class="icons">&#xe90c;</i> Edit</button></li>
79
+ <li><button><i class="icons">&#xe923;</i> Delete</button></li>
80
+ <li><button><i class="icons">&#xe9d4;</i> Done</button></li>
81
+ <li><button><i class="icons">&#xeafe;</i> Delegate</button></li>
82
+ <li><button><i class="icons">&#xeaec;</i> Owner</button></li>
83
+ <li><button><i class="icons">&#xeaeb;</i> Approver</button></li>
84
+ </ul>
85
+ </div>
86
+ </script>
87
+ </code>
88
+ </div>
89
+ </div>
90
+
91
+ <div class="container" id="listPopoverLayout">
92
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">User List Popover</h3>
93
+ <div class="preview-block">
94
+ <div class="action-buttons">
95
+ <button class="vx-btn md transparent">
96
+ <i class="icons">&#xe9b6;</i> Copy Code
97
+ </button>
98
+ <button class="vx-btn md transparent" data-tab="listPopover">
99
+ <i class="icons rotate">&#xea95;</i> View Code
100
+ </button>
101
+ </div>
102
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
103
+ <button class="vx-btn primary outline md openActionPopover">User List Popover</button>
104
+ <div class="vx-popover actionPopoverList" style="display: none;z-index: 9;">
105
+ <ul class="popover-items">
106
+ <li>
107
+ <div class="avatar-card">
108
+ <div class="avatar"><span>FR</span></div>
109
+ <span class="value">Freida Reno</span>
110
+ </div>
111
+ </li>
112
+ <li>
113
+ <div class="avatar-card">
114
+ <div class="avatar"><span>KD</span></div>
115
+ <span class="value">Keitha Danforth</span>
116
+ </div>
117
+ </li>
118
+ <li>
119
+ <div class="avatar-card">
120
+ <div class="avatar"><span>WD</span></div>
121
+ <span class="value">Werner Demarco</span>
122
+ </div>
123
+ </li>
124
+ <li>
125
+ <div class="avatar-card">
126
+ <div class="avatar"><span>CR</span></div>
127
+ <span class="value">Cyrstal Raftery</span>
128
+ </div>
129
+ </li>
130
+ <li>
131
+ <div class="avatar-card">
132
+ <div class="avatar"><span>PM</span></div>
133
+ <span class="value">Pat Maheu</span>
134
+ </div>
135
+ </li>
136
+ </ul>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ <div class="code-view vx-mb-5" id="listPopover">
141
+ <div class="code-navigation">
142
+ <button class="active">HTML</button>
143
+ <button>CSS</button>
144
+ </div>
145
+ <code class="language-markup">
146
+ <script type="prism-html-markup">
147
+ <div class="vx-popover">
148
+ <ul class="popover-items">
149
+ <li>
150
+ <div class="avatar-card">
151
+ <div class="avatar"><span>FR</span></div>
152
+ <span class="value">Freida Reno</span>
153
+ </div>
154
+ </li>
155
+ <li>
156
+ <div class="avatar-card">
157
+ <div class="avatar"><span>KD</span></div>
158
+ <span class="value">Keitha Danforth</span>
159
+ </div>
160
+ </li>
161
+ <li>
162
+ <div class="avatar-card">
163
+ <div class="avatar"><span>WD</span></div>
164
+ <span class="value">Werner Demarco</span>
165
+ </div>
166
+ </li>
167
+ <li>
168
+ <div class="avatar-card">
169
+ <div class="avatar"><span>CR</span></div>
170
+ <span class="value">Cyrstal Raftery</span>
171
+ </div>
172
+ </li>
173
+ <li>
174
+ <div class="avatar-card">
175
+ <div class="avatar"><span>PM</span></div>
176
+ <span class="value">Pat Maheu</span>
177
+ </div>
178
+ </li>
179
+ </ul>
180
+ </div>
181
+ </script>
182
+ </code>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="container" id="withinListPopoverLayout">
187
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Within Popover</h3>
188
+ <div class="preview-block">
189
+ <div class="action-buttons">
190
+ <button class="vx-btn md transparent">
191
+ <i class="icons">&#xe9b6;</i> Copy Code
192
+ </button>
193
+ <button class="vx-btn md transparent" data-tab="withinListPopover">
194
+ <i class="icons rotate">&#xea95;</i> View Code
195
+ </button>
196
+ </div>
197
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
198
+ <button class="vx-btn primary outline md openActionPopover">Within Popover</button>
199
+ <div class="vx-popover actionPopoverList" style="display: none;z-index: 9;">
200
+ <ul class="popover-items">
201
+ <li>
202
+ <div class="avatar-card no-image">
203
+ <span class="value">Abhishek Saha</span>
204
+ <div class="within">
205
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
206
+ </div>
207
+ </div>
208
+ </li>
209
+ <li>
210
+ <div class="avatar-card no-image">
211
+ <span class="value">Abhishek Saha</span>
212
+ <div class="within">
213
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
214
+ </div>
215
+ </div>
216
+ </li>
217
+ <li>
218
+ <div class="avatar-card no-image">
219
+ <span class="value">Abhishek Saha</span>
220
+ <div class="within">
221
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
222
+ </div>
223
+ </div>
224
+ </li>
225
+ <li>
226
+ <div class="avatar-card no-image">
227
+ <span class="value">Abhishek Saha</span>
228
+ <div class="within">
229
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
230
+ </div>
231
+ </div>
232
+ </li>
233
+ <li>
234
+ <div class="avatar-card no-image">
235
+ <span class="value">Abhishek Saha</span>
236
+ <div class="within">
237
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
238
+ </div>
239
+ </div>
240
+ </li>
241
+ </ul>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ <div class="code-view vx-mb-5" id="withinListPopover">
246
+ <div class="code-navigation">
247
+ <button class="active">HTML</button>
248
+ <button>CSS</button>
249
+ </div>
250
+ <code class="language-markup">
251
+ <script type="prism-html-markup">
252
+ <div class="vx-popover">
253
+ <ul class="popover-items">
254
+ <li>
255
+ <div class="avatar-card no-image">
256
+ <span class="value">Abhishek Saha</span>
257
+ <div class="within">
258
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
259
+ </div>
260
+ </div>
261
+ </li>
262
+ <li>
263
+ <div class="avatar-card no-image">
264
+ <span class="value">Abhishek Saha</span>
265
+ <div class="within">
266
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
267
+ </div>
268
+ </div>
269
+ </li>
270
+ <li>
271
+ <div class="avatar-card no-image">
272
+ <span class="value">Abhishek Saha</span>
273
+ <div class="within">
274
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
275
+ </div>
276
+ </div>
277
+ </li>
278
+ <li>
279
+ <div class="avatar-card no-image">
280
+ <span class="value">Abhishek Saha</span>
281
+ <div class="within">
282
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
283
+ </div>
284
+ </div>
285
+ </li>
286
+ <li>
287
+ <div class="avatar-card no-image">
288
+ <span class="value">Abhishek Saha</span>
289
+ <div class="within">
290
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
291
+ </div>
292
+ </div>
293
+ </li>
294
+ </ul>
295
+ </div>
296
+ </script>
297
+ </code>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ <div class="page-quick-menu">
302
+ <div class="vx-sub-menu vx-p-0">
303
+ <h3
304
+ 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>
305
+ <ul class="vx-p-0">
306
+ <li>
307
+ <a href="#actionPopoverLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Action Popover</a>
308
+ </li>
309
+ <li>
310
+ <a href="#listPopoverLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">User List Popover</a>
311
+ </li>
312
+ <li>
313
+ <a href="#withinListPopoverLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Within Popover</a>
314
+ </li>
315
+ </ul>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </section>
320
+
321
+
322
+ <!-- <section>
323
+ <div class="container">
324
+ <div class="head vx-mb-5">
325
+ <h2 class="title vx-label-txt vx-m-0">Action Popover</h2>
326
+ </div>
327
+ <div class="vx-d-flex">
328
+ <div class="column vx-w-three-col vx-pl-5 vx-pr-5 vx-pt-5">
329
+ <div class="vx-popover">
330
+ <ul class="popover-items">
331
+ <li><button><i class="icons">&#xe90c;</i> Edit</button></li>
332
+ <li><button><i class="icons">&#xe923;</i> Delete</button></li>
333
+ <li><button><i class="icons">&#xe9d4;</i> Done</button></li>
334
+ <li><button><i class="icons">&#xeafe;</i> Delegate</button></li>
335
+ <li><button><i class="icons">&#xeaec;</i> Owner</button></li>
336
+ <li><button><i class="icons">&#xeaeb;</i> Approver</button></li>
337
+ </ul>
338
+ </div>
339
+ </div>
340
+ <div class="column vx-w-oneandhalf-col vx-pl-5 vx-pr-5">
341
+ <div class="vx-d-block" style="max-width: 95%;">
342
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0 vx-pt-0">Description</h3>
343
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
344
+ Add a text to describe the box size, space, animation color about the design.
345
+ </p>
346
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0 vx-pt-0">The Structure to be
347
+ used</h3>
348
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
349
+ <input type="text" id="mainMenu3" class="code" value='<div class="vx-popover">
350
+ <ul class="popover-items">
351
+ <li><button><i class="icons">&#xe90c;</i> Edit</button></li>
352
+ <li><button><i class="icons">&#xe923;</i> Delete</button></li>
353
+ <li><button><i class="icons">&#xe9d4;</i> Done</button></li>
354
+ <li><button><i class="icons">&#xeafe;</i> Delegate</button></li>
355
+ <li><button><i class="icons">&#xeaec;</i> Owner</button></li>
356
+ <li><button><i class="icons">&#xeaeb;</i> Approver</button></li>
357
+ </ul>
358
+ </div>'>
359
+ <button onclick="copyToClipboard2()" class="copy"><i class="icons">&#xe9b6;</i> Copy to clipboard</button>
360
+ <code class="language-markup">
361
+ <script type="prism-html-markup">
362
+ <div class="vx-popover">
363
+ <ul class="popover-items">
364
+ <li><button><i class="icons">&#xe90c;</i> Edit</button></li>
365
+ <li><button><i class="icons">&#xe923;</i> Delete</button></li>
366
+ <li><button><i class="icons">&#xe9d4;</i> Done</button></li>
367
+ <li><button><i class="icons">&#xeafe;</i> Delegate</button></li>
368
+ <li><button><i class="icons">&#xeaec;</i> Owner</button></li>
369
+ <li><button><i class="icons">&#xeaeb;</i> Approver</button></li>
370
+ </ul>
371
+ </div>
372
+ </script>
373
+ </code>
374
+ </p>
375
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0">Info</h3>
376
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
377
+ Add extra info if it is necessary to educate the user. <br><br> E.g. Settings icon is
378
+ always in the bottom of the menu. <br><br> VComply Icon is used for Governance
379
+ dashboard.
380
+ </p>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </section>
386
+
387
+ <section>
388
+ <div class="container">
389
+ <div class="head vx-mb-5">
390
+ <h2 class="title vx-label-txt vx-m-0">List Popover</h2>
391
+ </div>
392
+ <div class="vx-d-flex">
393
+ <div class="column vx-w-three-col vx-pl-5 vx-pr-5 vx-pt-5">
394
+ <div class="vx-popover">
395
+ <ul class="popover-items">
396
+ <li>
397
+ <div class="avatar-card">
398
+ <div class="avatar"><span>AS</span></div>
399
+ <span class="value">Abhishek Saha</span>
400
+ </div>
401
+ </li>
402
+ <li>
403
+ <div class="avatar-card">
404
+ <div class="avatar"><span>AS</span></div>
405
+ <span class="value">Abhishek Saha</span>
406
+ </div>
407
+ </li>
408
+ <li>
409
+ <div class="avatar-card">
410
+ <div class="avatar"><span>AS</span></div>
411
+ <span class="value">Abhishek Saha</span>
412
+ </div>
413
+ </li>
414
+ <li>
415
+ <div class="avatar-card">
416
+ <div class="avatar"><span>AS</span></div>
417
+ <span class="value">Abhishek Saha</span>
418
+ </div>
419
+ </li>
420
+ <li>
421
+ <div class="avatar-card">
422
+ <div class="avatar"><span>AS</span></div>
423
+ <span class="value">Abhishek Saha</span>
424
+ </div>
425
+ </li>
426
+ </ul>
427
+ </div>
428
+ </div>
429
+ <div class="column vx-w-oneandhalf-col vx-pl-5 vx-pr-5">
430
+ <div class="vx-d-block" style="max-width: 95%;">
431
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0 vx-pt-0">Description</h3>
432
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
433
+ Add a text to describe the box size, space, animation color about the design.
434
+ </p>
435
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0 vx-pt-0">The Structure to be
436
+ used</h3>
437
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
438
+ <input type="text" id="mainMenu3" class="code" value='<div class="vx-popover">
439
+ <ul class="popover-items">
440
+ <li>
441
+ <div class="avatar-card">
442
+ <div class="avatar"><span>AS</span></div>
443
+ <span class="value">Abhishek Saha</span>
444
+ </div>
445
+ </li>
446
+ <li>
447
+ <div class="avatar-card">
448
+ <div class="avatar"><span>AS</span></div>
449
+ <span class="value">Abhishek Saha</span>
450
+ </div>
451
+ </li>
452
+ </ul>
453
+ </div>'>
454
+ <button onclick="copyToClipboard2()" class="copy"><i class="icons">&#xe9b6;</i> Copy to clipboard</button>
455
+ <code class="language-markup">
456
+ <script type="prism-html-markup">
457
+ <div class="vx-popover">
458
+ <ul class="popover-items">
459
+ <li>
460
+ <div class="avatar-card">
461
+ <div class="avatar"><span>AS</span></div>
462
+ <span class="value">Abhishek Saha</span>
463
+ </div>
464
+ </li>
465
+ <li>
466
+ <div class="avatar-card">
467
+ <div class="avatar"><span>AS</span></div>
468
+ <span class="value">Abhishek Saha</span>
469
+ </div>
470
+ </li>
471
+ </ul>
472
+ </div>
473
+ </script>
474
+ </code>
475
+ </p>
476
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0">Info</h3>
477
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
478
+ Add extra info if it is necessary to educate the user. <br><br> E.g. Settings icon is
479
+ always in the bottom of the menu. <br><br> VComply Icon is used for Governance
480
+ dashboard.
481
+ </p>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </section>
487
+
488
+ <section>
489
+ <div class="container">
490
+ <div class="head vx-mb-5">
491
+ <h2 class="title vx-label-txt vx-m-0">Within Popover</h2>
492
+ </div>
493
+ <div class="vx-d-flex">
494
+ <div class="column vx-w-three-col vx-pl-5 vx-pr-5 vx-pt-5">
495
+ <div class="vx-popover">
496
+ <ul class="popover-items">
497
+ <li>
498
+ <div class="avatar-card no-image">
499
+ <span class="value">Abhishek Saha</span>
500
+ <div class="within">
501
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
502
+ </div>
503
+ </div>
504
+ </li>
505
+ <li>
506
+ <div class="avatar-card no-image">
507
+ <span class="value">Abhishek Saha</span>
508
+ <div class="within">
509
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
510
+ </div>
511
+ </div>
512
+ </li>
513
+ <li>
514
+ <div class="avatar-card no-image">
515
+ <span class="value">Abhishek Saha</span>
516
+ <div class="within">
517
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
518
+ </div>
519
+ </div>
520
+ </li>
521
+ <li>
522
+ <div class="avatar-card no-image">
523
+ <span class="value">Abhishek Saha</span>
524
+ <div class="within">
525
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
526
+ </div>
527
+ </div>
528
+ </li>
529
+ <li>
530
+ <div class="avatar-card no-image">
531
+ <span class="value">Abhishek Saha</span>
532
+ <div class="within">
533
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
534
+ </div>
535
+ </div>
536
+ </li>
537
+ </ul>
538
+ </div>
539
+ </div>
540
+ <div class="column vx-w-oneandhalf-col vx-pl-5 vx-pr-5">
541
+ <div class="vx-d-block" style="max-width: 95%;">
542
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0 vx-pt-0">Description</h3>
543
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
544
+ Add a text to describe the box size, space, animation color about the design.
545
+ </p>
546
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0 vx-pt-0">The Structure to be
547
+ used</h3>
548
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
549
+ <input type="text" id="mainMenu3" class="code" value='<div class="vx-popover">
550
+ <ul class="popover-items">
551
+ <li>
552
+ <div class="avatar-card no-image">
553
+ <span class="value">Abhishek Saha</span>
554
+ <div class="within">
555
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
556
+ </div>
557
+ </div>
558
+ </li>
559
+ <li>
560
+ <div class="avatar-card no-image">
561
+ <span class="value">Abhishek Saha</span>
562
+ <div class="within">
563
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
564
+ </div>
565
+ </div>
566
+ </li>
567
+ </ul>
568
+ </div>'>
569
+ <button onclick="copyToClipboard2()" class="copy"><i class="icons">&#xe9b6;</i> Copy to clipboard</button>
570
+ <code class="language-markup">
571
+ <script type="prism-html-markup">
572
+ <div class="vx-popover">
573
+ <ul class="popover-items">
574
+ <li>
575
+ <div class="avatar-card no-image">
576
+ <span class="value">Abhishek Saha</span>
577
+ <div class="within">
578
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
579
+ </div>
580
+ </div>
581
+ </li>
582
+ <li>
583
+ <div class="avatar-card no-image">
584
+ <span class="value">Abhishek Saha</span>
585
+ <div class="within">
586
+ <span class="block">Within</span> <span class="data">ABC Parent company</span>
587
+ </div>
588
+ </div>
589
+ </li>
590
+ </ul>
591
+ </div>
592
+ </script>
593
+ </code>
594
+ </p>
595
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-p-5 vx-m-0 vx-pb-0">Info</h3>
596
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
597
+ Add extra info if it is necessary to educate the user. <br><br> E.g. Settings icon is
598
+ always in the bottom of the menu. <br><br> VComply Icon is used for Governance
599
+ dashboard.
600
+ </p>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </section> -->
606
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
607
+ <script src="../less.js"></script>
608
+ <script src="../utility/prism.js"></script>
609
+ <script>
610
+ $(document).ready(function () {
611
+ $('button').click(function () {
612
+ var tab_id = $(this).attr('data-tab');
613
+ // $('preview-block button').removeClass('active');
614
+ $('.code-view vx-mb-5').removeClass('active');
615
+ // $(this).addClass('active');
616
+ $("#" + tab_id).toggleClass('active');
617
+ })
618
+
619
+ $('.openActionPopover').click(function(event){
620
+ console.log(event.target.pageX);
621
+ let targetLeft = event.target.offsetLeft;
622
+ let targetTop = event.target.offsetTop;
623
+ let targetHeight = event.target.offsetHeight;
624
+ let targetWidth = event.target.offsetWidth;
625
+ // $('.actionPopoverList').hide();
626
+ $(this).siblings('.actionPopoverList').toggle();
627
+ $(this).siblings('.actionPopoverList').css('position', 'absolute');
628
+ $(this).siblings('.actionPopoverList').css('top', targetTop + targetHeight);
629
+ $(this).siblings('.actionPopoverList').css('left', targetLeft);
630
+ // if($(this).siblings('.actionPopoverList').show())
631
+ })
632
+
633
+ });
634
+ $('ul li a.vx-fs-3[href*="#"]').not('[href="#"]').not('[href="#0"]')
635
+ .click(function (event) {
636
+ if (
637
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
638
+ &&
639
+ location.hostname == this.hostname
640
+ ) {
641
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
642
+ $(this).addClass('active');
643
+ var target = $(this.hash);
644
+ console.log(target);
645
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
646
+ if (target.length) {
647
+ event.preventDefault();
648
+ $('html, body').animate({
649
+ scrollTop: target.offset().top - 110
650
+ }, 100, function () {
651
+ var $target = $(target);
652
+ $target.focus();
653
+ if ($target.is(":focus")) {
654
+ return false;
655
+ } else {
656
+ $target.attr('tabindex', '-1');
657
+ $target.focus();
658
+ };
659
+ });
660
+ }
661
+ }
662
+ });
663
+
664
+ </script>
665
+ </body>
666
+ </html>