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/button.html ADDED
@@ -0,0 +1,993 @@
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
+ <link rel="preconnect" href="https://fonts.gstatic.com">
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
10
+ rel="stylesheet">
11
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
12
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/index.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-top.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-right.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/padding/padding.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
24
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
29
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
30
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
31
+ </head>
32
+
33
+ <body>
34
+ <section>
35
+ <div class="head vx-mb-5">
36
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Buttons</h2>
37
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
38
+ Buttons allow an application to communicate action and direct user intent. Buttons are of multiple sizes and can be used as per space available and the layout configuration.</p>
39
+ </div>
40
+ <div class="vx-d-flex vx-align-start">
41
+ <div class="page-container">
42
+ <div class="container" id="fillColorButtonsLayout">
43
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Fill Color Button</h3>
44
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
45
+ Generally VComply System Fill color buttons are used for taking any action like submit form etc.
46
+ </p>
47
+ <div class="preview-block">
48
+ <div class="action-buttons">
49
+ <button class="vx-btn md transparent">
50
+ <i class="icons">&#xe9b6;</i> Copy Code
51
+ </button>
52
+ <button class="vx-btn md transparent" data-tab="fillColorButtons">
53
+ <i class="icons rotate">&#xea95;</i> View Code
54
+ </button>
55
+ </div>
56
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
57
+ <button class="vx-btn md">Default</button>
58
+ <button class="vx-btn md grey">Grey</button>
59
+ <button class="vx-btn md primary">Primary</button>
60
+ <button class="vx-btn md red">Danger</button>
61
+ </div>
62
+ </div>
63
+ <div class="code-view vx-mb-5" id="fillColorButtons">
64
+ <div class="code-navigation">
65
+ <button class="active">HTML</button>
66
+ <button>CSS</button>
67
+ </div>
68
+ <code class="language-markup">
69
+ <script type="prism-html-markup">
70
+ <button class="vx-btn md">Default</button>
71
+ <button class="vx-btn md grey">Grey</button>
72
+ <button class="vx-btn md primary">Primary</button>
73
+ <button class="vx-btn md red">Danger</button>
74
+ </script>
75
+ </code>
76
+ </div>
77
+ </div>
78
+ <div class="container" id="fillColorButtonsDisabledLayout">
79
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Fill Color Button Disabled</h3>
80
+
81
+ <div class="preview-block">
82
+ <div class="action-buttons">
83
+ <button class="vx-btn md transparent">
84
+ <i class="icons">&#xe9b6;</i> Copy Code
85
+ </button>
86
+ <button class="vx-btn md transparent" data-tab="fillColorButtonsDisabled">
87
+ <i class="icons rotate">&#xea95;</i> View Code
88
+ </button>
89
+ </div>
90
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
91
+ <button class="vx-btn md" disabled>Default</button>
92
+ <button class="vx-btn md grey" disabled>Grey</button>
93
+ <button class="vx-btn md primary" disabled>Primary</button>
94
+ <button class="vx-btn md red" disabled>Danger</button>
95
+ </div>
96
+ </div>
97
+ <div class="code-view vx-mb-5" id="fillColorButtonsDisabled">
98
+ <div class="code-navigation">
99
+ <button class="active">HTML</button>
100
+ <button>CSS</button>
101
+ </div>
102
+ <code class="language-markup">
103
+ <script type="prism-html-markup">
104
+ <button class="vx-btn md" disabled>Default</button>
105
+ <button class="vx-btn md grey" disabled>Grey</button>
106
+ <button class="vx-btn md primary" disabled>Primary</button>
107
+ <button class="vx-btn md red" disabled>Danger</button>
108
+ </script>
109
+ </code>
110
+ </div>
111
+ </div>
112
+ <div class="container" id="outlineButtonsLayout">
113
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Outline Button</h3>
114
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
115
+ Generally in VComply System outline are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons.
116
+ </p>
117
+ <div class="preview-block">
118
+ <div class="action-buttons">
119
+ <button class="vx-btn md transparent">
120
+ <i class="icons">&#xe9b6;</i> Copy Code
121
+ </button>
122
+ <button class="vx-btn md transparent" data-tab="outlineButtons">
123
+ <i class="icons rotate">&#xea95;</i> View Code
124
+ </button>
125
+ </div>
126
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
127
+ <button class="vx-btn md outline">Default</button>
128
+ <button class="vx-btn md grey outline">Grey</button>
129
+ <button class="vx-btn md primary outline">Primary</button>
130
+ <button class="vx-btn md red outline">Danger</button>
131
+ </div>
132
+ </div>
133
+ <div class="code-view vx-mb-5" id="outlineButtons">
134
+ <div class="code-navigation">
135
+ <button class="active">HTML</button>
136
+ <button>CSS</button>
137
+ </div>
138
+ <code class="language-markup">
139
+ <script type="prism-html-markup">
140
+ <button class="vx-btn md outline">Default</button>
141
+ <button class="vx-btn md grey outline">Grey</button>
142
+ <button class="vx-btn md primary outline">Primary</button>
143
+ <button class="vx-btn md red outline">Danger</button>
144
+ </script>
145
+ </code>
146
+ </div>
147
+ </div>
148
+ <div class="container" id="outlineDisabledButtonsLayout">
149
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Outline Disabled Button</h3>
150
+
151
+ <div class="preview-block">
152
+ <div class="action-buttons">
153
+ <button class="vx-btn md transparent">
154
+ <i class="icons">&#xe9b6;</i> Copy Code
155
+ </button>
156
+ <button class="vx-btn md transparent" data-tab="outlineDisabledButtons">
157
+ <i class="icons rotate">&#xea95;</i> View Code
158
+ </button>
159
+ </div>
160
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
161
+ <button class="vx-btn md outline" disabled>Default</button>
162
+ <button class="vx-btn md grey outline" disabled>Grey</button>
163
+ <button class="vx-btn md primary outline" disabled>Primary</button>
164
+ <button class="vx-btn md red outline" disabled>Danger</button>
165
+ </div>
166
+ </div>
167
+ <div class="code-view vx-mb-5" id="outlineDisabledButtons">
168
+ <div class="code-navigation">
169
+ <button class="active">HTML</button>
170
+ <button>CSS</button>
171
+ </div>
172
+ <code class="language-markup">
173
+ <script type="prism-html-markup">
174
+ <button class="vx-btn md outline" disabled>Default</button>
175
+ <button class="vx-btn md grey outline" disabled>Grey</button>
176
+ <button class="vx-btn md primary outline" disabled>Primary</button>
177
+ <button class="vx-btn md red outline" disabled>Danger</button>
178
+ </script>
179
+ </code>
180
+ </div>
181
+ </div>
182
+ <div class="container" id="textButtonsLayout">
183
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Text Buttons</h3>
184
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
185
+ Generally in VComply System text buttons are used for data list.
186
+ </p>
187
+ <div class="preview-block">
188
+ <div class="action-buttons">
189
+ <button class="vx-btn md transparent">
190
+ <i class="icons">&#xe9b6;</i> Copy Code
191
+ </button>
192
+ <button class="vx-btn md transparent" data-tab="textButtons">
193
+ <i class="icons rotate">&#xea95;</i> View Code
194
+ </button>
195
+ </div>
196
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
197
+ <button class="vx-btn md transparent">Default</button>
198
+ <button class="vx-btn md transparent grey">Grey</button>
199
+ <button class="vx-btn md transparent primary">Primary</button>
200
+ <button class="vx-btn md transparent red">Danger</button>
201
+ </div>
202
+ </div>
203
+ <div class="code-view vx-mb-5" id="textButtons">
204
+ <div class="code-navigation">
205
+ <button class="active">HTML</button>
206
+ <button>CSS</button>
207
+ </div>
208
+ <code class="language-markup">
209
+ <script type="prism-html-markup">
210
+ <button class="vx-btn md transparent">Default</button>
211
+ <button class="vx-btn md transparent grey">Grey</button>
212
+ <button class="vx-btn md transparent primary">Primary</button>
213
+ <button class="vx-btn md transparent red">Danger</button>
214
+ </script>
215
+ </code>
216
+ </div>
217
+ </div>
218
+ <div class="container" id="smallFillButtonsLayout">
219
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Small Fill Buttons</h3>
220
+
221
+ <div class="preview-block">
222
+ <div class="action-buttons">
223
+ <button class="vx-btn md transparent">
224
+ <i class="icons">&#xe9b6;</i> Copy Code
225
+ </button>
226
+ <button class="vx-btn md transparent" data-tab="smallFillSizeButtons">
227
+ <i class="icons rotate">&#xea95;</i> View Code
228
+ </button>
229
+ </div>
230
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
231
+ <button class="vx-btn sm">Default</button>
232
+ <button class="vx-btn sm grey">Grey</button>
233
+ <button class="vx-btn sm primary">Primary</button>
234
+ <button class="vx-btn sm red">Danger</button>
235
+ </div>
236
+ </div>
237
+ <div class="code-view vx-mb-5" id="smallFillSizeButtons">
238
+ <div class="code-navigation">
239
+ <button class="active">HTML</button>
240
+ <button>CSS</button>
241
+ </div>
242
+ <code class="language-markup">
243
+ <script type="prism-html-markup">
244
+ <button class="vx-btn sm">Default</button>
245
+ <button class="vx-btn sm grey">Grey</button>
246
+ <button class="vx-btn sm primary">Primary</button>
247
+ <button class="vx-btn sm red">Danger</button>
248
+ </script>
249
+ </code>
250
+ </div>
251
+ </div>
252
+ <div class="container" id="smallOutlineButtonsLayout">
253
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Small Outline Buttons</h3>
254
+
255
+ <div class="preview-block">
256
+ <div class="action-buttons">
257
+ <button class="vx-btn md transparent">
258
+ <i class="icons">&#xe9b6;</i> Copy Code
259
+ </button>
260
+ <button class="vx-btn md transparent" data-tab="smallOutlineSizeButtons">
261
+ <i class="icons rotate">&#xea95;</i> View Code
262
+ </button>
263
+ </div>
264
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
265
+ <button class="vx-btn sm outline">Default</button>
266
+ <button class="vx-btn sm grey outline">Grey</button>
267
+ <button class="vx-btn sm primary outline">Primary</button>
268
+ <button class="vx-btn sm red outline">Danger</button>
269
+ </div>
270
+ </div>
271
+ <div class="code-view vx-mb-5" id="smallOutlineSizeButtons">
272
+ <div class="code-navigation">
273
+ <button class="active">HTML</button>
274
+ <button>CSS</button>
275
+ </div>
276
+ <code class="language-markup">
277
+ <script type="prism-html-markup">
278
+ <button class="vx-btn sm outline">Default</button>
279
+ <button class="vx-btn sm grey outline">Grey</button>
280
+ <button class="vx-btn sm primary outline">Primary</button>
281
+ <button class="vx-btn sm red outline">Danger</button>
282
+ </script>
283
+ </code>
284
+ </div>
285
+ </div>
286
+ <div class="container" id="lergeFillButtonsLayout">
287
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Lerge Fill Buttons</h3>
288
+
289
+ <div class="preview-block">
290
+ <div class="action-buttons">
291
+ <button class="vx-btn md transparent">
292
+ <i class="icons">&#xe9b6;</i> Copy Code
293
+ </button>
294
+ <button class="vx-btn md transparent" data-tab="lergeFillSizeButtons">
295
+ <i class="icons rotate">&#xea95;</i> View Code
296
+ </button>
297
+ </div>
298
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
299
+ <button class="vx-btn lg">Default</button>
300
+ <button class="vx-btn lg grey">Grey</button>
301
+ <button class="vx-btn lg primary">Primary</button>
302
+ <button class="vx-btn lg red">Danger</button>
303
+ </div>
304
+ </div>
305
+ <div class="code-view vx-mb-5" id="lergeFillSizeButtons">
306
+ <div class="code-navigation">
307
+ <button class="active">HTML</button>
308
+ <button>CSS</button>
309
+ </div>
310
+ <code class="language-markup">
311
+ <script type="prism-html-markup">
312
+ <button class="vx-btn lg">Default</button>
313
+ <button class="vx-btn lg grey">Grey</button>
314
+ <button class="vx-btn lg primary">Primary</button>
315
+ <button class="vx-btn lg red">Danger</button>
316
+ </script>
317
+ </code>
318
+ </div>
319
+ </div>
320
+ <div class="container" id="lergeOutlineButtonsLayout">
321
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Lerge Outline Buttons</h3>
322
+
323
+ <div class="preview-block">
324
+ <div class="action-buttons">
325
+ <button class="vx-btn md transparent">
326
+ <i class="icons">&#xe9b6;</i> Copy Code
327
+ </button>
328
+ <button class="vx-btn md transparent" data-tab="lergeOutlineSizeButtons">
329
+ <i class="icons rotate">&#xea95;</i> View Code
330
+ </button>
331
+ </div>
332
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
333
+ <button class="vx-btn lg outline">Default</button>
334
+ <button class="vx-btn lg grey outline">Grey</button>
335
+ <button class="vx-btn lg primary outline">Primary</button>
336
+ <button class="vx-btn lg red outline">Danger</button>
337
+ </div>
338
+ </div>
339
+ <div class="code-view vx-mb-5" id="lergeOutlineSizeButtons">
340
+ <div class="code-navigation">
341
+ <button class="active">HTML</button>
342
+ <button>CSS</button>
343
+ </div>
344
+ <code class="language-markup">
345
+ <script type="prism-html-markup">
346
+ <button class="vx-btn lg outline">Default</button>
347
+ <button class="vx-btn lg grey outline">Grey</button>
348
+ <button class="vx-btn lg primary outline">Primary</button>
349
+ <button class="vx-btn lg red outline">Danger</button>
350
+ </script>
351
+ </code>
352
+ </div>
353
+ </div>
354
+ <div class="container" id="lergeBlockButtonsLayout">
355
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Lerge Block Buttons</h3>
356
+
357
+ <div class="preview-block">
358
+ <div class="action-buttons">
359
+ <button class="vx-btn md transparent">
360
+ <i class="icons">&#xe9b6;</i> Copy Code
361
+ </button>
362
+ <button class="vx-btn md transparent" data-tab="lergeBlockSizeButtons">
363
+ <i class="icons rotate">&#xea95;</i> View Code
364
+ </button>
365
+ </div>
366
+ <div class="preview-container vx-p-5 vx-bg-white">
367
+ <button class="vx-btn block">Default</button>
368
+ <button class="vx-btn block primary">Primary</button>
369
+ <button class="vx-btn block primary outline">Primary Outline</button>
370
+ <button class="vx-btn block primary outline light">Primary Light Outline</button>
371
+ <button class="vx-btn block transparent primary">Transparent</button>
372
+ </div>
373
+ </div>
374
+ <div class="code-view vx-mb-5" id="lergeBlockSizeButtons">
375
+ <div class="code-navigation">
376
+ <button class="active">HTML</button>
377
+ <button>CSS</button>
378
+ </div>
379
+ <code class="language-markup">
380
+ <script type="prism-html-markup">
381
+ <button class="vx-btn block">Default</button>
382
+ <button class="vx-btn block primary">Primary</button>
383
+ <button class="vx-btn block primary outline">Primary Outline</button>
384
+ <button class="vx-btn block primary outline light">Primary Light Outline</button>
385
+ <button class="vx-btn block transparent primary">Transparent</button>
386
+ </script>
387
+ </code>
388
+ </div>
389
+ </div>
390
+ <div class="container" id="lergeRoundedBlockButtonsLayout">
391
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Lerge Rounded Block Buttons</h3>
392
+
393
+ <div class="preview-block">
394
+ <div class="action-buttons">
395
+ <button class="vx-btn md transparent">
396
+ <i class="icons">&#xe9b6;</i> Copy Code
397
+ </button>
398
+ <button class="vx-btn md transparent" data-tab="lergeRoundedBlockSizeButtons">
399
+ <i class="icons rotate">&#xea95;</i> View Code
400
+ </button>
401
+ </div>
402
+ <div class="preview-container vx-p-5 vx-bg-white">
403
+ <button class="vx-btn block rounded">Default</button>
404
+ <button class="vx-btn block rounded primary">Primary</button>
405
+ <button class="vx-btn block rounded primary outline">Primary Outline</button>
406
+ <button class="vx-btn block rounded primary outline light">Primary Light Outline</button>
407
+ <button class="vx-btn block rounded transparent primary">Transparent</button>
408
+ </div>
409
+ </div>
410
+ <div class="code-view vx-mb-5" id="lergeRoundedBlockSizeButtons">
411
+ <div class="code-navigation">
412
+ <button class="active">HTML</button>
413
+ <button>CSS</button>
414
+ </div>
415
+ <code class="language-markup">
416
+ <script type="prism-html-markup">
417
+ <button class="vx-btn block">Default</button>
418
+ <button class="vx-btn block primary">Primary</button>
419
+ <button class="vx-btn block primary outline">Primary Outline</button>
420
+ <button class="vx-btn block primary outline light">Primary Light Outline</button>
421
+ <button class="vx-btn block transparent primary">Transparent</button>
422
+ </script>
423
+ </code>
424
+ </div>
425
+ </div>
426
+ <div class="container" id="iconFillButtonsLayout">
427
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Icon Fill Buttons</h3>
428
+
429
+ <div class="preview-block">
430
+ <div class="action-buttons">
431
+ <button class="vx-btn md transparent">
432
+ <i class="icons">&#xe9b6;</i> Copy Code
433
+ </button>
434
+ <button class="vx-btn md transparent" data-tab="iconFillSizeButtons">
435
+ <i class="icons rotate">&#xea95;</i> View Code
436
+ </button>
437
+ </div>
438
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
439
+ <button class="vx-btn icon"><i class="icons">&#xe9eb;</i></button>
440
+ <button class="vx-btn icon grey"><i class="icons">&#xe9eb;</i></button>
441
+ <button class="vx-btn icon primary"><i class="icons">&#xe9eb;</i></button>
442
+ <button class="vx-btn icon red"><i class="icons">&#xe9eb;</i></button>
443
+ </div>
444
+ </div>
445
+ <div class="code-view vx-mb-5" id="iconFillSizeButtons">
446
+ <div class="code-navigation">
447
+ <button class="active">HTML</button>
448
+ <button>CSS</button>
449
+ </div>
450
+ <code class="language-markup">
451
+ <script type="prism-html-markup">
452
+ <button class="vx-btn icon"><i class="icons">&#xe9eb;</i></button>
453
+ <button class="vx-btn icon grey"><i class="icons">&#xe9eb;</i></button>
454
+ <button class="vx-btn icon primary"><i class="icons">&#xe9eb;</i></button>
455
+ <button class="vx-btn icon red"><i class="icons">&#xe9eb;</i></button>
456
+ </script>
457
+ </code>
458
+ </div>
459
+ </div>
460
+ <div class="container" id="smallIconFillButtonsLayout">
461
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Small Icon Fill Buttons</h3>
462
+
463
+ <div class="preview-block">
464
+ <div class="action-buttons">
465
+ <button class="vx-btn md transparent">
466
+ <i class="icons">&#xe9b6;</i> Copy Code
467
+ </button>
468
+ <button class="vx-btn md transparent" data-tab="smallIconFillSizeButtons">
469
+ <i class="icons rotate">&#xea95;</i> View Code
470
+ </button>
471
+ </div>
472
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
473
+ <button class="vx-btn icon sm"><i class="icons">&#xe9eb;</i></button>
474
+ <button class="vx-btn icon sm grey"><i class="icons">&#xe9eb;</i></button>
475
+ <button class="vx-btn icon sm primary"><i class="icons">&#xe9eb;</i></button>
476
+ <button class="vx-btn icon sm red"><i class="icons">&#xe9eb;</i></button>
477
+ </div>
478
+ </div>
479
+ <div class="code-view vx-mb-5" id="smallIconFillSizeButtons">
480
+ <div class="code-navigation">
481
+ <button class="active">HTML</button>
482
+ <button>CSS</button>
483
+ </div>
484
+ <code class="language-markup">
485
+ <script type="prism-html-markup">
486
+ <button class="vx-btn icon sm"><i class="icons">&#xe9eb;</i></button>
487
+ <button class="vx-btn icon sm grey"><i class="icons">&#xe9eb;</i></button>
488
+ <button class="vx-btn icon sm primary"><i class="icons">&#xe9eb;</i></button>
489
+ <button class="vx-btn icon sm red"><i class="icons">&#xe9eb;</i></button>
490
+ </script>
491
+ </code>
492
+ </div>
493
+ </div>
494
+ <div class="container" id="iconOutlineButtonsLayout">
495
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Icon Outline Buttons</h3>
496
+
497
+ <div class="preview-block">
498
+ <div class="action-buttons">
499
+ <button class="vx-btn md transparent">
500
+ <i class="icons">&#xe9b6;</i> Copy Code
501
+ </button>
502
+ <button class="vx-btn md transparent" data-tab="iconOutlineSizeButtons">
503
+ <i class="icons rotate">&#xea95;</i> View Code
504
+ </button>
505
+ </div>
506
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
507
+ <button class="vx-btn outline icon"><i class="icons">&#xe9eb;</i></button>
508
+ <button class="vx-btn outline icon grey"><i class="icons">&#xe9eb;</i></button>
509
+ <button class="vx-btn outline icon primary"><i class="icons">&#xe9eb;</i></button>
510
+ <button class="vx-btn outline icon red"><i class="icons">&#xe9eb;</i></button>
511
+ </div>
512
+ </div>
513
+ <div class="code-view vx-mb-5" id="iconOutlineSizeButtons">
514
+ <div class="code-navigation">
515
+ <button class="active">HTML</button>
516
+ <button>CSS</button>
517
+ </div>
518
+ <code class="language-markup">
519
+ <script type="prism-html-markup">
520
+ <button class="vx-btn outline icon"><i class="icons">&#xe9eb;</i></button>
521
+ <button class="vx-btn outline icon grey"><i class="icons">&#xe9eb;</i></button>
522
+ <button class="vx-btn outline icon primary"><i class="icons">&#xe9eb;</i></button>
523
+ <button class="vx-btn outline icon red"><i class="icons">&#xe9eb;</i></button>
524
+ </script>
525
+ </code>
526
+ </div>
527
+ </div>
528
+ <div class="container" id="smallIconOutlineButtonsLayout">
529
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Small Icon Outline Buttons</h3>
530
+
531
+ <div class="preview-block">
532
+ <div class="action-buttons">
533
+ <button class="vx-btn md transparent">
534
+ <i class="icons">&#xe9b6;</i> Copy Code
535
+ </button>
536
+ <button class="vx-btn md transparent" data-tab="smallIconOutlineSizeButtons">
537
+ <i class="icons rotate">&#xea95;</i> View Code
538
+ </button>
539
+ </div>
540
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
541
+ <button class="vx-btn outline icon sm"><i class="icons">&#xe9eb;</i></button>
542
+ <button class="vx-btn outline icon sm grey"><i class="icons">&#xe9eb;</i></button>
543
+ <button class="vx-btn outline icon sm primary"><i class="icons">&#xe9eb;</i></button>
544
+ <button class="vx-btn outline icon sm red"><i class="icons">&#xe9eb;</i></button>
545
+ </div>
546
+ </div>
547
+ <div class="code-view vx-mb-5" id="smallIconOutlineSizeButtons">
548
+ <div class="code-navigation">
549
+ <button class="active">HTML</button>
550
+ <button>CSS</button>
551
+ </div>
552
+ <code class="language-markup">
553
+ <script type="prism-html-markup">
554
+ <button class="vx-btn outline icon sm"><i class="icons">&#xe9eb;</i></button>
555
+ <button class="vx-btn outline icon sm grey"><i class="icons">&#xe9eb;</i></button>
556
+ <button class="vx-btn outline icon sm primary"><i class="icons">&#xe9eb;</i></button>
557
+ <button class="vx-btn outline icon sm red"><i class="icons">&#xe9eb;</i></button>
558
+ </script>
559
+ </code>
560
+ </div>
561
+ </div>
562
+ <div class="container" id="fillColortextIconButtonsLayout">
563
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Fill Color text with Icon Button</h3>
564
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
565
+ Generally VComply System Fill color buttons are used for taking any action like submit form etc.
566
+ </p>
567
+ <div class="preview-block">
568
+ <div class="action-buttons">
569
+ <button class="vx-btn md transparent">
570
+ <i class="icons">&#xe9b6;</i> Copy Code
571
+ </button>
572
+ <button class="vx-btn md transparent" data-tab="fillColortextIconButtons">
573
+ <i class="icons rotate">&#xea95;</i> View Code
574
+ </button>
575
+ </div>
576
+ <div class="preview-container vx-p-5 vx-d-flex vx-justify-center vx-bg-white">
577
+ <button class="vx-btn md"><i class="icons">&#xe923;</i>Default</button>
578
+ <button class="vx-btn md grey"><i class="icons">&#xe923;</i>Grey</button>
579
+ <button class="vx-btn md primary"><i class="icons">&#xe923;</i>Primary</button>
580
+ <button class="vx-btn md red"><i class="icons">&#xe923;</i>Danger</button>
581
+ </div>
582
+ </div>
583
+ <div class="code-view vx-mb-5" id="fillColortextIconButtons">
584
+ <div class="code-navigation">
585
+ <button class="active">HTML</button>
586
+ <button>CSS</button>
587
+ </div>
588
+ <code class="language-markup">
589
+ <script type="prism-html-markup">
590
+ <button class="vx-btn md">Default</button>
591
+ <button class="vx-btn md grey">Grey</button>
592
+ <button class="vx-btn md primary">Primary</button>
593
+ <button class="vx-btn md red">Danger</button>
594
+ </script>
595
+ </code>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ <div class="page-quick-menu">
600
+ <div class="vx-sub-menu vx-p-0">
601
+ <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>
602
+ <ul class="vx-p-0">
603
+ <li><a href="#fillColorButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Fill Color Button</a></li>
604
+ <li><a href="#fillColorButtonsDisabledLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Fill Color Button Disabled</a></li>
605
+ <li><a href="#outlineButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Outline Buttons</a></li>
606
+ <li><a href="#outlineDisabledButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Outline Disabled Buttons</a></li>
607
+ <li><a href="#textButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Text Buttons</a></li>
608
+ <li><a href="#smallFillButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Small Fill Buttons</a></li>
609
+ <li><a href="#smallOutlineButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Small Outline Buttons</a></li>
610
+ <li><a href="#lergeFillButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Lerge Fill Buttons</a></li>
611
+ <li><a href="#lergeOutlineButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Lerge Outline Buttons</a></li>
612
+ <li><a href="#lergeBlockButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Lerge Block Buttons</a></li>
613
+ <li><a href="#lergeRoundedBlockButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Lerge Rounded Block Buttons</a></li>
614
+ <li><a href="#iconFillButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Icon Fill Buttons</a></li>
615
+ <li><a href="#smallIconFillButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Small Icon Fill Buttons</a></li>
616
+ <li><a href="#iconOutlineButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Icon Outline Buttons</a></li>
617
+ <li><a href="#smallIconOutlineButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Small Icon Outline Buttons</a></li>
618
+ <li><a href="#fillColortextIconButtonsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Fill Color text with Icon Button</a></li>
619
+ </ul>
620
+ </div>
621
+ </div>
622
+ </div>
623
+ </section>
624
+
625
+
626
+
627
+ <!-- <section class="seperator">
628
+ <div class="container">
629
+ <div class="head vx-mb-5">
630
+ <h2 class="title vx-label-txt vx-m-0">Basic &amp; Medium Buttons</h2>
631
+ </div>
632
+ <button class="vx-btn md">Default</button>
633
+ <button class="vx-btn md primary">Primary</button>
634
+ <button class="vx-btn md primary outline">Primary Outline</button>
635
+ <button class="vx-btn md primary outline light">Primary Light Outline</button>
636
+ <button class="vx-btn md transparent primary">Transparent</button>
637
+ </div>
638
+ <div class="vx-pl-5 vx-pr-5 vx-d-block">
639
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
640
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
641
+ Buttons allow an application to communicate action and direct user intent.
642
+ Buttons are of multiple sizes and can be used as per space available and the layout configuration.
643
+ </p>
644
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be
645
+ used</h3>
646
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
647
+ <input type="text" id="mainMenu1" class="code" value='<button class="vx-btn md">Default</button>
648
+ <button class="vx-btn md primary">Primary</button>
649
+ <button class="vx-btn md primary outline">Primary Outline</button>
650
+ <button class="vx-btn md primary outline light">Primary Light Outline</button>
651
+ <button class="vx-btn md transparent primary">Transparent</button>'>
652
+ <button onclick="copyToClipboard1()" class="copy"><i class="icons">&#xe9b6;</i> Copy to
653
+ clipboard</button>
654
+ <code class="language-markup">
655
+ <script type="prism-html-markup">
656
+ <div class="head vx-mb-5">
657
+ <h2 class="title vx-label-txt vx-m-0">Basic &amp; Medium Buttons</h2>
658
+ </div>
659
+ <button class="vx-btn md">Default</button>
660
+ <button class="vx-btn md primary">Primary</button>
661
+ <button class="vx-btn md primary outline">Primary Outline</button>
662
+ <button class="vx-btn md primary outline light">Primary Light Outline</button>
663
+ <button class="vx-btn md transparent primary">Transparent</button>
664
+ </script>
665
+ </code>
666
+ </p>
667
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Info</h3>
668
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
669
+ <b>Primary buttons</b> look heavy on purpose. They direct the user’s attention to
670
+ the primary action the application is suggesting that the user take. <br><br>
671
+ <b>Outline buttons</b> provide a lighter weight button style. They are used to indicate
672
+ a secondary action that compliments a primary action or to reduce visual noise
673
+ when there are many action of equal importance on the page. <br><br>
674
+ <b>Default & Transparent buttons</b> are used in multiple scenarios. They are used as tertiary
675
+ buttons. They can also be used inline because they are different from content in style and recognizable
676
+ as buttons alongside content.
677
+ </p>
678
+ </div>
679
+ </section> -->
680
+
681
+
682
+
683
+ <!-- <section>
684
+ <div class="container">
685
+ <div class="head vx-mb-5">
686
+ <h2 class="title vx-label-txt vx-m-0">Small Buttons</h2>
687
+ </div>
688
+ <button class="vx-btn sm">Default</button>
689
+ <button class="vx-btn sm primary">Primary</button>
690
+ <button class="vx-btn sm primary outline">Primary Outline</button>
691
+ <button class="vx-btn sm primary outline light">Primary Light Outline</button>
692
+ <button class="vx-btn sm transparent primary">Transparent</button>
693
+ </div>
694
+ <div class="vx-pl-5 vx-pr-5 vx-d-block">
695
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
696
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
697
+ Add a text to describe the box size, space, animation color about the design.
698
+ </p>
699
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be
700
+ used</h3>
701
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
702
+ <input type="text" id="mainMenu2" class="code" value='<button class="vx-btn sm">Default</button>
703
+ <button class="vx-btn sm primary">Primary</button>
704
+ <button class="vx-btn sm primary outline">Primary Outline</button>
705
+ <button class="vx-btn sm primary outline light">Primary Light Outline</button>
706
+ <button class="vx-btn sm transparent primary">Transparent</button>'>
707
+ <button onclick="copyToClipboard2()" class="copy"><i class="icons">&#xe9b6;</i> Copy to
708
+ clipboard</button>
709
+ <code class="language-markup">
710
+ <script type="prism-html-markup">
711
+ <button class="vx-btn sm">Default</button>
712
+ <button class="vx-btn sm primary">Primary</button>
713
+ <button class="vx-btn sm primary outline">Primary Outline</button>
714
+ <button class="vx-btn sm primary outline light">Primary Light Outline</button>
715
+ <button class="vx-btn sm transparent primary">Transparent</button>
716
+ </script>
717
+ </code>
718
+ </p>
719
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Info</h3>
720
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
721
+ Add extra info if it is necessary to educate the user. <br><br> E.g. Settings icon is
722
+ always in the bottom of the menu. <br><br> VComply Icon is used for Governance
723
+ dashboard.
724
+ </p>
725
+ </div>
726
+ </section>
727
+ <section>
728
+ <div class="container">
729
+ <div class="head vx-mb-5">
730
+ <h2 class="title vx-label-txt vx-m-0">Large Buttons</h2>
731
+ </div>
732
+ <button class="vx-btn lg">Default</button>
733
+ <button class="vx-btn lg primary">Primary</button>
734
+ <button class="vx-btn lg primary outline">Primary Outline</button>
735
+ <button class="vx-btn lg primary outline light">Primary Light Outline</button>
736
+ <button class="vx-btn lg transparent primary">Transparent</button>
737
+ </div>
738
+ <div class="vx-pl-5 vx-pr-5 vx-d-block">
739
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
740
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
741
+ Add a text to describe the box size, space, animation color about the design.
742
+ </p>
743
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be
744
+ used</h3>
745
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
746
+ <input type="text" id="mainMenu3" class="code" value='<button class="vx-btn lg">Default</button>
747
+ <button class="vx-btn lg primary">Primary</button>
748
+ <button class="vx-btn lg primary outline">Primary Outline</button>
749
+ <button class="vx-btn lg primary outline light">Primary Light Outline</button>
750
+ <button class="vx-btn lg transparent primary">Transparent</button>'>
751
+ <button onclick="copyToClipboard3()" class="copy"><i class="icons">&#xe9b6;</i> Copy to
752
+ clipboard</button>
753
+ <code class="language-markup">
754
+ <script type="prism-html-markup">
755
+ <button class="vx-btn lg">Default</button>
756
+ <button class="vx-btn lg primary">Primary</button>
757
+ <button class="vx-btn lg primary outline">Primary Outline</button>
758
+ <button class="vx-btn lg primary outline light">Primary Light Outline</button>
759
+ <button class="vx-btn lg transparent primary">Transparent</button>
760
+ </script>
761
+ </code>
762
+ </p>
763
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Info</h3>
764
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
765
+ Add extra info if it is necessary to educate the user. <br><br> E.g. Settings icon is
766
+ always in the bottom of the menu. <br><br> VComply Icon is used for Governance
767
+ dashboard.
768
+ </p>
769
+ </div>
770
+ </section>
771
+ <section>
772
+ <div class="container">
773
+ <div class="head vx-mb-5">
774
+ <h2 class="title vx-label-txt vx-m-0">Disabled Buttons</h2>
775
+ </div>
776
+ <button class="vx-btn md" disabled>Default</button>
777
+ <button class="vx-btn md primary" disabled>Primary</button>
778
+ <button class="vx-btn md primary outline" disabled>Primary Outline</button>
779
+ <button class="vx-btn md primary outline light" disabled>Primary Light Outline</button>
780
+ <button class="vx-btn md transparent primary" disabled>Transparent</button>
781
+ </div>
782
+ <div class="vx-pl-5 vx-pr-5 vx-d-block">
783
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
784
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
785
+ Add a text to describe the box size, space, animation color about the design.
786
+ </p>
787
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be
788
+ used</h3>
789
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
790
+ <input type="text" id="mainMenu4" class="code" value='<button class="vx-btn md" disabled>Default</button>
791
+ <button class="vx-btn md primary" disabled>Primary</button>
792
+ <button class="vx-btn md primary outline" disabled>Primary Outline</button>
793
+ <button class="vx-btn md primary outline light" disabled>Primary Light Outline</button>
794
+ <button class="vx-btn md transparent primary" disabled>Transparent</button>'>
795
+ <button onclick="copyToClipboard4()" class="copy"><i class="icons">&#xe9b6;</i> Copy to
796
+ clipboard</button>
797
+ <code class="language-markup">
798
+ <script type="prism-html-markup">
799
+ <button class="vx-btn md" disabled>Default</button>
800
+ <button class="vx-btn md primary" disabled>Primary</button>
801
+ <button class="vx-btn md primary outline" disabled>Primary Outline</button>
802
+ <button class="vx-btn md primary outline light" disabled>Primary Light Outline</button>
803
+ <button class="vx-btn md transparent primary" disabled>Transparent</button>
804
+ </script>
805
+ </code>
806
+ </p>
807
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Info</h3>
808
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
809
+ Add extra info if it is necessary to educate the user. <br><br> E.g. Settings icon is
810
+ always in the bottom of the menu. <br><br> VComply Icon is used for Governance
811
+ dashboard.
812
+ </p>
813
+ </div>
814
+ </section> -->
815
+ <!-- <section>
816
+ <div class="container">
817
+ <div class="head vx-mb-5">
818
+ <h2 class="title vx-label-txt vx-m-0">Block Buttons</h2>
819
+ </div>
820
+ <button class="vx-btn block">Default</button>
821
+ <button class="vx-btn block primary">Primary</button>
822
+ <button class="vx-btn block primary outline">Primary Outline</button>
823
+ <button class="vx-btn block primary outline light">Primary Light Outline</button>
824
+ <button class="vx-btn block transparent primary">Transparent</button>
825
+ </div>
826
+ <div class="vx-pl-5 vx-pr-5 vx-d-block">
827
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
828
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
829
+ Add a text to describe the box size, space, animation color about the design.
830
+ </p>
831
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be
832
+ used</h3>
833
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
834
+ <input type="text" id="mainMenu5" class="code" value='<button class="vx-btn block">Default</button>
835
+ <button class="vx-btn block primary">Primary</button>
836
+ <button class="vx-btn block primary outline">Primary Outline</button>
837
+ <button class="vx-btn block primary outline light">Primary Light Outline</button>
838
+ <button class="vx-btn block transparent primary">Transparent</button>'>
839
+ <button onclick="copyToClipboard5()" class="copy"><i class="icons">&#xe9b6;</i> Copy to
840
+ clipboard</button>
841
+ <code class="language-markup">
842
+ <script type="prism-html-markup">
843
+ <button class="vx-btn block">Default</button>
844
+ <button class="vx-btn block primary">Primary</button>
845
+ <button class="vx-btn block primary outline">Primary Outline</button>
846
+ <button class="vx-btn block primary outline light">Primary Light Outline</button>
847
+ <button class="vx-btn block transparent primary">Transparent</button>
848
+ </script>
849
+ </code>
850
+ </p>
851
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Info</h3>
852
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
853
+ Add extra info if it is necessary to educate the user. <br><br> E.g. Settings icon is
854
+ always in the bottom of the menu. <br><br> VComply Icon is used for Governance
855
+ dashboard.
856
+ </p>
857
+ </div>
858
+ </section>
859
+ <section>
860
+ <div class="container">
861
+ <div class="head vx-mb-5">
862
+ <h2 class="title vx-label-txt vx-m-0">Icon Buttons</h2>
863
+ </div>
864
+ <button class="vx-btn icon">
865
+ <i class="icons">&#xe915;</i>
866
+ </button>
867
+ <button class="vx-btn icon primary">
868
+ <i class="icons">&#xe915;</i>
869
+ </button>
870
+ <button class="vx-btn icon primary outline">
871
+ <i class="icons">&#xe915;</i>
872
+ </button>
873
+ </div>
874
+ <div class="vx-pl-5 vx-pr-5 vx-d-block">
875
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Description</h3>
876
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
877
+ Add a text to describe the box size, space, animation color about the design.
878
+ </p>
879
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">The Structure to be
880
+ used</h3>
881
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
882
+ <input type="text" id="mainMenu6" class="code"
883
+ value='<button class="vx-btn icon"><i class="icons">&#xe915;</i></button>
884
+ <button class="vx-btn icon primary"><i class="icons">&#xe915;</i></button><button class="vx-btn icon primary outline"><i class="icons">&#xe915;</i></button>'>
885
+ <button onclick="copyToClipboard6()" class="copy"><i class="icons">&#xe9b6;</i> Copy to
886
+ clipboard</button>
887
+ <code class="language-markup">
888
+ <script type="prism-html-markup">
889
+ <button class="vx-btn icon">
890
+ <i class="icons">&#xe915;</i>
891
+ </button>
892
+ <button class="vx-btn icon primary">
893
+ <i class="icons">&#xe915;</i>
894
+ </button>
895
+ <button class="vx-btn icon primary outline">
896
+ <i class="icons">&#xe915;</i>
897
+ </button>
898
+ </script>
899
+ </code>
900
+ </p>
901
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-500 vx-p-5 vx-m-0 vx-pb-0">Info</h3>
902
+ <p class="vx-paragraph-text vx-p-5 vx-fs-3 vx-m-0 vx-ml-4 box">
903
+ Add extra info if it is necessary to educate the user. <br><br> E.g. Settings icon is
904
+ always in the bottom of the menu. <br><br> VComply Icon is used for Governance
905
+ dashboard.
906
+ </p>
907
+ </div>
908
+ </section> -->
909
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
910
+ <script src="../less.js"></script>
911
+ <script src="../utility/prism.js"></script>
912
+ <script>
913
+ // function copyToClipboard1() {
914
+ // var copyText = document.getElementById("mainMenu1");
915
+ // copyText.select();
916
+ // copyText.setSelectionRange(0, 999999999999999999999)
917
+ // document.execCommand('copy');
918
+ // alert("Copied the text");
919
+ // }
920
+ // function copyToClipboard2() {
921
+ // var copyText = document.getElementById("mainMenu2");
922
+ // copyText.select();
923
+ // copyText.setSelectionRange(0, 999999999999999999999)
924
+ // document.execCommand("copy");
925
+ // alert("Copied the text");
926
+ // }
927
+ // function copyToClipboard3() {
928
+ // var copyText = document.getElementById("mainMenu3");
929
+ // copyText.select();
930
+ // copyText.setSelectionRange(0, 999999999999999999999)
931
+ // document.execCommand("copy");
932
+ // alert("Copied the text");
933
+ // }
934
+ // function copyToClipboard4() {
935
+ // var copyText = document.getElementById("mainMenu4");
936
+ // copyText.select();
937
+ // copyText.setSelectionRange(0, 999999999999999999999)
938
+ // document.execCommand("copy");
939
+ // alert("Copied the text");
940
+ // }
941
+ // function copyToClipboard5() {
942
+ // var copyText = document.getElementById("mainMenu5");
943
+ // copyText.select();
944
+ // copyText.setSelectionRange(0, 999999999999999999999)
945
+ // document.execCommand("copy");
946
+ // alert("Copied the text");
947
+ // }
948
+ $(document).ready(function () {
949
+ $('button').click(function () {
950
+ var tab_id = $(this).attr('data-tab');
951
+ // $('preview-block button').removeClass('active');
952
+ $('.code-view vx-mb-5').removeClass('active');
953
+ // $(this).addClass('active');
954
+ $("#" + tab_id).toggleClass('active');
955
+ })
956
+ });
957
+ $('ul li a.vx-fs-3[href*="#"]')
958
+ .not('[href="#"]')
959
+ .not('[href="#0"]')
960
+ .click(function (event) {
961
+ if (
962
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
963
+ &&
964
+ location.hostname == this.hostname
965
+ ) {
966
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
967
+ $(this).addClass('active');
968
+ var target = $(this.hash);
969
+ console.log(target);
970
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
971
+ if (target.length) {
972
+ event.preventDefault();
973
+ $('html, body').animate({
974
+ scrollTop: target.offset().top - 110
975
+ }, 100, function () {
976
+ var $target = $(target);
977
+ $target.focus();
978
+ if ($target.is(":focus")) {
979
+ return false;
980
+ } else {
981
+ $target.attr('tabindex', '-1');
982
+ $target.focus();
983
+ };
984
+ });
985
+ }
986
+ }
987
+ });
988
+
989
+ </script>
990
+
991
+ </body>
992
+
993
+ </html>