@pingux/astro 2.90.0-alpha.0 → 2.91.0-alpha.0
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/lib/cjs/components/Modal/Modal.js +2 -1
- package/lib/cjs/components/Modal/Modal.stories.js +8 -0
- package/lib/cjs/components/Modal/Modal.styles.d.ts +0 -1
- package/lib/cjs/components/Modal/Modal.styles.js +0 -1
- package/lib/cjs/styles/themes/next-gen/next-gen.d.ts +23 -0
- package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts +23 -0
- package/lib/cjs/styles/themes/next-gen/variants/variants.js +31 -1
- package/lib/components/Modal/Modal.js +2 -1
- package/lib/components/Modal/Modal.stories.js +8 -0
- package/lib/components/Modal/Modal.styles.js +0 -1
- package/lib/styles/themes/next-gen/variants/variants.js +31 -1
- package/package.json +1 -1
|
@@ -122,7 +122,8 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
122
122
|
}), title), children))));
|
|
123
123
|
});
|
|
124
124
|
Modal.defaultProps = {
|
|
125
|
-
role: 'dialog'
|
|
125
|
+
role: 'dialog',
|
|
126
|
+
size: 'small'
|
|
126
127
|
};
|
|
127
128
|
Modal.displayName = 'Modal';
|
|
128
129
|
var _default = Modal;
|
|
@@ -1668,6 +1668,9 @@ declare const _default: {
|
|
|
1668
1668
|
top: string;
|
|
1669
1669
|
transform: string;
|
|
1670
1670
|
transition: string;
|
|
1671
|
+
m: string[];
|
|
1672
|
+
overflow: string;
|
|
1673
|
+
maxHeight: string;
|
|
1671
1674
|
'&.is-open-no-transition': {
|
|
1672
1675
|
opacity: string;
|
|
1673
1676
|
transform: string;
|
|
@@ -1676,6 +1679,26 @@ declare const _default: {
|
|
|
1676
1679
|
opacity: string;
|
|
1677
1680
|
transform: string;
|
|
1678
1681
|
};
|
|
1682
|
+
'&.is-extra-small': {
|
|
1683
|
+
width: string;
|
|
1684
|
+
maxWidth: string[];
|
|
1685
|
+
};
|
|
1686
|
+
'&.is-small': {
|
|
1687
|
+
width: string;
|
|
1688
|
+
maxWidth: string[];
|
|
1689
|
+
};
|
|
1690
|
+
'&.is-medium': {
|
|
1691
|
+
width: string;
|
|
1692
|
+
maxWidth: string[];
|
|
1693
|
+
};
|
|
1694
|
+
'&.is-large': {
|
|
1695
|
+
width: string;
|
|
1696
|
+
maxWidth: string[];
|
|
1697
|
+
};
|
|
1698
|
+
'&.is-full': {
|
|
1699
|
+
width: string;
|
|
1700
|
+
maxWidth: string[];
|
|
1701
|
+
};
|
|
1679
1702
|
};
|
|
1680
1703
|
container: {
|
|
1681
1704
|
justifyContent: string;
|
|
@@ -371,6 +371,9 @@ declare const _default: {
|
|
|
371
371
|
top: string;
|
|
372
372
|
transform: string;
|
|
373
373
|
transition: string;
|
|
374
|
+
m: string[];
|
|
375
|
+
overflow: string;
|
|
376
|
+
maxHeight: string;
|
|
374
377
|
'&.is-open-no-transition': {
|
|
375
378
|
opacity: string;
|
|
376
379
|
transform: string;
|
|
@@ -379,6 +382,26 @@ declare const _default: {
|
|
|
379
382
|
opacity: string;
|
|
380
383
|
transform: string;
|
|
381
384
|
};
|
|
385
|
+
'&.is-extra-small': {
|
|
386
|
+
width: string;
|
|
387
|
+
maxWidth: string[];
|
|
388
|
+
};
|
|
389
|
+
'&.is-small': {
|
|
390
|
+
width: string;
|
|
391
|
+
maxWidth: string[];
|
|
392
|
+
};
|
|
393
|
+
'&.is-medium': {
|
|
394
|
+
width: string;
|
|
395
|
+
maxWidth: string[];
|
|
396
|
+
};
|
|
397
|
+
'&.is-large': {
|
|
398
|
+
width: string;
|
|
399
|
+
maxWidth: string[];
|
|
400
|
+
};
|
|
401
|
+
'&.is-full': {
|
|
402
|
+
width: string;
|
|
403
|
+
maxWidth: string[];
|
|
404
|
+
};
|
|
382
405
|
};
|
|
383
406
|
container: {
|
|
384
407
|
justifyContent: string;
|
|
@@ -159,14 +159,24 @@ var badges = {
|
|
|
159
159
|
badgeDeleteButton: badgeDeleteButton
|
|
160
160
|
};
|
|
161
161
|
exports.badges = badges;
|
|
162
|
+
var modalSize = {
|
|
163
|
+
xs: ['100%', '300px', '300px', '300px', '300px', '300px'],
|
|
164
|
+
sm: ['100%', '500px', '500px', '500px', '500px', '500px'],
|
|
165
|
+
md: ['100%', '500px', '500px', '500px', '800px', '800px'],
|
|
166
|
+
lg: ['100%', '500px', '500px', '500px', '800px', '1140px'],
|
|
167
|
+
full: ['100%', '100%', '100%', '100%', '100%', '100%']
|
|
168
|
+
};
|
|
162
169
|
var modal = {
|
|
163
170
|
content: {
|
|
164
171
|
pt: '15px',
|
|
165
172
|
borderRadius: '4px',
|
|
166
173
|
opacity: 0,
|
|
167
|
-
top: '
|
|
174
|
+
top: '0',
|
|
168
175
|
transform: 'translate(0, -50px)',
|
|
169
176
|
transition: 'opacity 300ms ease, transform 500ms ease-out',
|
|
177
|
+
m: ['sm', 'sm', '1.75rem auto'],
|
|
178
|
+
overflow: 'hidden',
|
|
179
|
+
maxHeight: 'calc(100vh - 3.5rem)',
|
|
170
180
|
'&.is-open-no-transition': {
|
|
171
181
|
opacity: '100%',
|
|
172
182
|
transform: 'none'
|
|
@@ -174,6 +184,26 @@ var modal = {
|
|
|
174
184
|
'&.is-open.is-transitioning': {
|
|
175
185
|
opacity: '100%',
|
|
176
186
|
transform: 'none'
|
|
187
|
+
},
|
|
188
|
+
'&.is-extra-small': {
|
|
189
|
+
width: '100%',
|
|
190
|
+
maxWidth: modalSize.xs
|
|
191
|
+
},
|
|
192
|
+
'&.is-small': {
|
|
193
|
+
width: '100%',
|
|
194
|
+
maxWidth: modalSize.sm
|
|
195
|
+
},
|
|
196
|
+
'&.is-medium': {
|
|
197
|
+
width: '100%',
|
|
198
|
+
maxWidth: modalSize.md
|
|
199
|
+
},
|
|
200
|
+
'&.is-large': {
|
|
201
|
+
width: '100%',
|
|
202
|
+
maxWidth: modalSize.lg
|
|
203
|
+
},
|
|
204
|
+
'&.is-full': {
|
|
205
|
+
width: '100%',
|
|
206
|
+
maxWidth: modalSize.full
|
|
177
207
|
}
|
|
178
208
|
},
|
|
179
209
|
container: {
|
|
@@ -150,14 +150,24 @@ export var badges = {
|
|
|
150
150
|
},
|
|
151
151
|
badgeDeleteButton: badgeDeleteButton
|
|
152
152
|
};
|
|
153
|
+
var modalSize = {
|
|
154
|
+
xs: ['100%', '300px', '300px', '300px', '300px', '300px'],
|
|
155
|
+
sm: ['100%', '500px', '500px', '500px', '500px', '500px'],
|
|
156
|
+
md: ['100%', '500px', '500px', '500px', '800px', '800px'],
|
|
157
|
+
lg: ['100%', '500px', '500px', '500px', '800px', '1140px'],
|
|
158
|
+
full: ['100%', '100%', '100%', '100%', '100%', '100%']
|
|
159
|
+
};
|
|
153
160
|
var modal = {
|
|
154
161
|
content: {
|
|
155
162
|
pt: '15px',
|
|
156
163
|
borderRadius: '4px',
|
|
157
164
|
opacity: 0,
|
|
158
|
-
top: '
|
|
165
|
+
top: '0',
|
|
159
166
|
transform: 'translate(0, -50px)',
|
|
160
167
|
transition: 'opacity 300ms ease, transform 500ms ease-out',
|
|
168
|
+
m: ['sm', 'sm', '1.75rem auto'],
|
|
169
|
+
overflow: 'hidden',
|
|
170
|
+
maxHeight: 'calc(100vh - 3.5rem)',
|
|
161
171
|
'&.is-open-no-transition': {
|
|
162
172
|
opacity: '100%',
|
|
163
173
|
transform: 'none'
|
|
@@ -165,6 +175,26 @@ var modal = {
|
|
|
165
175
|
'&.is-open.is-transitioning': {
|
|
166
176
|
opacity: '100%',
|
|
167
177
|
transform: 'none'
|
|
178
|
+
},
|
|
179
|
+
'&.is-extra-small': {
|
|
180
|
+
width: '100%',
|
|
181
|
+
maxWidth: modalSize.xs
|
|
182
|
+
},
|
|
183
|
+
'&.is-small': {
|
|
184
|
+
width: '100%',
|
|
185
|
+
maxWidth: modalSize.sm
|
|
186
|
+
},
|
|
187
|
+
'&.is-medium': {
|
|
188
|
+
width: '100%',
|
|
189
|
+
maxWidth: modalSize.md
|
|
190
|
+
},
|
|
191
|
+
'&.is-large': {
|
|
192
|
+
width: '100%',
|
|
193
|
+
maxWidth: modalSize.lg
|
|
194
|
+
},
|
|
195
|
+
'&.is-full': {
|
|
196
|
+
width: '100%',
|
|
197
|
+
maxWidth: modalSize.full
|
|
168
198
|
}
|
|
169
199
|
},
|
|
170
200
|
container: {
|