@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.mjs.js
CHANGED
|
@@ -25774,9 +25774,20 @@ const Search = styled.div`
|
|
|
25774
25774
|
`;
|
|
25775
25775
|
|
|
25776
25776
|
const VideoContainer = styled.div`
|
|
25777
|
+
position: absolute;
|
|
25778
|
+
top: 0;
|
|
25779
|
+
left: 0;
|
|
25777
25780
|
width: 100%;
|
|
25781
|
+
height: 575px;
|
|
25782
|
+
@media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
|
|
25783
|
+
height: 540px;
|
|
25784
|
+
}
|
|
25785
|
+
@media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
|
|
25786
|
+
height: 420px;
|
|
25787
|
+
}
|
|
25778
25788
|
`;
|
|
25779
25789
|
|
|
25790
|
+
|
|
25780
25791
|
const VideoBackground = styled.video`
|
|
25781
25792
|
position: absolute;
|
|
25782
25793
|
top: 0;
|
|
@@ -25788,12 +25799,15 @@ const VideoBackground = styled.video`
|
|
|
25788
25799
|
@media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
|
|
25789
25800
|
height: 540px;
|
|
25790
25801
|
}
|
|
25802
|
+
@media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
|
|
25803
|
+
height: 420px;
|
|
25804
|
+
}
|
|
25791
25805
|
`;
|
|
25792
25806
|
|
|
25793
25807
|
const PlayPauseButton = styled.button`
|
|
25794
25808
|
position: absolute;
|
|
25795
|
-
bottom:
|
|
25796
|
-
right:
|
|
25809
|
+
bottom: 20px;
|
|
25810
|
+
right: 20px;
|
|
25797
25811
|
background: rgba(0, 0, 0, 0.5);
|
|
25798
25812
|
border: 1px solid white;
|
|
25799
25813
|
color: white;
|
|
@@ -25810,6 +25824,10 @@ const PlayPauseButton = styled.button`
|
|
|
25810
25824
|
&:hover {
|
|
25811
25825
|
background: rgba(0, 0, 0, 0.7);
|
|
25812
25826
|
}
|
|
25827
|
+
@media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
|
|
25828
|
+
bottom: 20px;
|
|
25829
|
+
right: 20px;
|
|
25830
|
+
}
|
|
25813
25831
|
`;
|
|
25814
25832
|
|
|
25815
25833
|
/**
|
|
@@ -25837,7 +25855,7 @@ var HeroImage = function (_a) {
|
|
|
25837
25855
|
} }, function (src) { return (React.createElement(Container$u, { "$image": src, "$backgroundBox": backgroundBox, "data-testid": "HeroImage" },
|
|
25838
25856
|
heroVideoUrl && (React.createElement(React.Fragment, null,
|
|
25839
25857
|
React.createElement(VideoContainer, null,
|
|
25840
|
-
React.createElement(VideoBackground, { ref: videoRef, autoPlay:
|
|
25858
|
+
React.createElement(VideoBackground, { ref: videoRef, autoPlay: true, loop: true, muted: true },
|
|
25841
25859
|
React.createElement("source", { src: heroVideoUrl, type: "video/mp4" }),
|
|
25842
25860
|
"Your browser doesn't support this video."),
|
|
25843
25861
|
React.createElement(PlayPauseButton, { onClick: togglePlay }, isPlaying ? '⏸' : '▶')))),
|