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/mein-menu-active.html ADDED
@@ -0,0 +1,67 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <link rel="preconnect" href="https://fonts.gstatic.com">
5
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
6
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
7
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
8
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
9
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
10
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/main-menu.less" />
11
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
12
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
21
+ </head>
22
+ <body>
23
+ <h2 class=" titlevx-fs-4 vx-label-txt vx-lh-8 vx-fw-400">Active menu</h2>
24
+ <div class="page-devide">
25
+ <div class="left">
26
+ <section>
27
+ <div class="vx-main-menu">
28
+ <ul class="vx-d-block vx-p-0 vx-m-0">
29
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-3"><img src="../images/v-icon.svg" alt=""></a></li>
30
+ <li class="active"><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe908;</i></a></li>
31
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe907;</i></a></li>
32
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe932;</i></a></li>
33
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe904;</i></a></li>
34
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe905;</i></a></li>
35
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe903;</i></a></li>
36
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe902;</i></a></li>
37
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe913;</i></a></li>
38
+ </ul>
39
+ </div>
40
+ </section>
41
+ </div>
42
+ <div class="right">
43
+ <pre class="language-markup">
44
+ <code class="language-markup">
45
+ <script type="prism-html-markup">
46
+ <div class="vx-main-menu">
47
+ <ul class="vx-d-block vx-p-0 vx-m-0">
48
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-3"><img src="../images/v-icon.svg" alt=""></a></li>
49
+ <li class="active"><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe908;</i></a></li>
50
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe907;</i></a></li>
51
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe932;</i></a></li>
52
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe904;</i></a></li>
53
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe905;</i></a></li>
54
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe903;</i></a></li>
55
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe902;</i></a></li>
56
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe913;</i></a></li>
57
+ </ul>
58
+ </div>
59
+ </script>
60
+ </code>
61
+ </pre>
62
+ </div>
63
+ </div>
64
+ <script src="../less.js"></script>
65
+ <script src="../utility/prism.js"></script>
66
+ </body>
67
+ </html>
package/css-build/pages/mein-menu-sub-menu.html ADDED
@@ -0,0 +1,110 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <link rel="preconnect" href="https://fonts.gstatic.com">
5
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
6
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
7
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
8
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
9
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
10
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/main-menu.less" />
11
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
12
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
21
+ </head>
22
+ <body>
23
+ <h2 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-400">Default menu with Sub menu</h2>
24
+ <div class="page-devide">
25
+ <div class="left">
26
+ <section>
27
+ <div class="menu-wrapper vx-d-inline-flex">
28
+ <div class="vx-main-menu">
29
+ <ul class="vx-d-block vx-p-0 vx-m-0">
30
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-3"><img src="../images/v-icon.svg" alt=""></a></li>
31
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe908;</i></a></li>
32
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe907;</i></a></li>
33
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe932;</i></a></li>
34
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe904;</i></a></li>
35
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe905;</i></a></li>
36
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe903;</i></a></li>
37
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe902;</i></a></li>
38
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe913;</i></a></li>
39
+ </ul>
40
+ </div>
41
+ <div class="vx-sub-menu vx-p-0" id="sub-menu">
42
+ <button class="vx-toggle-menu" type="button" onclick="toggleSubmenu()" id="toggleButton">
43
+ <span class="bg">
44
+ <span id="togglebuttomIcon"></span>
45
+ </span>
46
+ </button>
47
+ <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">
48
+ <span class="vx-bg-vColor"></span>
49
+ Module name
50
+ </h3>
51
+ <ul class="vx-p-0">
52
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Color Palette</a></li>
53
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Fonts</a></li>
54
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Base</a></li>
55
+ <li>
56
+ <a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Common Layout</a>
57
+ </li>
58
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Typography</a></li>
59
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Iconography</a></li>
60
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">No data Illustrations</a></li>
61
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Avatars</a></li>
62
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Controls</a></li>
63
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Succrss smile</a></li>
64
+ </ul>
65
+ </div>
66
+ </div>
67
+
68
+ </section>
69
+ </div>
70
+ <div class="right">
71
+ <pre class="language-markup">
72
+ <code class="language-markup">
73
+ <script type="prism-html-markup">
74
+ <div class="vx-main-menu">
75
+ <ul class="vx-d-block vx-p-0 vx-m-0">
76
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-3"><img src="../images/v-icon.svg" alt=""></a></li>
77
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe908;</i></a></li>
78
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe907;</i></a></li>
79
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe932;</i></a></li>
80
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe904;</i></a></li>
81
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe905;</i></a></li>
82
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe903;</i></a></li>
83
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe902;</i></a></li>
84
+
85
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe913;</i></a></li>
86
+ </ul>
87
+ </div>
88
+ </script>
89
+ </code>
90
+ </pre>
91
+ </div>
92
+ </div>
93
+ <script src="../less.js"></script>
94
+ <script src="../utility/prism.js"></script>
95
+ <script>
96
+ function toggleSubmenu() {
97
+ var subMenu = document.getElementById("sub-menu");
98
+ var ToggleBtn = document.getElementById("toggleButton");
99
+ var ToggleBtnIcon = document.getElementById("togglebuttomIcon");
100
+ // var leftMenuContainer = document.getElementById("left-menu-container");
101
+ // var pageHeader = document.getElementById("headerToggle");
102
+ subMenu.classList.toggle("toggle");
103
+ ToggleBtn.classList.toggle("toggle");
104
+ ToggleBtnIcon.classList.toggle("toggle");
105
+ // leftMenuContainer.classList.toggle("toggle");
106
+ // pageHeader.classList.toggle("toggle");
107
+ }
108
+ </script>
109
+ </body>
110
+ </html>
package/css-build/pages/mein-menu-tooltip.html ADDED
@@ -0,0 +1,70 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <link rel="preconnect" href="https://fonts.gstatic.com">
5
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
6
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
7
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
8
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
9
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
10
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/main-menu.less" />
11
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
12
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
21
+ </head>
22
+ <body>
23
+ <h2 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-400">Menu with tooltip</h2>
24
+ <h2 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-400"></h2>
25
+ <div class="page-devide">
26
+ <div class="left">
27
+ <section>
28
+ <div class="vx-main-menu">
29
+ <ul class="vx-d-block vx-p-0 vx-m-0">
30
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-3" data-title="Governance Dashboard"><img src="../images/v-icon.svg" alt=""></a></li>
31
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Organization"><i class="icons">&#xe908;</i></a></li>
32
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Risk"><i class="icons">&#xe907;</i></a></li>
33
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Assurance"><i class="icons">&#xe932;</i></a></li>
34
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Contract"><i class="icons">&#xe904;</i></a></li>
35
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Policy"><i class="icons">&#xe905;</i></a></li>
36
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Survey"><i class="icons">&#xe903;</i></a></li>
37
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Forms"><i class="icons">&#xe902;</i></a></li>
38
+ <!-- <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Ask"><i class="icons">&#xe91f;</i></a></li> -->
39
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Setting"><i class="icons">&#xe913;</i></a></li>
40
+ </ul>
41
+ </div>
42
+ </section>
43
+ </div>
44
+ <div class="right">
45
+ <pre class="language-markup">
46
+ <code class="language-markup">
47
+ <script type="prism-html-markup">
48
+ <div class="vx-main-menu">
49
+ <ul class="vx-d-block vx-p-0 vx-m-0">
50
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-3" data-title="Governance Dashboard"><img src="../images/v-icon.svg" alt=""></a></li>
51
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Organization"><i class="icons">&#xe908;</i></a></li>
52
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Risk"><i class="icons">&#xe907;</i></a></li>
53
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Assurance"><i class="icons">&#xe932;</i></a></li>
54
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Contract"><i class="icons">&#xe904;</i></a></li>
55
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Policy"><i class="icons">&#xe905;</i></a></li>
56
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Survey"><i class="icons">&#xe903;</i></a></li>
57
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Forms"><i class="icons">&#xe902;</i></a></li>
58
+
59
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Setting"><i class="icons">&#xe913;</i></a></li>
60
+ </ul>
61
+ </div>
62
+ </script>
63
+ </code>
64
+ </pre>
65
+ </div>
66
+ </div>
67
+ <script src="../less.js"></script>
68
+ <script src="../utility/prism.js"></script>
69
+ </body>
70
+ </html>
package/css-build/pages/mein-menu.html ADDED
@@ -0,0 +1,321 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <link rel="preconnect" href="https://fonts.gstatic.com">
6
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
7
+ rel="stylesheet">
8
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
9
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
10
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
11
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
12
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/main-menu.less" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-bottom.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
24
+ <link rel="stylesheet/less" type="text/css" href="../less/icons/icons.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/width/width.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
28
+ </head>
29
+
30
+ <body>
31
+
32
+ <section>
33
+ <div class="head vx-mb-5">
34
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Main menu</h2>
35
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">This sub menu will appear after left menu</p>
36
+ </div>
37
+ <div class="vx-d-flex vx-align-start">
38
+ <div class="page-container">
39
+ <div class="container" id="diagramlayout">
40
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Main Menu Layout</h3>
41
+ <div class="vx-d-flex">
42
+ <div class="vx-pl-5 vx-pr-5 vx-w-50">
43
+ <img src="../images/example/primary-menu.svg" alt="">
44
+ </div>
45
+ <div class="vx-pl-5 vx-pr-5 vx-w-50">
46
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">VComply Logo</h3>
47
+ <img src="../images/example/vcomply-icon-m.svg" class="vx-mb-5" alt="">
48
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Primary Menu Icon</h3>
49
+ <img src="../images/example/menu-icon-m.svg" alt="">
50
+ </div>
51
+ </div>
52
+ </div>
53
+ <div class="container" id="defaultLayout">
54
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Normal View</h3>
55
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
56
+ It is left most menu of any VComply product, it contains the list of products with their icons which is activated in an users account.
57
+ </p>
58
+ <div class="preview-block">
59
+ <div class="action-buttons">
60
+ <button class="vx-btn md transparent">
61
+ <i class="icons">&#xe9b6;</i> Copy Code
62
+ </button>
63
+ <button class="vx-btn md transparent" data-tab="default">
64
+ <i class="icons rotate">&#xea95;</i> View Code
65
+ </button>
66
+ </div>
67
+ <div class="preview-container vx-d-flex vx-justify-center">
68
+ <div class="vx-main-menu" style="height: 500px;">
69
+ <ul class="vx-d-block vx-p-0 vx-m-0">
70
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-3"><img src="../images/v-icon.svg" alt=""></a></li>
71
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe908;</i></a></li>
72
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe907;</i></a></li>
73
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe932;</i></a></li>
74
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe904;</i></a></li>
75
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe905;</i></a></li>
76
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe903;</i></a></li>
77
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe902;</i></a></li>
78
+ <!-- <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe91f;</i></a></li> -->
79
+
80
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe913;</i></a></li>
81
+ </ul>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ <div class="code-view vx-mb-5" id="default">
86
+ <div class="code-navigation">
87
+ <button class="active" data-tab="defaultLayputhtml">HTML</button>
88
+ <button data-tab="defaultLayputless">CSS</button>
89
+ </div>
90
+ <code class="language-markup active" id="defaultLayputhtml">
91
+ <script type="prism-html-markup">
92
+ <div class="vx-main-menu">
93
+ <ul class="vx-d-block vx-p-0 vx-m-0">
94
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-3"><img src="../images/v-icon.svg" alt=""></a></li>
95
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe908;</i></a></li>
96
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe907;</i></a></li>
97
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe932;</i></a></li>
98
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe904;</i></a></li>
99
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe905;</i></a></li>
100
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe903;</i></a></li>
101
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe902;</i></a></li>
102
+ <!-- <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe91f;</i></a></li> -->
103
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe913;</i></a></li>
104
+ </ul>
105
+ </div>
106
+ </script>
107
+ </code>
108
+ <code class="language-markup" id="defaultLayputless">
109
+ <script type="prism-html-markup">
110
+ @import "~vx-design-system/css-build/less/left-menu/left-menu.less"
111
+ </script>
112
+ </code>
113
+ </div>
114
+ </div>
115
+ <div class="container" id="tooltipLayput">
116
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Hover View With Tooltip</h3>
117
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
118
+ It is left most menu of any VComply product, it contains the list of products with their icons which is activated in an users account.
119
+ current active product is visible with blue foreground. hovering over this will show the name of product/module in a tooltip.
120
+ </p>
121
+ <div class="preview-block">
122
+ <div class="action-buttons">
123
+ <button class="vx-btn md transparent">
124
+ <i class="icons">&#xe9b6;</i> Copy Code
125
+ </button>
126
+ <button class="vx-btn md transparent" data-tab="tooltip">
127
+ <i class="icons rotate">&#xea95;</i> View Code
128
+ </button>
129
+ </div>
130
+ <div class="preview-container vx-d-flex vx-justify-center">
131
+ <div class="vx-main-menu" style="height: 500px;">
132
+ <ul class="vx-d-block vx-p-0 vx-m-0">
133
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-3" data-title="Governance Dashboard"><img src="../images/v-icon.svg" alt=""></a></li>
134
+ <li class="active"><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4 hover" data-title="Organization"><i class="icons">&#xe908;</i></a></li>
135
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Risk"><i class="icons">&#xe907;</i></a></li>
136
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Assurance"><i class="icons">&#xe932;</i></a></li>
137
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Contract"><i class="icons">&#xe904;</i></a></li>
138
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Policy"><i class="icons">&#xe905;</i></a></li>
139
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Survey"><i class="icons">&#xe903;</i></a></li>
140
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Forms"><i class="icons">&#xe902;</i></a></li>
141
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Setting"><i class="icons">&#xe913;</i></a></li>
142
+ </ul>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ <div class="code-view vx-mb-5" id="tooltip">
147
+ <div class="code-navigation">
148
+ <button class="active" data-tab="tooltiphtml">HTML</button>
149
+ <button data-tab="tooltipless">CSS</button>
150
+ </div>
151
+ <code class="language-markup active" id="tooltiphtml">
152
+ <script type="prism-html-markup">
153
+ <div class="vx-main-menu">
154
+ <ul class="vx-d-block vx-p-0 vx-m-0">
155
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-3" data-title="Governance Dashboard"><img src="../images/v-icon.svg" alt=""></a></li>
156
+ <li class="active"><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Organization"><i class="icons">&#xe908;</i></a></li>
157
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Risk"><i class="icons">&#xe907;</i></a></li>
158
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Assurance"><i class="icons">&#xe932;</i></a></li>
159
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Contract"><i class="icons">&#xe904;</i></a></li>
160
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Policy"><i class="icons">&#xe905;</i></a></li>
161
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Survey"><i class="icons">&#xe903;</i></a></li>
162
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Forms"><i class="icons">&#xe902;</i></a></li>
163
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4" data-title="Setting"><i class="icons">&#xe913;</i></a></li>
164
+ </ul>
165
+ </div>
166
+ </script>
167
+ </code>
168
+ <code class="language-markup" id="tooltipless">
169
+ <script type="prism-html-markup">
170
+ @import "~vx-design-system/css-build/less/left-menu/left-menu.less"
171
+ </script>
172
+ </code>
173
+ </div>
174
+ </div>
175
+ <div class="container" id="activeLayput">
176
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Active View</h3>
177
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
178
+ It is left most menu of any VComply product, it contains the list of products with their icons which is activated in an users account. current active product is visible with blue foreground.
179
+ </p>
180
+ <div class="preview-block">
181
+ <div class="action-buttons">
182
+ <button class="vx-btn md transparent">
183
+ <i class="icons">&#xe9b6;</i> Copy Code
184
+ </button>
185
+ <button class="vx-btn md transparent" data-tab="active">
186
+ <i class="icons rotate">&#xea95;</i> View Code
187
+ </button>
188
+ </div>
189
+ <div class="preview-container vx-d-flex vx-justify-center">
190
+ <div class="vx-main-menu" style="height: 500px;">
191
+ <ul class="vx-d-block vx-p-0 vx-m-0">
192
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-3"><img src="../images/v-icon.svg" alt=""></a></li>
193
+ <li class="active"><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe908;</i></a></li>
194
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe907;</i></a></li>
195
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe932;</i></a></li>
196
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe904;</i></a></li>
197
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe905;</i></a></li>
198
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe903;</i></a></li>
199
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe902;</i></a></li>
200
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe913;</i></a></li>
201
+ </ul>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ <div class="code-view vx-mb-5" id="active">
206
+ <div class="code-navigation">
207
+ <button class="active" data-tab="activehtml">HTML</button>
208
+ <button data-tab="activeless">CSS</button>
209
+ </div>
210
+ <code class="language-markup active" id="activehtml">
211
+ <script type="prism-html-markup">
212
+ <div class="vx-main-menu">
213
+ <ul class="vx-d-block vx-p-0 vx-m-0">
214
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-3"><img src="../images/v-icon.svg" alt=""></a></li>
215
+ <li class="active"><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe908;</i></a></li>
216
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe907;</i></a></li>
217
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe932;</i></a></li>
218
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe904;</i></a></li>
219
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe905;</i></a></li>
220
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe903;</i></a></li>
221
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe902;</i></a></li>
222
+ <li><a href="#" class="vx-d-flex vx-justify-center vx-fw-400 vx-p-4 vx-fs-4"><i class="icons">&#xe913;</i></a></li>
223
+ </ul>
224
+ </div>
225
+ </script>
226
+ </code>
227
+ <code class="language-markup" id="activeless">
228
+ <script type="prism-html-markup">
229
+ @import "~vx-design-system/css-build/less/left-menu/left-menu.less"
230
+ </script>
231
+ </code>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ <div class="page-quick-menu">
236
+ <div class="vx-sub-menu vx-p-0">
237
+ <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>
238
+ <ul class="vx-p-0">
239
+ <li><a href="#diagramlayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Menu Layout</a></li>
240
+ <li><a href="#defaultLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Default View</a></li>
241
+ <li><a href="#tooltipLayput" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Hover View With Tooltip</a></li>
242
+ <li><a href="#activeLayput" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Active View</a></li>
243
+ </ul>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
250
+ <script src="../less.js"></script>
251
+ <script src="../utility/prism.js"></script>
252
+
253
+ <script>
254
+ $(document).ready(function () {
255
+ $('button').click(function () {
256
+ var tab_id = $(this).attr('data-tab');
257
+ $('.code-view vx-mb-5').removeClass('active');
258
+ $("#" + tab_id).toggleClass('active');
259
+ })
260
+ $('#defaultLayout .code-navigation button').click(function () {
261
+ var tab_id = $(this).attr('data-tab');
262
+ $('#defaultLayout .code-navigation button').removeClass('active');
263
+ $('#defaultLayout .language-markup').removeClass('active');
264
+ console.log(tab_id)
265
+ $("#" + tab_id).addClass('active');
266
+ $(this).addClass('active');
267
+ })
268
+ $('#activeLayput .code-navigation button').click(function () {
269
+ var tab_id = $(this).attr('data-tab');
270
+ $('#activeLayput .code-navigation button').removeClass('active');
271
+ $('#activeLayput .language-markup').removeClass('active');
272
+ console.log(tab_id)
273
+ $("#" + tab_id).addClass('active');
274
+ $(this).addClass('active');
275
+ })
276
+ $('#tooltipLayput .code-navigation button').click(function () {
277
+ var tab_id = $(this).attr('data-tab');
278
+ $('#tooltipLayput .code-navigation button').removeClass('active');
279
+ $('#tooltipLayput .language-markup').removeClass('active');
280
+ console.log(tab_id)
281
+ $("#" + tab_id).addClass('active');
282
+ $(this).addClass('active');
283
+ })
284
+
285
+ });
286
+ $('ul li a.vx-fs-3[href*="#"]')
287
+ .not('[href="#"]')
288
+ .not('[href="#0"]')
289
+ .click(function (event) {
290
+ if (
291
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
292
+ &&
293
+ location.hostname == this.hostname
294
+ ) {
295
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
296
+ $(this).addClass('active');
297
+ var target = $(this.hash);
298
+ console.log(target);
299
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
300
+ if (target.length) {
301
+ event.preventDefault();
302
+ $('html, body').animate({
303
+ scrollTop: target.offset().top - 110
304
+ }, 100, function () {
305
+ var $target = $(target);
306
+ $target.focus();
307
+ if ($target.is(":focus")) {
308
+ return false;
309
+ } else {
310
+ $target.attr('tabindex', '-1');
311
+ $target.focus();
312
+ };
313
+ });
314
+ }
315
+ }
316
+ });
317
+
318
+ </script>
319
+ </body>
320
+
321
+ </html>