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,133 +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 - Offcanvas & Popover</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
|
-
padding: 24px;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
html[data-theme="dark"] .theme-panel {
|
|
18
|
-
color: var(--fs-color-text);
|
|
19
|
-
background-color: var(--fs-color-surface);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
section {
|
|
23
|
-
margin-bottom: 24px;
|
|
24
|
-
}
|
|
25
|
-
</style>
|
|
26
|
-
<link rel="stylesheet" href="../assets/example-theme.css">
|
|
27
|
-
<script src="../assets/example-theme.js"></script>
|
|
28
|
-
</head>
|
|
29
|
-
<body>
|
|
30
|
-
|
|
31
|
-
<div class="theme-panel">
|
|
32
|
-
<section>
|
|
33
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Offcanvas — posições, backdrop e backdrop-less</p>
|
|
34
|
-
<button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="offcanvas" data-fs-target="#offcanvas-start-claro">Left (start)</button>
|
|
35
|
-
<button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="offcanvas" data-fs-target="#offcanvas-end-claro">Right (end)</button>
|
|
36
|
-
<button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="offcanvas" data-fs-target="#offcanvas-top-claro">Top</button>
|
|
37
|
-
<button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="offcanvas" data-fs-target="#offcanvas-bottom-claro">Bottom</button>
|
|
38
|
-
<button type="button" class="fs-btn fs-u-mr-2" data-fs="offcanvas" data-fs-target="#offcanvas-nobackdrop-claro">Sem backdrop</button>
|
|
39
|
-
<button type="button" class="fs-btn" data-fs="offcanvas" data-fs-target="#offcanvas-static-claro">Backdrop estático</button>
|
|
40
|
-
|
|
41
|
-
<div class="fs-offcanvas fs-offcanvas-start" id="offcanvas-start-claro">
|
|
42
|
-
<div class="fs-offcanvas-header">
|
|
43
|
-
<h3 class="fs-offcanvas-title">Menu</h3>
|
|
44
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
|
|
45
|
-
</div>
|
|
46
|
-
<div class="fs-offcanvas-body">Conteúdo do offcanvas à esquerda.</div>
|
|
47
|
-
</div>
|
|
48
|
-
|
|
49
|
-
<div class="fs-offcanvas fs-offcanvas-end" id="offcanvas-end-claro">
|
|
50
|
-
<div class="fs-offcanvas-header">
|
|
51
|
-
<h3 class="fs-offcanvas-title">Filtros</h3>
|
|
52
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
|
|
53
|
-
</div>
|
|
54
|
-
<div class="fs-offcanvas-body">Conteúdo do offcanvas à direita.</div>
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
<div class="fs-offcanvas fs-offcanvas-top" id="offcanvas-top-claro">
|
|
58
|
-
<div class="fs-offcanvas-header">
|
|
59
|
-
<h3 class="fs-offcanvas-title">Notificações</h3>
|
|
60
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
|
|
61
|
-
</div>
|
|
62
|
-
<div class="fs-offcanvas-body">Conteúdo do offcanvas no topo.</div>
|
|
63
|
-
</div>
|
|
64
|
-
|
|
65
|
-
<div class="fs-offcanvas fs-offcanvas-bottom" id="offcanvas-bottom-claro">
|
|
66
|
-
<div class="fs-offcanvas-header">
|
|
67
|
-
<h3 class="fs-offcanvas-title">Ações rápidas</h3>
|
|
68
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
|
|
69
|
-
</div>
|
|
70
|
-
<div class="fs-offcanvas-body">Conteúdo do offcanvas embaixo.</div>
|
|
71
|
-
</div>
|
|
72
|
-
|
|
73
|
-
<div class="fs-offcanvas fs-offcanvas-start" id="offcanvas-nobackdrop-claro" data-backdrop="false">
|
|
74
|
-
<div class="fs-offcanvas-header">
|
|
75
|
-
<h3 class="fs-offcanvas-title">Sem backdrop</h3>
|
|
76
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
|
|
77
|
-
</div>
|
|
78
|
-
<div class="fs-offcanvas-body">Fecha com Escape ou clique fora, sem escurecer a página.</div>
|
|
79
|
-
</div>
|
|
80
|
-
|
|
81
|
-
<div class="fs-offcanvas fs-offcanvas-start" id="offcanvas-static-claro" data-backdrop="static">
|
|
82
|
-
<div class="fs-offcanvas-header">
|
|
83
|
-
<h3 class="fs-offcanvas-title">Backdrop estático</h3>
|
|
84
|
-
<button type="button" class="fs-btn-close" data-fs-dismiss="offcanvas" aria-label="Fechar"></button>
|
|
85
|
-
</div>
|
|
86
|
-
<div class="fs-offcanvas-body">Só fecha pelo botão — Escape e clique fora desativados.</div>
|
|
87
|
-
</div>
|
|
88
|
-
</section>
|
|
89
|
-
|
|
90
|
-
<section>
|
|
91
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Popover — data-trigger: click (padrão), hover, focus, manual</p>
|
|
92
|
-
<button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="popover" data-fs-target="#pop-click-claro">Click</button>
|
|
93
|
-
<button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="popover" data-trigger="hover" data-fs-target="#pop-hover-claro">Hover</button>
|
|
94
|
-
<button type="button" class="fs-btn fs-btn-primary fs-u-mr-2" data-fs="popover" data-trigger="focus" data-fs-target="#pop-focus-claro">Focus</button>
|
|
95
|
-
<button type="button" class="fs-btn" data-fs="popover" data-trigger="manual" id="pop-manual-trigger-claro" data-fs-target="#pop-manual-claro">Manual</button>
|
|
96
|
-
|
|
97
|
-
<div class="fs-popover" id="pop-click-claro">
|
|
98
|
-
<div class="fs-popover-arrow"></div>
|
|
99
|
-
<div class="fs-popover-header">Confirmar ação</div>
|
|
100
|
-
<div class="fs-popover-body">Este popover tem conteúdo interativo — clicar aqui dentro não fecha.</div>
|
|
101
|
-
<div class="fs-popover-footer">
|
|
102
|
-
<button type="button" class="fs-btn fs-btn-sm" data-fs-dismiss="popover">Cancelar</button>
|
|
103
|
-
<button type="button" class="fs-btn fs-btn-primary fs-btn-sm" data-fs-dismiss="popover">Confirmar</button>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
|
|
107
|
-
<div class="fs-popover" id="pop-hover-claro">
|
|
108
|
-
<div class="fs-popover-arrow"></div>
|
|
109
|
-
<div class="fs-popover-body">Aparece no hover do gatilho ou do próprio popover.</div>
|
|
110
|
-
</div>
|
|
111
|
-
|
|
112
|
-
<div class="fs-popover" id="pop-focus-claro">
|
|
113
|
-
<div class="fs-popover-arrow"></div>
|
|
114
|
-
<div class="fs-popover-body">Aparece ao focar o gatilho (Tab), some ao sair do foco.</div>
|
|
115
|
-
</div>
|
|
116
|
-
|
|
117
|
-
<div class="fs-popover" id="pop-manual-claro">
|
|
118
|
-
<div class="fs-popover-arrow"></div>
|
|
119
|
-
<div class="fs-popover-body">Só abre/fecha via FokusStyles.Popover.getInstance().toggle().</div>
|
|
120
|
-
</div>
|
|
121
|
-
</section>
|
|
122
|
-
</div>
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
<script src="../../dist/js/fokus.js"></script>
|
|
127
|
-
<script>
|
|
128
|
-
document.getElementById("pop-manual-trigger-claro").addEventListener("click", () => {
|
|
129
|
-
FokusStyles.Popover.getInstance(document.getElementById("pop-manual-trigger-claro")).toggle();
|
|
130
|
-
});
|
|
131
|
-
</script>
|
|
132
|
-
</body>
|
|
133
|
-
</html>
|
|
@@ -1,92 +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 - Pagination & Breadcrumbs</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
|
-
padding: 24px;
|
|
15
|
-
background-color: var(--fs-color-subtle);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
html[data-theme="dark"] .theme-panel {
|
|
19
|
-
color: var(--fs-color-text);
|
|
20
|
-
background-color: var(--fs-color-surface);
|
|
21
|
-
}
|
|
22
|
-
</style>
|
|
23
|
-
<link rel="stylesheet" href="../assets/example-theme.css">
|
|
24
|
-
<script src="../assets/example-theme.js"></script>
|
|
25
|
-
</head>
|
|
26
|
-
<body>
|
|
27
|
-
<div class="theme-panel">
|
|
28
|
-
<ol class="fs-breadcrumb fs-u-mb-3">
|
|
29
|
-
<li class="fs-breadcrumb-item"><a href="#">Início</a></li>
|
|
30
|
-
<li class="fs-breadcrumb-item"><a href="#">Categoria</a></li>
|
|
31
|
-
<li class="fs-breadcrumb-item is-active">Produto atual</li>
|
|
32
|
-
</ol>
|
|
33
|
-
|
|
34
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-2">Avançado: truncamento com tooltip + colapso em telas pequenas (redimensione a janela para ver o item "…" com dropdown)</p>
|
|
35
|
-
<ol class="fs-breadcrumb fs-u-mb-3" data-fs="breadcrumb" data-max-items="3">
|
|
36
|
-
<li class="fs-breadcrumb-item"><a href="#">Início</a></li>
|
|
37
|
-
<li class="fs-breadcrumb-item"><a href="#">Categoria de produtos muito específica</a></li>
|
|
38
|
-
<li class="fs-breadcrumb-item"><a href="#">Subcategoria</a></li>
|
|
39
|
-
<li class="fs-breadcrumb-item"><a href="#">Marca</a></li>
|
|
40
|
-
<li class="fs-breadcrumb-item is-active">Produto atual com nome bem longo para truncar</li>
|
|
41
|
-
</ol>
|
|
42
|
-
|
|
43
|
-
<ul class="fs-pagination">
|
|
44
|
-
<li class="fs-page-item is-disabled"><a href="#" class="fs-page-link" aria-label="Anterior"><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="m15 18-6-6 6-6"/></svg></a></li>
|
|
45
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
|
|
46
|
-
<li class="fs-page-item is-active"><a href="#" class="fs-page-link">2</a></li>
|
|
47
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
|
|
48
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">4</a></li>
|
|
49
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link" aria-label="Próxima"><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="m9 18 6-6-6-6"/></svg></a></li>
|
|
50
|
-
</ul>
|
|
51
|
-
|
|
52
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Bordered (itens colados) + compacta (sm) / lg</p>
|
|
53
|
-
<ul class="fs-pagination fs-pagination-bordered fs-pagination-sm fs-u-mb-2">
|
|
54
|
-
<li class="fs-page-item is-disabled"><a href="#" class="fs-page-link" aria-label="Anterior"><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="m15 18-6-6 6-6"/></svg></a></li>
|
|
55
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
|
|
56
|
-
<li class="fs-page-item is-active"><a href="#" class="fs-page-link">2</a></li>
|
|
57
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
|
|
58
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link" aria-label="Próxima"><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="m9 18 6-6-6-6"/></svg></a></li>
|
|
59
|
-
</ul>
|
|
60
|
-
<ul class="fs-pagination fs-pagination-bordered fs-pagination-lg">
|
|
61
|
-
<li class="fs-page-item is-disabled"><a href="#" class="fs-page-link" aria-label="Anterior"><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="m15 18-6-6 6-6"/></svg></a></li>
|
|
62
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
|
|
63
|
-
<li class="fs-page-item is-active"><a href="#" class="fs-page-link">2</a></li>
|
|
64
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
|
|
65
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link" aria-label="Próxima"><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="m9 18 6-6-6-6"/></svg></a></li>
|
|
66
|
-
</ul>
|
|
67
|
-
|
|
68
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Prev/next descritivo</p>
|
|
69
|
-
<ul class="fs-pagination fs-u-mb-2">
|
|
70
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link fs-page-link-text"><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="m15 18-6-6 6-6"/></svg>Anterior</a></li>
|
|
71
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
|
|
72
|
-
<li class="fs-page-item is-active"><a href="#" class="fs-page-link">2</a></li>
|
|
73
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
|
|
74
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link fs-page-link-text">Próxima<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="m9 18 6-6-6-6"/></svg></a></li>
|
|
75
|
-
</ul>
|
|
76
|
-
|
|
77
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Reticências (intervalo de páginas omitido)</p>
|
|
78
|
-
<ul class="fs-pagination">
|
|
79
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">1</a></li>
|
|
80
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">2</a></li>
|
|
81
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">3</a></li>
|
|
82
|
-
<li class="fs-page-item is-disabled" aria-hidden="true"><span class="fs-page-link"><svg class="fs-icon" 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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></span></li>
|
|
83
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">8</a></li>
|
|
84
|
-
<li class="fs-page-item"><a href="#" class="fs-page-link">9</a></li>
|
|
85
|
-
<li class="fs-page-item is-active"><a href="#" class="fs-page-link">10</a></li>
|
|
86
|
-
</ul>
|
|
87
|
-
</div>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
<script src="../../dist/js/fokus.js"></script>
|
|
91
|
-
</body>
|
|
92
|
-
</html>
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="pt-BR">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Fokus Styles — Popovers</title>
|
|
7
|
-
<link rel="stylesheet" href="../../dist/css/fonts.css">
|
|
8
|
-
<link rel="stylesheet" href="../../dist/css/components.css">
|
|
9
|
-
<link rel="stylesheet" href="../../dist/css/helpers.css">
|
|
10
|
-
<link rel="stylesheet" href="../assets/example-theme.css">
|
|
11
|
-
<script src="../assets/example-theme.js"></script>
|
|
12
|
-
<style>
|
|
13
|
-
:root { --demo-max-width: 1080px; --demo-panel-bg: var(--fs-color-surface); --demo-soft-bg: var(--fs-color-subtle); --demo-panel-border: var(--fs-color-border); --demo-accent: var(--fs-color-primary); }
|
|
14
|
-
* { box-sizing: border-box; }
|
|
15
|
-
body { min-block-size: 100vh; margin: 0; color: var(--fs-color-text); background: var(--fs-color-bg-subtle); }
|
|
16
|
-
.demo-page { max-inline-size: var(--demo-max-width); margin-inline: auto; padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 40px) 64px; }
|
|
17
|
-
.demo-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-block-end: 32px; }
|
|
18
|
-
.demo-eyebrow { margin: 0 0 8px; color: var(--demo-accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
|
|
19
|
-
html[data-fs-theme="dark"] .demo-eyebrow { color: var(--fs-color-text); }
|
|
20
|
-
.demo-title { max-inline-size: 760px; margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.04em; }
|
|
21
|
-
.demo-lead { max-inline-size: 720px; margin: 16px 0 0; color: var(--fs-color-muted); font-size: 1.05rem; line-height: 1.6; }
|
|
22
|
-
.demo-row, .demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
|
|
23
|
-
.demo-row { margin-block-start: 20px; }
|
|
24
|
-
.demo-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-block: 24px; padding: 12px; border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-md); background: var(--demo-panel-bg); }
|
|
25
|
-
.demo-section { margin-block-start: 32px; }
|
|
26
|
-
.demo-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-block-end: 14px; }
|
|
27
|
-
.demo-heading h2, .demo-card h3, .demo-reference h2, .demo-playground h3 { margin: 0; }
|
|
28
|
-
.demo-heading p, .demo-card p, .demo-reference p, .demo-status p { color: var(--fs-color-muted); }
|
|
29
|
-
.demo-heading p { max-inline-size: 650px; margin: 0; font-size: .9rem; }
|
|
30
|
-
.demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
|
|
31
|
-
.demo-card, .demo-playground, .demo-reference { border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-md); background: var(--demo-panel-bg); box-shadow: var(--fs-shadow-sm); }
|
|
32
|
-
.demo-card { min-block-size: 180px; padding: 20px; }
|
|
33
|
-
.demo-card p { margin: 10px 0 20px; line-height: 1.55; }
|
|
34
|
-
.demo-icon { display: grid; inline-size: 36px; block-size: 36px; place-items: center; margin-block-end: 16px; border-radius: var(--fs-radius-sm); color: var(--fs-color-primary); background: var(--demo-soft-bg); font-weight: 700; }
|
|
35
|
-
.demo-playground { padding: clamp(18px, 3vw, 28px); }
|
|
36
|
-
.demo-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 28px; }
|
|
37
|
-
.demo-group + .demo-group { margin-block-start: 28px; }
|
|
38
|
-
.demo-group h3 { font-size: 1rem; }
|
|
39
|
-
.demo-group > p { margin: 6px 0 14px; color: var(--fs-color-muted); font-size: .9rem; }
|
|
40
|
-
.demo-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-sm); background: var(--demo-soft-bg); }
|
|
41
|
-
.demo-sample + .demo-sample { margin-block-start: 10px; }
|
|
42
|
-
.demo-label { flex: 1 1 150px; color: var(--fs-color-muted); font-size: .82rem; }
|
|
43
|
-
.demo-status { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--fs-radius-sm); background: var(--demo-soft-bg); }
|
|
44
|
-
.demo-status h3 { margin: 0; }
|
|
45
|
-
.demo-status-output { margin: 0; padding: 12px; border-inline-start: 3px solid var(--demo-accent); color: var(--fs-color-text) !important; background: var(--demo-panel-bg); font-size: .85rem !important; }
|
|
46
|
-
.demo-reference { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: clamp(18px, 3vw, 28px); }
|
|
47
|
-
.demo-reference ul { margin: 0; padding-inline-start: 20px; color: var(--fs-color-muted); line-height: 1.8; }
|
|
48
|
-
.demo-reference code { color: var(--fs-color-primary); }
|
|
49
|
-
@media (max-width: 760px) { .demo-hero, .demo-columns, .demo-reference { grid-template-columns: 1fr; } .demo-grid { grid-template-columns: 1fr; } }
|
|
50
|
-
</style>
|
|
51
|
-
</head>
|
|
52
|
-
<body>
|
|
53
|
-
<main class="demo-page">
|
|
54
|
-
<header class="demo-hero"><div><p class="demo-eyebrow">Fokus Styles · painel contextual</p><h1 class="demo-title">Popovers para contexto rico sem bloquear a página.</h1><p class="demo-lead">Popover complementa um gatilho com informações, ações ou confirmação curta. Ele permite foco interno, mas não é um Modal e não cria focus trap.</p><div class="demo-row"><span class="fs-badge fs-badge-soft-primary">Click</span><span class="fs-badge fs-badge-soft-success">Focus</span><span class="fs-badge fs-badge-outline-primary">Hover</span></div></div><span class="fs-badge fs-badge-outline-primary">não modal</span></header>
|
|
55
|
-
<nav class="demo-toolbar" aria-label="Controles da demonstração"><div class="demo-actions"><button class="fs-btn fs-btn-primary fs-btn-sm" type="button" id="reset-demo">Restaurar demonstração</button><button class="fs-btn fs-btn-outline-primary fs-btn-sm" type="button" id="toggle-direction" aria-pressed="false">Testar RTL</button></div><span class="fs-form-text">Use Tab, Escape e clique externo para conferir os contratos.</span></nav>
|
|
56
|
-
<section class="demo-section" aria-labelledby="compare-title"><div class="demo-heading"><div><h2 id="compare-title">Escolha o padrão certo</h2><p>Tooltip explica rapidamente; Popover oferece contexto e ações; Modal concentra uma tarefa.</p></div></div><div class="demo-grid"><article class="demo-card"><span class="demo-icon" aria-hidden="true">?</span><h3>Tooltip</h3><p>Texto breve e não interativo, normalmente associado a um ícone.</p><span class="fs-badge fs-badge-outline-info">breve</span></article><article class="demo-card"><span class="demo-icon" aria-hidden="true">+</span><h3>Popover</h3><p>Conteúdo contextual com título, descrição e controles opcionais.</p><button class="fs-btn fs-btn-primary fs-btn-sm" type="button" data-fs="popover" data-fs-target="#pop-card">Abrir Popover</button></article><article class="demo-card"><span class="demo-icon" aria-hidden="true">□</span><h3>Modal</h3><p>Tarefa que exige atenção concentrada e gerenciamento de foco.</p><span class="fs-badge fs-badge-outline-warning">bloqueia</span></article></div></section>
|
|
57
|
-
<section class="demo-section" aria-labelledby="playground-title"><div class="demo-heading"><div><h2 id="playground-title">Laboratório de Popovers</h2><p>Compare triggers, placements, alinhamentos, hover card, ações internas e fallback de viewport.</p></div><span class="fs-badge fs-badge-outline-success">interativo</span></div><div class="demo-playground"><div class="demo-columns"><div><div class="demo-group"><h3>Triggers e posições</h3><p>Click é o padrão; focus e hover oferecem alternativas para contextos apropriados.</p><div class="demo-sample"><span class="demo-label">Click · top</span><button class="fs-btn fs-btn-outline-primary fs-btn-sm" type="button" data-fs="popover" data-fs-target="#pop-click" data-placement="top">Abrir acima</button><button class="fs-btn fs-btn-outline-primary fs-btn-sm" type="button" data-fs="popover" data-fs-target="#pop-bottom" data-placement="bottom">Abrir abaixo</button></div><div class="demo-sample"><span class="demo-label">Focus · right</span><button class="fs-btn fs-btn-outline-success fs-btn-sm" type="button" data-fs="popover" data-fs-target="#pop-focus" data-trigger="focus" data-placement="right">Foque neste botão</button></div><div class="demo-sample"><span class="demo-label">Manual · left</span><button class="fs-btn fs-btn-outline-warning fs-btn-sm" type="button" id="manual-trigger" data-fs="popover" data-fs-target="#pop-manual" data-trigger="manual" data-placement="left">Abrir manual</button></div></div><div class="demo-group"><h3>Hover card e ações</h3><p>O painel pode conter controles sem se comportar como diálogo modal.</p><div class="demo-sample"><span class="demo-label">Hover</span><a href="#profile" class="fs-btn fs-btn-outline-secondary fs-btn-sm" data-fs="popover" data-fs-target="#pop-hover" data-trigger="hover">Passe o mouse ou use foco</a></div><div class="demo-sample"><span class="demo-label">Ações</span><button class="fs-btn fs-btn-primary fs-btn-sm" type="button" data-fs="popover" data-fs-target="#pop-actions" data-placement="bottom">Confirmar alteração</button></div></div><div class="demo-group"><h3>Conteúdo longo</h3><p>Textos quebram e ações continuam acessíveis em telas estreitas.</p><div class="demo-sample"><button class="fs-btn fs-btn-outline-danger fs-btn-sm" type="button" data-fs="popover" data-fs-target="#pop-long" data-placement="bottom">Ver detalhes do erro</button></div></div></div><aside class="demo-status" aria-labelledby="status-title"><div><h3 id="status-title">Contrato do Popover</h3><p>Escape fecha e devolve foco; clique externo fecha apenas o trigger click; não há focus trap.</p></div><p class="demo-status-output" id="demo-status" role="status" aria-live="polite">Demonstração pronta.</p><pre class="demo-code"><code>.fs-popover
|
|
58
|
-
.fs-popover-header
|
|
59
|
-
.fs-popover-body
|
|
60
|
-
.fs-popover-footer
|
|
61
|
-
.fs-popover-arrow
|
|
62
|
-
.fs-popover-hover-card
|
|
63
|
-
|
|
64
|
-
data-trigger
|
|
65
|
-
data-placement
|
|
66
|
-
data-align</code></pre></aside></div></div></section>
|
|
67
|
-
<section class="demo-section" aria-labelledby="a11y-title"><div class="demo-heading"><div><h2 id="a11y-title">Contratos preservados</h2><p>O painel é acessível por teclado e continua não modal.</p></div></div><div class="demo-reference"><div><h2>Acessibilidade</h2><ul><li><code>aria-expanded</code> e <code>aria-controls</code> acompanham o gatilho.</li><li>Escape fecha e devolve foco ao gatilho.</li><li>Ícones decorativos usam <code>aria-hidden="true"</code>.</li><li>Controles internos mantêm foco visível.</li></ul></div><div><h2>Limites</h2><ul><li>Não use Popover para conteúdo essencial apenas em hover.</li><li>Não há bloqueio de scroll ou focus trap.</li><li>Use Modal para tarefas extensas ou críticas.</li><li>RTL, dark mode, reduced motion e forced colors são considerados.</li></ul></div></div></section>
|
|
68
|
-
</main>
|
|
69
|
-
<div class="fs-popover" id="pop-card"><div class="fs-popover-header"><span class="fs-popover-icon" aria-hidden="true">+</span><div class="fs-popover-heading"><strong class="fs-popover-title">Contexto rápido</strong></div><button class="fs-btn-close fs-popover-close" type="button" data-fs-dismiss="popover" aria-label="Fechar contexto rápido"></button></div><div class="fs-popover-body"><p class="fs-popover-text">Popover pode explicar uma ação sem interromper o restante da página.</p></div></div>
|
|
70
|
-
<div class="fs-popover" id="pop-click"><div class="fs-popover-arrow" aria-hidden="true"></div><div class="fs-popover-header">Posicionado acima</div><div class="fs-popover-body">Use Escape ou clique fora para fechar.</div></div>
|
|
71
|
-
<div class="fs-popover" id="pop-bottom"><div class="fs-popover-arrow" aria-hidden="true"></div><div class="fs-popover-header">Posicionado abaixo</div><div class="fs-popover-body">A seta acompanha o placement.</div></div>
|
|
72
|
-
<div class="fs-popover" id="pop-manual"><div class="fs-popover-arrow" aria-hidden="true"></div><div class="fs-popover-header">Popover manual</div><div class="fs-popover-body">Este painel só responde à chamada explícita de <code>toggle()</code>.</div></div>
|
|
73
|
-
<div class="fs-popover" id="pop-focus"><div class="fs-popover-arrow" aria-hidden="true"></div><div class="fs-popover-header">Foco preservado</div><div class="fs-popover-body"><button type="button" class="fs-btn fs-btn-primary fs-btn-sm" data-fs-dismiss="popover">Fechar e voltar</button></div></div>
|
|
74
|
-
<div class="fs-popover fs-popover-hover-card" id="pop-hover"><div class="fs-popover-arrow" aria-hidden="true"></div><div class="fs-popover-body"><span class="fs-avatar fs-avatar-sm" aria-hidden="true">JS</span><div><strong>Fokus Styles</strong><p class="fs-u-m-0">Prévia contextual com hover e foco.</p></div></div></div>
|
|
75
|
-
<div class="fs-popover" id="pop-actions"><div class="fs-popover-arrow" aria-hidden="true"></div><div class="fs-popover-header">Confirmar alteração</div><div class="fs-popover-body">A ação será aplicada ao projeto atual.</div><div class="fs-popover-footer"><button type="button" class="fs-btn fs-btn-sm" data-fs-dismiss="popover">Cancelar</button><button type="button" class="fs-btn fs-btn-primary fs-btn-sm" data-fs-dismiss="popover">Confirmar</button></div></div>
|
|
76
|
-
<div class="fs-popover" id="pop-long"><div class="fs-popover-arrow" aria-hidden="true"></div><div class="fs-popover-header">Detalhes da falha</div><div class="fs-popover-body"><p class="fs-popover-text">Não foi possível concluir a operação porque o serviço remoto demorou além do limite esperado. Verifique sua conexão, revise os dados e tente novamente.</p></div></div>
|
|
77
|
-
<script src="../../dist/js/fokus.js"></script><script>
|
|
78
|
-
const page = document.querySelector(".demo-page"); const status = document.getElementById("demo-status"); const direction = document.getElementById("toggle-direction"); const manual = document.getElementById("manual-trigger"); manual.addEventListener("click", () => FokusStyles.Popover.getInstance(manual).toggle()); document.getElementById("reset-demo").addEventListener("click", () => location.reload()); direction.addEventListener("click", () => { const rtl = page.getAttribute("dir") !== "rtl"; page.setAttribute("dir", rtl ? "rtl" : "ltr"); direction.setAttribute("aria-pressed", String(rtl)); direction.textContent = rtl ? "Voltar para LTR" : "Testar RTL"; status.textContent = rtl ? "Direção RTL ativada." : "Direção LTR ativada."; }); document.querySelectorAll('[data-fs="popover"]').forEach((trigger) => { trigger.addEventListener("fs:popover:shown", () => { status.textContent = "Popover aberto."; }); trigger.addEventListener("fs:popover:hidden", () => { status.textContent = "Popover fechado."; }); });
|
|
79
|
-
</script>
|
|
80
|
-
</body>
|
|
81
|
-
</html>
|
|
@@ -1,69 +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 - Range/Slider</title>
|
|
7
|
-
|
|
8
|
-
<!-- STYLES IMPORT -->
|
|
9
|
-
<link rel="stylesheet" href="../../dist/css/fonts.css">
|
|
10
|
-
<link rel="stylesheet" href="../../dist/css/forms.css">
|
|
11
|
-
<link rel="stylesheet" href="../../dist/css/helpers.css">
|
|
12
|
-
<style>
|
|
13
|
-
.theme-panel {
|
|
14
|
-
padding: 24px;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
html[data-theme="dark"] .theme-panel {
|
|
18
|
-
color: var(--fs-color-text);
|
|
19
|
-
background-color: var(--fs-color-surface);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.range-row {
|
|
23
|
-
display: flex;
|
|
24
|
-
align-items: center;
|
|
25
|
-
gap: 12px;
|
|
26
|
-
max-width: 320px;
|
|
27
|
-
margin-bottom: 16px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.range-row .fs-form-range {
|
|
31
|
-
flex: 1;
|
|
32
|
-
}
|
|
33
|
-
</style>
|
|
34
|
-
<link rel="stylesheet" href="../assets/example-theme.css">
|
|
35
|
-
<script src="../assets/example-theme.js"></script>
|
|
36
|
-
</head>
|
|
37
|
-
<body>
|
|
38
|
-
|
|
39
|
-
<div class="theme-panel">
|
|
40
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Padrão</p>
|
|
41
|
-
<label for="volume" class="fs-form-label">Volume</label>
|
|
42
|
-
<input type="range" class="fs-form-range" id="volume" min="0" max="100" value="40">
|
|
43
|
-
|
|
44
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Com valor visível (data-fs="range")</p>
|
|
45
|
-
<div class="range-row">
|
|
46
|
-
<input type="range" class="fs-form-range" id="brilho" min="0" max="100" value="65"
|
|
47
|
-
aria-label="Brilho" data-fs="range" data-fs-target="#brilho-output">
|
|
48
|
-
<output class="fs-range-output" id="brilho-output" for="brilho">65</output>
|
|
49
|
-
</div>
|
|
50
|
-
|
|
51
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Com marcações (datalist)</p>
|
|
52
|
-
<input type="range" class="fs-form-range" min="0" max="100" step="25" value="50" list="marcas-claro" aria-label="Nível (com marcações)">
|
|
53
|
-
<datalist id="marcas-claro">
|
|
54
|
-
<option value="0"></option>
|
|
55
|
-
<option value="25"></option>
|
|
56
|
-
<option value="50"></option>
|
|
57
|
-
<option value="75"></option>
|
|
58
|
-
<option value="100"></option>
|
|
59
|
-
</datalist>
|
|
60
|
-
|
|
61
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Desabilitado</p>
|
|
62
|
-
<input type="range" class="fs-form-range" min="0" max="100" value="30" aria-label="Controle desabilitado" disabled>
|
|
63
|
-
</div>
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
<script src="../../dist/js/fokus.js"></script>
|
|
68
|
-
</body>
|
|
69
|
-
</html>
|
|
@@ -1,103 +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 - Rating / Stars</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
|
-
padding: 24px;
|
|
19
|
-
background-color: var(--fs-color-subtle);
|
|
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
|
-
<div class="theme-panel">
|
|
32
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Sem seleção</p>
|
|
33
|
-
<div class="fs-rating">
|
|
34
|
-
<input type="radio" name="r1" id="r1-5" value="5" class="fs-rating-input">
|
|
35
|
-
<label for="r1-5" class="fs-rating-star" aria-label="5 estrelas"><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></label>
|
|
36
|
-
<input type="radio" name="r1" id="r1-4" value="4" class="fs-rating-input">
|
|
37
|
-
<label for="r1-4" class="fs-rating-star" aria-label="4 estrelas"><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></label>
|
|
38
|
-
<input type="radio" name="r1" id="r1-3" value="3" class="fs-rating-input">
|
|
39
|
-
<label for="r1-3" class="fs-rating-star" aria-label="3 estrelas"><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></label>
|
|
40
|
-
<input type="radio" name="r1" id="r1-2" value="2" class="fs-rating-input">
|
|
41
|
-
<label for="r1-2" class="fs-rating-star" aria-label="2 estrelas"><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></label>
|
|
42
|
-
<input type="radio" name="r1" id="r1-1" value="1" class="fs-rating-input">
|
|
43
|
-
<label for="r1-1" class="fs-rating-star" aria-label="1 estrela"><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></label>
|
|
44
|
-
</div>
|
|
45
|
-
|
|
46
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">3 de 5 selecionado</p>
|
|
47
|
-
<div class="fs-rating">
|
|
48
|
-
<input type="radio" name="r2" id="r2-5" value="5" class="fs-rating-input">
|
|
49
|
-
<label for="r2-5" class="fs-rating-star" aria-label="5 estrelas"><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></label>
|
|
50
|
-
<input type="radio" name="r2" id="r2-4" value="4" class="fs-rating-input">
|
|
51
|
-
<label for="r2-4" class="fs-rating-star" aria-label="4 estrelas"><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></label>
|
|
52
|
-
<input type="radio" name="r2" id="r2-3" value="3" class="fs-rating-input" checked>
|
|
53
|
-
<label for="r2-3" class="fs-rating-star" aria-label="3 estrelas"><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></label>
|
|
54
|
-
<input type="radio" name="r2" id="r2-2" value="2" class="fs-rating-input">
|
|
55
|
-
<label for="r2-2" class="fs-rating-star" aria-label="2 estrelas"><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></label>
|
|
56
|
-
<input type="radio" name="r2" id="r2-1" value="1" class="fs-rating-input">
|
|
57
|
-
<label for="r2-1" class="fs-rating-star" aria-label="1 estrela"><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></label>
|
|
58
|
-
</div>
|
|
59
|
-
|
|
60
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Tamanhos (sm / padrão / lg)</p>
|
|
61
|
-
<div class="fs-rating fs-rating-sm">
|
|
62
|
-
<input type="radio" name="r3" id="r3-5" value="5" class="fs-rating-input">
|
|
63
|
-
<label for="r3-5" class="fs-rating-star" aria-label="5 estrelas"><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></label>
|
|
64
|
-
<input type="radio" name="r3" id="r3-4" value="4" class="fs-rating-input" checked>
|
|
65
|
-
<label for="r3-4" class="fs-rating-star" aria-label="4 estrelas"><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></label>
|
|
66
|
-
<input type="radio" name="r3" id="r3-3" value="3" class="fs-rating-input">
|
|
67
|
-
<label for="r3-3" class="fs-rating-star" aria-label="3 estrelas"><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></label>
|
|
68
|
-
<input type="radio" name="r3" id="r3-2" value="2" class="fs-rating-input">
|
|
69
|
-
<label for="r3-2" class="fs-rating-star" aria-label="2 estrelas"><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></label>
|
|
70
|
-
<input type="radio" name="r3" id="r3-1" value="1" class="fs-rating-input">
|
|
71
|
-
<label for="r3-1" class="fs-rating-star" aria-label="1 estrela"><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></label>
|
|
72
|
-
</div>
|
|
73
|
-
<div class="fs-rating fs-rating-lg">
|
|
74
|
-
<input type="radio" name="r4" id="r4-5" value="5" class="fs-rating-input" checked>
|
|
75
|
-
<label for="r4-5" class="fs-rating-star" aria-label="5 estrelas"><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></label>
|
|
76
|
-
<input type="radio" name="r4" id="r4-4" value="4" class="fs-rating-input">
|
|
77
|
-
<label for="r4-4" class="fs-rating-star" aria-label="4 estrelas"><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></label>
|
|
78
|
-
<input type="radio" name="r4" id="r4-3" value="3" class="fs-rating-input">
|
|
79
|
-
<label for="r4-3" class="fs-rating-star" aria-label="3 estrelas"><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></label>
|
|
80
|
-
<input type="radio" name="r4" id="r4-2" value="2" class="fs-rating-input">
|
|
81
|
-
<label for="r4-2" class="fs-rating-star" aria-label="2 estrelas"><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></label>
|
|
82
|
-
<input type="radio" name="r4" id="r4-1" value="1" class="fs-rating-input">
|
|
83
|
-
<label for="r4-1" class="fs-rating-star" aria-label="1 estrela"><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></label>
|
|
84
|
-
</div>
|
|
85
|
-
|
|
86
|
-
<p class="fs-u-fs-sm fs-u-fw-medium fs-u-mb-0">Desabilitado (2 de 5)</p>
|
|
87
|
-
<div class="fs-rating">
|
|
88
|
-
<input type="radio" name="r5" id="r5-5" value="5" class="fs-rating-input" disabled>
|
|
89
|
-
<label for="r5-5" class="fs-rating-star" aria-label="5 estrelas"><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></label>
|
|
90
|
-
<input type="radio" name="r5" id="r5-4" value="4" class="fs-rating-input" disabled>
|
|
91
|
-
<label for="r5-4" class="fs-rating-star" aria-label="4 estrelas"><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></label>
|
|
92
|
-
<input type="radio" name="r5" id="r5-3" value="3" class="fs-rating-input" disabled>
|
|
93
|
-
<label for="r5-3" class="fs-rating-star" aria-label="3 estrelas"><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></label>
|
|
94
|
-
<input type="radio" name="r5" id="r5-2" value="2" class="fs-rating-input" checked disabled>
|
|
95
|
-
<label for="r5-2" class="fs-rating-star" aria-label="2 estrelas"><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></label>
|
|
96
|
-
<input type="radio" name="r5" id="r5-1" value="1" class="fs-rating-input" disabled>
|
|
97
|
-
<label for="r5-1" class="fs-rating-star" aria-label="1 estrela"><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></label>
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
</body>
|
|
103
|
-
</html>
|