vitat-css 0.1.0 → 0.1.2

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 (156) hide show
  1. checksums.yaml +4 -4
  2. data/.DS_Store +0 -0
  3. data/.gitignore +146 -8
  4. data/.idea/.gitignore +5 -0
  5. data/.idea/modules.xml +8 -0
  6. data/.idea/vcs.xml +6 -0
  7. data/.idea/vitat-design-system.iml +12 -0
  8. data/.vscode/settings.json +3 -0
  9. data/HTML/.DS_Store +0 -0
  10. data/HTML/Components/Arabescos.html +87 -0
  11. data/HTML/Components/Buttons.html +105 -0
  12. data/HTML/Components/Card.html +337 -0
  13. data/HTML/Components/CardApp.html +201 -0
  14. data/HTML/Components/Inputs.html +105 -0
  15. data/HTML/Components/Lista.html +106 -0
  16. data/HTML/Components/Pagination.html +218 -0
  17. data/HTML/Components/Pills.html +94 -0
  18. data/HTML/Components/Revisado.html +163 -0
  19. data/JS/prism.js +12 -0
  20. data/bootstrap/scss/_accordion.scss +118 -0
  21. data/bootstrap/scss/_alert.scss +57 -0
  22. data/bootstrap/scss/_badge.scss +29 -0
  23. data/bootstrap/scss/_breadcrumb.scss +28 -0
  24. data/bootstrap/scss/_button-group.scss +139 -0
  25. data/bootstrap/scss/_buttons.scss +111 -0
  26. data/bootstrap/scss/_card.scss +216 -0
  27. data/bootstrap/scss/_carousel.scss +229 -0
  28. data/bootstrap/scss/_close.scss +40 -0
  29. data/bootstrap/scss/_containers.scss +41 -0
  30. data/bootstrap/scss/_dropdown.scss +240 -0
  31. data/bootstrap/scss/_forms.scss +9 -0
  32. data/bootstrap/scss/_functions.scss +302 -0
  33. data/bootstrap/scss/_grid.scss +33 -0
  34. data/bootstrap/scss/_helpers.scss +9 -0
  35. data/bootstrap/scss/_images.scss +42 -0
  36. data/bootstrap/scss/_list-group.scss +174 -0
  37. data/bootstrap/scss/_mixins.scss +43 -0
  38. data/bootstrap/scss/_modal.scss +209 -0
  39. data/bootstrap/scss/_nav.scss +139 -0
  40. data/bootstrap/scss/_navbar.scss +335 -0
  41. data/bootstrap/scss/_offcanvas.scss +83 -0
  42. data/bootstrap/scss/_pagination.scss +64 -0
  43. data/bootstrap/scss/_placeholders.scss +51 -0
  44. data/bootstrap/scss/_popover.scss +158 -0
  45. data/bootstrap/scss/_progress.scss +48 -0
  46. data/bootstrap/scss/_reboot.scss +625 -0
  47. data/bootstrap/scss/_root.scss +54 -0
  48. data/bootstrap/scss/_spinners.scss +69 -0
  49. data/bootstrap/scss/_tables.scss +155 -0
  50. data/bootstrap/scss/_toasts.scss +51 -0
  51. data/bootstrap/scss/_tooltip.scss +115 -0
  52. data/bootstrap/scss/_transitions.scss +27 -0
  53. data/bootstrap/scss/_type.scss +104 -0
  54. data/bootstrap/scss/_utilities.scss +630 -0
  55. data/bootstrap/scss/_variables.scss +1641 -0
  56. data/bootstrap/scss/bootstrap-grid.scss +67 -0
  57. data/bootstrap/scss/bootstrap-reboot.scss +13 -0
  58. data/bootstrap/scss/bootstrap-utilities.scss +18 -0
  59. data/bootstrap/scss/bootstrap.scss +53 -0
  60. data/bootstrap/scss/forms/_floating-labels.scss +63 -0
  61. data/bootstrap/scss/forms/_form-check.scss +152 -0
  62. data/bootstrap/scss/forms/_form-control.scss +219 -0
  63. data/bootstrap/scss/forms/_form-range.scss +91 -0
  64. data/bootstrap/scss/forms/_form-select.scss +72 -0
  65. data/bootstrap/scss/forms/_form-text.scss +11 -0
  66. data/bootstrap/scss/forms/_input-group.scss +121 -0
  67. data/bootstrap/scss/forms/_labels.scss +36 -0
  68. data/bootstrap/scss/forms/_validation.scss +12 -0
  69. data/bootstrap/scss/helpers/_clearfix.scss +3 -0
  70. data/bootstrap/scss/helpers/_colored-links.scss +12 -0
  71. data/bootstrap/scss/helpers/_position.scss +30 -0
  72. data/bootstrap/scss/helpers/_ratio.scss +26 -0
  73. data/bootstrap/scss/helpers/_stacks.scss +15 -0
  74. data/bootstrap/scss/helpers/_stretched-link.scss +15 -0
  75. data/bootstrap/scss/helpers/_text-truncation.scss +7 -0
  76. data/bootstrap/scss/helpers/_visually-hidden.scss +8 -0
  77. data/bootstrap/scss/helpers/_vr.scss +8 -0
  78. data/bootstrap/scss/mixins/_alert.scss +11 -0
  79. data/bootstrap/scss/mixins/_backdrop.scss +14 -0
  80. data/bootstrap/scss/mixins/_border-radius.scss +78 -0
  81. data/bootstrap/scss/mixins/_box-shadow.scss +18 -0
  82. data/bootstrap/scss/mixins/_breakpoints.scss +127 -0
  83. data/bootstrap/scss/mixins/_buttons.scss +133 -0
  84. data/bootstrap/scss/mixins/_caret.scss +64 -0
  85. data/bootstrap/scss/mixins/_clearfix.scss +9 -0
  86. data/bootstrap/scss/mixins/_color-scheme.scss +7 -0
  87. data/bootstrap/scss/mixins/_container.scss +9 -0
  88. data/bootstrap/scss/mixins/_deprecate.scss +10 -0
  89. data/bootstrap/scss/mixins/_forms.scss +144 -0
  90. data/bootstrap/scss/mixins/_gradients.scss +47 -0
  91. data/bootstrap/scss/mixins/_grid.scss +151 -0
  92. data/bootstrap/scss/mixins/_image.scss +16 -0
  93. data/bootstrap/scss/mixins/_list-group.scss +24 -0
  94. data/bootstrap/scss/mixins/_lists.scss +7 -0
  95. data/bootstrap/scss/mixins/_pagination.scss +31 -0
  96. data/bootstrap/scss/mixins/_reset-text.scss +17 -0
  97. data/bootstrap/scss/mixins/_resize.scss +6 -0
  98. data/bootstrap/scss/mixins/_table-variants.scss +21 -0
  99. data/bootstrap/scss/mixins/_text-truncate.scss +8 -0
  100. data/bootstrap/scss/mixins/_transition.scss +26 -0
  101. data/bootstrap/scss/mixins/_utilities.scss +89 -0
  102. data/bootstrap/scss/mixins/_visually-hidden.scss +29 -0
  103. data/bootstrap/scss/utilities/_api.scss +47 -0
  104. data/bootstrap/scss/vendor/_rfs.scss +354 -0
  105. data/css/prism.css +4 -0
  106. data/css/style.css +6 -0
  107. data/gulpfile.js +35 -0
  108. data/img/.DS_Store +0 -0
  109. data/img/arrow-active.png +0 -0
  110. data/img/arrow-disable.png +0 -0
  111. data/img/arrow.png +0 -0
  112. data/img/close.png +0 -0
  113. data/img/phone.png +0 -0
  114. data/img/placeholder.png +0 -0
  115. data/img/placeholder_avatar.png +0 -0
  116. data/img/qr-code-loja.png +0 -0
  117. data/img/store_icon.png +0 -0
  118. data/index.html +33 -0
  119. data/install_nvm.sh +425 -0
  120. data/package-lock.json +4233 -0
  121. data/package.json +9 -0
  122. data/scss/.DS_Store +0 -0
  123. data/scss/guide/.DS_Store +0 -0
  124. data/scss/guide/_variables.scss +171 -0
  125. data/scss/guide/components/_animations.scss +8 -0
  126. data/scss/guide/components/_typography.scss +157 -0
  127. data/scss/guide/components/arabescos/arabescos.scss +47 -0
  128. data/scss/guide/components/buttons/btn.scss +26 -0
  129. data/scss/guide/components/buttons/btn__large.scss +10 -0
  130. data/scss/guide/components/buttons/btn__primary.scss +11 -0
  131. data/scss/guide/components/buttons/btn__secondary.scss +11 -0
  132. data/scss/guide/components/buttons/btn__tertiary.scss +11 -0
  133. data/scss/guide/components/cardapp/cardapp.scss +151 -0
  134. data/scss/guide/components/cards/card.scss +58 -0
  135. data/scss/guide/components/cards/card__horizontal.scss +35 -0
  136. data/scss/guide/components/cards/card__horizontal__small.scss +9 -0
  137. data/scss/guide/components/inputs/_checkbox.scss +45 -0
  138. data/scss/guide/components/inputs/_text.scss +8 -0
  139. data/scss/guide/components/lista/lista.scss +31 -0
  140. data/scss/guide/components/pagination/pagination.scss +81 -0
  141. data/scss/guide/components/pills/pill.scss +31 -0
  142. data/scss/guide/components/pills/pill__full.scss +8 -0
  143. data/scss/guide/components/pills/pill__secundary.scss +8 -0
  144. data/scss/guide/components/pills/pill__small.scss +8 -0
  145. data/scss/guide/components/revisado/revisado.scss +52 -0
  146. data/scss/guide/style.scss +96 -0
  147. metadata +147 -12
  148. data/CODE_OF_CONDUCT.md +0 -74
  149. data/Gemfile +0 -6
  150. data/LICENSE.txt +0 -21
  151. data/Rakefile +0 -2
  152. data/bin/console +0 -14
  153. data/bin/setup +0 -8
  154. data/lib/vitat/css/version.rb +0 -5
  155. data/lib/vitat/css.rb +0 -8
  156. data/vitat-css.gemspec +0 -41
data/HTML/Components/Card.html ADDED
@@ -0,0 +1,337 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Design System - Vitat</title>
6
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
7
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
+ <link
9
+ href="https://fonts.googleapis.com/css2?family=Livvic:wght@400;600&display=swap"
10
+ rel="stylesheet"
11
+ />
12
+ <link rel="stylesheet" href="../../css/style.css" />
13
+ <link rel="stylesheet" href="../../css/prism.css" />
14
+ </head>
15
+ <body>
16
+ <div class="container">
17
+ <div class="row">
18
+ <div class="col-lg-12">
19
+ <ul class="bar__ul">
20
+ <li class="bar__li">
21
+ <a class="bar__a" href="./Buttons.html">Botões</a>
22
+ </li>
23
+ <li class="bar__li">
24
+ <a class="bar__a" href="./Inputs.html">inputs</a>
25
+ </li>
26
+ <li class="bar__li">
27
+ <a class="bar__a" href="./Pills.html">Pills</a>
28
+ </li>
29
+ <li class="bar__li">
30
+ <a class="bar__a" href="./Card.html">Cards</a>
31
+ </li>
32
+ <li class="bar__li">
33
+ <a class="bar__a" href="./Pagination.html">Pagination</a>
34
+ </li>
35
+ <li class="bar__li">
36
+ <a class="bar__a" href="./Revisado.html">Revisado Por</a>
37
+ </li>
38
+ <li class="bar__li">
39
+ <a class="bar__a" href="./CardApp.html">Card App</a>
40
+ </li>
41
+ <li class="bar__li">
42
+ <a class="bar__a" href="./Arabescos.html">Arabescos</a>
43
+ </li>
44
+ <li class="bar__li">
45
+ <a class="bar__a" href="./Lista.html">Lista</a>
46
+ </li>
47
+ </ul>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ <div class="container">
52
+ <div class="row my-5">
53
+ <div class="col-lg-4 my-4">
54
+ <div class="cardes">
55
+ <div class="card">
56
+ <a href="#" target="blank">
57
+ <img class="card__img" src="/img/placeholder.png" alt="" />
58
+ <div class="card__wrapper">
59
+ <a
60
+ href="#"
61
+ target="blank"
62
+ class="pill pill__small pill__full bg__yellow"
63
+ >
64
+ Alimentação
65
+ </a>
66
+ <h3 class="heading heading__3 card__title">
67
+ Frequência cardíaca por idade: como calcular o batimento
68
+ cardíaco?
69
+ </h3>
70
+ <p class="body body__1 card__text">
71
+ Um dos termos mais comuns de quem pratica atividade física é
72
+ frequência cardíaca. Mas você...
73
+ </p>
74
+ </div>
75
+ </a>
76
+ </div>
77
+ <pre class="line-numbers mt-4">
78
+ <code class="language-markup">
79
+
80
+ </code>
81
+ </pre>
82
+ </div>
83
+ </div>
84
+ <div class="col-lg-4 my-4">
85
+ <div class="cardes">
86
+ <div class="card">
87
+ <a href="#" target="blank">
88
+ <img class="card__img" src="/img/placeholder.png" alt="" />
89
+ <div class="card__wrapper">
90
+ <a
91
+ href="#"
92
+ target="blank"
93
+ class="pill pill__small pill__full bg__yellow"
94
+ >
95
+ Alimentação
96
+ </a>
97
+ <h3 class="heading heading__3 card__title">
98
+ Frequência cardíaca por idade: como calcular o batimento
99
+ cardíaco?
100
+ </h3>
101
+ </div>
102
+ </a>
103
+ </div>
104
+ <pre class="line-numbers mt-4">
105
+ <code class="language-markup">
106
+
107
+ </code>
108
+ </pre>
109
+ </div>
110
+ </div>
111
+ <div class="col-lg-4 my-4">
112
+ <div class="cardes">
113
+ <div class="card card__horizontal">
114
+ <img class="card__img" src="/img/placeholder.png" alt="" />
115
+ <div class="card__wrapper">
116
+ <a
117
+ href="#"
118
+ target="blank"
119
+ class="pill pill__small pill__full bg__yellow"
120
+ >
121
+ Alimentação
122
+ </a>
123
+
124
+ <h3 class="heading heading__6 card__title">
125
+ Adotar um cachorro é uma opção para manter a vida ativa
126
+ </h3>
127
+ <p class="body body__2 card__text">
128
+ Um dos termos mais comuns de quem pratica atividade...
129
+ </p>
130
+ </div>
131
+ </div>
132
+ <pre class="line-numbers mt-4">
133
+ <code class="language-markup">
134
+
135
+ </code>
136
+ </pre>
137
+ </div>
138
+ </div>
139
+ <div class="col-lg-4 my-4">
140
+ <div class="cardes">
141
+ <div class="card card__horizontal card__horizontal__small">
142
+ <img class="card__img" src="/img/placeholder.png" alt="" />
143
+ <div class="card__wrapper">
144
+ <a
145
+ href="#"
146
+ target="blank"
147
+ class="pill pill__small pill__full bg__pink"
148
+ >
149
+ Gravidez e Maternidade
150
+ </a>
151
+ <h3 class="heading heading__6 card__title">
152
+ Adotar um cachorro é uma opção para manter a vida ativa
153
+ </h3>
154
+ </div>
155
+ </div>
156
+ <pre class="line-numbers mt-4">
157
+ <code class="language-markup">
158
+ </code>
159
+ </pre>
160
+ </div>
161
+ </div>
162
+ <div class="col-lg-4 my-4">
163
+ <div class="cardes">
164
+ <div class="card card__horizontal">
165
+ <img class="card__img" src="/img/placeholder.png" alt="" />
166
+ <div class="card__wrapper">
167
+ <h3 class="heading heading__6 card__title">
168
+ Adotar um cachorro é uma opção para manter a vida ativa
169
+ </h3>
170
+ </div>
171
+ </div>
172
+ <pre class="line-numbers mt-4">
173
+ <code class="language-markup">
174
+ </code>
175
+ </pre>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="card__color">
182
+ <div class="container">
183
+ <div class="row">
184
+ <div class="col-lg-12">
185
+ <h2 class="heading heading__2">Outros temas mais procurados</h2>
186
+ </div>
187
+ <div class="col-lg-12">
188
+ <h3 class="heading heading__4">Alimentação</h3>
189
+ </div>
190
+ <div class="col-lg-3">
191
+ <div class="card card__horizontal">
192
+ <img class="card__img" src="/img/placeholder.png" alt="" />
193
+ <div class="card__wrapper">
194
+ <h3 class="heading heading__6 card__title">
195
+ Adotar um cachorro é uma opção para manter a vida ativa
196
+ </h3>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ <div class="col-lg-3">
201
+ <div class="card card__horizontal">
202
+ <img class="card__img" src="/img/placeholder.png" alt="" />
203
+ <div class="card__wrapper">
204
+ <h3 class="heading heading__6 card__title">
205
+ Adotar um cachorro é uma opção para manter a vida ativa
206
+ </h3>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <div class="col-lg-3">
211
+ <div class="card card__horizontal">
212
+ <img class="card__img" src="/img/placeholder.png" alt="" />
213
+ <div class="card__wrapper">
214
+ <h3 class="heading heading__6 card__title">
215
+ Adotar um cachorro é uma opção para manter a vida ativa
216
+ </h3>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ <div class="col-lg-3">
221
+ <div class="card card__horizontal">
222
+ <img class="card__img" src="/img/placeholder.png" alt="" />
223
+ <div class="card__wrapper">
224
+ <h3 class="heading heading__6 card__title">
225
+ Adotar um cachorro é uma opção para manter a vida ativa
226
+ </h3>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ <div class="col-lg-12">
231
+ <h3 class="heading heading__4">Movimento</h3>
232
+ </div>
233
+ <div class="col-lg-3">
234
+ <div class="card card__horizontal">
235
+ <img class="card__img" src="/img/placeholder.png" alt="" />
236
+ <div class="card__wrapper">
237
+ <h3 class="heading heading__6 card__title">
238
+ Adotar um cachorro é uma opção para manter a vida ativa
239
+ </h3>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ <div class="col-lg-3">
244
+ <div class="card card__horizontal">
245
+ <img class="card__img" src="/img/placeholder.png" alt="" />
246
+ <div class="card__wrapper">
247
+ <h3 class="heading heading__6 card__title">
248
+ Adotar um cachorro é uma opção para manter a vida ativa
249
+ </h3>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ <div class="col-lg-3">
254
+ <div class="card card__horizontal">
255
+ <img class="card__img" src="/img/placeholder.png" alt="" />
256
+ <div class="card__wrapper">
257
+ <h3 class="heading heading__6 card__title">
258
+ Adotar um cachorro é uma opção para manter a vida ativa
259
+ </h3>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ <div class="col-lg-3">
264
+ <div class="card card__horizontal">
265
+ <img class="card__img" src="/img/placeholder.png" alt="" />
266
+ <div class="card__wrapper">
267
+ <h3 class="heading heading__6 card__title">
268
+ Adotar um cachorro é uma opção para manter a vida ativa
269
+ </h3>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ <div class="col-lg-12">
274
+ <h3 class="heading heading__4">Saúde</h3>
275
+ </div>
276
+ <div class="col-lg-3">
277
+ <div class="card card__horizontal">
278
+ <img class="card__img" src="/img/placeholder.png" alt="" />
279
+ <div class="card__wrapper">
280
+ <h3 class="heading heading__6 card__title">
281
+ Adotar um cachorro é uma opção para manter a vida ativa
282
+ </h3>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ <div class="col-lg-3">
287
+ <div class="card card__horizontal">
288
+ <img class="card__img" src="/img/placeholder.png" alt="" />
289
+ <div class="card__wrapper">
290
+ <h3 class="heading heading__6 card__title">
291
+ Adotar um cachorro é uma opção para manter a vida ativa
292
+ </h3>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ <div class="col-lg-3">
297
+ <div class="card card__horizontal">
298
+ <img class="card__img" src="/img/placeholder.png" alt="" />
299
+ <div class="card__wrapper">
300
+ <h3 class="heading heading__6 card__title">
301
+ Adotar um cachorro é uma opção para manter a vida ativa
302
+ </h3>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ <div class="col-lg-3">
307
+ <div class="card card__horizontal">
308
+ <img class="card__img" src="/img/placeholder.png" alt="" />
309
+ <div class="card__wrapper">
310
+ <h3 class="heading heading__6 card__title">
311
+ Adotar um cachorro é uma opção para manter a vida ativa
312
+ </h3>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </body>
320
+ <script src="../../JS/prism.js"></script>
321
+ <script>
322
+ let cards = document.querySelectorAll(".cardes");
323
+ cards.forEach((card) => {
324
+ contentHTML = card.querySelector(".language-markup");
325
+ let content = card.children[0].outerHTML;
326
+ let newContent = content.replaceAll(/</g, "&lt;");
327
+ let finalContent = newContent.replaceAll(/>/g, "&gt;");
328
+ contentHTML.innerHTML = finalContent;
329
+ });
330
+ Prism.plugins.NormalizeWhitespace.setDefaults({
331
+ "remove-trailing": true,
332
+ "remove-indent": true,
333
+ "left-trim": true,
334
+ "right-trim": true,
335
+ });
336
+ </script>
337
+ </html>
data/HTML/Components/CardApp.html ADDED
@@ -0,0 +1,201 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Design System - Vitat</title>
6
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
7
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
+ <link
9
+ href="https://fonts.googleapis.com/css2?family=Livvic:wght@400;600&display=swap"
10
+ rel="stylesheet"
11
+ />
12
+ <link rel="stylesheet" href="../../css/style.css" />
13
+ <link rel="stylesheet" href="../../css/prism.css" />
14
+ </head>
15
+
16
+ <body>
17
+ <div class="container">
18
+ <div class="row">
19
+ <div class="col-lg-12">
20
+ <ul class="bar__ul">
21
+ <li class="bar__li">
22
+ <a class="bar__a" href="./Buttons.html">Botões</a>
23
+ </li>
24
+ <li class="bar__li">
25
+ <a class="bar__a" href="./Inputs.html">inputs</a>
26
+ </li>
27
+ <li class="bar__li">
28
+ <a class="bar__a" href="./Pills.html">Pills</a>
29
+ </li>
30
+ <li class="bar__li">
31
+ <a class="bar__a" href="./Card.html">Cards</a>
32
+ </li>
33
+ <li class="bar__li">
34
+ <a class="bar__a" href="./Pagination.html">Pagination</a>
35
+ </li>
36
+ <li class="bar__li">
37
+ <a class="bar__a" href="./Revisado.html">Revisado Por</a>
38
+ </li>
39
+ <li class="bar__li">
40
+ <a class="bar__a" href="./CardApp.html">Card App</a>
41
+ </li>
42
+ <li class="bar__li">
43
+ <a class="bar__a" href="./Arabescos.html">Arabescos</a>
44
+ </li>
45
+ <li class="bar__li">
46
+ <a class="bar__a" href="./Lista.html">Lista</a>
47
+ </li>
48
+ </ul>
49
+ </div>
50
+ </div>
51
+ </div>
52
+
53
+ <!-- Modal -->
54
+ <div
55
+ class="modal fade"
56
+ id="modalQrCode"
57
+ tabindex="-1"
58
+ aria-labelledby="exampleModalLabel"
59
+ aria-hidden="true"
60
+ >
61
+ <div class="modal-dialog modal-xl modal-dialog-centered">
62
+ <div class="modal-content cardapp__modal">
63
+ <div class="modal-header cardapp-modal-header">
64
+ <button
65
+ type="button"
66
+ class="btn-close btn-close-modal"
67
+ data-bs-dismiss="modal"
68
+ aria-label="Close"
69
+ ></button>
70
+ </div>
71
+ <div class="modal-body">
72
+ <h3 class="heading__4 modal-heading">
73
+ Para baixar o app é só usar o QR code abaixo:
74
+ </h3>
75
+ <img
76
+ src="/img/qr-code-loja.png"
77
+ alt="QrCode"
78
+ height="134"
79
+ width="134"
80
+ />
81
+ <p class="body__2 modal-footer-text">
82
+ Aponte a câmera do seu celular para o QR code, ou espere o celular
83
+ escanear.
84
+ </p>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <div class="container">
91
+ <div class="row my-5 cardapp-bg">
92
+ <div class="col-lg-6 col-md-12 my-4">
93
+ <div class="cardes">
94
+ <div class="cardapp">
95
+ <div class="cardapp__content row col-lg-12">
96
+ <div class="cardapp__imgbox col-lg-2">
97
+ <img
98
+ class="cardapp__img"
99
+ src="/img/phone.png"
100
+ alt="icone celular"
101
+ />
102
+ </div>
103
+ <div class="cardapp__wrapper row col-lg-10">
104
+ <h3 class="cardapp__title heading__4">App Vitat</h3>
105
+ <p class="cardapp__text body body__1">
106
+ Tenha um acesso mais facilitado para a sua Saúde e
107
+ Bem-Estar. Com apenas um clique, agende exames, faça
108
+ consultas online e tenha acesso a programas gratuitos de
109
+ autocuidado, tudo isso é muito mais.
110
+ </p>
111
+ </div>
112
+ <div class="col-lg-12 center">
113
+ <button
114
+ type="button"
115
+ class="cardapp__btn cardapp__link desktop"
116
+ data-bs-toggle="modal"
117
+ data-bs-target="#modalQrCode"
118
+ >
119
+ Baixe o nosso app
120
+ </button>
121
+ <a
122
+ class="cardapp__link mobile"
123
+ href="https://vitat.onelink.me/3u6i"
124
+ >Baixe o nosso app</a
125
+ >
126
+ </div>
127
+ </div>
128
+ </div>
129
+ <pre class="line-numbers mt-4">
130
+ <code class="language-markup">
131
+ </code>
132
+ </pre>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="col-lg-6 col-md-12 my-4">
137
+ <div class="cardes">
138
+ <div class="cardapp">
139
+ <div class="cardapp__content row col-lg-12">
140
+ <div class="cardapp__imgbox col-lg-2">
141
+ <img
142
+ class="cardapp__img"
143
+ src="/img/store_icon.png"
144
+ alt="icone loja"
145
+ />
146
+ </div>
147
+ <div class="cardapp__wrapper row col-lg-10">
148
+ <h3 class="cardapp__title heading__4">
149
+ Espaços Saúde & Bem-Estar
150
+ </h3>
151
+ <p class="cardapp__text body body__1">
152
+ Buscando trazer mais rápido e menos burocrático, criamos
153
+ nossos espaços físicos, onde você pode realizar serviços
154
+ farmacêuticos, testes rápidos e tomar vacinas, com condições
155
+ e preços acessíveis.
156
+ </p>
157
+ </div>
158
+
159
+ <div class="col-lg-12">
160
+ <a
161
+ class="cardapp__link"
162
+ href="https://vitat.com.br/servicos/espaco-vitat"
163
+ >Conheça nossos serviços</a
164
+ >
165
+ </div>
166
+ </div>
167
+ </div>
168
+ <pre class="line-numbers mt-4">
169
+ <code class="language-markup">
170
+
171
+ </code>
172
+ </pre>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </body>
178
+
179
+ <script src="../../JS/prism.js"></script>
180
+ <script
181
+ src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
182
+ integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
183
+ crossorigin="anonymous"
184
+ ></script>
185
+ <script>
186
+ let cards = document.querySelectorAll(".cardes");
187
+ cards.forEach((card) => {
188
+ contentHTML = card.querySelector(".language-markup");
189
+ let content = card.children[0].outerHTML;
190
+ let newContent = content.replaceAll(/</g, "&lt;");
191
+ let finalContent = newContent.replaceAll(/>/g, "&gt;");
192
+ contentHTML.innerHTML = finalContent;
193
+ });
194
+ Prism.plugins.NormalizeWhitespace.setDefaults({
195
+ "remove-trailing": true,
196
+ "remove-indent": true,
197
+ "left-trim": true,
198
+ "right-trim": true,
199
+ });
200
+ </script>
201
+ </html>
data/HTML/Components/Inputs.html ADDED
@@ -0,0 +1,105 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Design System - Vitat</title>
6
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
7
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
+ <link
9
+ href="https://fonts.googleapis.com/css2?family=Livvic:wght@400;600&display=swap"
10
+ rel="stylesheet"
11
+ />
12
+ <link rel="stylesheet" href="../../css/style.css" />
13
+ <link rel="stylesheet" href="../../css/prism.css" />
14
+ </head>
15
+ <body>
16
+ <div class="container">
17
+ <div class="row">
18
+ <div class="col-lg-12">
19
+ <ul class="bar__ul">
20
+ <li class="bar__li">
21
+ <a class="bar__a" href="./Buttons.html">Botões</a>
22
+ </li>
23
+ <li class="bar__li">
24
+ <a class="bar__a" href="./Inputs.html">inputs</a>
25
+ </li>
26
+ <li class="bar__li">
27
+ <a class="bar__a" href="./Pills.html">Pills</a>
28
+ </li>
29
+ <li class="bar__li">
30
+ <a class="bar__a" href="./Card.html">Cards</a>
31
+ </li>
32
+ <li class="bar__li">
33
+ <a class="bar__a" href="./Pagination.html">Pagination</a>
34
+ </li>
35
+ <li class="bar__li">
36
+ <a class="bar__a" href="./Revisado.html">Revisado Por</a>
37
+ </li>
38
+ <li class="bar__li">
39
+ <a class="bar__a" href="./CardApp.html">Card App</a>
40
+ </li>
41
+ <li class="bar__li">
42
+ <a class="bar__a" href="./Arabescos.html">Arabescos</a>
43
+ </li>
44
+ <li class="bar__li">
45
+ <a class="bar__a" href="./Lista.html">Lista</a>
46
+ </li>
47
+ </ul>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ <div class="container" style="position: relative">
52
+ <div class="row my-5">
53
+ <div class="col-lg-12 my-4">
54
+ <div class="cardes">
55
+ <div>
56
+ <label for="username" class="heading heading__6 pb-2"
57
+ >Nome de usuário</label
58
+ ><br />
59
+ <input
60
+ class="input"
61
+ type="text"
62
+ id="username"
63
+ name="username"
64
+ value="vitat.com.br/perfil/"
65
+ />
66
+ </div>
67
+ <pre class="line-numbers mt-4">
68
+ <code class="language-markup">
69
+
70
+ </code>
71
+ </pre>
72
+ </div>
73
+ <div class="cardes">
74
+ <div>
75
+ <input type="checkbox" id="terms" />
76
+ <label class="checkbox" for="terms"></label>
77
+ </div>
78
+ <pre class="line-numbers mt-4">
79
+ <code class="language-markup">
80
+
81
+ </code>
82
+ </pre>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </body>
88
+ <script src="../../JS/prism.js"></script>
89
+ <script>
90
+ let cards = document.querySelectorAll(".cardes");
91
+ cards.forEach((card) => {
92
+ contentHTML = card.querySelector(".language-markup");
93
+ let content = card.children[0].outerHTML;
94
+ let newContent = content.replaceAll(/</g, "&lt;");
95
+ let finalContent = newContent.replaceAll(/>/g, "&gt;");
96
+ contentHTML.innerHTML = finalContent;
97
+ });
98
+ Prism.plugins.NormalizeWhitespace.setDefaults({
99
+ "remove-trailing": true,
100
+ "remove-indent": true,
101
+ "left-trim": true,
102
+ "right-trim": true,
103
+ });
104
+ </script>
105
+ </html>