@ndla/preset-panda 0.0.38 → 0.0.39
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/styles.css
CHANGED
|
@@ -120,36 +120,40 @@
|
|
|
120
120
|
direction: rtl;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
.ndla-article details,.ndla-article :not(li) > blockquote,.ndla-article [data-embed-type="framed-content"],.ndla-article [data-embed-type="factbox"],.ndla-article table,.ndla-article [data-embed-type="related-content-list"],.ndla-article [data-embed-type="link-block-list"],.ndla-article [data-embed-type="blog-post"],.ndla-article [data-embed-type="campaign-block"],.ndla-article [data-embed-type="key-figure"],.ndla-article [data-embed-type="grid"],.ndla-article [data-embed-type="contact-block"],.ndla-article [data-embed-type="file-list"],.ndla-article [data-embed-type="uu-disclaimer"] {
|
|
123
|
+
.ndla-article details,.ndla-article :not(li) > blockquote,.ndla-article [data-embed-type="expandable-box"],.ndla-article [data-embed-type="framed-content"],.ndla-article [data-embed-type="factbox"],.ndla-article table,.ndla-article [data-embed-type="related-content-list"],.ndla-article [data-embed-type="link-block-list"],.ndla-article [data-embed-type="blog-post"],.ndla-article [data-embed-type="campaign-block"],.ndla-article [data-embed-type="key-figure"],.ndla-article [data-embed-type="grid"],.ndla-article [data-embed-type="contact-block"],.ndla-article [data-embed-type="file-list"],.ndla-article [data-embed-type="uu-disclaimer"] {
|
|
124
124
|
margin-block-start: var(--spacing-xxlarge);
|
|
125
125
|
margin-block-end: var(--spacing-xxlarge);
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
-
.ndla-article section:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article section:not([class]) > div:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="framed-content"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="factbox"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-wrapper] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article details > :is(h2, [data-embed-type="copy-heading"]),.ndla-article blockquote > :is(h2, [data-embed-type="copy-heading"]) {
|
|
128
|
+
.ndla-article section:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article section:not([class]) > div:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="framed-content"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="factbox"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-wrapper] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article details > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="expandable-box"] blockquote > :is(h2, [data-embed-type="copy-heading"]) {
|
|
129
129
|
margin-block-start: var(--spacing-xlarge);
|
|
130
130
|
margin-block-end: var(--spacing-small);
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
.ndla-article section:not([class]) > h3,.ndla-article section:not([class]) > div:not([class]) > h3,.ndla-article [data-embed-type="framed-content"] > h3,.ndla-article [data-embed-type="grid"] > div > h3,.ndla-article [data-embed-type="grid-parallax"] > div > h3,.ndla-article [data-embed-type="factbox"] > div > h3,.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > h3,.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > h3,.ndla-article [data-embed-wrapper] > h3,.ndla-article details > h3,.ndla-article blockquote > h3 {
|
|
133
|
+
.ndla-article section:not([class]) > h3,.ndla-article section:not([class]) > div:not([class]) > h3,.ndla-article [data-embed-type="framed-content"] > h3,.ndla-article [data-embed-type="grid"] > div > h3,.ndla-article [data-embed-type="grid-parallax"] > div > h3,.ndla-article [data-embed-type="factbox"] > div > h3,.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > h3,.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > h3,.ndla-article [data-embed-wrapper] > h3,.ndla-article details > h3,.ndla-article [data-embed-type="expandable-box"] blockquote > h3 {
|
|
134
134
|
margin-block-start: var(--spacing-large);
|
|
135
135
|
margin-block-end: var(--spacing-xsmall);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
-
.ndla-article section:not([class]) > :is(h4, h5, h6),.ndla-article section:not([class]) > div:not([class]) > :is(h4, h5, h6),.ndla-article [data-embed-type="framed-content"] > :is(h4, h5, h6),.ndla-article [data-embed-type="grid"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="factbox"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h4, h5, h6),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h4, h5, h6),.ndla-article [data-embed-wrapper] > :is(h4, h5, h6),.ndla-article details > :is(h4, h5, h6),.ndla-article blockquote > :is(h4, h5, h6) {
|
|
138
|
+
.ndla-article section:not([class]) > :is(h4, h5, h6),.ndla-article section:not([class]) > div:not([class]) > :is(h4, h5, h6),.ndla-article [data-embed-type="framed-content"] > :is(h4, h5, h6),.ndla-article [data-embed-type="grid"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="factbox"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h4, h5, h6),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h4, h5, h6),.ndla-article [data-embed-wrapper] > :is(h4, h5, h6),.ndla-article details > :is(h4, h5, h6),.ndla-article [data-embed-type="expandable-box"] blockquote > :is(h4, h5, h6) {
|
|
139
139
|
margin-block-start: var(--spacing-medium);
|
|
140
140
|
margin-block-end: var(--spacing-xsmall);
|
|
141
141
|
}
|
|
142
142
|
|
|
143
|
-
.ndla-article section:not([class]) > :is(figure),.ndla-article section:not([class]) > div:not([class]) > :is(figure),.ndla-article [data-embed-type="framed-content"] > :is(figure),.ndla-article [data-embed-type="grid"] > div > :is(figure),.ndla-article [data-embed-type="grid-parallax"] > div > :is(figure),.ndla-article [data-embed-type="factbox"] > div > :is(figure),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(figure),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(figure),.ndla-article [data-embed-wrapper] > :is(figure),.ndla-article details > :is(figure),.ndla-article blockquote > :is(figure) {
|
|
143
|
+
.ndla-article section:not([class]) > :is(figure),.ndla-article section:not([class]) > div:not([class]) > :is(figure),.ndla-article [data-embed-type="framed-content"] > :is(figure),.ndla-article [data-embed-type="grid"] > div > :is(figure),.ndla-article [data-embed-type="grid-parallax"] > div > :is(figure),.ndla-article [data-embed-type="factbox"] > div > :is(figure),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(figure),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(figure),.ndla-article [data-embed-wrapper] > :is(figure),.ndla-article details > :is(figure),.ndla-article [data-embed-type="expandable-box"] blockquote > :is(figure) {
|
|
144
144
|
margin-block-start: var(--spacing-xxlarge);
|
|
145
145
|
margin-block-end: var(--spacing-xxlarge);
|
|
146
146
|
}
|
|
147
147
|
|
|
148
|
-
.ndla-article section:not([class]) > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article section:not([class]) > div:not([class]) > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="framed-content"] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="grid"] > div > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="factbox"] > div > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-wrapper] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article details > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article blockquote > :is(p, ul, ol, dl, [data-embed-type="speech"]) {
|
|
148
|
+
.ndla-article section:not([class]) > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article section:not([class]) > div:not([class]) > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="framed-content"] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="grid"] > div > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="factbox"] > div > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-wrapper] > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article details > :is(p, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="expandable-box"] blockquote > :is(p, ul, ol, dl, [data-embed-type="speech"]) {
|
|
149
149
|
margin-block-start: var(--spacing-xsmall);
|
|
150
150
|
margin-block-end: var(--spacing-xsmall);
|
|
151
151
|
}
|
|
152
152
|
|
|
153
|
+
.ndla-article section:not([class]) > :is([data-embed-type="ordered-list"]),.ndla-article section:not([class]) > div:not([class]) > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="framed-content"] > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="grid"] > div > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="factbox"] > div > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-wrapper] > :is([data-embed-type="ordered-list"]),.ndla-article details > :is([data-embed-type="ordered-list"]),.ndla-article [data-embed-type="expandable-box"] blockquote > :is([data-embed-type="ordered-list"]) {
|
|
154
|
+
margin-inline-start: var(--spacing-xlarge) !important;
|
|
155
|
+
}
|
|
156
|
+
|
|
153
157
|
.ndla-article [data-embed-type="framed-content"] > :first-child,.ndla-article [data-embed-type="grid"] > div > :first-child,.ndla-article [data-embed-type="grid-parallax"] > div > :first-child,.ndla-article [data-embed-type="factbox"] > div > :first-child,.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :first-child,.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :first-child,.ndla-article details > :first-child,.ndla-article blockquote > :first-child {
|
|
154
158
|
margin-block-start: 0;
|
|
155
159
|
}
|
|
@@ -314,24 +318,24 @@
|
|
|
314
318
|
}
|
|
315
319
|
|
|
316
320
|
@media screen and (max-width: 37.56rem) {
|
|
317
|
-
.ndla-article details,.ndla-article :not(li) > blockquote,.ndla-article [data-embed-type="framed-content"],.ndla-article [data-embed-type="factbox"],.ndla-article table,.ndla-article [data-embed-type="related-content-list"],.ndla-article [data-embed-type="link-block-list"],.ndla-article [data-embed-type="blog-post"],.ndla-article [data-embed-type="campaign-block"],.ndla-article [data-embed-type="key-figure"],.ndla-article [data-embed-type="grid"],.ndla-article [data-embed-type="contact-block"],.ndla-article [data-embed-type="file-list"],.ndla-article [data-embed-type="uu-disclaimer"] {
|
|
321
|
+
.ndla-article details,.ndla-article :not(li) > blockquote,.ndla-article [data-embed-type="expandable-box"],.ndla-article [data-embed-type="framed-content"],.ndla-article [data-embed-type="factbox"],.ndla-article table,.ndla-article [data-embed-type="related-content-list"],.ndla-article [data-embed-type="link-block-list"],.ndla-article [data-embed-type="blog-post"],.ndla-article [data-embed-type="campaign-block"],.ndla-article [data-embed-type="key-figure"],.ndla-article [data-embed-type="grid"],.ndla-article [data-embed-type="contact-block"],.ndla-article [data-embed-type="file-list"],.ndla-article [data-embed-type="uu-disclaimer"] {
|
|
318
322
|
margin-block-start: var(--spacing-xlarge);
|
|
319
323
|
margin-block-end: var(--spacing-xlarge);
|
|
320
324
|
}
|
|
321
325
|
|
|
322
|
-
.ndla-article section:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article section:not([class]) > div:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="framed-content"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="factbox"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-wrapper] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article details > :is(h2, [data-embed-type="copy-heading"]),.ndla-article blockquote > :is(h2, [data-embed-type="copy-heading"]) {
|
|
326
|
+
.ndla-article section:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article section:not([class]) > div:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="framed-content"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="factbox"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-wrapper] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article details > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="expandable-box"] blockquote > :is(h2, [data-embed-type="copy-heading"]) {
|
|
323
327
|
margin-block-start: var(--spacing-large);
|
|
324
328
|
}
|
|
325
329
|
|
|
326
|
-
.ndla-article section:not([class]) > h3,.ndla-article section:not([class]) > div:not([class]) > h3,.ndla-article [data-embed-type="framed-content"] > h3,.ndla-article [data-embed-type="grid"] > div > h3,.ndla-article [data-embed-type="grid-parallax"] > div > h3,.ndla-article [data-embed-type="factbox"] > div > h3,.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > h3,.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > h3,.ndla-article [data-embed-wrapper] > h3,.ndla-article details > h3,.ndla-article blockquote > h3 {
|
|
330
|
+
.ndla-article section:not([class]) > h3,.ndla-article section:not([class]) > div:not([class]) > h3,.ndla-article [data-embed-type="framed-content"] > h3,.ndla-article [data-embed-type="grid"] > div > h3,.ndla-article [data-embed-type="grid-parallax"] > div > h3,.ndla-article [data-embed-type="factbox"] > div > h3,.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > h3,.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > h3,.ndla-article [data-embed-wrapper] > h3,.ndla-article details > h3,.ndla-article [data-embed-type="expandable-box"] blockquote > h3 {
|
|
327
331
|
margin-block-start: var(--spacing-medium);
|
|
328
332
|
}
|
|
329
333
|
|
|
330
|
-
.ndla-article section:not([class]) > :is(h4, h5, h6),.ndla-article section:not([class]) > div:not([class]) > :is(h4, h5, h6),.ndla-article [data-embed-type="framed-content"] > :is(h4, h5, h6),.ndla-article [data-embed-type="grid"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="factbox"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h4, h5, h6),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h4, h5, h6),.ndla-article [data-embed-wrapper] > :is(h4, h5, h6),.ndla-article details > :is(h4, h5, h6),.ndla-article blockquote > :is(h4, h5, h6) {
|
|
334
|
+
.ndla-article section:not([class]) > :is(h4, h5, h6),.ndla-article section:not([class]) > div:not([class]) > :is(h4, h5, h6),.ndla-article [data-embed-type="framed-content"] > :is(h4, h5, h6),.ndla-article [data-embed-type="grid"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="factbox"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(h4, h5, h6),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(h4, h5, h6),.ndla-article [data-embed-wrapper] > :is(h4, h5, h6),.ndla-article details > :is(h4, h5, h6),.ndla-article [data-embed-type="expandable-box"] blockquote > :is(h4, h5, h6) {
|
|
331
335
|
margin-block-start: var(--spacing-small);
|
|
332
336
|
}
|
|
333
337
|
|
|
334
|
-
.ndla-article section:not([class]) > :is(figure),.ndla-article section:not([class]) > div:not([class]) > :is(figure),.ndla-article [data-embed-type="framed-content"] > :is(figure),.ndla-article [data-embed-type="grid"] > div > :is(figure),.ndla-article [data-embed-type="grid-parallax"] > div > :is(figure),.ndla-article [data-embed-type="factbox"] > div > :is(figure),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(figure),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(figure),.ndla-article [data-embed-wrapper] > :is(figure),.ndla-article details > :is(figure),.ndla-article blockquote > :is(figure) {
|
|
338
|
+
.ndla-article section:not([class]) > :is(figure),.ndla-article section:not([class]) > div:not([class]) > :is(figure),.ndla-article [data-embed-type="framed-content"] > :is(figure),.ndla-article [data-embed-type="grid"] > div > :is(figure),.ndla-article [data-embed-type="grid-parallax"] > div > :is(figure),.ndla-article [data-embed-type="factbox"] > div > :is(figure),.ndla-article [data-embed-type="copyright"] > [data-copyright-content] > :is(figure),.ndla-article [data-embed-type="uu-disclaimer"] > [data-uu-content] > :is(figure),.ndla-article [data-embed-wrapper] > :is(figure),.ndla-article details > :is(figure),.ndla-article [data-embed-type="expandable-box"] blockquote > :is(figure) {
|
|
335
339
|
margin-block-start: var(--spacing-xlarge);
|
|
336
340
|
}
|
|
337
341
|
|
package/es/globalCss.js
CHANGED
|
@@ -68,7 +68,7 @@ export const globalCss = defineGlobalStyles({
|
|
|
68
68
|
textStyle: "body.article",
|
|
69
69
|
width: "100%",
|
|
70
70
|
// Non-figure block elements that should have margin above and below.
|
|
71
|
-
'& details, :not(li) > blockquote, [data-embed-type="framed-content"], [data-embed-type="factbox"], table, [data-embed-type="related-content-list"], [data-embed-type="link-block-list"], [data-embed-type="blog-post"], [data-embed-type="campaign-block"], [data-embed-type="key-figure"], [data-embed-type="grid"], [data-embed-type="contact-block"], [data-embed-type="file-list"], [data-embed-type="uu-disclaimer"]': {
|
|
71
|
+
'& details, :not(li) > blockquote, [data-embed-type="expandable-box"], [data-embed-type="framed-content"], [data-embed-type="factbox"], table, [data-embed-type="related-content-list"], [data-embed-type="link-block-list"], [data-embed-type="blog-post"], [data-embed-type="campaign-block"], [data-embed-type="key-figure"], [data-embed-type="grid"], [data-embed-type="contact-block"], [data-embed-type="file-list"], [data-embed-type="uu-disclaimer"]': {
|
|
72
72
|
marginBlockStart: "xxlarge",
|
|
73
73
|
marginBlockEnd: "xxlarge",
|
|
74
74
|
tabletDown: {
|
|
@@ -77,7 +77,7 @@ export const globalCss = defineGlobalStyles({
|
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
79
|
// Article content is usually wrapped in a section. The rest of the elements in this list contains other elements, and should add margin to them no matter where they are placed in the DOM.
|
|
80
|
-
'& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"] > [data-copyright-content], [data-embed-type="uu-disclaimer"] > [data-uu-content], [data-embed-wrapper], details, blockquote': {
|
|
80
|
+
'& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"] > [data-copyright-content], [data-embed-type="uu-disclaimer"] > [data-uu-content], [data-embed-wrapper], details, [data-embed-type="expandable-box"] blockquote': {
|
|
81
81
|
'& > :is(h2, [data-embed-type="copy-heading"])': {
|
|
82
82
|
marginBlockStart: "xlarge",
|
|
83
83
|
marginBlockEnd: "small",
|
|
@@ -109,6 +109,9 @@ export const globalCss = defineGlobalStyles({
|
|
|
109
109
|
'& > :is(p, ul, ol, dl, [data-embed-type="speech"])': {
|
|
110
110
|
marginBlockStart: "xsmall",
|
|
111
111
|
marginBlockEnd: "xsmall"
|
|
112
|
+
},
|
|
113
|
+
'& > :is([data-embed-type="ordered-list"])': {
|
|
114
|
+
marginInlineStart: "xlarge!"
|
|
112
115
|
}
|
|
113
116
|
},
|
|
114
117
|
'& [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"] > [data-copyright-content], [data-embed-type="uu-disclaimer"] > [data-uu-content], details, blockquote': {
|
|
@@ -38,7 +38,7 @@ export const transformStyledFn = args => {
|
|
|
38
38
|
factoryJs.code = factoryJs.code.replace(propsCode, `const { as: Element = __base__, consumeCss, children, ...restProps } = props
|
|
39
39
|
|
|
40
40
|
const consume = props.asChild
|
|
41
|
-
? consumeCss && options.baseComponent
|
|
41
|
+
? consumeCss && (options.baseComponent || Dynamic.__baseComponent__)
|
|
42
42
|
: consumeCss ?? contextConsume`);
|
|
43
43
|
const cvaCode = "const cvaStyles = __cvaFn__.raw(variantProps)";
|
|
44
44
|
factoryJs.code = factoryJs.code.replace(cvaCode, `${cvaCode}
|
|
@@ -46,6 +46,9 @@ export const transformStyledFn = args => {
|
|
|
46
46
|
return css.raw(cvaStyles, propStyles, cssStyles)
|
|
47
47
|
}`);
|
|
48
48
|
factoryJs.code = factoryJs.code.replace("className: classes()", `...(consume ? { className: classes() } : { css: classes(), consumeCss } )`);
|
|
49
|
+
const styledComponentForwardPropDeclaration = `StyledComponent.__shouldForwardProps__ = shouldForwardProp`;
|
|
50
|
+
factoryJs.code = factoryJs.code.replace(styledComponentForwardPropDeclaration, `${styledComponentForwardPropDeclaration}
|
|
51
|
+
StyledComponent.__baseComponent__ = options.baseComponent ?? Dynamic.__baseComponent__`);
|
|
49
52
|
const shouldForwardPropCode = "shouldForwardProp?(prop: string, variantKeys: string[]): boolean";
|
|
50
53
|
jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode, `${shouldForwardPropCode}
|
|
51
54
|
/**
|
package/lib/globalCss.js
CHANGED
|
@@ -74,7 +74,7 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
|
|
|
74
74
|
textStyle: "body.article",
|
|
75
75
|
width: "100%",
|
|
76
76
|
// Non-figure block elements that should have margin above and below.
|
|
77
|
-
'& details, :not(li) > blockquote, [data-embed-type="framed-content"], [data-embed-type="factbox"], table, [data-embed-type="related-content-list"], [data-embed-type="link-block-list"], [data-embed-type="blog-post"], [data-embed-type="campaign-block"], [data-embed-type="key-figure"], [data-embed-type="grid"], [data-embed-type="contact-block"], [data-embed-type="file-list"], [data-embed-type="uu-disclaimer"]': {
|
|
77
|
+
'& details, :not(li) > blockquote, [data-embed-type="expandable-box"], [data-embed-type="framed-content"], [data-embed-type="factbox"], table, [data-embed-type="related-content-list"], [data-embed-type="link-block-list"], [data-embed-type="blog-post"], [data-embed-type="campaign-block"], [data-embed-type="key-figure"], [data-embed-type="grid"], [data-embed-type="contact-block"], [data-embed-type="file-list"], [data-embed-type="uu-disclaimer"]': {
|
|
78
78
|
marginBlockStart: "xxlarge",
|
|
79
79
|
marginBlockEnd: "xxlarge",
|
|
80
80
|
tabletDown: {
|
|
@@ -83,7 +83,7 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
|
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
// Article content is usually wrapped in a section. The rest of the elements in this list contains other elements, and should add margin to them no matter where they are placed in the DOM.
|
|
86
|
-
'& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"] > [data-copyright-content], [data-embed-type="uu-disclaimer"] > [data-uu-content], [data-embed-wrapper], details, blockquote': {
|
|
86
|
+
'& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"] > [data-copyright-content], [data-embed-type="uu-disclaimer"] > [data-uu-content], [data-embed-wrapper], details, [data-embed-type="expandable-box"] blockquote': {
|
|
87
87
|
'& > :is(h2, [data-embed-type="copy-heading"])': {
|
|
88
88
|
marginBlockStart: "xlarge",
|
|
89
89
|
marginBlockEnd: "small",
|
|
@@ -115,6 +115,9 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
|
|
|
115
115
|
'& > :is(p, ul, ol, dl, [data-embed-type="speech"])': {
|
|
116
116
|
marginBlockStart: "xsmall",
|
|
117
117
|
marginBlockEnd: "xsmall"
|
|
118
|
+
},
|
|
119
|
+
'& > :is([data-embed-type="ordered-list"])': {
|
|
120
|
+
marginInlineStart: "xlarge!"
|
|
118
121
|
}
|
|
119
122
|
},
|
|
120
123
|
'& [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"] > [data-copyright-content], [data-embed-type="uu-disclaimer"] > [data-uu-content], details, blockquote': {
|
|
@@ -45,7 +45,7 @@ const transformStyledFn = args => {
|
|
|
45
45
|
factoryJs.code = factoryJs.code.replace(propsCode, `const { as: Element = __base__, consumeCss, children, ...restProps } = props
|
|
46
46
|
|
|
47
47
|
const consume = props.asChild
|
|
48
|
-
? consumeCss && options.baseComponent
|
|
48
|
+
? consumeCss && (options.baseComponent || Dynamic.__baseComponent__)
|
|
49
49
|
: consumeCss ?? contextConsume`);
|
|
50
50
|
const cvaCode = "const cvaStyles = __cvaFn__.raw(variantProps)";
|
|
51
51
|
factoryJs.code = factoryJs.code.replace(cvaCode, `${cvaCode}
|
|
@@ -53,6 +53,9 @@ const transformStyledFn = args => {
|
|
|
53
53
|
return css.raw(cvaStyles, propStyles, cssStyles)
|
|
54
54
|
}`);
|
|
55
55
|
factoryJs.code = factoryJs.code.replace("className: classes()", `...(consume ? { className: classes() } : { css: classes(), consumeCss } )`);
|
|
56
|
+
const styledComponentForwardPropDeclaration = `StyledComponent.__shouldForwardProps__ = shouldForwardProp`;
|
|
57
|
+
factoryJs.code = factoryJs.code.replace(styledComponentForwardPropDeclaration, `${styledComponentForwardPropDeclaration}
|
|
58
|
+
StyledComponent.__baseComponent__ = options.baseComponent ?? Dynamic.__baseComponent__`);
|
|
56
59
|
const shouldForwardPropCode = "shouldForwardProp?(prop: string, variantKeys: string[]): boolean";
|
|
57
60
|
jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode, `${shouldForwardPropCode}
|
|
58
61
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/preset-panda",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.39",
|
|
4
4
|
"description": "Panda preset for NDLA.",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"publishConfig": {
|
|
38
38
|
"access": "public"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "98f727d2e22b4030ec61672a8f843b2d0d0ef278"
|
|
41
41
|
}
|