@pocketprep/ui-kit 3.4.73 → 3.4.75
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 +210 -208
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +7 -7
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/lib/components/Quiz/Question/MatrixChoicesContainer.vue +33 -17
- package/package.json +1 -1
|
@@ -21,21 +21,23 @@
|
|
|
21
21
|
}"
|
|
22
22
|
v-html="matrixColumnLabelsForRows"
|
|
23
23
|
/>
|
|
24
|
-
<div
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
question
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
24
|
+
<div class="uikit-question-matrix-choices-container__column-headers">
|
|
25
|
+
<div
|
|
26
|
+
class="uikit-question-matrix-choices-container__column-header"
|
|
27
|
+
:class="{
|
|
28
|
+
'uikit-question-matrix-choices-container__column-header--two-columns':
|
|
29
|
+
numberOfMatrixColumnLabels === 2,
|
|
30
|
+
'uikit-question-matrix-choices-container__column-header--radio-btn-three-columns':
|
|
31
|
+
question.type === 'Matrix Radio Button' && numberOfMatrixColumnLabels === 3
|
|
32
|
+
}"
|
|
33
|
+
lang="de"
|
|
34
|
+
v-for="(columnLabel, index) in matrixColumnLabels"
|
|
35
|
+
:key="index"
|
|
36
|
+
v-dark="isDarkMode"
|
|
37
|
+
v-breakpoint:questionEl="breakpoints"
|
|
38
|
+
v-html="columnLabel"
|
|
39
|
+
/>
|
|
40
|
+
</div>
|
|
39
41
|
</div>
|
|
40
42
|
<div
|
|
41
43
|
class="uikit-question-matrix-choices-container__choices-container"
|
|
@@ -477,6 +479,7 @@ export default class MatrixChoicesContainer extends Vue {
|
|
|
477
479
|
|
|
478
480
|
.uikit-question-matrix-choices-container {
|
|
479
481
|
width: 100%;
|
|
482
|
+
|
|
480
483
|
&__columns {
|
|
481
484
|
display: flex;
|
|
482
485
|
padding: 0px 1px 0px 14px;
|
|
@@ -516,6 +519,12 @@ export default class MatrixChoicesContainer extends Vue {
|
|
|
516
519
|
}
|
|
517
520
|
}
|
|
518
521
|
|
|
522
|
+
&__column-headers {
|
|
523
|
+
display: flex;
|
|
524
|
+
align-items: flex-end;
|
|
525
|
+
min-width: 214px;
|
|
526
|
+
}
|
|
527
|
+
|
|
519
528
|
&__column-header {
|
|
520
529
|
width: 56px;
|
|
521
530
|
hyphens: auto;
|
|
@@ -626,7 +635,6 @@ export default class MatrixChoicesContainer extends Vue {
|
|
|
626
635
|
|
|
627
636
|
&__choice-text {
|
|
628
637
|
width: 279px;
|
|
629
|
-
min-width: 279px;
|
|
630
638
|
min-height: fit-content;
|
|
631
639
|
color: $brand-black;
|
|
632
640
|
font-size: 16.5px;
|
|
@@ -669,9 +677,10 @@ export default class MatrixChoicesContainer extends Vue {
|
|
|
669
677
|
|
|
670
678
|
&__checkboxes {
|
|
671
679
|
display: flex;
|
|
680
|
+
min-width: 201px;
|
|
672
681
|
|
|
673
682
|
&--three-columns {
|
|
674
|
-
margin-left: -
|
|
683
|
+
margin-left: -8px;
|
|
675
684
|
}
|
|
676
685
|
}
|
|
677
686
|
|
|
@@ -699,6 +708,11 @@ export default class MatrixChoicesContainer extends Vue {
|
|
|
699
708
|
&:not(&:last-child) {
|
|
700
709
|
margin-right: 4px;
|
|
701
710
|
}
|
|
711
|
+
|
|
712
|
+
&:last-child {
|
|
713
|
+
width: 40px;
|
|
714
|
+
min-width: 40px;
|
|
715
|
+
}
|
|
702
716
|
}
|
|
703
717
|
|
|
704
718
|
.uikit-checkbox--disabled {
|
|
@@ -753,6 +767,8 @@ export default class MatrixChoicesContainer extends Vue {
|
|
|
753
767
|
}
|
|
754
768
|
|
|
755
769
|
&__radio-btns {
|
|
770
|
+
min-width: 201px;
|
|
771
|
+
|
|
756
772
|
&--three-columns {
|
|
757
773
|
position: relative;
|
|
758
774
|
left: 6px;
|