@inseefr/lunatic 0.4.1-v2 → 0.4.3-v2

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.
Files changed (93) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +25 -25
  3. package/lib/components/button/button.scss +24 -24
  4. package/lib/components/commons/components/combo-box/combo-box.scss +218 -218
  5. package/lib/components/commons/components/create-lunatic-component/create-lunatic-component.js +10 -10
  6. package/lib/components/commons/components/dragger/dragger.scss +7 -7
  7. package/lib/components/commons/components/fab/fab.scss +32 -32
  8. package/lib/components/commons/components/missing/missing.scss +30 -30
  9. package/lib/components/commons/components/variable-status/variable-status.scss +39 -39
  10. package/lib/components/commons/icons/lunatic-icon.scss +4 -4
  11. package/lib/components/commons/use-on-handle-change.js +1 -2
  12. package/lib/components/datepicker/datepicker.scss +1 -1
  13. package/lib/components/declarations/declarations.scss +36 -36
  14. package/lib/components/dropdown/dropdown.scss +41 -41
  15. package/lib/components/index.scss +139 -139
  16. package/lib/components/input/input.scss +31 -31
  17. package/lib/components/loop/roster-for-loop/roster.scss +42 -42
  18. package/lib/components/modal-controls/modal-controls.scss +63 -63
  19. package/lib/components/radio/radio.scss +59 -59
  20. package/lib/components/sequence/sequence.scss +10 -10
  21. package/lib/components/suggester/default-style.scss +125 -125
  22. package/lib/components/suggester/find-best-label/find-best-label.js +5 -5
  23. package/lib/components/suggester-loader-widget/widget.scss +176 -176
  24. package/lib/components/switch/switch.scss +47 -47
  25. package/lib/components/table/components/table.scss +26 -26
  26. package/lib/components/textarea/textarea.scss +8 -8
  27. package/lib/i18n/build-dictionary.js +16 -16
  28. package/lib/stories/Introduction.stories.mdx +114 -114
  29. package/lib/stories/checkboxOne/source.json +36 -36
  30. package/lib/stories/custom-mui/textarea-mui.js +0 -5
  31. package/lib/stories/dropdown/data.json +16 -16
  32. package/lib/stories/dropdown/source.json +122 -122
  33. package/lib/stories/filter-description/source-options.json +81 -81
  34. package/lib/stories/filter-description/source.json +11 -11
  35. package/lib/stories/input/data.json +5 -5
  36. package/lib/stories/input/source.json +28 -28
  37. package/lib/stories/input-number/input-number.stories.js +35 -0
  38. package/lib/stories/input-number/source.json +37 -0
  39. package/lib/stories/pairwise/block/block.json +3 -3
  40. package/lib/stories/pairwise/links/data.json +12 -12
  41. package/lib/stories/pairwise/links/links.json +141 -141
  42. package/lib/stories/{questionnaires/test → paste-questionnaire}/source.json +6290 -6290
  43. package/lib/stories/{questionnaires/test → paste-questionnaire}/test.stories.js +7 -3
  44. package/lib/stories/questionnaires/logement/data.json +2691 -2691
  45. package/lib/stories/questionnaires/logement/source-sequence.json +34181 -34181
  46. package/lib/stories/questionnaires/logement/source.json +34191 -34191
  47. package/lib/stories/questionnaires/simpsons/source.json +6290 -6290
  48. package/lib/stories/questionnaires-test/V2_DeclarationsSimples.json +848 -0
  49. package/lib/stories/questionnaires-test/V2_MinMaxSum_Boucles.json +509 -0
  50. package/lib/stories/questionnaires-test/V2_QuestSimple_Boucles.json +4091 -0
  51. package/lib/stories/questionnaires-test/V2_TCMRallyeGames.json +2892 -0
  52. package/lib/stories/{questionnaires → questionnaires-test}/controls/V2_ControlesNonNum_horsBoucle_PasPageFin.json +451 -451
  53. package/lib/stories/{questionnaires → questionnaires-test}/controls/V2_ControlesNum_horsBoucle_PasPageFin.json +1688 -1688
  54. package/lib/stories/questionnaires-test/controls/V2_Controles_BouclesLiees2_PasPageFin.json +709 -0
  55. package/lib/stories/questionnaires-test/controls/V2_Controles_BouclesLiees_PasPageFin.json +368 -0
  56. package/lib/stories/{questionnaires → questionnaires-test}/controls/controls.stories.js +6 -3
  57. package/lib/stories/{questionnaires/samples/sample.json → questionnaires-test/test-dylan.json} +430 -430
  58. package/lib/stories/questionnaires-test/test.stories.js +45 -32
  59. package/lib/stories/radio/source.json +36 -36
  60. package/lib/stories/roster-for-loop/source.json +114 -114
  61. package/lib/stories/suggester/source.json +234 -234
  62. package/lib/stories/switch/README.md +31 -31
  63. package/lib/stories/switch/data-forced.json +48 -48
  64. package/lib/stories/switch/data.json +80 -80
  65. package/lib/stories/table/data-roster.json +1 -1
  66. package/lib/stories/table/data.json +1 -1
  67. package/lib/stories/table/source-roster.json +504 -504
  68. package/lib/stories/table/source.json +19 -19
  69. package/lib/stories/utils/custom-lunatic.scss +28 -28
  70. package/lib/stories/utils/orchestrator.js +24 -8
  71. package/lib/stories/utils/waiting/waiting.scss +21 -21
  72. package/lib/use-lunatic/actions.js +30 -16
  73. package/lib/use-lunatic/commons/create-map-pages.js +10 -10
  74. package/lib/use-lunatic/commons/execute-expression/create-execute-expression.js +16 -16
  75. package/lib/use-lunatic/commons/fill-components/fill-component-expressions.js +21 -21
  76. package/lib/use-lunatic/commons/get-components-from-state.js +9 -2
  77. package/lib/use-lunatic/commons/get-data.js +90 -0
  78. package/lib/use-lunatic/reducer/commons/resize-array-variable.js +7 -7
  79. package/lib/use-lunatic/reducer/reduce-go-next-page.js +20 -11
  80. package/lib/{stories/questionnaires/samples/samples.stories.js → use-lunatic/reducer/reduce-go-to-page.js} +34 -47
  81. package/lib/use-lunatic/reducer/reduce-handle-change/reduce-cleaning.js +2 -1
  82. package/lib/use-lunatic/reducer/reduce-handle-change/reduce-handle-change.js +15 -15
  83. package/lib/use-lunatic/reducer/reduce-on-init.js +8 -7
  84. package/lib/use-lunatic/reducer/reducer.js +8 -3
  85. package/lib/use-lunatic/use-lunatic.js +16 -26
  86. package/lib/utils/store-tools/auto-load.js +2 -2
  87. package/lib/utils/suggester-workers/append-to-index/create-append-task.js +2 -2
  88. package/package.json +159 -159
  89. package/lib/index.js.map +0 -1
  90. package/lib/stories/questionnaires/controls/V2_Controles_BouclesLiees2_PasPageFin.json +0 -775
  91. package/lib/stories/questionnaires/controls/V2_Controles_BouclesLiees_PasPageFin.json +0 -412
  92. package/lib/stories/questionnaires-test/sources.json +0 -203
  93. package/lib/use-lunatic/reducer/commons/Insee.code-workspace +0 -47
@@ -1,32 +1,32 @@
1
- .lunatic-fab {
2
- width: 32px;
3
- height: 32px;
4
- border-radius: 50%;
5
- margin: 0;
6
- padding: 0;
7
- outline: inherit;
8
- border: none;
9
- background-color: royalblue;
10
- box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%),
11
- 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
12
-
13
- &:hover {
14
- cursor: pointer;
15
- background-color: navy;
16
- transition: background-color 1s;
17
- }
18
-
19
- &.mini {
20
- width: 18px;
21
- height: 18px;
22
- }
23
-
24
- &:focus {
25
- border: solid 1px black;
26
- }
27
-
28
- &:disabled {
29
- cursor: default;
30
- background-color: darkgray;
31
- }
32
- }
1
+ .lunatic-fab {
2
+ width: 32px;
3
+ height: 32px;
4
+ border-radius: 50%;
5
+ margin: 0;
6
+ padding: 0;
7
+ outline: inherit;
8
+ border: none;
9
+ background-color: royalblue;
10
+ box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%),
11
+ 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
12
+
13
+ &:hover {
14
+ cursor: pointer;
15
+ background-color: navy;
16
+ transition: background-color 1s;
17
+ }
18
+
19
+ &.mini {
20
+ width: 18px;
21
+ height: 18px;
22
+ }
23
+
24
+ &:focus {
25
+ border: solid 1px black;
26
+ }
27
+
28
+ &:disabled {
29
+ cursor: default;
30
+ background-color: darkgray;
31
+ }
32
+ }
@@ -1,30 +1,30 @@
1
- .lunatic-component {
2
- .missing-buttons {
3
- margin-top: 1em;
4
- .button-lunatic {
5
- width: 4em;
6
- font-size: 1em;
7
- font-weight: normal;
8
- }
9
- .missing-button {
10
- .button-lunatic {
11
- background-color: var(--color-very-very-light);
12
- color: var(--color-primary-dark);
13
- &:hover {
14
- background-color: white;
15
- color: var(--color-primary-main);
16
- }
17
- }
18
- }
19
- .missing-button-active {
20
- .button-lunatic {
21
- background-color: var(--color-primary-dark);
22
- color: var(--color-very-very-light);
23
- &:hover {
24
- background-color: var(--color-primary-main);
25
- color: white;
26
- }
27
- }
28
- }
29
- }
30
- }
1
+ .lunatic-component {
2
+ .missing-buttons {
3
+ margin-top: 1em;
4
+ .button-lunatic {
5
+ width: 4em;
6
+ font-size: 1em;
7
+ font-weight: normal;
8
+ }
9
+ .missing-button {
10
+ .button-lunatic {
11
+ background-color: var(--color-very-very-light);
12
+ color: var(--color-primary-dark);
13
+ &:hover {
14
+ background-color: white;
15
+ color: var(--color-primary-main);
16
+ }
17
+ }
18
+ }
19
+ .missing-button-active {
20
+ .button-lunatic {
21
+ background-color: var(--color-primary-dark);
22
+ color: var(--color-very-very-light);
23
+ &:hover {
24
+ background-color: var(--color-primary-main);
25
+ color: white;
26
+ }
27
+ }
28
+ }
29
+ }
30
+ }
@@ -1,39 +1,39 @@
1
- // Import index once for bundle
2
- @import '../../../index.scss';
3
-
4
- .lunatic-component-container-test {
5
- display: flex;
6
-
7
- .lunatic-component-body {
8
- width: 80%;
9
- }
10
-
11
- /* Tooltip container */
12
- .tooltip-lunatic {
13
- margin: auto;
14
- width: 20%;
15
- position: relative;
16
- display: block;
17
- margin-left: auto;
18
- margin-right: auto;
19
- }
20
-
21
- /* Tooltip text */
22
- .tooltip-lunatic .tooltip-text {
23
- min-width: 10em;
24
- max-width: 20em;
25
- background-color: var(--color-primary-dark);
26
- color: #fff;
27
- padding: 0.5em;
28
- border-radius: 6px;
29
- font-size: 1em;
30
- &.place-left {
31
- &::before {
32
- border-left: 10px solid var(--color-primary-dark);
33
- }
34
- &::after {
35
- content: none;
36
- }
37
- }
38
- }
39
- }
1
+ // Import index once for bundle
2
+ @import '../../../index.scss';
3
+
4
+ .lunatic-component-container-test {
5
+ display: flex;
6
+
7
+ .lunatic-component-body {
8
+ width: 80%;
9
+ }
10
+
11
+ /* Tooltip container */
12
+ .tooltip-lunatic {
13
+ margin: auto;
14
+ width: 20%;
15
+ position: relative;
16
+ display: block;
17
+ margin-left: auto;
18
+ margin-right: auto;
19
+ }
20
+
21
+ /* Tooltip text */
22
+ .tooltip-lunatic .tooltip-text {
23
+ min-width: 10em;
24
+ max-width: 20em;
25
+ background-color: var(--color-primary-dark);
26
+ color: #fff;
27
+ padding: 0.5em;
28
+ border-radius: 6px;
29
+ font-size: 1em;
30
+ &.place-left {
31
+ &::before {
32
+ border-left: 10px solid var(--color-primary-dark);
33
+ }
34
+ &::after {
35
+ content: none;
36
+ }
37
+ }
38
+ }
39
+ }
@@ -1,4 +1,4 @@
1
- .lunatic-icon {
2
- display: flex;
3
- justify-content: center;
4
- }
1
+ .lunatic-icon {
2
+ display: flex;
3
+ justify-content: center;
4
+ }
@@ -11,12 +11,11 @@ function useOnHandleChange(_ref) {
11
11
  var handleChange = _ref.handleChange,
12
12
  response = _ref.response,
13
13
  value = _ref.value;
14
- var onHandlechange = (0, _react.useCallback)(function (valueOption) {
14
+ return (0, _react.useCallback)(function (valueOption) {
15
15
  if (value !== valueOption) {
16
16
  handleChange(response, valueOption);
17
17
  }
18
18
  }, [handleChange, response, value]);
19
- return onHandlechange;
20
19
  }
21
20
 
22
21
  var _default = useOnHandleChange;
@@ -1 +1 @@
1
- // see input.scss
1
+ // see input.scss
@@ -1,36 +1,36 @@
1
- .lunatic-component {
2
- .lunatic-declarations {
3
- margin-bottom: 0.4rem;
4
- }
5
-
6
- .declaration-instruction {
7
- font-style: italic;
8
- font-size: 80%;
9
- }
10
-
11
- .declaration-statement {
12
- font-style: italic;
13
- font-size: 80%;
14
- color: blue;
15
- }
16
-
17
- .declaration-help {
18
- font-style: italic;
19
- font-size: 80%;
20
- color: green;
21
- }
22
-
23
- .declaration-codecard {
24
- font-style: bold;
25
- font-size: 80%;
26
- color: purple;
27
- }
28
-
29
- .declaration-message_filter {
30
- font-size: 100%;
31
- color: rgb(73, 66, 66);
32
- &:before {
33
- content: '→ ';
34
- }
35
- }
36
- }
1
+ .lunatic-component {
2
+ .lunatic-declarations {
3
+ margin-bottom: 0.4rem;
4
+ }
5
+
6
+ .declaration-instruction {
7
+ font-style: italic;
8
+ font-size: 80%;
9
+ }
10
+
11
+ .declaration-statement {
12
+ font-style: italic;
13
+ font-size: 80%;
14
+ color: blue;
15
+ }
16
+
17
+ .declaration-help {
18
+ font-style: italic;
19
+ font-size: 80%;
20
+ color: green;
21
+ }
22
+
23
+ .declaration-codecard {
24
+ font-style: bold;
25
+ font-size: 80%;
26
+ color: purple;
27
+ }
28
+
29
+ .declaration-message_filter {
30
+ font-size: 100%;
31
+ color: rgb(73, 66, 66);
32
+ &:before {
33
+ content: '→ ';
34
+ }
35
+ }
36
+ }
@@ -1,41 +1,41 @@
1
- @mixin defaultFont {
2
- font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
3
- }
4
-
5
- @mixin disableSelect {
6
- -moz-user-select: none; /* Firefox */
7
- -ms-user-select: none; /* Internet Explorer */
8
- -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
9
- -webkit-user-select: none; /* Chrome, Safari, and Opera */
10
- -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
11
- }
12
-
13
- .lunatic-component {
14
- .lunatic-dropdown {
15
- .lunatic-dropdown-option {
16
- text-overflow: ellipsis;
17
- white-space: nowrap;
18
- overflow: hidden;
19
- margin-bottom: 0.1em;
20
- line-height: 2rem;
21
- display: block;
22
-
23
- &.selected {
24
- color: var(--color-primary-dark);
25
- background-color: goldenrod;
26
- }
27
-
28
- &:hover {
29
- background-color: var(--color-primary-main);
30
- color: white;
31
- }
32
-
33
- .prefix {
34
- color: red;
35
- }
36
-
37
- .normal {
38
- }
39
- }
40
- }
41
- }
1
+ @mixin defaultFont {
2
+ font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
3
+ }
4
+
5
+ @mixin disableSelect {
6
+ -moz-user-select: none; /* Firefox */
7
+ -ms-user-select: none; /* Internet Explorer */
8
+ -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
9
+ -webkit-user-select: none; /* Chrome, Safari, and Opera */
10
+ -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
11
+ }
12
+
13
+ .lunatic-component {
14
+ .lunatic-dropdown {
15
+ .lunatic-dropdown-option {
16
+ text-overflow: ellipsis;
17
+ white-space: nowrap;
18
+ overflow: hidden;
19
+ margin-bottom: 0.1em;
20
+ line-height: 2rem;
21
+ display: block;
22
+
23
+ &.selected {
24
+ color: var(--color-primary-dark);
25
+ background-color: goldenrod;
26
+ }
27
+
28
+ &:hover {
29
+ background-color: var(--color-primary-main);
30
+ color: white;
31
+ }
32
+
33
+ .prefix {
34
+ color: red;
35
+ }
36
+
37
+ .normal {
38
+ }
39
+ }
40
+ }
41
+ }
@@ -1,139 +1,139 @@
1
- * {
2
- box-sizing: border-box;
3
- --color-primary-dark: #2a5885;
4
- --color-primary-light: #5181b8;
5
- --color-primary-main: #4a73a4;
6
- --color-primary-contrast-text: #ffffff;
7
-
8
- --color-secondary-dark: #14202d;
9
- --color-secondary-light: #f7f8fa;
10
- --color-secondary-main: #1a293b;
11
- --color-secondary-contrast-text: #ffffff;
12
-
13
- --color-very-light: #dbe4ef;
14
- --color-very-very-light: #e6eaee;
15
- --color-current-item: #0d823e;
16
-
17
- --color-error: #f50c0c;
18
- --color-disabled: rgb(235, 235, 228);
19
- --color-prefix: cornflowerblue;
20
- --color-dropdown-active: rgba(0, 0, 0, 0.04);
21
- --color-dropdown-selected: rgba(0, 0, 0, 0.08);
22
-
23
- --dropdown-transition-time: 0.5s;
24
- }
25
-
26
- @mixin vertical-placement($reverse: false) {
27
- display: flex;
28
- flex-direction: if($reverse, column-reverse, column);
29
- }
30
-
31
- @mixin horizontal-placement($reverse: false) {
32
- display: flex;
33
- flex-direction: if($reverse, row-reverse, row);
34
- align-items: baseline;
35
-
36
- :first-child {
37
- margin-right: 1rem;
38
- }
39
- }
40
-
41
- .lunatic-component {
42
- .mandatory:after {
43
- content: ' *';
44
- color: red;
45
- }
46
-
47
- .horizontal-options {
48
- display: inline-block;
49
- margin-right: 2em;
50
- }
51
-
52
- // Label & Legend
53
- label,
54
- legend,
55
- .subsequence-lunatic,
56
- .lunatic-dropdown-label,
57
- .lunatic-dropdown-label focused {
58
- color: var(--color-primary-dark);
59
- background-color: var(--color-primary-contrast-text);
60
- border: 0;
61
- padding: 0;
62
- font-size: 0.75rem;
63
- font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
64
- line-height: 0.75rem;
65
- font-weight: bold;
66
- margin-bottom: 0.375rem;
67
- }
68
-
69
- /* refactor proposition */
70
-
71
- // .lunatic-component {
72
- // width: fit-content;
73
- // }
74
-
75
- .lunatic-component-container {
76
- display: flex;
77
-
78
- &.label-left-ex {
79
- flex-direction: row;
80
- align-items: baseline;
81
- .lunatic-label {
82
- margin-right: 1em;
83
- }
84
- }
85
- &.label-right-ex {
86
- flex-direction: row-reverse;
87
- align-items: baseline;
88
- .lunatic-label {
89
- margin-left: 1em;
90
- }
91
- }
92
- &.label-top-ex {
93
- flex-direction: column;
94
- }
95
- &.label-bottom-ex {
96
- flex-direction: column-reverse;
97
- }
98
- }
99
-
100
- /******/
101
-
102
- .label-top {
103
- @include vertical-placement();
104
- }
105
- .label-bottom {
106
- @include vertical-placement(true);
107
- }
108
- .label-right {
109
- justify-content: flex-end;
110
- @include horizontal-placement(true);
111
- }
112
- .label-left {
113
- @include horizontal-placement();
114
- }
115
-
116
- .field-container {
117
- display: flex;
118
- }
119
-
120
- .modality-label p {
121
- display: inline;
122
- }
123
-
124
-
125
- .field {
126
- width: 100%;
127
- position: relative;
128
- }
129
-
130
-
131
- .link-md .field-md {
132
- border-bottom: dashed 0.1em var(--color-primary-dark);
133
- &:hover {
134
- cursor: help;
135
- color: var(--color-primary-contrast-text);
136
- background-color: var(--color-primary-dark);
137
- }
138
- }
139
- }
1
+ * {
2
+ box-sizing: border-box;
3
+ --color-primary-dark: #2a5885;
4
+ --color-primary-light: #5181b8;
5
+ --color-primary-main: #4a73a4;
6
+ --color-primary-contrast-text: #ffffff;
7
+
8
+ --color-secondary-dark: #14202d;
9
+ --color-secondary-light: #f7f8fa;
10
+ --color-secondary-main: #1a293b;
11
+ --color-secondary-contrast-text: #ffffff;
12
+
13
+ --color-very-light: #dbe4ef;
14
+ --color-very-very-light: #e6eaee;
15
+ --color-current-item: #0d823e;
16
+
17
+ --color-error: #f50c0c;
18
+ --color-disabled: rgb(235, 235, 228);
19
+ --color-prefix: cornflowerblue;
20
+ --color-dropdown-active: rgba(0, 0, 0, 0.04);
21
+ --color-dropdown-selected: rgba(0, 0, 0, 0.08);
22
+
23
+ --dropdown-transition-time: 0.5s;
24
+ }
25
+
26
+ @mixin vertical-placement($reverse: false) {
27
+ display: flex;
28
+ flex-direction: if($reverse, column-reverse, column);
29
+ }
30
+
31
+ @mixin horizontal-placement($reverse: false) {
32
+ display: flex;
33
+ flex-direction: if($reverse, row-reverse, row);
34
+ align-items: baseline;
35
+
36
+ :first-child {
37
+ margin-right: 1rem;
38
+ }
39
+ }
40
+
41
+ .lunatic-component {
42
+ .mandatory:after {
43
+ content: ' *';
44
+ color: red;
45
+ }
46
+
47
+ .horizontal-options {
48
+ display: inline-block;
49
+ margin-right: 2em;
50
+ }
51
+
52
+ // Label & Legend
53
+ label,
54
+ legend,
55
+ .subsequence-lunatic,
56
+ .lunatic-dropdown-label,
57
+ .lunatic-dropdown-label focused {
58
+ color: var(--color-primary-dark);
59
+ background-color: var(--color-primary-contrast-text);
60
+ border: 0;
61
+ padding: 0;
62
+ font-size: 0.75rem;
63
+ font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
64
+ line-height: 0.75rem;
65
+ font-weight: bold;
66
+ margin-bottom: 0.375rem;
67
+ }
68
+
69
+ /* refactor proposition */
70
+
71
+ // .lunatic-component {
72
+ // width: fit-content;
73
+ // }
74
+
75
+ .lunatic-component-container {
76
+ display: flex;
77
+
78
+ &.label-left-ex {
79
+ flex-direction: row;
80
+ align-items: baseline;
81
+ .lunatic-label {
82
+ margin-right: 1em;
83
+ }
84
+ }
85
+ &.label-right-ex {
86
+ flex-direction: row-reverse;
87
+ align-items: baseline;
88
+ .lunatic-label {
89
+ margin-left: 1em;
90
+ }
91
+ }
92
+ &.label-top-ex {
93
+ flex-direction: column;
94
+ }
95
+ &.label-bottom-ex {
96
+ flex-direction: column-reverse;
97
+ }
98
+ }
99
+
100
+ /******/
101
+
102
+ .label-top {
103
+ @include vertical-placement();
104
+ }
105
+ .label-bottom {
106
+ @include vertical-placement(true);
107
+ }
108
+ .label-right {
109
+ justify-content: flex-end;
110
+ @include horizontal-placement(true);
111
+ }
112
+ .label-left {
113
+ @include horizontal-placement();
114
+ }
115
+
116
+ .field-container {
117
+ display: flex;
118
+ }
119
+
120
+ .modality-label p {
121
+ display: inline;
122
+ }
123
+
124
+
125
+ .field {
126
+ width: 100%;
127
+ position: relative;
128
+ }
129
+
130
+
131
+ .link-md .field-md {
132
+ border-bottom: dashed 0.1em var(--color-primary-dark);
133
+ &:hover {
134
+ cursor: help;
135
+ color: var(--color-primary-contrast-text);
136
+ background-color: var(--color-primary-dark);
137
+ }
138
+ }
139
+ }