@redacto.io/consent-sdk-react 0.0.2 → 0.0.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/index.js
CHANGED
|
@@ -342,7 +342,13 @@ var styles = {
|
|
|
342
342
|
borderRadius: "5px",
|
|
343
343
|
border: "2px solid #d0d5dd",
|
|
344
344
|
margin: 0,
|
|
345
|
-
boxSizing: "border-box"
|
|
345
|
+
boxSizing: "border-box",
|
|
346
|
+
appearance: "none",
|
|
347
|
+
WebkitAppearance: "none",
|
|
348
|
+
MozAppearance: "none",
|
|
349
|
+
cursor: "pointer",
|
|
350
|
+
position: "relative",
|
|
351
|
+
backgroundColor: "transparent"
|
|
346
352
|
},
|
|
347
353
|
dataElementsContainer: {
|
|
348
354
|
marginLeft: "27px",
|
|
@@ -380,7 +386,13 @@ var styles = {
|
|
|
380
386
|
borderRadius: "5px",
|
|
381
387
|
border: "2px solid #d0d5dd",
|
|
382
388
|
margin: 0,
|
|
383
|
-
boxSizing: "border-box"
|
|
389
|
+
boxSizing: "border-box",
|
|
390
|
+
appearance: "none",
|
|
391
|
+
WebkitAppearance: "none",
|
|
392
|
+
MozAppearance: "none",
|
|
393
|
+
cursor: "pointer",
|
|
394
|
+
position: "relative",
|
|
395
|
+
backgroundColor: "transparent"
|
|
384
396
|
},
|
|
385
397
|
bottomSection: {
|
|
386
398
|
display: "flex",
|
|
@@ -504,6 +516,103 @@ var useMediaQuery = (query) => {
|
|
|
504
516
|
return matches;
|
|
505
517
|
};
|
|
506
518
|
|
|
519
|
+
// src/RedactoNoticeConsent/injectStyles.ts
|
|
520
|
+
var stylesInjected = false;
|
|
521
|
+
var injectCheckboxStyles = () => {
|
|
522
|
+
if (stylesInjected || typeof document === "undefined") {
|
|
523
|
+
return;
|
|
524
|
+
}
|
|
525
|
+
const STYLE_ID = "redacto-consent-checkbox-styles";
|
|
526
|
+
if (document.getElementById(STYLE_ID)) {
|
|
527
|
+
stylesInjected = true;
|
|
528
|
+
return;
|
|
529
|
+
}
|
|
530
|
+
const style = document.createElement("style");
|
|
531
|
+
style.id = STYLE_ID;
|
|
532
|
+
style.textContent = `
|
|
533
|
+
/* Redacto Consent SDK Checkbox Styles */
|
|
534
|
+
.redacto-checkbox-large {
|
|
535
|
+
appearance: none !important;
|
|
536
|
+
-webkit-appearance: none !important;
|
|
537
|
+
-moz-appearance: none !important;
|
|
538
|
+
height: 20px !important;
|
|
539
|
+
width: 20px !important;
|
|
540
|
+
border: 2px solid #d0d5dd !important;
|
|
541
|
+
border-radius: 5px !important;
|
|
542
|
+
background-color: transparent !important;
|
|
543
|
+
cursor: pointer !important;
|
|
544
|
+
position: relative !important;
|
|
545
|
+
box-sizing: border-box !important;
|
|
546
|
+
margin: 0 !important;
|
|
547
|
+
padding: 4px !important;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
.redacto-checkbox-small {
|
|
551
|
+
appearance: none !important;
|
|
552
|
+
-webkit-appearance: none !important;
|
|
553
|
+
-moz-appearance: none !important;
|
|
554
|
+
height: 16px !important;
|
|
555
|
+
width: 16px !important;
|
|
556
|
+
border: 2px solid #d0d5dd !important;
|
|
557
|
+
border-radius: 5px !important;
|
|
558
|
+
background-color: transparent !important;
|
|
559
|
+
cursor: pointer !important;
|
|
560
|
+
position: relative !important;
|
|
561
|
+
box-sizing: border-box !important;
|
|
562
|
+
margin: 0 !important;
|
|
563
|
+
padding: 4px !important;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
.redacto-checkbox-large:checked {
|
|
567
|
+
background-color: #4f87ff !important;
|
|
568
|
+
border-color: #4f87ff !important;
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
.redacto-checkbox-small:checked {
|
|
572
|
+
background-color: #4f87ff !important;
|
|
573
|
+
border-color: #4f87ff !important;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
.redacto-checkbox-large:checked::after {
|
|
577
|
+
content: '' !important;
|
|
578
|
+
position: absolute !important;
|
|
579
|
+
left: 50% !important;
|
|
580
|
+
top: 50% !important;
|
|
581
|
+
transform: translate(-50%, -50%) rotate(45deg) !important;
|
|
582
|
+
width: 4px !important;
|
|
583
|
+
height: 8px !important;
|
|
584
|
+
border: solid white !important;
|
|
585
|
+
border-width: 0 2px 2px 0 !important;
|
|
586
|
+
box-sizing: border-box !important;
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
.redacto-checkbox-small:checked::after {
|
|
590
|
+
content: '' !important;
|
|
591
|
+
position: absolute !important;
|
|
592
|
+
left: 50% !important;
|
|
593
|
+
top: 50% !important;
|
|
594
|
+
transform: translate(-50%, -50%) rotate(45deg) !important;
|
|
595
|
+
width: 3px !important;
|
|
596
|
+
height: 6px !important;
|
|
597
|
+
border: solid white !important;
|
|
598
|
+
border-width: 0 1.5px 1.5px 0 !important;
|
|
599
|
+
box-sizing: border-box !important;
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
.redacto-checkbox-large:focus {
|
|
603
|
+
outline: 2px solid #4f87ff !important;
|
|
604
|
+
outline-offset: 2px !important;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.redacto-checkbox-small:focus {
|
|
608
|
+
outline: 2px solid #4f87ff !important;
|
|
609
|
+
outline-offset: 2px !important;
|
|
610
|
+
}
|
|
611
|
+
`;
|
|
612
|
+
document.head.appendChild(style);
|
|
613
|
+
stylesInjected = true;
|
|
614
|
+
};
|
|
615
|
+
|
|
507
616
|
// src/RedactoNoticeConsent/RedactoNoticeConsent.tsx
|
|
508
617
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
509
618
|
var RedactoNoticeConsent = ({
|
|
@@ -723,6 +832,7 @@ var RedactoNoticeConsent = ({
|
|
|
723
832
|
}
|
|
724
833
|
};
|
|
725
834
|
(0, import_react2.useEffect)(() => {
|
|
835
|
+
injectCheckboxStyles();
|
|
726
836
|
fetchNotice();
|
|
727
837
|
}, [
|
|
728
838
|
noticeId,
|
|
@@ -1378,7 +1488,7 @@ var RedactoNoticeConsent = ({
|
|
|
1378
1488
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1379
1489
|
"input",
|
|
1380
1490
|
{
|
|
1381
|
-
|
|
1491
|
+
className: "redacto-checkbox-large",
|
|
1382
1492
|
type: "checkbox",
|
|
1383
1493
|
checked: selectedPurposes[purpose.uuid] || false,
|
|
1384
1494
|
onChange: () => handlePurposeCheckboxChange(purpose.uuid),
|
|
@@ -1431,7 +1541,7 @@ var RedactoNoticeConsent = ({
|
|
|
1431
1541
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1432
1542
|
"input",
|
|
1433
1543
|
{
|
|
1434
|
-
|
|
1544
|
+
className: "redacto-checkbox-small",
|
|
1435
1545
|
type: "checkbox",
|
|
1436
1546
|
checked: selectedDataElements[`${purpose.uuid}-${dataElement.uuid}`] || false,
|
|
1437
1547
|
onChange: () => handleDataElementCheckboxChange(
|
package/dist/index.mjs
CHANGED
|
@@ -316,7 +316,13 @@ var styles = {
|
|
|
316
316
|
borderRadius: "5px",
|
|
317
317
|
border: "2px solid #d0d5dd",
|
|
318
318
|
margin: 0,
|
|
319
|
-
boxSizing: "border-box"
|
|
319
|
+
boxSizing: "border-box",
|
|
320
|
+
appearance: "none",
|
|
321
|
+
WebkitAppearance: "none",
|
|
322
|
+
MozAppearance: "none",
|
|
323
|
+
cursor: "pointer",
|
|
324
|
+
position: "relative",
|
|
325
|
+
backgroundColor: "transparent"
|
|
320
326
|
},
|
|
321
327
|
dataElementsContainer: {
|
|
322
328
|
marginLeft: "27px",
|
|
@@ -354,7 +360,13 @@ var styles = {
|
|
|
354
360
|
borderRadius: "5px",
|
|
355
361
|
border: "2px solid #d0d5dd",
|
|
356
362
|
margin: 0,
|
|
357
|
-
boxSizing: "border-box"
|
|
363
|
+
boxSizing: "border-box",
|
|
364
|
+
appearance: "none",
|
|
365
|
+
WebkitAppearance: "none",
|
|
366
|
+
MozAppearance: "none",
|
|
367
|
+
cursor: "pointer",
|
|
368
|
+
position: "relative",
|
|
369
|
+
backgroundColor: "transparent"
|
|
358
370
|
},
|
|
359
371
|
bottomSection: {
|
|
360
372
|
display: "flex",
|
|
@@ -478,6 +490,103 @@ var useMediaQuery = (query) => {
|
|
|
478
490
|
return matches;
|
|
479
491
|
};
|
|
480
492
|
|
|
493
|
+
// src/RedactoNoticeConsent/injectStyles.ts
|
|
494
|
+
var stylesInjected = false;
|
|
495
|
+
var injectCheckboxStyles = () => {
|
|
496
|
+
if (stylesInjected || typeof document === "undefined") {
|
|
497
|
+
return;
|
|
498
|
+
}
|
|
499
|
+
const STYLE_ID = "redacto-consent-checkbox-styles";
|
|
500
|
+
if (document.getElementById(STYLE_ID)) {
|
|
501
|
+
stylesInjected = true;
|
|
502
|
+
return;
|
|
503
|
+
}
|
|
504
|
+
const style = document.createElement("style");
|
|
505
|
+
style.id = STYLE_ID;
|
|
506
|
+
style.textContent = `
|
|
507
|
+
/* Redacto Consent SDK Checkbox Styles */
|
|
508
|
+
.redacto-checkbox-large {
|
|
509
|
+
appearance: none !important;
|
|
510
|
+
-webkit-appearance: none !important;
|
|
511
|
+
-moz-appearance: none !important;
|
|
512
|
+
height: 20px !important;
|
|
513
|
+
width: 20px !important;
|
|
514
|
+
border: 2px solid #d0d5dd !important;
|
|
515
|
+
border-radius: 5px !important;
|
|
516
|
+
background-color: transparent !important;
|
|
517
|
+
cursor: pointer !important;
|
|
518
|
+
position: relative !important;
|
|
519
|
+
box-sizing: border-box !important;
|
|
520
|
+
margin: 0 !important;
|
|
521
|
+
padding: 4px !important;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
.redacto-checkbox-small {
|
|
525
|
+
appearance: none !important;
|
|
526
|
+
-webkit-appearance: none !important;
|
|
527
|
+
-moz-appearance: none !important;
|
|
528
|
+
height: 16px !important;
|
|
529
|
+
width: 16px !important;
|
|
530
|
+
border: 2px solid #d0d5dd !important;
|
|
531
|
+
border-radius: 5px !important;
|
|
532
|
+
background-color: transparent !important;
|
|
533
|
+
cursor: pointer !important;
|
|
534
|
+
position: relative !important;
|
|
535
|
+
box-sizing: border-box !important;
|
|
536
|
+
margin: 0 !important;
|
|
537
|
+
padding: 4px !important;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
.redacto-checkbox-large:checked {
|
|
541
|
+
background-color: #4f87ff !important;
|
|
542
|
+
border-color: #4f87ff !important;
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
.redacto-checkbox-small:checked {
|
|
546
|
+
background-color: #4f87ff !important;
|
|
547
|
+
border-color: #4f87ff !important;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
.redacto-checkbox-large:checked::after {
|
|
551
|
+
content: '' !important;
|
|
552
|
+
position: absolute !important;
|
|
553
|
+
left: 50% !important;
|
|
554
|
+
top: 50% !important;
|
|
555
|
+
transform: translate(-50%, -50%) rotate(45deg) !important;
|
|
556
|
+
width: 4px !important;
|
|
557
|
+
height: 8px !important;
|
|
558
|
+
border: solid white !important;
|
|
559
|
+
border-width: 0 2px 2px 0 !important;
|
|
560
|
+
box-sizing: border-box !important;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
.redacto-checkbox-small:checked::after {
|
|
564
|
+
content: '' !important;
|
|
565
|
+
position: absolute !important;
|
|
566
|
+
left: 50% !important;
|
|
567
|
+
top: 50% !important;
|
|
568
|
+
transform: translate(-50%, -50%) rotate(45deg) !important;
|
|
569
|
+
width: 3px !important;
|
|
570
|
+
height: 6px !important;
|
|
571
|
+
border: solid white !important;
|
|
572
|
+
border-width: 0 1.5px 1.5px 0 !important;
|
|
573
|
+
box-sizing: border-box !important;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
.redacto-checkbox-large:focus {
|
|
577
|
+
outline: 2px solid #4f87ff !important;
|
|
578
|
+
outline-offset: 2px !important;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
.redacto-checkbox-small:focus {
|
|
582
|
+
outline: 2px solid #4f87ff !important;
|
|
583
|
+
outline-offset: 2px !important;
|
|
584
|
+
}
|
|
585
|
+
`;
|
|
586
|
+
document.head.appendChild(style);
|
|
587
|
+
stylesInjected = true;
|
|
588
|
+
};
|
|
589
|
+
|
|
481
590
|
// src/RedactoNoticeConsent/RedactoNoticeConsent.tsx
|
|
482
591
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
483
592
|
var RedactoNoticeConsent = ({
|
|
@@ -697,6 +806,7 @@ var RedactoNoticeConsent = ({
|
|
|
697
806
|
}
|
|
698
807
|
};
|
|
699
808
|
useEffect2(() => {
|
|
809
|
+
injectCheckboxStyles();
|
|
700
810
|
fetchNotice();
|
|
701
811
|
}, [
|
|
702
812
|
noticeId,
|
|
@@ -1352,7 +1462,7 @@ var RedactoNoticeConsent = ({
|
|
|
1352
1462
|
/* @__PURE__ */ jsx(
|
|
1353
1463
|
"input",
|
|
1354
1464
|
{
|
|
1355
|
-
|
|
1465
|
+
className: "redacto-checkbox-large",
|
|
1356
1466
|
type: "checkbox",
|
|
1357
1467
|
checked: selectedPurposes[purpose.uuid] || false,
|
|
1358
1468
|
onChange: () => handlePurposeCheckboxChange(purpose.uuid),
|
|
@@ -1405,7 +1515,7 @@ var RedactoNoticeConsent = ({
|
|
|
1405
1515
|
/* @__PURE__ */ jsx(
|
|
1406
1516
|
"input",
|
|
1407
1517
|
{
|
|
1408
|
-
|
|
1518
|
+
className: "redacto-checkbox-small",
|
|
1409
1519
|
type: "checkbox",
|
|
1410
1520
|
checked: selectedDataElements[`${purpose.uuid}-${dataElement.uuid}`] || false,
|
|
1411
1521
|
onChange: () => handleDataElementCheckboxChange(
|
package/package.json
CHANGED
|
@@ -5,6 +5,7 @@ import type { Props, TranslationObject } from "./types";
|
|
|
5
5
|
import { styles } from "./styles";
|
|
6
6
|
import logo from "./assets/redacto-logo.png";
|
|
7
7
|
import { useMediaQuery } from "./useMediaQuery";
|
|
8
|
+
import { injectCheckboxStyles } from "./injectStyles";
|
|
8
9
|
|
|
9
10
|
export const RedactoNoticeConsent = ({
|
|
10
11
|
noticeId,
|
|
@@ -262,6 +263,8 @@ export const RedactoNoticeConsent = ({
|
|
|
262
263
|
};
|
|
263
264
|
|
|
264
265
|
useEffect(() => {
|
|
266
|
+
// Inject checkbox styles when component mounts
|
|
267
|
+
injectCheckboxStyles();
|
|
265
268
|
fetchNotice();
|
|
266
269
|
}, [
|
|
267
270
|
noticeId,
|
|
@@ -950,7 +953,7 @@ export const RedactoNoticeConsent = ({
|
|
|
950
953
|
</div>
|
|
951
954
|
</div>
|
|
952
955
|
<input
|
|
953
|
-
|
|
956
|
+
className="redacto-checkbox-large"
|
|
954
957
|
type="checkbox"
|
|
955
958
|
checked={selectedPurposes[purpose.uuid] || false}
|
|
956
959
|
onChange={() =>
|
|
@@ -1000,7 +1003,7 @@ export const RedactoNoticeConsent = ({
|
|
|
1000
1003
|
)}
|
|
1001
1004
|
</span>
|
|
1002
1005
|
<input
|
|
1003
|
-
|
|
1006
|
+
className="redacto-checkbox-small"
|
|
1004
1007
|
type="checkbox"
|
|
1005
1008
|
checked={
|
|
1006
1009
|
selectedDataElements[
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
// CSS injection utility for the consent SDK
|
|
2
|
+
let stylesInjected = false;
|
|
3
|
+
|
|
4
|
+
export const injectCheckboxStyles = () => {
|
|
5
|
+
if (stylesInjected || typeof document === 'undefined') {
|
|
6
|
+
return;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const STYLE_ID = 'redacto-consent-checkbox-styles';
|
|
10
|
+
|
|
11
|
+
// Check if styles are already injected
|
|
12
|
+
if (document.getElementById(STYLE_ID)) {
|
|
13
|
+
stylesInjected = true;
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const style = document.createElement('style');
|
|
18
|
+
style.id = STYLE_ID;
|
|
19
|
+
style.textContent = `
|
|
20
|
+
/* Redacto Consent SDK Checkbox Styles */
|
|
21
|
+
.redacto-checkbox-large {
|
|
22
|
+
appearance: none !important;
|
|
23
|
+
-webkit-appearance: none !important;
|
|
24
|
+
-moz-appearance: none !important;
|
|
25
|
+
height: 20px !important;
|
|
26
|
+
width: 20px !important;
|
|
27
|
+
border: 2px solid #d0d5dd !important;
|
|
28
|
+
border-radius: 5px !important;
|
|
29
|
+
background-color: transparent !important;
|
|
30
|
+
cursor: pointer !important;
|
|
31
|
+
position: relative !important;
|
|
32
|
+
box-sizing: border-box !important;
|
|
33
|
+
margin: 0 !important;
|
|
34
|
+
padding: 4px !important;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.redacto-checkbox-small {
|
|
38
|
+
appearance: none !important;
|
|
39
|
+
-webkit-appearance: none !important;
|
|
40
|
+
-moz-appearance: none !important;
|
|
41
|
+
height: 16px !important;
|
|
42
|
+
width: 16px !important;
|
|
43
|
+
border: 2px solid #d0d5dd !important;
|
|
44
|
+
border-radius: 5px !important;
|
|
45
|
+
background-color: transparent !important;
|
|
46
|
+
cursor: pointer !important;
|
|
47
|
+
position: relative !important;
|
|
48
|
+
box-sizing: border-box !important;
|
|
49
|
+
margin: 0 !important;
|
|
50
|
+
padding: 4px !important;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.redacto-checkbox-large:checked {
|
|
54
|
+
background-color: #4f87ff !important;
|
|
55
|
+
border-color: #4f87ff !important;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.redacto-checkbox-small:checked {
|
|
59
|
+
background-color: #4f87ff !important;
|
|
60
|
+
border-color: #4f87ff !important;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.redacto-checkbox-large:checked::after {
|
|
64
|
+
content: '' !important;
|
|
65
|
+
position: absolute !important;
|
|
66
|
+
left: 50% !important;
|
|
67
|
+
top: 50% !important;
|
|
68
|
+
transform: translate(-50%, -50%) rotate(45deg) !important;
|
|
69
|
+
width: 4px !important;
|
|
70
|
+
height: 8px !important;
|
|
71
|
+
border: solid white !important;
|
|
72
|
+
border-width: 0 2px 2px 0 !important;
|
|
73
|
+
box-sizing: border-box !important;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.redacto-checkbox-small:checked::after {
|
|
77
|
+
content: '' !important;
|
|
78
|
+
position: absolute !important;
|
|
79
|
+
left: 50% !important;
|
|
80
|
+
top: 50% !important;
|
|
81
|
+
transform: translate(-50%, -50%) rotate(45deg) !important;
|
|
82
|
+
width: 3px !important;
|
|
83
|
+
height: 6px !important;
|
|
84
|
+
border: solid white !important;
|
|
85
|
+
border-width: 0 1.5px 1.5px 0 !important;
|
|
86
|
+
box-sizing: border-box !important;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.redacto-checkbox-large:focus {
|
|
90
|
+
outline: 2px solid #4f87ff !important;
|
|
91
|
+
outline-offset: 2px !important;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.redacto-checkbox-small:focus {
|
|
95
|
+
outline: 2px solid #4f87ff !important;
|
|
96
|
+
outline-offset: 2px !important;
|
|
97
|
+
}
|
|
98
|
+
`;
|
|
99
|
+
|
|
100
|
+
document.head.appendChild(style);
|
|
101
|
+
stylesInjected = true;
|
|
102
|
+
};
|
|
@@ -223,6 +223,12 @@ export const styles = {
|
|
|
223
223
|
border: "2px solid #d0d5dd",
|
|
224
224
|
margin: 0,
|
|
225
225
|
boxSizing: "border-box",
|
|
226
|
+
appearance: "none",
|
|
227
|
+
WebkitAppearance: "none",
|
|
228
|
+
MozAppearance: "none",
|
|
229
|
+
cursor: "pointer",
|
|
230
|
+
position: "relative",
|
|
231
|
+
backgroundColor: "transparent",
|
|
226
232
|
},
|
|
227
233
|
|
|
228
234
|
dataElementsContainer: {
|
|
@@ -265,6 +271,12 @@ export const styles = {
|
|
|
265
271
|
border: "2px solid #d0d5dd",
|
|
266
272
|
margin: 0,
|
|
267
273
|
boxSizing: "border-box",
|
|
274
|
+
appearance: "none",
|
|
275
|
+
WebkitAppearance: "none",
|
|
276
|
+
MozAppearance: "none",
|
|
277
|
+
cursor: "pointer",
|
|
278
|
+
position: "relative",
|
|
279
|
+
backgroundColor: "transparent",
|
|
268
280
|
},
|
|
269
281
|
|
|
270
282
|
bottomSection: {
|