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.
- checksums.yaml +4 -4
- data/.DS_Store +0 -0
- data/.gitignore +146 -8
- data/.idea/.gitignore +5 -0
- data/.idea/modules.xml +8 -0
- data/.idea/vcs.xml +6 -0
- data/.idea/vitat-design-system.iml +12 -0
- data/.vscode/settings.json +3 -0
- data/HTML/.DS_Store +0 -0
- data/HTML/Components/Arabescos.html +87 -0
- data/HTML/Components/Buttons.html +105 -0
- data/HTML/Components/Card.html +337 -0
- data/HTML/Components/CardApp.html +201 -0
- data/HTML/Components/Inputs.html +105 -0
- data/HTML/Components/Lista.html +106 -0
- data/HTML/Components/Pagination.html +218 -0
- data/HTML/Components/Pills.html +94 -0
- data/HTML/Components/Revisado.html +163 -0
- data/JS/prism.js +12 -0
- data/bootstrap/scss/_accordion.scss +118 -0
- data/bootstrap/scss/_alert.scss +57 -0
- data/bootstrap/scss/_badge.scss +29 -0
- data/bootstrap/scss/_breadcrumb.scss +28 -0
- data/bootstrap/scss/_button-group.scss +139 -0
- data/bootstrap/scss/_buttons.scss +111 -0
- data/bootstrap/scss/_card.scss +216 -0
- data/bootstrap/scss/_carousel.scss +229 -0
- data/bootstrap/scss/_close.scss +40 -0
- data/bootstrap/scss/_containers.scss +41 -0
- data/bootstrap/scss/_dropdown.scss +240 -0
- data/bootstrap/scss/_forms.scss +9 -0
- data/bootstrap/scss/_functions.scss +302 -0
- data/bootstrap/scss/_grid.scss +33 -0
- data/bootstrap/scss/_helpers.scss +9 -0
- data/bootstrap/scss/_images.scss +42 -0
- data/bootstrap/scss/_list-group.scss +174 -0
- data/bootstrap/scss/_mixins.scss +43 -0
- data/bootstrap/scss/_modal.scss +209 -0
- data/bootstrap/scss/_nav.scss +139 -0
- data/bootstrap/scss/_navbar.scss +335 -0
- data/bootstrap/scss/_offcanvas.scss +83 -0
- data/bootstrap/scss/_pagination.scss +64 -0
- data/bootstrap/scss/_placeholders.scss +51 -0
- data/bootstrap/scss/_popover.scss +158 -0
- data/bootstrap/scss/_progress.scss +48 -0
- data/bootstrap/scss/_reboot.scss +625 -0
- data/bootstrap/scss/_root.scss +54 -0
- data/bootstrap/scss/_spinners.scss +69 -0
- data/bootstrap/scss/_tables.scss +155 -0
- data/bootstrap/scss/_toasts.scss +51 -0
- data/bootstrap/scss/_tooltip.scss +115 -0
- data/bootstrap/scss/_transitions.scss +27 -0
- data/bootstrap/scss/_type.scss +104 -0
- data/bootstrap/scss/_utilities.scss +630 -0
- data/bootstrap/scss/_variables.scss +1641 -0
- data/bootstrap/scss/bootstrap-grid.scss +67 -0
- data/bootstrap/scss/bootstrap-reboot.scss +13 -0
- data/bootstrap/scss/bootstrap-utilities.scss +18 -0
- data/bootstrap/scss/bootstrap.scss +53 -0
- data/bootstrap/scss/forms/_floating-labels.scss +63 -0
- data/bootstrap/scss/forms/_form-check.scss +152 -0
- data/bootstrap/scss/forms/_form-control.scss +219 -0
- data/bootstrap/scss/forms/_form-range.scss +91 -0
- data/bootstrap/scss/forms/_form-select.scss +72 -0
- data/bootstrap/scss/forms/_form-text.scss +11 -0
- data/bootstrap/scss/forms/_input-group.scss +121 -0
- data/bootstrap/scss/forms/_labels.scss +36 -0
- data/bootstrap/scss/forms/_validation.scss +12 -0
- data/bootstrap/scss/helpers/_clearfix.scss +3 -0
- data/bootstrap/scss/helpers/_colored-links.scss +12 -0
- data/bootstrap/scss/helpers/_position.scss +30 -0
- data/bootstrap/scss/helpers/_ratio.scss +26 -0
- data/bootstrap/scss/helpers/_stacks.scss +15 -0
- data/bootstrap/scss/helpers/_stretched-link.scss +15 -0
- data/bootstrap/scss/helpers/_text-truncation.scss +7 -0
- data/bootstrap/scss/helpers/_visually-hidden.scss +8 -0
- data/bootstrap/scss/helpers/_vr.scss +8 -0
- data/bootstrap/scss/mixins/_alert.scss +11 -0
- data/bootstrap/scss/mixins/_backdrop.scss +14 -0
- data/bootstrap/scss/mixins/_border-radius.scss +78 -0
- data/bootstrap/scss/mixins/_box-shadow.scss +18 -0
- data/bootstrap/scss/mixins/_breakpoints.scss +127 -0
- data/bootstrap/scss/mixins/_buttons.scss +133 -0
- data/bootstrap/scss/mixins/_caret.scss +64 -0
- data/bootstrap/scss/mixins/_clearfix.scss +9 -0
- data/bootstrap/scss/mixins/_color-scheme.scss +7 -0
- data/bootstrap/scss/mixins/_container.scss +9 -0
- data/bootstrap/scss/mixins/_deprecate.scss +10 -0
- data/bootstrap/scss/mixins/_forms.scss +144 -0
- data/bootstrap/scss/mixins/_gradients.scss +47 -0
- data/bootstrap/scss/mixins/_grid.scss +151 -0
- data/bootstrap/scss/mixins/_image.scss +16 -0
- data/bootstrap/scss/mixins/_list-group.scss +24 -0
- data/bootstrap/scss/mixins/_lists.scss +7 -0
- data/bootstrap/scss/mixins/_pagination.scss +31 -0
- data/bootstrap/scss/mixins/_reset-text.scss +17 -0
- data/bootstrap/scss/mixins/_resize.scss +6 -0
- data/bootstrap/scss/mixins/_table-variants.scss +21 -0
- data/bootstrap/scss/mixins/_text-truncate.scss +8 -0
- data/bootstrap/scss/mixins/_transition.scss +26 -0
- data/bootstrap/scss/mixins/_utilities.scss +89 -0
- data/bootstrap/scss/mixins/_visually-hidden.scss +29 -0
- data/bootstrap/scss/utilities/_api.scss +47 -0
- data/bootstrap/scss/vendor/_rfs.scss +354 -0
- data/css/prism.css +4 -0
- data/css/style.css +6 -0
- data/gulpfile.js +35 -0
- data/img/.DS_Store +0 -0
- data/img/arrow-active.png +0 -0
- data/img/arrow-disable.png +0 -0
- data/img/arrow.png +0 -0
- data/img/close.png +0 -0
- data/img/phone.png +0 -0
- data/img/placeholder.png +0 -0
- data/img/placeholder_avatar.png +0 -0
- data/img/qr-code-loja.png +0 -0
- data/img/store_icon.png +0 -0
- data/index.html +33 -0
- data/install_nvm.sh +425 -0
- data/package-lock.json +4233 -0
- data/package.json +9 -0
- data/scss/.DS_Store +0 -0
- data/scss/guide/.DS_Store +0 -0
- data/scss/guide/_variables.scss +171 -0
- data/scss/guide/components/_animations.scss +8 -0
- data/scss/guide/components/_typography.scss +157 -0
- data/scss/guide/components/arabescos/arabescos.scss +47 -0
- data/scss/guide/components/buttons/btn.scss +26 -0
- data/scss/guide/components/buttons/btn__large.scss +10 -0
- data/scss/guide/components/buttons/btn__primary.scss +11 -0
- data/scss/guide/components/buttons/btn__secondary.scss +11 -0
- data/scss/guide/components/buttons/btn__tertiary.scss +11 -0
- data/scss/guide/components/cardapp/cardapp.scss +151 -0
- data/scss/guide/components/cards/card.scss +58 -0
- data/scss/guide/components/cards/card__horizontal.scss +35 -0
- data/scss/guide/components/cards/card__horizontal__small.scss +9 -0
- data/scss/guide/components/inputs/_checkbox.scss +45 -0
- data/scss/guide/components/inputs/_text.scss +8 -0
- data/scss/guide/components/lista/lista.scss +31 -0
- data/scss/guide/components/pagination/pagination.scss +81 -0
- data/scss/guide/components/pills/pill.scss +31 -0
- data/scss/guide/components/pills/pill__full.scss +8 -0
- data/scss/guide/components/pills/pill__secundary.scss +8 -0
- data/scss/guide/components/pills/pill__small.scss +8 -0
- data/scss/guide/components/revisado/revisado.scss +52 -0
- data/scss/guide/style.scss +96 -0
- metadata +147 -12
- data/CODE_OF_CONDUCT.md +0 -74
- data/Gemfile +0 -6
- data/LICENSE.txt +0 -21
- data/Rakefile +0 -2
- data/bin/console +0 -14
- data/bin/setup +0 -8
- data/lib/vitat/css/version.rb +0 -5
- data/lib/vitat/css.rb +0 -8
- data/vitat-css.gemspec +0 -41
@@ -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, "<");
|
327
|
+
let finalContent = newContent.replaceAll(/>/g, ">");
|
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>
|
@@ -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, "<");
|
191
|
+
let finalContent = newContent.replaceAll(/>/g, ">");
|
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>
|
@@ -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, "<");
|
95
|
+
let finalContent = newContent.replaceAll(/>/g, ">");
|
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>
|