mp-design-system 1.2.44 → 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 +22 -8
- 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 {
|
@@ -11,9 +11,13 @@
|
|
11
11
|
letter-spacing: -.02em;
|
12
12
|
}
|
13
13
|
|
14
|
-
&
|
14
|
+
&__row.o-grid {
|
15
15
|
flex-wrap: wrap;
|
16
|
-
|
16
|
+
gap: var(--space-s);
|
17
|
+
|
18
|
+
.c-form__input {
|
19
|
+
flex: 1 0 298px;
|
20
|
+
}
|
17
21
|
|
18
22
|
.c-input {
|
19
23
|
flex-shrink: 1;
|
@@ -22,19 +26,27 @@
|
|
22
26
|
|
23
27
|
&__input-wrap {
|
24
28
|
display: flex;
|
25
|
-
align-items: flex-start;
|
26
29
|
gap: var(--space-s);
|
27
|
-
flex-wrap:
|
30
|
+
flex-wrap: wrap;
|
31
|
+
align-items: flex-start;
|
28
32
|
|
29
33
|
.c-label {
|
30
|
-
min-width: 115px;
|
31
34
|
flex-basis: 115px;
|
32
|
-
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
|
+
}
|
33
41
|
|
34
42
|
&+ * {
|
35
43
|
flex: 1 0 115px;
|
36
44
|
}
|
37
45
|
}
|
46
|
+
|
47
|
+
.c-input--textarea {
|
48
|
+
flex-basis: 100%;
|
49
|
+
}
|
38
50
|
}
|
39
51
|
|
40
52
|
&__messages-wrap {
|
@@ -49,7 +61,8 @@
|
|
49
61
|
}
|
50
62
|
}
|
51
63
|
|
52
|
-
& > .c-fieldset
|
64
|
+
& > .c-fieldset,
|
65
|
+
& > .c-tab > .c-fieldset {
|
53
66
|
& > * + *:not(:has(> .u-hidden)) {
|
54
67
|
@include padding-top('s');
|
55
68
|
}
|
@@ -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
|
|