@nnc-digital/nnc-design-system 1.0.0-alpha20 → 1.0.0-alpha22
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/build/index.js +21 -3
- package/build/index.js.map +1 -1
- package/build/index.mjs.js +21 -3
- package/build/index.mjs.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -25787,9 +25787,20 @@ const Search = styled__default.default.div`
|
|
|
25787
25787
|
`;
|
|
25788
25788
|
|
|
25789
25789
|
const VideoContainer = styled__default.default.div`
|
|
25790
|
+
position: absolute;
|
|
25791
|
+
top: 0;
|
|
25792
|
+
left: 0;
|
|
25790
25793
|
width: 100%;
|
|
25794
|
+
height: 575px;
|
|
25795
|
+
@media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
|
|
25796
|
+
height: 540px;
|
|
25797
|
+
}
|
|
25798
|
+
@media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
|
|
25799
|
+
height: 420px;
|
|
25800
|
+
}
|
|
25791
25801
|
`;
|
|
25792
25802
|
|
|
25803
|
+
|
|
25793
25804
|
const VideoBackground = styled__default.default.video`
|
|
25794
25805
|
position: absolute;
|
|
25795
25806
|
top: 0;
|
|
@@ -25801,12 +25812,15 @@ const VideoBackground = styled__default.default.video`
|
|
|
25801
25812
|
@media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
|
|
25802
25813
|
height: 540px;
|
|
25803
25814
|
}
|
|
25815
|
+
@media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
|
|
25816
|
+
height: 420px;
|
|
25817
|
+
}
|
|
25804
25818
|
`;
|
|
25805
25819
|
|
|
25806
25820
|
const PlayPauseButton = styled__default.default.button`
|
|
25807
25821
|
position: absolute;
|
|
25808
|
-
bottom:
|
|
25809
|
-
right:
|
|
25822
|
+
bottom: 20px;
|
|
25823
|
+
right: 20px;
|
|
25810
25824
|
background: rgba(0, 0, 0, 0.5);
|
|
25811
25825
|
border: 1px solid white;
|
|
25812
25826
|
color: white;
|
|
@@ -25823,6 +25837,10 @@ const PlayPauseButton = styled__default.default.button`
|
|
|
25823
25837
|
&:hover {
|
|
25824
25838
|
background: rgba(0, 0, 0, 0.7);
|
|
25825
25839
|
}
|
|
25840
|
+
@media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
|
|
25841
|
+
bottom: 20px;
|
|
25842
|
+
right: 20px;
|
|
25843
|
+
}
|
|
25826
25844
|
`;
|
|
25827
25845
|
|
|
25828
25846
|
/**
|
|
@@ -25850,7 +25868,7 @@ var HeroImage = function (_a) {
|
|
|
25850
25868
|
} }, function (src) { return (React__default.default.createElement(Container$u, { "$image": src, "$backgroundBox": backgroundBox, "data-testid": "HeroImage" },
|
|
25851
25869
|
heroVideoUrl && (React__default.default.createElement(React__default.default.Fragment, null,
|
|
25852
25870
|
React__default.default.createElement(VideoContainer, null,
|
|
25853
|
-
React__default.default.createElement(VideoBackground, { ref: videoRef, autoPlay:
|
|
25871
|
+
React__default.default.createElement(VideoBackground, { ref: videoRef, autoPlay: true, loop: true, muted: true },
|
|
25854
25872
|
React__default.default.createElement("source", { src: heroVideoUrl, type: "video/mp4" }),
|
|
25855
25873
|
"Your browser doesn't support this video."),
|
|
25856
25874
|
React__default.default.createElement(PlayPauseButton, { onClick: togglePlay }, isPlaying ? '⏸' : '▶')))),
|