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/header.html ADDED
@@ -0,0 +1,590 @@
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>Document</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/display/display.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-bottom.less" />
24
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-top.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
29
+ <link rel="stylesheet/less" type="text/css" href="../less/header/header.less" />
30
+ <link rel="stylesheet/less" type="text/css" href="../less/user-panel/user-panel.less" />
31
+ <link rel="stylesheet/less" type="text/css" href="../less/quick-links/quick-links.less" />
32
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.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">Header</h2>
40
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4"> Headers provide branding, navigation,
41
+ search, and access to global application actions such as settings and notifications.
42
+ The header is consistent across all pages of an application. This offers a recognizable unifying element
43
+ to the application. </p>
44
+ </div>
45
+ <div class="vx-d-flex vx-align-start">
46
+ <div class="page-container">
47
+ <div class="container" id="headerTopLayout">
48
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Header Top Layout</h3>
49
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
50
+ Generally VComply System header top consists of search box, quick links button, notification
51
+ counter and user profile action.
52
+ </p>
53
+ <div class="preview-block">
54
+ <div class="action-buttons">
55
+ <button class="vx-btn md transparent">
56
+ <i class="icons">&#xe9b6;</i> Copy Code
57
+ </button>
58
+ <button class="vx-btn md transparent" data-tab="headerTop">
59
+ <i class="icons rotate">&#xea95;</i> View Code
60
+ </button>
61
+ </div>
62
+ <div class="preview-container">
63
+ <div class="vx-header">
64
+ <div class="vx-header-top vx-d-flex vx-justify-between vx-align-center">
65
+ <div class="vx-search-block">
66
+ <input type="text">
67
+ <i class="icons">&#xe90b;</i>
68
+ </div>
69
+ <div class="vx-quick-block">
70
+ <div class="vx-quick-column plus" id="toggle-quickLink">
71
+ <button type="button" class="top plus">
72
+ +
73
+ </button>
74
+ <!-- <div class="vx-quick-links" id="quick-links" style="display: none;"></div> will be here -->
75
+
76
+ </div>
77
+ <div class="vx-quick-column notification">
78
+ <button type="button" class="top notification">
79
+ <i class="icons">&#xe909;</i>
80
+ <span class="counter">100</span>
81
+ </button>
82
+ </div>
83
+ <div class="vx-quick-column user">
84
+ <button type="button" class="top">
85
+ <!-- <img src="https://s3-eu-west-1.amazonaws.com/eu.v-comply.com/profile_pic/thumb/1612591416420_Satyendar.png" alt=""> -->
86
+ <span
87
+ class="small-user vx-d-flex vx-align-center vx-justify-center">SY</span>
88
+ </button>
89
+ <!-- <div class="vx-user-panel" id="userPanel" style="display: none;"></div> will be here -->
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ <div class="code-view vx-mb-5" id="headerTop">
97
+ <div class="code-navigation">
98
+ <button class="active" data-tab="headerTopLayouthtml">HTML</button>
99
+ <button data-tab="headerTopLayoutless">CSS</button>
100
+ </div>
101
+ <code class="language-markup active" id="headerTopLayouthtml">
102
+ <script type="prism-html-markup">
103
+ <div class="vx-header">
104
+ <div class="vx-header-top vx-d-flex vx-justify-between">
105
+ <div class="vx-search-block">
106
+ <input type="text">
107
+ <i class="icons">&#xe90b;</i>
108
+ </div>
109
+ <div class="vx-quick-block">
110
+ <div class="vx-quick-column plus" id="toggle-quickLink">
111
+ <button type="button" class="top plus">
112
+ +
113
+ </button>
114
+ <!-- <div class="vx-quick-links" id="quick-links" style="display: none;"></div> will be here -->
115
+
116
+ </div>
117
+ <div class="vx-quick-column notification">
118
+ <button type="button" class="top notification">
119
+ <i class="icons">&#xe909;</i>
120
+ <span class="counter">100</span>
121
+ </button>
122
+ </div>
123
+ <div class="vx-quick-column user">
124
+ <button type="button" class="top">
125
+ <!-- <img src="https://s3-eu-west-1.amazonaws.com/eu.v-comply.com/profile_pic/thumb/1612591416420_Satyendar.png" alt=""> -->
126
+ <span class="small-user vx-d-flex vx-align-center vx-justify-center">SY</span>
127
+ </button>
128
+ <!-- <div class="vx-user-panel" id="userPanel" style="display: none;"></div> will be here -->
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </script>
134
+ </code>
135
+ <code class="language-markup" id="headerTopLayoutless">
136
+ <script type="prism-html-markup">
137
+ @import "~vx-design-system/css-build/less/header/header.less"
138
+ </script>
139
+ </code>
140
+ </div>
141
+ </div>
142
+ <div class="container" id="headerBottomLayout">
143
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Header bottom Layout</h3>
144
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
145
+ Header bottom contains page specific contents like page title, links and action buttons.
146
+ </p>
147
+ <div class="preview-block">
148
+ <div class="action-buttons">
149
+ <button class="vx-btn md transparent">
150
+ <i class="icons">&#xe9b6;</i> Copy Code
151
+ </button>
152
+ <button class="vx-btn md transparent" data-tab="headerBottom">
153
+ <i class="icons rotate">&#xea95;</i> View Code
154
+ </button>
155
+ </div>
156
+ <div class="preview-container">
157
+ <div class="vx-header">
158
+ <div class="vx-header-bottom vx-pl-3 vx-pr-3 vx-pt-4">
159
+ <h1 class="vx-title-text vx-txt-white vx-fs-6 vx-m-0">Main Heading</h1>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div class="code-view vx-mb-5" id="headerBottom">
165
+ <div class="code-navigation">
166
+ <button class="active" data-tab="headerBottomLayouthtml">HTML</button>
167
+ <button data-tab="headerBottomLayoutless">CSS</button>
168
+ </div>
169
+ <code class="language-markup active" id="headerBottomLayouthtml">
170
+ <script type="prism-html-markup">
171
+ <div class="vx-header-bottom vx-pl-3 vx-pr-3 vx-pt-4">
172
+ <h1 class="vx-title-text vx-txt-white vx-fs-6 vx-m-0">Main Heading</h1>
173
+ </div>
174
+ </script>
175
+ </code>
176
+ <code class="language-markup" id="headerBottomLayoutless">
177
+ <script type="prism-html-markup">
178
+ @import "~vx-design-system/css-build/less/header/header.less"
179
+ </script>
180
+ </code>
181
+ </div>
182
+ </div>
183
+ <div class="container" id="fullHeaderLayout">
184
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Full Header</h3>
185
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
186
+ User panel contains quickly accessible information and action for currently logged in user.
187
+ </p>
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="fullHeader">
194
+ <i class="icons rotate">&#xea95;</i> View Code
195
+ </button>
196
+ </div>
197
+ <div class="preview-container">
198
+ <div class="vx-header">
199
+ <div class="vx-header-top vx-d-flex vx-justify-between vx-align-center">
200
+ <div class="vx-search-block">
201
+ <input type="text">
202
+ <i class="icons">&#xe90b;</i>
203
+ </div>
204
+ <div class="vx-quick-block">
205
+ <div class="vx-quick-column plus" id="toggle-quickLink">
206
+ <button type="button" class="top plus">
207
+ +
208
+ </button>
209
+
210
+ </div>
211
+ <div class="vx-quick-column notification">
212
+ <button type="button" class="top notification">
213
+ <i class="icons">&#xe909;</i>
214
+ <span class="counter">100</span>
215
+ </button>
216
+ </div>
217
+ <div class="vx-quick-column user">
218
+ <button type="button" class="top">
219
+ <span
220
+ class="small-user vx-d-flex vx-align-center vx-justify-center">SY</span>
221
+ </button>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ <div class="vx-header-bottom vx-pl-3 vx-pr-3 vx-pt-4">
226
+ <h1 class="vx-title-text vx-txt-white vx-fs-6 vx-m-0">Main Heading</h1>
227
+ <div class="vx-tab-menu">
228
+ <ul>
229
+ <li><a href="#" class="active">Tab menu 1</a></li>
230
+ <li><a href="#">Tab menu 2</a></li>
231
+ <li><a href="#">Tab menu 3</a></li>
232
+ <li><a href="#">Tab menu 4</a></li>
233
+ </ul>
234
+ </div>
235
+ </div>
236
+
237
+ </div>
238
+ </div>
239
+ </div>
240
+ <div class="code-view vx-mb-5" id="fullHeader">
241
+ <div class="code-navigation">
242
+ <button class="active" data-tab="fullHeaderLayouthtml">HTML</button>
243
+ <button data-tab="fullHeaderLayoutless">CSS</button>
244
+ </div>
245
+ <code class="language-markup active" id="fullHeaderLayouthtml">
246
+ <script type="prism-html-markup">
247
+ <div class="vx-header">
248
+ <div class="vx-header-top vx-d-flex vx-justify-between">
249
+ <div class="vx-search-block">
250
+ <input type="text">
251
+ <i class="icons">&#xe90b;</i>
252
+ </div>
253
+ <div class="vx-quick-block">
254
+ <div class="vx-quick-column plus" id="toggle-quickLink">
255
+ <button type="button" class="top">
256
+ +
257
+ </button>
258
+
259
+ </div>
260
+ <div class="vx-quick-column notification">
261
+ <button type="button" class="top notification">
262
+ <i class="icons">&#xe909;</i>
263
+ <span class="counter">100</span>
264
+ </button>
265
+ </div>
266
+ <div class="vx-quick-column user">
267
+ <button type="button" class="top">
268
+ <span class="small-user vx-d-flex vx-align-center vx-justify-center">SY</span>
269
+ </button>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ <div class="vx-header-bottom vx-pl-3 vx-pr-3 vx-pt-4">
274
+ <h1 class="vx-title-text vx-txt-white vx-fs-6 vx-m-0">Main Heading</h1>
275
+ <div class="vx-tab-menu">
276
+ <ul>
277
+ <li><a href="#" class="active">Tab menu 1</a></li>
278
+ <li><a href="#">Tab menu 2</a></li>
279
+ <li><a href="#">Tab menu 3</a></li>
280
+ <li><a href="#">Tab menu 4</a></li>
281
+ </ul>
282
+ </div>
283
+ </div>
284
+
285
+ </div>
286
+ </script>
287
+ </code>
288
+ <code class="language-markup" id="fullHeaderLayoutless">
289
+ <script type="prism-html-markup">
290
+ @import "~vx-design-system/css-build/less/header/header.less"
291
+ </script>
292
+ </code>
293
+ </div>
294
+ </div>
295
+ <div class="container" id="quickLinksLayout">
296
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Quick Link</h3>
297
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
298
+ Quick links is a global component available across all the products of VComply, it contains
299
+ links for quickly accessible items.
300
+ </p>
301
+ <div class="preview-block">
302
+ <div class="action-buttons">
303
+ <button class="vx-btn md transparent">
304
+ <i class="icons">&#xe9b6;</i> Copy Code
305
+ </button>
306
+ <button class="vx-btn md transparent" data-tab="quickLinks">
307
+ <i class="icons rotate">&#xea95;</i> View Code
308
+ </button>
309
+ </div>
310
+ <div class="preview-container">
311
+ <div class="preview-container vx-d-flex vx-justify-center">
312
+ <div class="vx-quick-links" id="quick-links" style="position: relative;top: 0;left: 0;">
313
+ <ul>
314
+ <li>
315
+ <a href="#">
316
+ <span class="icon"><img src="../images/plus-create-icon.svg"
317
+ alt=""></span>
318
+ <span class="text">
319
+ <span class="title">Create</span>
320
+ <span class="paragraph">Create a Responsibility</span>
321
+ </span>
322
+ </a>
323
+ </li>
324
+ <li>
325
+ <a href="#">
326
+ <span class="icon"><img src="../images/plus-risk-icon.svg"
327
+ alt=""></span>
328
+ <span class="text">
329
+ <span class="title">Risk</span>
330
+ <span class="paragraph">Report a risk</span>
331
+ </span>
332
+ </a>
333
+ </li>
334
+ <li>
335
+ <a href="#">
336
+ <span class="icon"><img src="../images/plus-incident-icon.svg"
337
+ alt=""></span>
338
+ <span class="text">
339
+ <span class="title">Incident</span>
340
+ <span class="paragraph">Report an incident</span>
341
+ </span>
342
+ </a>
343
+ </li>
344
+ </ul>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ <div class="code-view vx-mb-5" id="quickLinks">
350
+ <div class="code-navigation">
351
+ <button class="active" data-tab="quickLinksLayouthtml">HTML</button>
352
+ <button data-tab="quickLinksLayoutless">CSS</button>
353
+ </div>
354
+ <code class="language-markup active" id="quickLinksLayouthtml">
355
+ <script type="prism-html-markup">
356
+ <div class="vx-quick-links" id="quick-links">
357
+ <ul>
358
+ <li>
359
+ <a href="#">
360
+ <span class="icon"><img src="../images/plus-create-icon.svg" alt=""></span>
361
+ <span class="text">
362
+ <span class="title">Create</span>
363
+ <span class="paragraph">Create a Responsibility</span>
364
+ </span>
365
+ </a>
366
+ </li>
367
+ <li>
368
+ <a href="#">
369
+ <span class="icon"><img src="../images/plus-risk-icon.svg" alt=""></span>
370
+ <span class="text">
371
+ <span class="title">Risk</span>
372
+ <span class="paragraph">Report a risk</span>
373
+ </span>
374
+ </a>
375
+ </li>
376
+ <li>
377
+ <a href="#">
378
+ <span class="icon"><img src="../images/plus-incident-icon.svg" alt=""></span>
379
+ <span class="text">
380
+ <span class="title">Incident</span>
381
+ <span class="paragraph">Report an incident</span>
382
+ </span>
383
+ </a>
384
+ </li>
385
+ </ul>
386
+ </div>
387
+ </script>
388
+ </code>
389
+ <code class="language-markup" id="quickLinksLayoutless">
390
+ <script type="prism-html-markup">
391
+ @import "~vx-design-system/css-build/less/quick-links/quick-links.less"
392
+ </script>
393
+ </code>
394
+ </div>
395
+ </div>
396
+ <div class="container" id="userPanelLayout">
397
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">User Panel</h3>
398
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
399
+ User panel contains quickly accessible information and action for currently logged in user.
400
+ </p>
401
+ <div class="preview-block">
402
+ <div class="action-buttons">
403
+ <button class="vx-btn md transparent">
404
+ <i class="icons">&#xe9b6;</i> Copy Code
405
+ </button>
406
+ <button class="vx-btn md transparent" data-tab="userPanel">
407
+ <i class="icons rotate">&#xea95;</i> View Code
408
+ </button>
409
+ </div>
410
+ <div class="preview-container">
411
+ <div class="preview-container vx-d-flex vx-justify-center">
412
+ <div class="vx-user-panel" style="position: static;">
413
+ <div class="vx-user-panel-top">
414
+ <div class="user">
415
+ <!-- <img src="https://s3-eu-west-1.amazonaws.com/eu.v-comply.com/profile_pic/large/1612591416420_Satyendar.png" alt=""> -->
416
+ <span class="user vx-d-flex vx-align-center vx-justify-center">UC</span>
417
+ </div>
418
+ <div class="user-details">
419
+ <p class="name">User Caption</p>
420
+ <p class="email">qa.user@outlook.com</p>
421
+ </div>
422
+ </div>
423
+ <div class="vx-user-panel-bottom">
424
+ <ul>
425
+ <li><span><strong>SUBSCRIPTION :</strong></span><span>Expired</span></li>
426
+ <li><span><strong>EXPIRING ON :</strong></span><span>01-May-2021</span></li>
427
+ <li><span><strong>Support Pin :</strong></span><span>945013</span></li>
428
+ </ul>
429
+ </div>
430
+ <div class="vx-user-panel-action vx-d-flex vx-justify-center">
431
+ <button class="vx-btn md primary outline">Edit Profile</button>
432
+ <button class="vx-btn md primary">Logout</button>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ <div class="code-view vx-mb-5" id="userPanel">
439
+ <div class="code-navigation">
440
+ <button class="active" data-tab="userPanelLayouthtml">HTML</button>
441
+ <button data-tab="userPanelLayoutless">CSS</button>
442
+ </div>
443
+ <code class="language-markup active" id="userPanelLayouthtml">
444
+ <script type="prism-html-markup">
445
+ <div class="vx-user-panel">
446
+ <div class="vx-user-panel-top">
447
+ <div class="user">
448
+ <!-- <img src="https://s3-eu-west-1.amazonaws.com/eu.v-comply.com/profile_pic/large/1612591416420_Satyendar.png" alt=""> -->
449
+ <span class="user vx-d-flex vx-align-center vx-justify-center">UC</span>
450
+ </div>
451
+ <div class="user-details">
452
+ <p class="name">User Caption</p>
453
+ <p class="email">qa.user@outlook.com</p>
454
+ </div>
455
+ </div>
456
+ <div class="vx-user-panel-bottom">
457
+ <ul>
458
+ <li><span><strong>SUBSCRIPTION :</strong></span><span>Expired</span></li>
459
+ <li><span><strong>EXPIRING ON :</strong></span><span>01-May-2021</span></li>
460
+ <li><span><strong>Support Pin :</strong></span><span>945013</span></li>
461
+ </ul>
462
+ </div>
463
+ <div class="vx-user-panel-action vx-d-flex vx-justify-center">
464
+ <button class="vx-btn md primary outline">Edit Profile</button>
465
+ <button class="vx-btn md primary">Logout</button>
466
+ </div>
467
+ </div>
468
+ </script>
469
+ </code>
470
+ <code class="language-markup" id="userPanelLayoutless">
471
+ <script type="prism-html-markup">
472
+ @import "~vx-design-system/css-build/less/user-panel/user-panel"
473
+ </script>
474
+ </code>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ <div class="page-quick-menu">
479
+ <div class="vx-sub-menu vx-p-0">
480
+ <h3
481
+ 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">
482
+ Contents</h3>
483
+ <ul class="vx-p-0">
484
+ <li><a href="#headerTopLayout"
485
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Header Top
486
+ Layout</a></li>
487
+ <li><a href="#headerBottomLayout"
488
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Header bottom Layout</a>
489
+ </li>
490
+ <li><a href="#fullHeaderLayout"
491
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Full Header</a></li>
492
+ <li><a href="#quickLinksLayout"
493
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Quick Link</a></li>
494
+ <li><a href="#userPanelLayout"
495
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">User Panel</a></li>
496
+ </ul>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </section>
501
+
502
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
503
+ <script async src="../less.js"></script>
504
+ <script src="../utility/prism.js"></script>
505
+ <script>
506
+
507
+ $(document).ready(function () {
508
+ $('button').click(function () {
509
+ var tab_id = $(this).attr('data-tab');
510
+ // $('preview-block button').removeClass('active');
511
+ $('.code-view vx-mb-5').removeClass('active');
512
+ // $(this).addClass('active');
513
+ $("#" + tab_id).toggleClass('active');
514
+ })
515
+ $('#headerTopLayout .code-navigation button').click(function () {
516
+ var tab_id = $(this).attr('data-tab');
517
+ $('#headerTopLayout .code-navigation button').removeClass('active');
518
+ $('#headerTopLayout .language-markup').removeClass('active');
519
+ console.log(tab_id)
520
+ $("#" + tab_id).addClass('active');
521
+ $(this).addClass('active');
522
+ })
523
+ $('#headerBottomLayout .code-navigation button').click(function () {
524
+ var tab_id = $(this).attr('data-tab');
525
+ $('#headerBottomLayout .code-navigation button').removeClass('active');
526
+ $('#headerBottomLayout .language-markup').removeClass('active');
527
+ console.log(tab_id)
528
+ $("#" + tab_id).addClass('active');
529
+ $(this).addClass('active');
530
+ })
531
+ $('#fullHeaderLayout .code-navigation button').click(function () {
532
+ var tab_id = $(this).attr('data-tab');
533
+ $('#fullHeaderLayout .code-navigation button').removeClass('active');
534
+ $('#fullHeaderLayout .language-markup').removeClass('active');
535
+ console.log(tab_id)
536
+ $("#" + tab_id).addClass('active');
537
+ $(this).addClass('active');
538
+ })
539
+ $('#quickLinksLayout .code-navigation button').click(function () {
540
+ var tab_id = $(this).attr('data-tab');
541
+ $('#quickLinksLayout .code-navigation button').removeClass('active');
542
+ $('#quickLinksLayout .language-markup').removeClass('active');
543
+ console.log(tab_id)
544
+ $("#" + tab_id).addClass('active');
545
+ $(this).addClass('active');
546
+ })
547
+ $('#userPanelLayout .code-navigation button').click(function () {
548
+ var tab_id = $(this).attr('data-tab');
549
+ $('#userPanelLayout .code-navigation button').removeClass('active');
550
+ $('#userPanelLayout .language-markup').removeClass('active');
551
+ console.log(tab_id)
552
+ $("#" + tab_id).addClass('active');
553
+ $(this).addClass('active');
554
+ })
555
+ });
556
+ $('ul li a.vx-fs-3[href*="#"]')
557
+ .not('[href="#"]')
558
+ .not('[href="#0"]')
559
+ .click(function (event) {
560
+ if (
561
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
562
+ &&
563
+ location.hostname == this.hostname
564
+ ) {
565
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
566
+ $(this).addClass('active');
567
+ var target = $(this.hash);
568
+ console.log(target);
569
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
570
+ if (target.length) {
571
+ event.preventDefault();
572
+ $('html, body').animate({
573
+ scrollTop: target.offset().top - 110
574
+ }, 100, function () {
575
+ var $target = $(target);
576
+ $target.focus();
577
+ if ($target.is(":focus")) {
578
+ return false;
579
+ } else {
580
+ $target.attr('tabindex', '-1');
581
+ $target.focus();
582
+ };
583
+ });
584
+ }
585
+ }
586
+ });
587
+ </script>
588
+ </body>
589
+
590
+ </html>