mp-design-system 1.2.43 → 1.2.45
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/build/js/app.js +1 -1
- package/dist/build/js/app.js.map +1 -1
- package/dist/build/scss/main.css +1 -1
- package/dist/build/scss/main.css.map +1 -1
- package/package.json +1 -1
- package/src/assets/js/imports/off-canvas.js +3 -6
- package/src/assets/scss/components/form.scss +29 -15
- package/src/prototype/forms.njk +2415 -0
package/package.json
CHANGED
|
@@ -29,14 +29,9 @@ function OffCanvas() {
|
|
|
29
29
|
|
|
30
30
|
// Function to check if an element is currently visible on the page
|
|
31
31
|
function isVisible(element) {
|
|
32
|
-
// Check element's
|
|
33
|
-
const rect = element.getBoundingClientRect();
|
|
32
|
+
// Check element's styles for visibility
|
|
34
33
|
const style = window.getComputedStyle(element);
|
|
35
34
|
return (
|
|
36
|
-
rect.top >= 0 &&
|
|
37
|
-
rect.left >= 0 &&
|
|
38
|
-
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
|
|
39
|
-
rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
|
|
40
35
|
style.display !== 'none' &&
|
|
41
36
|
style.visibility !== 'hidden'
|
|
42
37
|
);
|
|
@@ -45,6 +40,8 @@ function isVisible(element) {
|
|
|
45
40
|
// Function to handle off-canvas behavior based on visibility
|
|
46
41
|
function handleOffCanvas(toggle, isVisible) {
|
|
47
42
|
const target = document.getElementById(toggle.getAttribute('data-target'));
|
|
43
|
+
console.log(target);
|
|
44
|
+
console.log(isVisible);
|
|
48
45
|
if (isVisible === true) {
|
|
49
46
|
createOffCanvas(target);
|
|
50
47
|
} else {
|
|
@@ -10,22 +10,43 @@
|
|
|
10
10
|
font-size: var(--step-4) !important;
|
|
11
11
|
letter-spacing: -.02em;
|
|
12
12
|
}
|
|
13
|
+
|
|
14
|
+
&__row.o-grid {
|
|
15
|
+
flex-wrap: wrap;
|
|
16
|
+
gap: var(--space-s);
|
|
17
|
+
|
|
18
|
+
.c-form__input {
|
|
19
|
+
flex: 1 0 298px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.c-input {
|
|
23
|
+
flex-shrink: 1;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
13
26
|
|
|
14
27
|
&__input-wrap {
|
|
15
28
|
display: flex;
|
|
16
|
-
align-items: flex-start;
|
|
17
29
|
gap: var(--space-s);
|
|
18
|
-
flex-wrap:
|
|
30
|
+
flex-wrap: wrap;
|
|
31
|
+
align-items: flex-start;
|
|
19
32
|
|
|
20
33
|
.c-label {
|
|
21
|
-
min-width: 115px;
|
|
22
34
|
flex-basis: 115px;
|
|
23
|
-
margin-bottom
|
|
35
|
+
@include margin-bottom(0);
|
|
36
|
+
word-wrap: break-word;
|
|
37
|
+
|
|
38
|
+
@media only screen and (max-width: 31.25em) {
|
|
39
|
+
flex-basis: 100%;
|
|
40
|
+
}
|
|
24
41
|
|
|
25
42
|
&+ * {
|
|
26
43
|
flex: 1 0 115px;
|
|
27
44
|
}
|
|
28
45
|
}
|
|
46
|
+
|
|
47
|
+
.c-input--textarea {
|
|
48
|
+
flex-basis: 100%;
|
|
49
|
+
}
|
|
29
50
|
}
|
|
30
51
|
|
|
31
52
|
&__messages-wrap {
|
|
@@ -40,21 +61,13 @@
|
|
|
40
61
|
}
|
|
41
62
|
}
|
|
42
63
|
|
|
43
|
-
& > .c-fieldset
|
|
64
|
+
& > .c-fieldset,
|
|
65
|
+
& > .c-tab > .c-fieldset {
|
|
44
66
|
& > * + *:not(:has(> .u-hidden)) {
|
|
45
67
|
@include padding-top('s');
|
|
46
68
|
}
|
|
47
69
|
}
|
|
48
70
|
|
|
49
|
-
.o-grid {
|
|
50
|
-
flex-wrap: wrap;
|
|
51
|
-
row-gap: var(--space-s);
|
|
52
|
-
|
|
53
|
-
.c-input {
|
|
54
|
-
flex-shrink: 1;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
71
|
.c-label--required:after {
|
|
59
72
|
content: "*";
|
|
60
73
|
color: color('red');
|
|
@@ -114,7 +127,8 @@
|
|
|
114
127
|
|
|
115
128
|
& > .o-grid,
|
|
116
129
|
& > .o-grid > * {
|
|
117
|
-
@include margin
|
|
130
|
+
@include margin(0);
|
|
131
|
+
@include padding(0);
|
|
118
132
|
}
|
|
119
133
|
}
|
|
120
134
|
|