@pocketprep/ui-kit 3.4.4 → 3.4.5
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/dist/@pocketprep/ui-kit.js +8941 -8818
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +9 -9
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/lib/components/Quiz/Question/DropdownExplanation.vue +253 -0
- package/lib/components/Quiz/Question.vue +34 -81
- package/package.json +1 -1
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
v-breakpoint:questionEl="breakpoints"
|
|
4
|
+
ref="uikit-question-dropdown-explanation"
|
|
5
|
+
class="uikit-question-dropdown-explanation__dropdown-explanation"
|
|
6
|
+
:class="{
|
|
7
|
+
'uikit-question-dropdown-explanation__dropdown-explanation--show-stats': globalMetrics
|
|
8
|
+
}"
|
|
9
|
+
>
|
|
10
|
+
<div
|
|
11
|
+
v-dark="isDarkMode"
|
|
12
|
+
class="uikit-question-dropdown-explanation__dropdown-explanation-text"
|
|
13
|
+
v-html="question.explanation"
|
|
14
|
+
/>
|
|
15
|
+
<img
|
|
16
|
+
v-if="explanationImageUrl"
|
|
17
|
+
v-dark="isDarkMode"
|
|
18
|
+
class="uikit-question-dropdown-explanation__dropdown-explanation-image"
|
|
19
|
+
:src="explanationImageUrl"
|
|
20
|
+
:alt="`${explanationImageAlt}. Extended image description below.`"
|
|
21
|
+
>
|
|
22
|
+
<PocketButton
|
|
23
|
+
v-if="explanationImageLongAlt"
|
|
24
|
+
v-breakpoint:questionEl="breakpoints"
|
|
25
|
+
type="tertiary-small"
|
|
26
|
+
class="uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description"
|
|
27
|
+
:class="{
|
|
28
|
+
'uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--open':
|
|
29
|
+
showExplanationImageLongAlt,
|
|
30
|
+
'uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--no-reference':
|
|
31
|
+
!reference || hideReferences,
|
|
32
|
+
}"
|
|
33
|
+
:is-dark-mode="isDarkMode"
|
|
34
|
+
:aria-expanded="showExplanationImageLongAlt ? 'true' : 'false'"
|
|
35
|
+
@click="emitToggleExplanationImageLongAlt"
|
|
36
|
+
@mousedown.prevent
|
|
37
|
+
>
|
|
38
|
+
<span class="uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description-text">
|
|
39
|
+
Image Description
|
|
40
|
+
</span>
|
|
41
|
+
<Icon
|
|
42
|
+
class="uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description-icon"
|
|
43
|
+
:class="{
|
|
44
|
+
'uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description-icon--up':
|
|
45
|
+
showExplanationImageLongAlt,
|
|
46
|
+
}"
|
|
47
|
+
type="accordionArrow"
|
|
48
|
+
/>
|
|
49
|
+
</PocketButton>
|
|
50
|
+
<div
|
|
51
|
+
v-if="showExplanationImageLongAlt"
|
|
52
|
+
ref="uikit-question-dropdown-explanation__dropdown-explanation-img-description"
|
|
53
|
+
v-dark="isDarkMode"
|
|
54
|
+
v-breakpoint:questionEl="breakpoints"
|
|
55
|
+
class="uikit-question-dropdown-explanation__dropdown-explanation-img-description"
|
|
56
|
+
tabindex="-1"
|
|
57
|
+
v-html="explanationImageLongAlt"
|
|
58
|
+
/>
|
|
59
|
+
<div
|
|
60
|
+
v-if="reference && !hideReferences"
|
|
61
|
+
v-dark="isDarkMode"
|
|
62
|
+
class="uikit-question-dropdown-explanation__dropdown-reference"
|
|
63
|
+
>
|
|
64
|
+
<span class="uikit-question-dropdown-explanation__dropdown-reference-label">Reference: </span>
|
|
65
|
+
<div v-html="reference" />
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</template>
|
|
69
|
+
|
|
70
|
+
<script lang="ts">
|
|
71
|
+
import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
|
|
72
|
+
import type { Study } from '@pocketprep/types'
|
|
73
|
+
import Icon from '../../Icons/Icon.vue'
|
|
74
|
+
import PocketButton from '../../Buttons/Button.vue'
|
|
75
|
+
import { breakpoint, dark } from '../../../directives'
|
|
76
|
+
import type { TBreakPointsObject, TChoice, TChoiceKey } from './../question'
|
|
77
|
+
|
|
78
|
+
@Component({
|
|
79
|
+
components: {
|
|
80
|
+
Icon,
|
|
81
|
+
PocketButton,
|
|
82
|
+
},
|
|
83
|
+
directives: {
|
|
84
|
+
dark,
|
|
85
|
+
breakpoint,
|
|
86
|
+
},
|
|
87
|
+
})
|
|
88
|
+
export default class DropdownExplanation extends Vue {
|
|
89
|
+
@Prop() question!: Study.Class.QuestionJSON
|
|
90
|
+
@Prop({ default: [] }) answerKeys!: TChoiceKey[]
|
|
91
|
+
@Prop() choice!: TChoice
|
|
92
|
+
@Prop({ default: null }) globalMetrics!: Study.Class.GlobalQuestionMetricJSON | null
|
|
93
|
+
@Prop({ default: false }) showAnswers!: boolean
|
|
94
|
+
@Prop({ default: false }) isMCR!: boolean
|
|
95
|
+
@Prop({ default: false }) showExplanation!: boolean
|
|
96
|
+
@Prop({ default: null }) explanationImageUrl!: string | null
|
|
97
|
+
@Prop({ default: undefined }) explanationImageAlt!: string | undefined
|
|
98
|
+
@Prop({ default: undefined }) explanationImageLongAlt!: string | undefined
|
|
99
|
+
@Prop({ default: undefined }) reference!: string | undefined
|
|
100
|
+
@Prop({ default: false }) hideReferences!: boolean
|
|
101
|
+
@Prop({ default: false }) isDarkMode!: boolean
|
|
102
|
+
@Prop({ default: null }) questionEl!: Element | null
|
|
103
|
+
@Prop({ default: {
|
|
104
|
+
'mobile': 767,
|
|
105
|
+
'tablet-portrait': 1023,
|
|
106
|
+
'tablet-landscape': 1439,
|
|
107
|
+
} }) breakpoints!: TBreakPointsObject
|
|
108
|
+
|
|
109
|
+
showExplanationImageLongAlt = false
|
|
110
|
+
|
|
111
|
+
@Emit('emitToggleExplanationImageLongAlt')
|
|
112
|
+
emitToggleExplanationImageLongAlt () {
|
|
113
|
+
this.showExplanationImageLongAlt = !this.showExplanationImageLongAlt
|
|
114
|
+
return
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
</script>
|
|
118
|
+
|
|
119
|
+
<style lang="scss">
|
|
120
|
+
@import '../../../styles/colors';
|
|
121
|
+
@import '../../../styles/breakpoints';
|
|
122
|
+
|
|
123
|
+
.uikit-question-dropdown-explanation {
|
|
124
|
+
&__dropdown-explanation {
|
|
125
|
+
display: none;
|
|
126
|
+
|
|
127
|
+
&--tablet-portrait {
|
|
128
|
+
display: block;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
&--show-stats {
|
|
132
|
+
padding-bottom: 23px;
|
|
133
|
+
padding-right: 66px;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
&__reference-label,
|
|
138
|
+
&__dropdown-reference-label {
|
|
139
|
+
font-weight: 600;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
&__toggle-dropdown-explanation-img-description {
|
|
143
|
+
margin-top: 12px;
|
|
144
|
+
margin-bottom: 20px;
|
|
145
|
+
|
|
146
|
+
&--open {
|
|
147
|
+
margin-bottom: 6px;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
&--tablet-portrait {
|
|
151
|
+
&.uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--no-reference {
|
|
152
|
+
margin-bottom: 4px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
&.uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--open {
|
|
156
|
+
margin-bottom: 6px;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
&--mobile {
|
|
161
|
+
margin-top: 16px;
|
|
162
|
+
margin-bottom: 16px;
|
|
163
|
+
|
|
164
|
+
&.uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--no-reference {
|
|
165
|
+
margin-bottom: 7px;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
&.uikit-question-dropdown-explanation__toggle-dropdown-explanation-img-description--open {
|
|
169
|
+
margin-bottom: 4px;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
&__toggle-dropdown-explanation-img-description-text {
|
|
175
|
+
outline: none;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
&__toggle-dropdown-explanation-img-description-icon {
|
|
179
|
+
margin-left: 8px;
|
|
180
|
+
|
|
181
|
+
&--up {
|
|
182
|
+
transform: rotate(180deg);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
&__dropdown-explanation-text {
|
|
187
|
+
font-size: 16px;
|
|
188
|
+
letter-spacing: -0.1px;
|
|
189
|
+
line-height: 24px;
|
|
190
|
+
font-weight: 400;
|
|
191
|
+
padding-bottom: 6px;
|
|
192
|
+
|
|
193
|
+
p {
|
|
194
|
+
margin: 10px 0;
|
|
195
|
+
|
|
196
|
+
&:first-child {
|
|
197
|
+
margin: 0;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
&__dropdown-explanation-img-description {
|
|
203
|
+
outline: none;
|
|
204
|
+
color: $ash;
|
|
205
|
+
font-size: 15px;
|
|
206
|
+
line-height: 22px;
|
|
207
|
+
margin-bottom: 20px;
|
|
208
|
+
|
|
209
|
+
&--dark {
|
|
210
|
+
color: $fog;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
&--mobile {
|
|
214
|
+
margin-bottom: 16px;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
p {
|
|
218
|
+
margin: 0;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
&__dropdown-explanation-image {
|
|
223
|
+
display: block;
|
|
224
|
+
box-sizing: border-box;
|
|
225
|
+
width: 100%;
|
|
226
|
+
border: 1px solid $fog;
|
|
227
|
+
|
|
228
|
+
&--dark {
|
|
229
|
+
border: 1px solid $jet;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
&__dropdown-reference {
|
|
234
|
+
padding-top: 24px;
|
|
235
|
+
border-top: 1px solid $fog;
|
|
236
|
+
font-size: 15px;
|
|
237
|
+
letter-spacing: -0.1px;
|
|
238
|
+
line-height: 22px;
|
|
239
|
+
font-weight: 400;
|
|
240
|
+
word-break: break-word;
|
|
241
|
+
margin-bottom: -7px;
|
|
242
|
+
|
|
243
|
+
&--dark {
|
|
244
|
+
color: $white;
|
|
245
|
+
border-top-color: rgba($fog, 0.28);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
p {
|
|
249
|
+
margin: 6px 0 8pt 0;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
</style>
|
|
@@ -290,72 +290,28 @@
|
|
|
290
290
|
type="accordionArrow"
|
|
291
291
|
/>
|
|
292
292
|
</PocketButton>
|
|
293
|
-
<
|
|
293
|
+
<DropdownExplanation
|
|
294
294
|
v-if="!isMCR && showAnswers && answerKeys.includes(choice.key) && showExplanation"
|
|
295
|
-
|
|
295
|
+
ref="uikit-question__dropdown-explanation"
|
|
296
296
|
class="uikit-question__dropdown-explanation"
|
|
297
|
-
:
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
v-breakpoint:questionEl="breakpoints"
|
|
316
|
-
type="tertiary-small"
|
|
317
|
-
class="uikit-question__toggle-dropdown-explanation-img-description"
|
|
318
|
-
:class="{
|
|
319
|
-
'uikit-question__toggle-dropdown-explanation-img-description--open':
|
|
320
|
-
showExplanationImageLongAlt,
|
|
321
|
-
'uikit-question__toggle-dropdown-explanation-img-description--no-reference':
|
|
322
|
-
!reference || hideReferences,
|
|
323
|
-
}"
|
|
324
|
-
:is-dark-mode="isDarkMode"
|
|
325
|
-
:aria-expanded="showExplanationImageLongAlt ? 'true' : 'false'"
|
|
326
|
-
@click.stop="toggleExplanationImageLongAlt"
|
|
327
|
-
@mousedown.prevent
|
|
328
|
-
>
|
|
329
|
-
<span class="uikit-question__toggle-dropdown-explanation-img-description-text">
|
|
330
|
-
Image Description
|
|
331
|
-
</span>
|
|
332
|
-
<Icon
|
|
333
|
-
class="uikit-question__toggle-dropdown-explanation-img-description-icon"
|
|
334
|
-
:class="{
|
|
335
|
-
'uikit-question__toggle-dropdown-explanation-img-description-icon--up':
|
|
336
|
-
showExplanationImageLongAlt,
|
|
337
|
-
}"
|
|
338
|
-
type="accordionArrow"
|
|
339
|
-
/>
|
|
340
|
-
</PocketButton>
|
|
341
|
-
<div
|
|
342
|
-
v-if="showExplanationImageLongAlt"
|
|
343
|
-
ref="uikit-question__dropdown-explanation-img-description"
|
|
344
|
-
v-dark="isDarkMode"
|
|
345
|
-
v-breakpoint:questionEl="breakpoints"
|
|
346
|
-
class="uikit-question__dropdown-explanation-img-description"
|
|
347
|
-
tabindex="-1"
|
|
348
|
-
v-html="explanationImageLongAlt"
|
|
349
|
-
/>
|
|
350
|
-
<div
|
|
351
|
-
v-if="reference && !hideReferences"
|
|
352
|
-
v-dark="isDarkMode"
|
|
353
|
-
class="uikit-question__dropdown-reference"
|
|
354
|
-
>
|
|
355
|
-
<span class="uikit-question__dropdown-reference-label">Reference: </span>
|
|
356
|
-
<div v-html="reference" />
|
|
357
|
-
</div>
|
|
358
|
-
</div>
|
|
297
|
+
:question="question"
|
|
298
|
+
:answer-keys="answerKeys"
|
|
299
|
+
:choice="choice"
|
|
300
|
+
:global-metrics="globalMetrics"
|
|
301
|
+
:show-answers="showAnswers"
|
|
302
|
+
:is-MCR="isMCR"
|
|
303
|
+
:show-explanation="showExplanation"
|
|
304
|
+
:show-explanation-image-long-alt="showExplanationImageLongAlt"
|
|
305
|
+
:explanation-image-url="explanationImageUrl"
|
|
306
|
+
:explanation-image-alt="explanationImageAlt"
|
|
307
|
+
:explanation-image-long-alt="explanationImageLongAlt"
|
|
308
|
+
:reference="reference"
|
|
309
|
+
:hide-references="hideReferences"
|
|
310
|
+
:is-dark-mode="isDarkMode"
|
|
311
|
+
:question-el="questionEl"
|
|
312
|
+
:breakpoints="breakpoints"
|
|
313
|
+
@emitToggleExplanationImageLongAlt="toggleExplanationImageLongAlt"
|
|
314
|
+
/>
|
|
359
315
|
</div>
|
|
360
316
|
<template v-if="!globalMetrics">
|
|
361
317
|
<div
|
|
@@ -817,6 +773,7 @@ import Table from '../Tables/Table.vue'
|
|
|
817
773
|
import OverflowTooltip from '../Tooltips/OverflowTooltip.vue'
|
|
818
774
|
import QuestionContext from '../Quiz/Question/QuestionContext.vue'
|
|
819
775
|
import PassageAndImageDropdown from '../Quiz/Question/PassageAndImageDropdown.vue'
|
|
776
|
+
import DropdownExplanation from '../Quiz/Question/DropdownExplanation.vue'
|
|
820
777
|
import Paywall from '../Quiz/Question/Paywall.vue'
|
|
821
778
|
import type { Study } from '@pocketprep/types'
|
|
822
779
|
import { breakpoint, dark } from '../../directives'
|
|
@@ -832,6 +789,7 @@ import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TVi
|
|
|
832
789
|
QuestionContext,
|
|
833
790
|
PassageAndImageDropdown,
|
|
834
791
|
Paywall,
|
|
792
|
+
DropdownExplanation,
|
|
835
793
|
},
|
|
836
794
|
directives: {
|
|
837
795
|
breakpoint,
|
|
@@ -1337,7 +1295,6 @@ export default class Question extends Vue {
|
|
|
1337
1295
|
const mobileImgDropdownImgDescription =
|
|
1338
1296
|
// eslint-disable-next-line max-len
|
|
1339
1297
|
mobileLongAltComp?.$refs['uikit-question-passage-and-image-dropdown__img-dropdown-img-description'] as HTMLElement | undefined
|
|
1340
|
-
|
|
1341
1298
|
const longAlt = this.$refs['uikit-question__passage-image-description'] as Ref
|
|
1342
1299
|
|
|
1343
1300
|
// Checking offsetParent tells us which element is visible
|
|
@@ -1356,14 +1313,22 @@ export default class Question extends Vue {
|
|
|
1356
1313
|
if (this.showExplanationImageLongAlt) {
|
|
1357
1314
|
setTimeout(() => {
|
|
1358
1315
|
const mcrLongAlt = this.$refs['uikit-question__summary-dropdown-explanation-img-description'] as Ref
|
|
1359
|
-
|
|
1316
|
+
|
|
1317
|
+
const mobileDropdownExplanation =
|
|
1318
|
+
this.$refs['uikit-question__dropdown-explanation'] as Ref[]
|
|
1319
|
+
const mobileDropdownExplanationComp =
|
|
1320
|
+
mobileDropdownExplanation[0] as ComponentPublicInstance | undefined
|
|
1321
|
+
const mobileImgDropdownImgDescription =
|
|
1322
|
+
// eslint-disable-next-line max-len
|
|
1323
|
+
mobileDropdownExplanationComp?.$refs['uikit-question-dropdown-explanation__dropdown-explanation-img-description'] as HTMLElement | undefined
|
|
1324
|
+
|
|
1360
1325
|
const longAlt = this.$refs['uikit-question__explanation-img-description'] as Ref
|
|
1361
1326
|
|
|
1362
1327
|
// Checking offsetParent tells us which element is visible
|
|
1363
1328
|
if (mcrLongAlt?.offsetParent) {
|
|
1364
1329
|
mcrLongAlt.focus()
|
|
1365
|
-
} else if (
|
|
1366
|
-
|
|
1330
|
+
} else if (mobileImgDropdownImgDescription?.offsetParent) {
|
|
1331
|
+
mobileImgDropdownImgDescription.focus()
|
|
1367
1332
|
} else if (longAlt?.offsetParent) {
|
|
1368
1333
|
longAlt.focus()
|
|
1369
1334
|
}
|
|
@@ -1702,14 +1667,13 @@ export default class Question extends Vue {
|
|
|
1702
1667
|
|
|
1703
1668
|
&__toggle-passage-image-description-text,
|
|
1704
1669
|
&__toggle-explanation-img-description-text,
|
|
1705
|
-
&__toggle-dropdown-explanation-img-description-text,
|
|
1706
1670
|
&__toggle-summary-dropdown-explanation-img-description-text {
|
|
1707
1671
|
outline: none;
|
|
1708
1672
|
}
|
|
1709
1673
|
|
|
1710
1674
|
&__toggle-passage-image-description-icon,
|
|
1711
1675
|
&__toggle-explanation-img-description-icon,
|
|
1712
|
-
|
|
1676
|
+
|
|
1713
1677
|
&__toggle-summary-dropdown-explanation-img-description-icon {
|
|
1714
1678
|
margin-left: 8px;
|
|
1715
1679
|
|
|
@@ -1921,7 +1885,6 @@ export default class Question extends Vue {
|
|
|
1921
1885
|
}
|
|
1922
1886
|
|
|
1923
1887
|
&__reference-label,
|
|
1924
|
-
&__dropdown-reference-label,
|
|
1925
1888
|
&__summary-dropdown-reference-label {
|
|
1926
1889
|
font-weight: 600;
|
|
1927
1890
|
}
|
|
@@ -2497,7 +2460,6 @@ export default class Question extends Vue {
|
|
|
2497
2460
|
}
|
|
2498
2461
|
}
|
|
2499
2462
|
|
|
2500
|
-
&__dropdown-explanation,
|
|
2501
2463
|
&__summary-dropdown-explanation {
|
|
2502
2464
|
display: none;
|
|
2503
2465
|
|
|
@@ -2506,7 +2468,6 @@ export default class Question extends Vue {
|
|
|
2506
2468
|
}
|
|
2507
2469
|
}
|
|
2508
2470
|
|
|
2509
|
-
&__dropdown-explanation-text,
|
|
2510
2471
|
&__summary-dropdown-explanation-text {
|
|
2511
2472
|
font-size: 16px;
|
|
2512
2473
|
letter-spacing: -0.1px;
|
|
@@ -2523,7 +2484,6 @@ export default class Question extends Vue {
|
|
|
2523
2484
|
}
|
|
2524
2485
|
}
|
|
2525
2486
|
|
|
2526
|
-
&__dropdown-explanation-image,
|
|
2527
2487
|
&__summary-dropdown-explanation-image {
|
|
2528
2488
|
display: block;
|
|
2529
2489
|
box-sizing: border-box;
|
|
@@ -2535,7 +2495,6 @@ export default class Question extends Vue {
|
|
|
2535
2495
|
}
|
|
2536
2496
|
}
|
|
2537
2497
|
|
|
2538
|
-
&__toggle-dropdown-explanation-img-description,
|
|
2539
2498
|
&__toggle-summary-dropdown-explanation-img-description {
|
|
2540
2499
|
margin-top: 12px;
|
|
2541
2500
|
margin-bottom: 20px;
|
|
@@ -2545,12 +2504,10 @@ export default class Question extends Vue {
|
|
|
2545
2504
|
}
|
|
2546
2505
|
|
|
2547
2506
|
&--tablet-portrait {
|
|
2548
|
-
&.uikit-question__toggle-dropdown-explanation-img-description--no-reference,
|
|
2549
2507
|
&.uikit-question__toggle-summary-dropdown-explanation-img-description--no-reference {
|
|
2550
2508
|
margin-bottom: 4px;
|
|
2551
2509
|
}
|
|
2552
2510
|
|
|
2553
|
-
&.uikit-question__toggle-dropdown-explanation-img-description--open,
|
|
2554
2511
|
&.uikit-question__toggle-summary-dropdown-explanation-img-description--open {
|
|
2555
2512
|
margin-bottom: 6px;
|
|
2556
2513
|
}
|
|
@@ -2560,19 +2517,16 @@ export default class Question extends Vue {
|
|
|
2560
2517
|
margin-top: 16px;
|
|
2561
2518
|
margin-bottom: 16px;
|
|
2562
2519
|
|
|
2563
|
-
&.uikit-question__toggle-dropdown-explanation-img-description--no-reference,
|
|
2564
2520
|
&.uikit-question__toggle-summary-dropdown-explanation-img-description--no-reference {
|
|
2565
2521
|
margin-bottom: 7px;
|
|
2566
2522
|
}
|
|
2567
2523
|
|
|
2568
|
-
&.uikit-question__toggle-dropdown-explanation-img-description--open,
|
|
2569
2524
|
&.uikit-question__toggle-summary-dropdown-explanation-img-description--open {
|
|
2570
2525
|
margin-bottom: 4px;
|
|
2571
2526
|
}
|
|
2572
2527
|
}
|
|
2573
2528
|
}
|
|
2574
2529
|
|
|
2575
|
-
&__dropdown-explanation-img-description,
|
|
2576
2530
|
&__summary-dropdown-explanation-img-description {
|
|
2577
2531
|
outline: none;
|
|
2578
2532
|
color: $ash;
|
|
@@ -2593,7 +2547,6 @@ export default class Question extends Vue {
|
|
|
2593
2547
|
}
|
|
2594
2548
|
}
|
|
2595
2549
|
|
|
2596
|
-
&__dropdown-reference,
|
|
2597
2550
|
&__summary-dropdown-reference {
|
|
2598
2551
|
padding-top: 24px;
|
|
2599
2552
|
border-top: 1px solid $fog;
|