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/sub-menu.html ADDED
@@ -0,0 +1,396 @@
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/left-menu/sub-menu.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-bottom.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-right.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
24
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/icons/icons.less" />
28
+ </head>
29
+
30
+ <body>
31
+ <section>
32
+ <div class="head vx-mb-5">
33
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Sub Menu</h2>
34
+ <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>
35
+ </div>
36
+ <div class="vx-d-flex vx-align-start">
37
+ <div class="page-container">
38
+ <div class="container" id="diagramlayout">
39
+ <div class="head vx-mb-5">
40
+ <h2 class="title vx-label-txt vx-m-0">Sub Menu Layout</h2>
41
+ </div>
42
+ <div class="devide vx-d-flex">
43
+ <div class="column vx-pl-5 vx-pr-5">
44
+ <!-- <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">VComply Logo</h3> -->
45
+ <img src="../images/example/graph-sec-menu.JPG" class="vx-mb-5" alt="">
46
+ </div>
47
+ </div>
48
+ </div>
49
+ <div class="container" id="defaultLayput">
50
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Default Sub Menu</h3>
51
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
52
+ It is list of pages and actions specific to a product/module. In some module it contains file upload/filter like feature in bottom section.
53
+ </p>
54
+ <div class="preview-block">
55
+ <div class="action-buttons">
56
+ <button class="vx-btn md transparent">
57
+ <i class="icons">&#xe9b6;</i> Copy Code
58
+ </button>
59
+ <button class="vx-btn md transparent" data-tab="default">
60
+ <i class="icons rotate">&#xea95;</i> View Code
61
+ </button>
62
+ </div>
63
+ <div class="preview-container">
64
+ <div class="vx-sub-menu">
65
+ <h3 class="vx-title vx-lh-12 vx-tt-uppercase vx-fw-500 vx-label-txt vx-d-flex vx-align-center vx-ml-3 vx-mr-3">
66
+ <span class="vx-bg-blue"></span>
67
+ Module name
68
+ </h3>
69
+ <ul>
70
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 1</a></li>
71
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 2</a></li>
72
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 3</a></li>
73
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 4</a></li>
74
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 5</a></li>
75
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 6</a></li>
76
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 7</a></li>
77
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 8</a></li>
78
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 9</a></li>
79
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 10</a></li>
80
+ </ul>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ <div class="code-view vx-mb-5" id="default">
85
+ <div class="code-navigation">
86
+ <button class="active" data-tab="defaultLayputhtml">HTML</button>
87
+ <button data-tab="defaultLayputless">CSS</button>
88
+ </div>
89
+ <code class="language-markup active" id="defaultLayputhtml">
90
+ <script type="prism-html-markup">
91
+ <div class="vx-sub-menu">
92
+ <h3 class="vx-title vx-lh-12 vx-tt-uppercase vx-fw-500 vx-label-txt vx-d-flex vx-align-center vx-ml-3 vx-mr-3">
93
+ <span class="vx-bg-blue"></span>
94
+ Module name
95
+ </h3>
96
+ <ul>
97
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 1</a></li>
98
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 2</a></li>
99
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 3</a></li>
100
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 4</a></li>
101
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 5</a></li>
102
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 6</a></li>
103
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 7</a></li>
104
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 8</a></li>
105
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 9</a></li>
106
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 10</a></li>
107
+ </ul>
108
+ </div>
109
+ </script>
110
+ </code>
111
+ <code class="language-markup" id="defaultLayputless">
112
+ <script type="prism-html-markup">
113
+ @import "~vx-design-system/css-build/less/left-menu/sub-menu.less"
114
+ </script>
115
+ </code>
116
+ </div>
117
+ </div>
118
+ <div class="container" id="activeLayput">
119
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Active Sub Menu</h3>
120
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
121
+ It is list of pages and actions specific to a product/module. In some module it contains file upload/filter like feature in bottom section. The currently active page is highlighted in blue color.
122
+ </p>
123
+ <div class="preview-block">
124
+ <div class="action-buttons">
125
+ <button class="vx-btn md transparent">
126
+ <i class="icons">&#xe9b6;</i> Copy Code
127
+ </button>
128
+ <button class="vx-btn md transparent" data-tab="active">
129
+ <i class="icons rotate">&#xea95;</i> View Code
130
+ </button>
131
+ </div>
132
+ <div class="preview-container">
133
+ <div class="vx-sub-menu">
134
+ <h3 class="vx-title vx-lh-12 vx-tt-uppercase vx-fw-500 vx-label-txt vx-d-flex vx-align-center vx-ml-3 vx-mr-3">
135
+ <span class="vx-bg-blue"></span>
136
+ Module name
137
+ </h3>
138
+ <ul>
139
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 active">Sub Menu 1</a></li>
140
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 2</a></li>
141
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 3</a></li>
142
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 4</a></li>
143
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 5</a></li>
144
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 6</a></li>
145
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 7</a></li>
146
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 8</a></li>
147
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 9</a></li>
148
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 10</a></li>
149
+ </ul>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ <div class="code-view vx-mb-5" id="active">
154
+ <div class="code-navigation">
155
+ <button class="active" data-tab="activeLayputhtml">HTML</button>
156
+ <button data-tab="activeLayputless">CSS</button>
157
+ </div>
158
+ <code class="language-markup active" id="activeLayputhtml">
159
+ <script type="prism-html-markup">
160
+ <div class="vx-sub-menu">
161
+ <h3 class="vx-title vx-lh-12 vx-tt-uppercase vx-fw-500 vx-label-txt vx-d-flex vx-align-center vx-ml-3 vx-mr-3">
162
+ <span class="vx-bg-blue"></span>
163
+ Module name
164
+ </h3>
165
+ <ul>
166
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 active">Sub Menu 1</a></li>
167
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 2</a></li>
168
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 3</a></li>
169
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 4</a></li>
170
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 5</a></li>
171
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 6</a></li>
172
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 7</a></li>
173
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 8</a></li>
174
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 9</a></li>
175
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Sub Menu 10</a></li>
176
+ </ul>
177
+ </div>
178
+ </script>
179
+ </code>
180
+ <code class="language-markup" id="activeLayputless">
181
+ <script type="prism-html-markup">
182
+ @import "~vx-design-system/css-build/less/left-menu/sub-menu.less"
183
+ </script>
184
+ </code>
185
+ </div>
186
+ </div>
187
+ <div class="container" id="toggleLayput">
188
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">With toggle sub menu</h3>
189
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
190
+ Sub menu can act as drawer where ever needed, it can be collapsed and expanded by the user.
191
+ </p>
192
+ <div class="preview-block">
193
+ <div class="action-buttons">
194
+ <button class="vx-btn md transparent">
195
+ <i class="icons">&#xe9b6;</i> Copy Code
196
+ </button>
197
+ <button class="vx-btn md transparent" data-tab="toggle">
198
+ <i class="icons rotate">&#xea95;</i> View Code
199
+ </button>
200
+ </div>
201
+ <div class="preview-container">
202
+ <div class="menu-wrapper vx-d-inline-flex">
203
+ <div class="vx-main-menu">
204
+ <ul class="vx-d-block vx-p-0 vx-m-0">
205
+ <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>
206
+ <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>
207
+ <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>
208
+ <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>
209
+ <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>
210
+ <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>
211
+ <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>
212
+ <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>
213
+ <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>
214
+ </ul>
215
+ </div>
216
+ <div class="vx-sub-menu" id="sub-menu">
217
+ <button class="vx-toggle-menu" type="button" onclick="toggleSubmenu()" id="toggleButton">
218
+ <i class="icons">&#xe90f;</i>
219
+ </button>
220
+ <h3 class="vx-title vx-lh-12 vx-tt-uppercase vx-fw-500 vx-label-txt vx-d-flex vx-align-center vx-ml-3 vx-mr-3">
221
+ <span class="vx-bg-blue"></span>
222
+ Module name
223
+ </h3>
224
+ <ul>
225
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Color Palette</a></li>
226
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Fonts</a></li>
227
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Base</a></li>
228
+ <li>
229
+ <a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Common Layout</a>
230
+ </li>
231
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Typography</a></li>
232
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Iconography</a></li>
233
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">No data Illustrations</a></li>
234
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Avatars</a></li>
235
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Controls</a></li>
236
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Success smile</a></li>
237
+ </ul>
238
+ <div class="vx-bottom-section">
239
+ <button class="vx-d-flex vx-align-center"><i class="icons vx-pr-3">&#xea91;</i> Filter</button>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ <div class="code-view vx-mb-5" id="toggle">
246
+ <div class="code-navigation">
247
+ <button class="active" data-tab="toggleLayputhtml">HTML</button>
248
+ <button data-tab="toggleLayputless">CSS</button>
249
+ </div>
250
+ <code class="language-markup active" id="toggleLayputhtml">
251
+ <script type="prism-html-markup">
252
+ <div class="menu-wrapper vx-d-inline-flex">
253
+ <div class="vx-main-menu">
254
+ <ul class="vx-d-block vx-p-0 vx-m-0">
255
+ <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>
256
+ <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>
257
+ <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>
258
+ <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>
259
+ <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>
260
+ <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>
261
+ <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>
262
+ <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>
263
+ <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>
264
+ </ul>
265
+ </div>
266
+ <div class="vx-sub-menu" id="sub-menu">
267
+ <button class="vx-toggle-menu" type="button" onclick="toggleSubmenu()" id="toggleButton">
268
+ <i class="icons">&#xe90f;</i>
269
+ </button>
270
+ <h3 class="vx-title vx-lh-12 vx-tt-uppercase vx-fw-500 vx-label-txt vx-d-flex vx-align-center vx-ml-3 vx-mr-3">
271
+ <span class="vx-bg-blue"></span>
272
+ Module name
273
+ </h3>
274
+ <ul>
275
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Color Palette</a></li>
276
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Fonts</a></li>
277
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Base</a></li>
278
+ <li>
279
+ <a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Common Layout</a>
280
+ </li>
281
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Typography</a></li>
282
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Iconography</a></li>
283
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">No data Illustrations</a></li>
284
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Avatars</a></li>
285
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Controls</a></li>
286
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Success smile</a></li>
287
+ </ul>
288
+ <div class="vx-bottom-section">
289
+ <button class="vx-d-flex vx-align-center vx-justify-center"></button>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </script>
294
+ </code>
295
+ <code class="language-markup" id="toggleLayputless">
296
+ <script type="prism-html-markup">
297
+ @import "~vx-design-system/css-build/less/left-menu/main-menu.less"
298
+ @import "~vx-design-system/css-build/less/left-menu/sub-menu.less"
299
+ </script>
300
+ </code>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ <div class="page-quick-menu">
305
+ <div class="vx-sub-menu">
306
+ <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">Contents</h3>
307
+ <ul class="vx-p-0">
308
+ <li><a href="#diagramlayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 active">Sub Menu Layout</a></li>
309
+ <li><a href="#defaultLayput" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Default Sub Menu</a></li>
310
+ <li><a href="#activeLayput" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">Active Sub Menu</a></li>
311
+ <li><a href="#toggleLayput" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400">With toggle sub menu</a></li>
312
+ </ul>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </section>
317
+
318
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
319
+ <script src="../less.js"></script>
320
+ <script src="../utility/prism.js"></script>
321
+
322
+ <script>
323
+ function toggleSubmenu() {
324
+ var subMenu = document.getElementById("sub-menu");
325
+ var ToggleBtn = document.getElementById("toggleButton");
326
+ var ToggleBtnIcon = document.getElementById("togglebuttomIcon");
327
+ subMenu.classList.toggle("toggle");
328
+ ToggleBtn.classList.toggle("toggle");
329
+ ToggleBtnIcon.classList.toggle("toggle");
330
+ }
331
+ $(document).ready(function () {
332
+ $('button').click(function () {
333
+ var tab_id = $(this).attr('data-tab');
334
+ $('.code-view vx-mb-5').removeClass('active');
335
+ $("#" + tab_id).toggleClass('active');
336
+ })
337
+ $('#defaultLayput .code-navigation button').click(function () {
338
+ var tab_id = $(this).attr('data-tab');
339
+ $('#defaultLayput .code-navigation button').removeClass('active');
340
+ $('#defaultLayput .language-markup').removeClass('active');
341
+ console.log(tab_id)
342
+ $("#" + tab_id).addClass('active');
343
+ $(this).addClass('active');
344
+ })
345
+ $('#activeLayput .code-navigation button').click(function () {
346
+ var tab_id = $(this).attr('data-tab');
347
+ $('#activeLayput .code-navigation button').removeClass('active');
348
+ $('#activeLayput .language-markup').removeClass('active');
349
+ console.log(tab_id)
350
+ $("#" + tab_id).addClass('active');
351
+ $(this).addClass('active');
352
+ })
353
+ $('#toggleLayput .code-navigation button').click(function () {
354
+ var tab_id = $(this).attr('data-tab');
355
+ $('#toggleLayput .code-navigation button').removeClass('active');
356
+ $('#toggleLayput .language-markup').removeClass('active');
357
+ console.log(tab_id)
358
+ $("#" + tab_id).addClass('active');
359
+ $(this).addClass('active');
360
+ })
361
+ });
362
+ $('ul li a.vx-fs-3[href*="#"]')
363
+ .not('[href="#"]')
364
+ .not('[href="#0"]')
365
+ .click(function (event) {
366
+ if (
367
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
368
+ &&
369
+ location.hostname == this.hostname
370
+ ) {
371
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
372
+ $(this).addClass('active');
373
+ var target = $(this.hash);
374
+ console.log(target);
375
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
376
+ if (target.length) {
377
+ event.preventDefault();
378
+ $('html, body').animate({
379
+ scrollTop: target.offset().top - 110
380
+ }, 100, function () {
381
+ var $target = $(target);
382
+ $target.focus();
383
+ if ($target.is(":focus")) {
384
+ return false;
385
+ } else {
386
+ $target.attr('tabindex', '-1');
387
+ $target.focus();
388
+ };
389
+ });
390
+ }
391
+ }
392
+ });
393
+ </script>
394
+ </body>
395
+
396
+ </html>