rio-assist-widget 0.1.27 → 0.1.32
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/README.md +62 -62
- package/dist/rio-assist.js +164 -104
- package/index.html +38 -38
- package/package.json +40 -40
- package/src/components/conversations-panel/conversations-panel.template.ts +27 -27
- package/src/components/fullscreen/fullscreen.styles.ts +75 -65
- package/src/components/fullscreen/fullscreen.template.ts +34 -0
- package/src/components/mini-panel/mini-panel.styles.ts +52 -51
- package/src/components/mini-panel/mini-panel.template.ts +167 -189
- package/src/components/rio-assist/rio-assist.styles.ts +101 -92
- package/src/components/rio-assist/rio-assist.template.ts +106 -75
- package/src/components/rio-assist/rio-assist.ts +375 -348
- package/src/main.ts +15 -15
- package/src/playground.ts +31 -31
- package/src/services/rioWebsocket.ts +142 -142
package/index.html
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
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>Rio Insight Widget</title>
|
|
7
|
-
<style>
|
|
8
|
-
body {
|
|
9
|
-
min-height: 100vh;
|
|
10
|
-
margin: 0;
|
|
11
|
-
font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
|
12
|
-
background: #f5f7fa;
|
|
13
|
-
color: #1f2f36;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.page {
|
|
17
|
-
padding: 24px;
|
|
18
|
-
max-width: 720px;
|
|
19
|
-
}
|
|
20
|
-
</style>
|
|
21
|
-
</head>
|
|
22
|
-
<body>
|
|
23
|
-
<div class="page">
|
|
24
|
-
<p>Abra o botão flutuante no canto inferior direito para testar.</p>
|
|
25
|
-
</div>
|
|
26
|
-
|
|
27
|
-
<rio-assist-widget
|
|
28
|
-
data-title="Rio Insight"
|
|
29
|
-
data-button-label="Rio Insight"
|
|
30
|
-
data-placeholder="Pergunte alguma coisa"
|
|
31
|
-
data-suggestions="Resumo da Frota|Frota Disponível|Chamados Abertos|Parados + Causas|Aguardando Peças|Principais Gargalos|Tempo por Concessionária|Tempo de Ciclo|Preventiva x Corretiva"
|
|
32
|
-
data-accent-color="#c02267"
|
|
33
|
-
></rio-assist-widget>
|
|
34
|
-
|
|
35
|
-
<script type="module" src="/src/main.ts"></script>
|
|
36
|
-
<script type="module" src="/src/playground.ts"></script>
|
|
37
|
-
</body>
|
|
38
|
-
</html>
|
|
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>Rio Insight Widget</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
min-height: 100vh;
|
|
10
|
+
margin: 0;
|
|
11
|
+
font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
|
12
|
+
background: #f5f7fa;
|
|
13
|
+
color: #1f2f36;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.page {
|
|
17
|
+
padding: 24px;
|
|
18
|
+
max-width: 720px;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
21
|
+
</head>
|
|
22
|
+
<body>
|
|
23
|
+
<div class="page">
|
|
24
|
+
<p>Abra o botão flutuante no canto inferior direito para testar.</p>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<rio-assist-widget
|
|
28
|
+
data-title="Rio Insight"
|
|
29
|
+
data-button-label="Rio Insight"
|
|
30
|
+
data-placeholder="Pergunte alguma coisa"
|
|
31
|
+
data-suggestions="Resumo da Frota|Frota Disponível|Chamados Abertos|Parados + Causas|Aguardando Peças|Principais Gargalos|Tempo por Concessionária|Tempo de Ciclo|Preventiva x Corretiva"
|
|
32
|
+
data-accent-color="#c02267"
|
|
33
|
+
></rio-assist-widget>
|
|
34
|
+
|
|
35
|
+
<script type="module" src="/src/main.ts"></script>
|
|
36
|
+
<script type="module" src="/src/playground.ts"></script>
|
|
37
|
+
</body>
|
|
38
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "rio-assist-widget",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "Web Component do painel lateral Rio Insight, pronto para ser embutido em qualquer projeto.",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"dev": "vite",
|
|
8
|
-
"build": "vite build",
|
|
9
|
-
"preview": "vite preview"
|
|
10
|
-
},
|
|
11
|
-
"keywords": [
|
|
12
|
-
"web component",
|
|
13
|
-
"widget",
|
|
14
|
-
"rio insight",
|
|
15
|
-
"ai agent"
|
|
16
|
-
],
|
|
17
|
-
"author": "",
|
|
18
|
-
"license": "MIT",
|
|
19
|
-
"files": [
|
|
20
|
-
"dist",
|
|
21
|
-
"src",
|
|
22
|
-
"index.html",
|
|
23
|
-
"vite.config.ts",
|
|
24
|
-
"tsconfig.json",
|
|
25
|
-
"tsconfig.node.json",
|
|
26
|
-
"README.md"
|
|
27
|
-
],
|
|
28
|
-
"dependencies": {
|
|
29
|
-
"dompurify": "^3.3.0",
|
|
30
|
-
"lit": "^3.1.2",
|
|
31
|
-
"markdown-it": "^14.1.0",
|
|
32
|
-
"markdown-it-task-lists": "^2.1.1"
|
|
33
|
-
},
|
|
34
|
-
"devDependencies": {
|
|
35
|
-
"@types/dompurify": "^3.0.5",
|
|
36
|
-
"playwright-chromium": "^1.56.1",
|
|
37
|
-
"typescript": "^5.4.5",
|
|
38
|
-
"vite": "^5.2.0"
|
|
39
|
-
}
|
|
40
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "rio-assist-widget",
|
|
3
|
+
"version": "0.1.32",
|
|
4
|
+
"description": "Web Component do painel lateral Rio Insight, pronto para ser embutido em qualquer projeto.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"preview": "vite preview"
|
|
10
|
+
},
|
|
11
|
+
"keywords": [
|
|
12
|
+
"web component",
|
|
13
|
+
"widget",
|
|
14
|
+
"rio insight",
|
|
15
|
+
"ai agent"
|
|
16
|
+
],
|
|
17
|
+
"author": "",
|
|
18
|
+
"license": "MIT",
|
|
19
|
+
"files": [
|
|
20
|
+
"dist",
|
|
21
|
+
"src",
|
|
22
|
+
"index.html",
|
|
23
|
+
"vite.config.ts",
|
|
24
|
+
"tsconfig.json",
|
|
25
|
+
"tsconfig.node.json",
|
|
26
|
+
"README.md"
|
|
27
|
+
],
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"dompurify": "^3.3.0",
|
|
30
|
+
"lit": "^3.1.2",
|
|
31
|
+
"markdown-it": "^14.1.0",
|
|
32
|
+
"markdown-it-task-lists": "^2.1.1"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@types/dompurify": "^3.0.5",
|
|
36
|
+
"playwright-chromium": "^1.56.1",
|
|
37
|
+
"typescript": "^5.4.5",
|
|
38
|
+
"vite": "^5.2.0"
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -119,18 +119,18 @@ const renderConversationSurface = (
|
|
|
119
119
|
})}
|
|
120
120
|
@click=${(event: Event) => event.stopPropagation()}
|
|
121
121
|
>
|
|
122
|
-
${/* Renomear ocultado enquanto backend nao suporta */ false
|
|
123
|
-
? html`
|
|
124
|
-
<button
|
|
125
|
-
type="button"
|
|
126
|
-
@click=${() =>
|
|
127
|
-
component.handleConversationAction('rename', conversation.id)}
|
|
128
|
-
>
|
|
129
|
-
<img src=${editIconUrl} alt="" aria-hidden="true" />
|
|
130
|
-
Renomear
|
|
131
|
-
</button>
|
|
132
|
-
`
|
|
133
|
-
: null}
|
|
122
|
+
${/* Renomear ocultado enquanto backend nao suporta */ false
|
|
123
|
+
? html`
|
|
124
|
+
<button
|
|
125
|
+
type="button"
|
|
126
|
+
@click=${() =>
|
|
127
|
+
component.handleConversationAction('rename', conversation.id)}
|
|
128
|
+
>
|
|
129
|
+
<img src=${editIconUrl} alt="" aria-hidden="true" />
|
|
130
|
+
Renomear
|
|
131
|
+
</button>
|
|
132
|
+
`
|
|
133
|
+
: null}
|
|
134
134
|
<button
|
|
135
135
|
type="button"
|
|
136
136
|
@click=${() =>
|
|
@@ -172,21 +172,21 @@ const renderConversationSurface = (
|
|
|
172
172
|
</div>
|
|
173
173
|
|
|
174
174
|
<div
|
|
175
|
-
class=${classMap({
|
|
176
|
-
'conversation-list-wrapper': true,
|
|
177
|
-
'conversation-list-wrapper--sidebar': isSidebar,
|
|
178
|
-
})}
|
|
179
|
-
>
|
|
180
|
-
${component.conversationHistoryLoading
|
|
181
|
-
? html`<div class="conversation-loading">Carregando conversas...</div>`
|
|
182
|
-
: null}
|
|
183
|
-
${component.conversationHistoryError
|
|
184
|
-
? html`<div class="conversation-error">${component.conversationHistoryError}</div>`
|
|
185
|
-
: null}
|
|
186
|
-
${list}
|
|
187
|
-
${isSidebar
|
|
188
|
-
? html`
|
|
189
|
-
<div
|
|
175
|
+
class=${classMap({
|
|
176
|
+
'conversation-list-wrapper': true,
|
|
177
|
+
'conversation-list-wrapper--sidebar': isSidebar,
|
|
178
|
+
})}
|
|
179
|
+
>
|
|
180
|
+
${component.conversationHistoryLoading
|
|
181
|
+
? html`<div class="conversation-loading">Carregando conversas...</div>`
|
|
182
|
+
: null}
|
|
183
|
+
${component.conversationHistoryError
|
|
184
|
+
? html`<div class="conversation-error">${component.conversationHistoryError}</div>`
|
|
185
|
+
: null}
|
|
186
|
+
${list}
|
|
187
|
+
${isSidebar
|
|
188
|
+
? html`
|
|
189
|
+
<div
|
|
190
190
|
class=${classMap({
|
|
191
191
|
'conversation-scrollbar': true,
|
|
192
192
|
'conversation-scrollbar--visible':
|
|
@@ -133,15 +133,15 @@ export const fullscreenStyles = css`
|
|
|
133
133
|
line-height: 1;
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
.fullscreen-header__actions {
|
|
137
|
-
display: inline-flex;
|
|
138
|
-
align-items: center;
|
|
139
|
-
gap: 12px;
|
|
140
|
-
justify-self: end;
|
|
141
|
-
height: 100%;
|
|
142
|
-
justify-content: flex-end;
|
|
143
|
-
padding-right: 4px;
|
|
144
|
-
}
|
|
136
|
+
.fullscreen-header__actions {
|
|
137
|
+
display: inline-flex;
|
|
138
|
+
align-items: center;
|
|
139
|
+
gap: 12px;
|
|
140
|
+
justify-self: end;
|
|
141
|
+
height: 100%;
|
|
142
|
+
justify-content: flex-end;
|
|
143
|
+
padding-right: 4px;
|
|
144
|
+
}
|
|
145
145
|
|
|
146
146
|
.fullscreen-header__icon {
|
|
147
147
|
width: 24px;
|
|
@@ -154,75 +154,85 @@ export const fullscreenStyles = css`
|
|
|
154
154
|
padding: 0;
|
|
155
155
|
}
|
|
156
156
|
|
|
157
|
-
.fullscreen-header__icon img {
|
|
158
|
-
width: 24px;
|
|
159
|
-
height: 24px;
|
|
160
|
-
}
|
|
161
|
-
|
|
157
|
+
.fullscreen-header__icon img {
|
|
158
|
+
width: 24px;
|
|
159
|
+
height: 24px;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
162
|
.fullscreen-exit-inline {
|
|
163
163
|
position: absolute;
|
|
164
|
-
top:
|
|
164
|
+
top: 64px;
|
|
165
165
|
right: 14px;
|
|
166
166
|
width: 28px;
|
|
167
167
|
height: 28px;
|
|
168
168
|
border: none;
|
|
169
169
|
background: transparent;
|
|
170
|
-
padding: 0;
|
|
171
|
-
display: grid;
|
|
172
|
-
place-items: center;
|
|
173
|
-
cursor: pointer;
|
|
174
|
-
z-index: 1;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
.fullscreen-exit-inline img {
|
|
178
|
-
width: 28px;
|
|
179
|
-
height: 28px;
|
|
180
|
-
}
|
|
181
|
-
|
|
170
|
+
padding: 0;
|
|
171
|
+
display: grid;
|
|
172
|
+
place-items: center;
|
|
173
|
+
cursor: pointer;
|
|
174
|
+
z-index: 1;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.fullscreen-exit-inline img {
|
|
178
|
+
width: 28px;
|
|
179
|
+
height: 28px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
182
|
.fullscreen-grid {
|
|
183
183
|
flex: 1;
|
|
184
184
|
display: grid;
|
|
185
185
|
grid-template-columns: 300px minmax(0, 1fr);
|
|
186
186
|
min-height: 0;
|
|
187
|
-
background: linear-gradient(180deg, #eef3f6 0%, #fff 100%);
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
.fullscreen-chat {
|
|
191
|
-
background: #fff;
|
|
192
|
-
display: flex;
|
|
193
|
-
flex-direction: column;
|
|
194
|
-
align-items: center;
|
|
195
|
-
padding: 36px clamp(24px, 4vw, 56px) 18px;
|
|
196
|
-
width: 100%;
|
|
197
|
-
flex: 1;
|
|
198
|
-
min-height: 0;
|
|
199
|
-
overflow: hidden;
|
|
200
|
-
max-width: 1400px;
|
|
201
|
-
margin: 0 auto;
|
|
202
|
-
box-sizing: border-box;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.fullscreen-chat .panel-body {
|
|
206
|
-
max-width: 920px;
|
|
207
|
-
width: 100%;
|
|
208
|
-
padding: 12px clamp(20px, 3vw, 44px) 12px;
|
|
209
|
-
margin: 0 auto;
|
|
210
|
-
box-sizing: border-box;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
.fullscreen-chat .panel-footer {
|
|
214
|
-
max-width: 640px;
|
|
215
|
-
width: 100%;
|
|
216
|
-
padding: 0 clamp(16px, 3vw, 32px);
|
|
217
|
-
box-sizing: border-box;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.fullscreen-chat form {
|
|
221
|
-
max-width: none;
|
|
187
|
+
background: linear-gradient(180deg, #eef3f6 0%, #fff 100%);
|
|
222
188
|
}
|
|
223
189
|
|
|
224
|
-
.fullscreen-
|
|
225
|
-
|
|
226
|
-
|
|
190
|
+
.fullscreen-utility-bar {
|
|
191
|
+
position: absolute;
|
|
192
|
+
top: 60px;
|
|
193
|
+
right: 52px;
|
|
194
|
+
display: inline-flex;
|
|
195
|
+
align-items: center;
|
|
196
|
+
gap: 12px;
|
|
197
|
+
z-index: 2;
|
|
227
198
|
}
|
|
199
|
+
|
|
200
|
+
.fullscreen-chat {
|
|
201
|
+
background: #fff;
|
|
202
|
+
display: flex;
|
|
203
|
+
flex-direction: column;
|
|
204
|
+
align-items: center;
|
|
205
|
+
padding: 36px clamp(24px, 4vw, 56px) 18px;
|
|
206
|
+
width: 100%;
|
|
207
|
+
flex: 1;
|
|
208
|
+
min-height: 0;
|
|
209
|
+
overflow: hidden;
|
|
210
|
+
max-width: 1400px;
|
|
211
|
+
margin: 0 auto;
|
|
212
|
+
box-sizing: border-box;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.fullscreen-chat .panel-body {
|
|
216
|
+
max-width: 920px;
|
|
217
|
+
width: 100%;
|
|
218
|
+
padding: 12px clamp(20px, 3vw, 44px) 12px;
|
|
219
|
+
margin: 0 auto;
|
|
220
|
+
box-sizing: border-box;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.fullscreen-chat .panel-footer {
|
|
224
|
+
max-width: 640px;
|
|
225
|
+
width: 100%;
|
|
226
|
+
padding: 0 clamp(16px, 3vw, 32px);
|
|
227
|
+
box-sizing: border-box;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.fullscreen-chat form {
|
|
231
|
+
max-width: none;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.fullscreen-chat .panel-content {
|
|
235
|
+
padding-right: clamp(12px, 2vw, 24px);
|
|
236
|
+
box-sizing: border-box;
|
|
237
|
+
}
|
|
228
238
|
`;
|
|
@@ -8,6 +8,7 @@ const homeIconUrl = new URL('../../assets/icons/homeIcon.png', import.meta.url).
|
|
|
8
8
|
const checkFrameIconUrl = new URL('../../assets/icons/checkFrame.png', import.meta.url).href;
|
|
9
9
|
const infoFrameIconUrl = new URL('../../assets/icons/infoFrame.png', import.meta.url).href;
|
|
10
10
|
const profileFrameIconUrl = new URL('../../assets/icons/profileFrame.png', import.meta.url).href;
|
|
11
|
+
const plusFileSelectionUrl = new URL('../../assets/icons/plusFileSelection.png', import.meta.url).href;
|
|
11
12
|
const resizeScreenIconUrl = new URL('../../assets/icons/resizeScreen.png', import.meta.url).href;
|
|
12
13
|
|
|
13
14
|
const defaultHeaderActions: HeaderActionConfig[] = [
|
|
@@ -112,6 +113,39 @@ export const renderFullscreen = (component: RioAssistWidget) => {
|
|
|
112
113
|
<img src=${resizeScreenIconUrl} alt="" aria-hidden="true" />
|
|
113
114
|
</button>
|
|
114
115
|
|
|
116
|
+
<div class="fullscreen-utility-bar">
|
|
117
|
+
<button
|
|
118
|
+
type="button"
|
|
119
|
+
class="short-answer-toggle short-answer-toggle--header"
|
|
120
|
+
role="switch"
|
|
121
|
+
aria-checked=${component.shortAnswerEnabled}
|
|
122
|
+
@click=${() => component.toggleShortAnswers()}
|
|
123
|
+
>
|
|
124
|
+
<span
|
|
125
|
+
class=${classMap({
|
|
126
|
+
'short-answer-toggle__track': true,
|
|
127
|
+
'short-answer-toggle__track--on': component.shortAnswerEnabled,
|
|
128
|
+
})}
|
|
129
|
+
aria-hidden="true"
|
|
130
|
+
>
|
|
131
|
+
<span class="short-answer-toggle__thumb"></span>
|
|
132
|
+
</span>
|
|
133
|
+
<span class="short-answer-toggle__label">Respostas rápidas</span>
|
|
134
|
+
</button>
|
|
135
|
+
${component.hasActiveConversation
|
|
136
|
+
? html`
|
|
137
|
+
<button
|
|
138
|
+
type="button"
|
|
139
|
+
class="fullscreen-header__icon"
|
|
140
|
+
aria-label="Iniciar nova conversa"
|
|
141
|
+
@click=${() => component.handleCreateConversation()}
|
|
142
|
+
>
|
|
143
|
+
<img src=${plusFileSelectionUrl} alt="" aria-hidden="true" />
|
|
144
|
+
</button>
|
|
145
|
+
`
|
|
146
|
+
: null}
|
|
147
|
+
</div>
|
|
148
|
+
|
|
115
149
|
<div class="fullscreen-grid">
|
|
116
150
|
${renderConversationsPanel(component, { variant: 'sidebar' })}
|
|
117
151
|
<div class="fullscreen-chat">
|
|
@@ -81,7 +81,7 @@ export const miniPanelStyles = css`
|
|
|
81
81
|
|
|
82
82
|
.panel-header__icons {
|
|
83
83
|
display: inline-flex;
|
|
84
|
-
gap:
|
|
84
|
+
gap: 10px;
|
|
85
85
|
align-items: center;
|
|
86
86
|
padding-right: 12px;
|
|
87
87
|
}
|
|
@@ -105,11 +105,11 @@ export const miniPanelStyles = css`
|
|
|
105
105
|
height: 28px;
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
.panel-body {
|
|
109
|
-
flex: 1;
|
|
110
|
-
padding: 48px 32px 12px;
|
|
111
|
-
display: flex;
|
|
112
|
-
flex-direction: column;
|
|
108
|
+
.panel-body {
|
|
109
|
+
flex: 1;
|
|
110
|
+
padding: 48px 32px 12px;
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-direction: column;
|
|
113
113
|
align-items: center;
|
|
114
114
|
gap: 16px;
|
|
115
115
|
max-width: 520px;
|
|
@@ -310,31 +310,31 @@ export const miniPanelStyles = css`
|
|
|
310
310
|
justify-content: center;
|
|
311
311
|
}
|
|
312
312
|
|
|
313
|
-
.suggestions-wrapper {
|
|
314
|
-
width: 100%;
|
|
315
|
-
text-align: center;
|
|
316
|
-
margin-bottom: 6px;
|
|
317
|
-
}
|
|
318
|
-
|
|
313
|
+
.suggestions-wrapper {
|
|
314
|
+
width: 100%;
|
|
315
|
+
text-align: center;
|
|
316
|
+
margin-bottom: 6px;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
319
|
.short-answer-toggle {
|
|
320
320
|
display: inline-flex;
|
|
321
321
|
align-items: center;
|
|
322
322
|
gap: 12px;
|
|
323
|
-
border:
|
|
324
|
-
background:
|
|
323
|
+
border: none;
|
|
324
|
+
background: transparent;
|
|
325
325
|
color: #1f2f36;
|
|
326
326
|
border-radius: 999px;
|
|
327
327
|
padding: 8px 12px 8px 10px;
|
|
328
328
|
font-weight: 600;
|
|
329
|
-
box-shadow:
|
|
330
|
-
transition:
|
|
329
|
+
box-shadow: none;
|
|
330
|
+
transition: color 0.2s ease;
|
|
331
331
|
}
|
|
332
|
-
|
|
333
|
-
.short-answer-toggle:focus-visible {
|
|
334
|
-
outline: 2px solid var(--accent-color, #008b9a);
|
|
335
|
-
outline-offset: 2px;
|
|
336
|
-
}
|
|
337
|
-
|
|
332
|
+
|
|
333
|
+
.short-answer-toggle:focus-visible {
|
|
334
|
+
outline: 2px solid var(--accent-color, #008b9a);
|
|
335
|
+
outline-offset: 2px;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
338
|
.short-answer-toggle__track {
|
|
339
339
|
width: 44px;
|
|
340
340
|
height: 24px;
|
|
@@ -343,35 +343,36 @@ export const miniPanelStyles = css`
|
|
|
343
343
|
position: relative;
|
|
344
344
|
transition: background-color 0.2s ease;
|
|
345
345
|
}
|
|
346
|
-
|
|
347
|
-
.short-answer-toggle__track--on {
|
|
348
|
-
background: #008b9a;
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
.short-answer-toggle__thumb {
|
|
352
|
-
position: absolute;
|
|
353
|
-
top: 3px;
|
|
354
|
-
left: 4px;
|
|
355
|
-
width: 18px;
|
|
356
|
-
height: 18px;
|
|
357
|
-
border-radius: 50%;
|
|
358
|
-
background: #fff;
|
|
359
|
-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
|
|
360
|
-
transition: transform 0.2s ease;
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
.short-answer-toggle__track--on .short-answer-toggle__thumb {
|
|
364
|
-
transform: translateX(18px);
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
.short-answer-toggle__label {
|
|
368
|
-
font-size: 14px;
|
|
369
|
-
white-space: nowrap;
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
.short-answer-toggle--
|
|
373
|
-
|
|
374
|
-
|
|
346
|
+
|
|
347
|
+
.short-answer-toggle__track--on {
|
|
348
|
+
background: #008b9a;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.short-answer-toggle__thumb {
|
|
352
|
+
position: absolute;
|
|
353
|
+
top: 3px;
|
|
354
|
+
left: 4px;
|
|
355
|
+
width: 18px;
|
|
356
|
+
height: 18px;
|
|
357
|
+
border-radius: 50%;
|
|
358
|
+
background: #fff;
|
|
359
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
|
|
360
|
+
transition: transform 0.2s ease;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.short-answer-toggle__track--on .short-answer-toggle__thumb {
|
|
364
|
+
transform: translateX(18px);
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.short-answer-toggle__label {
|
|
368
|
+
font-size: 14px;
|
|
369
|
+
white-space: nowrap;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.short-answer-toggle--header {
|
|
373
|
+
padding: 6px 10px 6px 8px;
|
|
374
|
+
font-size: 13px;
|
|
375
|
+
}
|
|
375
376
|
|
|
376
377
|
.suggestions-label {
|
|
377
378
|
text-align: center;
|