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
|
@@ -1,215 +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 - Infraestrutura JS (Fase 7)</title>
|
|
7
|
-
|
|
8
|
-
<!-- STYLES IMPORT -->
|
|
9
|
-
<link rel="stylesheet" href="../../dist/css/fonts.css">
|
|
10
|
-
<link rel="stylesheet" href="../../dist/css/components.css">
|
|
11
|
-
<link rel="stylesheet" href="../../dist/css/forms.css">
|
|
12
|
-
<link rel="stylesheet" href="../../dist/css/helpers.css">
|
|
13
|
-
<style>
|
|
14
|
-
body {
|
|
15
|
-
padding: 24px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
section {
|
|
19
|
-
margin-bottom: 320px;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
/* Harness manual desta fase: ainda não existe .fs-dropdown-menu (Fase 8)
|
|
23
|
-
nem .fs-modal (Fase 9), então o painel flutuante e o painel com focus
|
|
24
|
-
trap usam estilo inline sobre os tokens já existentes. */
|
|
25
|
-
.floating-panel {
|
|
26
|
-
width: 220px;
|
|
27
|
-
padding: 12px 16px;
|
|
28
|
-
border: 1px solid var(--fs-color-border);
|
|
29
|
-
border-radius: var(--fs-radius-md);
|
|
30
|
-
color: var(--fs-color-text);
|
|
31
|
-
background-color: var(--fs-color-surface);
|
|
32
|
-
box-shadow: var(--fs-shadow-md);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.trap-panel {
|
|
36
|
-
display: none;
|
|
37
|
-
position: fixed;
|
|
38
|
-
inset: 0;
|
|
39
|
-
align-items: center;
|
|
40
|
-
justify-content: center;
|
|
41
|
-
background-color: rgb(0 0 0 / 45%);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.trap-panel.is-open {
|
|
45
|
-
display: flex;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.trap-panel-body {
|
|
49
|
-
width: 320px;
|
|
50
|
-
padding: 20px;
|
|
51
|
-
border-radius: var(--fs-radius-md);
|
|
52
|
-
color: var(--fs-color-text);
|
|
53
|
-
background-color: var(--fs-color-surface);
|
|
54
|
-
box-shadow: var(--fs-shadow-lg);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.collapse-panel {
|
|
58
|
-
padding: 12px 16px;
|
|
59
|
-
border: 1px solid var(--fs-color-border);
|
|
60
|
-
border-top: none;
|
|
61
|
-
border-radius: 0 0 var(--fs-radius-md) var(--fs-radius-md);
|
|
62
|
-
color: var(--fs-color-text);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.collapse-trigger {
|
|
66
|
-
border-radius: var(--fs-radius-md) var(--fs-radius-md) 0 0;
|
|
67
|
-
}
|
|
68
|
-
</style>
|
|
69
|
-
<link rel="stylesheet" href="../assets/example-theme.css">
|
|
70
|
-
<script src="../assets/example-theme.js"></script>
|
|
71
|
-
</head>
|
|
72
|
-
<body>
|
|
73
|
-
|
|
74
|
-
<h1 class="fs-u-fs-lg fs-u-fw-medium fs-u-mb-3">Fase 7 — Infraestrutura JS compartilhada</h1>
|
|
75
|
-
|
|
76
|
-
<section>
|
|
77
|
-
<h2 class="fs-u-fs-md fs-u-fw-medium fs-u-mb-2">1. Posicionamento (FokusStyles.core.computePosition)</h2>
|
|
78
|
-
<p class="fs-u-fs-sm fs-u-mb-3">O painel reposiciona (com flip) relativo ao botão. Role a página para testar o flip perto das bordas.</p>
|
|
79
|
-
<button type="button" class="fs-btn fs-btn-primary" id="positioning-trigger">Alternar painel posicionado</button>
|
|
80
|
-
<div class="floating-panel" id="positioning-panel" style="display: none;">
|
|
81
|
-
Painel posicionado via <code class="fs-u-font-mono">computePosition()</code>, com flip automático quando não cabe no viewport.
|
|
82
|
-
</div>
|
|
83
|
-
</section>
|
|
84
|
-
|
|
85
|
-
<section>
|
|
86
|
-
<h2 class="fs-u-fs-md fs-u-fw-medium fs-u-mb-2">4. API declarativa 2.3</h2>
|
|
87
|
-
<p class="fs-u-fs-sm fs-u-mb-3">Theme, validação e eventos comuns usam os exports vanilla sem dependências externas.</p>
|
|
88
|
-
<div class="fs-form-row">
|
|
89
|
-
<button type="button" class="fs-btn" id="theme-toggle">Alternar tema com FokusStyles.Theme</button>
|
|
90
|
-
<form class="fs-form-col" data-fs="form-validation" id="api-form" novalidate>
|
|
91
|
-
<label class="fs-form-label" for="api-required">Campo obrigatório</label>
|
|
92
|
-
<input class="fs-form-control" id="api-required" required aria-describedby="api-feedback">
|
|
93
|
-
<div class="fs-invalid-feedback" id="api-feedback">Informe um valor para continuar.</div>
|
|
94
|
-
<button class="fs-btn fs-btn-primary" type="submit">Validar formulário</button>
|
|
95
|
-
</form>
|
|
96
|
-
</div>
|
|
97
|
-
<p class="fs-u-fs-xs fs-u-mt-2" id="api-status" role="status" aria-live="polite"></p>
|
|
98
|
-
</section>
|
|
99
|
-
|
|
100
|
-
<section>
|
|
101
|
-
<h2 class="fs-u-fs-md fs-u-fw-medium fs-u-mb-2">2. Foco, teclado e overlay (FokusStyles.core.createFocusTrap / onEscapeKey / lockScroll / onClickOutside)</h2>
|
|
102
|
-
<p class="fs-u-fs-sm fs-u-mb-3">Abre um painel com scroll da página bloqueado, foco preso via Tab/Shift+Tab, fecha com Escape ou clique fora.</p>
|
|
103
|
-
<button type="button" class="fs-btn fs-btn-primary" id="trap-trigger">Abrir painel com focus trap</button>
|
|
104
|
-
<div class="trap-panel" id="trap-panel">
|
|
105
|
-
<div class="trap-panel-body" id="trap-panel-body">
|
|
106
|
-
<p class="fs-u-fs-md fs-u-fw-medium fs-u-mb-2">Painel com focus trap</p>
|
|
107
|
-
<p class="fs-u-fs-sm fs-u-mb-3">Tab/Shift+Tab ciclam apenas entre estes três controles. Escape ou clique fora fecha.</p>
|
|
108
|
-
<input type="text" class="fs-form-control fs-u-mb-2" placeholder="Campo de teste">
|
|
109
|
-
<button type="button" class="fs-btn fs-u-mr-2">Ação secundária</button>
|
|
110
|
-
<button type="button" class="fs-btn fs-btn-primary" id="trap-close">Fechar</button>
|
|
111
|
-
</div>
|
|
112
|
-
</div>
|
|
113
|
-
</section>
|
|
114
|
-
|
|
115
|
-
<section>
|
|
116
|
-
<h2 class="fs-u-fs-md fs-u-fw-medium fs-u-mb-2">3. Transição / collapse (FokusStyles.core.collapse / expand)</h2>
|
|
117
|
-
<p class="fs-u-fs-sm fs-u-mb-3">Expande/recolhe com transição de altura (respeita <code class="fs-u-font-mono">prefers-reduced-motion</code>).</p>
|
|
118
|
-
<button type="button" class="fs-btn fs-btn-primary collapse-trigger" id="collapse-trigger" aria-expanded="false">Alternar painel</button>
|
|
119
|
-
<div class="collapse-panel" id="collapse-panel" style="display: none;">
|
|
120
|
-
Conteúdo revelado via <code class="fs-u-font-mono">expand()</code>/<code class="fs-u-font-mono">collapse()</code>, animando a altura com <code class="fs-u-font-mono">transitionend</code>.
|
|
121
|
-
</div>
|
|
122
|
-
</section>
|
|
123
|
-
|
|
124
|
-
<!-- SCRIPTS IMPORT -->
|
|
125
|
-
<script src="../../dist/js/fokus.js"></script>
|
|
126
|
-
<script>
|
|
127
|
-
const { core } = FokusStyles;
|
|
128
|
-
|
|
129
|
-
// 1. Posicionamento
|
|
130
|
-
const positioningTrigger = document.getElementById("positioning-trigger");
|
|
131
|
-
const positioningPanel = document.getElementById("positioning-panel");
|
|
132
|
-
let positioningOpen = false;
|
|
133
|
-
|
|
134
|
-
positioningTrigger.addEventListener("click", () => {
|
|
135
|
-
positioningOpen = !positioningOpen;
|
|
136
|
-
|
|
137
|
-
if (positioningOpen) {
|
|
138
|
-
positioningPanel.style.display = "block";
|
|
139
|
-
const position = core.computePosition(positioningTrigger, positioningPanel, { placement: "bottom", offset: 8 });
|
|
140
|
-
core.applyPosition(positioningPanel, position);
|
|
141
|
-
} else {
|
|
142
|
-
positioningPanel.style.display = "none";
|
|
143
|
-
}
|
|
144
|
-
});
|
|
145
|
-
|
|
146
|
-
window.addEventListener("resize", () => {
|
|
147
|
-
if (!positioningOpen) return;
|
|
148
|
-
const position = core.computePosition(positioningTrigger, positioningPanel, { placement: "bottom", offset: 8 });
|
|
149
|
-
core.applyPosition(positioningPanel, position);
|
|
150
|
-
});
|
|
151
|
-
|
|
152
|
-
// 2. Foco, teclado e overlay
|
|
153
|
-
const trapTrigger = document.getElementById("trap-trigger");
|
|
154
|
-
const trapPanel = document.getElementById("trap-panel");
|
|
155
|
-
const trapPanelBody = document.getElementById("trap-panel-body");
|
|
156
|
-
const trapClose = document.getElementById("trap-close");
|
|
157
|
-
|
|
158
|
-
let focusTrap = null;
|
|
159
|
-
let removeEscapeListener = null;
|
|
160
|
-
let removeClickOutsideListener = null;
|
|
161
|
-
|
|
162
|
-
function openTrapPanel() {
|
|
163
|
-
trapPanel.classList.add("is-open");
|
|
164
|
-
core.lockScroll();
|
|
165
|
-
|
|
166
|
-
focusTrap = core.createFocusTrap(trapPanelBody);
|
|
167
|
-
focusTrap.activate();
|
|
168
|
-
|
|
169
|
-
removeEscapeListener = core.onEscapeKey(closeTrapPanel);
|
|
170
|
-
removeClickOutsideListener = core.onClickOutside(trapPanelBody, closeTrapPanel);
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
function closeTrapPanel() {
|
|
174
|
-
trapPanel.classList.remove("is-open");
|
|
175
|
-
core.unlockScroll();
|
|
176
|
-
|
|
177
|
-
focusTrap?.deactivate();
|
|
178
|
-
removeEscapeListener?.();
|
|
179
|
-
removeClickOutsideListener?.();
|
|
180
|
-
|
|
181
|
-
trapTrigger.focus();
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
trapTrigger.addEventListener("click", openTrapPanel);
|
|
185
|
-
trapClose.addEventListener("click", closeTrapPanel);
|
|
186
|
-
|
|
187
|
-
// 3. Transição / collapse
|
|
188
|
-
const collapseTrigger = document.getElementById("collapse-trigger");
|
|
189
|
-
const collapsePanel = document.getElementById("collapse-panel");
|
|
190
|
-
let collapseOpen = false;
|
|
191
|
-
|
|
192
|
-
collapseTrigger.addEventListener("click", () => {
|
|
193
|
-
collapseOpen = !collapseOpen;
|
|
194
|
-
collapseTrigger.setAttribute("aria-expanded", String(collapseOpen));
|
|
195
|
-
|
|
196
|
-
if (collapseOpen) {
|
|
197
|
-
core.expand(collapsePanel);
|
|
198
|
-
} else {
|
|
199
|
-
core.collapse(collapsePanel);
|
|
200
|
-
}
|
|
201
|
-
});
|
|
202
|
-
|
|
203
|
-
const apiStatus = document.getElementById("api-status");
|
|
204
|
-
document.getElementById("theme-toggle").addEventListener("click", () => {
|
|
205
|
-
const next = FokusStyles.Theme.getOrCreateInstance().get() === "dark" ? "light" : "dark";
|
|
206
|
-
FokusStyles.Theme.set(next);
|
|
207
|
-
apiStatus.textContent = `Tema ${next} aplicado.`;
|
|
208
|
-
});
|
|
209
|
-
document.getElementById("api-form").addEventListener("fs:form:validated", (event) => {
|
|
210
|
-
apiStatus.textContent = event.detail.valid ? "Formulário válido." : "Formulário precisa de atenção.";
|
|
211
|
-
});
|
|
212
|
-
</script>
|
|
213
|
-
|
|
214
|
-
</body>
|
|
215
|
-
</html>
|
|
@@ -1,134 +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 - Layout</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/helpers.css">
|
|
13
|
-
<link rel="stylesheet" href="../assets/example-theme.css">
|
|
14
|
-
<script src="../assets/example-theme.js"></script>
|
|
15
|
-
</head>
|
|
16
|
-
<body>
|
|
17
|
-
|
|
18
|
-
<div class="fs-container fs-u-p-2">
|
|
19
|
-
<!-- Grid numerada de 12 colunas, com gutter via .g-3 -->
|
|
20
|
-
<div class="fs-row fs-u-g-3">
|
|
21
|
-
<div class="fs-col-md-8 fs-u-p-2">col-md-8</div>
|
|
22
|
-
<div class="fs-col-md-4 fs-u-p-2">col-md-4</div>
|
|
23
|
-
</div>
|
|
24
|
-
<div class="fs-row fs-u-g-3 fs-u-mt-3">
|
|
25
|
-
<div class="fs-col-4 fs-u-p-2">col-4</div>
|
|
26
|
-
<div class="fs-col-4 fs-u-p-2">col-4</div>
|
|
27
|
-
<div class="fs-col-4 fs-u-p-2">col-4</div>
|
|
28
|
-
</div>
|
|
29
|
-
|
|
30
|
-
<!-- Colunas de largura igual automática -->
|
|
31
|
-
<div class="fs-row fs-u-gx-2 fs-u-mt-3">
|
|
32
|
-
<div class="fs-col-sm fs-u-p-2">col 1</div>
|
|
33
|
-
<div class="fs-col-md fs-u-p-2">col 2</div>
|
|
34
|
-
<div class="fs-col fs-u-p-2">col 3</div>
|
|
35
|
-
</div>
|
|
36
|
-
<div class="fs-row fs-row-fluid fs-u-justify-content-start fs-u-mt-3">
|
|
37
|
-
<div class="fs-col fs-col-fluid fs-u-p-2">col 1</div>
|
|
38
|
-
</div>
|
|
39
|
-
</div>
|
|
40
|
-
|
|
41
|
-
<div class="fs-container-fluid fs-u-p-2">
|
|
42
|
-
<div class="fs-form-row fs-u-mt-3 fs-u-gap-x-2">
|
|
43
|
-
<div class="fs-form-col">
|
|
44
|
-
<label for="input-text" class="fs-form-label fs-form-size-md">Nome completo</label>
|
|
45
|
-
<input type="text" class="fs-form-control fs-form-size-xxl" id="input-text" placeholder="Enter text" value="Jorge Reis">
|
|
46
|
-
<span class="fs-form-text fs-form-size-xxl info">This is a valid text input field.</span>
|
|
47
|
-
</div>
|
|
48
|
-
</div>
|
|
49
|
-
<div class="fs-form-row fs-u-mt-3 fs-u-gap-x-2">
|
|
50
|
-
<div class="fs-form-col">
|
|
51
|
-
<label for="input-readonly" class="fs-form-label fs-form-size-md">Somente leitura</label>
|
|
52
|
-
<input type="text" class="fs-form-control fs-form-size-xxl" id="input-readonly" value="Valor fixo" readonly>
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
<div class="fs-container-fluid fs-u-p-2 fs-u-mt-3">
|
|
58
|
-
<!-- Utilitários de tipografia -->
|
|
59
|
-
<p class="fs-u-text-center fs-u-fw-medium fs-u-fs-lg">Texto centralizado, peso medium, fonte lg</p>
|
|
60
|
-
<p class="fs-u-text-uppercase fs-u-fs-sm">texto em uppercase, fonte sm</p>
|
|
61
|
-
<p class="fs-u-text-truncate" style="max-width: 200px;">Texto longo o suficiente para ser truncado com reticências</p>
|
|
62
|
-
<p class="fs-u-font-mono fs-u-fs-md">Texto em fonte monoespaçada</p>
|
|
63
|
-
</div>
|
|
64
|
-
|
|
65
|
-
<div class="fs-container-fluid fs-u-p-2 fs-u-mt-3">
|
|
66
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Stack — empilhamento vertical com gap consistente</p>
|
|
67
|
-
<div class="fs-stack" style="max-width: 320px; background-color: var(--fs-color-subtle); padding: 12px;">
|
|
68
|
-
<div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">Item 1</div>
|
|
69
|
-
<div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">Item 2</div>
|
|
70
|
-
<div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">Item 3</div>
|
|
71
|
-
</div>
|
|
72
|
-
<div class="fs-stack fs-stack-gap-1 fs-u-mt-2" style="max-width: 320px; background-color: var(--fs-color-subtle); padding: 12px;">
|
|
73
|
-
<div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">Gap menor (fs-stack-gap-1)</div>
|
|
74
|
-
<div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">Item 2</div>
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
77
|
-
|
|
78
|
-
<div class="fs-container-fluid fs-u-p-2 fs-u-mt-3">
|
|
79
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Cluster — grupo horizontal com quebra automática</p>
|
|
80
|
-
<div class="fs-cluster" style="background-color: var(--fs-color-subtle); padding: 12px;">
|
|
81
|
-
<span class="fs-u-p-2" style="background-color: var(--fs-color-surface); border-radius: var(--fs-radius-sm);">Frontend</span>
|
|
82
|
-
<span class="fs-u-p-2" style="background-color: var(--fs-color-surface); border-radius: var(--fs-radius-sm);">Design System</span>
|
|
83
|
-
<span class="fs-u-p-2" style="background-color: var(--fs-color-surface); border-radius: var(--fs-radius-sm);">Acessibilidade</span>
|
|
84
|
-
<span class="fs-u-p-2" style="background-color: var(--fs-color-surface); border-radius: var(--fs-radius-sm);">Performance</span>
|
|
85
|
-
<span class="fs-u-p-2" style="background-color: var(--fs-color-surface); border-radius: var(--fs-radius-sm);">CSS</span>
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
88
|
-
|
|
89
|
-
<div class="fs-container-fluid fs-u-p-2 fs-u-mt-3">
|
|
90
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Sidebar — aside com largura fixa + conteúdo flexível</p>
|
|
91
|
-
<div class="fs-sidebar fs-sidebar-width-sm" style="background-color: var(--fs-color-subtle); padding: 12px;">
|
|
92
|
-
<div class="fs-sidebar-aside fs-u-p-2" style="background-color: var(--fs-color-surface);">Aside (largura fixa)</div>
|
|
93
|
-
<div class="fs-sidebar-content fs-u-p-2" style="background-color: var(--fs-color-surface);">Conteúdo (preenche o espaço restante e quebra pra baixo da aside quando o container fica estreito demais)</div>
|
|
94
|
-
</div>
|
|
95
|
-
<div class="fs-sidebar fs-sidebar-width-sm fs-sidebar-reverse fs-u-mt-2" style="background-color: var(--fs-color-subtle); padding: 12px;">
|
|
96
|
-
<div class="fs-sidebar-aside fs-u-p-2" style="background-color: var(--fs-color-surface);">Aside (reverse — à direita)</div>
|
|
97
|
-
<div class="fs-sidebar-content fs-u-p-2" style="background-color: var(--fs-color-surface);">Conteúdo</div>
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
|
|
101
|
-
<div class="fs-container-fluid fs-u-p-2 fs-u-mt-3">
|
|
102
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Sticky — permanece fixo ao rolar o container</p>
|
|
103
|
-
<div tabindex="0" style="max-height: 120px; overflow-y: auto; border: 1px solid var(--fs-color-border);">
|
|
104
|
-
<div class="fs-u-sticky-top fs-u-p-2" style="background-color: var(--fs-color-subtle);">Cabeçalho fixo (fs-u-sticky-top)</div>
|
|
105
|
-
<div class="fs-u-p-2">Linha 1</div>
|
|
106
|
-
<div class="fs-u-p-2">Linha 2</div>
|
|
107
|
-
<div class="fs-u-p-2">Linha 3</div>
|
|
108
|
-
<div class="fs-u-p-2">Linha 4</div>
|
|
109
|
-
<div class="fs-u-p-2">Linha 5</div>
|
|
110
|
-
</div>
|
|
111
|
-
</div>
|
|
112
|
-
|
|
113
|
-
<div class="fs-container-fluid fs-u-p-2 fs-u-mt-3">
|
|
114
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Container queries — reage à largura do container, não da viewport</p>
|
|
115
|
-
<div class="fs-u-cq" style="width: 600px; max-width: 100%; background-color: var(--fs-color-subtle); padding: 12px;">
|
|
116
|
-
<p class="fs-u-fs-sm fs-u-mb-1">Container largo (≥ 480px): itens em linha</p>
|
|
117
|
-
<div class="fs-u-cq-md-d-flex fs-u-gap-2">
|
|
118
|
-
<div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">A</div>
|
|
119
|
-
<div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">B</div>
|
|
120
|
-
<div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">C</div>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
<div class="fs-u-cq fs-u-mt-2" style="width: 300px; max-width: 100%; background-color: var(--fs-color-subtle); padding: 12px;">
|
|
124
|
-
<p class="fs-u-fs-sm fs-u-mb-1">Container estreito (< 480px): sem o d-flex do breakpoint md, itens empilham</p>
|
|
125
|
-
<div class="fs-u-cq-md-d-flex fs-u-gap-2">
|
|
126
|
-
<div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">A</div>
|
|
127
|
-
<div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">B</div>
|
|
128
|
-
<div class="fs-u-p-2" style="background-color: var(--fs-color-surface);">C</div>
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
</div>
|
|
132
|
-
|
|
133
|
-
</body>
|
|
134
|
-
</html>
|
|
@@ -1,127 +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 - Modal & Select</title>
|
|
7
|
-
|
|
8
|
-
<!-- STYLES IMPORT -->
|
|
9
|
-
<link rel="stylesheet" href="../../dist/css/fonts.css">
|
|
10
|
-
<link rel="stylesheet" href="../../dist/css/components.css">
|
|
11
|
-
<link rel="stylesheet" href="../../dist/css/forms.css">
|
|
12
|
-
<link rel="stylesheet" href="../../dist/css/helpers.css">
|
|
13
|
-
<style>
|
|
14
|
-
.theme-panel {
|
|
15
|
-
padding: 24px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
html[data-theme="dark"] .theme-panel {
|
|
19
|
-
color: var(--fs-color-text);
|
|
20
|
-
background-color: var(--fs-color-surface);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
section {
|
|
24
|
-
margin-bottom: 24px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.fs-form-select-dropdown {
|
|
28
|
-
width: 220px;
|
|
29
|
-
}
|
|
30
|
-
</style>
|
|
31
|
-
<link rel="stylesheet" href="../assets/example-theme.css">
|
|
32
|
-
<script src="../assets/example-theme.js"></script>
|
|
33
|
-
</head>
|
|
34
|
-
<body>
|
|
35
|
-
|
|
36
|
-
<div class="theme-panel">
|
|
37
|
-
<section>
|
|
38
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Modal — auto-init via data-fs, focus trap, Escape, clique fora, scroll bloqueado</p>
|
|
39
|
-
<button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="modal" data-fs-target="#modal-claro">Abrir modal</button>
|
|
40
|
-
<button type="button" class="fs-btn fs-u-mr-2" data-fs="modal" data-fs-target="#modal-claro-sm">Modal pequeno</button>
|
|
41
|
-
<button type="button" class="fs-btn" data-fs="modal" data-fs-target="#modal-claro-static">Backdrop estático</button>
|
|
42
|
-
|
|
43
|
-
<div class="fs-modal" id="modal-claro">
|
|
44
|
-
<div class="fs-modal-dialog">
|
|
45
|
-
<div class="fs-modal-content">
|
|
46
|
-
<div class="fs-modal-header">
|
|
47
|
-
<h3 class="fs-modal-title">Confirmar ação</h3>
|
|
48
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="modal" aria-label="Fechar"></button>
|
|
49
|
-
</div>
|
|
50
|
-
<div class="fs-modal-body">
|
|
51
|
-
<p>Este modal reaproveita a infraestrutura da Fase 7: focus trap (Tab/Shift+Tab), fecha com Escape ou clique fora, e bloqueia o scroll da página enquanto aberto.</p>
|
|
52
|
-
</div>
|
|
53
|
-
<div class="fs-modal-footer">
|
|
54
|
-
<button type="button" class="fs-btn" data-fs-dismiss="modal">Cancelar</button>
|
|
55
|
-
<button type="button" class="fs-btn fs-btn-primary" data-fs-dismiss="modal">Confirmar</button>
|
|
56
|
-
</div>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
<div class="fs-modal" id="modal-claro-sm">
|
|
62
|
-
<div class="fs-modal-dialog fs-modal-sm">
|
|
63
|
-
<div class="fs-modal-content">
|
|
64
|
-
<div class="fs-modal-header">
|
|
65
|
-
<h3 class="fs-modal-title">Modal pequeno</h3>
|
|
66
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="modal" aria-label="Fechar"></button>
|
|
67
|
-
</div>
|
|
68
|
-
<div class="fs-modal-body">
|
|
69
|
-
<p>Variante <code class="fs-u-font-mono">.modal-sm</code>.</p>
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
<div class="fs-modal" id="modal-claro-static" data-backdrop="static">
|
|
76
|
-
<div class="fs-modal-dialog">
|
|
77
|
-
<div class="fs-modal-content">
|
|
78
|
-
<div class="fs-modal-header">
|
|
79
|
-
<h3 class="fs-modal-title">Backdrop estático</h3>
|
|
80
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="modal" aria-label="Fechar"></button>
|
|
81
|
-
</div>
|
|
82
|
-
<div class="fs-modal-body">
|
|
83
|
-
<p>Com <code class="fs-u-font-mono">data-backdrop="static"</code>, Escape e clique fora não fecham — só o botão de fechar ou dismiss.</p>
|
|
84
|
-
</div>
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
88
|
-
</section>
|
|
89
|
-
|
|
90
|
-
<section>
|
|
91
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-1">Select customizado — auto-init via data-fs, reaproveita o Dropdown (Fase 8)</p>
|
|
92
|
-
<div class="fs-form-row fs-u-gap-x-2">
|
|
93
|
-
<div class="fs-form-col">
|
|
94
|
-
<label for="select-claro" class="fs-form-label fs-form-size-md">Padrão</label>
|
|
95
|
-
<select class="fs-form-select-dropdown" id="select-claro" data-fs="select">
|
|
96
|
-
<option>Selecione um estado</option>
|
|
97
|
-
<option>São Paulo</option>
|
|
98
|
-
<option>Rio de Janeiro</option>
|
|
99
|
-
<option disabled>Minas Gerais (indisponível)</option>
|
|
100
|
-
<option>Bahia</option>
|
|
101
|
-
</select>
|
|
102
|
-
</div>
|
|
103
|
-
<div class="fs-form-col">
|
|
104
|
-
<label for="select-claro-sm" class="fs-form-label fs-form-size-md">Small</label>
|
|
105
|
-
<select class="fs-form-select-dropdown" id="select-claro-sm" data-fs="select" data-size="sm">
|
|
106
|
-
<option>Pequeno</option>
|
|
107
|
-
<option>Médio</option>
|
|
108
|
-
<option>Grande</option>
|
|
109
|
-
</select>
|
|
110
|
-
</div>
|
|
111
|
-
<div class="fs-form-col">
|
|
112
|
-
<label for="select-claro-disabled" class="fs-form-label fs-form-size-md">Desabilitado</label>
|
|
113
|
-
<select class="fs-form-select-dropdown" id="select-claro-disabled" data-fs="select" disabled>
|
|
114
|
-
<option>Indisponível</option>
|
|
115
|
-
</select>
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
</section>
|
|
119
|
-
</div>
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
<!-- SCRIPTS IMPORT -->
|
|
124
|
-
<script src="../../dist/js/fokus.js"></script>
|
|
125
|
-
|
|
126
|
-
</body>
|
|
127
|
-
</html>
|
|
@@ -1,73 +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 - Nested Menu</title>
|
|
7
|
-
|
|
8
|
-
<!-- STYLES IMPORT -->
|
|
9
|
-
<link rel="stylesheet" href="../../dist/css/fonts.css">
|
|
10
|
-
<link rel="stylesheet" href="../../dist/css/components.css">
|
|
11
|
-
<link rel="stylesheet" href="../../dist/css/helpers.css">
|
|
12
|
-
<style>
|
|
13
|
-
.theme-panel {
|
|
14
|
-
display: flex;
|
|
15
|
-
flex-direction: column;
|
|
16
|
-
align-items: flex-start;
|
|
17
|
-
gap: 12px;
|
|
18
|
-
min-height: 240px;
|
|
19
|
-
padding: 24px;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
html[data-theme="dark"] .theme-panel {
|
|
23
|
-
color: var(--fs-color-text);
|
|
24
|
-
background-color: var(--fs-color-surface);
|
|
25
|
-
}
|
|
26
|
-
</style>
|
|
27
|
-
<link rel="stylesheet" href="../assets/example-theme.css">
|
|
28
|
-
<script src="../assets/example-theme.js"></script>
|
|
29
|
-
</head>
|
|
30
|
-
<body>
|
|
31
|
-
|
|
32
|
-
<div class="theme-panel">
|
|
33
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Submenus recursivos — hover, clique ou setas (→ abre, ← fecha)</p>
|
|
34
|
-
|
|
35
|
-
<button type="button" class="fs-btn fs-dropdown-toggle" data-fs="nested-menu" data-fs-target="#menu-claro">Ações</button>
|
|
36
|
-
<div class="fs-dropdown-menu" id="menu-claro">
|
|
37
|
-
<a href="#" class="fs-dropdown-item">Novo arquivo</a>
|
|
38
|
-
<a href="#" class="fs-dropdown-item">Abrir…</a>
|
|
39
|
-
<div class="fs-dropdown-submenu">
|
|
40
|
-
<button type="button" class="fs-dropdown-item fs-dropdown-item-submenu">Compartilhar</button>
|
|
41
|
-
<div class="fs-dropdown-menu">
|
|
42
|
-
<a href="#" class="fs-dropdown-item">Copiar link</a>
|
|
43
|
-
<a href="#" class="fs-dropdown-item">E-mail</a>
|
|
44
|
-
<div class="fs-dropdown-submenu">
|
|
45
|
-
<button type="button" class="fs-dropdown-item fs-dropdown-item-submenu">Redes sociais</button>
|
|
46
|
-
<div class="fs-dropdown-menu">
|
|
47
|
-
<a href="#" class="fs-dropdown-item">Twitter / X</a>
|
|
48
|
-
<a href="#" class="fs-dropdown-item">LinkedIn</a>
|
|
49
|
-
<a href="#" class="fs-dropdown-item">Facebook</a>
|
|
50
|
-
</div>
|
|
51
|
-
</div>
|
|
52
|
-
</div>
|
|
53
|
-
</div>
|
|
54
|
-
<div class="fs-dropdown-submenu">
|
|
55
|
-
<button type="button" class="fs-dropdown-item fs-dropdown-item-submenu">Exportar como</button>
|
|
56
|
-
<div class="fs-dropdown-menu">
|
|
57
|
-
<a href="#" class="fs-dropdown-item">PDF</a>
|
|
58
|
-
<a href="#" class="fs-dropdown-item">PNG</a>
|
|
59
|
-
<a href="#" class="fs-dropdown-item is-disabled">SVG (em breve)</a>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
<hr class="fs-dropdown-divider">
|
|
63
|
-
<a href="#" class="fs-dropdown-item">Excluir</a>
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<!-- SCRIPTS IMPORT -->
|
|
70
|
-
<script src="../../dist/js/fokus.js"></script>
|
|
71
|
-
|
|
72
|
-
</body>
|
|
73
|
-
</html>
|
|
@@ -1,86 +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 - Notification Center</title>
|
|
7
|
-
|
|
8
|
-
<!-- STYLES IMPORT -->
|
|
9
|
-
<link rel="stylesheet" href="../../dist/css/fonts.css">
|
|
10
|
-
<link rel="stylesheet" href="../../dist/css/components.css">
|
|
11
|
-
<link rel="stylesheet" href="../../dist/css/helpers.css">
|
|
12
|
-
<style>
|
|
13
|
-
.theme-panel {
|
|
14
|
-
display: flex;
|
|
15
|
-
flex-direction: column;
|
|
16
|
-
align-items: flex-start;
|
|
17
|
-
gap: 16px;
|
|
18
|
-
min-height: 260px;
|
|
19
|
-
padding: 24px;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
html[data-theme="dark"] .theme-panel {
|
|
23
|
-
color: var(--fs-color-text);
|
|
24
|
-
background-color: var(--fs-color-surface);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.push-row {
|
|
28
|
-
display: flex;
|
|
29
|
-
flex-wrap: wrap;
|
|
30
|
-
gap: 8px;
|
|
31
|
-
}
|
|
32
|
-
</style>
|
|
33
|
-
<link rel="stylesheet" href="../assets/example-theme.css">
|
|
34
|
-
<script src="../assets/example-theme.js"></script>
|
|
35
|
-
</head>
|
|
36
|
-
<body>
|
|
37
|
-
|
|
38
|
-
<div class="theme-panel">
|
|
39
|
-
<button type="button" class="fs-btn" data-fs="notification-center" data-fs-target="#panel-claro" id="bell-claro">
|
|
40
|
-
<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="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>
|
|
41
|
-
Notificações
|
|
42
|
-
<span class="fs-notification-badge" hidden>0</span>
|
|
43
|
-
</button>
|
|
44
|
-
|
|
45
|
-
<div class="fs-notification-center" id="panel-claro">
|
|
46
|
-
<div class="fs-notification-center-header">
|
|
47
|
-
<span class="fs-notification-center-title">Notificações</span>
|
|
48
|
-
<button type="button" class="fs-btn-close" data-notification="clear" aria-label="Limpar todas"></button>
|
|
49
|
-
</div>
|
|
50
|
-
<ul class="fs-notification-list"></ul>
|
|
51
|
-
<div class="fs-notification-empty" hidden>Nenhuma notificação.</div>
|
|
52
|
-
</div>
|
|
53
|
-
|
|
54
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Disparar (empilha um toast + entra no histórico)</p>
|
|
55
|
-
<div class="push-row">
|
|
56
|
-
<button type="button" class="fs-btn fs-btn-success fs-btn-sm" data-push="claro" data-variant="success">Sucesso</button>
|
|
57
|
-
<button type="button" class="fs-btn fs-btn-danger fs-btn-sm" data-push="claro" data-variant="danger">Erro</button>
|
|
58
|
-
<button type="button" class="fs-btn fs-btn-info fs-btn-sm" data-push="claro" data-variant="info">Info</button>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<div class="fs-toast-container"></div>
|
|
65
|
-
|
|
66
|
-
<!-- SCRIPTS IMPORT -->
|
|
67
|
-
<script src="../../dist/js/fokus.js"></script>
|
|
68
|
-
<script>
|
|
69
|
-
const messages = {
|
|
70
|
-
success: { title: "Backup concluído", body: "Seus arquivos foram salvos." },
|
|
71
|
-
danger: { title: "Falha no upload", body: "Tente novamente em instantes." },
|
|
72
|
-
info: { title: "Nova versão disponível", body: "Recarregue para atualizar." },
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
document.querySelectorAll("[data-push]").forEach((button) => {
|
|
76
|
-
button.addEventListener("click", () => {
|
|
77
|
-
const bell = document.getElementById(`bell-${button.dataset.push}`);
|
|
78
|
-
const center = FokusStyles.NotificationCenter.getInstance(bell);
|
|
79
|
-
const variant = button.dataset.variant;
|
|
80
|
-
center.push({ ...messages[variant], variant });
|
|
81
|
-
});
|
|
82
|
-
});
|
|
83
|
-
</script>
|
|
84
|
-
|
|
85
|
-
</body>
|
|
86
|
-
</html>
|