@justeattakeaway/pie-modal 0.28.0 → 0.29.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/dist/index.js +27 -27
- package/package.json +4 -4
- package/src/modal.scss +44 -29
package/dist/index.js
CHANGED
|
@@ -24,12 +24,12 @@ const ie = (n) => {
|
|
|
24
24
|
return this[r];
|
|
25
25
|
},
|
|
26
26
|
set(h) {
|
|
27
|
-
const
|
|
27
|
+
const g = this[r];
|
|
28
28
|
e.includes(h) ? this[r] = h : (console.error(
|
|
29
29
|
`<${n}> Invalid value "${h}" provided for property "${a}".`,
|
|
30
30
|
`Must be one of: ${e.join(" | ")}.`,
|
|
31
31
|
`Falling back to default value: "${t}"`
|
|
32
|
-
), this[r] = t), this.requestUpdate(a,
|
|
32
|
+
), this[r] = t), this.requestUpdate(a, g);
|
|
33
33
|
}
|
|
34
34
|
});
|
|
35
35
|
}, oe = (n) => function(t, i) {
|
|
@@ -50,28 +50,28 @@ function ne(n, e) {
|
|
|
50
50
|
function P(n, e) {
|
|
51
51
|
customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, e);
|
|
52
52
|
}
|
|
53
|
-
const
|
|
53
|
+
const _ = {
|
|
54
54
|
xs: 16,
|
|
55
55
|
s: 20,
|
|
56
56
|
m: 24,
|
|
57
57
|
l: 28,
|
|
58
58
|
xl: 32,
|
|
59
59
|
xxl: 40
|
|
60
|
-
}, W = Object.keys(
|
|
60
|
+
}, W = Object.keys(_), q = "xs", V = 8, z = 32;
|
|
61
61
|
function ae(n, e, t) {
|
|
62
62
|
const i = parseInt(n, 10), o = i % t === 0;
|
|
63
63
|
return i >= e && o;
|
|
64
64
|
}
|
|
65
65
|
const Y = {
|
|
66
|
-
large: (n) => ae(n,
|
|
66
|
+
large: (n) => ae(n, z, V),
|
|
67
67
|
regular: (n) => W.includes(n)
|
|
68
68
|
};
|
|
69
69
|
function re(n) {
|
|
70
70
|
const e = Y.large(n);
|
|
71
|
-
return { isValid: e, size: e ? n :
|
|
71
|
+
return { isValid: e, size: e ? n : z };
|
|
72
72
|
}
|
|
73
73
|
function le(n) {
|
|
74
|
-
const e = Y.regular(n), t = e ?
|
|
74
|
+
const e = Y.regular(n), t = e ? _[n] : _[q];
|
|
75
75
|
return { isValid: e, size: t };
|
|
76
76
|
}
|
|
77
77
|
const u = (n, e, t, i) => {
|
|
@@ -79,11 +79,11 @@ const u = (n, e, t, i) => {
|
|
|
79
79
|
let a, r;
|
|
80
80
|
if (t) {
|
|
81
81
|
if ({ isValid: a, size: r } = o ? re(t) : le(t), !a) {
|
|
82
|
-
const h = o ? `Invalid prop "size" value supplied to "${i}". The prop value should be a number equal or greater than ${
|
|
82
|
+
const h = o ? `Invalid prop "size" value supplied to "${i}". The prop value should be a number equal or greater than ${z} and multiple of ${V}.` : `Invalid prop "size" value supplied to "${i}". The prop value should be one of the following values: ${W.join(", ")}.`;
|
|
83
83
|
console.error(h);
|
|
84
84
|
}
|
|
85
85
|
} else
|
|
86
|
-
r = o ?
|
|
86
|
+
r = o ? z : _[q];
|
|
87
87
|
return {
|
|
88
88
|
class: [n, e].filter(Boolean).join(" "),
|
|
89
89
|
width: r,
|
|
@@ -139,7 +139,7 @@ var he = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, T = (n, e,
|
|
|
139
139
|
(r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
|
|
140
140
|
return i && o && he(e, t, o), o;
|
|
141
141
|
};
|
|
142
|
-
const
|
|
142
|
+
const me = "icon-chevron-left";
|
|
143
143
|
class w extends $ {
|
|
144
144
|
constructor() {
|
|
145
145
|
super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronLeft";
|
|
@@ -177,11 +177,11 @@ T([
|
|
|
177
177
|
T([
|
|
178
178
|
O("svg")
|
|
179
179
|
], w.prototype, "_svg", 2);
|
|
180
|
-
P(
|
|
181
|
-
var
|
|
180
|
+
P(me, w);
|
|
181
|
+
var ge = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, j = (n, e, t, i) => {
|
|
182
182
|
for (var o = i > 1 ? void 0 : i ? ue(e, t) : e, a = n.length - 1, r; a >= 0; a--)
|
|
183
183
|
(r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
|
|
184
|
-
return i && o &&
|
|
184
|
+
return i && o && ge(e, t, o), o;
|
|
185
185
|
};
|
|
186
186
|
const ve = "icon-chevron-right";
|
|
187
187
|
class y extends $ {
|
|
@@ -239,8 +239,8 @@ if (typeof window < "u") {
|
|
|
239
239
|
};
|
|
240
240
|
window.addEventListener("testPassive", null, N), window.removeEventListener("testPassive", null, N);
|
|
241
241
|
}
|
|
242
|
-
var U = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1),
|
|
243
|
-
return
|
|
242
|
+
var U = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), m = [], C = !1, H = -1, v = void 0, f = void 0, Z = function(e) {
|
|
243
|
+
return m.some(function(t) {
|
|
244
244
|
return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
|
|
245
245
|
});
|
|
246
246
|
}, A = function(e) {
|
|
@@ -264,29 +264,29 @@ var U = typeof window < "u" && window.navigator && window.navigator.platform &&
|
|
|
264
264
|
console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
|
|
265
265
|
return;
|
|
266
266
|
}
|
|
267
|
-
if (!
|
|
267
|
+
if (!m.some(function(o) {
|
|
268
268
|
return o.targetElement === e;
|
|
269
269
|
})) {
|
|
270
270
|
var i = {
|
|
271
271
|
targetElement: e,
|
|
272
272
|
options: t || {}
|
|
273
273
|
};
|
|
274
|
-
|
|
274
|
+
m = [].concat(fe(m), [i]), U ? (e.ontouchstart = function(o) {
|
|
275
275
|
o.targetTouches.length === 1 && (H = o.targetTouches[0].clientY);
|
|
276
276
|
}, e.ontouchmove = function(o) {
|
|
277
277
|
o.targetTouches.length === 1 && ke(o, e);
|
|
278
278
|
}, C || (document.addEventListener("touchmove", A, F ? { passive: !1 } : void 0), C = !0)) : be(t);
|
|
279
279
|
}
|
|
280
|
-
},
|
|
280
|
+
}, _e = function(e) {
|
|
281
281
|
if (!e) {
|
|
282
282
|
console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
|
|
283
283
|
return;
|
|
284
284
|
}
|
|
285
|
-
|
|
285
|
+
m = m.filter(function(t) {
|
|
286
286
|
return t.targetElement !== e;
|
|
287
|
-
}), U ? (e.ontouchstart = null, e.ontouchmove = null, C &&
|
|
287
|
+
}), U ? (e.ontouchstart = null, e.ontouchmove = null, C && m.length === 0 && (document.removeEventListener("touchmove", A, F ? { passive: !1 } : void 0), C = !1)) : m.length || we();
|
|
288
288
|
};
|
|
289
|
-
const
|
|
289
|
+
const ze = `dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}@media (max-width: 767px){.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline:var(--dt-spacing-d);margin-block:14px}@media (min-width: 768px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline:var(--dt-spacing-e);margin-block:20px}}.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-b) var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-c) var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-none) var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-none) var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--spinner-size: 48px;--spinner-border-width: 6px;--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;min-block-size:var(--dt-spacing-j);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline:var(--modal-content-padding-inline);padding-block:var(--modal-content-padding-block);flex-grow:1}@media (min-width: 768px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal .c-modal-content:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;opacity:0}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;height:100%;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal[isfooterpinned] .c-modal-content{overflow-y:auto}.c-modal[isLoading] .c-modal-content:before{animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);opacity:1}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{opacity:0}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
|
|
290
290
|
`, Ce = ["h1", "h2", "h3", "h4", "h5", "h6"], Ae = ["small", "medium", "large"], $e = ["top", "center"], B = "pie-modal-close", x = "pie-modal-open", S = "pie-modal-back", Oe = "pie-modal-leading-action-click", Le = "pie-modal-supporting-action-click";
|
|
291
291
|
var Be = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, d = (n, e, t, i) => {
|
|
292
292
|
for (var o = i > 1 ? void 0 : i ? Se(e, t) : e, a = n.length - 1, r; a >= 0; a--)
|
|
@@ -299,10 +299,10 @@ class s extends ie($) {
|
|
|
299
299
|
super(...arguments), this.headingLevel = "h2", this.hasBackButton = !1, this.hasStackedActions = !1, this.isDismissible = !1, this.isFooterPinned = !0, this.isFullWidthBelowMid = !1, this.isLoading = !1, this.isOpen = !1, this.position = "center", this.size = "medium", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
|
|
300
300
|
this.isDismissible || e.preventDefault();
|
|
301
301
|
}, this._handleDialogLightDismiss = (e) => {
|
|
302
|
-
var
|
|
302
|
+
var g;
|
|
303
303
|
if (!this.isDismissible)
|
|
304
304
|
return;
|
|
305
|
-
const t = (
|
|
305
|
+
const t = (g = this._dialog) == null ? void 0 : g.getBoundingClientRect(), {
|
|
306
306
|
top: i = 0,
|
|
307
307
|
bottom: o = 0,
|
|
308
308
|
left: a = 0,
|
|
@@ -347,7 +347,7 @@ class s extends ie($) {
|
|
|
347
347
|
_handleModalClosed() {
|
|
348
348
|
var t, i;
|
|
349
349
|
const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
|
|
350
|
-
e &&
|
|
350
|
+
e && _e(e), (i = this._dialog) == null || i.close(), this._returnFocus();
|
|
351
351
|
}
|
|
352
352
|
// Handles the value of the isOpen property on first render of the component
|
|
353
353
|
_handleModalOpenStateOnFirstRender(e) {
|
|
@@ -485,7 +485,7 @@ class s extends ie($) {
|
|
|
485
485
|
headingLevel: a = "h2",
|
|
486
486
|
isDismissible: r,
|
|
487
487
|
isFooterPinned: h,
|
|
488
|
-
isFullWidthBelowMid:
|
|
488
|
+
isFullWidthBelowMid: g,
|
|
489
489
|
isLoading: L,
|
|
490
490
|
leadingAction: G,
|
|
491
491
|
position: X,
|
|
@@ -503,7 +503,7 @@ class s extends ie($) {
|
|
|
503
503
|
?hasStackedActions=${i}
|
|
504
504
|
?isDismissible=${r}
|
|
505
505
|
?isFooterPinned=${h}
|
|
506
|
-
?isFullWidthBelowMid=${
|
|
506
|
+
?isFullWidthBelowMid=${g}
|
|
507
507
|
?isLoading=${L}
|
|
508
508
|
aria-busy="${L ? "true" : "false"}"
|
|
509
509
|
aria-label="${L && (e == null ? void 0 : e.loading) || c}"
|
|
@@ -524,7 +524,7 @@ class s extends ie($) {
|
|
|
524
524
|
</dialog>`;
|
|
525
525
|
}
|
|
526
526
|
}
|
|
527
|
-
s.styles = ee(
|
|
527
|
+
s.styles = ee(ze);
|
|
528
528
|
d([
|
|
529
529
|
l({ type: Object })
|
|
530
530
|
], s.prototype, "aria", 2);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-modal",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.29.0",
|
|
4
4
|
"description": "PIE design system modal built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
"license": "Apache-2.0",
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@justeat/pie-design-tokens": "5.8.2",
|
|
32
|
-
"@justeattakeaway/pie-button": "0.
|
|
32
|
+
"@justeattakeaway/pie-button": "0.34.0",
|
|
33
33
|
"@justeattakeaway/pie-components-config": "0.4.0",
|
|
34
34
|
"@justeattakeaway/pie-icon-button": "0.18.0",
|
|
35
|
-
"@justeattakeaway/pie-icons-webc": "0.11.
|
|
35
|
+
"@justeattakeaway/pie-icons-webc": "0.11.1",
|
|
36
36
|
"@justeattakeaway/pie-webc-core": "0.11.0",
|
|
37
|
-
"@types/body-scroll-lock": "3.1.
|
|
37
|
+
"@types/body-scroll-lock": "3.1.1"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"body-scroll-lock": "3.1.5"
|
package/src/modal.scss
CHANGED
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
|
|
41
41
|
// We need to override the icon sizes at different screen sizes regardless of size prop passed in
|
|
42
42
|
pie-icon-button {
|
|
43
|
-
@media (max-width: $breakpoint-wide) {
|
|
43
|
+
@media (max-width: calc($breakpoint-wide - 1px)) {
|
|
44
44
|
--btn-dimension: 40px;
|
|
45
45
|
}
|
|
46
46
|
}
|
|
@@ -172,8 +172,8 @@
|
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
& .c-modal-heading {
|
|
175
|
-
--modal-header-font-size: calc(var(--dt-font-heading-m-size--
|
|
176
|
-
--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--
|
|
175
|
+
--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);
|
|
176
|
+
--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);
|
|
177
177
|
--modal-header-font-weight: var(--dt-font-heading-m-weight);
|
|
178
178
|
|
|
179
179
|
font-size: var(--modal-header-font-size);
|
|
@@ -186,6 +186,8 @@
|
|
|
186
186
|
margin-block: 14px; // This is deliberately not a custom property
|
|
187
187
|
|
|
188
188
|
@media (min-width: $breakpoint-wide) {
|
|
189
|
+
--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
|
|
190
|
+
--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
|
|
189
191
|
margin-inline: var(--dt-spacing-e);
|
|
190
192
|
margin-block: 20px; // This is deliberately not a custom property
|
|
191
193
|
}
|
|
@@ -231,32 +233,6 @@
|
|
|
231
233
|
}
|
|
232
234
|
}
|
|
233
235
|
|
|
234
|
-
&[isfooterpinned] .c-modal-content,
|
|
235
|
-
& .c-modal-scrollContainer {
|
|
236
|
-
overflow-y: auto;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
& .c-modal-scrollContainer {
|
|
240
|
-
// These are the shadows used to indicate scrolling above and below content
|
|
241
|
-
--bg-scroll-start: linear-gradient(var(--dt-color-container-default) 30%, rgba(255, 255, 255, 0));
|
|
242
|
-
--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;
|
|
243
|
-
--bg-scroll-top: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
|
|
244
|
-
--bg-scroll-bottom: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%;
|
|
245
|
-
|
|
246
|
-
// Sizes of the scroll shadows
|
|
247
|
-
--bg-size-scroll-start: 100% 40px;
|
|
248
|
-
--bg-size-scroll-end: 100% 40px;
|
|
249
|
-
--bg-size-scroll-top: 100% 16px;
|
|
250
|
-
--bg-size-scroll-bottom: 100% 16px;
|
|
251
|
-
|
|
252
|
-
background: var(--bg-scroll-start), var(--bg-scroll-end), var(--bg-scroll-top), var(--bg-scroll-bottom);
|
|
253
|
-
background-repeat: no-repeat;
|
|
254
|
-
background-color: var(--dt-color-container-default);
|
|
255
|
-
background-size: var(--bg-size-scroll-start), var(--bg-size-scroll-end), var(--bg-size-scroll-top), var(--bg-size-scroll-bottom);
|
|
256
|
-
|
|
257
|
-
background-attachment: local, local, scroll, scroll;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
236
|
& .c-modal-content {
|
|
261
237
|
// Modal content Custom Props
|
|
262
238
|
--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);
|
|
@@ -295,6 +271,7 @@
|
|
|
295
271
|
|
|
296
272
|
padding-inline: var(--modal-content-padding-inline);
|
|
297
273
|
padding-block: var(--modal-content-padding-block);
|
|
274
|
+
flex-grow: 1;
|
|
298
275
|
|
|
299
276
|
&--scrollable {
|
|
300
277
|
background:
|
|
@@ -335,6 +312,35 @@
|
|
|
335
312
|
}
|
|
336
313
|
}
|
|
337
314
|
|
|
315
|
+
& > .c-modal-scrollContainer {
|
|
316
|
+
display: flex;
|
|
317
|
+
flex-direction: column;
|
|
318
|
+
height: 100%;
|
|
319
|
+
overflow-y: auto;
|
|
320
|
+
|
|
321
|
+
// These are the shadows used to indicate scrolling above and below content
|
|
322
|
+
--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;
|
|
323
|
+
--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%;
|
|
324
|
+
|
|
325
|
+
// Sizes of the scroll shadows
|
|
326
|
+
--bg-size-scroll-end: 100% 40px;
|
|
327
|
+
--bg-size-scroll-bottom: 100% 8px;
|
|
328
|
+
|
|
329
|
+
background: var(--bg-scroll-end), var(--bg-scroll-bottom);
|
|
330
|
+
background-repeat: no-repeat;
|
|
331
|
+
background-size: var(--bg-size-scroll-end), var(--bg-size-scroll-bottom);
|
|
332
|
+
|
|
333
|
+
background-attachment: local, scroll;
|
|
334
|
+
|
|
335
|
+
.c-modal-content {
|
|
336
|
+
flex-shrink: 0;
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
&[isfooterpinned] .c-modal-content {
|
|
341
|
+
overflow-y: auto;
|
|
342
|
+
}
|
|
343
|
+
|
|
338
344
|
&[isLoading] .c-modal-content {
|
|
339
345
|
&:before {
|
|
340
346
|
animation: rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);
|
|
@@ -345,4 +351,13 @@
|
|
|
345
351
|
opacity: 0;
|
|
346
352
|
}
|
|
347
353
|
}
|
|
354
|
+
|
|
355
|
+
// removes the scroll shadow effect if "background-attachment" isn't supported.
|
|
356
|
+
// @supports (background-attachment: local) isn't used as Safari 14 recognizes the property but it has no effect.
|
|
357
|
+
// thus, "aspect-ratio" is used instead as it's only supported in Safari>=15
|
|
358
|
+
@supports not (aspect-ratio: 1 / 1) {
|
|
359
|
+
.c-modal-scrollContainer {
|
|
360
|
+
background: none;
|
|
361
|
+
}
|
|
362
|
+
}
|
|
348
363
|
}
|