mp-design-system 1.2.43 → 1.2.45
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
|