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/avatars.html ADDED
@@ -0,0 +1,555 @@
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
+
14
+ <link rel="stylesheet/less" type="text/css" href="../less/index.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
16
+
17
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
24
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-bottom.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-top.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
29
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
30
+ <link rel="stylesheet/less" type="text/css" href="../less/user-panel/user-panel.less" />
31
+ <link rel="stylesheet/less" type="text/css" href="../less/quick-links/quick-links.less" />
32
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
33
+ <link rel="stylesheet/less" type="text/css" href="../less/avatars/avatars.less" />
34
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
35
+ </head>
36
+
37
+ <body>
38
+ <section>
39
+ <div class="head vx-mb-5">
40
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Avatars</h2>
41
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
42
+ Avatars are generally used to represent an entity, or a group of entity. It may consist of an image or short name if image is not available.
43
+ </p>
44
+ </div>
45
+ <div class="vx-d-flex vx-align-start">
46
+ <div class="page-container">
47
+ <div class="container" id="besicAvatarsLayout">
48
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Basic Avatars with Image</h3>
49
+
50
+ <div class="preview-block">
51
+ <div class="action-buttons">
52
+ <button class="vx-btn md transparent">
53
+ <i class="icons">&#xe9b6;</i> Copy Code
54
+ </button>
55
+ <button class="vx-btn md transparent" data-tab="besicAvatars">
56
+ <i class="icons rotate">&#xea95;</i> View Code
57
+ </button>
58
+ </div>
59
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
60
+ <div class="vx-avatar md">
61
+ <img src="../images/1.jpg" alt="">
62
+ </div>
63
+ <div class="vx-avatar md">
64
+ <img src="../images/4.jpg" alt="">
65
+ </div>
66
+ <div class="vx-avatar md">
67
+ <img src="../images/2.jpg" alt="">
68
+ </div>
69
+ <div class="vx-avatar md">
70
+ <img src="../images/3.jpg" alt="">
71
+ </div>
72
+ </div>
73
+ </div>
74
+ <div class="code-view vx-mb-5" id="besicAvatars">
75
+ <div class="code-navigation">
76
+ <button class="active" data-tab="besicAvatarshtml">HTML</button>
77
+ <button data-tab="besicAvatarsless">CSS</button>
78
+ </div>
79
+ <code class="language-markup active" id="besicAvatarshtml">
80
+ <script type="prism-html-markup">
81
+ <div class="vx-avatar md">
82
+ <img src="../images/1.jpg" alt="">
83
+ </div>
84
+ <div class="vx-avatar md">
85
+ <img src="../images/4.jpg" alt="">
86
+ </div>
87
+ <div class="vx-avatar md">
88
+ <img src="../images/2.jpg" alt="">
89
+ </div>
90
+ <div class="vx-avatar md">
91
+ <img src="../images/3.jpg" alt="">
92
+ </div>
93
+ </script>
94
+ </code>
95
+ <code class="language-markup" id="besicAvatarsless">
96
+ <script type="prism-html-markup">
97
+ @import "~vx-design-system/css-build/less/avatars/avatars.less"
98
+ </script>
99
+ </code>
100
+ </div>
101
+ </div>
102
+ <div class="container" id="besicShortNameAvatarsLayout">
103
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Basic Avatars with Short Name</h3>
104
+
105
+ <div class="preview-block">
106
+ <div class="action-buttons">
107
+ <button class="vx-btn md transparent">
108
+ <i class="icons">&#xe9b6;</i> Copy Code
109
+ </button>
110
+ <button class="vx-btn md transparent" data-tab="besicShortNameAvatars">
111
+ <i class="icons rotate">&#xea95;</i> View Code
112
+ </button>
113
+ </div>
114
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
115
+ <div class="vx-avatar md">
116
+ <span class="green">FR</span>
117
+ </div>
118
+ <div class="vx-avatar md">
119
+ <span class="green">KD</span>
120
+ </div>
121
+ <div class="vx-avatar md">
122
+ <span class="green">WD</span>
123
+ </div>
124
+ <div class="vx-avatar md">
125
+ <span class="green">CR</span>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ <div class="code-view vx-mb-5" id="besicShortNameAvatars">
130
+ <div class="code-navigation">
131
+ <button class="active" data-tab="besicShortNameAvatarshtml">HTML</button>
132
+ <button data-tab="besicShortNameAvatarsless">CSS</button>
133
+ </div>
134
+ <code class="language-markup active" id="besicShortNameAvatarshtml">
135
+ <script type="prism-html-markup">
136
+ <div class="vx-avatar md">
137
+ <span class="green">FR</span>
138
+ </div>
139
+ <div class="vx-avatar md">
140
+ <span class="green">KD</span>
141
+ </div>
142
+ <div class="vx-avatar md">
143
+ <span class="green">WD</span>
144
+ </div>
145
+ <div class="vx-avatar md">
146
+ <span class="green">CR</span>
147
+ </div>
148
+ </script>
149
+ </code>
150
+ <code class="language-markup" id="besicShortNameAvatarsless">
151
+ <script type="prism-html-markup">
152
+ @import "~vx-design-system/css-build/less/avatars/avatars.less"
153
+ </script>
154
+ </code>
155
+ </div>
156
+ </div>
157
+ <div class="container" id="smallShortNameAvatarsLayout">
158
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Small Avatars</h3>
159
+
160
+ <div class="preview-block">
161
+ <div class="action-buttons">
162
+ <button class="vx-btn md transparent">
163
+ <i class="icons">&#xe9b6;</i> Copy Code
164
+ </button>
165
+ <button class="vx-btn md transparent" data-tab="smallShortNameAvatars">
166
+ <i class="icons rotate">&#xea95;</i> View Code
167
+ </button>
168
+ </div>
169
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
170
+ <div class="vx-avatar sm">
171
+ <span class="green">FR</span>
172
+ </div>
173
+ <div class="vx-avatar sm">
174
+ <span class="green">KD</span>
175
+ </div>
176
+ <div class="vx-avatar sm">
177
+ <img src="../images/1.jpg" alt="">
178
+ </div>
179
+ <div class="vx-avatar sm">
180
+ <img src="../images/4.jpg" alt="">
181
+ </div>
182
+ </div>
183
+ </div>
184
+ <div class="code-view vx-mb-5" id="smallShortNameAvatars">
185
+ <div class="code-navigation">
186
+ <button class="active" data-tab="smallShortNameAvatarshtml">HTML</button>
187
+ <button data-tab="smallShortNameAvatarsless">CSS</button>
188
+ </div>
189
+ <code class="language-markup active" id="smallShortNameAvatarshtml">
190
+ <script type="prism-html-markup">
191
+ <div class="vx-avatar sm">
192
+ <span class="green">FR</span>
193
+ </div>
194
+ <div class="vx-avatar sm">
195
+ <span class="green">KD</span>
196
+ </div>
197
+ <div class="vx-avatar sm">
198
+ <img src="../images/1.jpg" alt="">
199
+ </div>
200
+ <div class="vx-avatar sm">
201
+ <img src="../images/4.jpg" alt="">
202
+ </div>
203
+ </script>
204
+ </code>
205
+ <code class="language-markup" id="smallShortNameAvatarsless">
206
+ <script type="prism-html-markup">
207
+ @import "~vx-design-system/css-build/less/avatars/avatars.less"
208
+ </script>
209
+ </code>
210
+ </div>
211
+ </div>
212
+ <div class="container" id="largeShortNameAvatarsLayout">
213
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Large Avatars</h3>
214
+
215
+ <div class="preview-block">
216
+ <div class="action-buttons">
217
+ <button class="vx-btn md transparent">
218
+ <i class="icons">&#xe9b6;</i> Copy Code
219
+ </button>
220
+ <button class="vx-btn md transparent" data-tab="largeShortNameAvatars">
221
+ <i class="icons rotate">&#xea95;</i> View Code
222
+ </button>
223
+ </div>
224
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
225
+ <div class="vx-avatar lg">
226
+ <span class="green">FR</span>
227
+ </div>
228
+ <div class="vx-avatar lg">
229
+ <span class="green">KD</span>
230
+ </div>
231
+ <div class="vx-avatar lg">
232
+ <img src="../images/1.jpg" alt="">
233
+ </div>
234
+ <div class="vx-avatar lg">
235
+ <img src="../images/4.jpg" alt="">
236
+ </div>
237
+ </div>
238
+ </div>
239
+ <div class="code-view vx-mb-5" id="largeShortNameAvatars">
240
+ <div class="code-navigation">
241
+ <button class="active" data-tab="largeShortNameAvatarshtml">HTML</button>
242
+ <button data-tab="largeShortNameAvatarsless">CSS</button>
243
+ </div>
244
+ <code class="language-markup active" id="largeShortNameAvatarshtml">
245
+ <script type="prism-html-markup">
246
+ <div class="vx-avatar lg">
247
+ <span class="green">FR</span>
248
+ </div>
249
+ <div class="vx-avatar lg">
250
+ <span class="green">KD</span>
251
+ </div>
252
+ <div class="vx-avatar lg">
253
+ <img src="../images/1.jpg" alt="">
254
+ </div>
255
+ <div class="vx-avatar lg">
256
+ <img src="../images/4.jpg" alt="">
257
+ </div>
258
+ </script>
259
+ </code>
260
+ <code class="language-markup" id="largeShortNameAvatarsless">
261
+ <script type="prism-html-markup">
262
+ @import "~vx-design-system/css-build/less/avatars/avatars.less"
263
+ </script>
264
+ </code>
265
+ </div>
266
+ </div>
267
+ <div class="container" id="x-largeShortNameAvatarsLayout">
268
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">X-Large Avatars</h3>
269
+ <div class="preview-block">
270
+ <div class="action-buttons">
271
+ <button class="vx-btn md transparent">
272
+ <i class="icons">&#xe9b6;</i> Copy Code
273
+ </button>
274
+ <button class="vx-btn md transparent" data-tab="x-largeShortNameAvatars">
275
+ <i class="icons rotate">&#xea95;</i> View Code
276
+ </button>
277
+ </div>
278
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
279
+ <div class="vx-avatar x-lg">
280
+ <span class="green">FR</span>
281
+ </div>
282
+ <div class="vx-avatar x-lg">
283
+ <span class="blue">KD</span>
284
+ </div>
285
+ <div class="vx-avatar x-lg">
286
+ <img src="../images/1.jpg" alt="">
287
+ </div>
288
+ <div class="vx-avatar x-lg">
289
+ <img src="../images/4.jpg" alt="">
290
+ </div>
291
+ </div>
292
+ </div>
293
+ <div class="code-view vx-mb-5" id="x-largeShortNameAvatars">
294
+ <div class="code-navigation">
295
+ <button class="active" data-tab="x-largeShortNameAvatarshtml">HTML</button>
296
+ <button data-tab="x-largeShortNameAvatarsless">CSS</button>
297
+ </div>
298
+ <code class="language-markup active" id="x-largeShortNameAvatarshtml">
299
+ <script type="prism-html-markup">
300
+ <div class="vx-avatar x-lg">
301
+ <span class="green">FR</span>
302
+ </div>
303
+ <div class="vx-avatar x-lg">
304
+ <span class="green">KD</span>
305
+ </div>
306
+ <div class="vx-avatar x-lg">
307
+ <img src="../images/1.jpg" alt="">
308
+ </div>
309
+ <div class="vx-avatar x-lg">
310
+ <img src="../images/4.jpg" alt="">
311
+ </div>
312
+ </script>
313
+ </code>
314
+ <code class="language-markup" id="x-largeShortNameAvatarsless">
315
+ <script type="prism-html-markup">
316
+ @import "~vx-design-system/css-build/less/avatars/avatars.less"
317
+ </script>
318
+ </code>
319
+ </div>
320
+ </div>
321
+ <div class="container" id="defaultAvatarsGroupLayout">
322
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Avatars Group</h3>
323
+
324
+ <div class="preview-block">
325
+ <div class="action-buttons">
326
+ <button class="vx-btn md transparent">
327
+ <i class="icons">&#xe9b6;</i> Copy Code
328
+ </button>
329
+ <button class="vx-btn md transparent" data-tab="defaultAvatarsGroup">
330
+ <i class="icons rotate">&#xea95;</i> View Code
331
+ </button>
332
+ </div>
333
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
334
+ <div class="vx-avatar-group">
335
+ <div class="vx-avatar md">
336
+ <img src="../images/3.jpg" alt="">
337
+ </div>
338
+ <div class="vx-avatar md">
339
+ <span class="blue">SB</span>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ <div class="code-view vx-mb-5" id="defaultAvatarsGroup">
345
+ <div class="code-navigation">
346
+ <button class="active" data-tab="defaultAvatarsGrouphtml">HTML</button>
347
+ <button data-tab="defaultAvatarsGroupless">CSS</button>
348
+ </div>
349
+ <code class="language-markup active" id="defaultAvatarsGrouphtml">
350
+ <script type="prism-html-markup">
351
+ <div class="vx-avatar-group">
352
+ <div class="vx-avatar md">
353
+ <img src="../images/3.jpg" alt="">
354
+ </div>
355
+ <div class="vx-avatar md">
356
+ <span class="blue">SB</span>
357
+ </div>
358
+ </div>
359
+ </script>
360
+ </code>
361
+ <code class="language-markup active" id="defaultAvatarsGrouphtml">
362
+ <script type="prism-html-markup">
363
+ @import "~vx-design-system/css-build/less/avatars/avatars.less"
364
+ </script>
365
+ </code>
366
+ </div>
367
+ </div>
368
+ <div class="container" id="defaultAvatarsGroupCounterLayout">
369
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Avatars Group with Counter</h3>
370
+
371
+ <div class="preview-block">
372
+ <div class="action-buttons">
373
+ <button class="vx-btn md transparent">
374
+ <i class="icons">&#xe9b6;</i> Copy Code
375
+ </button>
376
+ <button class="vx-btn md transparent" data-tab="defaultAvatarsGroupCounter">
377
+ <i class="icons rotate">&#xea95;</i> View Code
378
+ </button>
379
+ </div>
380
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
381
+ <div class="vx-avatar-group">
382
+ <div class="vx-avatar md">
383
+ <img src="../images/3.jpg" alt="">
384
+ </div>
385
+ <div class="vx-avatar md">
386
+ <span class="blue">SB</span>
387
+ </div>
388
+ <div class="vx-avatar md counter">
389
+ <span class="green">+99</span>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ <div class="code-view vx-mb-5" id="defaultAvatarsGroupCounter">
395
+ <div class="code-navigation">
396
+ <button class="active" data-tab="defaultAvatarsGroupCounterhtml">HTML</button>
397
+ <button data-tab="defaultAvatarsGroupCounterless">CSS</button>
398
+ </div>
399
+ <code class="language-markup" id="defaultAvatarsGroupCounterhtml">
400
+ <script type="prism-html-markup active">
401
+ <div class="vx-avatar-group">
402
+ <div class="vx-avatar md">
403
+ <img src="../images/3.jpg" alt="">
404
+ </div>
405
+ <div class="vx-avatar md">
406
+ <span class="blue">SB</span>
407
+ </div>
408
+ <div class="vx-avatar md counter">
409
+ <span class="green">+99</span>
410
+ </div>
411
+ </div>
412
+ </script>
413
+ </code>
414
+ <code class="language-markup" id="defaultAvatarsGroupCounterless">
415
+ <script type="prism-html-markup">
416
+ @import "~vx-design-system/css-build/less/avatars/avatars.less"
417
+ </script>
418
+ </code>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ <div class="page-quick-menu">
423
+ <div class="vx-sub-menu vx-p-0">
424
+ <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>
425
+ <ul class="vx-p-0">
426
+ <li>
427
+ <a href="#besicAvatarsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Basic Avatars with Image</a>
428
+ </li>
429
+ <li>
430
+ <a href="#besicShortNameAvatarsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Basic Avatars with Short Name</a>
431
+ </li>
432
+ <li>
433
+ <a href="#smallShortNameAvatarsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Small Avatars</a>
434
+ </li>
435
+ <li>
436
+ <a href="#largeShortNameAvatarsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Large Avatars</a>
437
+ </li>
438
+ <li>
439
+ <a href="#x-largeShortNameAvatarsLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">X-Large Avatars</a>
440
+ </li>
441
+ <li>
442
+ <a href="#defaultAvatarsGroupLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Avatars Group</a>
443
+ </li>
444
+ <li>
445
+ <a href="#defaultAvatarsGroupCounterLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Avatars Group with Counter</a>
446
+ </li>
447
+ </ul>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </section>
452
+
453
+
454
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
455
+ <script src="../less.js"></script>
456
+ <script src="../utility/prism.js"></script>
457
+ <script>
458
+ $(document).ready(function () {
459
+ $('button').click(function () {
460
+ var tab_id = $(this).attr('data-tab');
461
+ // $('preview-block button').removeClass('active');
462
+ $('.code-view vx-mb-5').removeClass('active');
463
+ // $(this).addClass('active');
464
+ $("#" + tab_id).toggleClass('active');
465
+ })
466
+ $('#besicAvatarsLayout .code-navigation button').click(function () {
467
+ var tab_id = $(this).attr('data-tab');
468
+ $('#besicAvatarsLayout .code-navigation button').removeClass('active');
469
+ $('#besicAvatarsLayout .language-markup').removeClass('active');
470
+ console.log(tab_id)
471
+ $("#" + tab_id).addClass('active');
472
+ $(this).addClass('active');
473
+ })
474
+ $('#besicShortNameAvatarsLayout .code-navigation button').click(function () {
475
+ var tab_id = $(this).attr('data-tab');
476
+ $('#besicShortNameAvatarsLayout .code-navigation button').removeClass('active');
477
+ $('#besicShortNameAvatarsLayout .language-markup').removeClass('active');
478
+ console.log(tab_id)
479
+ $("#" + tab_id).addClass('active');
480
+ $(this).addClass('active');
481
+ })
482
+ $('#smallShortNameAvatarsLayout .code-navigation button').click(function () {
483
+ var tab_id = $(this).attr('data-tab');
484
+ $('#smallShortNameAvatarsLayout .code-navigation button').removeClass('active');
485
+ $('#smallShortNameAvatarsLayout .language-markup').removeClass('active');
486
+ console.log(tab_id)
487
+ $("#" + tab_id).addClass('active');
488
+ $(this).addClass('active');
489
+ })
490
+ $('#largeShortNameAvatarsLayout .code-navigation button').click(function () {
491
+ var tab_id = $(this).attr('data-tab');
492
+ $('#largeShortNameAvatarsLayout .code-navigation button').removeClass('active');
493
+ $('#largeShortNameAvatarsLayout .language-markup').removeClass('active');
494
+ console.log(tab_id)
495
+ $("#" + tab_id).addClass('active');
496
+ $(this).addClass('active');
497
+ })
498
+ $('#x-largeShortNameAvatarsLayout .code-navigation button').click(function () {
499
+ var tab_id = $(this).attr('data-tab');
500
+ $('#x-largeShortNameAvatarsLayout .code-navigation button').removeClass('active');
501
+ $('#x-largeShortNameAvatarsLayout .language-markup').removeClass('active');
502
+ console.log(tab_id)
503
+ $("#" + tab_id).addClass('active');
504
+ $(this).addClass('active');
505
+ })
506
+ $('#defaultAvatarsGroupLayout .code-navigation button').click(function () {
507
+ var tab_id = $(this).attr('data-tab');
508
+ $('#defaultAvatarsGroupLayout .code-navigation button').removeClass('active');
509
+ $('#defaultAvatarsGroupLayout .language-markup').removeClass('active');
510
+ console.log(tab_id)
511
+ $("#" + tab_id).addClass('active');
512
+ $(this).addClass('active');
513
+ })
514
+ $('#defaultAvatarsGroupCounterLayout .code-navigation button').click(function () {
515
+ var tab_id = $(this).attr('data-tab');
516
+ $('#defaultAvatarsGroupCounterLayout .code-navigation button').removeClass('active');
517
+ $('#defaultAvatarsGroupCounterLayout .language-markup').removeClass('active');
518
+ console.log(tab_id)
519
+ $("#" + tab_id).addClass('active');
520
+ $(this).addClass('active');
521
+ })
522
+ });
523
+ $('ul li a.vx-fs-3[href*="#"]').not('[href="#"]').not('[href="#0"]')
524
+ .click(function (event) {
525
+ if (
526
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
527
+ &&
528
+ location.hostname == this.hostname
529
+ ) {
530
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
531
+ $(this).addClass('active');
532
+ var target = $(this.hash);
533
+ console.log(target);
534
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
535
+ if (target.length) {
536
+ event.preventDefault();
537
+ $('html, body').animate({
538
+ scrollTop: target.offset().top - 110
539
+ }, 100, function () {
540
+ var $target = $(target);
541
+ $target.focus();
542
+ if ($target.is(":focus")) {
543
+ return false;
544
+ } else {
545
+ $target.attr('tabindex', '-1');
546
+ $target.focus();
547
+ };
548
+ });
549
+ }
550
+ }
551
+ });
552
+ </script>
553
+ </body>
554
+
555
+ </html>