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