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/dialog.html ADDED
@@ -0,0 +1,738 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Dialog</title>
9
+ <link rel="preconnect" href="https://fonts.gstatic.com">
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
11
+ rel="stylesheet">
12
+ <link rel="stylesheet/less" type="text/css" href="../less/index.less" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
14
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
15
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/dialog/dialog.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-top.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/margin/margin-bottom.less" />
24
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
29
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
30
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
31
+ <link rel="stylesheet/less" type="text/css" href="../less/width/width.less" />
32
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
33
+ <link rel="stylesheet/less" type="text/css" href="../less/forms/forms.less" />
34
+ <link rel="stylesheet/less" type="text/css" href="../less/animate/animation.less" />
35
+ <link rel="stylesheet/less" type="text/css" href="../less/animate/animate-slide-right.less" />
36
+ <link rel="stylesheet/less" type="text/css" href="../less/animate/animate-slide-left.less" />
37
+ </head>
38
+
39
+ <body>
40
+ <section>
41
+ <div class="head vx-mb-5">
42
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Dialog</h2>
43
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Dialogs inform users about a task and can contain decisive information that requires immediate attention.</p>
44
+ </div>
45
+ <div class="vx-d-flex vx-align-start">
46
+ <div class="page-container">
47
+ <div class="container" id="autoWidthDialog">
48
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Auto Width Dialog</h3>
49
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
50
+ Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account).
51
+ </p>
52
+ <div class="preview-block">
53
+ <div class="action-buttons">
54
+ <button class="vx-btn md transparent">
55
+ <i class="icons">&#xe9b6;</i> Copy Code
56
+ </button>
57
+ <button class="vx-btn md transparent" data-tab="autoWidth">
58
+ <i class="icons rotate">&#xea95;</i> View Code
59
+ </button>
60
+ </div>
61
+ <div class="preview-container">
62
+ <div class="vx-h-100 vx-d-flex vx-justify-center vx-align-center vx-p-5">
63
+ <button class="vx-btn md primary outline dialogExample" type="button" data-tab="openSimpleDialog">Open Auto Width Dialog</button>
64
+ <div class="vx-dialog-wrapper exapleDialog" id="openSimpleDialog" style="display: none;">
65
+ <div class="vx-dialog-overlay closeDialog"></div>
66
+ <div class="vx-dialog-simple">
67
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-dialog-title">Auto Width Dialog</h3>
68
+ <div class="vx-sub-menu vx-p-0">
69
+ <ul class="vx-p-0">
70
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">List One</a></li>
71
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">List Two</a></li>
72
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">List Three</a></li>
73
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">List Four</a></li>
74
+ <li><a href="#" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">List Five</a></li>
75
+ </ul>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <div class="code-view vx-mb-5" id="autoWidth">
83
+ <div class="code-navigation">
84
+ <button class="active">HTML</button>
85
+ <button>CSS</button>
86
+ </div>
87
+ <code class="language-markup">
88
+ <script type="prism-html-markup">
89
+ <div class="vx-dialog-simple">
90
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600 vx-dialog-title">Auto Width Dialog</h3>
91
+ </div>
92
+ </script>
93
+ </code>
94
+ </div>
95
+ </div>
96
+ <div class="container" id="deleteDialog">
97
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Delete Alert Dialog</h3>
98
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
99
+ Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account).
100
+ </p>
101
+ <div class="preview-block">
102
+ <div class="action-buttons">
103
+ <button class="vx-btn md transparent">
104
+ <i class="icons">&#xe9b6;</i> Copy Code
105
+ </button>
106
+ <button class="vx-btn md transparent" data-tab="codeDeleteDialog">
107
+ <i class="icons rotate">&#xea95;</i> View Code
108
+ </button>
109
+ </div>
110
+ <div class="preview-container">
111
+ <div class="vx-h-100 vx-d-flex vx-justify-center vx-align-center vx-p-5">
112
+ <button class="vx-btn md primary outline dialogExample" type="button" data-tab="openDeleteAlertDialog">Open Delete Alert Dialog</button>
113
+ <div class="vx-dialog-wrapper exapleDialog" id="openDeleteAlertDialog" style="display: none;">
114
+ <div class="vx-dialog-overlay closeDialog"></div>
115
+ <div class="vx-dialog-container dialog-alert">
116
+ <div class="vx-dialog-body-container">
117
+ <div class="vx-dialog-body">
118
+ <div class="vx-dialog-icon">
119
+ <div class="bin-icon">
120
+ <!-- [class.active]="animate" -->
121
+ <div id="lid" class="lid"></div>
122
+ <div id="box" class="box">
123
+ <div id="box-inner" class="box-inner">
124
+ <div id="bin-lines" class="bin-lines"></div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ <p class="vx-dialog-description">Delete data</p>
130
+ </div>
131
+ </div>
132
+ <div class="vx-dialog-footer">
133
+ <p class="info">Are you sure you would like to proceed?</p>
134
+ <div class="action">
135
+ <button class="vx-btn md closeDialog">No</button>
136
+ <button class="vx-btn md primary closeDialog">Yes</button>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ <div class="code-view vx-mb-5" id="codeDeleteDialog">
145
+ <div class="code-navigation">
146
+ <button class="active">HTML</button>
147
+ <button>CSS</button>
148
+ </div>
149
+ <code class="language-markup">
150
+ <script type="prism-html-markup">
151
+ <div class="vx-dialog-container dialog-alert">
152
+ <div class="vx-dialog-body-container">
153
+ <div class="vx-dialog-body">
154
+ <div class="vx-dialog-icon">
155
+ <div class="bin-icon">
156
+ <!-- [class.active]="animate" -->
157
+ <div id="lid" class="lid"></div>
158
+ <div id="box" class="box">
159
+ <div id="box-inner" class="box-inner">
160
+ <div id="bin-lines" class="bin-lines"></div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ <p class="vx-dialog-description">Delete data</p>
166
+ </div>
167
+ </div>
168
+ <div class="vx-dialog-footer">
169
+ <p class="info">Are you sure you would like to proceed?
170
+
171
+ </p>
172
+ <div class="action">
173
+ <button class="vx-btn md">No</button>
174
+ <button class="vx-btn md primary">Yes</button>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </script>
179
+ </code>
180
+ </div>
181
+ </div>
182
+ <div class="container" id="activeteDialog">
183
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Activate Dialog</h3>
184
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
185
+ Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account).
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="codeActivateDialog">
193
+ <i class="icons rotate">&#xea95;</i> View Code
194
+ </button>
195
+ </div>
196
+ <div class="preview-container">
197
+ <div class="vx-h-100 vx-d-flex vx-justify-center vx-align-center vx-p-5">
198
+ <button class="vx-btn md primary outline dialogExample" type="button" data-tab="openActiveDialog">Open Active Dialog</button>
199
+ <div class="vx-dialog-wrapper exapleDialog" id="openActiveDialog" style="display: none;">
200
+ <div class="vx-dialog-overlay closeDialog"></div>
201
+ <div class="vx-dialog-container dialog-alert">
202
+ <div class="vx-dialog-body-container">
203
+ <div class="vx-dialog-body">
204
+ <div class="vx-dialog-icon">
205
+ <div class="activateCircle">
206
+ <!-- [class.activeActiveIcon]="animate" -->
207
+ <span></span>
208
+ <span class="line-2"></span>
209
+ </div>
210
+ </div>
211
+ <p class="vx-dialog-description">Active data</p>
212
+ </div>
213
+ </div>
214
+ <div class="vx-dialog-footer">
215
+ <p class="info">Are you sure you would like to proceed?</p>
216
+ <div class="action">
217
+ <button class="vx-btn md closeDialog">No</button>
218
+ <button class="vx-btn md primary closeDialog">Yes</button>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ <div class="code-view vx-mb-5" id="codeActivateDialog">
227
+ <div class="code-navigation">
228
+ <button class="active">HTML</button>
229
+ <button>CSS</button>
230
+ </div>
231
+ <code class="language-markup">
232
+ <script type="prism-html-markup">
233
+ <div class="vx-dialog-container dialog-alert">
234
+ <div class="vx-dialog-body-container">
235
+ <div class="vx-dialog-body">
236
+ <div class="vx-dialog-icon">
237
+ <div class="activateCircle">
238
+ <!-- [class.activeActiveIcon]="animate" -->
239
+ <span></span>
240
+ <span class="line-2"></span>
241
+ </div>
242
+ </div>
243
+ <p class="vx-dialog-description">Active data</p>
244
+ </div>
245
+ </div>
246
+ <div class="vx-dialog-footer">
247
+ <p class="info">Are you sure you would like to proceed?</p>
248
+ <div class="action">
249
+ <button class="vx-btn md">No</button>
250
+ <button class="vx-btn md primary">Yes</button>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </script>
255
+ </code>
256
+ </div>
257
+ </div>
258
+ <div class="container" id="errorDialog">
259
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Error Dialog</h3>
260
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
261
+ Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account).
262
+ </p>
263
+ <div class="preview-block">
264
+ <div class="action-buttons">
265
+ <button class="vx-btn md transparent">
266
+ <i class="icons">&#xe9b6;</i> Copy Code
267
+ </button>
268
+ <button class="vx-btn md transparent" data-tab="codeErrorDialog">
269
+ <i class="icons rotate">&#xea95;</i> View Code
270
+ </button>
271
+ </div>
272
+ <div class="preview-container">
273
+ <div class="vx-h-100 vx-d-flex vx-justify-center vx-align-center vx-p-5">
274
+ <button class="vx-btn md primary outline dialogExample" type="button" data-tab="openErrorDialog">Open Error Dialog</button>
275
+ <div class="vx-dialog-wrapper exapleDialog" id="openErrorDialog" style="display: none;">
276
+ <div class="vx-dialog-overlay closeDialog"></div>
277
+ <div class="vx-dialog-container dialog-alert">
278
+ <div class="vx-dialog-body-container">
279
+ <div class="vx-dialog-body">
280
+ <div class="vx-dialog-icon vx-p-0">
281
+ <div class="error-icon">
282
+ <i class="icons">&#xe90a;</i>
283
+ </div>
284
+ </div>
285
+ <p class="vx-dialog-description">Error data</p>
286
+ </div>
287
+ </div>
288
+ <div class="vx-dialog-footer">
289
+ <p class="info">Are you sure you would like to proceed?</p>
290
+ <div class="action">
291
+ <button class="vx-btn md closeDialog">No</button>
292
+ <button class="vx-btn md primary closeDialog">Yes</button>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ <div class="code-view vx-mb-5" id="codeErrorDialog">
301
+ <div class="code-navigation">
302
+ <button class="active">HTML</button>
303
+ <button>CSS</button>
304
+ </div>
305
+ <code class="language-markup">
306
+ <script type="prism-html-markup">
307
+ <div class="vx-dialog-container dialog-alert">
308
+ <div class="vx-dialog-body-container">
309
+ <div class="vx-dialog-body">
310
+ <div class="vx-dialog-icon">
311
+ <div class="activateCircle">
312
+ <!-- [class.activeActiveIcon]="animate" -->
313
+ <span></span>
314
+ <span class="line-2"></span>
315
+ </div>
316
+ </div>
317
+ <p class="vx-dialog-description">Active data</p>
318
+ </div>
319
+ </div>
320
+ <div class="vx-dialog-footer">
321
+ <p class="info">Are you sure you would like to proceed?</p>
322
+ <div class="action">
323
+ <button class="vx-btn md">No</button>
324
+ <button class="vx-btn md primary">Yes</button>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </script>
329
+ </code>
330
+ </div>
331
+ </div>
332
+ <div class="container" id="formDialog">
333
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Form Dialog</h3>
334
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
335
+ Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account).
336
+ </p>
337
+ <div class="preview-block">
338
+ <div class="action-buttons">
339
+ <button class="vx-btn md transparent">
340
+ <i class="icons">&#xe9b6;</i> Copy Code
341
+ </button>
342
+ <button class="vx-btn md transparent" data-tab="codeformDialog">
343
+ <i class="icons rotate">&#xea95;</i> View Code
344
+ </button>
345
+ </div>
346
+ <div class="preview-container">
347
+ <div class="vx-h-100 vx-d-flex vx-justify-center vx-align-center vx-p-5">
348
+ <button class="vx-btn md primary outline dialogExample" type="button" data-tab="openFormDialog">Open Form Dialog</button>
349
+ <div class="vx-dialog-wrapper exapleDialog" id="openFormDialog" style="display: none;">
350
+ <div class="vx-dialog-overlay closeDialog"></div>
351
+ <div class="vx-dialog-container dialog-md">
352
+ <div class="vx-dialog-head">
353
+ <h3 class="vx-dialog-title">Dialog Title</h3>
354
+ <button class="vx-btn icon md transparent closeDialog">
355
+ <i class="icons">&#xe90d;</i>
356
+ </button>
357
+ </div>
358
+ <div class="vx-dialog-body-container">
359
+ <div class="vx-dialog-body">
360
+ <div class="vx-form-group">
361
+ <label class="vx-control-panel">Form Label</label>
362
+ <input type="text" placeholder="Please Enter Form value">
363
+ </div>
364
+ </div>
365
+ </div>
366
+ <div class="vx-dialog-footer vx-d-flex vx-align-center vx-justify-end">
367
+ <button class="vx-btn md closeDialog">Cancel</button>
368
+ <button class="vx-btn md primary closeDialog">Submit</button>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ <div class="code-view vx-mb-5" id="codeformDialog">
376
+ <div class="code-navigation">
377
+ <button class="active">HTML</button>
378
+ <button>CSS</button>
379
+ </div>
380
+ <code class="language-markup">
381
+ <script type="prism-html-markup">
382
+ <div class="vx-dialog-container dialog-md">
383
+ <div class="vx-dialog-head">
384
+ <h3 class="vx-dialog-title">Dialog Title</h3>
385
+ <button class="vx-btn icon md transparent">
386
+ <i class="icons">&#xe90d;</i>
387
+ </button>
388
+ </div>
389
+ <div class="vx-dialog-body-container">
390
+ <div class="vx-dialog-body">
391
+ <div class="vx-form-group">
392
+ <label class="vx-control-panel">Form Label</label>
393
+ <input type="text" placeholder="Please Enter Form value">
394
+ </div>
395
+ </div>
396
+ </div>
397
+ <div class="vx-dialog-footer vx-d-flex vx-align-center vx-justify-end">
398
+ <button class="vx-btn md">Cancel</button>
399
+ <button class="vx-btn md primary">Submit</button>
400
+ </div>
401
+ </div>
402
+ </script>
403
+ </code>
404
+ </div>
405
+ </div>
406
+ <div class="container" id="fullscreenDialog">
407
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Fullscreen Dialog</h3>
408
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
409
+ Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account).
410
+ </p>
411
+ <div class="preview-block">
412
+ <div class="action-buttons">
413
+ <button class="vx-btn md transparent">
414
+ <i class="icons">&#xe9b6;</i> Copy Code
415
+ </button>
416
+ <button class="vx-btn md transparent" data-tab="codeFullscreenDialog">
417
+ <i class="icons rotate">&#xea95;</i> View Code
418
+ </button>
419
+ </div>
420
+ <div class="preview-container">
421
+ <div class="vx-h-100 vx-d-flex vx-justify-center vx-align-center vx-p-5">
422
+ <button class="vx-btn md primary outline dialogExample" type="button" data-tab="openFSDialog">Open Fullscreen Dialog</button>
423
+ <div class="vx-dialog-wrapper exapleDialog" id="openFSDialog" style="display: none;">
424
+ <div class="vx-dialog-overlay closeDialog"></div>
425
+ <div class="vx-dialog-container dialog-fs close">
426
+ <button class="vx-btn icon close transparent closeDialog"><i class="icons">&#xeabe;</i></button>
427
+ <!-- Dialog content will be here -->
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ <div class="code-view vx-mb-5" id="codeFullscreenDialog">
434
+ <div class="code-navigation">
435
+ <button class="active">HTML</button>
436
+ <button>CSS</button>
437
+ </div>
438
+ <code class="language-markup">
439
+ <script type="prism-html-markup">
440
+ <div class="vx-dialog-container dialog-fs close">
441
+ <button class="vx-btn icon close transparent closeDialog"><i class="icons">&#xeabe;</i></button>
442
+ <!-- Dialog content will be here -->
443
+ </div>
444
+ </script>
445
+ </code>
446
+ </div>
447
+ </div>
448
+ <div class="container" id="rightSideDialog">
449
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Right Side Dialog</h3>
450
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
451
+ Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account).
452
+ </p>
453
+ <div class="preview-block">
454
+ <div class="action-buttons">
455
+ <button class="vx-btn md transparent">
456
+ <i class="icons">&#xe9b6;</i> Copy Code
457
+ </button>
458
+ <button class="vx-btn md transparent" data-tab="coderightSideDialog">
459
+ <i class="icons rotate">&#xea95;</i> View Code
460
+ </button>
461
+ </div>
462
+ <div class="preview-container">
463
+ <div class="vx-h-100 vx-d-flex vx-justify-center vx-align-center vx-p-5">
464
+ <button class="vx-btn md primary outline dialogExample" type="button" data-tab="openRSDialog">Open From Right</button>
465
+ <div class="vx-dialog-wrapper vx-justify-end exapleDialog" id="openRSDialog" style="display: none;">
466
+ <div class="vx-dialog-overlay closeDialog"></div>
467
+ <div class="vx-dialog-container side-dialog animate-slideInRight">
468
+ <div class="vx-dialog-body-container">
469
+ <div class="vx-dialog-head">
470
+ <h3 class="vx-dialog-title">Dialog Title</h3>
471
+ <button class="vx-btn icon md transparent closeDialog">
472
+ <i class="icons">&#xe90d;</i>
473
+ </button>
474
+ </div>
475
+ <div class="vx-dialog-body">
476
+
477
+ </div>
478
+ </div>
479
+ <div class="vx-dialog-footer">
480
+ <div class="action">
481
+ <button class="vx-btn md">Cancel</button><button class="vx-btn md primary">Confirm</button>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ <div class="code-view vx-mb-5" id="coderightSideDialog">
490
+ <div class="code-navigation">
491
+ <button class="active">HTML</button>
492
+ <button>CSS</button>
493
+ </div>
494
+ <code class="language-markup">
495
+ <script type="prism-html-markup">
496
+ <div class="vx-dialog-container side-dialog animate-slideInRight">
497
+ <div class="vx-dialog-body-container">
498
+ <div class="vx-dialog-head">
499
+ <h3 class="vx-dialog-title">Dialog Title</h3>
500
+ <button class="vx-btn icon md transparent closeDialog">
501
+ <i class="icons">&#xe90d;</i>
502
+ </button>
503
+ </div>
504
+ <div class="vx-dialog-body">
505
+
506
+ </div>
507
+ </div>
508
+ <div class="vx-dialog-footer">
509
+ <div class="action">
510
+ <button class="vx-btn md">Cancel</button><button class="vx-btn md primary">Confirm</button>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </script>
515
+ </code>
516
+ </div>
517
+ </div>
518
+ <div class="container" id="LeftSideDialog">
519
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Left Side Dialog</h3>
520
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
521
+ Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account).
522
+ </p>
523
+ <div class="preview-block">
524
+ <div class="action-buttons">
525
+ <button class="vx-btn md transparent">
526
+ <i class="icons">&#xe9b6;</i> Copy Code
527
+ </button>
528
+ <button class="vx-btn md transparent" data-tab="codeLeftSideDialog">
529
+ <i class="icons rotate">&#xea95;</i> View Code
530
+ </button>
531
+ </div>
532
+ <div class="preview-container">
533
+ <div class="vx-h-100 vx-d-flex vx-justify-center vx-align-center vx-p-5">
534
+ <button class="vx-btn md primary outline dialogExample" type="button" data-tab="openLSDialog">Open From Left</button>
535
+ <div class="vx-dialog-wrapper vx-justify-start exapleDialog" id="openLSDialog" style="display: none;">
536
+ <div class="vx-dialog-overlay closeDialog"></div>
537
+ <div class="vx-dialog-container side-dialog animate-slideInLeft">
538
+ <div class="vx-dialog-body-container">
539
+ <div class="vx-dialog-head">
540
+ <h3 class="vx-dialog-title">Dialog Title</h3>
541
+ <button class="vx-btn icon md transparent closeDialog">
542
+ <i class="icons">&#xe90d;</i>
543
+ </button>
544
+ </div>
545
+ <div class="vx-dialog-body">
546
+
547
+ </div>
548
+ </div>
549
+ <div class="vx-dialog-footer">
550
+ <div class="action">
551
+ <button class="vx-btn md">Cancel</button><button class="vx-btn md primary">Confirm</button>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ <div class="code-view vx-mb-5" id="codeLeftSideDialog">
560
+ <div class="code-navigation">
561
+ <button class="active">HTML</button>
562
+ <button>CSS</button>
563
+ </div>
564
+ <code class="language-markup">
565
+ <script type="prism-html-markup">
566
+ <div class="vx-dialog-container side-dialog animate-slideInLeft">
567
+ <div class="vx-dialog-body-container">
568
+ <div class="vx-dialog-head">
569
+ <h3 class="vx-dialog-title">Dialog Title</h3>
570
+ <button class="vx-btn icon md transparent closeDialog">
571
+ <i class="icons">&#xe90d;</i>
572
+ </button>
573
+ </div>
574
+ <div class="vx-dialog-body">
575
+
576
+ </div>
577
+ </div>
578
+ <div class="vx-dialog-footer">
579
+ <div class="action">
580
+ <button class="vx-btn md">Cancel</button><button class="vx-btn md primary">Confirm</button>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </script>
585
+ </code>
586
+ </div>
587
+ </div>
588
+ <div class="container" id="alertWithComment">
589
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Alert with comment</h3>
590
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
591
+ Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account).
592
+ </p>
593
+ <div class="preview-block">
594
+ <div class="action-buttons">
595
+ <button class="vx-btn md transparent">
596
+ <i class="icons">&#xe9b6;</i> Copy Code
597
+ </button>
598
+ <button class="vx-btn md transparent" data-tab="codealertWithComment">
599
+ <i class="icons rotate">&#xea95;</i> View Code
600
+ </button>
601
+ </div>
602
+ <div class="preview-container">
603
+ <div class="vx-h-100 vx-d-flex vx-justify-center vx-align-center vx-p-5">
604
+ <button class="vx-btn md primary outline dialogExample" type="button" data-tab="openAltCmntialog">Open alert with comment</button>
605
+ <div class="vx-dialog-wrapper vx-justify-center exapleDialog" id="openAltCmntialog" style="display: none;">
606
+ <div class="vx-dialog-overlay closeDialog"></div>
607
+ <div class="vx-dialog-container dialog-alert">
608
+ <div class="vx-dialog-body-container">
609
+ <div class="vx-dialog-body">
610
+ <div class="vx-dialog-icon">
611
+ <i class="icons">&#xe923;</i>
612
+ </div>
613
+ <p class="vx-dialog-description">Delete data</p>
614
+ </div>
615
+ <div class="editor-block">
616
+
617
+ </div>
618
+ </div>
619
+ <div class="vx-dialog-footer">
620
+ <p class="info">Are you sure you would like to proceed?</p>
621
+ <div class="action">
622
+ <button class="vx-btn md closeDialog">No</button><button class="vx-btn md primary closeDialog">Yes</button>
623
+ </div>
624
+ </div>
625
+ </div>
626
+ </div>
627
+ </div>
628
+ </div>
629
+ </div>
630
+ <div class="code-view vx-mb-5" id="codealertWithComment">
631
+ <div class="code-navigation">
632
+ <button class="active">HTML</button>
633
+ <button>CSS</button>
634
+ </div>
635
+ <code class="language-markup">
636
+ <script type="prism-html-markup">
637
+ <div class="vx-dialog-container dialog-alert">
638
+ <div class="vx-dialog-body-container">
639
+ <div class="vx-dialog-body">
640
+ <div class="vx-dialog-icon">
641
+ <i class="icons">&#xe923;</i>
642
+ </div>
643
+ <p class="vx-dialog-description">Delete data</p>
644
+ </div>
645
+ <div class="editor-block">
646
+ <!-- Add editor over here -->
647
+ </div>
648
+ </div>
649
+ <div class="vx-dialog-footer">
650
+ <p class="info">Are you sure you would like to proceed?</p>
651
+ <div class="action">
652
+ <button class="vx-btn md">No</button><button class="vx-btn md primary">Yes</button>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </script>
657
+ </code>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ <div class="page-quick-menu">
662
+ <div class="vx-sub-menu vx-p-0">
663
+ <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>
664
+ <ul class="vx-p-0">
665
+ <li><a href="#autoWidthDialog" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Auto Width Dialog</a></li>
666
+ <li><a href="#deleteDialog" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Delete Alert Dialog</a></li>
667
+ <li><a href="#activeteDialog" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Activate Dialog</a></li>
668
+ <li><a href="#errorDialog" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Error Dialog</a></li>
669
+ <li><a href="#formDialog" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Form Dialog</a></li>
670
+ <li><a href="#fullscreenDialog" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Fullscreen Dialog</a></li>
671
+ <li><a href="#rightSideDialog" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Right Side Dialog</a></li>
672
+ <li><a href="#LeftSideDialog" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Left Side Dialog</a></li>
673
+ <li><a href="#alertWithComment" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Alert with comment</a></li>
674
+ </ul>
675
+ </div>
676
+ </div>
677
+ </div>
678
+ </section>
679
+
680
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
681
+ <script async src="../less.js"></script>
682
+ <script src="../utility/prism.js"></script>
683
+ <script>
684
+ $(document).ready(function () {
685
+ $('.dialogExample').click(function () {
686
+ var tab_id = $(this).attr('data-tab');
687
+ $('.exapleDialog').css('display', 'none');
688
+ $("#" + tab_id).css('display', 'flex');
689
+ })
690
+ });
691
+ $('.closeDialog').click(function(){
692
+ $('.exapleDialog').css('display', 'none');
693
+ })
694
+
695
+ $(document).ready(function () {
696
+ $('button').click(function () {
697
+ var tab_id = $(this).attr('data-tab');
698
+ // $('preview-block button').removeClass('active');
699
+ $('.code-view vx-mb-5').removeClass('active');
700
+ // $(this).addClass('active');
701
+ $("#" + tab_id).toggleClass('active');
702
+ })
703
+ });
704
+ $('ul li a.vx-fs-3[href*="#"]')
705
+ .not('[href="#"]')
706
+ .not('[href="#0"]')
707
+ .click(function (event) {
708
+ if (
709
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
710
+ &&
711
+ location.hostname == this.hostname
712
+ ) {
713
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
714
+ $(this).addClass('active');
715
+ var target = $(this.hash);
716
+ console.log(target);
717
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
718
+ if (target.length) {
719
+ event.preventDefault();
720
+ $('html, body').animate({
721
+ scrollTop: target.offset().top - 110
722
+ }, 100, function () {
723
+ var $target = $(target);
724
+ $target.focus();
725
+ if ($target.is(":focus")) {
726
+ return false;
727
+ } else {
728
+ $target.attr('tabindex', '-1');
729
+ $target.focus();
730
+ };
731
+ });
732
+ }
733
+ }
734
+ });
735
+ </script>
736
+ </body>
737
+
738
+ </html>