fokus-styles 2.5.0 → 2.6.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.
- package/package.json +17 -15
- package/CHANGELOG.md +0 -940
- package/dist/css/components.css.map +0 -1
- package/dist/css/components.min.css.map +0 -1
- package/dist/css/fokus-components.css.map +0 -1
- package/dist/css/fokus-components.min.css.map +0 -1
- package/dist/css/fokus-core.css.map +0 -1
- package/dist/css/fokus-core.min.css.map +0 -1
- package/dist/css/fokus-dark.css.map +0 -1
- package/dist/css/fokus-dark.min.css.map +0 -1
- package/dist/css/fokus-rtl.css.map +0 -1
- package/dist/css/fokus-rtl.min.css.map +0 -1
- package/dist/css/fokus-utilities.css.map +0 -1
- package/dist/css/fokus-utilities.min.css.map +0 -1
- package/dist/css/fokus.css.map +0 -1
- package/dist/css/fokus.min.css.map +0 -1
- package/dist/css/fonts.css.map +0 -1
- package/dist/css/fonts.min.css.map +0 -1
- package/dist/css/forms.css.map +0 -1
- package/dist/css/forms.min.css.map +0 -1
- package/dist/css/helpers.css.map +0 -1
- package/dist/css/helpers.min.css.map +0 -1
- package/dist/css/layout.css.map +0 -1
- package/dist/css/layout.min.css.map +0 -1
- package/dist/js/fokus.js.map +0 -7
- package/dist/js/fokus.min.js.map +0 -7
- package/docs/README.md +0 -86
- package/docs/comparison.md +0 -124
- package/docs/components/accordion.md +0 -104
- package/docs/components/alert-dialog.md +0 -99
- package/docs/components/alert.md +0 -104
- package/docs/components/avatar.md +0 -13
- package/docs/components/badge.md +0 -101
- package/docs/components/breadcrumb.md +0 -93
- package/docs/components/button-group.md +0 -13
- package/docs/components/button.md +0 -98
- package/docs/components/card.md +0 -111
- package/docs/components/carousel.md +0 -167
- package/docs/components/checkbox.md +0 -110
- package/docs/components/close-button.md +0 -13
- package/docs/components/code.md +0 -13
- package/docs/components/collapse.md +0 -78
- package/docs/components/combobox.md +0 -123
- package/docs/components/command-palette.md +0 -131
- package/docs/components/datatable.md +0 -173
- package/docs/components/datepicker.md +0 -137
- package/docs/components/divider.md +0 -57
- package/docs/components/dropdown.md +0 -103
- package/docs/components/empty-state.md +0 -65
- package/docs/components/file-upload-advanced.md +0 -116
- package/docs/components/file-upload.md +0 -93
- package/docs/components/icon-link.md +0 -13
- package/docs/components/input-group.md +0 -73
- package/docs/components/input.md +0 -90
- package/docs/components/list-group.md +0 -13
- package/docs/components/modal.md +0 -120
- package/docs/components/navbar.md +0 -74
- package/docs/components/nested-menu.md +0 -90
- package/docs/components/notification-center.md +0 -116
- package/docs/components/offcanvas.md +0 -102
- package/docs/components/pagination.md +0 -145
- package/docs/components/placeholder.md +0 -13
- package/docs/components/popover.md +0 -118
- package/docs/components/progress.md +0 -126
- package/docs/components/radio.md +0 -80
- package/docs/components/range.md +0 -83
- package/docs/components/rating.md +0 -91
- package/docs/components/ratio.md +0 -13
- package/docs/components/responsive.md +0 -19
- package/docs/components/scrollspy.md +0 -13
- package/docs/components/segmented-control.md +0 -82
- package/docs/components/select.md +0 -89
- package/docs/components/skeleton.md +0 -70
- package/docs/components/stepper.md +0 -107
- package/docs/components/switch.md +0 -97
- package/docs/components/table.md +0 -90
- package/docs/components/tabs.md +0 -104
- package/docs/components/tag.md +0 -144
- package/docs/components/tile.md +0 -112
- package/docs/components/timeline.md +0 -78
- package/docs/components/toast.md +0 -108
- package/docs/components/tooltip.md +0 -113
- package/docs/components/tree-view.md +0 -118
- package/docs/contributing/contributing.md +0 -18
- package/docs/getting-started/installation.md +0 -70
- package/docs/getting-started/usage.md +0 -105
- package/docs/guides/accessibility.md +0 -109
- package/docs/guides/charts.md +0 -73
- package/docs/guides/dark-mode.md +0 -90
- package/docs/guides/icons.md +0 -99
- package/docs/guides/javascript-api.md +0 -9
- package/docs/guides/layout-advanced.md +0 -118
- package/docs/guides/migration-clarus-to-fokus.md +0 -48
- package/docs/guides/migration-external.md +0 -123
- package/docs/guides/migration-v1.md +0 -63
- package/docs/guides/print.md +0 -30
- package/docs/guides/rtl-and-system-preferences.md +0 -28
- package/docs/guides/theming.md +0 -140
- package/docs/guides/utility-api.md +0 -9
- package/docs/prompts/prompt-plan.md +0 -45
- package/docs/reference/accessibility-matrix.md +0 -77
- package/docs/reference/browser-support.md +0 -75
- package/docs/reference/contrast-report.md +0 -54
- package/docs/reference/definitions.md +0 -868
- package/docs/reference/design-tokens.md +0 -208
- package/docs/reference/scss-architecture.md +0 -227
- package/docs/reference/size-baseline.json +0 -34
- package/docs/reference/stability.md +0 -89
- package/docs/showcase.md +0 -25
- package/mockup/README.md +0 -41
- package/mockup/assets/carousel-planning.png +0 -0
- package/mockup/assets/carousel-workspace.png +0 -0
- package/mockup/assets/example-theme.css +0 -19
- package/mockup/assets/example-theme.js +0 -11
- package/mockup/assets/showcase-contracts.js +0 -84
- package/mockup/assets/showcase.css +0 -91
- package/mockup/assets/showcase.js +0 -724
- package/mockup/content-data.html +0 -9
- package/mockup/examples/accordion-tabs-toast.html +0 -149
- package/mockup/examples/alert-dialog.html +0 -84
- package/mockup/examples/alerts.html +0 -115
- package/mockup/examples/badges-alerts.html +0 -109
- package/mockup/examples/buttons.html +0 -58
- package/mockup/examples/cards.html +0 -132
- package/mockup/examples/carousel.html +0 -126
- package/mockup/examples/charts.html +0 -102
- package/mockup/examples/check-radio-switch.html +0 -620
- package/mockup/examples/collapse.html +0 -69
- package/mockup/examples/combobox.html +0 -60
- package/mockup/examples/command-palette.html +0 -64
- package/mockup/examples/datatable.html +0 -113
- package/mockup/examples/datepicker.html +0 -62
- package/mockup/examples/divider.html +0 -45
- package/mockup/examples/dropdown-tooltip.html +0 -77
- package/mockup/examples/empty-state.html +0 -56
- package/mockup/examples/file-drop.html +0 -74
- package/mockup/examples/file-upload-advanced.html +0 -68
- package/mockup/examples/forms-advanced.html +0 -77
- package/mockup/examples/hover-card.html +0 -86
- package/mockup/examples/icons.html +0 -157
- package/mockup/examples/input-group.html +0 -74
- package/mockup/examples/js-foundation.html +0 -215
- package/mockup/examples/layout.html +0 -134
- package/mockup/examples/modal-select.html +0 -127
- package/mockup/examples/nested-menu.html +0 -73
- package/mockup/examples/notification-center.html +0 -86
- package/mockup/examples/offcanvas-popover.html +0 -133
- package/mockup/examples/pagination-breadcrumbs.html +0 -92
- package/mockup/examples/popover.html +0 -81
- package/mockup/examples/range.html +0 -69
- package/mockup/examples/rating.html +0 -103
- package/mockup/examples/segmented-control.html +0 -96
- package/mockup/examples/skeletons.html +0 -82
- package/mockup/examples/spinner-progress.html +0 -130
- package/mockup/examples/stepper.html +0 -119
- package/mockup/examples/tables-navbar.html +0 -89
- package/mockup/examples/tag.html +0 -115
- package/mockup/examples/theming.html +0 -68
- package/mockup/examples/tile.html +0 -107
- package/mockup/examples/timeline.html +0 -108
- package/mockup/examples/toast.html +0 -113
- package/mockup/examples/tooltip.html +0 -68
- package/mockup/examples/tree-view.html +0 -68
- package/mockup/feedback-actions.html +0 -9
- package/mockup/forms.html +0 -13
- package/mockup/foundations.html +0 -7
- package/mockup/kitchen-sink.html +0 -696
- package/mockup/navigation-disclosure.html +0 -11
- package/mockup/overlays-commands.html +0 -12
- package/mockup/templates/README.md +0 -20
- package/mockup/templates/admin.html +0 -334
- package/mockup/templates/auth.html +0 -234
- package/mockup/templates/dashboard.html +0 -442
- package/mockup/templates/landing.html +0 -397
- package/packages/fokus-icons/package.json +0 -46
- package/scripts/migrate-fokus-map.json +0 -1366
- package/scripts/migrate-fokus.mjs +0 -97
package/mockup/kitchen-sink.html
DELETED
|
@@ -1,696 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Mockup - Kitchen Sink</title>
|
|
7
|
-
|
|
8
|
-
<!-- STYLES IMPORT -->
|
|
9
|
-
<link rel="stylesheet" href="../dist/css/fonts.css">
|
|
10
|
-
<link rel="stylesheet" href="../dist/css/layout.css">
|
|
11
|
-
<link rel="stylesheet" href="../dist/css/forms.css">
|
|
12
|
-
<link rel="stylesheet" href="../dist/css/components.css">
|
|
13
|
-
<link rel="stylesheet" href="../dist/css/helpers.css">
|
|
14
|
-
<style>
|
|
15
|
-
.theme-panel {
|
|
16
|
-
padding: 24px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
[data-theme="dark"].theme-panel {
|
|
20
|
-
color: var(--fs-color-text);
|
|
21
|
-
background-color: var(--fs-color-surface);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
section {
|
|
25
|
-
margin-bottom: 32px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
section > h3 {
|
|
29
|
-
margin-bottom: 8px;
|
|
30
|
-
}
|
|
31
|
-
</style>
|
|
32
|
-
</head>
|
|
33
|
-
<body>
|
|
34
|
-
|
|
35
|
-
<!--
|
|
36
|
-
Kitchen sink: um exemplo compacto de cada componente do FokusStyles, nos dois
|
|
37
|
-
temas — smoke test visual rápido (docs/internal/plans, sub-fase 5.8).
|
|
38
|
-
Não substitui os mockups individuais (que cobrem variações/estados), só
|
|
39
|
-
complementa como visão geral de uma página só.
|
|
40
|
-
-->
|
|
41
|
-
|
|
42
|
-
<div class="theme-panel">
|
|
43
|
-
<h2 class="fs-u-fs-lg fs-u-fw-medium">Claro</h2>
|
|
44
|
-
|
|
45
|
-
<section>
|
|
46
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Button</h3>
|
|
47
|
-
<button type="button" class="fs-btn fs-u-mr-2">Padrão</button>
|
|
48
|
-
<button type="button" class="fs-btn fs-btn-primary fs-u-mr-2">Primary</button>
|
|
49
|
-
<button type="button" class="fs-btn fs-btn-outline-primary">Outline</button>
|
|
50
|
-
</section>
|
|
51
|
-
|
|
52
|
-
<section>
|
|
53
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Card</h3>
|
|
54
|
-
<div class="fs-card">
|
|
55
|
-
<div class="fs-card-header">
|
|
56
|
-
<h3 class="fs-card-title">Título do card</h3>
|
|
57
|
-
</div>
|
|
58
|
-
<div class="fs-card-body">
|
|
59
|
-
<p class="fs-card-text">Corpo de texto do card.</p>
|
|
60
|
-
<button type="button" class="fs-btn fs-btn-primary">Ação</button>
|
|
61
|
-
</div>
|
|
62
|
-
<div class="fs-card-footer">
|
|
63
|
-
<span class="fs-badge fs-badge-success">Ativo</span>
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
66
|
-
</section>
|
|
67
|
-
|
|
68
|
-
<section>
|
|
69
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Badge & Tag</h3>
|
|
70
|
-
<span class="fs-badge fs-badge-primary fs-u-mr-2">Primary</span>
|
|
71
|
-
<span class="fs-badge fs-tag" data-fs="tag">
|
|
72
|
-
Frontend
|
|
73
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Frontend"></button>
|
|
74
|
-
</span>
|
|
75
|
-
</section>
|
|
76
|
-
|
|
77
|
-
<section>
|
|
78
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Alert</h3>
|
|
79
|
-
<div class="fs-alert fs-alert-success">Operação concluída com sucesso.</div>
|
|
80
|
-
</section>
|
|
81
|
-
|
|
82
|
-
<section>
|
|
83
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Table & DataTable</h3>
|
|
84
|
-
<table class="fs-table fs-table-striped fs-table-hover fs-u-mb-3">
|
|
85
|
-
<thead><tr><th>Nome</th><th>Status</th></tr></thead>
|
|
86
|
-
<tbody>
|
|
87
|
-
<tr><td>Ana</td><td>Ativo</td></tr>
|
|
88
|
-
<tr><td>Bruno</td><td>Inativo</td></tr>
|
|
89
|
-
</tbody>
|
|
90
|
-
</table>
|
|
91
|
-
<div class="fs-datatable" data-fs="datatable" data-fs-page-size="5">
|
|
92
|
-
<div class="fs-datatable-toolbar">
|
|
93
|
-
<input type="search" class="fs-form-control" data-fs-datatable-filter placeholder="Filtrar…">
|
|
94
|
-
</div>
|
|
95
|
-
<table class="fs-table fs-table-striped fs-table-hover">
|
|
96
|
-
<thead>
|
|
97
|
-
<tr>
|
|
98
|
-
<th scope="col" data-fs-sort="name">Nome</th>
|
|
99
|
-
<th scope="col" data-fs-sort="age">Idade</th>
|
|
100
|
-
</tr>
|
|
101
|
-
</thead>
|
|
102
|
-
<tbody>
|
|
103
|
-
<tr><td>Ana</td><td>35</td></tr>
|
|
104
|
-
<tr><td>Bruno</td><td>19</td></tr>
|
|
105
|
-
</tbody>
|
|
106
|
-
</table>
|
|
107
|
-
</div>
|
|
108
|
-
</section>
|
|
109
|
-
|
|
110
|
-
<section>
|
|
111
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Divider, Empty State, Tile, Skeleton</h3>
|
|
112
|
-
<hr class="fs-divider">
|
|
113
|
-
<div class="fs-empty-state fs-u-mb-3">
|
|
114
|
-
<h3 class="fs-empty-state-title">Nenhum resultado encontrado</h3>
|
|
115
|
-
<p class="fs-empty-state-text">Tente ajustar os filtros.</p>
|
|
116
|
-
</div>
|
|
117
|
-
<div class="fs-tile fs-u-mb-3">
|
|
118
|
-
<div class="fs-tile-body">
|
|
119
|
-
<p class="fs-tile-title">Relatório mensal.pdf</p>
|
|
120
|
-
<p class="fs-tile-subtitle">2.4 MB · Atualizado há 2h</p>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
<div class="fs-skeleton fs-skeleton-text"></div>
|
|
124
|
-
</section>
|
|
125
|
-
|
|
126
|
-
<section>
|
|
127
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Forms</h3>
|
|
128
|
-
<div class="fs-form-col fs-u-mb-2">
|
|
129
|
-
<label for="ks-nome" class="fs-form-label">Nome completo</label>
|
|
130
|
-
<input type="text" class="fs-form-control" id="ks-nome" placeholder="Seu nome">
|
|
131
|
-
</div>
|
|
132
|
-
<div class="fs-input-group fs-u-mb-2">
|
|
133
|
-
<span class="fs-input-group-text">R$</span>
|
|
134
|
-
<input type="number" class="fs-form-control" aria-label="Valor em reais">
|
|
135
|
-
</div>
|
|
136
|
-
<select class="fs-form-select fs-u-mb-2" data-fs="select" id="ks-pais">
|
|
137
|
-
<option value="br">Brasil</option>
|
|
138
|
-
<option value="pt">Portugal</option>
|
|
139
|
-
</select>
|
|
140
|
-
<div class="fs-combobox fs-u-mb-2">
|
|
141
|
-
<input type="text" class="fs-form-control" data-fs="combobox" data-fs-target="#ks-lista-combo" placeholder="Buscar…">
|
|
142
|
-
</div>
|
|
143
|
-
<ul class="fs-dropdown-menu fs-combobox-listbox" id="ks-lista-combo">
|
|
144
|
-
<li class="fs-dropdown-item" data-value="a">Opção A</li>
|
|
145
|
-
<li class="fs-dropdown-item" data-value="b">Opção B</li>
|
|
146
|
-
</ul>
|
|
147
|
-
<input type="date" class="fs-form-control fs-u-mb-2" aria-label="Data">
|
|
148
|
-
<div class="fs-check fs-u-mb-2">
|
|
149
|
-
<input type="checkbox" class="fs-check-input" id="ks-aceite">
|
|
150
|
-
<label for="ks-aceite" class="fs-check-label">Aceito os termos</label>
|
|
151
|
-
</div>
|
|
152
|
-
<div class="fs-radio fs-u-mb-2">
|
|
153
|
-
<input type="radio" name="ks-periodo" class="fs-radio-input" id="ks-dia" checked>
|
|
154
|
-
<label for="ks-dia" class="fs-radio-label">Dia</label>
|
|
155
|
-
</div>
|
|
156
|
-
<div class="fs-switch fs-u-mb-2">
|
|
157
|
-
<input type="checkbox" class="fs-switch-input" id="ks-notif" checked>
|
|
158
|
-
<label for="ks-notif" class="fs-switch-label">Notificações</label>
|
|
159
|
-
</div>
|
|
160
|
-
<div class="fs-file-upload">
|
|
161
|
-
<input type="file" class="fs-file-input" id="ks-arquivo">
|
|
162
|
-
<label for="ks-arquivo" class="fs-file-label">Escolher arquivo</label>
|
|
163
|
-
</div>
|
|
164
|
-
</section>
|
|
165
|
-
|
|
166
|
-
<section>
|
|
167
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Navbar, Tabs, Breadcrumb, Pagination</h3>
|
|
168
|
-
<nav class="fs-navbar fs-u-mb-3">
|
|
169
|
-
<a href="#" class="fs-navbar-brand">Minha Marca</a>
|
|
170
|
-
<ul class="fs-navbar-nav">
|
|
171
|
-
<li><a href="#" class="fs-nav-link is-active">Início</a></li>
|
|
172
|
-
<li><a href="#" class="fs-nav-link">Produtos</a></li>
|
|
173
|
-
</ul>
|
|
174
|
-
</nav>
|
|
175
|
-
<div class="fs-tabs fs-u-mb-1" data-fs="tabs">
|
|
176
|
-
<a href="#" class="fs-nav-link is-active" data-fs-target="#ks-perfil">Perfil</a>
|
|
177
|
-
<a href="#" class="fs-nav-link" data-fs-target="#ks-seguranca">Segurança</a>
|
|
178
|
-
</div>
|
|
179
|
-
<div class="fs-tab-content fs-u-mb-3">
|
|
180
|
-
<div class="fs-tab-pane is-active" id="ks-perfil">Conteúdo Perfil.</div>
|
|
181
|
-
<div class="fs-tab-pane" id="ks-seguranca">Conteúdo Segurança.</div>
|
|
182
|
-
</div>
|
|
183
|
-
<nav aria-label="breadcrumb" class="fs-u-mb-3">
|
|
184
|
-
<ol class="fs-breadcrumb">
|
|
185
|
-
<li class="fs-breadcrumb-item"><a href="#">Início</a></li>
|
|
186
|
-
<li class="fs-breadcrumb-item is-active">Página atual</li>
|
|
187
|
-
</ol>
|
|
188
|
-
</nav>
|
|
189
|
-
<ul class="fs-pagination">
|
|
190
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
|
|
191
|
-
<li class="fs-page-item is-active"><a href="#" class="fs-page-link">2</a></li>
|
|
192
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
|
|
193
|
-
</ul>
|
|
194
|
-
</section>
|
|
195
|
-
|
|
196
|
-
<section>
|
|
197
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Dropdown, Nested Menu, Tree View</h3>
|
|
198
|
-
<div class="fs-dropdown fs-u-mr-2">
|
|
199
|
-
<button type="button" class="fs-btn fs-dropdown-toggle" data-fs="dropdown" data-fs-target="#ks-menu">Opções</button>
|
|
200
|
-
<div class="fs-dropdown-menu" id="ks-menu">
|
|
201
|
-
<a href="#" class="fs-dropdown-item">Editar</a>
|
|
202
|
-
<a href="#" class="fs-dropdown-item">Excluir</a>
|
|
203
|
-
</div>
|
|
204
|
-
</div>
|
|
205
|
-
<button type="button" class="fs-btn fs-dropdown-toggle" data-fs="nested-menu" data-fs-target="#ks-menu-aninhado">Arquivo</button>
|
|
206
|
-
<div class="fs-dropdown-menu" id="ks-menu-aninhado">
|
|
207
|
-
<a href="#" class="fs-dropdown-item">Novo</a>
|
|
208
|
-
<div class="fs-dropdown-submenu">
|
|
209
|
-
<a href="#" class="fs-dropdown-item fs-dropdown-item-submenu">Exportar</a>
|
|
210
|
-
<div class="fs-dropdown-menu">
|
|
211
|
-
<a href="#" class="fs-dropdown-item">PDF</a>
|
|
212
|
-
</div>
|
|
213
|
-
</div>
|
|
214
|
-
</div>
|
|
215
|
-
<ul class="fs-tree fs-u-mt-3" data-fs="tree-view">
|
|
216
|
-
<li>
|
|
217
|
-
<span class="fs-tree-label">src</span>
|
|
218
|
-
<ul>
|
|
219
|
-
<li><span class="fs-tree-label">index.js</span></li>
|
|
220
|
-
</ul>
|
|
221
|
-
</li>
|
|
222
|
-
<li><span class="fs-tree-label">README.md</span></li>
|
|
223
|
-
</ul>
|
|
224
|
-
</section>
|
|
225
|
-
|
|
226
|
-
<section>
|
|
227
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Accordion & Collapse</h3>
|
|
228
|
-
<div class="fs-accordion fs-u-mb-3" data-fs="accordion">
|
|
229
|
-
<div class="fs-accordion-item">
|
|
230
|
-
<h3 class="fs-accordion-header">
|
|
231
|
-
<button type="button" class="fs-accordion-button" aria-expanded="true">Pergunta 1</button>
|
|
232
|
-
</h3>
|
|
233
|
-
<div class="fs-accordion-collapse">
|
|
234
|
-
<div class="fs-accordion-body">Resposta 1.</div>
|
|
235
|
-
</div>
|
|
236
|
-
</div>
|
|
237
|
-
</div>
|
|
238
|
-
<button type="button" class="fs-btn" data-fs="collapse" data-fs-target="#ks-detalhes">Ver detalhes</button>
|
|
239
|
-
<div class="fs-collapse" id="ks-detalhes">Conteúdo que expande/recolhe.</div>
|
|
240
|
-
</section>
|
|
241
|
-
|
|
242
|
-
<section>
|
|
243
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Stepper</h3>
|
|
244
|
-
<div class="fs-stepper" data-fs="stepper">
|
|
245
|
-
<ol class="fs-stepper-header">
|
|
246
|
-
<li class="fs-step fs-step-active"><span class="fs-step-indicator">1</span><span class="fs-step-label">Conta</span></li>
|
|
247
|
-
<li class="fs-step"><span class="fs-step-indicator">2</span><span class="fs-step-label">Perfil</span></li>
|
|
248
|
-
</ol>
|
|
249
|
-
<div class="fs-stepper-content">
|
|
250
|
-
<div class="fs-step-panel is-active">Passo 1.</div>
|
|
251
|
-
<div class="fs-step-panel">Passo 2.</div>
|
|
252
|
-
</div>
|
|
253
|
-
</div>
|
|
254
|
-
</section>
|
|
255
|
-
|
|
256
|
-
<section>
|
|
257
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Modal, Offcanvas, Tooltip, Popover, Command Palette</h3>
|
|
258
|
-
<button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="modal" data-fs-target="#ks-modal">Abrir modal</button>
|
|
259
|
-
<button type="button" class="fs-btn fs-u-mr-2" data-fs="offcanvas" data-fs-target="#ks-offcanvas">Abrir menu</button>
|
|
260
|
-
<button type="button" class="fs-btn fs-u-mr-2" data-fs="tooltip" title="Uma dica útil">Tooltip</button>
|
|
261
|
-
<button type="button" class="fs-btn fs-u-mr-2" data-fs="popover" data-fs-target="#ks-popover">Popover</button>
|
|
262
|
-
<button type="button" class="fs-btn" data-fs="command-palette" data-fs-target="#ks-paleta">Comandos</button>
|
|
263
|
-
|
|
264
|
-
<div class="fs-modal" id="ks-modal">
|
|
265
|
-
<div class="fs-modal-dialog">
|
|
266
|
-
<div class="fs-modal-content">
|
|
267
|
-
<div class="fs-modal-header">
|
|
268
|
-
<h3 class="fs-modal-title">Título</h3>
|
|
269
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="modal" aria-label="Fechar"></button>
|
|
270
|
-
</div>
|
|
271
|
-
<div class="fs-modal-body">Conteúdo do modal.</div>
|
|
272
|
-
</div>
|
|
273
|
-
</div>
|
|
274
|
-
</div>
|
|
275
|
-
<div class="fs-offcanvas fs-offcanvas-start" id="ks-offcanvas">
|
|
276
|
-
<div class="fs-offcanvas-header">
|
|
277
|
-
<h3 class="fs-offcanvas-title">Menu</h3>
|
|
278
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
|
|
279
|
-
</div>
|
|
280
|
-
<div class="fs-offcanvas-body">Conteúdo do painel.</div>
|
|
281
|
-
</div>
|
|
282
|
-
<div class="fs-popover" id="ks-popover">
|
|
283
|
-
<div class="fs-popover-header">Título</div>
|
|
284
|
-
<div class="fs-popover-body">Conteúdo detalhado aqui.</div>
|
|
285
|
-
</div>
|
|
286
|
-
<div class="fs-command-palette" id="ks-paleta">
|
|
287
|
-
<div class="fs-command-palette-dialog">
|
|
288
|
-
<input type="text" class="fs-command-palette-input" placeholder="Digite um comando…">
|
|
289
|
-
<ul class="fs-command-palette-list">
|
|
290
|
-
<li class="fs-dropdown-item" data-value="new-file">Novo arquivo</li>
|
|
291
|
-
</ul>
|
|
292
|
-
</div>
|
|
293
|
-
</div>
|
|
294
|
-
</section>
|
|
295
|
-
|
|
296
|
-
<section>
|
|
297
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Toast & Notification Center</h3>
|
|
298
|
-
<div class="fs-toast-container">
|
|
299
|
-
<div class="fs-toast fs-toast-success" data-fs="toast" id="ks-toast" data-delay="4000">
|
|
300
|
-
<div class="fs-toast-header">
|
|
301
|
-
<span>Sucesso</span>
|
|
302
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="toast" aria-label="Fechar"></button>
|
|
303
|
-
</div>
|
|
304
|
-
<div class="fs-toast-body">Operação concluída com sucesso.</div>
|
|
305
|
-
</div>
|
|
306
|
-
</div>
|
|
307
|
-
<button type="button" class="fs-btn" data-fs="notification-center" data-fs-target="#ks-painel-notif" aria-label="Notificações">Notificações</button>
|
|
308
|
-
<div class="fs-notification-center" id="ks-painel-notif">
|
|
309
|
-
<div class="fs-notification-center-header">
|
|
310
|
-
<span class="fs-notification-center-title">Notificações</span>
|
|
311
|
-
</div>
|
|
312
|
-
<ul class="fs-notification-list"></ul>
|
|
313
|
-
<p class="fs-notification-empty">Nenhuma notificação.</p>
|
|
314
|
-
</div>
|
|
315
|
-
</section>
|
|
316
|
-
|
|
317
|
-
<section>
|
|
318
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Spinner & Progress</h3>
|
|
319
|
-
<div class="fs-spinner fs-u-mr-3" role="status" aria-label="Carregando"></div>
|
|
320
|
-
<div class="fs-progress">
|
|
321
|
-
<div class="fs-progress-bar" style="--fs-progress-value: 60;"></div>
|
|
322
|
-
</div>
|
|
323
|
-
</section>
|
|
324
|
-
|
|
325
|
-
<section>
|
|
326
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Carousel, Rating, Segmented Control, Timeline</h3>
|
|
327
|
-
<div class="fs-carousel fs-u-mb-3" data-fs="carousel">
|
|
328
|
-
<div class="fs-carousel-inner">
|
|
329
|
-
<div class="fs-carousel-item is-active"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBTAA7" alt=""></div>
|
|
330
|
-
<div class="fs-carousel-item"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBTAA7" alt=""></div>
|
|
331
|
-
</div>
|
|
332
|
-
<button type="button" class="fs-carousel-control-prev" aria-label="Anterior"></button>
|
|
333
|
-
<button type="button" class="fs-carousel-control-next" aria-label="Próximo"></button>
|
|
334
|
-
</div>
|
|
335
|
-
<div class="fs-rating fs-u-mb-3">
|
|
336
|
-
<input type="radio" name="ks-nota" class="fs-rating-input" id="ks-nota-5" value="5">
|
|
337
|
-
<label for="ks-nota-5" class="fs-rating-star" aria-label="5 estrelas">
|
|
338
|
-
<svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>
|
|
339
|
-
</label>
|
|
340
|
-
</div>
|
|
341
|
-
<div class="fs-segmented-control fs-u-mb-3">
|
|
342
|
-
<div class="fs-segmented-item">
|
|
343
|
-
<input type="radio" name="ks-periodo" class="fs-segmented-input" id="ks-p-dia" checked>
|
|
344
|
-
<label for="ks-p-dia" class="fs-segmented-label">Dia</label>
|
|
345
|
-
</div>
|
|
346
|
-
<div class="fs-segmented-item">
|
|
347
|
-
<input type="radio" name="ks-periodo" class="fs-segmented-input" id="ks-p-semana">
|
|
348
|
-
<label for="ks-p-semana" class="fs-segmented-label">Semana</label>
|
|
349
|
-
</div>
|
|
350
|
-
</div>
|
|
351
|
-
<ol class="fs-timeline">
|
|
352
|
-
<li class="fs-timeline-item fs-timeline-completed">
|
|
353
|
-
<div class="fs-timeline-marker"></div>
|
|
354
|
-
<div class="fs-timeline-content">
|
|
355
|
-
<p class="fs-timeline-title">Pedido criado</p>
|
|
356
|
-
</div>
|
|
357
|
-
</li>
|
|
358
|
-
<li class="fs-timeline-item fs-timeline-active">
|
|
359
|
-
<div class="fs-timeline-marker"></div>
|
|
360
|
-
<div class="fs-timeline-content">
|
|
361
|
-
<p class="fs-timeline-title">Em preparação</p>
|
|
362
|
-
</div>
|
|
363
|
-
</li>
|
|
364
|
-
</ol>
|
|
365
|
-
</section>
|
|
366
|
-
</div>
|
|
367
|
-
|
|
368
|
-
<div class="theme-panel" data-theme="dark">
|
|
369
|
-
<h2 class="fs-u-fs-lg fs-u-fw-medium">Escuro</h2>
|
|
370
|
-
|
|
371
|
-
<section>
|
|
372
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Button</h3>
|
|
373
|
-
<button type="button" class="fs-btn fs-u-mr-2">Padrão</button>
|
|
374
|
-
<button type="button" class="fs-btn fs-btn-primary fs-u-mr-2">Primary</button>
|
|
375
|
-
<button type="button" class="fs-btn fs-btn-outline-primary">Outline</button>
|
|
376
|
-
</section>
|
|
377
|
-
|
|
378
|
-
<section>
|
|
379
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Card</h3>
|
|
380
|
-
<div class="fs-card">
|
|
381
|
-
<div class="fs-card-header">
|
|
382
|
-
<h3 class="fs-card-title">Título do card</h3>
|
|
383
|
-
</div>
|
|
384
|
-
<div class="fs-card-body">
|
|
385
|
-
<p class="fs-card-text">Corpo de texto do card.</p>
|
|
386
|
-
<button type="button" class="fs-btn fs-btn-primary">Ação</button>
|
|
387
|
-
</div>
|
|
388
|
-
<div class="fs-card-footer">
|
|
389
|
-
<span class="fs-badge fs-badge-success">Ativo</span>
|
|
390
|
-
</div>
|
|
391
|
-
</div>
|
|
392
|
-
</section>
|
|
393
|
-
|
|
394
|
-
<section>
|
|
395
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Badge & Tag</h3>
|
|
396
|
-
<span class="fs-badge fs-badge-primary fs-u-mr-2">Primary</span>
|
|
397
|
-
<span class="fs-badge fs-tag" data-fs="tag">
|
|
398
|
-
Frontend
|
|
399
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="tag" aria-label="Remover tag Frontend"></button>
|
|
400
|
-
</span>
|
|
401
|
-
</section>
|
|
402
|
-
|
|
403
|
-
<section>
|
|
404
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Alert</h3>
|
|
405
|
-
<div class="fs-alert fs-alert-success">Operação concluída com sucesso.</div>
|
|
406
|
-
</section>
|
|
407
|
-
|
|
408
|
-
<section>
|
|
409
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Table & DataTable</h3>
|
|
410
|
-
<table class="fs-table fs-table-striped fs-table-hover fs-u-mb-3">
|
|
411
|
-
<thead><tr><th>Nome</th><th>Status</th></tr></thead>
|
|
412
|
-
<tbody>
|
|
413
|
-
<tr><td>Ana</td><td>Ativo</td></tr>
|
|
414
|
-
<tr><td>Bruno</td><td>Inativo</td></tr>
|
|
415
|
-
</tbody>
|
|
416
|
-
</table>
|
|
417
|
-
<div class="fs-datatable" data-fs="datatable" data-fs-page-size="5">
|
|
418
|
-
<div class="fs-datatable-toolbar">
|
|
419
|
-
<input type="search" class="fs-form-control" data-fs-datatable-filter placeholder="Filtrar…">
|
|
420
|
-
</div>
|
|
421
|
-
<table class="fs-table fs-table-striped fs-table-hover">
|
|
422
|
-
<thead>
|
|
423
|
-
<tr>
|
|
424
|
-
<th scope="col" data-fs-sort="name">Nome</th>
|
|
425
|
-
<th scope="col" data-fs-sort="age">Idade</th>
|
|
426
|
-
</tr>
|
|
427
|
-
</thead>
|
|
428
|
-
<tbody>
|
|
429
|
-
<tr><td>Ana</td><td>35</td></tr>
|
|
430
|
-
<tr><td>Bruno</td><td>19</td></tr>
|
|
431
|
-
</tbody>
|
|
432
|
-
</table>
|
|
433
|
-
</div>
|
|
434
|
-
</section>
|
|
435
|
-
|
|
436
|
-
<section>
|
|
437
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Divider, Empty State, Tile, Skeleton</h3>
|
|
438
|
-
<hr class="fs-divider">
|
|
439
|
-
<div class="fs-empty-state fs-u-mb-3">
|
|
440
|
-
<h3 class="fs-empty-state-title">Nenhum resultado encontrado</h3>
|
|
441
|
-
<p class="fs-empty-state-text">Tente ajustar os filtros.</p>
|
|
442
|
-
</div>
|
|
443
|
-
<div class="fs-tile fs-u-mb-3">
|
|
444
|
-
<div class="fs-tile-body">
|
|
445
|
-
<p class="fs-tile-title">Relatório mensal.pdf</p>
|
|
446
|
-
<p class="fs-tile-subtitle">2.4 MB · Atualizado há 2h</p>
|
|
447
|
-
</div>
|
|
448
|
-
</div>
|
|
449
|
-
<div class="fs-skeleton fs-skeleton-text"></div>
|
|
450
|
-
</section>
|
|
451
|
-
|
|
452
|
-
<section>
|
|
453
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Forms</h3>
|
|
454
|
-
<div class="fs-form-col fs-u-mb-2">
|
|
455
|
-
<label for="ks-nome-d" class="fs-form-label">Nome completo</label>
|
|
456
|
-
<input type="text" class="fs-form-control" id="ks-nome-d" placeholder="Seu nome">
|
|
457
|
-
</div>
|
|
458
|
-
<div class="fs-input-group fs-u-mb-2">
|
|
459
|
-
<span class="fs-input-group-text">R$</span>
|
|
460
|
-
<input type="number" class="fs-form-control" aria-label="Valor em reais">
|
|
461
|
-
</div>
|
|
462
|
-
<select class="fs-form-select fs-u-mb-2" data-fs="select" id="ks-pais-d">
|
|
463
|
-
<option value="br">Brasil</option>
|
|
464
|
-
<option value="pt">Portugal</option>
|
|
465
|
-
</select>
|
|
466
|
-
<div class="fs-combobox fs-u-mb-2">
|
|
467
|
-
<input type="text" class="fs-form-control" data-fs="combobox" data-fs-target="#ks-lista-combo-d" placeholder="Buscar…">
|
|
468
|
-
</div>
|
|
469
|
-
<ul class="fs-dropdown-menu fs-combobox-listbox" id="ks-lista-combo-d">
|
|
470
|
-
<li class="fs-dropdown-item" data-value="a">Opção A</li>
|
|
471
|
-
<li class="fs-dropdown-item" data-value="b">Opção B</li>
|
|
472
|
-
</ul>
|
|
473
|
-
<input type="date" class="fs-form-control fs-u-mb-2" aria-label="Data">
|
|
474
|
-
<div class="fs-check fs-u-mb-2">
|
|
475
|
-
<input type="checkbox" class="fs-check-input" id="ks-aceite-d">
|
|
476
|
-
<label for="ks-aceite-d" class="fs-check-label">Aceito os termos</label>
|
|
477
|
-
</div>
|
|
478
|
-
<div class="fs-radio fs-u-mb-2">
|
|
479
|
-
<input type="radio" name="ks-periodo-d" class="fs-radio-input" id="ks-dia-d" checked>
|
|
480
|
-
<label for="ks-dia-d" class="fs-radio-label">Dia</label>
|
|
481
|
-
</div>
|
|
482
|
-
<div class="fs-switch fs-u-mb-2">
|
|
483
|
-
<input type="checkbox" class="fs-switch-input" id="ks-notif-d" checked>
|
|
484
|
-
<label for="ks-notif-d" class="fs-switch-label">Notificações</label>
|
|
485
|
-
</div>
|
|
486
|
-
<div class="fs-file-upload">
|
|
487
|
-
<input type="file" class="fs-file-input" id="ks-arquivo-d">
|
|
488
|
-
<label for="ks-arquivo-d" class="fs-file-label">Escolher arquivo</label>
|
|
489
|
-
</div>
|
|
490
|
-
</section>
|
|
491
|
-
|
|
492
|
-
<section>
|
|
493
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Navbar, Tabs, Breadcrumb, Pagination</h3>
|
|
494
|
-
<nav class="fs-navbar fs-u-mb-3">
|
|
495
|
-
<a href="#" class="fs-navbar-brand">Minha Marca</a>
|
|
496
|
-
<ul class="fs-navbar-nav">
|
|
497
|
-
<li><a href="#" class="fs-nav-link is-active">Início</a></li>
|
|
498
|
-
<li><a href="#" class="fs-nav-link">Produtos</a></li>
|
|
499
|
-
</ul>
|
|
500
|
-
</nav>
|
|
501
|
-
<div class="fs-tabs fs-u-mb-1" data-fs="tabs">
|
|
502
|
-
<a href="#" class="fs-nav-link is-active" data-fs-target="#ks-perfil-d">Perfil</a>
|
|
503
|
-
<a href="#" class="fs-nav-link" data-fs-target="#ks-seguranca-d">Segurança</a>
|
|
504
|
-
</div>
|
|
505
|
-
<div class="fs-tab-content fs-u-mb-3">
|
|
506
|
-
<div class="fs-tab-pane is-active" id="ks-perfil-d">Conteúdo Perfil.</div>
|
|
507
|
-
<div class="fs-tab-pane" id="ks-seguranca-d">Conteúdo Segurança.</div>
|
|
508
|
-
</div>
|
|
509
|
-
<nav aria-label="breadcrumb" class="fs-u-mb-3">
|
|
510
|
-
<ol class="fs-breadcrumb">
|
|
511
|
-
<li class="fs-breadcrumb-item"><a href="#">Início</a></li>
|
|
512
|
-
<li class="fs-breadcrumb-item is-active">Página atual</li>
|
|
513
|
-
</ol>
|
|
514
|
-
</nav>
|
|
515
|
-
<ul class="fs-pagination">
|
|
516
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
|
|
517
|
-
<li class="fs-page-item is-active"><a href="#" class="fs-page-link">2</a></li>
|
|
518
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
|
|
519
|
-
</ul>
|
|
520
|
-
</section>
|
|
521
|
-
|
|
522
|
-
<section>
|
|
523
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Dropdown, Nested Menu, Tree View</h3>
|
|
524
|
-
<div class="fs-dropdown fs-u-mr-2">
|
|
525
|
-
<button type="button" class="fs-btn fs-dropdown-toggle" data-fs="dropdown" data-fs-target="#ks-menu-d">Opções</button>
|
|
526
|
-
<div class="fs-dropdown-menu" id="ks-menu-d">
|
|
527
|
-
<a href="#" class="fs-dropdown-item">Editar</a>
|
|
528
|
-
<a href="#" class="fs-dropdown-item">Excluir</a>
|
|
529
|
-
</div>
|
|
530
|
-
</div>
|
|
531
|
-
<button type="button" class="fs-btn fs-dropdown-toggle" data-fs="nested-menu" data-fs-target="#ks-menu-aninhado-d">Arquivo</button>
|
|
532
|
-
<div class="fs-dropdown-menu" id="ks-menu-aninhado-d">
|
|
533
|
-
<a href="#" class="fs-dropdown-item">Novo</a>
|
|
534
|
-
<div class="fs-dropdown-submenu">
|
|
535
|
-
<a href="#" class="fs-dropdown-item fs-dropdown-item-submenu">Exportar</a>
|
|
536
|
-
<div class="fs-dropdown-menu">
|
|
537
|
-
<a href="#" class="fs-dropdown-item">PDF</a>
|
|
538
|
-
</div>
|
|
539
|
-
</div>
|
|
540
|
-
</div>
|
|
541
|
-
<ul class="fs-tree fs-u-mt-3" data-fs="tree-view">
|
|
542
|
-
<li>
|
|
543
|
-
<span class="fs-tree-label">src</span>
|
|
544
|
-
<ul>
|
|
545
|
-
<li><span class="fs-tree-label">index.js</span></li>
|
|
546
|
-
</ul>
|
|
547
|
-
</li>
|
|
548
|
-
<li><span class="fs-tree-label">README.md</span></li>
|
|
549
|
-
</ul>
|
|
550
|
-
</section>
|
|
551
|
-
|
|
552
|
-
<section>
|
|
553
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Accordion & Collapse</h3>
|
|
554
|
-
<div class="fs-accordion fs-u-mb-3" data-fs="accordion">
|
|
555
|
-
<div class="fs-accordion-item">
|
|
556
|
-
<h3 class="fs-accordion-header">
|
|
557
|
-
<button type="button" class="fs-accordion-button" aria-expanded="true">Pergunta 1</button>
|
|
558
|
-
</h3>
|
|
559
|
-
<div class="fs-accordion-collapse">
|
|
560
|
-
<div class="fs-accordion-body">Resposta 1.</div>
|
|
561
|
-
</div>
|
|
562
|
-
</div>
|
|
563
|
-
</div>
|
|
564
|
-
<button type="button" class="fs-btn" data-fs="collapse" data-fs-target="#ks-detalhes-d">Ver detalhes</button>
|
|
565
|
-
<div class="fs-collapse" id="ks-detalhes-d">Conteúdo que expande/recolhe.</div>
|
|
566
|
-
</section>
|
|
567
|
-
|
|
568
|
-
<section>
|
|
569
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Stepper</h3>
|
|
570
|
-
<div class="fs-stepper" data-fs="stepper">
|
|
571
|
-
<ol class="fs-stepper-header">
|
|
572
|
-
<li class="fs-step fs-step-active"><span class="fs-step-indicator">1</span><span class="fs-step-label">Conta</span></li>
|
|
573
|
-
<li class="fs-step"><span class="fs-step-indicator">2</span><span class="fs-step-label">Perfil</span></li>
|
|
574
|
-
</ol>
|
|
575
|
-
<div class="fs-stepper-content">
|
|
576
|
-
<div class="fs-step-panel is-active">Passo 1.</div>
|
|
577
|
-
<div class="fs-step-panel">Passo 2.</div>
|
|
578
|
-
</div>
|
|
579
|
-
</div>
|
|
580
|
-
</section>
|
|
581
|
-
|
|
582
|
-
<section>
|
|
583
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Modal, Offcanvas, Tooltip, Popover, Command Palette</h3>
|
|
584
|
-
<button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="modal" data-fs-target="#ks-modal-d">Abrir modal</button>
|
|
585
|
-
<button type="button" class="fs-btn fs-u-mr-2" data-fs="offcanvas" data-fs-target="#ks-offcanvas-d">Abrir menu</button>
|
|
586
|
-
<button type="button" class="fs-btn fs-u-mr-2" data-fs="tooltip" title="Uma dica útil">Tooltip</button>
|
|
587
|
-
<button type="button" class="fs-btn fs-u-mr-2" data-fs="popover" data-fs-target="#ks-popover-d">Popover</button>
|
|
588
|
-
<button type="button" class="fs-btn" data-fs="command-palette" data-fs-target="#ks-paleta-d">Comandos</button>
|
|
589
|
-
|
|
590
|
-
<div class="fs-modal" id="ks-modal-d">
|
|
591
|
-
<div class="fs-modal-dialog">
|
|
592
|
-
<div class="fs-modal-content">
|
|
593
|
-
<div class="fs-modal-header">
|
|
594
|
-
<h3 class="fs-modal-title">Título</h3>
|
|
595
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="modal" aria-label="Fechar"></button>
|
|
596
|
-
</div>
|
|
597
|
-
<div class="fs-modal-body">Conteúdo do modal.</div>
|
|
598
|
-
</div>
|
|
599
|
-
</div>
|
|
600
|
-
</div>
|
|
601
|
-
<div class="fs-offcanvas fs-offcanvas-start" id="ks-offcanvas-d">
|
|
602
|
-
<div class="fs-offcanvas-header">
|
|
603
|
-
<h3 class="fs-offcanvas-title">Menu</h3>
|
|
604
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
|
|
605
|
-
</div>
|
|
606
|
-
<div class="fs-offcanvas-body">Conteúdo do painel.</div>
|
|
607
|
-
</div>
|
|
608
|
-
<div class="fs-popover" id="ks-popover-d">
|
|
609
|
-
<div class="fs-popover-header">Título</div>
|
|
610
|
-
<div class="fs-popover-body">Conteúdo detalhado aqui.</div>
|
|
611
|
-
</div>
|
|
612
|
-
<div class="fs-command-palette" id="ks-paleta-d">
|
|
613
|
-
<div class="fs-command-palette-dialog">
|
|
614
|
-
<input type="text" class="fs-command-palette-input" placeholder="Digite um comando…">
|
|
615
|
-
<ul class="fs-command-palette-list">
|
|
616
|
-
<li class="fs-dropdown-item" data-value="new-file">Novo arquivo</li>
|
|
617
|
-
</ul>
|
|
618
|
-
</div>
|
|
619
|
-
</div>
|
|
620
|
-
</section>
|
|
621
|
-
|
|
622
|
-
<section>
|
|
623
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Toast & Notification Center</h3>
|
|
624
|
-
<div class="fs-toast-container">
|
|
625
|
-
<div class="fs-toast fs-toast-success" data-fs="toast" id="ks-toast-d" data-delay="4000">
|
|
626
|
-
<div class="fs-toast-header">
|
|
627
|
-
<span>Sucesso</span>
|
|
628
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="toast" aria-label="Fechar"></button>
|
|
629
|
-
</div>
|
|
630
|
-
<div class="fs-toast-body">Operação concluída com sucesso.</div>
|
|
631
|
-
</div>
|
|
632
|
-
</div>
|
|
633
|
-
<button type="button" class="fs-btn" data-fs="notification-center" data-fs-target="#ks-painel-notif-d" aria-label="Notificações">Notificações</button>
|
|
634
|
-
<div class="fs-notification-center" id="ks-painel-notif-d">
|
|
635
|
-
<div class="fs-notification-center-header">
|
|
636
|
-
<span class="fs-notification-center-title">Notificações</span>
|
|
637
|
-
</div>
|
|
638
|
-
<ul class="fs-notification-list"></ul>
|
|
639
|
-
<p class="fs-notification-empty">Nenhuma notificação.</p>
|
|
640
|
-
</div>
|
|
641
|
-
</section>
|
|
642
|
-
|
|
643
|
-
<section>
|
|
644
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Spinner & Progress</h3>
|
|
645
|
-
<div class="fs-spinner fs-u-mr-3" role="status" aria-label="Carregando"></div>
|
|
646
|
-
<div class="fs-progress">
|
|
647
|
-
<div class="fs-progress-bar" style="--fs-progress-value: 60;"></div>
|
|
648
|
-
</div>
|
|
649
|
-
</section>
|
|
650
|
-
|
|
651
|
-
<section>
|
|
652
|
-
<h3 class="fs-u-fs-sm fs-u-fw-medium">Carousel, Rating, Segmented Control, Timeline</h3>
|
|
653
|
-
<div class="fs-carousel fs-u-mb-3" data-fs="carousel">
|
|
654
|
-
<div class="fs-carousel-inner">
|
|
655
|
-
<div class="fs-carousel-item is-active"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBTAA7" alt=""></div>
|
|
656
|
-
<div class="fs-carousel-item"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBTAA7" alt=""></div>
|
|
657
|
-
</div>
|
|
658
|
-
<button type="button" class="fs-carousel-control-prev" aria-label="Anterior"></button>
|
|
659
|
-
<button type="button" class="fs-carousel-control-next" aria-label="Próximo"></button>
|
|
660
|
-
</div>
|
|
661
|
-
<div class="fs-rating fs-u-mb-3">
|
|
662
|
-
<input type="radio" name="ks-nota-d" class="fs-rating-input" id="ks-nota-5-d" value="5">
|
|
663
|
-
<label for="ks-nota-5-d" class="fs-rating-star" aria-label="5 estrelas">
|
|
664
|
-
<svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>
|
|
665
|
-
</label>
|
|
666
|
-
</div>
|
|
667
|
-
<div class="fs-segmented-control fs-u-mb-3">
|
|
668
|
-
<div class="fs-segmented-item">
|
|
669
|
-
<input type="radio" name="ks-periodo-d" class="fs-segmented-input" id="ks-p-dia-d" checked>
|
|
670
|
-
<label for="ks-p-dia-d" class="fs-segmented-label">Dia</label>
|
|
671
|
-
</div>
|
|
672
|
-
<div class="fs-segmented-item">
|
|
673
|
-
<input type="radio" name="ks-periodo-d" class="fs-segmented-input" id="ks-p-semana-d">
|
|
674
|
-
<label for="ks-p-semana-d" class="fs-segmented-label">Semana</label>
|
|
675
|
-
</div>
|
|
676
|
-
</div>
|
|
677
|
-
<ol class="fs-timeline">
|
|
678
|
-
<li class="fs-timeline-item fs-timeline-completed">
|
|
679
|
-
<div class="fs-timeline-marker"></div>
|
|
680
|
-
<div class="fs-timeline-content">
|
|
681
|
-
<p class="fs-timeline-title">Pedido criado</p>
|
|
682
|
-
</div>
|
|
683
|
-
</li>
|
|
684
|
-
<li class="fs-timeline-item fs-timeline-active">
|
|
685
|
-
<div class="fs-timeline-marker"></div>
|
|
686
|
-
<div class="fs-timeline-content">
|
|
687
|
-
<p class="fs-timeline-title">Em preparação</p>
|
|
688
|
-
</div>
|
|
689
|
-
</li>
|
|
690
|
-
</ol>
|
|
691
|
-
</section>
|
|
692
|
-
</div>
|
|
693
|
-
|
|
694
|
-
<script src="../dist/js/fokus.js"></script>
|
|
695
|
-
</body>
|
|
696
|
-
</html>
|