@pocketprep/ui-kit 3.4.10 → 3.4.12
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 +5805 -5707
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +8 -8
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/lib/components/Quiz/Question/PassageAndImage.vue +226 -0
- package/lib/components/Quiz/Question/PassageAndImageDropdown.vue +0 -2
- package/lib/components/Quiz/Question.vue +38 -172
- package/package.json +1 -1
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
v-if="showPassageAndImage"
|
|
4
|
+
v-breakpoint:questionEl="breakpoints"
|
|
5
|
+
class="uikit-question-passage-and-image"
|
|
6
|
+
>
|
|
7
|
+
<div
|
|
8
|
+
ref="uikit-question-passage-and-image__passage-and-image-title"
|
|
9
|
+
v-dark="isDarkMode"
|
|
10
|
+
class="uikit-question-passage-and-image__passage-and-image-title"
|
|
11
|
+
tabindex="-1"
|
|
12
|
+
>
|
|
13
|
+
{{ passageAndImageTitle }}
|
|
14
|
+
</div>
|
|
15
|
+
<div
|
|
16
|
+
v-if="question.passage"
|
|
17
|
+
class="uikit-question-passage-and-image__passage"
|
|
18
|
+
v-html="question.passage"
|
|
19
|
+
/>
|
|
20
|
+
<img
|
|
21
|
+
v-if="passageImageUrl"
|
|
22
|
+
v-dark="isDarkMode"
|
|
23
|
+
v-breakpoint:questionEl="breakpoints"
|
|
24
|
+
class="uikit-question-passage-and-image__image"
|
|
25
|
+
:src="passageImageUrl"
|
|
26
|
+
:alt="`${passageImageAlt}. Extended image description below.`"
|
|
27
|
+
>
|
|
28
|
+
<PocketButton
|
|
29
|
+
v-if="passageImageLongAlt"
|
|
30
|
+
v-breakpoint:questionEl="breakpoints"
|
|
31
|
+
type="tertiary-small"
|
|
32
|
+
class="uikit-question-passage-and-image__toggle-passage-image-description"
|
|
33
|
+
:is-dark-mode="isDarkMode"
|
|
34
|
+
:aria-expanded="showPassageImageLongAlt ? 'true' : 'false'"
|
|
35
|
+
@click.stop="emitTogglePassageImageLongAlt"
|
|
36
|
+
@mousedown.prevent
|
|
37
|
+
>
|
|
38
|
+
<span
|
|
39
|
+
class="uikit-question-passage-and-image__toggle-passage-image-description-text"
|
|
40
|
+
>
|
|
41
|
+
Image Description
|
|
42
|
+
</span>
|
|
43
|
+
<Icon
|
|
44
|
+
class="uikit-question-passage-and-image__toggle-passage-image-description-icon"
|
|
45
|
+
:class="{
|
|
46
|
+
'uikit-question-passage-and-image__toggle-passage-image-description-icon--up':
|
|
47
|
+
showPassageImageLongAlt,
|
|
48
|
+
}"
|
|
49
|
+
type="accordionArrow"
|
|
50
|
+
/>
|
|
51
|
+
</PocketButton>
|
|
52
|
+
<div
|
|
53
|
+
v-if="showPassageImageLongAlt"
|
|
54
|
+
ref="uikit-question-passage-and-image__passage-image-description"
|
|
55
|
+
v-dark="isDarkMode"
|
|
56
|
+
class="uikit-question-passage-and-image__passage-image-description"
|
|
57
|
+
tabindex="-1"
|
|
58
|
+
v-html="passageImageLongAlt"
|
|
59
|
+
/>
|
|
60
|
+
<PocketButton
|
|
61
|
+
class="uikit-question-passage-and-image__return-to-prompt"
|
|
62
|
+
@click="emitMoveFocusToPrompt"
|
|
63
|
+
>
|
|
64
|
+
Return to Question
|
|
65
|
+
</PocketButton>
|
|
66
|
+
</div>
|
|
67
|
+
</template>
|
|
68
|
+
|
|
69
|
+
<script lang="ts">
|
|
70
|
+
import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
|
|
71
|
+
import type { Study } from '@pocketprep/types'
|
|
72
|
+
import Icon from '../../Icons/Icon.vue'
|
|
73
|
+
import PocketButton from '../../Buttons/Button.vue'
|
|
74
|
+
import { breakpoint, dark } from '../../../directives'
|
|
75
|
+
import type { TQuestionPassageAndImageTitle, TBreakPointsObject } from './../question'
|
|
76
|
+
|
|
77
|
+
@Component({
|
|
78
|
+
components: {
|
|
79
|
+
Icon,
|
|
80
|
+
PocketButton,
|
|
81
|
+
},
|
|
82
|
+
directives: {
|
|
83
|
+
dark,
|
|
84
|
+
breakpoint,
|
|
85
|
+
},
|
|
86
|
+
})
|
|
87
|
+
export default class PassageAndImage extends Vue {
|
|
88
|
+
@Prop() question!: Study.Class.QuestionJSON
|
|
89
|
+
@Prop({ default: false }) showPassageImageLongAlt!: boolean
|
|
90
|
+
@Prop({ default: false }) showPassageAndImage!: boolean
|
|
91
|
+
@Prop({ default: null }) passageImageUrl!: string | null
|
|
92
|
+
@Prop({ default: '' }) passageImageLongAlt!: string | undefined
|
|
93
|
+
@Prop({ default: '' }) passageImageAlt!: string | undefined
|
|
94
|
+
@Prop({ default: 'Passage' }) passageAndImageTitle!: TQuestionPassageAndImageTitle
|
|
95
|
+
@Prop({ default: false }) isDarkMode!: boolean
|
|
96
|
+
@Prop({ default: null }) questionEl!: Element | null
|
|
97
|
+
@Prop({ default: {
|
|
98
|
+
'mobile': 767,
|
|
99
|
+
'tablet-portrait': 1023,
|
|
100
|
+
'tablet-landscape': 1439,
|
|
101
|
+
} }) breakpoints!: TBreakPointsObject
|
|
102
|
+
|
|
103
|
+
@Emit('emitTogglePassageImageLongAlt')
|
|
104
|
+
emitTogglePassageImageLongAlt () {
|
|
105
|
+
return
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@Emit('emitMoveFocusToPrompt')
|
|
109
|
+
emitMoveFocusToPrompt () {
|
|
110
|
+
return
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
</script>
|
|
114
|
+
|
|
115
|
+
<style lang="scss">
|
|
116
|
+
@import '../../../styles/colors';
|
|
117
|
+
@import '../../../styles/breakpoints';
|
|
118
|
+
|
|
119
|
+
.uikit-question-passage-and-image {
|
|
120
|
+
position: relative;
|
|
121
|
+
max-width: 566px;
|
|
122
|
+
padding: 133px 60px 72px 60px;
|
|
123
|
+
box-sizing: border-box;
|
|
124
|
+
line-height: 26px;
|
|
125
|
+
font-size: 16.5px;
|
|
126
|
+
font-weight: 400;
|
|
127
|
+
letter-spacing: -0.1px;
|
|
128
|
+
|
|
129
|
+
&--tablet-landscape {
|
|
130
|
+
padding: 115px 41px 42px 30px;
|
|
131
|
+
font-size: 16.5px;
|
|
132
|
+
line-height: 26px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
&__passage-and-image-title {
|
|
136
|
+
color: $ash;
|
|
137
|
+
margin-bottom: 24px;
|
|
138
|
+
font-weight: 600;
|
|
139
|
+
font-size: 17.5px;
|
|
140
|
+
line-height: 25px;
|
|
141
|
+
letter-spacing: -0.1px;
|
|
142
|
+
outline: none;
|
|
143
|
+
|
|
144
|
+
&--dark {
|
|
145
|
+
color: rgba($white, 0.86);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
&__passage {
|
|
150
|
+
line-height: 26px;
|
|
151
|
+
font-weight: 400;
|
|
152
|
+
font-size: 16.5px;
|
|
153
|
+
letter-spacing: -0.1px;
|
|
154
|
+
margin-bottom: 24px;
|
|
155
|
+
|
|
156
|
+
strong,
|
|
157
|
+
b {
|
|
158
|
+
font-weight: 600;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&__image {
|
|
163
|
+
display: block;
|
|
164
|
+
position: relative;
|
|
165
|
+
left: 50%;
|
|
166
|
+
transform: translateX(-50%);
|
|
167
|
+
width: calc(100% + 24px);
|
|
168
|
+
border: 1px solid $fog;
|
|
169
|
+
|
|
170
|
+
&--dark {
|
|
171
|
+
border: 1px solid $jet;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
&--tablet-landscape {
|
|
175
|
+
width: calc(100% + 16px);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
&__toggle-passage-image-description {
|
|
180
|
+
margin-top: 16px;
|
|
181
|
+
margin-bottom: 8px;
|
|
182
|
+
|
|
183
|
+
&--tablet-landscape {
|
|
184
|
+
margin-top: 12px;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
&__toggle-passage-image-description-text {
|
|
189
|
+
outline: none;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
&__toggle-passage-image-description-icon {
|
|
193
|
+
margin-left: 8px;
|
|
194
|
+
|
|
195
|
+
&--up {
|
|
196
|
+
transform: rotate(180deg);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
&__passage-image-description {
|
|
201
|
+
outline: none;
|
|
202
|
+
color: $ash;
|
|
203
|
+
font-size: 15px;
|
|
204
|
+
line-height: 22px;
|
|
205
|
+
font-weight: 500;
|
|
206
|
+
letter-spacing: -0.2px;
|
|
207
|
+
|
|
208
|
+
&--dark {
|
|
209
|
+
color: $fog;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
p {
|
|
213
|
+
margin: 0;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
&__return-to-prompt {
|
|
218
|
+
position: absolute;
|
|
219
|
+
left: -10000px;
|
|
220
|
+
|
|
221
|
+
&:focus {
|
|
222
|
+
left: auto;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
</style>
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
v-breakpoint:questionEl="breakpoints"
|
|
6
6
|
v-dark="isDarkMode"
|
|
7
7
|
class="uikit-question-passage-and-image-dropdown"
|
|
8
|
-
:class="{ 'uikit-question-passage-and-image-dropdown__passage-and-image-dropdown--review-mode': reviewMode }"
|
|
9
8
|
>
|
|
10
9
|
<div
|
|
11
10
|
v-dark="isDarkMode"
|
|
@@ -130,7 +129,6 @@ import type { TQuestionPassageAndImageTitle, TBreakPointsObject } from './../que
|
|
|
130
129
|
export default class PassageAndImageDropdown extends Vue {
|
|
131
130
|
@Prop({ default: false }) isDarkMode!: boolean
|
|
132
131
|
@Prop() question!: Study.Class.QuestionJSON
|
|
133
|
-
@Prop({ default: false }) reviewMode!: boolean
|
|
134
132
|
@Prop({ default: '' }) imageUrlPrefix!: string
|
|
135
133
|
@Prop({ default: null }) passageImageUrl!: string | null
|
|
136
134
|
@Prop({ default: false }) showPassageImageLongAlt!: boolean
|
|
@@ -78,6 +78,7 @@
|
|
|
78
78
|
v-if="question.passage || passageImageUrl"
|
|
79
79
|
ref="uikit-question__passage-and-image-dropdown"
|
|
80
80
|
class="uikit-question__passage-and-image-dropdown"
|
|
81
|
+
:class="{ 'uikit-question__passage-and-image-dropdown--review-mode': reviewMode }"
|
|
81
82
|
:question="question"
|
|
82
83
|
:question-el="questionEl"
|
|
83
84
|
:breakpoints="breakpoints"
|
|
@@ -310,66 +311,23 @@
|
|
|
310
311
|
'uikit-question__right-side--explanation': showExplanation && !showPaywall,
|
|
311
312
|
}"
|
|
312
313
|
>
|
|
313
|
-
<
|
|
314
|
+
<PassageAndImage
|
|
314
315
|
v-if="showPassageAndImage"
|
|
315
|
-
|
|
316
|
+
ref="uikit-question__passage-and-image"
|
|
316
317
|
class="uikit-question__passage-and-image"
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
/>
|
|
331
|
-
<img
|
|
332
|
-
v-if="passageImageUrl"
|
|
333
|
-
v-dark="isDarkMode"
|
|
334
|
-
v-breakpoint:questionEl="breakpoints"
|
|
335
|
-
class="uikit-question__image"
|
|
336
|
-
:src="passageImageUrl"
|
|
337
|
-
:alt="`${passageImageAlt}. Extended image description below.`"
|
|
338
|
-
>
|
|
339
|
-
<PocketButton
|
|
340
|
-
v-if="passageImageLongAlt"
|
|
341
|
-
v-breakpoint:questionEl="breakpoints"
|
|
342
|
-
type="tertiary-small"
|
|
343
|
-
class="uikit-question__toggle-passage-image-description"
|
|
344
|
-
:is-dark-mode="isDarkMode"
|
|
345
|
-
:aria-expanded="showPassageImageLongAlt ? 'true' : 'false'"
|
|
346
|
-
@click.stop="togglePassageImageLongAlt"
|
|
347
|
-
@mousedown.prevent
|
|
348
|
-
>
|
|
349
|
-
<span class="uikit-question__toggle-passage-image-description-text">Image Description</span>
|
|
350
|
-
<Icon
|
|
351
|
-
class="uikit-question__toggle-passage-image-description-icon"
|
|
352
|
-
:class="{
|
|
353
|
-
'uikit-question__toggle-passage-image-description-icon--up': showPassageImageLongAlt,
|
|
354
|
-
}"
|
|
355
|
-
type="accordionArrow"
|
|
356
|
-
/>
|
|
357
|
-
</PocketButton>
|
|
358
|
-
<div
|
|
359
|
-
v-if="showPassageImageLongAlt"
|
|
360
|
-
ref="uikit-question__passage-image-description"
|
|
361
|
-
v-dark="isDarkMode"
|
|
362
|
-
class="uikit-question__passage-image-description"
|
|
363
|
-
tabindex="-1"
|
|
364
|
-
v-html="passageImageLongAlt"
|
|
365
|
-
/>
|
|
366
|
-
<PocketButton
|
|
367
|
-
class="uikit-question__return-to-prompt"
|
|
368
|
-
@click="moveFocusToPrompt"
|
|
369
|
-
>
|
|
370
|
-
Return to Question
|
|
371
|
-
</PocketButton>
|
|
372
|
-
</div>
|
|
318
|
+
:question="question"
|
|
319
|
+
:show-passage-image-long-alt="showPassageImageLongAlt"
|
|
320
|
+
:show-passage-and-image="showPassageAndImage"
|
|
321
|
+
:passage-image-url="passageImageUrl"
|
|
322
|
+
:passage-image-long-alt="passageImageLongAlt"
|
|
323
|
+
:passage-image-alt="passageImageAlt"
|
|
324
|
+
:passage-and-image-title="passageAndImageTitle"
|
|
325
|
+
:is-dark-mode="isDarkMode"
|
|
326
|
+
:question-el="questionEl"
|
|
327
|
+
:breakpoints="breakpoints"
|
|
328
|
+
@emitTogglePassageImageLongAlt="togglePassageImageLongAlt"
|
|
329
|
+
@emitMoveFocusToPrompt="moveFocusToPrompt"
|
|
330
|
+
/>
|
|
373
331
|
<Explanation
|
|
374
332
|
ref="uikit-question__explanation"
|
|
375
333
|
class="uikit-question__explanation"
|
|
@@ -409,6 +367,7 @@ import Summary from '../Quiz/Question/Summary.vue'
|
|
|
409
367
|
import ChoicesContainer from '../Quiz/Question/ChoicesContainer.vue'
|
|
410
368
|
import StatsSummary from '../Quiz/Question/StatsSummary.vue'
|
|
411
369
|
import Explanation from '../Quiz/Question/Explanation.vue'
|
|
370
|
+
import PassageAndImage from '../Quiz/Question/PassageAndImage.vue'
|
|
412
371
|
import type { Study } from '@pocketprep/types'
|
|
413
372
|
import { breakpoint, dark } from '../../directives'
|
|
414
373
|
import { studyModes } from '../../utils'
|
|
@@ -428,6 +387,7 @@ import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TVi
|
|
|
428
387
|
ChoicesContainer,
|
|
429
388
|
StatsSummary,
|
|
430
389
|
Explanation,
|
|
390
|
+
PassageAndImage,
|
|
431
391
|
},
|
|
432
392
|
directives: {
|
|
433
393
|
breakpoint,
|
|
@@ -737,8 +697,14 @@ export default class Question extends Vue {
|
|
|
737
697
|
|
|
738
698
|
moveFocusToPassage () {
|
|
739
699
|
setTimeout(() => {
|
|
740
|
-
const
|
|
741
|
-
|
|
700
|
+
const passageAndImageComp =
|
|
701
|
+
this.$refs['uikit-question__passage-and-image'] as ComponentPublicInstance | undefined
|
|
702
|
+
const passageTitleEl =
|
|
703
|
+
// eslint-disable-next-line max-len
|
|
704
|
+
passageAndImageComp?.$refs['uikit-question-passage-and-image__passage-and-image-title'] as HTMLElement | undefined
|
|
705
|
+
if (passageTitleEl) {
|
|
706
|
+
passageTitleEl?.focus()
|
|
707
|
+
}
|
|
742
708
|
}, 0)
|
|
743
709
|
}
|
|
744
710
|
|
|
@@ -943,7 +909,11 @@ export default class Question extends Vue {
|
|
|
943
909
|
const mobileImgDropdownImgDescription =
|
|
944
910
|
// eslint-disable-next-line max-len
|
|
945
911
|
mobileLongAltComp?.$refs['uikit-question-passage-and-image-dropdown__img-dropdown-img-description'] as HTMLElement | undefined
|
|
946
|
-
|
|
912
|
+
|
|
913
|
+
const passageAndImageComp =
|
|
914
|
+
this.$refs['uikit-question__passage-and-image'] as ComponentPublicInstance | undefined
|
|
915
|
+
const longAlt =
|
|
916
|
+
passageAndImageComp?.$refs['uikit-question-passage-and-image__passage-image-description'] as Ref
|
|
947
917
|
|
|
948
918
|
// Checking offsetParent tells us which element is visible
|
|
949
919
|
if (mobileImgDropdownImgDescription?.offsetParent) {
|
|
@@ -970,7 +940,7 @@ export default class Question extends Vue {
|
|
|
970
940
|
if (choiceContainerComp) {
|
|
971
941
|
const dropdownExplanationComp =
|
|
972
942
|
// eslint-disable-next-line max-len
|
|
973
|
-
choiceContainerComp.$refs['uikit-question-choices-container__dropdown-explanation'] as
|
|
943
|
+
choiceContainerComp.$refs['uikit-question-choices-container__dropdown-explanation'] as ComponentPublicInstance[]
|
|
974
944
|
if (dropdownExplanationComp) {
|
|
975
945
|
const dropdownEl = dropdownExplanationComp[0] as ComponentPublicInstance | undefined
|
|
976
946
|
const mobileImgDropdownImgDescription =
|
|
@@ -1027,8 +997,12 @@ export default class Question extends Vue {
|
|
|
1027
997
|
}, 0)
|
|
1028
998
|
} else {
|
|
1029
999
|
setTimeout(() => {
|
|
1030
|
-
const
|
|
1031
|
-
|
|
1000
|
+
const explanationComp =
|
|
1001
|
+
this.$refs['uikit-question__explanation'] as ComponentPublicInstance | undefined
|
|
1002
|
+
const explanationTitle = explanationComp?.$refs['explanation'] as HTMLElement | undefined
|
|
1003
|
+
if (explanationTitle) {
|
|
1004
|
+
explanationTitle?.focus()
|
|
1005
|
+
}
|
|
1032
1006
|
}, 0)
|
|
1033
1007
|
}
|
|
1034
1008
|
}
|
|
@@ -1282,114 +1256,6 @@ export default class Question extends Vue {
|
|
|
1282
1256
|
}
|
|
1283
1257
|
}
|
|
1284
1258
|
|
|
1285
|
-
&__passage-and-image {
|
|
1286
|
-
position: relative;
|
|
1287
|
-
max-width: 566px;
|
|
1288
|
-
padding: 133px 60px 72px 60px;
|
|
1289
|
-
box-sizing: border-box;
|
|
1290
|
-
line-height: 26px;
|
|
1291
|
-
font-size: 16.5px;
|
|
1292
|
-
font-weight: 400;
|
|
1293
|
-
letter-spacing: -0.1px;
|
|
1294
|
-
|
|
1295
|
-
&--tablet-landscape {
|
|
1296
|
-
padding: 115px 41px 42px 30px;
|
|
1297
|
-
font-size: 16.5px;
|
|
1298
|
-
line-height: 26px;
|
|
1299
|
-
}
|
|
1300
|
-
}
|
|
1301
|
-
|
|
1302
|
-
&__passage-and-image-title {
|
|
1303
|
-
color: $ash;
|
|
1304
|
-
margin-bottom: 24px;
|
|
1305
|
-
font-weight: 600;
|
|
1306
|
-
font-size: 17.5px;
|
|
1307
|
-
line-height: 25px;
|
|
1308
|
-
letter-spacing: -0.1px;
|
|
1309
|
-
outline: none;
|
|
1310
|
-
|
|
1311
|
-
&--dark {
|
|
1312
|
-
color: rgba($white, 0.86);
|
|
1313
|
-
}
|
|
1314
|
-
}
|
|
1315
|
-
|
|
1316
|
-
&__passage {
|
|
1317
|
-
line-height: 26px;
|
|
1318
|
-
font-weight: 400;
|
|
1319
|
-
font-size: 16.5px;
|
|
1320
|
-
letter-spacing: -0.1px;
|
|
1321
|
-
margin-bottom: 24px;
|
|
1322
|
-
|
|
1323
|
-
strong,
|
|
1324
|
-
b {
|
|
1325
|
-
font-weight: 600;
|
|
1326
|
-
}
|
|
1327
|
-
}
|
|
1328
|
-
|
|
1329
|
-
&__image {
|
|
1330
|
-
display: block;
|
|
1331
|
-
position: relative;
|
|
1332
|
-
left: 50%;
|
|
1333
|
-
transform: translateX(-50%);
|
|
1334
|
-
width: calc(100% + 24px);
|
|
1335
|
-
border: 1px solid $fog;
|
|
1336
|
-
|
|
1337
|
-
&--dark {
|
|
1338
|
-
border: 1px solid $jet;
|
|
1339
|
-
}
|
|
1340
|
-
|
|
1341
|
-
&--tablet-landscape {
|
|
1342
|
-
width: calc(100% + 16px);
|
|
1343
|
-
}
|
|
1344
|
-
}
|
|
1345
|
-
|
|
1346
|
-
&__toggle-passage-image-description {
|
|
1347
|
-
margin-top: 16px;
|
|
1348
|
-
margin-bottom: 8px;
|
|
1349
|
-
|
|
1350
|
-
&--tablet-landscape {
|
|
1351
|
-
margin-top: 12px;
|
|
1352
|
-
}
|
|
1353
|
-
}
|
|
1354
|
-
|
|
1355
|
-
&__toggle-passage-image-description-text {
|
|
1356
|
-
outline: none;
|
|
1357
|
-
}
|
|
1358
|
-
|
|
1359
|
-
&__toggle-passage-image-description-icon {
|
|
1360
|
-
margin-left: 8px;
|
|
1361
|
-
|
|
1362
|
-
&--up {
|
|
1363
|
-
transform: rotate(180deg);
|
|
1364
|
-
}
|
|
1365
|
-
}
|
|
1366
|
-
|
|
1367
|
-
&__passage-image-description {
|
|
1368
|
-
outline: none;
|
|
1369
|
-
color: $ash;
|
|
1370
|
-
font-size: 15px;
|
|
1371
|
-
line-height: 22px;
|
|
1372
|
-
font-weight: 500;
|
|
1373
|
-
letter-spacing: -0.2px;
|
|
1374
|
-
|
|
1375
|
-
&--dark {
|
|
1376
|
-
color: $fog;
|
|
1377
|
-
}
|
|
1378
|
-
|
|
1379
|
-
p {
|
|
1380
|
-
margin: 0;
|
|
1381
|
-
}
|
|
1382
|
-
}
|
|
1383
|
-
|
|
1384
|
-
&__return-to-prompt {
|
|
1385
|
-
position: absolute;
|
|
1386
|
-
left: -10000px;
|
|
1387
|
-
|
|
1388
|
-
&:focus {
|
|
1389
|
-
left: auto;
|
|
1390
|
-
}
|
|
1391
|
-
}
|
|
1392
|
-
|
|
1393
1259
|
&__tag-mobile {
|
|
1394
1260
|
display: none;
|
|
1395
1261
|
position: absolute;
|