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/display.html ADDED
@@ -0,0 +1,67 @@
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>Disaply</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" rel="stylesheet">
11
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
12
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
13
+ </head>
14
+
15
+ <body>
16
+ <section>
17
+ <div class="vx-d-block block primary">Display block</div>
18
+ <div class="vx-d-inline block primary">Display inline</div>
19
+ <div class="vx-d-flex block primary">Display flex</div>
20
+ <div class="vx-d-inline-block block primary">Display inline block</div>
21
+ <div class="vx-d-table block primary">Display table</div>
22
+ <div class="vx-d-inline-flex block primary">Display inline flex</div>
23
+ </section>
24
+ <pre>
25
+ <div class="vx-d-flex">
26
+ <span><</span>
27
+ <span>div</span>
28
+ <span> class=</span><span>"vx-d-block"</span><span>>Display block</span>
29
+ <span><</span><span>/</span><span>div></span>
30
+ </div>
31
+ <div class="vx-d-flex">
32
+ <span><</span>
33
+ <span>div</span>
34
+ <span> class=</span><span>"vx-d-inline"</span><span>>Display inline</span>
35
+ <span><</span><span>/</span><span>div></span>
36
+ </div>
37
+ <div class="vx-d-flex">
38
+ <span><</span>
39
+ <span>div</span>
40
+ <span> class=</span><span>"vx-d-flex"</span><span>>Display Flex</span>
41
+ <span><</span><span>/</span><span>div></span>
42
+ </div>
43
+ <div class="vx-d-flex">
44
+ <span><</span>
45
+ <span>div</span>
46
+ <span> class=</span><span>"vx-d-inline-block"</span><span>>Display inline block</span>
47
+ <span><</span><span>/</span><span>div></span>
48
+ </div>
49
+ <div class="vx-d-flex">
50
+ <span><</span>
51
+ <span>div</span>
52
+ <span> class=</span><span>"vx-d-table"</span><span>>Display table</span>
53
+ <span><</span><span>/</span><span>div></span>
54
+ </div>
55
+ <div class="vx-d-flex">
56
+ <span><</span>
57
+ <span>div</span>
58
+ <span> class=</span><span>"vx-d-inline-flex"</span><span>>Display inline flex</span>
59
+ <span><</span><span>/</span><span>div></span>
60
+ </div>
61
+ <!-- <div class="d-table block primary">Display table</div> -->
62
+ <!-- <div class="d-inline-flex block primary">Display inline flex</div> -->
63
+ </pre>
64
+ <script async src="../less.js"></script>
65
+ </body>
66
+
67
+ </html>
package/css-build/pages/font-family.html ADDED
@@ -0,0 +1,281 @@
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="stylesheet" type="text/css" href="../utility/prism.css" />
9
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
10
+ <link rel="stylesheet/less" type="text/css" href="../less/index.less" />
11
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
12
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
13
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
14
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-bottom.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-top.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
24
+ <link rel="stylesheet/less" type="text/css" href="../less/forms/range-slider.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
27
+ </head>
28
+
29
+ <body>
30
+
31
+ <section>
32
+ <div class="head vx-mb-5">
33
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Font Family</h2>
34
+ <!-- <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
35
+ The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.
36
+ </p> -->
37
+ </div>
38
+ <div class="vx-d-flex vx-align-start">
39
+ <div class="page-container">
40
+ <div class="container" id="fontNormalLayout">
41
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Normal 400</h3>
42
+
43
+ <div class="preview-block">
44
+ <div class="action-buttons">
45
+ <button class="vx-btn md transparent">
46
+ <i class="icons">&#xe9b6;</i> Copy Code
47
+ </button>
48
+ <button class="vx-btn md transparent" data-tab="fontNormal">
49
+ <i class="icons rotate">&#xea95;</i> View Code
50
+ </button>
51
+ </div>
52
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
53
+ <div class="font-wrapper vx-pl-5 normal">
54
+ <div class="thumbnail">Aa</div>
55
+ <div class="content">
56
+ <p>Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</p>
57
+ <p>01 02 03 04 05 06 07 08 09</p>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ <div class="code-view vx-mb-5" id="fontNormal">
63
+ <div class="code-navigation">
64
+ <button class="active">HTML</button>
65
+ <button>CSS</button>
66
+ </div>
67
+ <code class="language-markup">
68
+ <script type="prism-html-markup">
69
+ font-family: 'Poppins', sans-serif;
70
+ font-weight: 400;
71
+ </script>
72
+ </code>
73
+ </div>
74
+ </div>
75
+
76
+ <div class="container" id="fontLightLayout">
77
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Light 300</h3>
78
+
79
+ <div class="preview-block">
80
+ <div class="action-buttons">
81
+ <button class="vx-btn md transparent">
82
+ <i class="icons">&#xe9b6;</i> Copy Code
83
+ </button>
84
+ <button class="vx-btn md transparent" data-tab="fontLight">
85
+ <i class="icons rotate">&#xea95;</i> View Code
86
+ </button>
87
+ </div>
88
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
89
+ <div class="font-wrapper vx-pl-5 light">
90
+ <div class="thumbnail">Aa</div>
91
+ <div class="content">
92
+ <p>Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</p>
93
+ <p>01 02 03 04 05 06 07 08 09</p>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ <div class="code-view vx-mb-5" id="fontLight">
99
+ <div class="code-navigation">
100
+ <button class="active">HTML</button>
101
+ <button>CSS</button>
102
+ </div>
103
+ <code class="language-markup">
104
+ <script type="prism-html-markup">
105
+ font-family: 'Poppins', sans-serif;
106
+ font-weight: 300;
107
+ </script>
108
+ </code>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="container" id="fontMediumLayout">
113
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Medium 500</h3>
114
+
115
+ <div class="preview-block">
116
+ <div class="action-buttons">
117
+ <button class="vx-btn md transparent">
118
+ <i class="icons">&#xe9b6;</i> Copy Code
119
+ </button>
120
+ <button class="vx-btn md transparent" data-tab="fontMedium">
121
+ <i class="icons rotate">&#xea95;</i> View Code
122
+ </button>
123
+ </div>
124
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
125
+ <div class="font-wrapper vx-pl-5 medium">
126
+ <div class="thumbnail">Aa</div>
127
+ <div class="content">
128
+ <p>Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</p>
129
+ <p>01 02 03 04 05 06 07 08 09</p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ <div class="code-view vx-mb-5" id="fontMedium">
135
+ <div class="code-navigation">
136
+ <button class="active">HTML</button>
137
+ <button>CSS</button>
138
+ </div>
139
+ <code class="language-markup">
140
+ <script type="prism-html-markup">
141
+ font-family: 'Poppins', sans-serif;
142
+ font-weight: 500;
143
+ </script>
144
+ </code>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="container" id="fontSemiBoldLayout">
149
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Semi bold 600</h3>
150
+
151
+ <div class="preview-block">
152
+ <div class="action-buttons">
153
+ <button class="vx-btn md transparent">
154
+ <i class="icons">&#xe9b6;</i> Copy Code
155
+ </button>
156
+ <button class="vx-btn md transparent" data-tab="fontSemiBold">
157
+ <i class="icons rotate">&#xea95;</i> View Code
158
+ </button>
159
+ </div>
160
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
161
+ <div class="font-wrapper vx-pl-5 semibold">
162
+ <div class="thumbnail">Aa</div>
163
+ <div class="content">
164
+ <p>Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</p>
165
+ <p>01 02 03 04 05 06 07 08 09</p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ <div class="code-view vx-mb-5" id="fontSemiBold">
171
+ <div class="code-navigation">
172
+ <button class="active">HTML</button>
173
+ <button>CSS</button>
174
+ </div>
175
+ <code class="language-markup">
176
+ <script type="prism-html-markup">
177
+ font-family: 'Poppins', sans-serif;
178
+ font-weight: 600;
179
+ </script>
180
+ </code>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="container" id="fontBoldLayout">
185
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Bold 700</h3>
186
+
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="fontBold">
193
+ <i class="icons rotate">&#xea95;</i> View Code
194
+ </button>
195
+ </div>
196
+ <div class="preview-container vx-bg-white vx-p-5 vx-d-flex vx-justify-center">
197
+ <div class="font-wrapper vx-pl-5 bold">
198
+ <div class="thumbnail">Aa</div>
199
+ <div class="content">
200
+ <p>Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</p>
201
+ <p>01 02 03 04 05 06 07 08 09</p>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ <div class="code-view vx-mb-5" id="fontBold">
207
+ <div class="code-navigation">
208
+ <button class="active">HTML</button>
209
+ <button>CSS</button>
210
+ </div>
211
+ <code class="language-markup">
212
+ <script type="prism-html-markup">
213
+ font-family: 'Poppins', sans-serif;
214
+ font-weight: 700;
215
+ </script>
216
+ </code>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ <div class="page-quick-menu">
221
+ <div class="vx-sub-menu vx-p-0">
222
+ <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>
223
+ <ul class="vx-p-0">
224
+ <li><a href="#fontNormalLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Normal 400</a></li>
225
+ <li><a href="#fontLightLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Light 300</a></li>
226
+ <li><a href="#fontMediumLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Medium 500</a></li>
227
+ <li><a href="#fontSemiBoldLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Semi bold 600</a></li>
228
+ <li><a href="#fontBoldLayout" class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Bold 700</a></li>
229
+ </ul>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </section>
234
+
235
+
236
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
237
+ <script async src="../less.js"></script>
238
+ <script src="../utility/prism.js"></script>
239
+ <script>
240
+ $(document).ready(function () {
241
+ $('button').click(function () {
242
+ var tab_id = $(this).attr('data-tab');
243
+ // $('preview-block button').removeClass('active');
244
+ $('.code-view vx-mb-5').removeClass('active');
245
+ // $(this).addClass('active');
246
+ $("#" + tab_id).toggleClass('active');
247
+ })
248
+ });
249
+ $('ul li a.vx-fs-3[href*="#"]').not('[href="#"]').not('[href="#0"]')
250
+ .click(function (event) {
251
+ if (
252
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
253
+ &&
254
+ location.hostname == this.hostname
255
+ ) {
256
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
257
+ $(this).addClass('active');
258
+ var target = $(this.hash);
259
+ console.log(target);
260
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
261
+ if (target.length) {
262
+ event.preventDefault();
263
+ $('html, body').animate({
264
+ scrollTop: target.offset().top - 110
265
+ }, 100, function () {
266
+ var $target = $(target);
267
+ $target.focus();
268
+ if ($target.is(":focus")) {
269
+ return false;
270
+ } else {
271
+ $target.attr('tabindex', '-1');
272
+ $target.focus();
273
+ };
274
+ });
275
+ }
276
+ }
277
+ });
278
+ </script>
279
+ </body>
280
+
281
+ </html>