@pushengineering/umg-web-components 3.0.19 → 3.0.20
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/dist/components/media-modal/styles/content.d.ts.map +1 -1
- package/dist/components/media-modal/styles/content.js +2 -3
- package/dist/components/media-modal/styles/content.js.map +1 -1
- package/dist/docs/compositions/section-image-gallery.stories.d.ts +12 -0
- package/dist/docs/compositions/section-image-gallery.stories.d.ts.map +1 -0
- package/dist/styles/grid.js +8 -8
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../src/components/media-modal/styles/content.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../src/components/media-modal/styles/content.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,yBAkCnB,CAAA"}
|
|
@@ -9,9 +9,7 @@ const content = css `
|
|
|
9
9
|
gap: var(--umg-space-48);
|
|
10
10
|
min-height: 100%;
|
|
11
11
|
width: 100%;
|
|
12
|
-
padding
|
|
13
|
-
padding-right: var(--umg-space-16);
|
|
14
|
-
padding-left: var(--umg-space-16);
|
|
12
|
+
padding: var(--umg-space-48) var(--umg-space-16);
|
|
15
13
|
--umg-color-base-text: var(--umg-color-modal-text);
|
|
16
14
|
--umg-color-button-text: var(--umg-color-modal-background, var(--umg-color-base-background));
|
|
17
15
|
--umg-color-button-background: var(--umg-color-modal-text, var(--umg-color-base-text));
|
|
@@ -19,6 +17,7 @@ const content = css `
|
|
|
19
17
|
--umg-color-icon-border: var(--umg-color-modal-text, var(--umg-color-base-text));
|
|
20
18
|
--umg-color-icon-background: transparent;
|
|
21
19
|
}
|
|
20
|
+
|
|
22
21
|
@media only screen and (max-width: 48rem) {
|
|
23
22
|
.section__content {
|
|
24
23
|
gap: var(--umg-space-16);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.js","sources":["../../../../src/components/media-modal/styles/content.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEO,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA
|
|
1
|
+
{"version":3,"file":"content.js","sources":["../../../../src/components/media-modal/styles/content.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEO,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Meta, StoryObj as Story } from '@storybook/web-components';
|
|
2
|
+
import '../../components/page';
|
|
3
|
+
import '../../components/section';
|
|
4
|
+
import '../../components/grid';
|
|
5
|
+
import '../../components/caption-card';
|
|
6
|
+
import '../../components/image';
|
|
7
|
+
import '../../components/media-modal';
|
|
8
|
+
import '../../components/button';
|
|
9
|
+
declare const meta: Meta;
|
|
10
|
+
export default meta;
|
|
11
|
+
export declare const Primary: Story;
|
|
12
|
+
//# sourceMappingURL=section-image-gallery.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"section-image-gallery.stories.d.ts","sourceRoot":"","sources":["../../../src/docs/compositions/section-image-gallery.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAIxE,OAAO,uBAAuB,CAAA;AAC9B,OAAO,0BAA0B,CAAA;AACjC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,+BAA+B,CAAA;AACtC,OAAO,wBAAwB,CAAA;AAC/B,OAAO,8BAA8B,CAAA;AACrC,OAAO,yBAAyB,CAAA;AAIhC,QAAA,MAAM,IAAI,EAAE,IAQX,CAAA;AACD,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,OAAO,EAAE,KAsIrB,CAAA"}
|
package/dist/styles/grid.js
CHANGED
|
@@ -6,8 +6,8 @@ const grid = css `
|
|
|
6
6
|
.grid {
|
|
7
7
|
display: flex;
|
|
8
8
|
flex-wrap: wrap;
|
|
9
|
-
row-gap: var(--umg-space-grid-vertical-mobile,
|
|
10
|
-
column-gap: var(--umg-space-grid-horizontal-mobile,
|
|
9
|
+
row-gap: var(--umg-space-grid-vertical-mobile, 1rem);
|
|
10
|
+
column-gap: var(--umg-space-grid-horizontal-mobile, 1rem);
|
|
11
11
|
list-style: none;
|
|
12
12
|
margin: 0;
|
|
13
13
|
padding: 0;
|
|
@@ -24,7 +24,7 @@ const grid = css `
|
|
|
24
24
|
/* grid..grid--columns class for grids with non-slotted grid items */
|
|
25
25
|
.grid:not(.grid--columns) ::slotted(*),
|
|
26
26
|
.grid > * {
|
|
27
|
-
width: calc(25% - var(--umg-space-grid-horizontal-mobile,
|
|
27
|
+
width: calc(25% - var(--umg-space-grid-horizontal-mobile, 1rem) * 3 / 4);
|
|
28
28
|
flex-grow: 0;
|
|
29
29
|
flex-shrink: 0;
|
|
30
30
|
}
|
|
@@ -46,7 +46,7 @@ const grid = css `
|
|
|
46
46
|
}
|
|
47
47
|
.grid--2-col-tablet-down:not(.grid--columns) ::slotted(*),
|
|
48
48
|
.grid--2-col-tablet-down > * {
|
|
49
|
-
width: calc( 50% - var(--umg-space-grid-horizontal-mobile,
|
|
49
|
+
width: calc( 50% - var(--umg-space-grid-horizontal-mobile, 1rem) / 2 );
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
|
|
@@ -74,15 +74,15 @@ const grid = css `
|
|
|
74
74
|
@media screen and (min-width: 48.06rem) and (max-width: 64rem) {
|
|
75
75
|
.grid--4-col-tablet:not(.grid--columns) ::slotted(*),
|
|
76
76
|
.grid--4-col-tablet > * {
|
|
77
|
-
width: calc(25% - var(--umg-space-grid-horizontal-desktop,
|
|
77
|
+
width: calc(25% - var(--umg-space-grid-horizontal-desktop, 1.5rem) * 3 / 4);
|
|
78
78
|
}
|
|
79
79
|
.grid--3-col-tablet:not(.grid--columns) ::slotted(*),
|
|
80
80
|
.grid--3-col-tablet > * {
|
|
81
|
-
width: calc(33.33% - var(--umg-space-grid-horizontal-desktop,
|
|
81
|
+
width: calc(33.33% - var(--umg-space-grid-horizontal-desktop, 1.5rem) * 2 / 3);
|
|
82
82
|
}
|
|
83
83
|
.grid--2-col-tablet:not(.grid--columns) ::slotted(*),
|
|
84
84
|
.grid--2-col-tablet > * {
|
|
85
|
-
width: calc(50% - var(--umg-space-grid-horizontal-desktop,
|
|
85
|
+
width: calc(50% - var(--umg-space-grid-horizontal-desktop, 1.5rem) / 2);
|
|
86
86
|
}
|
|
87
87
|
.grid--1-col-tablet:not(.grid--columns) ::slotted(*),
|
|
88
88
|
.grid--1-col-tablet > * {
|
|
@@ -103,7 +103,7 @@ const grid = css `
|
|
|
103
103
|
}
|
|
104
104
|
.grid--2-col-desktop:not(.grid--columns) ::slotted(*),
|
|
105
105
|
.grid--2-col-desktop > * {
|
|
106
|
-
width: calc(50% - var(--umg-space-grid-horizontal-desktop,
|
|
106
|
+
width: calc(50% - var(--umg-space-grid-horizontal-desktop, 1.5rem) / 2);
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
`;
|