@cntrl-site/sdk-nextjs 1.6.14 → 1.6.15

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.
Files changed (3) hide show
  1. package/lib/components/Section/Section.js +4 -4
  2. package/package.json +2 -2
  3. package/src/components/Section/Section.tsx +4 -4
package/lib/components/Section/Section.js CHANGED
@@ -83,25 +83,25 @@ const Section = ({ section, data, children }) => {
83
83
  }
84
84
  .section-background-wrapper-${section.id} {
85
85
  transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
86
- left: 0;
87
86
  position: relative;
88
87
  height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)}};
89
88
  width: 100%;
90
89
  }
91
90
  .video-background-${section.id} {
92
91
  object-fit: ${(_a = media === null || media === void 0 ? void 0 : media.size) !== null && _a !== void 0 ? _a : 'cover'};
93
- width: 100%;
92
+ width: ${(media === null || media === void 0 ? void 0 : media.offsetX) === null || (media === null || media === void 0 ? void 0 : media.size) === 'cover' ? '100%' : 'auto'};
94
93
  height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : '100%'};
95
94
  position: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'sticky' : 'relative'};
96
95
  top: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : 'unset'};
97
- left: 0;
96
+ ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
98
97
  }
99
98
  .image-background-${section.id} {
100
99
  object-fit: ${media === null || media === void 0 ? void 0 : media.size};
101
- width: 100%;
100
+ width: ${(media === null || media === void 0 ? void 0 : media.offsetX) === null ? '100%' : 'auto'};
102
101
  height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : '100%'};
103
102
  position: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'sticky' : 'relative'};
104
103
  top: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : 'unset'};
104
+ ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
105
105
  }
106
106
  `);
107
107
  })}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.6.14",
3
+ "version": "1.6.15",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
@@ -31,7 +31,7 @@
31
31
  "@antfu/eslint-config": "^3.8.0",
32
32
  "@cntrl-site/color": "^1.0.0",
33
33
  "@cntrl-site/effects": "^1.3.2",
34
- "@cntrl-site/sdk": "^1.20.0",
34
+ "@cntrl-site/sdk": "^1.20.1",
35
35
  "@types/vimeo__player": "^2.18.0",
36
36
  "@vimeo/player": "^2.25.0",
37
37
  "html-react-parser": "^3.0.1",
package/src/components/Section/Section.tsx CHANGED
@@ -127,25 +127,25 @@ export const Section: FC<Props> = ({ section, data, children }) => {
127
127
  }
128
128
  .section-background-wrapper-${section.id} {
129
129
  transform: ${media?.position === 'fixed' ? 'translateY(-100vh)' : 'unset'};
130
- left: 0;
131
130
  position: relative;
132
131
  height: ${media?.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)}};
133
132
  width: 100%;
134
133
  }
135
134
  .video-background-${section.id} {
136
135
  object-fit: ${media?.size ?? 'cover'};
137
- width: 100%;
136
+ width: ${media?.offsetX === null || media?.size === 'cover' ? '100%' : 'auto'};
138
137
  height: ${media?.position === 'fixed' ? '100vh' : '100%'};
139
138
  position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
140
139
  top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
141
- left: 0;
140
+ ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
142
141
  }
143
142
  .image-background-${section.id} {
144
143
  object-fit: ${media?.size};
145
- width: 100%;
144
+ width: ${media?.offsetX === null ? '100%' : 'auto'};
146
145
  height: ${media?.position === 'fixed' ? '100vh' : '100%'};
147
146
  position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
148
147
  top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
148
+ ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
149
149
  }
150
150
  `
151
151
  ))