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/table-card.html ADDED
@@ -0,0 +1,510 @@
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>No Data</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
+
13
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
14
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/color/color.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/table-card/table-card.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.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/margin/margin-right.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/padding/padding.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/padding/padding-right.less" />
31
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
32
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
33
+ </head>
34
+
35
+ <body>
36
+ <section>
37
+ <div class="head vx-mb-5">
38
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Table Card</h2>
39
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Table card component is used to indicate
40
+ a page/list where Table card exists.</p>
41
+ </div>
42
+ <div class="vx-d-flex vx-align-start">
43
+ <div class="page-container">
44
+ <div class="container" id="besicTableCard">
45
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Basic Table Card</h3>
46
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Table card component is used to
47
+ indicate a page/list where Table card exists.
48
+ </p>
49
+ <div class="preview-block">
50
+ <div class="action-buttons">
51
+ <button class="vx-btn md transparent">
52
+ <i class="icons">&#xe9b6;</i> Copy Code
53
+ </button>
54
+ <button class="vx-btn md transparent" data-tab="besicNoData">
55
+ <i class="icons rotate">&#xea95;</i> View Code
56
+ </button>
57
+ </div>
58
+ <div class="preview-container">
59
+ <div class="vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100">
60
+ <div class="left vx-d-block vx-w-100">
61
+ <div class="label vx-d-flex vx-align-center">
62
+ <i class="icons">&#xe92a;</i>
63
+ <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">Table Card</label>
64
+ </div>
65
+ </div>
66
+ <div class="right vx-d-flex vx-justify-end vx-w-100">
67
+ <span class="vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center">100</span>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ <div class="code-view vx-mb-5" id="besicNoData">
73
+ <div class="code-navigation">
74
+ <button class="active" data-tab="besicTableCardhtml">HTML</button>
75
+ <button data-tab="besicTableCardless">CSS</button>
76
+ </div>
77
+ <code class="language-markup active" id="besicTableCardhtml">
78
+ <script type="prism-html-markup">
79
+ <div class="vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100">
80
+ <div class="left vx-d-block vx-w-100">
81
+ <div class="label vx-d-flex vx-align-center">
82
+ <i class="icons">&#xe92a;</i>
83
+ <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">Table Card</label>
84
+ </div>
85
+ </div>
86
+ <div class="right vx-d-flex vx-justify-end vx-w-100">
87
+ <span class="vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center">100</span>
88
+ </div>
89
+ </div>
90
+ </script>
91
+ </code>
92
+ <code class="language-markup" id="besicTableCardless">
93
+ <script type="prism-html-markup">
94
+ @import "~vx-design-system/css-build/less/text/text.less"
95
+ @import "~vx-design-system/css-build/less/color/color.less"
96
+ @import "~vx-design-system/css-build/less/table-card/table-card.less"
97
+ @import "~vx-design-system/css-build/less/button/button.less"
98
+ @import "~vx-design-system/css-build/less/margin/margin.less"
99
+ @import "~vx-design-system/css-build/less/margin/margin-top.less"
100
+ @import "~vx-design-system/css-build/less/margin/margin-right.less"
101
+ @import "~vx-design-system/css-build/less/margin/margin-bottom.less"
102
+ @import "~vx-design-system/css-build/less/margin/margin-left.less"
103
+ @import "~vx-design-system/css-build/less/padding/padding.less"
104
+ @import "~vx-design-system/css-build/less/padding/padding-top.less"
105
+ @import "~vx-design-system/css-build/less/padding/padding-right.less"
106
+ @import "~vx-design-system/css-build/less/padding/padding-bottom.less"
107
+ @import "~vx-design-system/css-build/less/padding/padding-left.less"
108
+
109
+ </script>
110
+ </code>
111
+ </div>
112
+ </div>
113
+ <div class="container" id="tableCardwithActive">
114
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Table Card with Active</h3>
115
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Table card when click on active
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="normalButtonNoData">
123
+ <i class="icons rotate">&#xea95;</i> View Code
124
+ </button>
125
+ </div>
126
+ <div class="preview-container">
127
+ <div class="vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100 active">
128
+ <div class="left vx-d-block vx-w-100">
129
+ <div class="label vx-d-flex vx-align-center">
130
+ <i class="icons">&#xe92a;</i>
131
+ <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">Table Card</label>
132
+ </div>
133
+ </div>
134
+ <div class="right vx-d-flex vx-justify-end vx-w-100">
135
+ <span class="vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center">100</span>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ <div class="code-view vx-mb-5" id="normalButtonNoData">
141
+ <div class="code-navigation">
142
+ <button class="active" data-tab="tableCardwithActivehtml">HTML</button>
143
+ <button data-tab="tableCardwithActiveless">CSS</button>
144
+ </div>
145
+ <code class="language-markup active" id="tableCardwithActivehtml">
146
+ <script type="prism-html-markup">
147
+ <div class="vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100 active">
148
+ <div class="left vx-d-block vx-w-100">
149
+ <div class="label vx-d-flex vx-align-center">
150
+ <i class="icons">&#xe92a;</i>
151
+ <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">Table Card</label>
152
+ </div>
153
+ </div>
154
+ <div class="right vx-d-flex vx-justify-end vx-w-100">
155
+ <span class="vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center">100</span>
156
+ </div>
157
+ </div>
158
+ </script>
159
+ </code>
160
+ <code class="language-markup" id="tableCardwithActiveless">
161
+ <script type="prism-html-markup">
162
+ @import "~vx-design-system/css-build/less/text/text.less"
163
+ @import "~vx-design-system/css-build/less/color/color.less"
164
+ @import "~vx-design-system/css-build/less/table-card/table-card.less"
165
+ @import "~vx-design-system/css-build/less/button/button.less"
166
+ @import "~vx-design-system/css-build/less/margin/margin.less"
167
+ @import "~vx-design-system/css-build/less/margin/margin-top.less"
168
+ @import "~vx-design-system/css-build/less/margin/margin-right.less"
169
+ @import "~vx-design-system/css-build/less/margin/margin-bottom.less"
170
+ @import "~vx-design-system/css-build/less/margin/margin-left.less"
171
+ @import "~vx-design-system/css-build/less/padding/padding.less"
172
+ @import "~vx-design-system/css-build/less/padding/padding-top.less"
173
+ @import "~vx-design-system/css-build/less/padding/padding-right.less"
174
+ @import "~vx-design-system/css-build/less/padding/padding-bottom.less"
175
+ @import "~vx-design-system/css-build/less/padding/padding-left.less"
176
+
177
+ </script>
178
+ </code>
179
+ </div>
180
+ </div>
181
+ <div class="container" id="tableCardwithPerf">
182
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Table Card with Performace</h3>
183
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">At some places Table card with performace.
184
+ </p>
185
+ <div class="preview-block">
186
+ <div class="action-buttons">
187
+ <button class="vx-btn md transparent">
188
+ <i class="icons">&#xe9b6;</i> Copy Code
189
+ </button>
190
+ <button class="vx-btn md transparent" data-tab="smallButtonNoData">
191
+ <i class="icons rotate">&#xea95;</i> View Code
192
+ </button>
193
+ </div>
194
+ <div class="preview-container">
195
+ <div class="vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100">
196
+ <div class="left vx-d-block vx-w-100">
197
+ <div class="label vx-d-flex vx-align-center">
198
+ <i class="icons">&#xe92a;</i>
199
+ <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">Table Card</label>
200
+ </div>
201
+ <div class="performance vx-d-flex vx-align-center vx-mt-1">
202
+ <span>25%</span>
203
+ <span>50%</span>
204
+ <span>25%</span>
205
+ </div>
206
+ </div>
207
+ <div class="right vx-d-flex vx-justify-end vx-w-100">
208
+ <span class="vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center">100</span>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ <div class="code-view vx-mb-5" id="smallButtonNoData">
214
+ <div class="code-navigation">
215
+ <button class="active" data-tab="tableCardwithPerfhtml">HTML</button>
216
+ <button data-tab="tableCardwithPerfless">CSS</button>
217
+ </div>
218
+ <code class="language-markup active" id="tableCardwithPerfhtml">
219
+ <script type="prism-html-markup">
220
+ <div class="vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100">
221
+ <div class="left vx-d-block vx-w-100">
222
+ <div class="label vx-d-flex vx-align-center">
223
+ <i class="icons">&#xe92a;</i>
224
+ <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">Table Card</label>
225
+ </div>
226
+ <div class="performance vx-d-flex vx-align-center vx-mt-1">
227
+ <span>25%</span>
228
+ <span>50%</span>
229
+ <span>25%</span>
230
+ </div>
231
+ </div>
232
+ <div class="right vx-d-flex vx-justify-end vx-w-100">
233
+ <span class="vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center">100</span>
234
+ </div>
235
+ </div>
236
+ </script>
237
+ </code>
238
+ <code class="language-markup" id="tableCardwithPerfless">
239
+ <script type="prism-html-markup">
240
+ @import "~vx-design-system/css-build/less/text/text.less"
241
+ @import "~vx-design-system/css-build/less/color/color.less"
242
+ @import "~vx-design-system/css-build/less/table-card/table-card.less"
243
+ @import "~vx-design-system/css-build/less/button/button.less"
244
+ @import "~vx-design-system/css-build/less/margin/margin.less"
245
+ @import "~vx-design-system/css-build/less/margin/margin-top.less"
246
+ @import "~vx-design-system/css-build/less/margin/margin-right.less"
247
+ @import "~vx-design-system/css-build/less/margin/margin-bottom.less"
248
+ @import "~vx-design-system/css-build/less/margin/margin-left.less"
249
+ @import "~vx-design-system/css-build/less/padding/padding.less"
250
+ @import "~vx-design-system/css-build/less/padding/padding-top.less"
251
+ @import "~vx-design-system/css-build/less/padding/padding-right.less"
252
+ @import "~vx-design-system/css-build/less/padding/padding-bottom.less"
253
+ @import "~vx-design-system/css-build/less/padding/padding-left.less"
254
+
255
+ </script>
256
+ </code>
257
+ </div>
258
+ </div>
259
+ <div class="container" id="tableCardwithBlueBtn">
260
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Table Card with Blue Button</h3>
261
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">At some places Table card with blue button.
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="cardBlueBtn">
269
+ <i class="icons rotate">&#xea95;</i> View Code
270
+ </button>
271
+ </div>
272
+ <div class="preview-container">
273
+ <div class="vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100">
274
+ <div class="left vx-d-block vx-w-100">
275
+ <div class="label vx-d-flex vx-align-center">
276
+ <i class="icons">&#xe92a;</i>
277
+ <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">Table Card</label>
278
+ </div>
279
+ <button class="blue-btn vx-d-flex vx-align-center vx-fw-500 vx-txt-white vx-tt-uppercase vx-mt-1">
280
+ <i class="icons">&#xe915;</i> Blue Button
281
+ </button>
282
+ </div>
283
+ <div class="right vx-d-flex vx-justify-end vx-w-100">
284
+ <span class="vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center">100</span>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ <div class="code-view vx-mb-5" id="cardBlueBtn">
290
+ <div class="code-navigation">
291
+ <button class="active" data-tab="tableCardwithBlueBtnhtml">HTML</button>
292
+ <button data-tab="tableCardwithBlueBtnless">CSS</button>
293
+ </div>
294
+ <code class="language-markup active" id="tableCardwithBlueBtnhtml">
295
+ <script type="prism-html-markup">
296
+ <div class="vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100">
297
+ <div class="left vx-d-block vx-w-100">
298
+ <div class="label vx-d-flex vx-align-center">
299
+ <i class="icons">&#xe92a;</i>
300
+ <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">Table Card</label>
301
+ </div>
302
+ <button class="blue-btn vx-d-flex vx-align-center vx-fw-500 vx-txt-white vx-tt-uppercase vx-mt-1">
303
+ <i class="icons">&#xe915;</i> Blue Button
304
+ </button>
305
+ </div>
306
+ <div class="right vx-d-flex vx-justify-end vx-w-100">
307
+ <span class="vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center">100</span>
308
+ </div>
309
+ </div>
310
+ </script>
311
+ </code>
312
+ <code class="language-markup" id="tableCardwithBlueBtnless">
313
+ <script type="prism-html-markup">
314
+ @import "~vx-design-system/css-build/less/text/text.less"
315
+ @import "~vx-design-system/css-build/less/color/color.less"
316
+ @import "~vx-design-system/css-build/less/table-card/table-card.less"
317
+ @import "~vx-design-system/css-build/less/button/button.less"
318
+ @import "~vx-design-system/css-build/less/margin/margin.less"
319
+ @import "~vx-design-system/css-build/less/margin/margin-top.less"
320
+ @import "~vx-design-system/css-build/less/margin/margin-right.less"
321
+ @import "~vx-design-system/css-build/less/margin/margin-bottom.less"
322
+ @import "~vx-design-system/css-build/less/margin/margin-left.less"
323
+ @import "~vx-design-system/css-build/less/padding/padding.less"
324
+ @import "~vx-design-system/css-build/less/padding/padding-top.less"
325
+ @import "~vx-design-system/css-build/less/padding/padding-right.less"
326
+ @import "~vx-design-system/css-build/less/padding/padding-bottom.less"
327
+ @import "~vx-design-system/css-build/less/padding/padding-left.less"
328
+
329
+ </script>
330
+ </code>
331
+ </div>
332
+ </div>
333
+ <div class="container" id="tableCardwithGreenBtn">
334
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Table Card with Green Button</h3>
335
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">At some places Table card with green button.
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="cardGreenBtn">
343
+ <i class="icons rotate">&#xea95;</i> View Code
344
+ </button>
345
+ </div>
346
+ <div class="preview-container">
347
+ <div class="vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100">
348
+ <div class="left vx-d-block vx-w-100">
349
+ <div class="label vx-d-flex vx-align-center">
350
+ <i class="icons">&#xe92a;</i>
351
+ <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">Table Card</label>
352
+ </div>
353
+ <button class="green-btn vx-d-flex vx-align-center vx-fw-500 vx-txt-white vx-tt-uppercase vx-mt-1">
354
+ <i class="icons">&#xe915;</i> Green Button
355
+ </button>
356
+ </div>
357
+ <div class="right vx-d-flex vx-justify-end vx-w-100">
358
+ <span class="vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center">100</span>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ <div class="code-view vx-mb-5" id="cardGreenBtn">
364
+ <div class="code-navigation">
365
+ <button class="active" data-tab="tableCardwithGreenBtnehtml">HTML</button>
366
+ <button data-tab="tableCardwithGreenBtneless">CSS</button>
367
+ </div>
368
+ <code class="language-markup active" id="tableCardwithGreenBtnehtml">
369
+ <script type="prism-html-markup">
370
+ <div class="vx-table-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-mr-1 vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100">
371
+ <div class="left vx-d-block vx-w-100">
372
+ <div class="label vx-d-flex vx-align-center">
373
+ <i class="icons">&#xe92a;</i>
374
+ <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">Table Card</label>
375
+ </div>
376
+ <button class="green-btn vx-d-flex vx-align-center vx-fw-500 vx-txt-white vx-tt-uppercase vx-mt-1">
377
+ <i class="icons">&#xe915;</i> Green Button
378
+ </button>
379
+ </div>
380
+ <div class="right vx-d-flex vx-justify-end vx-w-100">
381
+ <span class="vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center">100</span>
382
+ </div>
383
+ </div>
384
+ </script>
385
+ </code>
386
+ <code class="language-markup" id="tableCardwithGreenBtneless">
387
+ <script type="prism-html-markup">
388
+ @import "~vx-design-system/css-build/less/text/text.less"
389
+ @import "~vx-design-system/css-build/less/color/color.less"
390
+ @import "~vx-design-system/css-build/less/table-card/table-card.less"
391
+ @import "~vx-design-system/css-build/less/button/button.less"
392
+ @import "~vx-design-system/css-build/less/margin/margin.less"
393
+ @import "~vx-design-system/css-build/less/margin/margin-top.less"
394
+ @import "~vx-design-system/css-build/less/margin/margin-right.less"
395
+ @import "~vx-design-system/css-build/less/margin/margin-bottom.less"
396
+ @import "~vx-design-system/css-build/less/margin/margin-left.less"
397
+ @import "~vx-design-system/css-build/less/padding/padding.less"
398
+ @import "~vx-design-system/css-build/less/padding/padding-top.less"
399
+ @import "~vx-design-system/css-build/less/padding/padding-right.less"
400
+ @import "~vx-design-system/css-build/less/padding/padding-bottom.less"
401
+ @import "~vx-design-system/css-build/less/padding/padding-left.less"
402
+
403
+ </script>
404
+ </code>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ <div class="page-quick-menu">
409
+ <div class="vx-sub-menu vx-p-0">
410
+ <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>
411
+ <ul class="vx-p-0">
412
+ <li><a href="#besicTableCard" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Basic Table Card</a></li>
413
+ <li><a href="#tableCardwithActive" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Table Card with Active</a></li>
414
+ <li><a href="#tableCardwithPerf" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Table Card with Performace</a></li>
415
+ <li><a href="#tableCardwithBlueBtn" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Table Card with Blue Button</a></li>
416
+ <li><a href="#tableCardwithGreenBtn" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Table Card with Green Button</a></li>
417
+ </ul>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </section>
422
+
423
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
424
+ <script async src="../less.js"></script>
425
+ <script src="../utility/prism.js"></script>
426
+ <script>
427
+ $(document).ready(function () {
428
+ $('button').click(function () {
429
+ var tab_id = $(this).attr('data-tab');
430
+ // $('preview-block button').removeClass('active');
431
+ $('.code-view vx-mb-5').removeClass('active');
432
+ // $(this).addClass('active');
433
+ $("#" + tab_id).toggleClass('active');
434
+ })
435
+ $('#besicTableCard .code-navigation button').click(function () {
436
+ var tab_id = $(this).attr('data-tab');
437
+ $('#besicTableCard .code-navigation button').removeClass('active');
438
+ $('#besicTableCard .language-markup').removeClass('active');
439
+ console.log(tab_id)
440
+ $("#" + tab_id).addClass('active');
441
+ $(this).addClass('active');
442
+ })
443
+ $('#tableCardwithPerf .code-navigation button').click(function () {
444
+ var tab_id = $(this).attr('data-tab');
445
+ $('#tableCardwithPerf .code-navigation button').removeClass('active');
446
+ $('#tableCardwithPerf .language-markup').removeClass('active');
447
+ console.log(tab_id)
448
+ $("#" + tab_id).addClass('active');
449
+ $(this).addClass('active');
450
+ })
451
+ $('#tableCardwithBlueBtn .code-navigation button').click(function () {
452
+ var tab_id = $(this).attr('data-tab');
453
+ $('#tableCardwithBlueBtn .code-navigation button').removeClass('active');
454
+ $('#tableCardwithBlueBtn .language-markup').removeClass('active');
455
+ console.log(tab_id)
456
+ $("#" + tab_id).addClass('active');
457
+ $(this).addClass('active');
458
+ })
459
+ $('#tableCardwithActive .code-navigation button').click(function () {
460
+ var tab_id = $(this).attr('data-tab');
461
+ $('#tableCardwithActive .code-navigation button').removeClass('active');
462
+ $('#tableCardwithActive .language-markup').removeClass('active');
463
+ console.log(tab_id)
464
+ $("#" + tab_id).addClass('active');
465
+ $(this).addClass('active');
466
+ })
467
+ $('#tableCardwithGreenBtn .code-navigation button').click(function () {
468
+ var tab_id = $(this).attr('data-tab');
469
+ $('#tableCardwithGreenBtn .code-navigation button').removeClass('active');
470
+ $('#tableCardwithGreenBtn .language-markup').removeClass('active');
471
+ console.log(tab_id)
472
+ $("#" + tab_id).addClass('active');
473
+ $(this).addClass('active');
474
+ })
475
+ });
476
+ $('ul li a.vx-fs-3[href*="#"]')
477
+ .not('[href="#"]')
478
+ .not('[href="#0"]')
479
+ .click(function (event) {
480
+ if (
481
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
482
+ &&
483
+ location.hostname == this.hostname
484
+ ) {
485
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
486
+ $(this).addClass('active');
487
+ var target = $(this.hash);
488
+ console.log(target);
489
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
490
+ if (target.length) {
491
+ event.preventDefault();
492
+ $('html, body').animate({
493
+ scrollTop: target.offset().top - 110
494
+ }, 100, function () {
495
+ var $target = $(target);
496
+ $target.focus();
497
+ if ($target.is(":focus")) {
498
+ return false;
499
+ } else {
500
+ $target.attr('tabindex', '-1');
501
+ $target.focus();
502
+ };
503
+ });
504
+ }
505
+ }
506
+ });
507
+ </script>
508
+ </body>
509
+
510
+ </html>