@mirweb/mir-web-components 2.1.1 → 2.1.3
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/components/blocks/card-display/card-display.vue +4 -4
- package/dist/components/blocks/column-grid/column-grid.vue +3 -5
- package/dist/components/blocks/facts/facts.vue +2 -2
- package/dist/components/blocks/features/features.vue +5 -5
- package/dist/components/blocks/flashcards/flashcards.vue +4 -5
- package/dist/components/blocks/form-script/form-script.vue +11 -14
- package/dist/components/blocks/headline/headline.vue +4 -4
- package/dist/components/blocks/hero/hero.vue +1 -1
- package/dist/components/blocks/image-gallery/image-gallery.vue +4 -5
- package/dist/components/blocks/micro-stories/micro-stories.vue +4 -5
- package/dist/components/blocks/pallet-jack/pallet-jack.vue +2 -2
- package/dist/components/blocks/policy/policy.vue +2 -2
- package/dist/components/blocks/product-hero/product-hero.vue +2 -2
- package/dist/components/blocks/promo/promo.vue +2 -14
- package/dist/components/blocks/rich-text/rich-text-columns.vue +4 -2
- package/dist/components/blocks/rich-text/rich-text.vue +3 -3
- package/dist/components/organisms/filter/filter.vue +1 -0
- package/dist/components/organisms/footer/footer.vue +0 -1
- package/package.json +1 -1
|
@@ -66,7 +66,7 @@ defineProps({
|
|
|
66
66
|
&-display {
|
|
67
67
|
width: 100%;
|
|
68
68
|
&--blue {
|
|
69
|
-
background-color: $blue-
|
|
69
|
+
background-color: $blue-000;
|
|
70
70
|
|
|
71
71
|
:deep(video) {
|
|
72
72
|
outline: 4px solid transparent;
|
|
@@ -85,13 +85,13 @@ defineProps({
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
&__wrapper {
|
|
88
|
-
padding:
|
|
88
|
+
padding: 60px 30px;
|
|
89
89
|
max-width: $max-width;
|
|
90
90
|
margin: auto;
|
|
91
91
|
|
|
92
92
|
&--block {
|
|
93
93
|
@include md {
|
|
94
|
-
padding:
|
|
94
|
+
padding: 60px 0px;
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
@@ -108,7 +108,7 @@ defineProps({
|
|
|
108
108
|
|
|
109
109
|
h2,
|
|
110
110
|
p {
|
|
111
|
-
|
|
111
|
+
padding-bottom: 30px;
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
114
|
|
|
@@ -101,11 +101,10 @@ withDefaults(defineProps<Props>(), {
|
|
|
101
101
|
@use "../../../assets/scss/variables.scss" as *;
|
|
102
102
|
|
|
103
103
|
.column-grid {
|
|
104
|
-
|
|
105
|
-
padding: 0px 30px 30px 30px;
|
|
104
|
+
padding: 60px 30px 60px 30px;
|
|
106
105
|
|
|
107
106
|
@include md {
|
|
108
|
-
padding:
|
|
107
|
+
padding: 60px 0;
|
|
109
108
|
}
|
|
110
109
|
|
|
111
110
|
&--light {
|
|
@@ -157,14 +156,13 @@ withDefaults(defineProps<Props>(), {
|
|
|
157
156
|
margin: 0 auto;
|
|
158
157
|
padding-left: 0px;
|
|
159
158
|
max-width: $screen-lg-min;
|
|
160
|
-
padding-top: 60px;
|
|
161
159
|
}
|
|
162
160
|
&__bodytext {
|
|
163
161
|
font-size: 16px;
|
|
164
162
|
font-weight: 300;
|
|
165
163
|
max-width: 658px;
|
|
166
164
|
font-family: $font-opensans;
|
|
167
|
-
margin-bottom:
|
|
165
|
+
margin-bottom: 30px;
|
|
168
166
|
|
|
169
167
|
:deep(p) {
|
|
170
168
|
padding-bottom: 1rem;
|
|
@@ -82,19 +82,19 @@ withDefaults(defineProps<Props>(), {
|
|
|
82
82
|
margin: 0 auto;
|
|
83
83
|
display: flex;
|
|
84
84
|
flex-direction: column;
|
|
85
|
-
padding:
|
|
85
|
+
padding: 60px 30px;
|
|
86
86
|
|
|
87
87
|
@include md {
|
|
88
|
-
padding:
|
|
88
|
+
padding: 60px 0px;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
&__wrapper {
|
|
93
93
|
width: 100%;
|
|
94
|
-
background-color: $blue-
|
|
95
|
-
margin: $extra-margin-mobile-bg;
|
|
94
|
+
background-color: $blue-000;
|
|
95
|
+
//margin: $extra-margin-mobile-bg;
|
|
96
96
|
@include md {
|
|
97
|
-
margin: $extra-margin-desktop-bg;
|
|
97
|
+
//margin: $extra-margin-desktop-bg;
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
|
|
@@ -124,19 +124,18 @@ const cardSize = computed(() => {
|
|
|
124
124
|
}
|
|
125
125
|
|
|
126
126
|
.flashcard-wrapper {
|
|
127
|
-
|
|
127
|
+
padding: 60px 30px;
|
|
128
128
|
max-width: $screen-lg-min;
|
|
129
129
|
|
|
130
130
|
@include md {
|
|
131
|
-
|
|
131
|
+
padding: 60px 0;
|
|
132
132
|
margin: 0 auto;
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
&__top-section {
|
|
136
136
|
display: grid;
|
|
137
137
|
margin: 0 auto;
|
|
138
|
-
|
|
139
|
-
padding-bottom: 60px;
|
|
138
|
+
margin-bottom: 30px;
|
|
140
139
|
}
|
|
141
140
|
|
|
142
141
|
&__headline {
|
|
@@ -155,7 +154,7 @@ const cardSize = computed(() => {
|
|
|
155
154
|
&__teaser-list {
|
|
156
155
|
display: grid;
|
|
157
156
|
gap: 30px;
|
|
158
|
-
padding-bottom: 60px;
|
|
157
|
+
//padding-bottom: 60px;
|
|
159
158
|
|
|
160
159
|
&.sm {
|
|
161
160
|
grid-template-columns: repeat(auto-fit, minmax(223px, 1fr));
|
|
@@ -8,16 +8,7 @@
|
|
|
8
8
|
<div class="form__body">
|
|
9
9
|
<slot name="form-body" />
|
|
10
10
|
</div>
|
|
11
|
-
<atom-link
|
|
12
|
-
v-if="linkType === 'link'"
|
|
13
|
-
:link-type="
|
|
14
|
-
variant === 'dark'
|
|
15
|
-
? 'regular_dark'
|
|
16
|
-
: variant === 'light'
|
|
17
|
-
? 'regular_light'
|
|
18
|
-
: 'regular_light'
|
|
19
|
-
"
|
|
20
|
-
arrow
|
|
11
|
+
<atom-link v-if="linkType === 'link'" :link-type="'regular_light'" arrow
|
|
21
12
|
><slot name="form-link"></slot
|
|
22
13
|
></atom-link>
|
|
23
14
|
</div>
|
|
@@ -33,9 +24,8 @@ import { computed } from "vue";
|
|
|
33
24
|
import AtomLink from "../../atoms/link/link.vue";
|
|
34
25
|
|
|
35
26
|
const VARIANTS = {
|
|
36
|
-
dark: "form__wrapper--dark",
|
|
37
27
|
light: "form__wrapper--light",
|
|
38
|
-
|
|
28
|
+
white: "form__wrapper--white",
|
|
39
29
|
} as const;
|
|
40
30
|
|
|
41
31
|
type Variant = keyof typeof VARIANTS;
|
|
@@ -50,7 +40,7 @@ export type Props = {
|
|
|
50
40
|
const props = withDefaults(defineProps<Props>(), {
|
|
51
41
|
headline: "",
|
|
52
42
|
linkText: "",
|
|
53
|
-
variant: "
|
|
43
|
+
variant: "light",
|
|
54
44
|
linkType: "link",
|
|
55
45
|
});
|
|
56
46
|
|
|
@@ -63,12 +53,19 @@ const selectedVariant = computed(() => VARIANTS[props.variant]);
|
|
|
63
53
|
.form {
|
|
64
54
|
&__wrapper {
|
|
65
55
|
width: 100%;
|
|
66
|
-
background-color: $blue-000;
|
|
67
56
|
padding: 60px 30px;
|
|
68
57
|
|
|
69
58
|
@include md {
|
|
70
59
|
padding: 60px 0;
|
|
71
60
|
}
|
|
61
|
+
|
|
62
|
+
&--light {
|
|
63
|
+
background-color: $blue-000;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&--white {
|
|
67
|
+
background-color: $white;
|
|
68
|
+
}
|
|
72
69
|
}
|
|
73
70
|
|
|
74
71
|
&__content {
|
|
@@ -43,10 +43,10 @@ defineProps({
|
|
|
43
43
|
&--default {
|
|
44
44
|
max-width: $max-width;
|
|
45
45
|
margin: 30px auto 0 auto;
|
|
46
|
-
padding: 60px 30px
|
|
46
|
+
padding: 60px 30px 0px 30px;
|
|
47
47
|
|
|
48
48
|
@include md {
|
|
49
|
-
padding: 60px 0px
|
|
49
|
+
padding: 60px 0px 0px 0px;
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
|
|
@@ -61,10 +61,10 @@ defineProps({
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
&--submenu {
|
|
64
|
-
padding: 132px 30px
|
|
64
|
+
padding: 132px 30px 00px 30px;
|
|
65
65
|
|
|
66
66
|
@include md {
|
|
67
|
-
padding: 132px 0px
|
|
67
|
+
padding: 132px 0px 00px 0px;
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
|
|
@@ -135,16 +135,15 @@ const selectedBgColor = computed(() => BGCOLORS[props.bgColor]);
|
|
|
135
135
|
.gallery {
|
|
136
136
|
&__wrapper {
|
|
137
137
|
width: 100%;
|
|
138
|
-
padding:
|
|
139
|
-
|
|
138
|
+
padding: 60px 30px;
|
|
139
|
+
|
|
140
140
|
background-color: $white;
|
|
141
141
|
@include md {
|
|
142
|
-
padding:
|
|
143
|
-
margin: $extra-margin-desktop-bg;
|
|
142
|
+
padding: 60px 0;
|
|
144
143
|
}
|
|
145
144
|
|
|
146
145
|
&--light {
|
|
147
|
-
background-color: $blue-
|
|
146
|
+
background-color: $blue-000;
|
|
148
147
|
}
|
|
149
148
|
|
|
150
149
|
&--dark {
|
|
@@ -47,11 +47,10 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
47
47
|
.micro-stories {
|
|
48
48
|
&__wrapper {
|
|
49
49
|
width: 100%;
|
|
50
|
-
padding:
|
|
51
|
-
|
|
50
|
+
padding: 60px 30px;
|
|
51
|
+
|
|
52
52
|
@include md {
|
|
53
|
-
padding:
|
|
54
|
-
margin: $extra-margin-desktop-bg;
|
|
53
|
+
padding: 60px 0px;
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
&--white {
|
|
@@ -308,7 +307,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
308
307
|
}
|
|
309
308
|
|
|
310
309
|
.micro-stories__body {
|
|
311
|
-
margin-bottom:
|
|
310
|
+
margin-bottom: 30px;
|
|
312
311
|
max-width: 579px;
|
|
313
312
|
}
|
|
314
313
|
}
|
|
@@ -129,12 +129,12 @@ const selectedVariant = computed(() => VARIANTS[props.variant]);
|
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
&--default {
|
|
132
|
-
padding: 0px 0px
|
|
132
|
+
padding: 0px 0px 60px 0px;
|
|
133
133
|
max-width: 984px;
|
|
134
134
|
margin: auto;
|
|
135
135
|
|
|
136
136
|
@include sm {
|
|
137
|
-
padding: 0px 0px;
|
|
137
|
+
padding: 0px 0px 60px 0px;
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
|
|
@@ -140,6 +140,7 @@ const selectedVariant = computed(() => VARIANTS[props.variant]);
|
|
|
140
140
|
display: flex;
|
|
141
141
|
flex-direction: row;
|
|
142
142
|
justify-content: center;
|
|
143
|
+
padding: 60px 0px;
|
|
143
144
|
|
|
144
145
|
:deep(video) {
|
|
145
146
|
outline: 4px solid $white;
|
|
@@ -154,12 +155,7 @@ const selectedVariant = computed(() => VARIANTS[props.variant]);
|
|
|
154
155
|
|
|
155
156
|
&--dark {
|
|
156
157
|
background-color: $blue-900;
|
|
157
|
-
margin: 30px 0px;
|
|
158
158
|
|
|
159
|
-
@include sm {
|
|
160
|
-
padding: 60px 0px;
|
|
161
|
-
margin: 60px 0px;
|
|
162
|
-
}
|
|
163
159
|
:deep(video) {
|
|
164
160
|
outline: 4px solid $blue-900;
|
|
165
161
|
outline-offset: -4px;
|
|
@@ -167,21 +163,14 @@ const selectedVariant = computed(() => VARIANTS[props.variant]);
|
|
|
167
163
|
}
|
|
168
164
|
&--light {
|
|
169
165
|
background-color: $blue-000;
|
|
170
|
-
margin: 30px 0px;
|
|
171
166
|
|
|
172
|
-
@include sm {
|
|
173
|
-
padding: 60px 0px;
|
|
174
|
-
margin: 60px 0px;
|
|
175
|
-
}
|
|
176
167
|
:deep(video) {
|
|
177
168
|
outline: 4px solid $blue-000;
|
|
178
169
|
outline-offset: -4px;
|
|
179
170
|
}
|
|
180
171
|
}
|
|
181
172
|
&--default {
|
|
182
|
-
|
|
183
|
-
padding: 60px 0px;
|
|
184
|
-
}
|
|
173
|
+
padding: 60px 0px;
|
|
185
174
|
}
|
|
186
175
|
|
|
187
176
|
&--teaser {
|
|
@@ -198,7 +187,6 @@ const selectedVariant = computed(() => VARIANTS[props.variant]);
|
|
|
198
187
|
@include sm {
|
|
199
188
|
grid-template-columns: fit-content(repeat(2, 1fr auto));
|
|
200
189
|
grid-template-rows: 1fr;
|
|
201
|
-
padding-bottom: 30px;
|
|
202
190
|
}
|
|
203
191
|
|
|
204
192
|
@include md {
|
|
@@ -25,13 +25,15 @@
|
|
|
25
25
|
|
|
26
26
|
&__wrapper {
|
|
27
27
|
max-width: $max-width;
|
|
28
|
+
padding: 0 30px 30px 30px;
|
|
28
29
|
margin: 0 auto;
|
|
29
|
-
|
|
30
|
+
margin-top: -30px;
|
|
30
31
|
:deep(img) {
|
|
31
32
|
width: 100%;
|
|
32
33
|
}
|
|
33
34
|
@include md {
|
|
34
|
-
padding: 0 0 30px
|
|
35
|
+
padding: 0 0 30px 0;
|
|
36
|
+
margin-top: -30px;
|
|
35
37
|
}
|
|
36
38
|
}
|
|
37
39
|
|
|
@@ -94,7 +94,7 @@ withDefaults(defineProps<Props>(), {
|
|
|
94
94
|
width: 100%;
|
|
95
95
|
|
|
96
96
|
&--blue {
|
|
97
|
-
background-color: $blue-
|
|
97
|
+
background-color: $blue-000;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
&--white {
|
|
@@ -104,12 +104,12 @@ withDefaults(defineProps<Props>(), {
|
|
|
104
104
|
&__wrapper {
|
|
105
105
|
max-width: $max-width;
|
|
106
106
|
margin: 0 auto;
|
|
107
|
-
padding:
|
|
107
|
+
padding: 60px 30px;
|
|
108
108
|
:deep(img) {
|
|
109
109
|
width: 100%;
|
|
110
110
|
}
|
|
111
111
|
@include md {
|
|
112
|
-
padding:
|
|
112
|
+
padding: 60px 0px;
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
:deep(.label__wrapper) {
|