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/radio.html ADDED
@@ -0,0 +1,418 @@
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/radio.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">Radio</h2>
40
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Using radio buttons, users can select
41
+ one option from a group of options.
42
+
43
+ Use radio buttons when you want users to see all available options and the list of options is
44
+ small. For mutually exclusive options, consider a checkbox or toggle switch.
45
+
46
+ Radio buttons are best for six or fewer options.
47
+
48
+ For more than six options, consider a select box, which prompts users to disclose the options. </p>
49
+ </div>
50
+ <div class="vx-d-flex vx-align-start">
51
+ <div class="page-container">
52
+ <div class="container" id="defaultRadioLayout">
53
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Default Radio</h3>
54
+
55
+ <div class="preview-block">
56
+ <div class="action-buttons">
57
+ <button class="vx-btn md transparent">
58
+ <i class="icons">&#xe9b6;</i> Copy Code
59
+ </button>
60
+ <button class="vx-btn md transparent" data-tab="defaultRadio">
61
+ <i class="icons rotate">&#xea95;</i> View Code
62
+ </button>
63
+ </div>
64
+ <div class="preview-container vx-bg-white vx-p-5">
65
+ <div class="vx-radio-group">
66
+ <label class="vx-radio-item">
67
+ <input type="radio" name="radio">
68
+ <span class="radio">
69
+ <span class="inner"></span>
70
+ </span>
71
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
72
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
73
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
74
+ </svg>
75
+ <span class="value">Radio 1</span>
76
+ </label>
77
+ <label class="vx-radio-item">
78
+ <input type="radio" name="radio">
79
+ <span class="radio">
80
+ <span class="inner"></span>
81
+ </span>
82
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
83
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
84
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
85
+ </svg>
86
+ <span class="value">Radio 2</span>
87
+ </label>
88
+ <label class="vx-radio-item">
89
+ <input type="radio" name="radio">
90
+ <span class="radio">
91
+ <span class="inner"></span>
92
+ </span>
93
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
94
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
95
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
96
+ </svg>
97
+ <span class="value">Radio 3</span>
98
+ </label>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ <div class="code-view vx-mb-5" id="defaultRadio">
103
+ <div class="code-navigation">
104
+ <button class="active">HTML</button>
105
+ <button>CSS</button>
106
+ </div>
107
+ <code class="language-markup">
108
+ <script type="prism-html-markup">
109
+ <div class="vx-radio-group">
110
+ <label class="vx-radio-item">
111
+ <input type="radio" name="radio">
112
+ <span class="radio">
113
+ <span class="inner"></span>
114
+ </span>
115
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
116
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
117
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
118
+ </svg>
119
+ <span class="value">Radio 1</span>
120
+ </label>
121
+ <label class="vx-radio-item">
122
+ <input type="radio" name="radio">
123
+ <span class="radio">
124
+ <span class="inner"></span>
125
+ </span>
126
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
127
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
128
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
129
+ </svg>
130
+ <span class="value">Radio 2</span>
131
+ </label>
132
+ <label class="vx-radio-item">
133
+ <input type="radio" name="radio">
134
+ <span class="radio">
135
+ <span class="inner"></span>
136
+ </span>
137
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
138
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
139
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
140
+ </svg>
141
+ <span class="value">Radio 3</span>
142
+ </label>
143
+ </div>
144
+ </script>
145
+ </code>
146
+ </div>
147
+ </div>
148
+ <div class="container" id="defaultRadioGroupLayout">
149
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Radio group </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="efaultRadioGroup">
157
+ <i class="icons rotate">&#xea95;</i> View Code
158
+ </button>
159
+ </div>
160
+ <div class="preview-container vx-bg-white vx-p-5">
161
+ <div class="vx-radio-group ver">
162
+ <label class="vx-radio-item">
163
+ <input type="radio" name="radio">
164
+ <span class="radio">
165
+ <span class="inner"></span>
166
+ </span>
167
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
168
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
169
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
170
+ </svg>
171
+ <span class="value">Radio 1</span>
172
+ </label>
173
+ <label class="vx-radio-item">
174
+ <input type="radio" name="radio">
175
+ <span class="radio">
176
+ <span class="inner"></span>
177
+ </span>
178
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
179
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
180
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
181
+ </svg>
182
+ <span class="value">Radio 2</span>
183
+ </label>
184
+ <label class="vx-radio-item">
185
+ <input type="radio" name="radio">
186
+ <span class="radio">
187
+ <span class="inner"></span>
188
+ </span>
189
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
190
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
191
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
192
+ </svg>
193
+ <span class="value">Radio 3</span>
194
+ </label>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ <div class="code-view vx-mb-5" id="efaultRadioGroup">
199
+ <div class="code-navigation">
200
+ <button class="active">HTML</button>
201
+ <button>CSS</button>
202
+ </div>
203
+ <code class="language-markup">
204
+ <script type="prism-html-markup">
205
+ <div class="vx-radio-group">
206
+ <label class="vx-radio-item">
207
+ <input type="radio" name="radio">
208
+ <span class="radio">
209
+ <span class="inner"></span>
210
+ </span>
211
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
212
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
213
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
214
+ </svg>
215
+ <span class="value">Radio 1</span>
216
+ </label>
217
+ <label class="vx-radio-item">
218
+ <input type="radio" name="radio">
219
+ <span class="radio">
220
+ <span class="inner"></span>
221
+ </span>
222
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
223
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
224
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
225
+ </svg>
226
+ <span class="value">Radio 2</span>
227
+ </label>
228
+ <label class="vx-radio-item">
229
+ <input type="radio" name="radio">
230
+ <span class="radio">
231
+ <span class="inner"></span>
232
+ </span>
233
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
234
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
235
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
236
+ </svg>
237
+ <span class="value">Radio 3</span>
238
+ </label>
239
+ </div>
240
+ </script>
241
+ </code>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="container" id="defaultRadioDisabledLayout">
246
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Radio disabled one</h3>
247
+
248
+ <div class="preview-block">
249
+ <div class="action-buttons">
250
+ <button class="vx-btn md transparent">
251
+ <i class="icons">&#xe9b6;</i> Copy Code
252
+ </button>
253
+ <button class="vx-btn md transparent" data-tab="defaultRadioDisabled">
254
+ <i class="icons rotate">&#xea95;</i> View Code
255
+ </button>
256
+ </div>
257
+ <div class="preview-container vx-bg-white vx-p-5">
258
+ <div class="vx-radio-group">
259
+ <label class="vx-radio-item">
260
+ <input type="radio" name="radioDisabled">
261
+ <span class="radio">
262
+ <span class="inner"></span>
263
+ </span>
264
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
265
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
266
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
267
+ </svg>
268
+ <span class="value">Radio 1</span>
269
+ </label>
270
+ <label class="vx-radio-item">
271
+ <input type="radio" name="radioDisabled" disabled>
272
+ <span class="radio">
273
+ <span class="inner"></span>
274
+ </span>
275
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
276
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
277
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
278
+ </svg>
279
+ <span class="value">Radio 2</span>
280
+ </label>
281
+ <label class="vx-radio-item">
282
+ <input type="radio" name="radioDisabled">
283
+ <span class="radio">
284
+ <span class="inner"></span>
285
+ </span>
286
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
287
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
288
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
289
+ </svg>
290
+ <span class="value">Radio 3</span>
291
+ </label>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ <div class="code-view vx-mb-5" id="defaultRadioDisabled">
296
+ <div class="code-navigation">
297
+ <button class="active">HTML</button>
298
+ <button>CSS</button>
299
+ </div>
300
+ <code class="language-markup">
301
+ <script type="prism-html-markup">
302
+ <div class="vx-radio-group">
303
+ <label class="vx-radio-item">
304
+ <input type="radio" name="radioDisabled">
305
+ <span class="radio">
306
+ <span class="inner"></span>
307
+ </span>
308
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
309
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
310
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
311
+ </svg>
312
+ <span class="value">Radio 1</span>
313
+ </label>
314
+ <label class="vx-radio-item">
315
+ <input type="radio" name="radioDisabled" disabled>
316
+ <span class="radio">
317
+ <span class="inner"></span>
318
+ </span>
319
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
320
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
321
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
322
+ </svg>
323
+ <span class="value">Radio 2</span>
324
+ </label>
325
+ <label class="vx-radio-item">
326
+ <input type="radio" name="radioDisabled">
327
+ <span class="radio">
328
+ <span class="inner"></span>
329
+ </span>
330
+ <svg class="radiomark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
331
+ <circle class="radiomark__circle" cx="26" cy="26" r="25" fill="none" />
332
+ <circle class="radiomark__check" cx="26" cy="26" r="5" fill="none" />
333
+ </svg>
334
+ <span class="value">Radio 3</span>
335
+ </label>
336
+ </div>
337
+ </script>
338
+ </code>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ <div class="page-quick-menu">
343
+ <div class="vx-sub-menu vx-p-0">
344
+ <h3
345
+ 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">
346
+ Contents</h3>
347
+ <ul class="vx-p-0">
348
+ <li>
349
+ <a href="#defaultRadioLayout"
350
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Default Radio</a>
351
+ </li>
352
+ <li>
353
+ <a href="#defaultRadioGroupLayout"
354
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Radio group</a>
355
+ </li>
356
+ <li>
357
+ <a href="#defaultRadioDisabledLayout"
358
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Radio disabled one</a>
359
+ </li>
360
+ </ul>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </section>
365
+
366
+
367
+
368
+
369
+
370
+
371
+
372
+
373
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
374
+ <script async src="../less.js"></script>
375
+ <script src="../utility/prism.js"></script>
376
+ <script>
377
+ $(document).ready(function () {
378
+ $('button').click(function () {
379
+ var tab_id = $(this).attr('data-tab');
380
+ // $('preview-block button').removeClass('active');
381
+ $('.code-view vx-mb-5').removeClass('active');
382
+ // $(this).addClass('active');
383
+ $("#" + tab_id).toggleClass('active');
384
+ })
385
+ });
386
+ $('ul li a.vx-fs-3[href*="#"]').not('[href="#"]').not('[href="#0"]')
387
+ .click(function (event) {
388
+ if (
389
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
390
+ &&
391
+ location.hostname == this.hostname
392
+ ) {
393
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
394
+ $(this).addClass('active');
395
+ var target = $(this.hash);
396
+ console.log(target);
397
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
398
+ if (target.length) {
399
+ event.preventDefault();
400
+ $('html, body').animate({
401
+ scrollTop: target.offset().top - 110
402
+ }, 100, function () {
403
+ var $target = $(target);
404
+ $target.focus();
405
+ if ($target.is(":focus")) {
406
+ return false;
407
+ } else {
408
+ $target.attr('tabindex', '-1');
409
+ $target.focus();
410
+ };
411
+ });
412
+ }
413
+ }
414
+ });
415
+ </script>
416
+ </body>
417
+
418
+ </html>