@nnc-digital/nnc-design-system 1.0.0-alpha25 → 1.0.0-alpha27

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 CHANGED
@@ -25792,7 +25792,7 @@ const VideoContainer = styled__default.default.div`
25792
25792
  left: 0;
25793
25793
  width: 100%;
25794
25794
  @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25795
- height: 575px;
25795
+ height: 590px;
25796
25796
  }
25797
25797
  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25798
25798
  height: 420px;
@@ -25802,7 +25802,6 @@ const VideoContainer = styled__default.default.div`
25802
25802
  }
25803
25803
  `;
25804
25804
 
25805
-
25806
25805
  const VideoBackground = styled__default.default.video`
25807
25806
  position: absolute;
25808
25807
  top: 0;
@@ -25812,41 +25811,37 @@ const VideoBackground = styled__default.default.video`
25812
25811
  object-fit: cover;
25813
25812
  z-index: -1;
25814
25813
  @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25815
- height: 575px;
25814
+ height: 590px;
25816
25815
  }
25817
25816
  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25818
25817
  height: 420px;
25819
25818
  }
25820
25819
  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25821
- height: 540px; /* Height for large and above screens */
25820
+ height: 540px;
25822
25821
  }
25823
25822
  `;
25824
25823
 
25825
25824
  const PlayPauseButton = styled__default.default.button`
25826
25825
  position: absolute;
25827
- bottom: 20px;
25828
- right: 20px;
25829
- background: rgba(0, 0, 0, 0.5);
25830
- border: 1px solid white;
25831
- color: white;
25832
- font-size: 32px;
25833
- border-radius: 50%;
25834
- width: 50px;
25835
- height: 50px;
25836
- cursor: pointer;
25837
- display: flex;
25838
- align-items: center;
25839
- justify-content: center;
25840
- z-index: 10;
25841
- &:hover {
25842
- background: rgba(0, 0, 0, 0.7);
25843
- }
25844
- @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
25845
- bottom: 140px;
25846
- }
25826
+ display: none;
25847
25827
  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
25848
25828
  bottom: 20px;
25849
25829
  right: 20px;
25830
+ display: flex;
25831
+ align-items: center;
25832
+ justify-content: center;
25833
+ z-index: 10;
25834
+ background: rgba(0, 0, 0, 0.5);
25835
+ border: 1px solid white;
25836
+ color: white;
25837
+ font-size: 32px;
25838
+ border-radius: 50%;
25839
+ width: 50px;
25840
+ height: 50px;
25841
+ cursor: pointer;
25842
+ &:hover {
25843
+ background: rgba(0, 0, 0, 0.7);
25844
+ }
25850
25845
  }
25851
25846
  `;
25852
25847