gatsby-core-theme 28.0.4 → 28.0.6
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/CHANGELOG.md +27 -0
- package/package.json +1 -1
- package/src/components/atoms/iframe/index.js +39 -17
- package/src/components/molecules/content/content.module.scss +91 -4
- package/src/components/molecules/content/index.js +8 -8
- package/src/components/molecules/content/table/table.module.scss +50 -26
- package/src/styles/base/_typography.scss +1 -1
- package/src/styles/utils/variables/_main.scss +9 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,30 @@
|
|
|
1
|
+
## [28.0.6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v28.0.5...v28.0.6) (2023-08-29)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* add webkit ([ef4a978](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ef4a978f44eb4122cf0f88d4b7eb19f1b343a183))
|
|
7
|
+
* update content ([42a32a6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/42a32a6b2fa1eb5f1edbf375d0210642702bdebf))
|
|
8
|
+
* update content module ([35a764c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/35a764c043781b9f7657e8b0ce2aae50f0854318))
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
* Merge branch 'tm-3537-content-module' into 'master' ([8f8a75d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8f8a75d52c2deaed761ae8ab946148f654d1bd53))
|
|
12
|
+
* Merge branch 'tm-3537-content-module' into 'master' ([da1b655](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/da1b655131168dfdd2de64198ced20ac8d66a5b6))
|
|
13
|
+
|
|
14
|
+
## [28.0.5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v28.0.4...v28.0.5) (2023-08-29)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* add also env ([b0ffde8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b0ffde82cbb27bd0536f8ebbe4d56f9c33bff8b7))
|
|
20
|
+
* noscript ([9422a53](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9422a531ed62fa4991bae670f2a3e681ea79ef60))
|
|
21
|
+
* update content module ([1f448a0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1f448a0365eadf9ab349d437badcd30aa1ef9944))
|
|
22
|
+
* update variables ([2c3c7c8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2c3c7c87c6852573c3eadab390d2a0fc6494a9d1))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
* Merge branch 'iframes' into 'master' ([0b64e30](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0b64e30d9a5490c01f62c26906f554263a29a97e))
|
|
26
|
+
* Merge branch 'tm-3537-content-module' into 'master' ([1606fec](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1606fecbc2d669521f1f1674a134f69fbeccc865))
|
|
27
|
+
|
|
1
28
|
## [28.0.4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v28.0.3...v28.0.4) (2023-08-28)
|
|
2
29
|
|
|
3
30
|
|
package/package.json
CHANGED
|
@@ -14,29 +14,51 @@ const Iframe = ({
|
|
|
14
14
|
if (!isNativeImageLazyLoadingSupported() && lazyLoad) {
|
|
15
15
|
const LazyLoad = loadable(() => import(`react-lazyload`));
|
|
16
16
|
return (
|
|
17
|
-
|
|
17
|
+
<>
|
|
18
|
+
<LazyLoad>
|
|
19
|
+
<iframe
|
|
20
|
+
title={title}
|
|
21
|
+
style={{ width: '100%', minHeight, display: 'block' }}
|
|
22
|
+
src={src}
|
|
23
|
+
frameBorder={frameBorder}
|
|
24
|
+
/>
|
|
25
|
+
</LazyLoad>
|
|
26
|
+
<noscript>
|
|
27
|
+
<iframe
|
|
28
|
+
title={title}
|
|
29
|
+
style={{ width: '100%', minHeight, display: 'block' }}
|
|
30
|
+
width={868}
|
|
31
|
+
height={454}
|
|
32
|
+
src={src}
|
|
33
|
+
loading={lazyLoad ? 'lazy' : 'eager'}
|
|
34
|
+
/>
|
|
35
|
+
</noscript>
|
|
36
|
+
</>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<>
|
|
42
|
+
<div className={styles?.iframeContainer || ''}>
|
|
18
43
|
<iframe
|
|
19
44
|
title={title}
|
|
20
45
|
style={{ width: '100%', minHeight, display: 'block' }}
|
|
46
|
+
width={868}
|
|
47
|
+
height={454}
|
|
21
48
|
src={src}
|
|
49
|
+
loading={lazyLoad ? 'lazy' : 'eager'}
|
|
22
50
|
frameBorder={frameBorder}
|
|
23
51
|
/>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
height={454}
|
|
35
|
-
src={src}
|
|
36
|
-
loading={lazyLoad ? 'lazy' : 'eager'}
|
|
37
|
-
frameBorder={frameBorder}
|
|
38
|
-
/>
|
|
39
|
-
</div>
|
|
52
|
+
<noscript>
|
|
53
|
+
{`<iframe title="${title}"
|
|
54
|
+
style="width: 100%, ${minHeight}, display: block"
|
|
55
|
+
width={868}
|
|
56
|
+
height={454}
|
|
57
|
+
src="${src}"
|
|
58
|
+
loading="${lazyLoad ? 'lazy' : 'eager'}" />`}
|
|
59
|
+
</noscript>
|
|
60
|
+
</div>
|
|
61
|
+
</>
|
|
40
62
|
);
|
|
41
63
|
};
|
|
42
64
|
|
|
@@ -19,8 +19,65 @@
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.content {
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
width: var(--content-width) !important;
|
|
23
|
+
max-width: var(--max-width-content, var(--main-container-max)) !important;
|
|
24
|
+
margin-bottom: var(--margin-bottom-content) !important;
|
|
25
|
+
margin: var(--margin-content) !important;
|
|
26
|
+
padding: var(--padding-conent) !important;
|
|
27
|
+
border: var(--border-content-module);
|
|
28
|
+
background: var(--background-content-module);
|
|
29
|
+
|
|
30
|
+
@include min(tablet) {
|
|
31
|
+
margin: var(--margin-content-min-tablet) !important;
|
|
32
|
+
padding: var(--padding-content-min-tablet) !important;
|
|
33
|
+
margin-bottom: var(--margin-bottom-content-tablet)
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
a {
|
|
37
|
+
text-decoration: var(--a-tagcontent-decoration, auto);
|
|
38
|
+
display: var(--a-tag-content);
|
|
39
|
+
font-size: var(--a-tag-content-size, var(--text-size));
|
|
40
|
+
font-weight: var(--a-tag-content-weight);
|
|
41
|
+
line-height: var(--a-tag-content-line-height);
|
|
42
|
+
color: var(--a-tag-color, var(--text-link-color));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
p {
|
|
46
|
+
margin-bottom: var(--paragraph-content-margin-bottom);
|
|
47
|
+
@include min(tablet) {
|
|
48
|
+
margin: var(--paragraph-margin-content-module)
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
p:first-of-type {
|
|
53
|
+
margin-bottom: var(--paragraph-content-first-margin-bottom, 2.4rem) !important;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
p:last-of-type {
|
|
57
|
+
margin-bottom: var(--paragraph-content-last-margin-bottom);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@include max(mobile) {
|
|
61
|
+
&.showMore {
|
|
62
|
+
height: var(--content-show-more-height, 17.8rem);
|
|
63
|
+
overflow: var(--content-show-more-overflow, hidden);
|
|
64
|
+
position: var(--content-show-more-position, relative);
|
|
65
|
+
|
|
66
|
+
&::before {
|
|
67
|
+
content: '';
|
|
68
|
+
position: absolute;
|
|
69
|
+
transition: all 0s ease-in-out;
|
|
70
|
+
height: var(--content-show-more-before-height, 4rem);
|
|
71
|
+
right: 0;
|
|
72
|
+
bottom: 0;
|
|
73
|
+
left: 0;
|
|
74
|
+
background-image: var(
|
|
75
|
+
--content-show-more-before-background,
|
|
76
|
+
linear-gradient(to bottom, rgba(209, 209, 209, 0), var(--color-4))
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
24
81
|
img {
|
|
25
82
|
@include max(mobile) {
|
|
26
83
|
width: 100% !important;
|
|
@@ -29,6 +86,36 @@
|
|
|
29
86
|
}
|
|
30
87
|
|
|
31
88
|
.showMoreButton {
|
|
32
|
-
|
|
89
|
+
color: var(--content-show-more-button-color);
|
|
90
|
+
display: var(--content-show-more-button-display, flex);
|
|
91
|
+
width: var(--show-more-button-width, 100%);
|
|
92
|
+
font-weight: var(--show-more-button-font-weight);
|
|
93
|
+
justify-content: var(--show-more-content-justify-content);
|
|
94
|
+
|
|
95
|
+
&::after {
|
|
96
|
+
display: var(--show-more-button-arrow-display, none);
|
|
97
|
+
@include arrow(var(--show-more-button-arrow-color), 1rem, down, false);
|
|
98
|
+
margin-left: var(--show-more-button-arrow-margin-left, 1rem);
|
|
99
|
+
}
|
|
33
100
|
|
|
34
|
-
|
|
101
|
+
@include min(tablet) {
|
|
102
|
+
justify-content: var(--show-more-button-arrow-justify-content-tablet, start);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@include min(laptop) {
|
|
106
|
+
padding: var(--show-more-button-padding-laptop, 0 2.4rem) !important;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.homepageFirstModuleContent {
|
|
111
|
+
color: var(--firstModuleContent-color) !important;
|
|
112
|
+
position: var(--firstModuleContent-position);
|
|
113
|
+
|
|
114
|
+
p {
|
|
115
|
+
color: var(--firstModuleContent-paragraph-color) !important;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
blockquote {
|
|
119
|
+
color: var(--firstModuleContent-blockquote-color) !important;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
@@ -98,9 +98,9 @@ const Content = ({ module, isHomepageFirstModule = false, isModuleIntroduction =
|
|
|
98
98
|
return (
|
|
99
99
|
<>
|
|
100
100
|
<div
|
|
101
|
-
className={` ${
|
|
102
|
-
|
|
103
|
-
} ${
|
|
101
|
+
className={` ${styles.content || ''} ${lists.ul || ''} ${blockquote.blockquote || ''} ${
|
|
102
|
+
showMore ? styles.showMore || '' : ''
|
|
103
|
+
} ${switchStyle(module.style) || ''} ${
|
|
104
104
|
isHomepageFirstModule ? styles.homepageFirstModuleContent || '' : ''
|
|
105
105
|
} ${isModuleIntroduction ? styles.moduleIntroMargin || '' : ''}`}
|
|
106
106
|
>
|
|
@@ -108,12 +108,12 @@ const Content = ({ module, isHomepageFirstModule = false, isModuleIntroduction =
|
|
|
108
108
|
parse(conditionalContent, {
|
|
109
109
|
replace: replaceMedia,
|
|
110
110
|
})}
|
|
111
|
-
{showMore && (
|
|
112
|
-
<button type="button" className={styles.showMoreButton || ''} onClick={handleChange}>
|
|
113
|
-
{show_more_label}
|
|
114
|
-
</button>
|
|
115
|
-
)}
|
|
116
111
|
</div>
|
|
112
|
+
{showMore && (
|
|
113
|
+
<button type="button" className={styles.showMoreButton || ''} onClick={handleChange}>
|
|
114
|
+
{show_more_label}
|
|
115
|
+
</button>
|
|
116
|
+
)}
|
|
117
117
|
</>
|
|
118
118
|
);
|
|
119
119
|
};
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
.templateOne
|
|
2
|
-
|
|
1
|
+
.templateOne,
|
|
2
|
+
.templateOne > div {
|
|
3
|
+
width: 100%;
|
|
4
|
+
box-sizing: var(--box-sizing-templateOne, border-box);
|
|
3
5
|
table {
|
|
4
6
|
width: 100% !important;
|
|
5
7
|
border: none;
|
|
@@ -31,7 +33,11 @@
|
|
|
31
33
|
border-radius: 100px;
|
|
32
34
|
opacity: 0.20000000298023224;
|
|
33
35
|
}
|
|
34
|
-
@include scrollbar(
|
|
36
|
+
@include scrollbar(
|
|
37
|
+
var(--scroll-height-1, 0.8rem),
|
|
38
|
+
var(--scroll-height-2, 0.8rem),
|
|
39
|
+
var(--color-100, #515156)
|
|
40
|
+
);
|
|
35
41
|
|
|
36
42
|
* {
|
|
37
43
|
box-sizing: content-box;
|
|
@@ -45,11 +51,13 @@
|
|
|
45
51
|
display: table;
|
|
46
52
|
width: 100%;
|
|
47
53
|
table-layout: fixed;
|
|
54
|
+
box-sizing: border-box;
|
|
48
55
|
}
|
|
49
56
|
}
|
|
50
57
|
|
|
51
58
|
thead {
|
|
52
59
|
tr {
|
|
60
|
+
border: var(--header-border);
|
|
53
61
|
th {
|
|
54
62
|
padding: 4px 16px;
|
|
55
63
|
height: 5.6rem;
|
|
@@ -87,6 +95,7 @@
|
|
|
87
95
|
padding: 4px 16px;
|
|
88
96
|
line-height: 2.7rem;
|
|
89
97
|
height: 5.6rem;
|
|
98
|
+
border: var(--border-table-content, none);
|
|
90
99
|
|
|
91
100
|
a {
|
|
92
101
|
text-decoration: underline;
|
|
@@ -122,26 +131,28 @@
|
|
|
122
131
|
}
|
|
123
132
|
|
|
124
133
|
.templateTwo {
|
|
134
|
+
margin-bottom: 1rem;
|
|
135
|
+
margin-top: 1rem;
|
|
136
|
+
|
|
125
137
|
@include max(mobile) {
|
|
138
|
+
margin: 1rem 1.6rem !important;
|
|
126
139
|
table {
|
|
127
140
|
border-collapse: inherit;
|
|
141
|
+
box-shadow: 0 2px 16px #17182f14;
|
|
128
142
|
|
|
129
|
-
width: 100%;
|
|
130
143
|
thead {
|
|
131
144
|
display: none;
|
|
132
145
|
}
|
|
133
146
|
|
|
134
147
|
tbody {
|
|
135
|
-
display: flex;
|
|
136
|
-
flex-direction: column;
|
|
137
|
-
gap: 1.4rem;
|
|
138
148
|
tr {
|
|
139
|
-
border-radius: 16px;
|
|
140
|
-
|
|
141
|
-
box-shadow: 0px 4px 4px -2px rgba(27, 27, 28, 0.04),
|
|
142
|
-
0px 6px 8px -2px rgba(27, 27, 28, 0.06);
|
|
143
149
|
&:first-child {
|
|
144
150
|
td {
|
|
151
|
+
color: white !important;
|
|
152
|
+
background: red;
|
|
153
|
+
|
|
154
|
+
border-radius: 0;
|
|
155
|
+
|
|
145
156
|
&:first-child {
|
|
146
157
|
border-top-left-radius: var(--table-border-radius);
|
|
147
158
|
border-top-right-radius: var(--table-border-radius);
|
|
@@ -157,28 +168,14 @@
|
|
|
157
168
|
td {
|
|
158
169
|
display: block;
|
|
159
170
|
text-align: left !important;
|
|
160
|
-
|
|
171
|
+
border-bottom: 1px solid #bfd3e5;
|
|
161
172
|
width: 100% !important;
|
|
162
|
-
background-color: var(--table-background);
|
|
163
|
-
padding: 4px 8px;
|
|
164
|
-
font-size: 16px;
|
|
165
|
-
font-style: normal;
|
|
166
|
-
font-weight: 600;
|
|
167
|
-
line-height: 27px;
|
|
168
|
-
color: var(--color-71);
|
|
169
|
-
&:nth-child(odd) {
|
|
170
|
-
background-color: var(--table-highlight);
|
|
171
|
-
}
|
|
172
173
|
}
|
|
173
174
|
|
|
174
175
|
&:last-child {
|
|
175
176
|
td {
|
|
176
177
|
border-radius: 0;
|
|
177
|
-
|
|
178
178
|
&:last-child {
|
|
179
|
-
border-bottom-right-radius: var(--table-border-radius);
|
|
180
|
-
border-bottom-left-radius: var(--table-border-radius);
|
|
181
|
-
border-bottom: none;
|
|
182
179
|
}
|
|
183
180
|
}
|
|
184
181
|
}
|
|
@@ -187,3 +184,30 @@
|
|
|
187
184
|
}
|
|
188
185
|
}
|
|
189
186
|
}
|
|
187
|
+
|
|
188
|
+
.templateThree {
|
|
189
|
+
table {
|
|
190
|
+
thead {
|
|
191
|
+
tr th {
|
|
192
|
+
&:last-child {
|
|
193
|
+
text-align: left;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
tbody tr td {
|
|
199
|
+
&:first-child {
|
|
200
|
+
background-color: var(--second-table-background);
|
|
201
|
+
text-align: center;
|
|
202
|
+
|
|
203
|
+
a {
|
|
204
|
+
font-weight: 700;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
&:nth-child(2) {
|
|
209
|
+
text-align: center;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
}
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
--empty-star-border-color: grey;
|
|
19
19
|
--main-star-wrapper-color: #a5bcf0;
|
|
20
20
|
--content-list-number-color: #3C3C40;
|
|
21
|
+
--paragraph-color: var(--color-52);
|
|
21
22
|
|
|
22
23
|
// Font
|
|
23
24
|
--main-font: Nunito;
|
|
@@ -30,6 +31,7 @@
|
|
|
30
31
|
--module-spacing: 2rem;
|
|
31
32
|
--side-container: 30rem;
|
|
32
33
|
--main-container-max: 96rem;
|
|
34
|
+
--max-width-content: 96rem;
|
|
33
35
|
--border-radius: 0.6rem;
|
|
34
36
|
--h1-size: 4rem;
|
|
35
37
|
--h2-size: 3.2rem;
|
|
@@ -174,4 +176,11 @@
|
|
|
174
176
|
--storybook-soccer: var(--color-45);
|
|
175
177
|
--storybook-tennis: var(--color-46);
|
|
176
178
|
--storybook-handball: var(--color-47);
|
|
179
|
+
|
|
180
|
+
//Content module
|
|
181
|
+
--content-width: 0 auto;
|
|
182
|
+
--margin-content: 0 auto;
|
|
183
|
+
--margin-content-min-tablet: 0 auto;
|
|
184
|
+
--padding-content-min-tablet: 0 1.6rem;
|
|
185
|
+
--padding-conent: 0 1.6rem;
|
|
177
186
|
}
|